/* --- TABLE OF CONTENTS ---
1.  Root Variables & Global Styles
2.  Utility Classes
3.  Header & Navigation
4.  Hero Section & Page Headers
4B. Hero Falling Stars Effect
5.  Shared Section Styles
6.  Homepage Sections (Services, Plans, Logos, Stats, Testimonials)
7.  Services Page
8.  Portfolio Page
9.  About Page
10. Blog Page
11. Contact Page
12. Footer
13. Modals (Quote & Portfolio)
14. Animations & Keyframes
15. Cookie Consent Banner
16. Responsive Design
-------------------------- */

/* 1. Root Variables & Global Styles */
:root {
    --bg-color-dark: #0a192f;
    --primary-color-dark: #000d20;
    --accent-color-dark: #64ffda;
    --text-color-dark: #ccd6f6;
    --subtle-text-color-dark: #8892b0;
    --card-bg-dark: #112240;
    --border-color-dark: #233554;
    --shadow-dark: rgba(2, 12, 27, 0.7);
    --bg-color-light: #f5f7fa;
    --primary-color-light: #ffffff;
    --accent-color-light: #0056b3;
    --text-color-light: #1c1e21;
    --subtle-text-color-light: #606770;
    --card-bg-light: #ffffff;
    --border-color-light: #e0e0e0;
    --shadow-light: rgba(100, 100, 111, 0.2);
    --font-primary: 'Poppins', sans-serif;
    --border-radius: 8px;
    --section-padding: 80px 0;
    --transition-speed: 0.3s ease;
}
body { background-color: var(--bg-color-dark); color: var(--text-color-dark); font-family: var(--font-primary); line-height: 1.6; margin: 0; transition: background-color var(--transition-speed), color var(--transition-speed); }
body.light-mode { background-color: var(--bg-color-light); color: var(--text-color-light); }
* { box-sizing: border-box; margin: 0; padding: 0; scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
a { color: var(--accent-color-dark); text-decoration: none; transition: color var(--transition-speed); }
body.light-mode a { color: var(--accent-color-light); }
ul { list-style: none; }
.container { width: 90%; max-width: 1100px; margin: 0 auto; }

/* 2. Utility Classes */
.section-padding { padding: var(--section-padding); }
.hidden { display: none; }
.highlight { color: var(--accent-color-dark); }
body.light-mode .highlight { color: var(--accent-color-light); }
.cta-button { background-color: var(--accent-color-dark); color: var(--bg-color-dark); padding: 12px 24px; border-radius: var(--border-radius); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border: 2px solid var(--accent-color-dark); cursor: pointer; transition: all var(--transition-speed); }
.cta-button:hover { background-color: transparent; color: var(--accent-color-dark); }
body.light-mode .cta-button { background-color: var(--accent-color-light); color: var(--primary-color-light); border-color: var(--accent-color-light); }
body.light-mode .cta-button:hover { background-color: transparent; color: var(--accent-color-light); }
.cta-button-outline { background-color: transparent; color: var(--accent-color-dark); padding: 12px 24px; border-radius: var(--border-radius); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border: 2px solid var(--accent-color-dark); cursor: pointer; transition: all var(--transition-speed); }
.cta-button-outline:hover { background-color: var(--accent-color-dark); color: var(--bg-color-dark); }
body.light-mode .cta-button-outline { color: var(--accent-color-light); border-color: var(--accent-color-light); }
body.light-mode .cta-button-outline:hover { background-color: var(--accent-color-light); color: var(--primary-color-light); }

/* 3. Header & Navigation */
.header { background-color: rgba(10, 25, 47, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color-dark); padding: 15px 0; position: fixed; width: 100%; top: 0; z-index: 1000; transition: background-color var(--transition-speed), border-color var(--transition-speed); }
body.light-mode .header { background-color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid var(--border-color-light); }
.navbar { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; width: 90%; max-width: 1200px; }
.nav-logo img { height: 40px; }
.logo-light { display: none; }
body.light-mode .logo-dark { display: none; }
body.light-mode .logo-light { display: block; }
.nav-menu { display: flex; gap: 30px; }
.nav-link { color: var(--text-color-dark); font-weight: 500; position: relative; padding: 5px 0; }
body.light-mode .nav-link { color: var(--text-color-light); }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent-color-dark); transition: width var(--transition-speed); }
body.light-mode .nav-link::after { background-color: var(--accent-color-light); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.theme-toggle { background: none; border: none; color: var(--text-color-dark); cursor: pointer; font-size: 20px; }
body.light-mode .theme-toggle { color: var(--text-color-light); }
.theme-toggle .fa-sun { display: none; }
.theme-toggle .fa-moon { display: block; }
body.light-mode .theme-toggle .fa-sun { display: block; }
body.light-mode .theme-toggle .fa-moon { display: none; }
.hamburger { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--text-color-dark); transition: all 0.3s ease-in-out; }
body.light-mode .bar { background-color: var(--text-color-light); }


