/* style.css */

/* Table of Contents
1.  CSS Variables
2.  Global Styles & Typography
3.  Layout & Container
4.  Header & Navigation
5.  Global UI Components (Buttons, Cards)
6.  Section Specific Styles
    6.1 Hero Section
    6.2 Clientele Section
    6.3 About Teaser Section
    6.4 Services Section
    6.5 Webinars Section
    6.6 News Section
    6.7 External Resources Section
    6.8 Pricing Section
    6.9 Contact Section
7.  Footer
8.  Utility & Helper Classes
9.  Animations & Transitions
10. Responsive Design (Media Queries)
11. Special Page Styles (Success, Privacy, Terms)
*/

/* 1. CSS Variables */
:root {
    /* Split-Complementary & Brutalist Inspired Palette */
    --primary-color: #0A2463;       /* Deep Indigo/Navy - Dominant */
    --secondary-color: #FFC947;     /* Amber/Yellow - Vibrant Accent */
    --accent-color-1: #3DDC97;      /* Bright Mint Green - Supporting Accent */
    --accent-color-2: #E84855;      /* Coral Red - Alert/Secondary Accent */

    --bg-light: #F0F4F8;            /* Very Light Grey/Blue tint - Backgrounds */
    --bg-dark: #121212;             /* Very Dark Grey - Dark Backgrounds */
    --bg-dark-lighter: #1e2022;     /* Slightly Lighter Dark for elements on dark bg */
    
    --text-light: #FFFFFF;
    --text-dark: #1E2022;
    --text-muted: #5a5a5a;          /* Adjusted for better contrast */
    --text-on-primary: var(--text-light);
    --text-on-secondary: var(--text-dark); /* Yellow bg needs dark text */

    --border-color-light: #dee2e6;
    --border-color-dark: #333333; /* For brutalist borders, slightly lighter than pure black */
    --border-strong: 2px solid var(--border-color-dark);

    /* Fonts */
    --font-family-headings: 'Inter', sans-serif;
    --font-family-body: 'IBM Plex Sans', sans-serif;

    /* Transitions & Animations */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-speed-slow: 0.5s;
    --transition-timing-nonlinear: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --transition-timing-smooth: ease-in-out;

    /* Spacing */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem;  /* 8px */
    --spacing-md: 1rem;    /* 16px */
    --spacing-lg: 1.5rem;  /* 24px */
    --spacing-xl: 2.5rem;  /* 40px */
    --spacing-xxl: 4rem;   /* 64px */

    /* Header Height */
    --header-height: 80px;
}

/* 2. Global Styles & Typography */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; 
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-body);
    line-height: 1.7; /* Increased for readability */
    color: var(--text-dark);
    background-color: var(--bg-light);
    overflow-x: hidden; 
}

.site-wrapper {
    overflow: hidden; 
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    font-weight: 700; 
    line-height: 1.3; /* Adjusted for better spacing */
    margin-bottom: var(--spacing-md);
    color: #222222; /* Consistently dark for headings */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.05); 
}
h1 { font-size: 2.8rem; font-weight: 900; } 
h2 { font-size: 2.2rem; font-weight: 700;}
h3 { font-size: 1.8rem; font-weight: 700;}
h4 { font-size: 1.4rem; font-weight: 700;}
p {
    margin-bottom: var(--spacing-lg); /* Increased margin for paragraphs */
    font-size: 1rem;
    color: var(--text-muted); 
}
strong { font-weight: 700; }
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed-fast) var(--transition-timing-smooth);
}
a:hover {
    color: var(--accent-color-1);
    text-decoration: underline;
}
img {
    max-width: 100%;
    height: auto;
    display: block; 
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-sm); 
    color: #111111; /* Even darker for section titles for emphasis */
    font-weight: 900;
    font-size: 2.5rem; /* Larger section titles */
}
.section-subtitle {
    text-align: center;
    max-width: 750px; /* Wider subtitle */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-xl);
    color: var(--text-muted);
    font-size: 1.15rem; /* Slightly larger subtitle */
    line-height: 1.6;
}

