:root {
 /* Color Palette */
 --primary-color: #3b82f6; /* Azul Profesional */
 --secondary-color: #6b7280; /* Gris Neutro */
 --background-light: #f9fafb; /* Blanco Limpio */
 --text-dark: #1f2937;
 --text-light: #ffffff;
 --accent-color: #ef4444; /* Rojo para acentos */
 --gradient-start: #3b82f6;
 --gradient-end: #ef4444; /* Added for gradient flow */
 --gradient-mid: #8b5cf6; /* Added for gradient flow */

 /* Glassmorphism */
 --glass-background: rgba(255, 255, 255, 0.15);
 --glass-border: rgba(255, 255, 255, 0.3);
 --glass-shadow: rgba(0, 0, 0, 0.1);
 --glass-backdrop-filter: blur(8px);

 /* Typography */
 --font-primary: 'Montserrat', sans-serif;
 --font-secondary: 'Poppins', sans-serif;
 --font-size-base: 1rem;
 --line-height-base: 1.6;

 /* Spacing */
 --spacing-xs: 0.5rem;
 --spacing-sm: 1rem;
 --spacing-md: 1.5rem;
 --spacing-lg: 2rem;
 --spacing-xl: 3rem;

 /* Border Radius */
 --border-radius-sm: 0.25rem;
 --border-radius-md: 0.5rem;
 --border-radius-lg: 0.75rem;

 /* Shadow */
 --shadow-sm: 0 1px 2px var(--glass-shadow);
 --shadow-md: 0 4px 6px -1px var(--glass-shadow), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --shadow-lg: 0 10px 15px -3px var(--glass-shadow), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Base Styles & Reset */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 scroll-behavior: smooth;
}

body {
 font-family: var(--font-secondary);
 font-size: var(--font-size-base);
 line-height: var(--line-height-base);
 color: var(--text-dark);
 background-color: var(--background-light);
 overflow-x: hidden;
}

a {
 color: var(--primary-color);
 text-decoration: none;
 transition: color 0.3s ease, transform 0.3s ease;
}

a:hover {
 color: var(--accent-color);
}

h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-primary);
 line-height: 1.2;
 margin-bottom: var(--spacing-md);
 color: var(--text-dark);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

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

.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 var(--spacing-md);
}

section {
 padding: var(--spacing-xl) 0;
 position: relative;
}

/* Utility Classes */
.text-center { text-align: center; }
.bg-light { background-color: var(--background-light); }
.bg-dark { background-color: var(--text-dark); color: var(--text-light); }

/* Buttons */
.cta-button {
 display: inline-block;
 padding: var(--spacing-sm) var(--spacing-lg);
 background: linear-gradient(45deg, var(--primary-color), var(--gradient-mid));
 color: var(--text-light);
 border: none;
 border-radius: var(--border-radius-md);
 font-size: 1rem;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: var(--shadow-md);
}

.cta-button:hover {
 transform: translateY(-3px);
 box-shadow: var(--shadow-lg);
 background: linear-gradient(45deg, var(--gradient-mid), var(--gradient-end));
}

.glass-button {
 background: var(--glass-background);
 border: 1px solid var(--glass-border);
 backdrop-filter: var(--glass-backdrop-filter);
 -webkit-backdrop-filter: var(--glass-backdrop-filter);
 color: var(--text-light);
 box-shadow: var(--shadow-md);
}

.glass-button:hover {
 background: rgba(255, 255, 255, 0.25);
 border-color: rgba(255, 255, 255, 0.5);
 color: var(--text-light);
}

.secondary-button {
 display: inline-block;
 padding: var(--spacing-sm) var(--spacing-lg);
 background: transparent;
 color: var(--primary-color);
 border: 2px solid var(--primary-color);
 border-radius: var(--border-radius-md);
 font-size: 1rem;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
}

.secondary-button:hover {
 background-color: var(--primary-color);
 color: var(--text-light);
 transform: translateY(-3px);
 box-shadow: var(--shadow-md);
}

.link-button {
 display: inline-block;
 color: var(--primary-color);
 font-weight: 500;
 margin-top: var(--spacing-sm);
 text-decoration: underline;
 transition: color 0.3s ease;
}

.link-button:hover {
 color: var(--accent-color);
}

/* Header */
.main-header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 background-color: transparent;
 transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

.main-header.scrolled {
 background-color: rgba(255, 255, 255, 0.7);
 backdrop-filter: blur(10px);
 box-shadow: var(--shadow-md);
}

.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: var(--spacing-sm) var(--spacing-md);
 max-width: 1200px;
 margin: 0 auto;
}

.logo {
 font-family: var(--font-primary);
 font-size: 1.8rem;
 font-weight: 700;
 color: var(--text-light);
 text-shadow: var(--shadow-sm);
}

.main-header.scrolled .logo {
 color: var(--primary-color);
}

.nav-links {
 list-style: none;
 display: flex;
 gap: var(--spacing-lg);
}

.nav-links a {
 color: var(--text-light);
 font-weight: 500;
 position: relative;
 padding: var(--spacing-xs) 0;
}

