.required-asterisk {
 color: red;
}

.hero-section-custom {
 padding: 4rem 1rem;
 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
 color: white;
 text-align: center;
}

.hero-title {
 font-size: 2.5rem;
 font-weight: 800;
 margin-bottom: 1rem;
}

.hero-subtitle {
 font-size: 1.1rem;
 opacity: 0.95;
 max-width: 600px;
 margin: 0 auto;
}

.section-custom {
 padding: 4rem 1rem;
 background: white;
}

.two-column-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 3rem;
 align-items: center;
}

.team-image {
 width: 100%;
 border-radius: 12px;
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.gradient-heading {
 font-size: 2rem;
 font-weight: 800;
 margin-bottom: 1rem;
 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.body-text {
 color: #64748b;
 line-height: 1.8;
 margin-bottom: 1rem;
}

.section-light {
 padding: 4rem 1rem;
 background: #f8fafc;
}

.center-heading {
 font-size: 2rem;
 font-weight: 800;
 text-align: center;
 margin-bottom: 0.5rem;
 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.center-subtitle {
 text-align: center;
 color: #64748b;
 margin-bottom: 2rem;
}

.auto-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 2rem;
}

.feature-card {
 background: white;
 padding: 2rem;
 border-radius: 12px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 border-left: 4px solid #3b82f6;
}

.feature-header {
 display: flex;
 align-items: center;
 gap: 1rem;
 margin-bottom: 1rem;
}

.feature-icon {
 font-size: 1.5rem;
 color: #3b82f6;
}

.feature-title {
 font-weight: 700;
 font-size: 1.1rem;
}

.feature-text {
 color: #475569;
 line-height: 1.6;
}

.feature-card-secondary {
 border-left-color: #8b5cf6;
}

.feature-icon-secondary {
 color: #8b5cf6;
}

.feature-card-tertiary {
 border-left-color: #0d9488;
}

.feature-icon-tertiary {
 color: #0d9488;
}

.values-list {
 list-style: none;
 padding: 0;
 color: #475569;
 line-height: 1.8;
}

.value-item strong {
 color: #1e293b;
}

.honeytrap {
 display: none;
}


.faq-section {
 padding: 4rem 0;
 background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.faq-header {
 text-align: center;
 margin-bottom: 3rem;
}

.faq-title {
 font-size: 2.5rem;
 font-weight: 800;
 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin-bottom: 1rem;
}

.faq-subtitle {
 color: #64748b;
 font-size: 1.1rem;
 max-width: 600px;
 margin: 0 auto;
}

.faq-container {
 max-width: 800px;
 margin: 0 auto;
}

.faq-item {
 background: white;
 border-radius: 12px;
 margin-bottom: 1rem;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 border: 1px solid rgba(59, 130, 246, 0.1);
 transition: all 0.3s ease;
 overflow: hidden;
}

.faq-item:hover {
 box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
 border-color: rgba(59, 130, 246, 0.2);
}

.faq-question {
 width: 100%;
 padding: 1.5rem;
 background: none;
 border: none;
 text-align: left;
 font-size: 1.1rem;
 font-weight: 600;
 color: #1e293b;
 cursor: pointer;
 display: flex;
 justify-content: space-between;
 align-items: center;
 transition: all 0.3s ease;
}

.faq-question:hover {
 color: #3b82f6;
}

.faq-icon {
 font-size: 1.2rem;
 color: #3b82f6;
 transition: transform 0.3s ease;
 flex-shrink: 0;
 margin-left: 1rem;
}

.faq-item.active .faq-icon {
 transform: rotate(180deg);
}

.faq-answer {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.3s ease, padding 0.3s ease;
 padding: 0 1.5rem;
 color: #64748b;
 line-height: 1.7;
}

.faq-item.active .faq-answer {
 max-height: 500px;
 padding: 0 1.5rem 1.5rem 1.5rem;
}


@media (max-width: 768px) {
 .faq-section {
 padding: 2rem 0;
 }

 .faq-title {
 font-size: 2rem;
 }

 .faq-question {
 font-size: 1rem;
 padding: 1.25rem;
 }

 .faq-item.active .faq-answer {
 padding: 0 1.25rem 1.25rem 1.25rem;
 }
}


@media (max-width: 768px) {
 .hero-title {
 font-size: 2rem;
 }

 .gradient-heading {
 font-size: 1.5rem;
 }

 .center-heading {
 font-size: 1.5rem;
 }

 .two-column-grid {
 grid-template-columns: 1fr;
 gap: 2rem;
 }

 .hero-section-custom,
 .section-custom,
 .section-light {
 padding: 2rem 1rem;
 }

 
 .container {
 padding: 0 1rem;
 }

 
 img {
 max-width: 100%;
 height: auto;
 }

 
 body {
 font-size: 16px;
 }

 
 button,
 a,
 input,
 select,
 textarea {
 min-height: 44px;
 }

 
 .nav-links {
 text-align: center;
 }

 
 * {
 animation-duration: 0.2s !important;
 transition-duration: 0.2s !important;
 }
}


@media (max-width: 480px) {
 .hero-title {
 font-size: 1.75rem;
 }

 .gradient-heading,
 .center-heading {
 font-size: 1.25rem;
 }

 .hero-section-custom,
 .section-custom,
 .section-light {
 padding: 1.5rem 0.75rem;
 }

 .container {
 padding: 0 0.75rem;
 }

 
 .auto-grid,
 .two-column-grid {
 grid-template-columns: 1fr;
 gap: 1rem;
 }

 .feature-card {
 padding: 1.5rem;
 }
}


:root {
 --glossy-primary: #3b82f6;
 --glossy-secondary: #8b5cf6;
 --glossy-primary-rgb: 59, 130, 246;
 --glossy-secondary-rgb: 139, 92, 246;
 --glossy-text: #1e293b;
 --glossy-text-muted: #64748b;
 --glossy-light: #ffffff;
 --glossy-darker: #0f172a;
 --glossy-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
 --glossy-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);

 
 --brand-1: #3b82f6;
 --brand-2: #8b5cf6;
 --primary-blue: #0a66c2;
 --primary-blue-dark: #084482;
 --accent-teal: #0d9488;
 --accent-amber: #f59e0b;
 --neutral-dark: #1e293b;
 --neutral-gray: #64748b;
 --neutral-light: #f8fafc;
 --neutral-white: #ffffff;
 --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 --radius-sm: 0.375rem;
 --radius-md: 0.5rem;
 --radius-lg: 0.75rem;
 --radius-xl: 1rem;
}


html {
 scrollbar-gutter: stable;
}

body {
 background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
 color: var(--glossy-text);
 scrollbar-gutter: stable;
}


.glossy-section {
 position: relative;
 padding: 4rem 0;
 overflow: hidden;
}

.glossy-container {
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 1.5rem;
}


.glossy-title {
 font-size: 2.5rem;
 font-weight: 800;
 line-height: 1.1;
 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin-bottom: 1.5rem;
 text-align: center;
}

.glossy-subtitle {
 font-size: 1.25rem;
 color: var(--glossy-text-muted);
 line-height: 1.7;
 max-width: 700px;
 margin: 0 auto 2rem;
 text-align: center;
}

.glossy-heading {
 font-size: 2rem;
 font-weight: 800;
 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin-bottom: 0.75rem;
 text-align: center;
}


.glossy-service-card {
 background: #ffffff;
 border-radius: 20px;
 padding: 2rem;
 text-align: center;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 position: relative;
 overflow: hidden;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 border: 1px solid rgba(59, 130, 246, 0.1);
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.glossy-service-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
 border-color: rgba(59, 130, 246, 0.3);
 will-change: transform;
}

.service-icon-wrapper {
 width: 80px;
 height: 80px;
 margin: 0 auto 1.5rem;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, var(--glossy-primary), var(--glossy-secondary));
 border-radius: 50%;
 position: relative;
 box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
}

.service-icon-wrapper img {
 width: 40px;
 height: 40px;
 filter: brightness(0) invert(1);
}

.glossy-service-card h3 {
 font-size: 1.5rem;
 font-weight: 700;
 margin-bottom: 1rem;
 color: #1e293b;
}

.glossy-service-card p {
 color: #64748b;
 line-height: 1.6;
 margin-bottom: 1.5rem;
 flex-grow: 1;
}

.glossy-btn {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.875rem 2rem;
 font-size: 1rem;
 font-weight: 600;
 border-radius: 12px;
 text-decoration: none;
 transition: all 0.3s ease;
 border: none;
 cursor: pointer;
 margin-top: auto;
}

.glossy-btn-primary {
 background: linear-gradient(135deg, var(--glossy-primary), var(--glossy-secondary));
 color: white;
 box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.glossy-btn-primary:hover {
 transform: translateY(-3px);
 box-shadow: 0 12px 30px rgba(59, 130, 246, 0.4);
 will-change: transform;
}

.glossy-btn-secondary {
 background: transparent;
 color: var(--glossy-primary);
 border: 2px solid var(--glossy-primary);
}

.glossy-btn-secondary:hover {
 background: var(--glossy-primary);
 color: white;
 transform: translateY(-3px);
 will-change: transform;
}


.glossy-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 2rem;
 margin: 2rem 0;
}


.stats-section {
 background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
 padding: 4rem 0;
 margin: 2rem 0;
}

.stats-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 2rem;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1.5rem;
}

