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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background: #ffffff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background: linear-gradient(135deg, #315a8c 0%, #4a6ba5 100%);
    color: white;
    position: relative;
    z-index: 1000;
}

.header-content {
    position: relative;
    z-index: 2;
    padding: 2rem 0;
}

.language-switcher {
    text-align: right;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.language-switcher a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    margin: 0 0.5rem;
    transition: color 0.3s;
}

.language-switcher a:hover {
    color: white;
}

.language-switcher .current {
    color: white;
    font-weight: 600;
}

.logo-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo h1 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 0;
}

.tagline {
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0.85; /* Slightly adjusted opacity to better match the image */
}

/* Links */
/* Global Link Styling */
a {
    color: #2a4c7a; /* A slightly darker shade of your main color #315a8c */
    text-decoration: none; /* Removes the underline */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

a:hover {
    text-decoration: underline; /* Optional: Re-add underline on hover for clarity */
}

/* Specific Adjustments (if needed, based on your existing CSS) */

/* Navigation links already have specific styles, so ensure global 'a' doesn't override them */
/* If you want navigation links to *also* follow the darker base color, you'd need to adjust their specific rules.
   However, your current nav links are white, so this global rule won't affect them unless you remove their specific rules. */
nav a {
    color: white; /* Keeps navigation links white as per your existing design */
    text-decoration: none !important;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s;
    font-weight: 500;
}

nav a:hover, nav a.active {
    background: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

/* Links within lists, as discussed previously, also need styling */
.main-content ul li a,
.main-content ol li a {
    color: #2a4c7a; /* Apply the darker shade to list links too */
    text-decoration: none; /* Ensure no underline */
}

.main-content ul li a:hover,
.main-content ol li a:hover {
    color: #4a6ba5; /* Lighter hover color */
    text-decoration: underline; /* Optional: Re-add underline on hover */
}

/* Ensure any other specific link styles (like CTA buttons) are also maintained or adjusted */
.cta-button {
    background: linear-gradient(135deg, #315a8c, #4a6ba5); /* Already has its own background color */
    color: white; /* Keeps CTA buttons white */
    text-decoration: none;
    /* ... other styles ... */
}

.purchase-btn {
    background: #315a8c; /* Already has its own background color */
    color: white; /* Keeps purchase buttons white */
    text-decoration: none;
    /* ... other styles ... */
}

.book-thumbnail {
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Ensure link in book title maintains its color */
.publication-item h3 a {
    color: #2a4c7a; /* Apply the darker shade */
    text-decoration: none;
}

.publication-item h3 a:hover {
    color: #4a6ba5; /* Lighter hover color */
    text-decoration: underline;
}

/* Navigation */
nav {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1rem;
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s;
    font-weight: 500;
}

nav a:hover, nav a.active {
    background: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 4rem 0;
    text-align: center;
}

.hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #315a8c, #4a6ba5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #315a8c, #4a6ba5);
    color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(49, 90, 140, 0.3);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(49, 90, 140, 0.4);
}

/* Main Content */
main {
    padding: 2rem 0;
}

.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.main-content h3 {
    color: #2d3748;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    border-left: 4px solid #315a8c;
    padding-left: 1rem;
}

.main-content p {
    margin-bottom: 1.5rem;
    color: #4a5568;
    font-size: 1.1rem;
}

.main-content ul {
    /* Restore typical browser default indentation or adjust as needed */
    padding-left: 40px; /* A common default value, adjust for your design */
    margin-bottom: 1.5rem; /* Keep the margin for separation as discussed before */
}

.main-content ol {
    padding-left: 40px;
    margin-bottom: 1.5rem;
}

/* Limit image width within the main content area */
.main-content img {
    max-width: 100%; /* Ensures images don't overflow their parent container */
    height: auto;    /* Maintains aspect ratio */
    /* If you want an absolute maximum width for all images in main-content: */
    /* max-width: 730px; */ /* Or whatever pixel value you prefer */
    display: block;  /* Helps with centering and consistent layout */
    margin: 0 auto;  /* Centers the image if its natural width is less than max-width */
}

/* If you have specific classes for certain images, you can apply max-width to them */
.main-content img.limited-width {
    max-width: 730px; /* Or a class like 'max-w-md' if using a utility framework */
}



.framework-highlight {
    background: linear-gradient(135deg, #315a8c 0%, #4a6ba5 100%);
    color: white;
    padding: 2rem;
    border-radius: 16px;
    margin: 2rem 0;
    text-align: center;
}

.framework-highlight h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.framework-items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

.framework-item {
    background: rgba(255,255,255,0.2);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-weight: 600;
}

/* Sidebar */
.sidebar {
    background: #f8fafc;
    padding: 2rem;
    border-radius: 16px;
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.sidebar h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.quote-container {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid #315a8c;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.quote {
    font-style: italic;
    color: #4a5568;
    font-size: 1rem;
    transition: opacity 0.3s ease;
}

.workshops {
    margin-top: 2rem;
}

.workshop-item {
    background: white;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.workshop-item h5 {
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.workshop-item p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* Book Section */
.book-section {
    background: white;
    padding: 3rem 2rem;
    border-radius: 16px;
    margin: 3rem 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.book-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

.book-info h3 {
    color: #2d3748;
    margin-bottom: 1rem;
}

.book-image {
    text-align: center;
}

.book-cover {
    width: 240px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.purchase-options {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.purchase-btn {
    background: #315a8c;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s;
}

.purchase-btn:hover {
    background: #274a79;
    transform: translateY(-2px);
}

/* Footer */
footer {
    background: #2d3748;
    color: white;
    text-align: center;
    padding: 2rem 0;
    margin-top: 4rem;
}

/* Responsive */
@media (max-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .book-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero h2 {
        font-size: 2rem;
    }

    .logo-section {
        flex-direction: column;
        text-align: left;
    }

    nav ul {
        flex-direction: column;
        gap: 0.25rem;
    }

    .framework-items {
        flex-direction: column;
        align-items: center;
    }

    .framework-item {
        width: fit-content;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-content > * {
    animation: fadeInUp 0.6s ease-out;
}

/* --- Dropdown Menu Styles --- */

/* The container for a dropdown menu item (the "About" li) */
nav li.dropdown {
    position: relative; /* This is crucial for positioning the dropdown */
}

/* The arrow next to the dropdown link */
.dropdown-arrow {
    font-size: 0.8em;
    margin-left: 5px;
    opacity: 0.7;
}

/* The actual dropdown menu (the nested ul) */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #315a8c;
    list-style: none;
    padding: 0.5rem 0;
    /* margin-top: 10px;  <-- REMOVE OR COMMENT OUT THIS LINE */
    padding-top: 10px;   /* <-- ADD THIS LINE INSTEAD */
    border-radius: 8px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
    min-width: 200px;
    z-index: 100;
}

/* The links inside the dropdown */
.dropdown-menu li a {
    padding: 0.75rem 1.5rem;
    display: block; /* Make the whole area clickable */
    white-space: nowrap; /* Prevent ugly text wrapping */
    font-weight: normal; /* Make them less bold than top-level links */
    transform: none !important; /* Override the hover transform from parent */
    text-decoration: none;
}

.dropdown-menu li a:hover {
    background: rgba(255,255,255,0.1);
}

/* --- THE MAGIC: Show the dropdown on hover --- */
nav li.dropdown:hover > .dropdown-menu {
    display: block;
}




/* --- Contact Form Styles --- */
.contact-section {
    padding: 3rem 0; /* Add vertical padding like other sections */
    background: #f8fafc; /* Light background for the section */
    text-align: center; /* Center content within the section */
}

.contact-form-container {
    max-width: 600px; /* Limit the width of the form container */
    margin: 0 auto; /* Center the form container */
    background: #ffffff; /* White background for the form itself */
    padding: 2.5rem; /* Internal padding */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Subtle shadow */
    text-align: left; /* Reset text alignment for form elements */
}

.contact-title {
    font-size: 2.2rem; /* Similar to h2 in hero section */
    color: #315a8c; /* Main brand color for the title */
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
}

.contact-intro {
    font-size: 1.1rem;
    color: #4a5568;
    text-align: center;
    margin-bottom: 2rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between form groups */
}

.form-group label {
    display: block; /* Make labels take full width */
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%; /* Make inputs take full width of their parent */
    padding: 0.8rem 1rem;
    border: 1px solid #cbd5e0; /* Light gray border */
    border-radius: 6px; /* Slightly rounded corners */
    font-family: 'Inter', sans-serif; /* Match body font */
    font-size: 1rem;
    color: #1a1a1a;
    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transitions for focus */
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none; /* Remove default outline */
    border-color: #315a8c; /* Highlight border on focus with brand color */
    box-shadow: 0 0 0 3px rgba(49, 90, 140, 0.2); /* Soft blue glow on focus */
}

.form-group textarea {
    resize: vertical; /* Allow vertical resizing, but not horizontal */
    min-height: 100px; /* Minimum height for textarea */
}

.recaptcha-container {
    /* Style the reCAPTCHA container if needed, e.g., to center it */
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem; /* Space above and below reCAPTCHA */
}


.form-actions {
    text-align: center; /* Center the submit button */
    margin-top: 2rem; /* Space above the button */
}

/* Re-use .cta-button for the submit button as it already has nice styling */
.contact-form .cta-button {
    padding: 1rem 2.5rem; /* Adjust padding for a slightly larger button */
    font-size: 1.1rem;
    /* The rest of the .cta-button styles already apply */
}


/* Responsive adjustments for the form */
@media (max-width: 768px) {
    .contact-form-container {
        padding: 1.5rem; /* Less padding on smaller screens */
        margin: 0 1rem; /* Add horizontal margin to prevent touching edges */
    }

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

.hidden {
    display: none !important; /* Hides the element completely */
    visibility: hidden !important; /* Ensures it's not just invisible but also out of accessibility tree for some screen readers */
    height: 0 !important; /* Prevents it from taking up vertical space */
    width: 0 !important; /* Prevents it from taking up horizontal space */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
}