/* ITSkillPilot Styles */

:root {
    --background: #0C0C0F;
    --primary: #1E2029;
    --accent: #9D4EDD;
    --secondary: #00B4D8;
    --text: #F1F1F1;
    --soft-accent: #2A2D3E;
    --contrast: #FDC500;
    --font-main: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --transition-standard: all 0.3s ease-in-out;
    --transition-fast: all 0.2s ease-in-out;
    --shadow-standard: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.15);
    --border-radius: 8px;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-main);
    background-color: var(--background);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: var(--secondary);
    text-decoration: none;
    transition: var(--transition-standard);
}

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

img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    transition: var(--transition-standard);
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    line-height: 1.2;
}

p {
    margin-bottom: 1rem;
}

ul, ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

button, .button, #ctaButton, #heroButton, #submitButton {
    display: inline-block;
    background-color: var(--accent);
    color: var(--text);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-standard);
    text-align: center;
    font-family: var(--font-main);
    font-size: 1rem;
}

button:hover, .button:hover, #ctaButton:hover, #heroButton:hover, #submitButton:hover {
    background-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

input, select, textarea {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 2px solid var(--soft-accent);
    border-radius: var(--border-radius);
    background-color: var(--primary);
    color: var(--text);
    font-family: var(--font-main);
    transition: var(--transition-standard);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(157, 78, 221, 0.2);
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* Layout */
#mainContainer {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

#siteHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    position: relative;
    z-index: 100;
}

#logoContainer {
    display: flex;
    align-items: center;
}

#logoContainer img {
    max-width: 100px;
    height: auto;
    object-fit: contain;
}

#siteLogo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0;
    letter-spacing: -0.5px;
}

#mainNavigation {
    display: flex;
    align-items: center;
}

#navLinks {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

#navLinks li {
    margin-left: 2.5rem;
}

#navLinks a {
    color: var(--text);
    font-weight: 500;
    position: relative;
    padding: 0.5rem 1rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    perspective: 1000px;
    text-shadow: 0 0 10px rgba(157, 78, 221, 0.2);
}

#navLinks a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--accent), var(--secondary));
    opacity: 0;
    transform: translateZ(-1px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 4px;
    filter: blur(8px);
}

#navLinks a:hover {
    color: var(--text);
    transform: translateY(-3px) rotateX(10deg);
    text-shadow: 0 0 20px rgba(157, 78, 221, 0.4);
}

#navLinks a:hover:before {
    opacity: 0.2;
    transform: translateZ(-1px) scale(1.1);
}

#navLinks a:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#navLinks a:hover:after {
    width: 80%;
}

#navLinks a.activeLink {
    color: var(--text);
    text-shadow: 0 0 20px rgba(157, 78, 221, 0.4);
}

#navLinks a.activeLink:before {
    opacity: 0.2;
    transform: translateZ(-1px) scale(1.1);
}

#navLinks a.activeLink:after {
    width: 80%;
}

#mobileMenuToggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 200;
}

#mobileMenuToggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--text);
    border-radius: 3px;
    transition: var(--transition-standard);
}

#mobileMenu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--primary);
    z-index: 150;
    padding: 6rem 2rem 2rem;
    transition: right 0.3s ease-in-out;
    display: none;
}

#mobileNavLinks {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mobileNavLinks li {
    margin-bottom: 1.5rem;
}

#mobileNavLinks a {
    font-size: 1.5rem;
    color: var(--text);
    font-weight: 600;
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--soft-accent);
    transition: var(--transition-standard);
}

#mobileNavLinks a:hover,
#mobileNavLinks a.activeLink {
    color: var(--accent);
}

/* Main Content */
#pageContent {
    padding: 2rem 0 4rem;
    min-height: calc(100vh - 200px);
}

/* Hero Section */
#heroSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4rem 0;
    gap: 4rem;
}

#heroContent {
    flex: 1;
}

#heroTitle {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    color: var(--text);
}

#heroSubtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: rgba(241, 241, 241, 0.8);
}

#heroButton {
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

#heroImage {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

#heroImage img {
    max-width: 100%;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-standard);
    transition: var(--transition-standard);
}

#heroImage:hover img {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-hover);
}

/* Features Section */
#featuresSection {
    padding: 4rem 0;
    text-align: center;
    background: linear-gradient(to bottom, var(--primary), var(--background));
}