.stat-item {
 text-align: center;
 padding: 1.5rem;
 background: white;
 border-radius: 16px;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
 border: 1px solid rgba(59, 130, 246, 0.1);
}

.stat-number {
 font-size: 2.5rem;
 font-weight: 800;
 background: linear-gradient(135deg, var(--glossy-primary), var(--glossy-secondary));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 line-height: 1;
 margin-bottom: 0.5rem;
 display: block;
}

.stat-item div {
 font-size: 1.1rem;
 color: var(--glossy-text-muted);
 font-weight: 500;
}


.cta-section {
 background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
 padding: 3rem 2rem;
 border-radius: 20px;
 text-align: center;
 margin: 3rem 0;
}

.cta-section h3 {
 font-size: 2rem;
 margin-bottom: 1rem;
 background: linear-gradient(135deg, var(--glossy-primary), var(--glossy-secondary));
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

.cta-section p {
 font-size: 1.1rem;
 color: var(--glossy-text-muted);
 margin-bottom: 2rem;
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}

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


.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 padding: 0.875rem 2rem;
 font-size: 1rem;
 font-weight: 600;
 border-radius: 12px;
 text-decoration: none;
 transition: all 0.3s ease;
 border: none;
 cursor: pointer;
}

.btn-primary {
 background: linear-gradient(135deg, var(--glossy-primary), var(--glossy-secondary));
 color: white;
 box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
 transform: translateY(-3px);
 box-shadow: 0 12px 30px rgba(59, 130, 246, 0.4);
 will-change: transform;
}