/* 3. Layout & Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}
section {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    position: relative; 
}

.parallax-bg {
    background-attachment: fixed;
    background-position: center center; /* Ensure center */
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; 
}
.hero-overlay, .contact-overlay { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)); /* Slightly darker */
    z-index: 1;
}
.hero-content, .contact-container {
    position: relative;
    z-index: 2; 
}

.decorative-bg {
    background-color: #e9eff3; /* Slightly different light background */
}
.decorative-bg-alt {
    background-color: var(--primary-color);
    color: var(--text-light);
}
.decorative-bg-alt .section-title,
.decorative-bg-alt .section-subtitle, 
.decorative-bg-alt h2, .decorative-bg-alt h3, .decorative-bg-alt h4, .decorative-bg-alt p {
    color: var(--text-light);
}
.decorative-bg-alt a {
    color: var(--secondary-color);
}
.decorative-bg-alt a:hover {
    color: var(--text-light);
}


/* 4. Header & Navigation */
.site-header {
    background-color: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    padding: var(--spacing-sm) 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    height: var(--header-height);
    transition: background-color var(--transition-speed-normal) var(--transition-timing-smooth),
                box-shadow var(--transition-speed-normal) var(--transition-timing-smooth);
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.nav-logo {
    font-family: var(--font-family-headings);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary-color);
    text-decoration: none;
    text-shadow: none;
    transition: color var(--transition-speed-fast) var(--transition-timing-smooth);
}
.nav-logo:hover {
    color: var(--accent-color-1);
}
.navbar .nav-menu {
    list-style: none;
    display: flex;
    gap: var(--spacing-lg);
}
.navbar .nav-link {
    font-family: var(--font-family-body);
    font-weight: 500; 
    color: var(--text-dark);
    padding: var(--spacing-xs) var(--spacing-sm);
    transition: color var(--transition-speed-fast) var(--transition-timing-smooth),
                transform var(--transition-speed-fast) var(--transition-timing-nonlinear);
    display: inline-block; 
    position: relative;
}
.navbar .nav-link::after { /* Underline effect for hover/active */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    transition: width var(--transition-speed-fast) var(--transition-timing-smooth);
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
    width: 100%;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--primary-color);
    transform: translateY(-1px); /* Subtle lift */
}
.hamburger {
    display: none; 
    cursor: pointer;
    padding: 10px; /* Easier to tap */
}
.hamburger .bar {
    display: block;
    width: 28px; /* Slightly larger bars */
    height: 3px;
    margin: 6px auto; /* Slightly more space */
    background-color: var(--text-dark);
    transition: all var(--transition-speed-normal) var(--transition-timing-smooth);
}

/* 5. Global UI Components (Buttons, Cards) */
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-family-headings);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: var(--border-strong);
    padding: calc(var(--spacing-sm) + 2px) calc(var(--spacing-lg) + 2px); /* Slightly larger padding */
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 2px; /* Very subtle radius for usability, still feels sharp */
    transition: all var(--transition-speed-fast) var(--transition-timing-nonlinear);
    text-transform: uppercase;
    letter-spacing: 0.8px; /* More spacing */
    box-shadow: 4px 4px 0px var(--border-color-dark); /* Default shadow */
    position: relative; 
}
.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0px var(--border-color-dark);
}
.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px var(--border-color-dark);
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    border-color: var(--primary-color); 
    box-shadow: 4px 4px 0px var(--border-color-dark);
}
.btn-primary:hover {
    background-color: var(--accent-color-1);
    color: var(--text-dark); /* Accent color is light */
    border-color: var(--accent-color-1);
    box-shadow: 7px 7px 0px var(--border-color-dark);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-on-secondary);
    border-color: var(--secondary-color);
    box-shadow: 4px 4px 0px var(--border-color-dark);
}
.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    border-color: var(--primary-color);
}

.btn-tertiary, .btn-primary-outline {
    background-color: transparent;
    color: var(--primary-color);
    border: var(--border-strong); 
    border-color: var(--primary-color);
    box-shadow: 4px 4px 0px var(--primary-color); 
}
.btn-tertiary:hover, .btn-primary-outline:hover {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    box-shadow: 7px 7px 0px var(--primary-color);
}