#featuresTitle {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    background: linear-gradient(45deg, var(--accent), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

#featuresGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 0 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

#feature1, #feature2, #feature3, #feature4, #feature5, #feature6, #feature7, #feature8, #feature9 {
    background-color: var(--primary);
    padding: 2.5rem 2rem;
    border-radius: var(--border-radius);
    transition: var(--transition-standard);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--soft-accent);
    display: flex;
    flex-direction: column;
    height: 100%;
}

#feature1:hover, #feature2:hover, #feature3:hover, #feature4:hover, #feature5:hover, 
#feature6:hover, #feature7:hover, #feature8:hover, #feature9:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
}

#feature1::before, #feature2::before, #feature3::before, #feature4::before, #feature5::before,
#feature6::before, #feature7::before, #feature8::before, #feature9::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
    opacity: 0;
    transition: var(--transition-standard);
}

#feature1:hover::before, #feature2:hover::before, #feature3:hover::before, #feature4:hover::before,
#feature5:hover::before, #feature6:hover::before, #feature7:hover::before, #feature8:hover::before,
#feature9:hover::before {
    opacity: 1;
}

#featureIcon1, #featureIcon2, #featureIcon3, #featureIcon4, #featureIcon5, #featureIcon6,
#featureIcon7, #featureIcon8, #featureIcon9 {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    color: var(--accent);
    background: var(--soft-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-standard);
    flex-shrink: 0;
}

#feature1:hover #featureIcon1, #feature2:hover #featureIcon2, #feature3:hover #featureIcon3,
#feature4:hover #featureIcon4, #feature5:hover #featureIcon5, #feature6:hover #featureIcon6,
#feature7:hover #featureIcon7, #feature8:hover #featureIcon8, #feature9:hover #featureIcon9 {
    transform: scale(1.1);
    background: var(--accent);
    color: var(--text);
}

#featureTitle1, #featureTitle2, #featureTitle3, #featureTitle4, #featureTitle5, #featureTitle6,
#featureTitle7, #featureTitle8, #featureTitle9 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text);
    flex-shrink: 0;
}

#featureDesc1, #featureDesc2, #featureDesc3, #featureDesc4, #featureDesc5, #featureDesc6,
#featureDesc7, #featureDesc8, #featureDesc9 {
    color: rgba(241, 241, 241, 0.8);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    flex-grow: 1;
}

.featureButton {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--soft-accent);
    color: var(--text);
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: var(--transition-standard);
    border: 1px solid var(--accent);
    text-align: center;
    margin-top: auto;
    flex-shrink: 0;
}

.featureButton:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* Courses Section */
#coursesSection {
    padding: 4rem 0;
    text-align: center;
}

#coursesTitle {
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

#coursesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

#course1, #course2, #course3, #course4, #course5, #course6 {
    background-color: var(--primary);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition-standard);
}

#course1:hover, #course2:hover, #course3:hover, #course4:hover, #course5:hover, #course6:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

#course1 img, #course2 img, #course3 img, #course4 img, #course5 img, #course6 img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

#courseTitle1, #courseTitle2, #courseTitle3, #courseTitle4, #courseTitle5, #courseTitle6 {
    font-size: 1.25rem;
    padding: 1.5rem 1.5rem 0.5rem;
}

#courseDesc1, #courseDesc2, #courseDesc3, #courseDesc4, #courseDesc5, #courseDesc6 {
    padding: 0 1.5rem 1.5rem;
    color: rgba(241, 241, 241, 0.8);
}

/* CTA Section */
#ctaSection {
    background-color: var(--soft-accent);
    padding: 4rem 2rem;
    text-align: center;
    border-radius: var(--border-radius);
    margin: 4rem 0;
}

#ctaTitle {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

#ctaText {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

#ctaButton {
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

/* Footer */
#siteFooter {
    background-color: var(--primary);
    padding: 6rem 0 2rem;
    position: relative;
    overflow: hidden;
}

#siteFooter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
}

#footerTop {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1.5fr;
    gap: 4rem;
    margin-bottom: 4rem;
    position: relative;
}

#footerLogo {
    margin-bottom: 2rem;
}

#footerLogoText {
    font-size: 2.2rem;
    color: var(--accent);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(45deg, var(--accent), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#footerLinks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

#footerNavTitle, #footerLegalTitle, #footerContactTitle {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--text);
    font-weight: 600;
    position: relative;
    padding-bottom: 0.75rem;
}