.btn-secondary {
 background: transparent;
 color: var(--glossy-primary);
 border: 2px solid var(--glossy-primary);
}

.btn-secondary:hover {
 background: var(--glossy-primary);
 color: white;
 transform: translateY(-3px);
 will-change: transform;
}

.btn-outline {
 background: transparent;
 color: var(--glossy-primary);
 border: 2px solid var(--glossy-primary);
}

.btn-outline:hover {
 background: var(--glossy-primary);
 color: white;
 transform: translateY(-3px);
 will-change: transform;
}

.btn-large {
 padding: 1rem 2.5rem;
 font-size: 1.1rem;
}


.portfolio-preview,
.blog-preview {
 padding: 4rem 0;
}

.portfolio-preview h2,
.blog-preview h2 {
 font-size: 2.5rem;
 text-align: center;
 margin-bottom: 1rem;
 background: linear-gradient(135deg, var(--glossy-primary), var(--glossy-secondary));
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

.section-subtitle {
 text-align: center;
 font-size: 1.1rem;
 color: var(--glossy-text-muted);
 max-width: 800px;
 margin: 0 auto 2rem;
}


.portfolio-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 2rem;
 margin: 2rem 0;
}

.portfolio-item {
 position: relative;
 border-radius: 16px;
 overflow: hidden;
 height: 300px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 transition: transform 0.3s ease;
}

.portfolio-item:hover {
 transform: translateY(-5px);
 will-change: transform;
}

.portfolio-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.5s ease;
}


.portfolio-grid>a {
 display: block;
 color: inherit;
 text-decoration: none;
}


.portfolio-card {
 border: 1px solid #e5e7eb;
 border-radius: 18px;
 overflow: hidden;
 background: #fff;
 display: flex;
 flex-direction: column;
 height: 100%;
}

.portfolio-image {
 width: 100%;
 height: 220px;
 overflow: hidden;
 flex-shrink: 0;
 background: #f3f4f6;
}

.portfolio-image img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.portfolio-content {
 padding: 1.5rem;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
}


.portfolio-card:hover {
 transform: translateY(-6px);
 transition: transform 0.25s ease;
}

.portfolio-item:hover img {
 transform: scale(1.05);
 will-change: transform;
}

.portfolio-overlay {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
 padding: 2rem;
 color: white;
 transform: translateY(100%);
 transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
 transform: translateY(0);
}


.blog-cards {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 2rem;
 margin: 2rem 0;
}

.blog-card {
 background: white;
 border-radius: 16px;
 overflow: hidden;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 transition: transform 0.3s ease;
}

.blog-card:hover {
 transform: translateY(-5px);
 will-change: transform;
}

.blog-card-image {
 height: 200px;
 overflow: hidden;
}

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

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

.blog-card-content {
 padding: 1.5rem;
}

.blog-card-content h3 {
 font-size: 1.3rem;
 margin-bottom: 0.5rem;
 color: #1e293b;
}

.blog-card-content p {
 color: #64748b;
 margin-bottom: 1rem;
 line-height: 1.6;
}

.read-more {
 color: var(--glossy-primary);
 text-decoration: none;
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 transition: gap 0.3s ease;
}

.read-more:hover {
 gap: 0.75rem;
}


.faq {
 padding: 4rem 0;
}