.btn-tertiary-outline { 
    background-color: transparent;
    color: var(--text-light);
    border: 2px solid var(--text-light);
    box-shadow: 4px 4px 0px var(--text-light);
}
.btn-tertiary-outline:hover {
    background-color: var(--text-light);
    color: var(--primary-color);
    box-shadow: 7px 7px 0px var(--text-light);
}

.card {
    background-color: var(--text-light);
    border: var(--border-strong);
    box-shadow: 6px 6px 0px var(--border-color-dark); /* Slightly increased shadow */
    transition: transform var(--transition-speed-normal) var(--transition-timing-nonlinear),
                box-shadow var(--transition-speed-normal) var(--transition-timing-nonlinear);
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
    overflow: hidden; 
    height: 100%; 
}
.card:hover {
    transform: translateY(-6px) rotate(-1.5deg); 
    box-shadow: 10px 10px 0px var(--accent-color-1);
}
.card-image {
    width: 100%;
    height: 220px; /* Slightly taller image container */
    overflow: hidden;
    margin-bottom: 0; /* Remove margin, padding in card-content will handle spacing */
    background-color: var(--bg-dark-lighter); 
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform var(--transition-speed-slow) var(--transition-timing-smooth); /* Slower zoom */
}
.card:hover .card-image img {
    transform: scale(1.1); /* More pronounced zoom */
}
.card-content {
    padding: var(--spacing-lg);
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    width: 100%; /* Ensure content takes full width of card */
}
.card-content h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    font-size: 1.5rem; /* Larger card titles */
}
.card-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
}
.card .btn {
    margin-top: var(--spacing-md); /* Ensure space above button */
}

.read-more-link {
    display: inline-block;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px; /* More letter spacing */
    margin-top: var(--spacing-md);
    position: relative; 
    padding-right: calc(var(--spacing-md) + 5px); /* More space for arrow */
}
.read-more-link::after {
    content: '→';
    font-size: 1.2em; /* Larger arrow */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-52%); /* Fine-tune alignment */
    transition: transform var(--transition-speed-fast) var(--transition-timing-smooth),
                color var(--transition-speed-fast) var(--transition-timing-smooth);
}
.read-more-link:hover {
    color: var(--accent-color-1);
    text-decoration: none;
}
.read-more-link:hover::after {
    transform: translateY(-52%) translateX(5px); /* More movement */
    color: var(--accent-color-1);
}


/* 6. Section Specific Styles */

/* 6.1 Hero Section */
.hero-section {
    min-height: 90vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light); 
    padding-top: calc(var(--header-height) + var(--spacing-xl)); 
    padding-bottom: var(--spacing-xl);
}
.hero-section h1 {
    font-size: 3.8rem; 
    font-weight: 900; 
    margin-bottom: var(--spacing-lg);
    color: var(--text-light); 
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8); /* Enhanced shadow */
}
.hero-section p {
    font-size: 1.4rem; /* Larger hero paragraph */
    margin-bottom: var(--spacing-xl);
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-light); 
    opacity: 0.95; /* More opaque */
    line-height: 1.7;
}
.hero-section .btn-primary {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.25rem; /* Larger hero button */
    background-color: var(--secondary-color);
    color: var(--text-on-secondary);
    border-color: var(--secondary-color);
    box-shadow: 4px 4px 0px var(--primary-color); 
}
.hero-section .btn-primary:hover {
    background-color: var(--text-light);
    color: var(--primary-color);
    border-color: var(--text-light);
    box-shadow: 7px 7px 0px var(--primary-color);
}