#footerNavTitle::after, #footerLegalTitle::after, #footerContactTitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
}

#footerNavList, #footerLegalList {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footerNavList li, #footerLegalList li {
    margin-bottom: 1rem;
}

#footerNavList a, #footerLegalList a {
    color: rgba(241, 241, 241, 0.8);
    transition: var(--transition-standard);
    display: inline-block;
    position: relative;
    padding-left: 0;
}

#footerNavList a:hover, #footerLegalList a:hover {
    color: var(--accent);
    transform: translateX(5px);
}

#footerContact {
    background-color: var(--soft-accent);
    padding: 2rem;
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
}

#footerContact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(157, 78, 221, 0.1), rgba(0, 180, 216, 0.1));
    z-index: 0;
}

#footerAddress, #footerPhone {
    margin-bottom: 1rem;
    color: rgba(241, 241, 241, 0.9);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#footerAddress::before {
    content: '📍';
    font-size: 1.2rem;
}

#footerPhone::before {
    content: '📞';
    font-size: 1.2rem;
}

#footerBottom {
    border-top: 1px solid rgba(241, 241, 241, 0.1);
    padding-top: 2rem;
    text-align: center;
    position: relative;
}

#copyright {
    color: rgba(241, 241, 241, 0.6);
    font-size: 0.9rem;
}

/* About Page */
#aboutHero {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--primary), var(--background));
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 4rem;
    min-height: 80vh;
}

#aboutHero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(157, 78, 221, 0.15), transparent 70%);
    pointer-events: none;
}

#aboutHeroContent {
    flex: 1;
    background: rgba(30, 32, 41, 0.7);
    padding: 3.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-standard);
    border: 1px solid var(--soft-accent);
    transition: var(--transition-standard);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#aboutHeroContent:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
}

#aboutHeroContent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
    opacity: 0;
    transition: var(--transition-standard);
}

#aboutHeroContent:hover::before {
    opacity: 1;
}

#aboutHeroTitle {
    font-size: 3.5rem;
    margin-bottom: 2rem;
    background: linear-gradient(45deg, var(--accent), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    padding-bottom: 1rem;
    line-height: 1.2;
}

#aboutHeroTitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
    border-radius: 2px;
}

#aboutHeroText {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(241, 241, 241, 0.9);
    position: relative;
    z-index: 1;
}

#aboutHeroImage {
    flex: 1;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-standard);
    transition: var(--transition-standard);
    aspect-ratio: 4/3;
    max-width: 600px;
}

#aboutHeroImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-standard);
}

#aboutHeroImage:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-hover);
}

#aboutHeroImage:hover img {
    transform: scale(1.1);
}

#aboutHeroImage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(157, 78, 221, 0.2), rgba(0, 180, 216, 0.2));
    z-index: 1;
    opacity: 0;
    transition: var(--transition-standard);
}

#aboutHeroImage:hover::before {
    opacity: 1;
}

#missionSection {
    padding: 6rem 0;
    background: linear-gradient(to bottom, var(--primary), var(--background));
    position: relative;
    overflow: hidden;
}

#missionSection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(157, 78, 221, 0.1), transparent 70%);
    pointer-events: none;
}

#missionTitle {
    font-size: 3rem;
    margin-bottom: 3rem;
    text-align: center;
    background: linear-gradient(45deg, var(--accent), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    padding-bottom: 1rem;
}

#missionTitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
    border-radius: 2px;
}

#missionContent {
    display: flex;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

#missionText {
    flex: 1;
    background: var(--primary);
    padding: 3rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-standard);
    border: 1px solid var(--soft-accent);
    transition: var(--transition-standard);
    position: relative;
    overflow: hidden;
}

#missionText:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
}

#missionText::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
    opacity: 0;
    transition: var(--transition-standard);
}

#missionText:hover::before {
    opacity: 1;
}

#missionPara1, #missionPara2 {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(241, 241, 241, 0.9);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

#missionPara2 {
    margin-bottom: 0;
}

#missionImage {
    flex: 1;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-standard);
    transition: var(--transition-standard);
}

#missionImage img {
    width: 100%;
    height: auto;
    display: block;
    transition: var(--transition-standard);
}

#missionImage:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

#missionImage:hover img {
    transform: scale(1.05);
}