.faq h2 {
 font-size: 2.5rem;
 text-align: center;
 margin-bottom: 2rem;
 background: linear-gradient(135deg, var(--glossy-primary), var(--glossy-secondary));
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

details {
 background: white;
 border-radius: 12px;
 padding: 1.5rem;
 margin-bottom: 1rem;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
 border: 1px solid rgba(59, 130, 246, 0.1);
}

details summary {
 font-weight: 600;
 font-size: 1.1rem;
 color: #1e293b;
 cursor: pointer;
 list-style: none;
 position: relative;
 padding-right: 2rem;
}

details summary::after {
 content: '+';
 position: absolute;
 right: 0;
 font-size: 1.5rem;
 color: var(--glossy-primary);
}

details[open] summary::after {
 content: '−';
}

details p {
 margin-top: 1rem;
 color: #64748b;
 line-height: 1.6;
}


.newsletter {
 padding: 4rem 0;
 background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
 text-align: center;
}

.newsletter h2 {
 font-size: 2.5rem;
 margin-bottom: 1rem;
 background: linear-gradient(135deg, var(--glossy-primary), var(--glossy-secondary));
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

.newsletter p {
 font-size: 1.1rem;
 color: var(--glossy-text-muted);
 margin-bottom: 2rem;
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}

.newsletter-form {
 max-width: 600px;
 margin: 0 auto;
}

.form-group {
 display: flex;
 gap: 1rem;
 margin-bottom: 1rem;
}

.form-group input {
 flex: 1;
 padding: 0.875rem 1rem;
 border: 2px solid #e5e7eb;
 border-radius: 12px;
 font-size: 1rem;
 transition: border-color 0.3s ease;
}

.form-group input:focus {
 outline: none;
 border-color: var(--glossy-primary);
}

.privacy-note {
 font-size: 0.9rem;
 color: #94a3b8;
 margin-top: 1rem;
}


input.error,
textarea.error,
select.error {
 border-color: #ef4444 !important;
 background-color: rgba(239, 68, 68, 0.05);
}

.error-message {
 color: #ef4444;
 font-size: 0.875rem;
 margin-top: 0.25rem;
 display: block;
 font-weight: 500;
}


@media (max-width: 768px) {
 .glossy-title {
 font-size: 2rem;
 }

 .glossy-heading {
 font-size: 1.8rem;
 }

 .glossy-section,
 .portfolio-preview,
 .blog-preview,
 .stats-section,
 .faq,
 .newsletter {
 padding: 3rem 0;
 margin-bottom: 2rem;
 }

 .glossy-grid,
 .portfolio-grid,
 .blog-cards {
 grid-template-columns: 1fr;
 gap: 1.5rem;
 margin-bottom: 2rem;
 }

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

 .cta-buttons {
 flex-direction: column;
 align-items: center;
 gap: 1rem;
 margin: 2rem 0;
 }

 .cta-buttons .btn {
 width: 100%;
 max-width: 300px;
 margin-bottom: 1rem;
 }

 .form-group {
 flex-direction: column;
 }

 .form-group input {
 width: 100%;
 }

 
 .blog-preview {
 margin-top: 3rem;
 margin-bottom: 3rem;
 }

 .blog-preview h2,
 .blog-preview p {
 margin-bottom: 2rem;
 }

 .blog-cards {
 margin-bottom: 3rem;
 }

 
 .services-section,
 .testimonials-section,
 .expertise-section {
 padding: 4rem 0;
 margin-bottom: 2rem;
 }

 .services-section h2,
 .testimonials-section h2,
 .expertise-section h2 {
 margin-bottom: 2rem;
 }

 .services-section p,
 .testimonials-section p,
 .expertise-section p {
 margin-bottom: 2rem;
 }

 
 .cta-section {
 padding: 3rem 1.5rem;
 margin: 2rem 0;
 }

 .cta-section h2 {
 margin-bottom: 1.5rem;
 }

 .cta-section p {
 margin-bottom: 2rem;
 }
}


@media (max-width: 768px) {
 .mobile-menu-button {
 display: flex !important;
 align-items: center;
 justify-content: center;
 z-index: 100000;
 width: 50px;
 height: 50px;
 background: linear-gradient(135deg, #667eea, #764ba2);
 border: none;
 border-radius: 12px;
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }

 .mobile-menu-button span {
 display: block;
 width: 25px;
 height: 3px;
 background: white;
 border-radius: 3px;
 transition: all 0.3s ease;
 position: relative;
 }

 .mobile-menu-button span:nth-child(1) {
 transform: translateY(-8px);
 }

 .mobile-menu-button span:nth-child(2) {
 transform: translateY(0);
 }

 .mobile-menu-button span:nth-child(3) {
 transform: translateY(8px);
 }

 .mobile-menu-button.active span:nth-child(1) {
 transform: translateY(0) rotate(45deg);
 }

 .mobile-menu-button.active span:nth-child(3) {
 transform: translateY(0) rotate(-45deg);
 }

 .mobile-menu-button.active span:nth-child(2) {
 opacity: 0;
 }

 .nav-links {
 position: fixed;
 top: 0;
 right: -100%;
 width: 85%;
 height: 100vh;
 background: white;
 z-index: 99998;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
 padding: 3rem 2rem;
 transform: translateX(0);
 transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
 border-left: 3px solid rgba(102, 126, 234, 0.1);
 list-style: none;
 }

 .nav-links.active {
 right: 0;
 }

 .nav-links li {
 width: 100%;
 margin: 0.8rem 0;
 opacity: 0;
 transform: translateX(50px);
 transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .nav-links.active li {
 opacity: 1;
 transform: translateX(0);
 }

 .nav-links.active li:nth-child(1) {
 transition-delay: 0.1s;
 }

 .nav-links.active li:nth-child(2) {
 transition-delay: 0.2s;
 }

 .nav-links.active li:nth-child(3) {
 transition-delay: 0.3s;
 }

 .nav-links.active li:nth-child(4) {
 transition-delay: 0.4s;
 }

 .nav-links.active li:nth-child(5) {
 transition-delay: 0.5s;
 }

 .nav-links.active li:nth-child(6) {
 transition-delay: 0.6s;
 }

 .nav-links.active li:nth-child(7) {
 transition-delay: 0.7s;
 }

 .nav-link {
 display: flex;
 align-items: center;
 gap: 1rem;
 padding: 1.2rem 1.8rem;
 font-size: 1.1rem;
 font-weight: 600;
 color: #1e293b;
 text-decoration: none;
 border-radius: 12px;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 background: white;
 border: 2px solid transparent;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 cursor: pointer;
 pointer-events: auto;
 }

 .nav-link::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
 border-radius: 12px;
 opacity: 0;
 transition: opacity 0.3s ease;
 z-index: -1;
 }

 .nav-link:hover {
 color: #667eea;
 background: rgba(255, 255, 255, 0.9);
 border-color: rgba(102, 126, 234, 0.3);
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
 }

 .nav-link:hover::before {
 opacity: 1;
 }

 .nav-link:active {
 transform: translateY(0);
 }

 .nav-link.active {
 color: white;
 background: linear-gradient(135deg, #667eea, #764ba2);
 border-color: #667eea;
 box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
 }

 .nav-link.active::before {
 opacity: 1;
 background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
 }

 .nav-link svg {
 width: 20px;
 height: 20px;
 transition: transform 0.3s ease;
 }

 .nav-link:hover svg {
 transform: scale(1.1);
 color: #667eea;
 }

 .header-cta {
 display: none;
 }
}

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

 .glossy-title {
 font-size: 1.8rem;
 }

 .glossy-heading {
 font-size: 1.6rem;
 }

 
 section {
 margin-bottom: 3rem;
 padding: 2rem 1rem;
 }

 .container {
 padding: 0 1rem;
 }

 
 h2,
 h3 {
 margin-bottom: 1.5rem;
 line-height: 1.3;
 }

 p {
 margin-bottom: 1.5rem;
 line-height: 1.6;
 }

 
 .btn {
 margin: 0.5rem 0;
 min-height: 48px;
 }

 
 .blog-card,
 .portfolio-item,
 .service-card {
 margin-bottom: 2rem;
 }

 
 .blog-preview,
 .services-section,
 .testimonials-section,
 .expertise-section,
 .cta-section {
 clear: both;
 overflow: hidden;
 }
}




.main-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 background: rgba(255, 255, 255, 0.98);
 border-bottom: 1px solid rgba(59, 130, 246, 0.15);
 z-index: 9998;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 padding: 0.25rem 0;
 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.03);
 animation: headerSlideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes headerSlideDown {
 from {
 transform: translateY(-100%);
 opacity: 0;
 }

 to {
 transform: translateY(0);
 opacity: 1;
 }
}

.main-header.scrolled {
 background: rgba(255, 255, 255, 0.98);
 box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
 padding: 0.1rem 0;
 border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.main-header.scrolled .logo img {
 transform: scale(0.95);
}


body {
 margin: 0;
 padding: 0;
 overflow-x: hidden;
}

main {
 padding-top: 0 !important;
}


.header-container {
 max-width: 1400px;
 margin: 0 auto;
 padding: 0 1.5rem;
}


.main-nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0.5rem 0;
 gap: 2rem;
}


.logo {
 flex-shrink: 0;
}

.logo a {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 text-decoration: none;
 position: relative;
}

.logo img {
 height: 48px !important;
 width: auto;
 max-width: 180px;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.logo:hover img {
 transform: scale(1.05);
 filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.2));
}

.logo-text {
 display: none;
}


@media (min-width: 769px) {
 .nav-links {
 display: flex;
 gap: 0.25rem;
 list-style: none;
 margin: 0;
 padding: 0;
 flex: 1;
 justify-content: center;
 position: relative;
 width: auto;
 height: auto;
 background: none;
 backdrop-filter: none;
 z-index: 1;
 flex-direction: row;
 transform: none !important;
 opacity: 1 !important;
 visibility: visible !important;
 pointer-events: auto !important;
 }

 .nav-links li {
 position: relative;
 opacity: 1 !important;
 transform: none !important;
 pointer-events: auto !important;
 }

 .nav-link {
 color: #1e293b !important;
 text-decoration: none;
 font-weight: 600;
 font-size: 0.95rem;
 padding: 0.75rem 1.25rem !important;
 border-radius: 12px;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 position: relative;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 letter-spacing: 0.01em;
 background: transparent;
 border: 1px solid transparent;
 pointer-events: auto !important;
 z-index: 2;
 cursor: pointer;
 }

 .mobile-menu-button {
 display: none !important;
 
 }

 .header-cta {
 display: block;
 
 }

 .mobile-cta {
 display: none;
 
 }
}

.nav-link::before {
 content: '';
 position: absolute;
 bottom: 0;
 left: 50%;
 width: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--glossy-primary), var(--glossy-secondary));
 transform: translateX(-50%);
 transition: width 0.3s ease;
 border-radius: 1px;
}