/* 6.2 Clientele Section */
.clientele-section {
    background-color: var(--bg-light);
}
.client-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl) var(--spacing-xxl); /* More horizontal gap */
}
.client-logo-item img {
    max-height: 80px; 
    width: auto; 
    opacity: 0.65; /* Slightly more visible */
    transition: opacity var(--transition-speed-normal) var(--transition-timing-smooth),
                transform var(--transition-speed-normal) var(--transition-timing-smooth);
    filter: grayscale(60%);
}
.client-logo-item img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* 6.3 About Teaser Section */
.about-teaser-section {
   /* Uses .decorative-bg class */
   padding-top: var(--spacing-xxl);
   padding-bottom: var(--spacing-xxl);
}
.about-teaser-content {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); /* Text column slightly larger */
    gap: var(--spacing-xxl);
    align-items: center;
}
.about-text-column p {
    font-size: 1.05rem;
    line-height: 1.8;
}
.about-image-column .image-container {
    border: var(--border-strong);
    box-shadow: 10px 10px 0px var(--border-color-dark); /* Larger shadow */
    transform: rotate(2.5deg); 
    transition: transform var(--transition-speed-normal) var(--transition-timing-nonlinear),
                box-shadow var(--transition-speed-normal) var(--transition-timing-nonlinear);
}
.about-image-column .image-container:hover {
    transform: rotate(-1.5deg) scale(1.03);
    box-shadow: 12px 12px 0px var(--accent-color-1);
}
.about-image-column img {
    display: block;
    width: 100%;
    height: auto;
}

/* 6.4 Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Slightly wider min card width */
    gap: var(--spacing-xl);
}

/* 6.5 Webinars Section */
.webinars-section {
    position: relative;
    overflow: hidden; 
}
.webinars-section::before { 
    content: '';
    position: absolute;
    top: 0;
    left: -10%; 
    width: 120%;
    height: 120px; 
    background-color: rgba(255, 255, 255, 0.08); /* More visible accent */
    transform: skewY(-3.5deg);
    z-index: 0;
}
.webinars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: var(--spacing-xl);
    position: relative; 
    z-index: 1;
}
.webinar-card {
    background-color: rgba(255,255,255, 0.12); 
    border: 2px solid var(--secondary-color);
    padding: var(--spacing-lg);
    box-shadow: 6px 6px 0 var(--secondary-color);
    transition: transform var(--transition-speed-normal) var(--transition-timing-nonlinear),
                box-shadow var(--transition-speed-normal) var(--transition-timing-nonlinear);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.webinar-card:hover {
    transform: translateY(-7px);
    box-shadow: 10px 10px 0 var(--accent-color-1);
}
.webinar-card h4 {
    color: var(--secondary-color);
    margin-top: var(--spacing-md);
    font-size: 1.3rem;
}
.webinar-card p {
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    flex-grow: 1;
}
.webinar-card .webinar-date {
    font-style: italic;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
    color: rgba(255,255,255,0.75);
}
.webinar-card-image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    border: 2px solid var(--secondary-color);
}
.webinar-card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-out;
}
.webinar-card:hover .webinar-card-image-container img {
    transform: scale(1.08);
}
.webinar-card .btn { /* Ensure buttons align to bottom */
    margin-top: auto;
}
.webinar-card .btn-tertiary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    box-shadow: 4px 4px 0 var(--secondary-color);
}
.webinar-card .btn-tertiary:hover {
    background-color: var(--secondary-color);
    color: var(--text-dark);
}
.webinar-card .btn-tertiary-outline {
    color: var(--text-light);
    border-color: var(--text-light);
    box-shadow: 4px 4px 0 var(--text-light);
}
.webinar-card .btn-tertiary-outline:hover {
    background-color: var(--text-light);
    color: var(--primary-color);
}


/* 6.6 News Section */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
}
.news-item .card-image { 
    height: 240px;
}
.news-date {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
    font-style: italic;
}
.news-item .card-content h3 {
    font-size: 1.4rem; /* Adjust news title size */
}