.main-header.scrolled .nav-links a {
 color: var(--text-dark);
}

.nav-links a::after {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 width: 0;
 height: 2px;
 background-color: var(--primary-color);
 transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
 width: 100%;
}

.nav-toggle {
 display: none;
 flex-direction: column;
 justify-content: space-between;
 width: 30px;
 height: 21px;
 background: transparent;
 border: none;
 cursor: pointer;
 padding: 0;
 z-index: 1010;
}

.nav-toggle span {
 display: block;
 width: 100%;
 height: 3px;
 background-color: var(--text-light);
 border-radius: 2px;
 transition: all 0.3s ease;
}

.main-header.scrolled .nav-toggle span {
 background-color: var(--primary-color);
}

.nav-toggle.active span:nth-child(1) {
 transform: translateY(9px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
 opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
 transform: translateY(-9px) rotate(-45deg);
}

/* Hero Section */
.hero-section {
 position: relative;
 height: 80vh;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 color: var(--text-light);
 overflow: hidden;
 background: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
 background-size: 400% 400%;
 animation: gradientShift 15s ease infinite;
 padding-top: 80px; /* Adjust for fixed header */
}

@keyframes gradientShift {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}

.hero-content {
 z-index: 10;
 max-width: 800px;
 padding: var(--spacing-md);
 backdrop-filter: var(--glass-backdrop-filter);
 background: rgba(0,0,0,0.1);
 border-radius: var(--border-radius-lg);
 border: 1px solid rgba(255,255,255,0.2);
 box-shadow: var(--shadow-lg);
}

.hero-content h1 {
 font-size: 3.5rem;
 font-weight: 700;
 margin-bottom: var(--spacing-md);
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 color: var(--text-light);
}

.hero-content p {
 font-size: 1.3rem;
 margin-bottom: var(--spacing-xl);
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Dynamic gradient background for sections -- Gradient Flow */
.gradient-bg {
 background: linear-gradient(135deg, var(--primary-color), var(--gradient-mid));
 background-size: 200% 200%;
 animation: gradientColors 10s ease infinite;
 color: var(--text-light);
 padding: var(--spacing-xl) 0;
}

.gradient-bg h2, .gradient-bg p {
 color: var(--text-light);
}

@keyframes gradientColors {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}

/* Glass Card */
.glass-card {
 background: var(--glass-background);
 border: 1px solid var(--glass-border);
 backdrop-filter: var(--glass-backdrop-filter);
 -webkit-backdrop-filter: var(--glass-backdrop-filter);
 border-radius: var(--border-radius-lg);
 box-shadow: var(--shadow-lg);
 padding: var(--spacing-xl);
 text-align: center;
 margin: var(--spacing-xl) auto;
}

/* Intro Section */
.intro-section .glass-card {
 max-width: 900px;
}

/* Features Section */
.features-section {
 padding: var(--spacing-xl) 0;
 background-color: var(--background-light);
}

.features-section h2 {
 text-align: center;
 margin-bottom: var(--spacing-xl);
}

.feature-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: var(--spacing-lg);
}

.feature-card {
 padding: var(--spacing-lg);
 text-align: center;
 box-shadow: var(--shadow-md);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-lg);
}

.feature-card img {
 margin: 0 auto var(--spacing-md);
 border-radius: var(--border-radius-md);
 width: 100%;
 max-height: 200px;
 object-fit: cover;
}

.feature-card h3 {
 color: var(--primary-color);
 margin-bottom: var(--spacing-sm);
}

/* Why Us Section */
.why-us-section {
 background-color: var(--primary-color);
 color: var(--text-light);
 padding: var(--spacing-xl) 0;
}

.why-us-section h2 {
 color: var(--text-light);
 text-align: center;
 margin-bottom: var(--spacing-xl);
}

.why-us-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--spacing-lg);
}

.why-us-item {
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.2);
 backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
 border-radius: var(--border-radius-md);
 padding: var(--spacing-lg);
 text-align: center;
 box-shadow: var(--shadow-md);
 transition: transform 0.3s ease;
}

.why-us-item:hover {
 transform: translateY(-5px);
}

.why-us-item h3 {
 color: var(--text-light);
 margin-bottom: var(--spacing-sm);
}

/* Testimonials Section */
.testimonials-section {
 padding: var(--spacing-xl) 0;
 background-color: var(--background-light);
 position: relative; /* For floating elements */
 overflow: hidden;
}

.testimonials-section::before {
 content: '';
 position: absolute;
 top: -50px;
 left: -50px;
 width: 200px;
 height: 200px;
 background: var(--gradient-mid);
 border-radius: 50%;
 opacity: 0.1;
 filter: blur(50px);
 animation: float1 15s infinite ease-in-out;
}

.testimonials-section::after {
 content: '';
 position: absolute;
 bottom: -50px;
 right: -50px;
 width: 150px;
 height: 150px;
 background: var(--gradient-end);
 border-radius: 50%;
 opacity: 0.15;
 filter: blur(60px);
 animation: float2 18s infinite ease-in-out;
}

@keyframes float1 {
 0%, 100% { transform: translate(0, 0); }
 50% { transform: translate(50px, 30px); }
}