.nav-link:hover {
 color: var(--glossy-primary) !important;
 background: rgba(59, 130, 246, 0.05);
 border: 1px solid rgba(59, 130, 246, 0.1);
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.nav-link:hover::before {
 width: 80%;
}

.nav-link.active {
 color: var(--glossy-primary) !important;
 background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
 border: 1px solid rgba(59, 130, 246, 0.2);
 font-weight: 700;
}

.nav-link.active::before {
 width: 100%;
 background: linear-gradient(90deg, var(--glossy-primary), var(--glossy-secondary));
}


.header-cta {
 flex-shrink: 0;
}

.header-contact-btn {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.75rem 1.5rem !important;
 background: linear-gradient(135deg, #2563eb, #1d4ed8);
 color: white !important;
 text-decoration: none;
 font-weight: 700;
 font-size: 0.95rem;
 border-radius: 12px;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 border: none;
 cursor: pointer;
 box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
 position: relative;
 overflow: hidden;
 white-space: nowrap;
}

.header-contact-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.7s ease;
}

.header-contact-btn:hover {
 transform: translateY(-2px) scale(1.05);
 box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
}

.header-contact-btn:hover::before {
 left: 100%;
}


.mobile-menu-button {
 display: none;
 background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95));
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid rgba(59, 130, 246, 0.2);
 border-radius: 12px;
 width: 50px;
 height: 50px;
 position: relative;
 transition: all 0.3s ease;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 z-index: 10004;
 pointer-events: all !important;
 cursor: pointer !important;
}