#missionImage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(157, 78, 221, 0.2), rgba(0, 180, 216, 0.2));
    z-index: 1;
    opacity: 0;
    transition: var(--transition-standard);
}

#missionImage:hover::before {
    opacity: 1;
}

#missionValues {
    background-color: var(--primary);
    padding: 3rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-standard);
    border: 1px solid var(--soft-accent);
    transition: var(--transition-standard);
    margin: 4rem 0;
    position: relative;
    overflow: hidden;
}

#missionValues:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
}

#missionValues::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
    opacity: 0;
    transition: var(--transition-standard);
}

#missionValues:hover::before {
    opacity: 1;
}

#valuesTitle {
    font-size: 2.2rem;
    margin-bottom: 2rem;
    text-align: center;
    background: linear-gradient(45deg, var(--accent), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    padding-bottom: 1rem;
}

#valuesTitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
    border-radius: 2px;
}

.values-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-standard);
    transition: var(--transition-standard);
    margin-bottom: 2rem;
}

.values-image:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

#valuesList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

#valuesList li {
    background-color: var(--soft-accent);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    transition: var(--transition-standard);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

#valuesList li:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
}

#valuesList li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--accent), var(--secondary));
    opacity: 0;
    transition: var(--transition-standard);
}

#valuesList li:hover::before {
    opacity: 1;
}

#teamSection {
    padding: 4rem 0;
    text-align: center;
}

#teamTitle {
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

#teamGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

#teamMember1, #teamMember2, #teamMember3, #teamMember4 {
    background-color: var(--primary);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition-standard);
}

#teamMember1:hover, #teamMember2:hover, #teamMember3:hover, #teamMember4:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

#teamMember1 img, #teamMember2 img, #teamMember3 img, #teamMember4 img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

#teamName1, #teamName2, #teamName3, #teamName4 {
    font-size: 1.25rem;
    padding: 1.5rem 1rem 0.25rem;
    margin-bottom: 0.25rem;
}

#teamRole1, #teamRole2, #teamRole3, #teamRole4 {
    color: var(--accent);
    font-weight: 600;
    padding: 0 1rem;
    margin-bottom: 0.75rem;
}

#teamBio1, #teamBio2, #teamBio3, #teamBio4 {
    padding: 0 1rem 1.5rem;
    color: rgba(241, 241, 241, 0.8);
    font-size: 0.9rem;
}

#approachSection {
    padding: 4rem 0;
}

#approachTitle {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

#approachContent {
    display: flex;
    align-items: center;
    gap: 4rem;
}

#approachImage {
    flex: 1;
}

#approachText {
    flex: 1;
}

#approachSubtitle {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--accent);
}

#approachPoints {
    margin-top: 2rem;
}

#approachPoint1, #approachPoint2, #approachPoint3 {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--accent);
}

#approachPointTitle1, #approachPointTitle2, #approachPointTitle3 {
    margin-bottom: 0.5rem;
    color: var(--secondary);
}

#statsSection {
    padding: 4rem 0;
    text-align: center;
}

#statsTitle {
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

#statsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

#stat1, #stat2, #stat3, #stat4 {
    background-color: var(--primary);
    padding: 2rem;
    border-radius: var(--border-radius);
    transition: var(--transition-standard);
}

#stat1:hover, #stat2:hover, #stat3:hover, #stat4:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

#statNumber1, #statNumber2, #statNumber3, #statNumber4 {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

#statLabel1, #statLabel2, #statLabel3, #statLabel4 {
    font-size: 1.1rem;
    color: rgba(241, 241, 241, 0.8);
}

/* Contact Page */
#contactHero {
    text-align: center;
    padding: 4rem 0 2rem;
}

#contactHeroTitle {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

#contactHeroText {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
}

#contactMethods {
    padding: 3rem 0;
}

#contactGrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
}

#contactInfo {
    background-color: var(--primary);
    padding: 2rem;
    border-radius: var(--border-radius);
}

#contactInfoTitle {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--accent);
}

#contactAddress, #contactPhone, #contactHours {
    margin-bottom: 1.5rem;
}

#addressTitle, #phoneTitle, #hoursTitle {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--secondary);
}

#addressText, #phoneText, #hoursText {
    color: rgba(241, 241, 241, 0.8);
}