@keyframes float2 {
 0%, 100% { transform: translate(0, 0); }
 50% { transform: translate(-40px, -20px); }
}

.testimonials-section .section-title {
 text-align: center;
 margin-bottom: var(--spacing-xl);
 color: var(--text-dark);
}

.testimonials-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: var(--spacing-lg);
}

.testimonial-card {
 background: var(--glass-background);
 border: 1px solid var(--glass-border);
 backdrop-filter: var(--glass-backdrop-filter);
 -webkit-backdrop-filter: var(--glass-backdrop-filter);
 border-radius: var(--border-radius-lg);
 padding: var(--spacing-lg);
 text-align: center;
 box-shadow: var(--shadow-lg);
 position: relative;
 overflow: hidden;
 z-index: 1;
}

.testimonial-card::before {
 content: '';
 position: absolute;
 top: 10px;
 left: 20px;
 font-size: 4rem;
 color: var(--primary-color);
 opacity: 0.1;
 z-index: -1;
}

.testimonial-avatar {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 object-fit: cover;
 margin: 0 auto var(--spacing-sm);
 border: 3px solid var(--primary-color);
}

.testimonial-text {
 font-style: italic;
 margin-bottom: var(--spacing-sm);
 color: var(--text-dark);
}

.testimonial-author {
 font-weight: 600;
 color: var(--secondary-color);
}

/* Blog Section (Preview) */
.blog-preview-section {
 background-color: var(--background-light);
 padding: var(--spacing-xl) 0;
}

.blog-preview-section h2 {
 text-align: center;
 margin-bottom: var(--spacing-xl);
}

.blog-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: var(--spacing-lg);
}

.blog-card {
 background-color: var(--text-light);
 border-radius: var(--border-radius-md);
 box-shadow: var(--shadow-md);
 overflow: hidden;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-lg);
}

.blog-card img {
 width: 100%;
 height: 200px;
 object-fit: cover;
}

.blog-card-content {
 padding: var(--spacing-lg);
}

.blog-card-content h3 {
 margin-bottom: var(--spacing-sm);
 color: var(--primary-color);
 font-size: 1.3rem;
}

.blog-card-content p {
 font-size: 0.95rem;
 color: var(--secondary-color);
 margin-bottom: var(--spacing-md);
}

.blog-card-content .link-button {
 text-align: left;
}

/* FAQ Section */
.faq-section {
 padding: var(--spacing-xl) 0;
 background-color: var(--background-light);
}

.faq-section h2 {
 text-align: center;
 margin-bottom: var(--spacing-xl);
}

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

.accordion-item {
 background-color: var(--text-light);
 border: 1px solid #e0e0e0;
 border-radius: var(--border-radius-md);
 margin-bottom: var(--spacing-sm);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
}

.accordion-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: var(--spacing-md);
 font-weight: 600;
 cursor: pointer;
 background-color: #f5f5f5;
 color: var(--primary-color);
 transition: background-color 0.3s ease;
}

.accordion-header:hover {
 background-color: #e0e0e0;
}

.accordion-header .icon {
 font-size: 1.2rem;
 transition: transform 0.3s ease;
}

.accordion-header.active .icon {
 transform: rotate(45deg);
}

.accordion-content {
 padding: 0 var(--spacing-md);
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.accordion-content.active {
 max-height: 200px; /* Adjust as needed */
 padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

.accordion-content p {
 margin-bottom: 0;
 color: var(--secondary-color);
}

/* CTA Newsletter Section */
.cta-newsletter-section {
 text-align: center;
 padding: var(--spacing-xl) 0;
 background: linear-gradient(90deg, var(--primary-color), var(--gradient-mid));
 color: var(--text-light);
 position: relative;
 overflow: hidden;
}

.cta-newsletter-section::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.8,104.54,47.88,141.67,61.94V0H0V59.13C114.1,32.23,310.16,40.11,321.39,56.44Z' class='shape-fill' fill='%236b7280' fill-opacity='0.1'%3E%3C/path%3E%3C/svg%3E") no-repeat center bottom;
 background-size: cover;
 opacity: 0.2;
 z-index: 0;
}

.cta-newsletter-section h2 {
 color: var(--text-light);
 margin-bottom: var(--spacing-md);
 position: relative;
 z-index: 1;
}

.cta-newsletter-section p {
 font-size: 1.1rem;
 margin-bottom: var(--spacing-lg);
 position: relative;
 z-index: 1;
}

.newsletter-form {
 display: flex;
 justify-content: center;
 gap: var(--spacing-sm);
 max-width: 600px;
 margin: 0 auto;
 position: relative;
 z-index: 1;
}

.newsletter-form input[type="email"] {
 flex-grow: 1;
 padding: var(--spacing-sm) var(--spacing-md);
 border: 1px solid rgba(255, 255, 255, 0.5);
 border-radius: var(--border-radius-md);
 background-color: rgba(255, 255, 255, 0.2);
 color: var(--text-light);
 font-size: 1rem;
 outline: none;
 transition: border-color 0.3s ease;
}

.newsletter-form input[type="email"]::placeholder {
 color: rgba(255, 255, 255, 0.7);
}

.newsletter-form input[type="email"]:focus {
 border-color: var(--text-light);
}

/* Footer */
.main-footer {
 background-color: var(--text-dark);
 color: rgba(255, 255, 255, 0.7);
 padding: var(--spacing-xl) 0 var(--spacing-md);
 font-size: 0.9rem;
 position: relative;
}

.main-footer::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 5px;
 background: linear-gradient(90deg, var(--primary-color), var(--gradient-mid), var(--gradient-end));
}