.mobile-menu-button span,
.mobile-menu-button span::before,
.mobile-menu-button span::after {
 content: '';
 position: absolute;
 width: 20px;
 height: 2px;
 background: linear-gradient(90deg, var(--glossy-primary), var(--glossy-secondary));
 left: 12px;
 transition: all 0.3s ease;
 border-radius: 1px;
}

.mobile-menu-button span {
 top: 21px;
}

.mobile-menu-button span::before {
 top: -6px;
}

.mobile-menu-button span::after {
 top: 6px;
}

.mobile-menu-button[aria-expanded="true"] span {
 background: transparent;
}

.mobile-menu-button[aria-expanded="true"] span::before {
 transform: rotate(45deg);
 top: 0;
}

.mobile-menu-button[aria-expanded="true"] span::after {
 transform: rotate(-45deg);
 top: 0;
}

.mobile-menu-button:hover {
 background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
 border-color: rgba(59, 130, 246, 0.3);
 transform: scale(1.1);
 box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.nav-link:hover {
 color: var(--glossy-primary) !important;
 background: rgba(59, 130, 246, 0.05);
 border: 1px solid rgba(59, 130, 246, 0.1);
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.nav-link:hover::before {
 width: 80%;
}

.nav-link.active {
 color: var(--glossy-primary) !important;
 background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
 border: 1px solid rgba(59, 130, 246, 0.2);
 font-weight: 700;
}

.nav-link.active::before {
 width: 100%;
 background: linear-gradient(90deg, var(--glossy-primary), var(--glossy-secondary));
}


.header-cta {
 flex-shrink: 0;
}

.header-contact-btn {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.75rem 1.5rem !important;
 background: linear-gradient(135deg, #2563eb, #1d4ed8);
 color: white !important;
 text-decoration: none;
 font-weight: 700;
 font-size: 0.95rem;
 border-radius: 12px;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 border: none;
 cursor: pointer;
 box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
 position: relative;
 overflow: hidden;
 white-space: nowrap;
}

.header-contact-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.7s ease;
}

.portfolio-hero {
 padding: 6rem 1rem 4rem;
 background: #0f172a;
 color: #fff;
 text-align: center;
}

.portfolio-hero h1 {
 font-size: 3rem;
 font-weight: 800;
 margin-bottom: 1rem;
}

.portfolio-hero p {
 max-width: 720px;
 margin: 0 auto;
 opacity: 0.9;
}

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

.stat-number {
 font-size: 2.2rem;
 font-weight: 800;
 display: block;
}

.stat-label {
 font-size: 0.85rem;
 text-transform: uppercase;
 opacity: 0.8;
}

.portfolio-filter {
 padding: 2rem 1rem;
 border-bottom: 1px solid #e5e7eb;
}

.filter-buttons {
 display: flex;
 gap: 0.75rem;
 flex-wrap: wrap;
 justify-content: center;
}

.filter-btn {
 padding: 0.6rem 1.2rem;
 border: 1px solid #cbd5e1;
 border-radius: 30px;
 background: #f8fafc;
 cursor: pointer;
}

.portfolio-grid-section {
 padding: 4rem 1rem;
}

.section-header {
 text-align: center;
 margin-bottom: 3rem;
}

.section-header h2 {
 font-size: 2.2rem;
 font-weight: 800;
}

.section-header p {
 max-width: 600px;
 margin: 1rem auto 0;
 color: #64748b;
}

.portfolio-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 1.5rem;
 padding: 0 1rem;
}

.portfolio-card {
 border: 1px solid #e5e7eb;
 border-radius: 18px;
 overflow: hidden;
 background: #fff;
}

.portfolio-image img {
 width: 100%;
 height: 220px;
 object-fit: cover;
}

.portfolio-content {
 padding: 1.5rem;
}

.portfolio-meta {
 display: flex;
 justify-content: space-between;
 font-size: 0.85rem;
 color: #475569;
}

.portfolio-content h3 {
 font-size: 1.3rem;
 margin: 0.8rem 0;
}

.portfolio-content p {
 font-size: 0.95rem;
 color: #64748b;
 line-height: 1.6;
}

.cta-section {
 padding: 4rem 1rem;
 background: #1d4ed8;
 color: #fff;
 text-align: center;
}

.cta-section h2 {
 font-size: 2.2rem;
 font-weight: 800;
 margin-bottom: 1rem;
}

.cta-section p {
 max-width: 640px;
 margin: 0 auto 2rem;
 opacity: 0.9;
}


@media (min-width: 640px) {
 .portfolio-grid {
 grid-template-columns: repeat(2, 1fr);
 padding: 0;
 }
}


@media (min-width: 1024px) {
 .portfolio-grid {
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 }
}


.main-footer {
 background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
 color: #e2e8f0;
 margin-top: 4rem;
 border-top: 1px solid rgba(148, 163, 184, 0.2);
 position: relative;
 overflow: hidden;
}

.main-footer::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
}