#contactFormContainer {
    background-color: var(--primary);
    padding: 2rem;
    border-radius: var(--border-radius);
}

#contactFormTitle {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--accent);
}

#formGroup1, #formGroup2, #formGroup3, #formGroup4, #formGroup5, #formGroup6 {
    margin-bottom: 1.5rem;
}

#formGroup6 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#consent {
    width: auto;
    margin-bottom: 0;
}

#consentLabel {
    display: inline;
}

#submitButton {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

#mapSection {
    padding: 3rem 0;
}

#mapTitle {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

#mapContainer {
    border-radius: var(--border-radius);
    overflow: hidden;
}

#faqSection {
    padding: 3rem 0;
}

#faqTitle {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    text-align: center;
}

#faqContainer {
    max-width: 800px;
    margin: 0 auto;
}

#faqItem1, #faqItem2, #faqItem3 {
    margin-bottom: 1rem;
    border: 1px solid var(--soft-accent);
    border-radius: var(--border-radius);
    overflow: hidden;
}

#faqQuestion1, #faqQuestion2, #faqQuestion3 {
    background-color: var(--primary);
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#questionText1, #questionText2, #questionText3 {
    margin: 0;
    font-size: 1.1rem;
}

#faqToggle1, #faqToggle2, #faqToggle3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent);
}

#faqAnswer1, #faqAnswer2, #faqAnswer3 {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

#faqItem1.active #faqAnswer1,
#faqItem2.active #faqAnswer2,
#faqItem3.active #faqAnswer3 {
    padding: 1.5rem;
    max-height: 500px;
}

#faqItem1.active #faqToggle1,
#faqItem2.active #faqToggle2,
#faqItem3.active #faqToggle3 {
    transform: rotate(45deg);
}

/* Privacy, Terms, Cookies Pages */
#privacyHeader, #termsHeader, #cookiesHeader {
    text-align: center;
    padding: 4rem 0 2rem;
}

#privacyTitle, #termsTitle, #cookiesTitle {
    font-size: 3rem;
    margin-bottom: 1rem;
}

#privacyUpdated, #termsUpdated, #cookiesUpdated {
    color: rgba(241, 241, 241, 0.6);
}

#privacyContent, #termsContent, #cookiesContent {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0 4rem;
}

#privacySection1, #privacySection2, #privacySection3, #privacySection4, #privacySection5,
#privacySection6, #privacySection7, #privacySection8, #privacySection9,
#termsSection1, #termsSection2, #termsSection3, #termsSection4, #termsSection5,
#termsSection6, #termsSection7, #termsSection8, #termsSection9, #termsSection10,
#termsSection11, #termsSection12,
#cookiesSection1, #cookiesSection2, #cookiesSection3, #cookiesSection4, #cookiesSection5,
#cookiesSection6, #cookiesSection7, #cookiesSection8, #cookiesSection9 {
    margin-bottom: 2.5rem;
}

#privacySection1Title, #privacySection2Title, #privacySection3Title, #privacySection4Title,
#privacySection5Title, #privacySection6Title, #privacySection7Title, #privacySection8Title,
#privacySection9Title, #termsSection1Title, #termsSection2Title, #termsSection3Title,
#termsSection4Title, #termsSection5Title, #termsSection6Title, #termsSection7Title,
#termsSection8Title, #termsSection9Title, #termsSection10Title, #termsSection11Title,
#termsSection12Title, #cookiesSection1Title, #cookiesSection2Title, #cookiesSection3Title,
#cookiesSection4Title, #cookiesSection5Title, #cookiesSection6Title, #cookiesSection7Title,
#cookiesSection8Title, #cookiesSection9Title {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--accent);
}

#privacySection2SubTitle1, #privacySection2SubTitle2,
#cookiesSection3SubTitle1, #cookiesSection3SubTitle2, #cookiesSection3SubTitle3, #cookiesSection3SubTitle4,
#cookiesSection9SubTitle1, #cookiesSection9SubTitle2, #cookiesSection9SubTitle3, #cookiesSection9SubTitle4 {
    font-size: 1.4rem;
    margin: 2rem 0 1rem;
    color: var(--secondary);
}

#personalInfoList, #autoInfoList, #useInfoList, #shareInfoList, #rightsInfoList,
#thirdPartiesList, #browserList, #conductList {
    margin-left: 1.5rem;
}