/* 4. Hero Section & Page Headers */
.hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding-top: 80px; }
.animated-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: linear-gradient(45deg, #0a192f, #112240, #001e3c, #0a192f); background-size: 400% 400%; animation: gradientAnimation 15s ease infinite; }
body.light-mode .animated-background { background: linear-gradient(45deg, #e9f3ff, #f5f7fa, #ffffff, #e9f3ff); background-size: 400% 400%; }
.hero .container { position: relative; z-index: 4; }
.hero-title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; margin-bottom: 20px; }
.hero-subtitle { font-size: 1.25rem; color: var(--text-color-dark); margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; }
body.light-mode .hero-subtitle { color: var(--subtle-text-color-light); }
.hero-cta { padding: 15px 35px; font-size: 1.1rem; }
.page-header { background-color: var(--primary-color-dark); text-align: center; padding: 140px 0 60px; }
body.light-mode .page-header { background-color: var(--primary-color-light); border-bottom: 1px solid var(--border-color-light); }
.page-header-title { font-size: 3rem; margin-bottom: 10px; }
.page-header-subtitle { font-size: 1.2rem; color: var(--subtle-text-color-dark); max-width: 700px; margin: 0 auto; }
body.light-mode .page-header-subtitle { color: var(--subtle-text-color-light); }

/* 4B. Hero Falling Stars Effect */
#stars1, #stars2, #stars3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
#stars1 { width: 1px; height: 1px; background: transparent; box-shadow: 1831px 1587px #FFF, 1559px 338px #FFF, 148px 145px #FFF, 1032px 149px #FFF, 1615px 1290px #FFF, 1171px 1869px #FFF, 1146px 1388px #FFF, 1419px 129px #FFF, 1108px 1194px #FFF, 1111px 1133px #FFF, 1378px 1136px #FFF, 133px 1017px #FFF, 854px 1971px #FFF, 100px 147px #FFF, 192px 1046px #FFF, 969px 439px #FFF, 185px 1297px #FFF, 549px 1116px #FFF, 1871px 1456px #FFF, 1279px 1097px #FFF; animation: animStar 200s linear infinite; }
#stars2 { width: 2px; height: 2px; background: transparent; box-shadow: 471px 119px #FFF, 1434px 1149px #FFF, 1860px 1269px #FFF, 1085px 1731px #FFF, 16px 1600px #FFF, 420px 1801px #FFF, 442px 1162px #FFF, 1019px 1740px #FFF, 180px 1899px #FFF, 1413px 431px #FFF, 1239px 1690px #FFF, 1056px 671px #FFF, 1557px 112px #FFF, 1475px 819px #FFF, 32px 321px #FFF, 1836px 165px #FFF, 1389px 100px #FFF, 1386px 748px #FFF, 1422px 1406px #FFF, 353px 1815px #FFF; animation: animStar 150s linear infinite; }
#stars3 { width: 3px; height: 3px; background: transparent; box-shadow: 1732px 1393px #FFF, 1588px 1017px #FFF, 1694px 1829px #FFF, 248px 1120px #FFF, 34px 627px #FFF, 1888px 1588px #FFF, 1251px 1426px #FFF, 1870px 1764px #FFF, 1378px 895px #FFF, 1295px 1804px #FFF, 1188px 233px #FFF, 1024px 256px #FFF, 994px 1050px #FFF, 1632px 1686px #FFF, 1494px 167px #FFF, 172px 165px #FFF, 537px 110px #FFF, 1320px 1072px #FFF, 48px 1569px #FFF, 1146px 1425px #FFF; animation: animStar 100s linear infinite; }
body.light-mode #stars1, body.light-mode #stars2, body.light-mode #stars3 { display: none; }

/* 4B. Hero Falling Stars Effect */
#stars1, #stars2, #stars3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
#stars1 { width: 1px; height: 1px; background: transparent; box-shadow: 1831px 1587px #FFF, 1559px 338px #FFF, 148px 145px #FFF, 1032px 149px #FFF, 1615px 1290px #FFF, 1171px 1869px #FFF, 1146px 1388px #FFF, 1419px 129px #FFF, 1108px 1194px #FFF, 1111px 1133px #FFF, 1378px 1136px #FFF, 133px 1017px #FFF, 854px 1971px #FFF, 100px 147px #FFF, 192px 1046px #FFF, 969px 439px #FFF, 185px 1297px #FFF, 549px 1116px #FFF, 1871px 1456px #FFF, 1279px 1097px #FFF; animation: animStar 200s linear infinite; }
#stars2 { width: 2px; height: 2px; background: transparent; box-shadow: 471px 119px #FFF, 1434px 1149px #FFF, 1860px 1269px #FFF, 1085px 1731px #FFF, 16px 1600px #FFF, 420px 1801px #FFF, 442px 1162px #FFF, 1019px 1740px #FFF, 180px 1899px #FFF, 1413px 431px #FFF, 1239px 1690px #FFF, 1056px 671px #FFF, 1557px 112px #FFF, 1475px 819px #FFF, 32px 321px #FFF, 1836px 165px #FFF, 1389px 100px #FFF, 1386px 748px #FFF, 1422px 1406px #FFF, 353px 1815px #FFF; animation: animStar 150s linear infinite; }
#stars3 { width: 3px; height: 3px; background: transparent; box-shadow: 1732px 1393px #FFF, 1588px 1017px #FFF, 1694px 1829px #FFF, 248px 1120px #FFF, 34px 627px #FFF, 1888px 1588px #FFF, 1251px 1426px #FFF, 1870px 1764px #FFF, 1378px 895px #FFF, 1295px 1804px #FFF, 1188px 233px #FFF, 1024px 256px #FFF, 994px 1050px #FFF, 1632px 1686px #FFF, 1494px 167px #FFF, 172px 165px #FFF, 537px 110px #FFF, 1320px 1072px #FFF, 48px 1569px #FFF, 1146px 1425px #FFF; animation: animStar 100s linear infinite; }
body.light-mode #stars1, body.light-mode #stars2, body.light-mode #stars3 { display: none; }

/* 5. Shared Section Styles */
.section-header { text-align: center; margin-bottom: 60px; }
.section-title { font-size: 2.5rem; margin-bottom: 10px; position: relative; display: inline-block; }
.section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background-color: var(--accent-color-dark); border-radius: 2px; }
body.light-mode .section-title::after { background-color: var(--accent-color-light); }
.section-subtitle { font-size: 1.1rem; color: var(--subtle-text-color-dark); max-width: 600px; margin: 0 auto; }
body.light-mode .section-subtitle { color: var(--subtle-text-color-light); }

/* 6. Homepage Sections */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.service-card { background-color: var(--card-bg-dark); border: 1px solid var(--border-color-dark); padding: 40px 30px; border-radius: var(--border-radius); text-align: center; transition: transform var(--transition-speed), box-shadow var(--transition-speed); }
body.light-mode .service-card { background-color: var(--card-bg-light); border: 1px solid var(--border-color-light); box-shadow: 0 4px 6px var(--shadow-light); }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px -15px var(--shadow-dark); }
body.light-mode .service-card:hover { box-shadow: 0 8px 15px var(--shadow-light); }
.service-icon { font-size: 3rem; color: var(--accent-color-dark); margin-bottom: 20px; }
body.light-mode .service-icon { color: var(--accent-color-light); }
.service-title { font-size: 1.5rem; margin-bottom: 15px; }
.service-description { color: var(--subtle-text-color-dark); margin-bottom: 25px; }
body.light-mode .service-description { color: var(--subtle-text-color-light); }
.learn-more { font-weight: 600; }
.learn-more i { margin-left: 5px; transition: transform var(--transition-speed); }
.learn-more:hover i { transform: translateX(5px); }
.smart-plans-section { background-color: var(--primary-color-dark); }
body.light-mode .smart-plans-section { background-color: var(--primary-color-light); border-top: 1px solid var(--border-color-light); border-bottom: 1px solid var(--border-color-light); }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; align-items: stretch; }
.plan-card { background-color: var(--card-bg-dark); border: 1px solid var(--border-color-dark); border-radius: var(--border-radius); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; text-align: center; }
body.light-mode .plan-card { background-color: var(--card-bg-light); border-color: var(--border-color-light); box-shadow: 0 4px 15px var(--shadow-light); }
.plan-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px -15px var(--shadow-dark); }
.plan-image { width: 100%; height: 180px; object-fit: cover; }
.plan-content { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
.plan-card.popular { border-color: var(--accent-color-dark); transform: scale(1.05); }
body.light-mode .plan-card.popular { border-color: var(--accent-color-light); }
.plan-card.popular:hover { transform: scale(1.08) translateY(-10px); }
.popular-badge { position: absolute; top: 15px; right: -45px; background-color: var(--accent-color-dark); color: var(--bg-color-dark); padding: 5px 40px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; transform: rotate(45deg); z-index: 2; }
body.light-mode .popular-badge { background-color: var(--accent-color-light); color: var(--primary-color-light); }
.plan-title { font-size: 1.8rem; margin-bottom: 30px; }
.plan-features { list-style: none; padding: 0; margin-bottom: 40px; text-align: left; flex-grow: 1; }
.plan-features li { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; color: var(--subtle-text-color-dark); }
body.light-mode .plan-features li { color: var(--subtle-text-color-light); }
.plan-features li i { color: var(--accent-color-dark); flex-shrink: 0; }
body.light-mode .plan-features li i { color: var(--accent-color-light); }
.plan-buttons { display: flex; flex-direction: column; gap: 15px; margin-top: auto; }
.plan-buttons .cta-button, .plan-buttons .cta-button-outline { width: 100%; }
.client-logos { background-color: var(--primary-color-dark); padding: 60px 0; overflow-x: hidden; }
body.light-mode .client-logos { background-color: var(--bg-color-light); border-top: 1px solid var(--border-color-light); border-bottom: 1px solid var(--border-color-light); }
.client-logos-title { text-align: center; margin-bottom: 50px; font-size: 1.1rem; color: var(--subtle-text-color-dark); font-weight: 500; }
body.light-mode .client-logos-title { color: var(--subtle-text-color-light); }
.logos-slider { 
    width: 100%; 
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.logos-track { display: flex; animation: scrollLogos 40s linear infinite; }
.client-logo-container { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 50%; background-color: var(--card-bg-dark); border: 1px solid var(--border-color-dark); margin: 0 30px; flex-shrink: 0; position: relative; overflow: hidden; transition: all var(--transition-speed); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
body.light-mode .client-logo-container { background-color: var(--card-bg-light); border-color: var(--border-color-light); box-shadow: 0 5px 15px var(--shadow-light); }
.client-logo-container:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
body.light-mode .client-logo-container:hover { box-shadow: 0 10px 25px var(--shadow-light); }
.client-logo-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 40%); transform: rotate(45deg); opacity: 0; transition: opacity var(--transition-speed); }
.client-logo-container:hover::before { opacity: 1; }
.client-logo { width: 70%; height: auto; object-fit: contain; filter: grayscale(100%) opacity(0.6); transition: all var(--transition-speed); }
.client-logo-container:hover .client-logo { filter: grayscale(0%) opacity(1); }
.stats-section { background-color: var(--primary-color-dark); }
body.light-mode .stats-section { background-color: var(--primary-color-light); border-top: 1px solid var(--border-color-light); border-bottom: 1px solid var(--border-color-light); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; text-align: center; }
.stat-number { font-size: 3.5rem; font-weight: 700; color: var(--accent-color-dark); }
body.light-mode .stat-number { color: var(--accent-color-light); }
.stat-label { font-size: 1.1rem; color: var(--subtle-text-color-dark); }
body.light-mode .stat-label { color: var(--subtle-text-color-light); }
.testimonial-slider-wrapper { position: relative; max-width: 800px; margin: 0 auto; overflow: hidden; }
.testimonial-slider { display: flex; transition: transform var(--transition-speed); }
.testimonial-slide { flex: 0 0 100%; background-color: var(--card-bg-dark); border-radius: var(--border-radius); padding: 40px; text-align: center; border: 1px solid var(--border-color-dark); display: none; }
body.light-mode .testimonial-slide { background-color: var(--card-bg-light); border: 1px solid var(--border-color-light); box-shadow: 0 4px 6px var(--shadow-light); }
.testimonial-slide.active { display: block; }
.testimonial-text { font-size: 1.2rem; font-style: italic; margin-bottom: 30px; color: var(--subtle-text-color-dark); }
body.light-mode .testimonial-text { color: var(--subtle-text-color-light); }
.testimonial-author { display: flex; align-items: center; justify-content: center; gap: 15px; }
.author-img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--accent-color-dark); }
body.light-mode .author-img { border-color: var(--accent-color-light); }
.author-name { font-size: 1.1rem; }
.author-title { color: var(--subtle-text-color-dark); }
body.light-mode .author-title { color: var(--subtle-text-color-light); }
.slider-controls { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.slider-btn { background: var(--card-bg-dark); border: 1px solid var(--border-color-dark); color: var(--accent-color-dark); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: all var(--transition-speed); }
body.light-mode .slider-btn { background-color: var(--card-bg-light); border-color: var(--border-color-light); color: var(--accent-color-light); }
.slider-btn:hover { background-color: var(--accent-color-dark); color: var(--bg-color-dark); }
body.light-mode .slider-btn:hover { background-color: var(--accent-color-light); color: var(--bg-color-light); }


/* 7. Services Page */
.full-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.service-block { background-color: var(--card-bg-dark); border: 1px solid var(--border-color-dark); padding: 40px 30px; border-radius: var(--border-radius); display: flex; flex-direction: column; transition: transform var(--transition-speed), box-shadow var(--transition-speed); }
body.light-mode .service-block { background-color: var(--card-bg-light); border-color: var(--border-color-light); box-shadow: 0 4px 6px var(--shadow-light); }
.service-block:hover { transform: translateY(-5px); box-shadow: 0 10px 30px -15px var(--shadow-dark); }
body.light-mode .service-block:hover { box-shadow: 0 8px 15px var(--shadow-light); }
.service-block-icon { font-size: 2.5rem; color: var(--accent-color-dark); margin-bottom: 20px; }
body.light-mode .service-block-icon { color: var(--accent-color-light); }
.service-block-title { font-size: 1.4rem; margin-bottom: 15px; }
.service-block-description { color: var(--subtle-text-color-dark); margin-bottom: 25px; flex-grow: 1; }
body.light-mode .service-block-description { color: var(--subtle-text-color-light); }

/* 8. Portfolio Page */
.featured-project { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: center; margin-bottom: 80px; background-color: var(--card-bg-dark); border-radius: var(--border-radius); overflow: hidden; }
body.light-mode .featured-project { background-color: var(--card-bg-light); box-shadow: 0 4px 15px var(--shadow-light); }
.featured-project-image img { width: 100%; height: 100%; object-fit: cover; }
.featured-project-content { padding: 40px; }
.featured-tag { color: var(--accent-color-dark); font-weight: 600; margin-bottom: 10px; }
body.light-mode .featured-tag { color: var(--accent-color-light); }
.featured-project-title { font-size: 2rem; margin-bottom: 15px; }
.featured-project-description { color: var(--subtle-text-color-dark); margin-bottom: 20px; }
body.light-mode .featured-project-description { color: var(--subtle-text-color-light); }
.project-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.project-tags span { background-color: rgba(100, 255, 218, 0.1); color: var(--accent-color-dark); padding: 5px 10px; border-radius: 5px; font-size: 0.8rem; }
body.light-mode .project-tags span { background-color: rgba(0, 86, 179, 0.1); color: var(--accent-color-light); }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.portfolio-item { position: relative; border-radius: var(--border-radius); overflow: hidden; cursor: pointer; box-shadow: 0 10px 30px -15px var(--shadow-dark); }
.portfolio-item img { display: block; width: 100%; transition: transform 0.4s; }
.portfolio-item:hover img { transform: scale(1.05); }
.portfolio-item-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(10, 25, 47, 0.95), rgba(10, 25, 47, 0.1)); display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; opacity: 0; transition: opacity var(--transition-speed); }
body.light-mode .portfolio-item-overlay { background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.1)); }
.portfolio-item:hover .portfolio-item-overlay { opacity: 1; }
.portfolio-item-title { color: #fff; font-size: 1.4rem; transform: translateY(20px); transition: transform 0.4s; }
body.light-mode .portfolio-item-title { color: var(--text-color-light); }
.portfolio-item:hover .portfolio-item-title { transform: translateY(0); }
.portfolio-item-cta { color: var(--accent-color-dark); font-weight: 600; opacity: 0; transform: translateY(20px); transition: transform 0.4s, opacity 0.4s; transition-delay: 0.1s; }
body.light-mode .portfolio-item-cta { color: var(--accent-color-light); }
.portfolio-item:hover .portfolio-item-cta { opacity: 1; transform: translateY(0); }

/* 9. About Page */
.mission-vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.timeline-section { background-color: var(--primary-color-dark); }
body.light-mode .timeline-section { background-color: var(--primary-color-light); border-top: 1px solid var(--border-color-light); border-bottom: 1px solid var(--border-color-light); }
.timeline { position: relative; max-width: 800px; margin: 0 auto; }
.timeline::after { content: ''; position: absolute; width: 4px; background-color: var(--border-color-dark); top: 0; bottom: 0; left: 50%; margin-left: -2px; }
body.light-mode .timeline::after { background-color: var(--border-color-light); }
.timeline-item { padding: 10px 40px; position: relative; width: 50%; }
.timeline-item:nth-child(odd) { left: 0; }
.timeline-item:nth-child(even) { left: 50%; }
.timeline-dot { position: absolute; width: 20px; height: 20px; background-color: var(--accent-color-dark); border: 4px solid var(--bg-color-dark); border-radius: 50%; top: 20px; z-index: 1; }
body.light-mode .timeline-dot { border-color: var(--bg-color-light); }
.timeline-item:nth-child(odd) .timeline-dot { right: -10px; }
.timeline-item:nth-child(even) .timeline-dot { left: -10px; }
.timeline-content { padding: 20px 30px; background: var(--card-bg-dark); border-radius: var(--border-radius); border: 1px solid var(--border-color-dark); }
body.light-mode .timeline-content { background: var(--card-bg-light); border: 1px solid var(--border-color-light); box-shadow: 0 4px 6px var(--shadow-light); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.team-card { text-align: center; }
.team-card-image { position: relative; border-radius: 50%; overflow: hidden; width: 180px; height: 180px; margin: 0 auto 20px; border: 4px solid var(--border-color-dark); }
body.light-mode .team-card-image { border-color: var(--border-color-light); }
.team-card-image img { width: 100%; height: 100%; object-fit: cover; }
.team-card-socials { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 25, 47, 0.8); display: flex; justify-content: center; align-items: center; gap: 20px; opacity: 0; transition: opacity var(--transition-speed); }
body.light-mode .team-card-socials { background: rgba(255, 255, 255, 0.8); }
.team-card:hover .team-card-socials { opacity: 1; }
.team-card-socials a { color: var(--accent-color-dark); font-size: 1.5rem; }
body.light-mode .team-card-socials a { color: var(--accent-color-light); }
.team-card-name { font-size: 1.4rem; }
.team-card-title { color: var(--subtle-text-color-dark); }
body.light-mode .team-card-title { color: var(--subtle-text-color-light); }

/* 10. Blog Page */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.blog-card { background-color: var(--card-bg-dark); border-radius: var(--border-radius); overflow: hidden; border: 1px solid var(--border-color-dark); transition: transform var(--transition-speed), box-shadow var(--transition-speed); }
body.light-mode .blog-card { background-color: var(--card-bg-light); border-color: var(--border-color-light); box-shadow: 0 4px 6px var(--shadow-light); }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px -15px var(--shadow-dark); }
body.light-mode .blog-card:hover { box-shadow: 0 8px 15px var(--shadow-light); }
.blog-card-link { display: block; color: inherit; }
.blog-card-image { display: block; width: 100%; height: 200px; object-fit: cover; }
.blog-card-content { padding: 25px; }
.blog-card-category { color: var(--accent-color-dark); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
body.light-mode .blog-card-category { color: var(--accent-color-light); }
.blog-card-title { font-size: 1.4rem; margin: 10px 0; }
.blog-card-excerpt { color: var(--subtle-text-color-dark); margin-bottom: 20px; }
body.light-mode .blog-card-excerpt { color: var(--subtle-text-color-light); }
.blog-card-readmore { font-weight: 600; color: var(--accent-color-dark); }
body.light-mode .blog-card-readmore { color: var(--accent-color-light); }
.blog-card-readmore i { transition: transform var(--transition-speed); }
.blog-card:hover .blog-card-readmore i { transform: translateX(5px); }

/* 11. Contact Page */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.contact-heading { font-size: 1.8rem; margin-bottom: 30px; }
.contact-form .form-group { margin-bottom: 20px; }
.contact-form label { display: none; }
.contact-form input, .contact-form textarea { width: 100%; padding: 15px; background-color: var(--bg-color-dark); border: 1px solid var(--border-color-dark); color: var(--text-color-dark); border-radius: var(--border-radius); font-size: 1rem; font-family: var(--font-primary); transition: all 0.3s; }
body.light-mode .contact-form input, body.light-mode .contact-form textarea { background-color: var(--primary-color-light); border-color: var(--border-color-light); color: var(--text-color-light); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent-color-dark); box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.2); }
body.light-mode .contact-form input:focus, body.light-mode .contact-form textarea:focus { border-color: var(--accent-color-light); box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2); }
.contact-info-item { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 25px; }
.contact-info-item i { font-size: 1.5rem; color: var(--accent-color-dark); margin-top: 5px; }
body.light-mode .contact-info-item i { color: var(--accent-color-light); }
.contact-info-item h4 { font-size: 1.2rem; }
.contact-info-item p { color: var(--subtle-text-color-dark); }
body.light-mode .contact-info-item p { color: var(--subtle-text-color-light); }
.contact-map iframe { border-radius: var(--border-radius); filter: grayscale(1); }
body.light-mode .contact-map iframe { filter: none; }