.footer-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: var(--spacing-lg);
 margin-bottom: var(--spacing-xl);
}

.footer-col h3, .footer-col h4 {
 color: var(--text-light);
 margin-bottom: var(--spacing-md);
 font-size: 1.1rem;
}

.footer-col ul {
 list-style: none;
}

.footer-col ul li {
 margin-bottom: var(--spacing-xs);
}

.footer-col ul li a {
 color: rgba(255, 255, 255, 0.7);
 transition: color 0.3s ease;
}

.footer-col ul li a:hover {
 color: var(--primary-color);
}

.footer-col p a {
 color: rgba(255, 255, 255, 0.8);
}
.footer-col p a:hover {
 color: var(--primary-color);
}

.footer-bottom {
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 padding-top: var(--spacing-md);
 text-align: center;
 font-size: 0.8rem;
}

/* Specific Page Styling */
.section-hero-small {
 height: 40vh;
 min-height: 250px;
 background: linear-gradient(135deg, var(--primary-color), var(--gradient-mid));
 background-size: 400% 400%;
 animation: gradientShift 15s ease infinite;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-light);
 text-align: center;
 position: relative;
 overflow: hidden;
 padding-top: 80px;
}

.section-hero-small h1 {
 font-size: 3rem;
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 color: var(--text-light);
 z-index: 10;
}

/* Services Page */
.service-cards-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: var(--spacing-lg);
 margin-top: var(--spacing-xl);
}

.service-card {
 background-color: var(--text-light);
 border-radius: var(--border-radius-md);
 border: 1px solid #e0e0e0;
 box-shadow: var(--shadow-md);
 overflow: hidden;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-lg);
}

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

.service-card-content {
 padding: var(--spacing-lg);
}

.service-card-content h3 {
 color: var(--primary-color);
 margin-bottom: var(--spacing-sm);
 font-size: 1.4rem;
}
.service-card-content p {
 font-size: 0.95rem;
 color: var(--secondary-color);
 margin-bottom: var(--spacing-md);
}

.service-process {
 background-color: var(--background-light);
 padding: var(--spacing-xl) 0;
 text-align: center;
}

.process-step {
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: var(--spacing-md);
 gap: var(--spacing-md);
}

.process-step .icon {
 font-size: 2rem;
 color: var(--primary-color);
 width: 50px;
 height: 50px;
 line-height: 50px;
 border: 2px solid var(--primary-color);
 border-radius: 50%;
 background-color: var(--text-light);
 flex-shrink: 0;
}

.process-step p {
 text-align: left;
 max-width: 600px;
 margin: 0;
}

.process-grid {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-lg);
 max-width: 800px;
 margin: 0 auto;
}

/* About Page */
.about-content {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--spacing-xl);
 margin-bottom: var(--spacing-xl);
}

.about-content > div {
 flex: 1;
 min-width: 300px;
}

.about-content img {
 border-radius: var(--border-radius-lg);
 box-shadow: var(--shadow-lg);
}

.about-values {
 background-color: var(--primary-color);
 color: var(--text-light);
 padding: var(--spacing-xl) 0;
}

.about-values h2 {
 color: var(--text-light);
 text-align: center;
 margin-bottom: var(--spacing-xl);
}

.values-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: var(--spacing-lg);
}

.value-item {
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.2);
 backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
 border-radius: var(--border-radius-md);
 padding: var(--spacing-lg);
 text-align: center;
 box-shadow: var(--shadow-md);
}

.value-item h3 {
 color: var(--text-light);
 margin-bottom: var(--spacing-sm);
}

.team-section {
 background-color: var(--background-light);
 padding: var(--spacing-xl) 0;
 text-align: center;
}

.team-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--spacing-lg);
 margin-top: var(--spacing-xl);
}

.team-member-card {
 background-color: var(--text-light);
 border-radius: var(--border-radius-md);
 box-shadow: var(--shadow-md);
 padding: var(--spacing-lg);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member-card:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-lg);
}

.team-member-card img {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 object-fit: cover;
 margin: 0 auto var(--spacing-md);
 border: 3px solid var(--primary-color);
}

.team-member-card h3 {
 color: var(--primary-color);
 margin-bottom: var(--spacing-xs);
}

.team-member-card p {
 font-size: 0.95rem;
 color: var(--secondary-color);
}

/* Contact Page */
.contact-section {
 padding: var(--spacing-xl) 0;
 background-color: var(--background-light);
}

.contact-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--spacing-xl);
}

.contact-form-container {
 background-color: var(--text-light);
 padding: var(--spacing-xl);
 border-radius: var(--border-radius-lg);
 box-shadow: var(--shadow-lg);
}