/* 6.7 External Resources Section */
.external-resources-section {
    background-color: var(--bg-dark);
    color: var(--text-light);
}
.external-resources-section .section-title,
.external-resources-section .section-subtitle,
.external-resources-section h4,
.external-resources-section p {
    color: var(--text-light);
}
.external-resources-section h4 a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}
.external-resources-section h4 a:hover {
    color: var(--accent-color-1);
    text-decoration: underline;
}
.resources-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--spacing-lg);
}
.resource-item {
    background-color: var(--bg-dark-lighter);
    padding: var(--spacing-lg);
    border: 2px solid var(--accent-color-1);
    box-shadow: 4px 4px 0 var(--accent-color-1);
    transition: transform var(--transition-speed-normal) var(--transition-timing-smooth),
                box-shadow var(--transition-speed-normal) var(--transition-timing-smooth);
    height: 100%; /* Ensure equal height if needed */
}
.resource-item:hover {
    transform: translateY(-4px);
    box-shadow: 7px 7px 0 var(--secondary-color);
}
.resource-item h4 {
    margin-bottom: var(--spacing-sm);
    font-size: 1.25rem;
}
.resource-item p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 0;
    line-height: 1.6;
}

/* 6.8 Pricing Section */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    align-items: stretch; 
}
.pricing-card {
    border: var(--border-strong);
    background-color: var(--text-light);
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: 6px 6px 0px var(--border-color-dark);
    transition: transform var(--transition-speed-normal) var(--transition-timing-nonlinear),
                box-shadow var(--transition-speed-normal) var(--transition-timing-nonlinear);
    position: relative; 
    display: flex;
    flex-direction: column;
}
.pricing-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 12px 12px 0px var(--primary-color);
}
.pricing-card.popular {
    border-color: var(--secondary-color);
    box-shadow: 6px 6px 0px var(--secondary-color);
    transform: scale(1.05) translateY(-5px); /* Make popular stand out more */
    z-index: 10; /* Ensure it's above others if overlapping */
}
.pricing-card.popular:hover {
    box-shadow: 12px 12px 0px var(--secondary-color);
    transform: scale(1.08) translateY(-10px);
}
.popular-badge {
    position: absolute;
    top: 0px; 
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: var(--secondary-color);
    color: var(--text-on-secondary);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    border: var(--border-strong);
    border-color: var(--border-color-dark);
    z-index: 1; /* Above card border */
}
.pricing-card-header h3 {
    color: var(--primary-color);
    font-size: 1.7rem; /* Larger pricing title */
}
.price-tag {
    font-size: 2.8rem; /* Larger price */
    font-weight: 900;
    color: var(--accent-color-2); 
    margin: var(--spacing-sm) 0 var(--spacing-md) 0;
}
.pricing-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.pricing-card-body > p { /* Target direct child p for description */
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
    min-height: 60px; /* Ensure space for 2-3 lines of description */
}
.pricing-card-body ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-lg);
    text-align: left; 
    flex-grow: 1;
}
.pricing-card-body ul li {
    padding: var(--spacing-sm) 0; /* More padding */
    border-bottom: 1px dashed var(--border-color-light);
    position: relative;
    padding-left: calc(var(--spacing-md) + 5px); 
    font-size: 0.95rem;
}
.pricing-card-body ul li::before {
    content: '✓'; 
    color: var(--accent-color-1);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.pricing-card .btn {
    margin-top: auto; 
}
.pricing-footnote {
    text-align: center;
    margin-top: var(--spacing-xl);
    font-size: 0.95rem;
}
.pricing-footnote a {
    font-weight: 700;
}

/* 6.9 Contact Section */
.contact-section {
    color: var(--text-light); 
}
.contact-section .section-title,
.contact-section .section-subtitle,
.contact-section h3,
.contact-section p,
.contact-section label {
    color: var(--text-light);
}
.contact-section a {
    color: var(--secondary-color);
    font-weight: 500;
}
.contact-section a:hover {
    color: var(--accent-color-1);
}
.contact-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); /* Form takes more space */
    gap: var(--spacing-xxl);
}
.form-group {
    margin-bottom: var(--spacing-lg);
}
.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    font-size: 1.05rem; /* Slightly larger labels */
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: var(--spacing-md); /* More padding in inputs */
    border: 2px solid var(--text-light); 
    border-radius: 2px; /* Subtle radius */
    background-color: rgba(255,255,255,0.15); /* Brighter background */
    color: var(--text-light);
    font-family: var(--font-family-body);
    font-size: 1rem;
    transition: border-color var(--transition-speed-normal) var(--transition-timing-smooth),
                background-color var(--transition-speed-normal) var(--transition-timing-smooth),
                box-shadow var(--transition-speed-normal) var(--transition-timing-smooth);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255,255,255,0.7); /* Brighter placeholder */
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    background-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 3px rgba(var(--secondary-color), 0.5); /* Focus ring */
}
.contact-section .btn-submit {
    width: 100%;
    background-color: var(--secondary-color);
    color: var(--text-on-secondary);
    border-color: var(--secondary-color);
    box-shadow: 4px 4px 0px var(--text-light);
    padding: var(--spacing-md);
    font-size: 1.1rem;
}
.contact-section .btn-submit:hover {
    background-color: var(--accent-color-1);
    border-color: var(--accent-color-1);
    color: var(--text-dark);
    box-shadow: 7px 7px 0px var(--text-light);
}
.contact-details-container h3 {
    margin-bottom: var(--spacing-lg);
    font-size: 1.8rem;
}
.contact-info-block {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    border: 2px solid var(--secondary-color);
    background-color: rgba(0,0,0,0.25); 
}
.contact-info-block h4 {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-sm);
    font-size: 1.3rem;
}
.contact-info-block p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-xs);
}
.contact-map-placeholder img {
    border: 2px solid var(--secondary-color);
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    margin-top: var(--spacing-md);
}