/* 12. Footer */
.footer {
    background-color: var(--primary-color-dark);
    padding: 80px 0 30px;
    border-top: 1px solid var(--border-color-dark);
}
body.light-mode .footer {
    background-color: #e9ecef;
    border-top: 1px solid var(--border-color-light);
}

/* Part 1: Main Section (Logo/About + Newsletter) */
.footer-main {
    display: grid;
    grid-template-columns: 2fr 1.5fr;
    gap: 60px;
    align-items: center;
}
.footer-column.about {
    display: flex;
    align-items: center;
    gap: 20px;
}
.footer-logo-container {
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border-color-dark);
    transition: all var(--transition-speed);
    flex-shrink: 0;
}
body.light-mode .footer-logo-container {
    border-color: var(--border-color-light);
}
.footer-logo-container:hover {
    transform: scale(1.05);
    border-color: var(--accent-color-dark);
}
body.light-mode .footer-logo-container:hover {
    border-color: var(--accent-color-light);
}
.footer-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.footer-logo-img.logo-light { display: none; }
body.light-mode .footer-logo-img.logo-dark { display: none; }
body.light-mode .footer-logo-img.logo-light { display: block; }
.footer-brand-name {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.footer-about-text {
    color: var(--subtle-text-color-dark);
    font-size: 0.95rem;
    line-height: 1.7;
}
body.light-mode .footer-about-text {
    color: var(--subtle-text-color-light);
}
.footer-heading {
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.footer-column.newsletter p {
    color: var(--subtle-text-color-dark);
    margin-bottom: 20px;
}
body.light-mode .footer-column.newsletter p {
    color: var(--subtle-text-color-light);
}
.newsletter-form { display: flex; }
.newsletter-form input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid var(--border-color-dark);
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    outline: none;
    font-size: 1rem;
}
body.light-mode .newsletter-form input {
    border-color: var(--border-color-light);
    background-color: var(--bg-color-light);
    color: var(--text-color-light);
}
.newsletter-form button {
    padding: 12px 18px;
    background-color: var(--accent-color-dark);
    color: var(--bg-color-dark);
    border: 1px solid var(--accent-color-dark);
    cursor: pointer;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    transition: all var(--transition-speed);
    font-size: 1.1rem;
}
body.light-mode .newsletter-form button {
    background-color: var(--accent-color-light);
    color: var(--primary-color-light);
    border-color: var(--accent-color-light);
}
.newsletter-form button:hover { opacity: 0.8; }

/* Divider */
.footer-divider {
    border: none;
    height: 1px;
    background-color: var(--border-color-dark);
    margin: 50px 0;
}
body.light-mode .footer-divider {
    background-color: var(--border-color-light);
}

/* Part 2: Secondary Links Section */
.footer-secondary {
    display: grid;
    /* This rule now correctly creates 3 columns on desktop */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.footer-column ul li { margin-bottom: 12px; }
.footer-column ul li a {
    color: var(--subtle-text-color-dark);
    transition: color var(--transition-speed);
    position: relative;
    padding-left: 18px;
}
.footer-column ul li a::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--accent-color-dark);
    transition: all var(--transition-speed);
    opacity: 0;
}
body.light-mode .footer-column ul li a::before { color: var(--accent-color-light); }
.footer-column ul li a:hover {
    color: var(--accent-color-dark);
    padding-left: 22px;
}
body.light-mode .footer-column ul li a:hover { color: var(--accent-color-light); }
.footer-column ul li a:hover::before { opacity: 1; left: 5px; }
.footer-column.contact-info p {
    color: var(--subtle-text-color-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
body.light-mode .footer-column.contact-info p { color: var(--subtle-text-color-light); }
.footer-column.contact-info i {
    color: var(--accent-color-dark);
    margin-right: 15px;
    width: 20px;
    text-align: center;
}
body.light-mode .footer-column.contact-info i { color: var(--accent-color-light); }

/* Part 3: Bottom Bar */
.footer-bottom {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--subtle-text-color-dark);
    font-size: 0.9rem;
}
body.light-mode .footer-bottom {
    border-top: 1px solid var(--border-color-light);
    color: var(--subtle-text-color-light);
}
.social-links a {
    color: var(--subtle-text-color-dark);
    font-size: 1.3rem;
    margin-left: 25px;
    transition: color var(--transition-speed);
}
body.light-mode .social-links a { color: var(--subtle-text-color-light); }
.social-links a:hover {
    color: var(--accent-color-dark);
}
body.light-mode .social-links a:hover {
    color: var(--accent-color-light);
}

/* 13. Modals (Quote & Portfolio) */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; padding: 20px; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { background-color: var(--card-bg-dark); padding: 40px; border-radius: var(--border-radius); width: 100%; max-width: 650px; position: relative; transform: scale(0.95) translateY(-20px); transition: transform 0.3s, opacity 0.3s; opacity: 0; max-height: 90vh; overflow-y: auto; border: 1px solid var(--border-color-dark); }
.modal-overlay.active .modal-content { transform: scale(1) translateY(0); opacity: 1; }
body.light-mode .modal-content { background-color: var(--card-bg-light); border-color: var(--border-color-light); box-shadow: 0 10px 30px var(--shadow-light); }
.close-modal { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--subtle-text-color-dark); z-index: 10; transition: transform 0.2s; }
.close-modal:hover { transform: rotate(90deg); }
body.light-mode .close-modal { color: var(--subtle-text-color-light); }
.modal-title { font-size: 2rem; margin-bottom: 10px; text-align: center; }
.modal-subtitle { text-align: center; color: var(--subtle-text-color-dark); margin-bottom: 30px; }
body.light-mode .modal-subtitle { color: var(--subtle-text-color-light); }
.modal-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.modal-form .form-group { margin-bottom: 20px; position: relative; }
.modal-form .form-group:last-of-type { margin-bottom: 0; }
.modal-form label { display: none; }
.modal-form input, .modal-form select, .modal-form textarea { width: 100%; padding: 15px; background-color: var(--bg-color-dark); border: 1px solid var(--border-color-dark); color: var(--text-color-dark); border-radius: var(--border-radius); font-size: 1rem; font-family: var(--font-primary); transition: border-color 0.3s, box-shadow 0.3s; }
body.light-mode .modal-form input, body.light-mode .modal-form select, body.light-mode .modal-form textarea { background-color: var(--bg-color-light); border-color: var(--border-color-light); color: var(--text-color-light); }
.modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus { outline: none; border-color: var(--accent-color-dark); box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.2); }
body.light-mode .modal-form input:focus, body.light-mode .modal-form select:focus, body.light-mode .modal-form textarea:focus { border-color: var(--accent-color-light); box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2); }
.modal-form .form-group.with-icon .input-icon { position: absolute; left: 15px; top: 17px; color: var(--subtle-text-color-dark); }
.modal-form .form-group.with-icon input { padding-left: 45px; }
.modal-submit { width: 100%; margin-top: 10px; padding: 15px; font-size: 1.1rem; }
#modal-confirmation { text-align: center; }
.portfolio-modal-content { max-width: 800px; display: grid; grid-template-columns: 1fr; gap: 20px; padding: 0; }
.portfolio-modal-content img { width: 100%; height: auto; border-radius: var(--border-radius) var(--border-radius) 0 0; }
.portfolio-modal-details { padding: 30px; }
.portfolio-modal-details .modal-title { text-align: left; }
.portfolio-modal-details p { color: var(--subtle-text-color-dark); }
body.light-mode .portfolio-modal-details p { color: var(--subtle-text-color-light); }