.contact-form label {
 display: block;
 margin-bottom: var(--spacing-xs);
 font-weight: 500;
 color: var(--text-dark);
}

.contact-form input,
.contact-form textarea {
 width: 100%;
 padding: var(--spacing-sm);
 margin-bottom: var(--spacing-md);
 border: 1px solid #ccc;
 border-radius: var(--border-radius-sm);
 font-family: var(--font-secondary);
 font-size: 1rem;
}

.contact-info-section {
 background-color: var(--primary-color);
 color: var(--text-light);
 padding: var(--spacing-xl);
 border-radius: var(--border-radius-lg);
 box-shadow: var(--shadow-lg);
}

.contact-info p {
 margin-bottom: var(--spacing-sm);
 display: flex;
 align-items: center;
 gap: var(--spacing-sm);
 line-height: 1.4;
}

.contact-info p a {
 color: var(--text-light);
}
.contact-info p a:hover {
 color: var(--gradient-end);
}

.contact-info .icon {
 font-size: 1.2rem;
}

.map-container {
 margin-top: var(--spacing-xl);
 border-radius: var(--border-radius-lg);
 overflow: hidden;
 box-shadow: var(--shadow-lg);
}

.map-container iframe {
 width: 100%;
 height: 450px;
 border: 0;
}

/* Blog List Page */
.blog-list {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: var(--spacing-lg);
 margin-top: var(--spacing-xl);
}

.blog-post-card {
 background-color: var(--text-light);
 border-radius: var(--border-radius-md);
 box-shadow: var(--shadow-md);
 overflow: hidden;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-card:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-lg);
}

.blog-post-card img {
 width: 100%;
 height: 200px;
 object-fit: cover;
}

.blog-post-card-content {
 padding: var(--spacing-lg);
}

.blog-post-card-content h3 {
 margin-bottom: var(--spacing-sm);
 color: var(--primary-color);
 font-size: 1.3rem;
}

.blog-post-card-content p {
 font-size: 0.95rem;
 color: var(--secondary-color);
 margin-bottom: var(--spacing-md);
}

.blog-meta {
 font-size: 0.85rem;
 color: #999;
 margin-bottom: var(--spacing-sm);
}

/* Single Blog Post */
.blog-post-content {
 max-width: 800px;
 margin: var(--spacing-xl) auto;
 padding: var(--spacing-md);
 background-color: var(--text-light);
 border-radius: var(--border-radius-lg);
 box-shadow: var(--shadow-lg);
}

.blog-post-content h1 {
 color: var(--primary-color);
 margin-bottom: var(--spacing-md);
}

.blog-post-meta {
 font-size: 0.9rem;
 color: var(--secondary-color);
 margin-bottom: var(--spacing-lg);
 border-bottom: 1px solid #eee;
 padding-bottom: var(--spacing-sm);
}

.blog-post-meta span {
 margin-right: var(--spacing-md);
}

.blog-post-content p {
 margin-bottom: var(--spacing-md);
 line-height: 1.7;
}

.blog-post-content img {
 max-width: 100%;
 height: auto;
 margin: var(--spacing-md) 0;
 border-radius: var(--border-radius-md);
 box-shadow: var(--shadow-md);
}

.author-info {
 display: flex;
 align-items: center;
 gap: var(--spacing-md);
 margin-top: var(--spacing-xl);
 padding-top: var(--spacing-lg);
 border-top: 1px dashed #eee;
}

.author-info img {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 object-fit: cover;
 flex-shrink: 0;
 border: 2px solid var(--primary-color);
}

.author-details h4 {
 margin-bottom: var(--spacing-xs);
 color: var(--primary-color);
}

.author-details p {
 font-size: 0.9rem;
 color: var(--secondary-color);
 margin-bottom: 0;
}

/* Gallery Page */
.gallery-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--spacing-md);
 margin-top: var(--spacing-xl);
}

.gallery-item {
 cursor: pointer;
 overflow: hidden;
 border-radius: var(--border-radius-md);
 box-shadow: var(--shadow-md);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
 transform: translateY(-5px) scale(1.02);
 box-shadow: var(--shadow-lg);
}

.gallery-item img {
 width: 100%;
 height: 250px;
 object-fit: cover;
 display: block;
 transition: transform 0.3s ease;
}

.gallery-item:hover img {
 transform: scale(1.05);
}

/* Lightbox styles */
.lightbox {
 display: none;
 position: fixed;
 z-index: 2000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.8);
 justify-content: center;
 align-items: center;
}

.lightbox.active {
 display: flex;
}

.lightbox-content {
 max-width: 90%;
 max-height: 90%;
 animation: fadeIn 0.3s ease-out;
}

.lightbox-content img {
 width: auto;
 height: auto;
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;
 border-radius: var(--border-radius-md);
 box-shadow: var(--shadow-lg);
}

.lightbox-close {
 position: absolute;
 top: var(--spacing-md);
 right: var(--spacing-xl);
 color: var(--text-light);
 font-size: 2.5rem;
 cursor: pointer;
 transition: color 0.3s ease;
}