.main-footer .container {
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 1.5rem;
}


.footer-top {
 padding: 3rem 0;
 border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.footer-content {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 2rem;
 margin-bottom: 2rem;
}


.footer-section {
 display: flex;
 flex-direction: column;
}

.footer-about {
 flex: 1.2;
}

.footer-logo {
 display: inline-block;
 margin-bottom: 1rem;
 opacity: 0.9;
 transition: opacity 0.3s ease;
}

.footer-logo:hover {
 opacity: 1;
}

.footer-logo img {
 height: 50px;
 width: auto;
}

.footer-description {
 color: #cbd5e1;
 font-size: 0.95rem;
 line-height: 1.6;
 margin-bottom: 1.5rem;
}

.footer-contact-info {
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
}

.contact-link {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 color: #cbd5e1;
 text-decoration: none;
 font-size: 0.9rem;
 transition: all 0.3s ease;
 padding: 0.5rem;
 border-radius: 0.375rem;
 margin: -0.5rem;
 padding: 0.5rem;
}

.contact-link:hover {
 color: #3b82f6;
 background: rgba(59, 130, 246, 0.1);
 padding-left: 1rem;
}

.contact-link i {
 width: 18px;
 text-align: center;
 color: #3b82f6;
 font-size: 1rem;
}

.footer-heading {
 font-size: 1.1rem;
 font-weight: 700;
 margin-bottom: 1.25rem;
 color: #f1f5f9;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.footer-heading i {
 color: #3b82f6;
}

.footer-links {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}

.footer-links li {
 margin: 0;
}

.footer-links a {
 color: #cbd5e1;
 text-decoration: none;
 font-size: 0.9rem;
 transition: all 0.3s ease;
 padding: 0.5rem;
 border-radius: 0.375rem;
 display: inline-block;
 margin: -0.5rem;
}

.footer-links a:hover {
 color: #3b82f6;
 background: rgba(59, 130, 246, 0.1);
 padding-left: 1rem;
}


.footer-middle {
 padding: 2rem 0;
 border-bottom: 1px solid rgba(148, 163, 184, 0.15);
 display: flex;
 justify-content: center;
}

.social-links-section {
 text-align: center;
}

.social-heading {
 font-size: 1.1rem;
 font-weight: 700;
 margin-bottom: 1.5rem;
 color: #f1f5f9;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

.social-heading i {
 color: #3b82f6;
 font-size: 1.25rem;
}

.social-links {
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
}


.social-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
 color: #cbd5e1;
 text-decoration: none;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 border: 2px solid rgba(59, 130, 246, 0.3);
 font-size: 1.1rem;
 position: relative;
 overflow: hidden;
}

.social-icon::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
 transition: left 0.3s ease;
 z-index: -1;
 border-radius: 50%;
}