/* 14. Animations & Keyframes */
@keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes scrollLogos { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes animStar { from { transform: translateY(0px); } to { transform: translateY(-2000px); } }

/* 15. Cookie Consent Banner */
#cookie-consent-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--card-bg-dark); color: var(--text-color-dark); padding: 20px 30px; z-index: 3000; display: none; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border-color-dark); box-shadow: 0 -5px 15px rgba(0,0,0,0.2); }
body.light-mode #cookie-consent-banner { background-color: var(--card-bg-light); color: var(--text-color-light); border-top: 1px solid var(--border-color-light); box-shadow: 0 -5px 15px var(--shadow-light); }
#cookie-consent-banner.active { display: flex; }
#cookie-consent-banner p { margin: 0; font-size: 0.9rem; }
#cookie-consent-banner a { text-decoration: underline; font-weight: 600; }
.consent-buttons { display: flex; gap: 15px; flex-shrink: 0; }
.consent-buttons .cta-button, .consent-buttons .cta-button-outline { padding: 8px 16px; font-size: 0.9rem; }

/* 16. Responsive Design */
@media (max-width: 992px) { .nav-cta { display: none; } .mission-vision-grid, .contact-grid { grid-template-columns: 1fr; } .featured-project { grid-template-columns: 1fr; } .footer-main { grid-template-columns: 1fr; text-align: center; } .footer-column.about { flex-direction: column; } .footer-about-content { margin-top: 10px; } }
@media (max-width: 768px) {
    .nav-logo { flex-grow: 1; }
    .nav-actions { order: 2; margin-right: 20px; }
    .hamburger { display: block; order: 3; }
    .nav-menu { position: fixed; left: -100%; top: 75px; flex-direction: column; background-color: var(--primary-color-dark); width: 100%; height: calc(100vh - 75px); text-align: center; transition: 0.3s; gap: 0; order: 4; }
    body.light-mode .nav-menu { background-color: var(--primary-color-light); }
    .nav-menu.active { left: 0; }
    .nav-item { padding: 20px 0; border-bottom: 1px solid var(--border-color-dark); }
    body.light-mode .nav-item { border-color: var(--border-color-light); }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .hero-title, .page-header-title { font-size: 2.8rem; }
    .timeline::after { left: 10px; }
    .timeline-item { width: 100%; padding-left: 50px; padding-right: 0; }
    .timeline-item:nth-child(even) { left: 0; }
    .timeline-dot { left: 0; }
    .timeline-item:nth-child(odd) .timeline-dot, .timeline-item:nth-child(even) .timeline-dot { left: 0; }
    .portfolio-modal-content { grid-template-columns: 1fr; }
    .modal-form .form-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
    .footer-bottom { flex-direction: column; gap: 20px; }
    .footer-grid, .footer-secondary { text-align: center; }
    .footer-column.about, .footer-column.links, .footer-column.newsletter, .footer-column.contact-info { align-items: center; }
    .newsletter-form { max-width: 350px; margin: 0 auto; }
    #cookie-consent-banner { flex-direction: column; text-align: center; }
    /* ADD THIS RULE TO FIX LOGO SPEED */
    .logos-track {
        animation-duration: 25s; /* Speeds up the animation from 40s */
    }

    /* ADD THESE RULES FOR THE NEW FOOTER LAYOUT */
    .footer-links-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Create the 2-column layout */
        gap: 30px;
        text-align: left; /* Align text left for a cleaner look */
    }
    /* UPDATED: New rules for mobile footer layout */
    .footer-secondary {
        grid-template-columns: 1fr 1fr; /* 2 columns for links */
        text-align: left;
    }
    .footer-secondary .footer-column.contact-info {
        grid-column: 1 / span 2; /* Make contact info span full width on its own row */
        margin-top: 20px;
        text-align: center;
    }
    .footer-column.contact-info p {
        justify-content: center;
    }

}