.lightbox-close:hover {
 color: var(--accent-color);
}

@keyframes fadeIn {
 from { opacity: 0; transform: scale(0.9); }
 to { opacity: 1; transform: scale(1); }
}

/* Legal Pages */
.legal-content {
 max-width: 900px;
 margin: var(--spacing-xl) auto;
 padding: var(--spacing-md);
 background-color: var(--text-light);
 border-radius: var(--border-radius-lg);
 box-shadow: var(--shadow-lg);
}

.legal-content h1 {
 color: var(--primary-color);
 margin-bottom: var(--spacing-md);
 text-align: center;
}

.legal-content h2 {
 color: var(--text-dark);
 margin-top: var(--spacing-xl);
 margin-bottom: var(--spacing-md);
}

.legal-content p, .legal-content ul, .legal-content ol {
 margin-bottom: var(--spacing-md);
 line-height: 1.7;
 color: var(--secondary-color);
}

.legal-content ul, .legal-content ol {
 margin-left: var(--spacing-lg);
}

/* Thanks Page */
.thanks-section {
 text-align: center;
 min-height: calc(100vh - 200px); /* Adjust for header/footer */
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: var(--spacing-xl);
}

.thanks-content {
 background-color: var(--text-light);
 padding: var(--spacing-xl);
 border-radius: var(--border-radius-lg);
 box-shadow: var(--shadow-lg);
 max-width: 700px;
}

.thanks-content h1 {
 color: var(--primary-color);
}

.thanks-content p {
 font-size: 1.2rem;
 margin-bottom: var(--spacing-xl);
}

/* 404 Page */
.error-section {
 text-align: center;
 min-height: calc(100vh - 200px);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: var(--spacing-xl);
}

.error-content {
 background-color: var(--text-light);
 padding: var(--spacing-xl);
 border-radius: var(--border-radius-lg);
 box-shadow: var(--shadow-lg);
 max-width: 700px;
}

.error-content h1 {
 font-size: 4rem;
 color: var(--accent-color);
 margin-bottom: var(--spacing-sm);
}

.error-content h2 {
 color: var(--text-dark);
 margin-bottom: var(--spacing-md);
}

.error-content p {
 font-size: 1.1rem;
 margin-bottom: var(--spacing-xl);
}

/* Responsive Design */
@media (max-width: 1024px) {
 .nav-links {
 gap: var(--spacing-md);
 }
 h1 { font-size: 2.2rem; }
 h2 { font-size: 1.8rem; }
 .hero-content h1 { font-size: 3rem; }
 .hero-content p { font-size: 1.1rem; }
 .section-hero-small h1 { font-size: 2.5rem; }

 .footer-grid {
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: var(--spacing-md);
 }
}

@media (max-width: 768px) {
 .navbar {
 padding: var(--spacing-sm) var(--spacing-sm);
 }
 .nav-links {
 display: none;
 flex-direction: column;
 position: absolute;
 top: 0;
 right: 0;
 background: rgba(0, 0, 0, 0.9);
 backdrop-filter: blur(15px);
 width: 70%;
 max-width: 300px;
 height: 100vh;
 padding: var(--spacing-xl) var(--spacing-lg);
 padding-top: 100px; /* Space for closing button */
 box-shadow: -5px 0 15px rgba(0, 0, 0, 0.4);
 transform: translateX(100%);
 transition: transform 0.4s ease-out;
 }

 .nav-links.active {
 display: flex;
 transform: translateX(0);
 }

 .nav-links li {
 margin-bottom: var(--spacing-md);
 text-align: center;
 }
 .nav-links a {
 font-size: 1.2rem;
 color: var(--text-light);
 padding: var(--spacing-sm) 0;
 display: block;
 }
 .main-header.scrolled .nav-links a {
 color: var(--text-light); /* Keep white in mobile menu */
 }

 .nav-toggle {
 display: flex;
 }
 .main-header.scrolled .nav-toggle span {
 background-color: var(--primary-color);
 }
 .nav-toggle.active span {
 background-color: var(--text-light); /* Always white when active */
 }

 .hero-section {
 height: 70vh;
 }
 .hero-content h1 {
 font-size: 2.5rem;
 }
 .hero-content p {
 font-size: 1rem;
 }
 .section-hero-small {
 height: 30vh;
 }
 .section-hero-small h1 {
 font-size: 2rem;
 }

 .feature-grid, .testimonials-grid, .why-us-grid, .blog-grid, .service-cards-grid, .values-grid, .team-grid, .contact-grid, .gallery-grid, .blog-list {
 grid-template-columns: 1fr;
 }

 .newsletter-form {
 flex-direction: column;
 gap: var(--spacing-sm);
 }

 .about-content {
 flex-direction: column;
 text-align: center;
 }
 .about-content img {
 width: 100%;
 max-width: 400px;
 }
 .contact-info-section {
 margin-top: var(--spacing-xl); /* to separate from form when column layout */
 }
}