/* 7. Footer */
.site-footer {
    background-color: var(--bg-dark);
    color: rgba(255,255,255,0.75); /* Brighter footer text */
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-lg);
    border-top: 6px solid var(--primary-color); 
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Wider min col */
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}
.footer-column h4 {
    color: var(--text-light);
    margin-bottom: var(--spacing-lg); /* More space under h4 */
    font-size: 1.3rem; /* Larger footer headings */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-column p,
.footer-column ul li a {
    font-size: 0.95rem; /* Slightly larger footer text */
    color: rgba(255,255,255,0.8); /* Brighter links */
    line-height: 1.7;
}
.footer-column ul {
    list-style: none;
    padding: 0;
}
.footer-column ul li {
    margin-bottom: var(--spacing-sm);
}
.footer-column ul li a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
    padding-left: 5px; /* Indent on hover */
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-social .social-media-links-text a {
    display: block; /* Stack social links */
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    font-weight: 500;
}
.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255,255,255,0.25);
    font-size: 0.9rem;
}
.footer-bottom p {
    margin-bottom: 0;
    color: rgba(255,255,255,0.65);
}

/* 8. Utility & Helper Classes */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }


/* 10. Responsive Design (Media Queries) */
@media (max-width: 992px) {
    .about-teaser-content,
    .contact-content-wrapper {
        grid-template-columns: 1fr; 
    }
    .about-image-column {
        order: -1; 
        margin-bottom: var(--spacing-xl);
    }
    .about-image-column .image-container {
        transform: rotate(0deg); 
        max-width: 500px; /* Control image size on tablet */
        margin-left: auto;
        margin-right: auto;
    }
    .pricing-card.popular {
        transform: scale(1.02) translateY(-3px); 
    }
}