/* css/style.css */

/* ... other styles remain the same ... */


/* 17. Launchpad/Partner Program Styles */
.gain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.feature-card {
    background-color: var(--card-bg-dark);
    padding: 30px;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--border-color-dark);
}
body.light-mode .feature-card {
    background-color: var(--card-bg-light);
    border-color: var(--border-color-light);
}
.feature-icon { font-size: 2.5rem; color: var(--accent-color-dark); margin-bottom: 20px; display: inline-block; }
body.light-mode .feature-icon { color: var(--accent-color-light); }
.feature-title { font-size: 1.2rem; margin-bottom: 10px; }
.feature-card p { font-size: 0.9rem; color: var(--subtle-text-color-dark); }
body.light-mode .feature-card p { color: var(--subtle-text-color-light); }

.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.path-card { background-color: var(--primary-color-dark); border: 1px solid var(--border-color-dark); border-radius: var(--border-radius); padding: 40px; text-align: center; transition: all var(--transition-speed); }
body.light-mode .path-card { background-color: var(--primary-color-light); border-color: var(--border-color-light); box-shadow: 0 4px 15px var(--shadow-light); }
.path-card:hover { transform: translateY(-10px); border-color: var(--accent-color-dark); }
body.light-mode .path-card:hover { border-color: var(--accent-color-light); }
.path-icon { font-size: 3.5rem; color: var(--accent-color-dark); margin-bottom: 25px; }
body.light-mode .path-icon { color: var(--accent-color-light); }
.path-title { font-size: 1.8rem; margin-bottom: 15px; }
.path-description { color: var(--subtle-text-color-dark); margin-bottom: 30px; }
body.light-mode .path-description { color: var(--subtle-text-color-light); }