@media (max-width: 480px) {
 h1 { font-size: 1.8rem; }
 h2 { font-size: 1.5rem; }
 .hero-content h1 {
 font-size: 2rem;
 }
 .hero-content p {
 font-size: 0.9rem;
 }
 .cta-button {
 padding: var(--spacing-sm) var(--spacing-md);
 font-size: 0.9rem;
 }
 .glass-card, .contact-form-container, .contact-info-section, .legal-content, .blog-post-content, .thanks-content, .error-content {
 padding: var(--spacing-lg);
 }

 .logo {
 font-size: 1.5rem;
 }

 .footer-grid {
 grid-template-columns: 1fr;
 text-align: center;
 }
 .footer-col ul {
 padding: 0;
 }
 .footer-bottom {
 padding-top: var(--spacing-md);
 }
}
/* Keyframe for floating geometric shapes in hero (if needed) */
@keyframes float {
 0% { transform: translate(0, 0); }
 50% { transform: translate(10px, 20px); }
 100% { transform: translate(0, 0); }
}

/* Example of floating elements in hero */
.hero-section::before,
.hero-section::after {
 content: '';
 position: absolute;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
 opacity: 0.8;
 animation: float 20s infinite ease-in-out;
 z-index: 5;
}

.hero-section::before {
 width: 200px;
 height: 200px;
 top: 10%;
 left: 15%;
 animation-delay: 0s;
}

.hero-section::after {
 width: 150px;
 height: 150px;
 bottom: 20%;
 right: 10%;
 animation-delay: 5s;
}

/* Wave dividers (if used) */
.wave-divider {
 position: relative;
 padding-bottom: 50px; /* Space for wave */
}

/* Specific wave for the CTA Newsletter */
.cta-newsletter-section {
 position: relative;
 padding-bottom: 80px; /* Height of the wave */
}

/* Overriding section wave to be more subtle if needed */
.cta-newsletter-section::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 80px; /* Height of the wave image */
 background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.16-16.33-250.45,.39-57.84,11.73-114,31-172,41.86A600.21,600.21,0,0,1,0,33.49V0H1200V54.77C1133.92,49.23,1060.03,58.33,985.66,92.83Z" fill="%23f9fafb"></path></svg>') no-repeat center bottom;
 background-size: cover;
 z-index: 1; /* Above other elements in section if any */
}

/* Ensure current year is updated */
#current-year {
 font-weight: normal;
}
/* Specific style for blog images within articles */
.blog-post-image {
 width: 100%;
 height: 350px;
 object-fit: cover;
 border-radius: var(--border-radius-md);
 margin-bottom: var(--spacing-lg);
 box-shadow: var(--shadow-md);
}

/* Service card hover effect detail */
.service-card:hover h3 {
 color: var(--accent-color);
}

/* About Us section, two columns with image and text */
.about-section {
 padding: var(--spacing-xl) 0;
 background-color: var(--background-light);
}

.about-content-reverse {
 flex-direction: row-reverse;
}

/* Team section text */
.team-section .container > p {
 max-width: 800px;
 margin: 0 auto var(--spacing-xl);
 text-align: center;
 color: var(--secondary-color);
}

/* Gallery image hover effect */
.gallery-item img {
 transform: scale(1);
 transition: transform 0.3s ease-in-out;
}

.gallery-item:hover img {
 transform: scale(1.08); /* Slightly more zoom on hover */
}

/* Accessibility for accordions */
.accordion-header[aria-expanded="true"] .icon {
 transform: rotate(45deg);
}

.accordion-item:focus-within {
 outline: 2px solid var(--primary-color);
 outline-offset: 2px;
}

/* Blog post comments (if needed, placeholder) */
.comment-section {
 margin-top: var(--spacing-xl);
 border-top: 1px dashed #eee;
 padding-top: var(--spacing-xl);
}

.comment-form textarea {
 min-height: 120px;
}
/* Ensure logo is always legible regardless of header scroll state */
.logo {
 color: var(--text-light); /* Default white for transparent header */
 transition: color 0.3s ease;
}

.main-header.scrolled .logo {
 color: var(--primary-color); /* Primary color when scrolled */
}
/* Add a specific gradient border for glass cards */
.glass-card-border {
 position: relative;
 background-clip: padding-box;
 padding: 2px; /* controls the thickness of the border */
 border-radius: var(--border-radius-lg);
}

.glass-card-border:before {
 content: '';
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -1;
 margin: -2px; /* same as padding */
 border-radius: inherit;
 background: linear-gradient(45deg, var(--primary-color), var(--gradient-mid), var(--gradient-end));
}
/* Add more glassmorphism to blog and legal pages elements */
.blog-post-card, .card.glass-card {
 background: var(--glass-background);
 border: 1px solid var(--glass-border);
 backdrop-filter: var(--glass-backdrop-filter);
 -webkit-backdrop-filter: var(--glass-backdrop-filter);
 box-shadow: var(--shadow-sm);
}

.legal-content {
 background: var(--glass-background);
 border: 1px solid var(--glass-border);
 backdrop-filter: var(--glass-backdrop-filter);
 -webkit-backdrop-filter: var(--glass-backdrop-filter);
 box-shadow: var(--shadow-lg);
}