#personalInfoList li, #autoInfoList li, #useInfoList li, #shareInfoList li, #rightsInfoList li,
#thirdPartiesList li, #browserList li, #conductList li {
    margin-bottom: 0.75rem;
}

#privacyAddress, #termsAddress, #cookiesAddress {
    font-style: normal;
    margin-top: 1.5rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--accent);
}

#necessaryCookiesTable, #preferenceCookiesTable, #statisticalCookiesTable, #marketingCookiesTable {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

#necessaryCookieRow1, #necessaryCookieRow2,
#preferenceCookieRow1, #preferenceCookieRow2,
#statisticalCookieRow1, #statisticalCookieRow2,
#marketingCookieRow1, #marketingCookieRow2 {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--soft-accent);
}

#necessaryCookieName1, #necessaryCookieName2,
#preferenceCookieName1, #preferenceCookieName2,
#statisticalCookieName1, #statisticalCookieName2,
#marketingCookieName1, #marketingCookieName2 {
    font-weight: 600;
    color: var(--secondary);
}

/* Responsive Styles */
@media (max-width: 1200px) {
    #teamGrid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #statsGrid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #featuresGrid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
    }
}

@media (max-width: 992px) {
    html {
        font-size: 15px;
    }
    
    #heroSection, #aboutHero {
        flex-direction: column;
        padding: 3rem 0;
        gap: 3rem;
    }
    
    #heroImage, #aboutHeroImage {
        order: -1;
    }
    
    #featuresGrid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #coursesGrid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #footerTop {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    #missionContent {
        flex-direction: column;
        gap: 3rem;
    }
    
    #approachContent {
        flex-direction: column;
        gap: 3rem;
    }
    
    #contactGrid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    #siteHeader {
        padding: 1rem 0;
    }
    
    #mainNavigation {
        display: none;
    }
    
    #mobileMenuToggle {
        display: flex;
    }
    
    #mobileMenu {
        display: block;
    }
    
    #mobileMenu.active {
        right: 0;
    }
    
    #mobileMenuToggle.active span:first-child {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    #mobileMenuToggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    #mobileMenuToggle.active span:last-child {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    #featuresGrid, #coursesGrid {
        grid-template-columns: 1fr;
    }
    
    #teamGrid {
        grid-template-columns: 1fr;
    }
    
    #statsGrid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    #footerLinks {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    #footerContact {
        padding: 1.5rem;
    }
    
    #featuresGrid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    #missionValues {
        padding: 2rem;
        margin: 2rem 0;
    }

    #valuesTitle {
        font-size: 1.8rem;
    }

    .values-image {
        max-width: 100%;
        margin-bottom: 2rem;
    }

    #valuesList {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    #heroTitle, #aboutHeroTitle, #privacyTitle, #termsTitle, #cookiesTitle {
        font-size: 2.5rem;
    }
    
    #featuresTitle, #coursesTitle, #teamTitle, #statsTitle, #missionTitle, #approachTitle {
        font-size: 2rem;
    }
    
    #ctaTitle {
        font-size: 1.8rem;
    }
    
    #ctaButton, #heroButton {
        width: 100%;
    }
}

/* Cookie Popup Styles */
#cookiePopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

#cookieContent {
    background-color: var(--primary);
    padding: 2rem;
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 90%;
    box-shadow: var(--shadow-hover);
    border: 1px solid var(--accent);
    position: relative;
    animation: cookiePopupFadeIn 0.3s ease-out;
}

@keyframes cookiePopupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#cookieTitle {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--accent);
    text-align: center;
}

#cookieText {
    color: var(--text);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    text-align: center;
}

#cookieButtons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

#acceptAllCookies, #declineCookies {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-standard);
}

#acceptAllCookies {
    background-color: var(--accent);
    color: var(--text);
}

#declineCookies {
    background-color: var(--soft-accent);
    color: var(--text);
    border: 1px solid var(--accent);
}

#acceptAllCookies:hover {
    background-color: var(--secondary);
    transform: translateY(-2px);
}

#declineCookies:hover {
    background-color: var(--primary);
    transform: translateY(-2px);
}

@media (max-width: 480px) {
    #cookieContent {
        width: 95%;
        padding: 1.5rem;
    }
    
    #cookieButtons {
        flex-direction: column;
    }
    
    #acceptAllCookies, #declineCookies {
        width: 100%;
    }
}