.social-icon:hover {
 color: #ffffff;
 border-color: #3b82f6;
 transform: translateY(-5px) scale(1.15);
 box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

.social-icon:hover::before {
 left: 0;
}

.social-label {
 font-size: 0.75rem;
 font-weight: 600;
 color: inherit;
 text-transform: uppercase;
 letter-spacing: 0.03em;
 margin-left: 0.25rem;
 opacity: 0;
 position: absolute;
 white-space: nowrap;
 pointer-events: none;
 transition: opacity 0.3s ease;
}

.social-icon:hover .social-label {
 opacity: 1;
 margin-left: 0.5rem;
}


.linkedin-icon {
 --icon-color: #0a66c2;
}

.linkedin-icon:hover {
 --icon-color: #0a66c2;
}

.facebook-icon {
 --icon-color: #1877f2;
}

.facebook-icon:hover {
 --icon-color: #1877f2;
}

.twitter-icon {
 --icon-color: #1da1f2;
}

.twitter-icon:hover {
 --icon-color: #1da1f2;
}

.instagram-icon {
 --icon-color: #e4405f;
}

.instagram-icon:hover {
 --icon-color: #e4405f;
}

.github-icon {
 --icon-color: #ffffff;
}

.github-icon:hover {
 --icon-color: #ffffff;
}


.footer-bottom {
 padding: 2rem 0;
 text-align: center;
 color: #94a3b8;
 font-size: 0.9rem;
}

.copyright {
 margin-bottom: 1rem;
 color: #cbd5e1;
}

.footer-legal {
 display: flex;
 gap: 2rem;
 justify-content: center;
 flex-wrap: wrap;
 margin-top: 1rem;
}

.footer-legal a {
 color: #cbd5e1;
 text-decoration: none;
 transition: color 0.3s ease;
}

.footer-legal a:hover {
 color: #3b82f6;
 text-decoration: underline;
}


.back-to-top {
 position: fixed;
 bottom: 2rem;
 right: 2rem;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
 color: #ffffff;
 text-decoration: none;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
 opacity: 0;
 visibility: hidden;
 z-index: 1000;
 font-size: 1.25rem;
}

.back-to-top:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6);
}

.back-to-top.visible {
 opacity: 1;
 visibility: visible;
}


@media (max-width: 768px) {
 .footer-top {
 padding: 2rem 0;
 }

 .footer-content {
 grid-template-columns: 1fr;
 gap: 1.5rem;
 }

 .social-heading {
 font-size: 1rem;
 }

 .social-links {
 gap: 0.75rem;
 }

 .social-icon {
 width: 45px;
 height: 45px;
 font-size: 1rem;
 }

 .footer-heading {
 font-size: 1rem;
 }

 .back-to-top {
 width: 45px;
 height: 45px;
 bottom: 1.5rem;
 right: 1.5rem;
 font-size: 1.1rem;
 }
}

@media (max-width: 480px) {
 .main-footer {
 margin-top: 2rem;
 }

 .footer-top {
 padding: 1.5rem 0;
 }

 .footer-content {
 gap: 1rem;
 }

 .footer-heading {
 font-size: 0.95rem;
 }

 .social-links {
 gap: 0.5rem;
 }

 .social-icon {
 width: 40px;
 height: 40px;
 font-size: 0.9rem;
 }

 .footer-bottom {
 padding: 1.5rem 0;
 font-size: 0.85rem;
 }

 .back-to-top {
 width: 40px;
 height: 40px;
 bottom: 1rem;
 right: 1rem;
 font-size: 1rem;
 }
}
}