:root {
            --primary: #FF6B6B; /* Vibrant Red */
            --secondary: #4ECDC4; /* Teal */
            --accent: #45B7D1; /* Cyan */
            --neutral-dark: #2c3e50; /* Dark Blue */
            --neutral-light: #ecf0f1; /* Light Gray */
            --text-dark: #333333;
            --text-light: #ffffff;
            --heading-font: 'Roboto', sans-serif;
            --body-font: 'Open Sans', sans-serif;
            --base-font-size: 16px;
            --line-height: 1.6;
        }

        body {
            font-family: var(--body-font);
            font-size: var(--base-font-size);
            line-height: var(--line-height);
            color: var(--text-dark);
            padding-top: 70px; /* Space for fixed navbar */
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--heading-font);
            color: var(--neutral-dark);
            margin-bottom: 20px;
        }

        h1 { font-size: 3.5em; }
        h2 { font-size: 2.5em; }
        h3 { font-size: 1.8em; }
        h4 { font-size: 1.5em; }

        .section {
            padding: 80px 0;
            position: relative; /* For potential diagonal dividers or floating elements */
        }

        .section-neutral-dark { background-color: var(--neutral-dark); color: var(--text-light); }
        .section-neutral-light { background-color: var(--neutral-light); }
        .section-accent { background-color: var(--accent); color: var(--text-light); }
        .section-white { background-color: #ffffff; }

        .section-neutral-dark h2, .section-neutral-dark h3, .section-neutral-dark h4 { color: var(--text-light); }
        .section-accent h2, .section-accent h3, .section-accent h4 { color: var(--text-light); }


        /* Diagonal Divider Example (using pseudo-element) */
        .diagonal-divider-bottom {
            position: relative;
            padding-bottom: 100px; /* Add space for the diagonal */
            z-index: 1; /* Ensure content is above the divider */
        }
         .diagonal-divider-bottom::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100px; /* Height of the diagonal effect area */
            background: inherit; /* Inherit background for seamless look */
            z-index: -1; /* Place behind content */
            /* Transform for diagonal line */
            transform: skewY(-3deg); /* Adjust angle as needed */
            transform-origin: 100% 0; /* Pivot from right edge top */
        }
         /* Need specific styles for the section *following* the diagonal */
         .section-after-diagonal {
             margin-top: -50px; /* Pull section up to meet the diagonal */
             position: relative;
             z-index: 2;
         }


        /* Navbar */
        .navbar {
            margin-bottom: 0;
            border-radius: 0;
            border: none;
            padding: 15px 0; /* Add some vertical padding */
        }
        .navbar-inverse .navbar-nav > li > a {
            color: var(--text-light);
            padding: 15px 20px; /* Increase padding for touch target */
            min-width: 44px; /* Ensure minimum touch target */
            min-height: 44px;
            display: inline-block; /* Needed for min-width/height on inline elements */
        }
        .navbar-inverse .navbar-toggle {
            border-color: var(--neutral-light);
            min-width: 44px; /* Ensure minimum touch target */
            min-height: 44px;
        }
        .navbar-inverse .navbar-toggle .icon-bar {
             background-color: var(--text-light);
        }
        .navbar-brand img {
            height: 40px; /* Adjust logo height */
            margin-top: -10px; /* Center logo vertically */
        }

        /* Hero Section */
        #hero {
            background: linear-gradient(45deg, rgba(44, 62, 80, 0.8), rgba(69, 183, 209, 0.8)), url('../images/hero-webinar-background.jpeg') no-repeat center center;
            background-size: cover;
            color: var(--text-light);
            text-align: center;
            padding: 150px 0; /* Large padding for hero */
            position: relative;
        }
         #hero::before { /* Abstract Shape/Overlay */
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(44, 62, 80, 0.7); /* Overlay color */
             z-index: 0;
        }
        #hero .container {
            position: relative;
            z-index: 1; /* Bring content to front */
        }
        #hero h1 {
            color: var(--text-light);
            text-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* Text shadow for depth */
        }
        #hero p {
             font-size: 1.2em;
             margin-bottom: 30px;
        }
         #hero .btn-primary {
             background-color: var(--primary);
             border-color: var(--primary);
             font-size: 1.2em;
             padding: 15px 30px;
             min-width: 44px; min-height: 44px;
         }
         #hero .btn-primary:hover,
         #hero .btn-primary:focus {
             background-color: darken(var(--primary), 10%); /* Example using a Sass-like darken, need actual hex calc or rgba */
             background-color: rgba(255, 107, 107, 0.8); /* Manual slight darken */
             border-color: rgba(255, 107, 107, 0.8);
         }


        /* General Content Sections (Webinar, Agenda, Why Attend, FAQ) */
        .section .media img, .section .img-responsive {
             margin-bottom: 20px; /* Space below image on mobile */
        }
        @media (min-width: 768px) { /* Medium and larger */
            .section .media-left, .section .media-right {
                 padding-right: 30px; /* Space between image and text */
            }
             .section .media-right {
                 padding-left: 30px;
                 padding-right: 0;
            }
            .section .media img, .section .img-responsive {
                margin-bottom: 0; /* Remove space below image on desktop */
            }
        }


        /* Speakers Section */
        .speaker-card {
            text-align: center;
            padding: 20px;
            margin-bottom: 30px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
         .speaker-card:hover {
             transform: translateY(-10px); /* Subtle float effect */
             box-shadow: 0 8px 16px rgba(0,0,0,0.2);
         }
        .speaker-card img {
            border-radius: 50%;
            margin-bottom: 15px;
             width: 160px; height: 160px; /* Ensure consistent size, multiple of 32 */
             object-fit: cover;
        }
        .speaker-card h4 {
            margin-top: 0;
            margin-bottom: 5px;
            color: var(--neutral-dark);
        }
        .speaker-card p {
            margin-bottom: 15px;
            font-size: 0.95em;
            color: #666;
        }
        .speaker-card .social-links a {
            margin: 0 5px;
            color: var(--accent);
            font-size: 1.5em;
            transition: color 0.3s ease;
             min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; /* Ensure touch target */
        }
         .speaker-card .social-links a:hover {
             color: var(--primary);
         }


        /* Agenda Section */
        .agenda-item {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--neutral-light);
        }
        .agenda-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .agenda-item strong {
            display: block;
            color: var(--primary);
            margin-bottom: 5px;
        }


        /* Why Attend Section (Features) */
        .feature-block {
            text-align: center;
            padding: 30px 20px;
            margin-bottom: 30px;
            background-color: var(--neutral-light);
            border-radius: 8px;
             transition: background-color 0.3s ease;
        }
         .feature-block:hover {
             background-color: #e0e0e0;
         }
        .feature-block h4 {
            color: var(--neutral-dark);
            margin-top: 0;
        }


        /* Testimonials Section */
        .testimonial-item {
            font-style: italic;
            margin-bottom: 30px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .testimonial-item p {
            margin-bottom: 10px;
            color: var(--text-dark);
        }
        .testimonial-author {
            text-align: right;
            font-weight: bold;
            color: var(--primary);
        }
         .testimonial-role {
             text-align: right;
             font-size: 0.9em;
             color: #666;
         }


        /* Registration Form Section */
        #registration_form .form-group label {
            color: var(--text-light);
             margin-bottom: 8px;
        }
         #registration_form .form-control {
             padding: 12px 15px;
             height: auto; /* Override default height for better padding */
             font-size: 1em;
             border-radius: 4px;
         }
         #registration_form .btn-primary {
             background-color: var(--primary);
             border-color: var(--primary);
             font-size: 1.2em;
             padding: 12px 30px;
             margin-top: 20px;
             min-width: 44px; min-height: 44px;
         }
          #registration_form .btn-primary:hover {
             background-color: darken(var(--primary), 10%);
              background-color: rgba(255, 107, 107, 0.8);
              border-color: rgba(255, 107, 107, 0.8);
         }
         #registration_form small {
             color: var(--neutral-light);
             display: block;
             margin-top: 15px;
         }


        /* FAQ Section */
        .panel-default > .panel-heading {
            background-color: var(--neutral-light);
            border-color: var(--neutral-light);
        }
         .panel-title a {
             display: block;
             padding: 10px 15px;
             color: var(--neutral-dark);
             font-size: 1.1em;
             min-width: 44px; min-height: 44px; /* Ensure touch target */
             text-decoration: none; /* Remove underline */
         }
         .panel-body {
             background-color: #ffffff;
             color: var(--text-dark);
         }

        /* Contact Section */
        #contact .contact-details p {
             margin-bottom: 15px;
             font-size: 1.1em;
        }
         #contact .contact-details p strong {
             display: inline-block;
             margin-right: 10px;
             color: var(--secondary);
         }
         #contact a {
             color: var(--secondary);
             transition: color 0.3s ease;
         }
         #contact a:hover {
             color: var(--primary);
         }
        #contact iframe {
             border-radius: 8px;
             margin-top: 30px;
        }

        /* Footer */
        footer {
            background-color: var(--neutral-dark);
            color: var(--text-light);
            padding: 30px 0;
            text-align: center;
            font-size: 0.9em;
        }
        footer a {
            color: var(--secondary);
            margin: 0 10px;
            transition: color 0.3s ease;
            min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; /* Ensure touch target */
        }
        footer a:hover {
            color: var(--primary);
            text-decoration: none;
        }
         footer .social-links a {
            font-size: 1.5em;
             margin: 0 8px;
         }
         footer .social-links {
             margin-bottom: 20px;
         }
         footer p {
             margin: 0;
         }

        /* Scroll Animation (requires basic JS) */
        .scroll-animation {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
             /* Use a class added by JS to trigger visibility */
        }
        .scroll-animation.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Cookie Consent Banner */
        #cookieConsentBanner {
            display: none; /* Hidden by default */
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(44, 62, 80, 0.95); /* neutral-dark with opacity */
            color: var(--text-light);
            padding: 15px 20px;
            text-align: center;
            z-index: 1030; /* Above Bootstrap modals/nav */
             font-size: 0.9em;
        }
        #cookieConsentBanner button {
            background-color: var(--accent);
            color: var(--text-light);
            border: none;
            padding: 10px 20px;
            margin-left: 15px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s ease;
             min-width: 44px; min-height: 44px; /* Ensure touch target */
        }
        #cookieConsentBanner button:hover {
            background-color: darken(var(--accent), 10%); /* Manual slight darken */
             background-color: rgba(69, 183, 209, 0.8);
        }