@media (max-width: 768px) {
    html { font-size: 15px; }
    h1 { font-size: 2.3rem; } /* Adjusted h1 size */
    .section-title { font-size: 2rem; }
    .hero-section h1 { font-size: 2.8rem; } /* Adjusted hero h1 */
    .hero-section p { font-size: 1.2rem; }

    .navbar {
        position: fixed;
        left: -100%; 
        top: var(--header-height);
        background-color: rgba(255, 255, 255, 0.98); /* More opaque for readability */
        width: 100%;
        height: calc(100vh - var(--header-height));
        display: flex; /* Added for centering */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: left var(--transition-speed-normal) var(--transition-timing-smooth);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        overflow-y: auto;
        padding: var(--spacing-xl) 0;
    }
    .navbar.active {
        left: 0;
    }
    .navbar .nav-menu {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-xl);
    }
    .navbar .nav-link {
        font-size: 1.6rem; /* Larger nav links in mobile menu */
        color: var(--primary-color);
        font-weight: 700;
    }
    .hamburger {
        display: block;
        z-index: 1001; /* Ensure hamburger is above menu if it overlaps */
    }
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    section {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    .section-subtitle {
        margin-bottom: var(--spacing-lg);
    }

    .footer-container {
        grid-template-columns: 1fr; 
        text-align: center;
    }
    .footer-column ul {
        display: inline-block; 
        text-align: left;
    }
     .footer-social .social-media-links-text a {
        display: inline-block; /* Social links side-by-side on mobile if space */
        margin: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
    .container { width: 95%; }
    .hero-section h1 { font-size: 2.2rem; }
    .hero-section p { font-size: 1.1rem; }
    .btn, button, input[type="submit"], input[type="button"] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.95rem; /* Slightly larger base button font */
    }
    .services-grid, .webinars-grid, .news-grid, .pricing-grid, .resources-list {
        grid-template-columns: 1fr; 
    }
    .pricing-card.popular {
        transform: scale(1) translateY(0); /* Reset popular scale fully */
    }
    .contact-content-wrapper {
        gap: var(--spacing-xl); /* Reduce gap */
    }
    .footer-column h4 {
        font-size: 1.2rem;
    }
}

/* 11. Special Page Styles */

/* Success Page Styling */
body.success-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--primary-color);
    color: var(--text-light);
}
body.success-page .site-header, body.success-page .site-footer { /* Hide header/footer or style them differently */
    display: none; 
}
.success-page main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xl);
}
.success-container {
    background-color: rgba(255,255,255,0.1);
    padding: var(--spacing-xxl) var(--spacing-xl);
    border: 3px solid var(--secondary-color); /* Thicker border */
    box-shadow: 8px 8px 0px var(--secondary-color); /* Larger shadow */
    max-width: 600px;
    width: 100%;
}
.success-container h1 {
    color: var(--secondary-color);
    font-size: 3.5rem; /* Larger success title */
    margin-bottom: var(--spacing-lg);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.success-container p {
    color: var(--text-light);
    font-size: 1.3rem; /* Larger success message */
    margin-bottom: var(--spacing-xl);
    line-height: 1.7;
}
.success-container .btn {
    background-color: var(--secondary-color);
    color: var(--text-on-secondary);
    border-color: var(--secondary-color);
    box-shadow: 4px 4px 0px var(--text-light);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.1rem;
}
.success-container .btn:hover {
    background-color: var(--accent-color-1);
    border-color: var(--accent-color-1);
    color: var(--text-dark);
    box-shadow: 7px 7px 0px var(--text-light);
}

/* Privacy & Terms Page Specific Styling */
body.privacy-page main,
body.terms-page main {
    padding-top: calc(var(--header-height) + var(--spacing-xl)); 
    padding-bottom: var(--spacing-xxl);
    background-color: var(--text-light); 
}
.privacy-page .container,
.terms-page .container {
    max-width: 800px; /* Optimal width for reading text */
}
.privacy-page .container h1,
.terms-page .container h1 {
    margin-bottom: var(--spacing-xl);
    color: var(--primary-color);
    text-align: center;
    font-size: 2.5rem;
}
.privacy-page .container h2,
.terms-page .container h2 {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
    font-size: 1.6rem; /* Adjusted h2 size for content pages */
    border-bottom: 2px solid var(--border-color-light);
    padding-bottom: var(--spacing-sm);
}
.privacy-page .container p, .privacy-page .container ul, .privacy-page .container li,
.terms-page .container p, .terms-page .container ul, .terms-page .container li {
    color: var(--text-dark); 
    margin-bottom: var(--spacing-md);
    font-size: 1.05rem; /* Slightly larger for readability */
    line-height: 1.8;
}
.privacy-page .container ul,
.terms-page .container ul {
    padding-left: var(--spacing-lg); 
    list-style-type: disc; /* Standard bullets */
}
.privacy-page .container li,
.terms-page .container li {
    margin-bottom: var(--spacing-sm);
}

header ul{
    flex-wrap: wrap;
}

body{
    padding-top: 5rem;
}