.journey-timeline .timeline-content { text-align: left; }
.journey-timeline h3 { color: var(--accent-color-dark); }
body.light-mode .journey-timeline h3 { color: var(--accent-color-light); }

.testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.testimonial-card { background-color: var(--card-bg-dark); border-left: 4px solid var(--accent-color-dark); padding: 30px; border-radius: var(--border-radius); }
body.light-mode .testimonial-card { background-color: var(--card-bg-light); border-left-color: var(--accent-color-light); box-shadow: 0 4px 15px var(--shadow-light); }

.cta-section { background-color: var(--primary-color-dark); text-align: center; }
.cta-title { font-size: 2.5rem; }
.cta-subtitle { font-size: 1.2rem; color: var(--subtle-text-color-dark); }
body.light-mode .cta-subtitle { color: var(--subtle-text-color-light); }

.partner-form-wrapper { background-color: var(--card-bg-dark); padding: 40px; border-radius: var(--border-radius); }
body.light-mode .partner-form-wrapper { background-color: var(--primary-color-light); }

/* CORRECTED AND ENHANCED FORM STYLES */
.launchpad-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.launchpad-form .form-group {
    margin-bottom: 20px;
    position: relative;
}
.launchpad-form input, .launchpad-form select, .launchpad-form textarea {
    width: 100%;
    padding: 15px;
    background-color: var(--bg-color-dark);
    border: 1px solid var(--border-color-dark);
    color: var(--text-color-dark);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: var(--font-primary);
    transition: border-color 0.3s, box-shadow 0.3s;
}
body.light-mode .launchpad-form input, body.light-mode .launchpad-form select, body.light-mode .launchpad-form textarea {
    background-color: var(--bg-color-light);
    border-color: var(--border-color-light);
    color: var(--text-color-light);
}
.launchpad-form input:focus, .launchpad-form select:focus, .launchpad-form textarea:focus {
    outline: none;
    border-color: var(--accent-color-dark);
    box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.2);
}
body.light-mode .launchpad-form input:focus, body.light-mode .launchpad-form select:focus, body.light-mode .launchpad-form textarea:focus {
    border-color: var(--accent-color-light);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2);
}

/* Custom styles for the select dropdown */
.form-group.select-group select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px; /* Make space for the custom arrow */
}
.form-group.select-group::after {
    content: '\f078'; /* Font Awesome chevron-down icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    pointer-events: none; /* Allows clicks to go through to the select box */
    color: var(--accent-color-dark);
}
body.light-mode .form-group.select-group::after {
    color: var(--accent-color-light);
}



/* ... all your @media query responsive styles follow ... */
@media (max-width: 992px) {
    /* ... add these inside the existing 992px media query ... */
    .path-grid, .testimonial-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    /* ... add this inside the existing 768px media query ... */
    .launchpad-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}