/* Styling for forms */
.contact-form-container {
 background: var(--glass-background);
 border: 1px solid var(--glass-border);
 backdrop-filter: var(--glass-backdrop-filter);
 -webkit-backdrop-filter: var(--glass-backdrop-filter);
 box-shadow: var(--shadow-lg);
}

.contact-form input,
.contact-form textarea {
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.3);
 color: var(--text-dark); /* Ensure text is visible on light background */
 backdrop-filter: var(--glass-backdrop-filter);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
 color: var(--secondary-color);
}

.contact-form input:focus,
.contact-form textarea:focus {
 border-color: var(--primary-color);
 background: rgba(255, 255, 255, 0.3);
}

/* Small adjustments for floating elements of glassmorphism */
.testimonials-section::before,
.testimonials-section::after,
.hero-section::before,
.hero-section::after {
 border-radius: 50%;
 background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05)); /* Subtle gradient */
 border: 1px solid rgba(255,255,255,0.3);
 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 backdrop-filter: var(--glass-backdrop-filter);
 opacity: 1; /* Make them more visible */
 animation: floatingGlass 15s infinite ease-in-out;
}

@keyframes floatingGlass {
 0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
 33% { transform: translate(30px, 20px) scale(1.05); opacity: 0.9; }
 66% { transform: translate(-20px, -10px) scale(0.95); opacity: 0.7; }
 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
}

/* Ensure active nav link has strong visual feedback */
.nav-links a.active {
 font-weight: 700;
 color: var(--primary-color); /* For scrolled */
}

.main-header:not(.scrolled) .nav-links a.active {
 color: var(--text-light); /* For transparent hero */
}

.nav-links a.active::after {
 width: 100%;
}
/* Adjust main content padding to not be hidden by fixed header */
main {
 padding-top: 80px; /* Equivalent to header height. Adjust if header height changes */
}
/* Add this to your existing styles to enable the active class for navigation */
.main-header .navbar ul.nav-links li a.active {
 font-weight: 700;
 color: var(--primary-color); /* Example active color */
 transform: translateY(-2px);
}

.main-header.scrolled .navbar ul.nav-links li a.active {
 color: var(--primary-color); /* Keep primary color when scrolled */
}

/* For the transparent header state */
.main-header:not(.scrolled) .navbar ul.nav-links li a.active {
 color: var(--text-light); /* White for active link on transparent header */
}

.main-header:not(.scrolled) .navbar ul.nav-links li a.active::after {
 background-color: var(--text-light); /* White underline for active link on transparent header */
}

.main-header.scrolled .navbar ul.nav-links li a.active::after {
 background-color: var(--primary-color); /* Primary color underline when scrolled */
}
/* Adjust map container to break contact info from the map on smaller screens */
@media (max-width: 768px) {
 .contact-info-section {
 margin-bottom: var(--spacing-xl); /* Add space below contact info */
 }
}
/* Ensure the social icons in the footer are glass-like */
/* Assuming you'll add actual icons or generic placeholders. Example for a generic anchor. */
.footer-social-icons a {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 width: 40px;
 height: 40px;
 margin: 0 var(--spacing-xs);
 background: var(--glass-background);
 border: 1px solid var(--glass-border);
 backdrop-filter: var(--glass-backdrop-filter);
 border-radius: 50%;
 color: var(--text-light);
 font-size: 1.2rem;
 transition: all 0.3s ease;
 box-shadow: var(--shadow-sm);
}

.footer-social-icons a:hover {
 background: rgba(255, 255, 255, 0.25);
 border-color: rgba(255, 255, 255, 0.5);
 transform: translateY(-3px) scale(1.1);
 box-shadow: var(--shadow-md);
}

/* Add a container for social icons in the footer HTML */
.footer-col.brand-info {
 text-align: center;
}
.footer-social-icons {
 margin-top: var(--spacing-md);
 display: flex;
 justify-content: center;
}
/* Example icon styling, replace with actual icon font or SVG */
.footer-social-icons a::before {
 content: ""; /* Placeholder for social icon, e.g., font awesome */
}
.footer-social-icons a:nth-of-type(2)::before {
 content: "";
}
.footer-social-icons a:nth-of-type(3)::before {
 content: "";
}
/* Remove explicit text links if only icons are desired. If text desired, wrap in span. */
.footer-col.brand-info h3 {
 margin-bottom: var(--spacing-sm);
}
.footer-col.brand-info p {
 margin-bottom: var(--spacing-md);
}
/* Ensure buttons are visible on glassmorphic backgrounds */
.newsletter-form .cta-button {
 background: var(--gradient-end); /* Brighter for contrast */
 border: none; /* Override glass border for primary CTA */
}

/* Revert glass button style for general glass CTA buttons if they are distinct */
.cta-button.glass-button {
 background: var(--glass-background);
 border: 1px solid var(--glass-border);
 backdrop-filter: var(--glass-backdrop-filter);
 -webkit-backdrop-filter: var(--glass-backdrop-filter);
 color: var(--text-light);
}

.cta-button.glass-button:hover {
 background: rgba(255, 255, 255, 0.25);
 border-color: rgba(255, 255, 255, 0.5);
}