/* TABLE OF CONTENTS
1.  VARIABLES
2.  GLOBAL STYLES
3.  UTILITY CLASSES
4.  LAYOUT & SECTION STYLING
5.  HEADER & NAVIGATION
6.  HERO SECTION
7.  FEATURES SECTION
8.  ABOUT US SECTION
9.  METHODOLOGY SECTION (INFO CARDS)
10. INNOVATION SECTION
11. RESEARCH SECTION
12. PROJECTS SECTION (CASE STUDIES)
13. PRICING SECTION
14. WEBINARS SECTION (EDUCATIONAL RESOURCES)
15. EXTERNAL RESOURCES SECTION
16. CONTACT SECTION & FORM
17. FOOTER
18. COMPONENT STYLES (CARDS, BUTTONS, ETC.)
19. ANIMATIONS & TRANSITIONS
20. SPECIFIC PAGE STYLES (SUCCESS, PRIVACY, TERMS)
21. RESPONSIVE STYLES
*/

/* 1. VARIABLES */
:root {
    --primary-color: #0D6EFD; /* Bootstrap Blue */
    --primary-dark-color: #0A58CA;
    --primary-light-color: #6EA8FF;
    --primary-hover-color: #0B5ED7;
    --primary-color-rgb: 13, 110, 253;

    --secondary-color: #6c757d; /* Bootstrap Secondary */
    --secondary-hover-color: #5a6268;

    --text-color-dark: #222222;
    --text-color-medium: #343a40; /* Bootstrap default text color */
    --text-color-light: #555555;
    --text-color-inverted: #FFFFFF;
    --text-color-muted: #6c757d;

    --bg-white: #FFFFFF;
    --bg-light-color: #F8F9FA;
    --bg-medium-color: #E9ECEF;
    --bg-dark-color: #2C3E50; /* Dark Slate Blue/Gray for footer or dark sections */

    --border-color: #DEE2E6;
    --border-radius-small: 0.25rem; /* 4px */
    --border-radius-medium: 0.5rem; /* 8px */
    --border-radius-large: 0.75rem; /* 12px */

    --font-family-roboto: 'Roboto', sans-serif;
    --font-family-lato: 'Lato', sans-serif;

    --shadow-sm: 0 2px 4px rgba(0,0,0,0.075);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 20px rgba(0,0,0,0.12);

    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;
}

/* 2. GLOBAL STYLES */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-family-lato);
    color: var(--text-color-medium);
    background-color: var(--bg-white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
    padding-top: 0px !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-roboto);
    font-weight: 700;
    color: var(--text-color-dark);
    line-height: 1.3;
    margin-top: 0;
}

h1 { font-size: 2.8rem; font-weight: 900;}
h2 { font-size: 2.2rem; } /* Default for section titles if not overridden */
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
    font-size: 1rem; /* 16px */
    color: var(--text-color-light);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-timing);
}

a:hover {
    color: var(--primary-hover-color);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove bottom space */
}

/* Ensure Bootstrap containers are centered and have padding */
.container, .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/* 3. UTILITY CLASSES */
.section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
}

.section-bg-light {
    background-color: var(--bg-light-color);
}

.section-bg-dark {
    background-color: var(--bg-dark-color);
    color: var(--text-color-inverted);
}
.section-bg-dark h1, .section-bg-dark h2, .section-bg-dark h3, .section-bg-dark h4, .section-bg-dark h5, .section-bg-dark h6, .section-bg-dark p {
    color: var(--text-color-inverted);
}
.section-bg-dark .section-title::after {
    background-color: var(--text-color-inverted); /* White underline on dark bg */
}
.section-bg-dark a {
    color: var(--primary-light-color);
}
.section-bg-dark a:hover {
    color: var(--text-color-inverted);
}


.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }

.fw-bold { font-weight: 700 !important; } /* Bootstrap class, ensuring our font variable is used if needed */
.fw-black { font-weight: 900 !important; }

.disabled-link {
    pointer-events: none;
    opacity: 0.7;
    color: var(--text-color-muted) !important;
}
.disabled-link:hover {
    text-decoration: none;
}


/* 4. LAYOUT & SECTION STYLING */
section {
    position: relative; /* For pseudo-elements and absolute positioning within */
    padding: 80px 0; /* Default section padding */
}

.section-title {
    font-family: var(--font-family-roboto);
    font-weight: 900;
    color: var(--text-color-dark); /* Default for light backgrounds */
    margin-bottom: 3.5rem;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 1rem;
    text-align: center;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 80px;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

/* "Iskrivlennye setki" - Angled section dividers (subtle) */
.section-angled-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: inherit; /* Inherits background of the section it's applied to */
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    transform: translateY(-100%) scaleY(-1); /* Flips it to point upwards and be above */
    z-index: 1; /* Ensure it's above previous section if backgrounds differ, adjust as needed */
}

.section-angled-bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: inherit;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    transform: translateY(100%) scaleY(-1); /* Flips it to point downwards and be below */
    z-index: 1;
}

/* Apply to sections with different background from previous/next */
/* Example: .section-bg-light.section-angled-top::before { background-color: var(--bg-white); } */

/* 5. HEADER & NAVIGATION */
.site-header {
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-speed) var(--transition-timing);
}

.site-header .navbar-brand {
    font-family: var(--font-family-roboto);
    font-weight: 900;
    font-size: 1.8rem;
    color: var(--text-color-dark);
}

.site-header .nav-link {
    font-family: var(--font-family-lato);
    font-weight: 700;
    color: var(--text-color-medium);
    padding: 0.8rem 1rem;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: color var(--transition-speed) var(--transition-timing);
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: var(--primary-color);
}

.navbar-toggler {
    border-color: rgba(0,0,0,0.1);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.dropdown-menu {
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-md);
    border: none;
}
.dropdown-item {
    font-family: var(--font-family-lato);
    font-weight: 500;
    color: var(--text-color-medium);
}
.dropdown-item:hover {
    background-color: var(--primary-light-color);
    color: var(--text-color-inverted);
}


/* 6. HERO SECTION */
.hero-section {
    min-height: 85vh; /* Viewport height */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Parallax effect - simple version */
    /* background-attachment: fixed; -- This can cause issues on mobile, better with JS */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* For overlay */
}

.hero-section::before { /* Overlay for text readability */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)); /* Ensure gradient matches HTML */
}

.hero-section .container {
    position: relative; /* To be above overlay */
    z-index: 2;
}

.hero-section h1 {
    color: var(--text-color-inverted); /* As per HTML */
    font-size: 3.5rem;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7); /* As per HTML */
}

.hero-section p.lead {
    color: var(--text-color-inverted); /* As per HTML */
    font-size: 1.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Buttons in Hero - specific styles if needed beyond global .btn */
.hero-section .btn {
    padding: 0.9rem 2rem;
    font-size: 1rem;
}

/* 7. FEATURES SECTION */
.feature-card .card-image { /* specific height for feature card images */
    position: relative;
    width: 100%;
    padding-top: 62.5%; /* Aspect ratio (e.g., 250 / 400 * 100%) */
    background-color: var(--bg-medium-color); /* Placeholder bg */
}
.feature-card .card-image img {
    position: absolute;
    top: 0; left: 0;
}

/* 8. ABOUT US SECTION */
.stat-widget {
    background-color: var(--bg-light-color);
    padding: 1.5rem;
    border-radius: var(--border-radius-medium);
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.stat-widget h4 {
    color: var(--primary-color);
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
}
.stat-widget p {
    color: var(--text-color-light);
    font-size: 0.9rem;
    margin-bottom: 0;
}
.about-us-image-container img { /* For image in About Us */
    border-radius: var(--border-radius-large);
}

/* 9. METHODOLOGY SECTION (INFO CARDS) */
.info-card {
    background-color: var(--bg-white);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    text-align: center;
}
.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.info-card .icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* For Bootstrap icons to scale */
}
.info-card .icon-circle i {
    line-height: 1; /* Vertically center icon if it's slightly off */
}

/* 10. INNOVATION SECTION */
.innovation-image-container img {
    border-radius: var(--border-radius-large);
}
.innovation-list li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem;
}
.innovation-list li i {
    position: absolute;
    left: 0;
    top: 5px; /* Adjust for alignment */
}

/* 11. RESEARCH SECTION - Standard text section, relies on global typography */

/* 12. PROJECTS SECTION (CASE STUDIES) */
.project-card .card-image { /* specific height for project card images */
    position: relative;
    width: 100%;
    padding-top: 62.5%; /* Aspect ratio (e.g., 250 / 400 * 100%) */
    background-color: var(--bg-medium-color); /* Placeholder bg */
}
.project-card .card-image img {
    position: absolute;
    top: 0; left: 0;
}

/* 13. PRICING SECTION */
.pricing-card {
    border-radius: var(--border-radius-large);
    overflow: hidden; /* To contain header color */
}
.pricing-card .card-header {
    border-bottom: none; /* Remove Bootstrap's default border */
}
.pricing-card .card-header h4 {
    color: var(--text-color-inverted);
    font-size: 1.3rem;
}
.pricing-card .pricing-card-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--text-color-dark);
}
.pricing-card .pricing-card-title small {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-color-muted);
}
.pricing-card ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}
.pricing-card ul li:last-child {
    border-bottom: none;
}
.pricing-card .btn {
    margin-top: 1rem;
}
.pricing-card.border-primary { /* For highlighted plan */
    border-width: 2px !important; /* Override Bootstrap */
}


/* 14. WEBINARS SECTION (EDUCATIONAL RESOURCES) */
.webinars-card { /* Alias for .info-card used in HTML */
    text-align: left; /* Overrides info-card's center align for this specific use */
}
.webinars-card .btn-link {
    font-weight: 700;
    text-decoration: none;
}
.webinars-card .btn-link:hover {
    text-decoration: underline;
}
.webinars-card .btn-link i {
    transition: transform var(--transition-speed) var(--transition-timing);
    display: inline-block;
}
.webinars-card .btn-link:hover i {
    transform: translateX(4px);
}

/* 15. EXTERNAL RESOURCES SECTION */
#external-resources .list-group-item {
    border-radius: var(--border-radius-medium);
    margin-bottom: 1rem;
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    border-color: var(--border-color);
}
#external-resources .list-group-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary-color);
}
#external-resources .list-group-item h5 {
    color: var(--primary-color);
}
#external-resources .list-group-item p {
    font-size: 0.9rem;
    color: var(--text-color-light);
}

/* 16. CONTACT SECTION & FORM */
.modern-input {
    border-radius: var(--border-radius-small);
    border: 1px solid var(--border-color);
    padding: 0.85rem 1.1rem;
    transition: border-color var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    font-family: var(--font-family-lato);
    font-size: 1rem;
    background-color: var(--bg-white); /* Ensure it's not transparent */
}
.modern-input::placeholder {
    color: var(--text-color-muted);
    opacity: 1;
}
.modern-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
    outline: none;
}
.form-label {
    font-weight: 600;
    color: var(--text-color-medium);
    margin-bottom: 0.3rem;
}
.needs-validation .form-control.is-invalid,
.needs-validation .form-select.is-invalid {
    border-color: #dc3545; /* Bootstrap danger color */
}
.invalid-feedback {
    font-size: 0.875em;
}

/* 17. FOOTER */
.site-footer {
    background-color: var(--bg-dark-color);
    color: #aaaaaa; /* Lighter gray for footer text */
    padding: 50px 0;
}
.site-footer h5 {
    color: var(--text-color-inverted); /* Was #cccccc */
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.site-footer .list-unstyled li {
    margin-bottom: 0.5rem;
}
.site-footer .footer-link {
    color: #cccccc; /* Was #aaaaaa */
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-timing), padding-left var(--transition-speed) var(--transition-timing);
}
.site-footer .footer-link:hover {
    color: var(--text-color-inverted);
    padding-left: 5px; /* Slight indent on hover */
    text-decoration: none;
}
.site-footer p {
    color: #999999; /* Slightly darker for copyright */
    font-size: 0.9rem;
}

/* 18. COMPONENT STYLES (CARDS, BUTTONS, ETC.) */

/* Buttons (Global - already defined in HTML, ensuring consistency) */
.btn, button, input[type='submit'], input[type='button'] {
    font-family: var(--font-family-roboto);
    font-weight: 700;
    padding: 0.75rem 1.5rem; /* Base padding */
    border-radius: var(--border-radius-medium);
    transition: all var(--transition-speed) var(--transition-timing);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.btn:active, button:active, input[type='submit']:active, input[type='button']:active {
    transform: translateY(1px); /* Click effect */
    box-shadow: none;
}

.btn-primary,
input[type='submit'].btn-primary,
button.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-color-inverted);
    border-color: var(--primary-color);
}
.btn-primary:hover,
input[type='submit'].btn-primary:hover,
button.btn-primary:hover {
    background-color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color: var(--text-color-inverted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline-light { /* From Hero */
    color: var(--text-color-inverted);
    border-color: var(--text-color-inverted);
}
.btn-outline-light:hover {
    background-color: var(--text-color-inverted);
    color: var(--primary-color); /* Text color changes to primary on hover */
    border-color: var(--text-color-inverted);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--text-color-inverted);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Cards (Global - already defined in HTML, ensuring consistency) */
.card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center; /* Default text align for card content */
    background-color: var(--bg-white);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card .card-image {
    width: 100%;
    overflow: hidden;
    display: flex; /* Centers image if it's smaller than container, but object-fit handles it */
    justify-content: center;
    align-items: center;
    background-color: var(--bg-medium-color); /* Placeholder bg if image is transparent or fails to load */
}
/* Specific heights for card-image are in section styles (e.g., .feature-card .card-image) */

.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed) var(--transition-timing);
}
.card:hover .card-image img {
    transform: scale(1.05);
}

.card .card-body, .card .card-content { /* card-content from other frameworks */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center; /* Center content like title, text */
}
.card .card-title {
    font-family: var(--font-family-roboto);
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}
.card .card-text {
    font-family: var(--font-family-lato);
    color: var(--text-color-light);
    font-size: 0.95rem;
    line-height: 1.6;
    flex-grow: 1; /* Pushes buttons/links to bottom if card-body is flex */
    margin-bottom: 1rem; /* Space before any action buttons */
}

/* 19. ANIMATIONS & TRANSITIONS */
/* Base for AOS animations (AOS typically handles this, but good for consistency) */
[data-aos] {
    opacity: 0;
    transition-property: transform, opacity;
}
[data-aos].aos-animate {
    opacity: 1;
}

/* "Hand-drawn" like button animation (subtle wobble) */
.animated-button:hover {
    animation: buttonWobble 0.5s ease-in-out 1;
}

@keyframes buttonWobble {
    0%, 100% { transform: translateY(-2px) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(-1deg); }
    75% { transform: translateY(-2px) rotate(1deg); }
}

/* Text animation (Hero) */
.animated-text {
    opacity: 0;
    transform: translateY(20px);
    animation: textFadeInUp 0.8s ease-out forwards;
}
.hero-section h1.animated-text { animation-delay: 0.2s; }
.hero-section p.animated-text { animation-delay: 0.4s; }
.hero-section .btn.animated-button {
    opacity: 0;
    transform: translateY(20px);
    animation: textFadeInUp 0.8s ease-out forwards;
    animation-delay: 0.6s; /* Buttons appear after text */
}


@keyframes textFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Barba.js page transitions */
.barba-leave-active,
.barba-enter-active {
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.barba-leave {
  opacity: 1;
  transform: translateX(0);
}
.barba-leave-to {
  opacity: 0;
  transform: translateX(-20px); /* Slide out to left */
}
.barba-enter {
  opacity: 0;
  transform: translateX(20px); /* Slide in from right */
}
.barba-enter-to {
  opacity: 1;
  transform: translateX(0);
}


/* 20. SPECIFIC PAGE STYLES (SUCCESS, PRIVACY, TERMS) */
/* success.html */
.success-page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background-color: var(--bg-light-color);
}
.success-page-container .icon-success {
    font-size: 5rem;
    color: var(--primary-color); /* Or a success green */
    margin-bottom: 1.5rem;
    /* Simple animation for icon */
    animation: iconPop 0.5s ease-out forwards;
}
@keyframes iconPop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.success-page-container h1 {
    color: var(--text-color-dark);
    margin-bottom: 1rem;
}
.success-page-container p {
    color: var(--text-color-light);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* privacy.html, terms.html */
.legal-page-content, .about-page-content, .contact-page-content { /* Generic class for content pages */
    padding-top: 120px; /* Space for fixed header */
    padding-bottom: 60px;
}
.legal-page-content h1, .about-page-content h1, .contact-page-content h1 { /* Main page title */
    margin-bottom: 2rem;
    text-align: center;
    font-size: 2.8rem;
}
.legal-page-content h2, .about-page-content h2, .contact-page-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary-dark-color);
}
.legal-page-content p, .about-page-content p, .contact-page-content p {
    line-height: 1.8;
    margin-bottom: 1.2rem;
}
.legal-page-content ul, .about-page-content ul, .contact-page-content ul {
    list-style-position: outside;
    padding-left: 1.5rem;
    margin-bottom: 1.2rem;
}
.legal-page-content ul li, .about-page-content ul li, .contact-page-content ul li {
    margin-bottom: 0.5rem;
}


/* 21. RESPONSIVE STYLES */
@media (max-width: 991.98px) { /* Medium devices (tablets, less than 992px) */
    h1 { font-size: 2.5rem; }
    .hero-section h1 { font-size: 2.8rem; }
    .hero-section p.lead { font-size: 1.2rem; }
    .section-title { font-size: 2rem; margin-bottom: 2.5rem;}

    .site-header .navbar-nav {
        margin-top: 1rem;
        background-color: var(--bg-white); /* Ensure nav items are on solid background */
        padding: 1rem;
        border-radius: var(--border-radius-medium);
        box-shadow: var(--shadow-md);
    }
    .site-header .nav-link {
        padding: 0.6rem 0; /* Adjust padding for vertical layout */
        border-bottom: 1px solid var(--border-color);
    }
    .site-header .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    .pricing-card { margin-bottom: 1.5rem; }
}

@media (max-width: 767.98px) { /* Small devices (landscape phones, less than 768px) */
    section { padding: 60px 0; }
    h1 { font-size: 2.2rem; }
    .hero-section { min-height: 70vh; }
    .hero-section h1 { font-size: 2.4rem; }
    .hero-section p.lead { font-size: 1.1rem; }
    .hero-section .btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
        display: block; /* Stack buttons */
        margin-bottom: 0.5rem;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-section .btn:last-child { margin-bottom: 0; }

    .section-title { font-size: 1.8rem; margin-bottom: 2rem;}
    .section-title::after { width: 60px; height: 3px;}

    .stat-widget { margin-bottom: 1rem; }
    .stat-widget h4 { font-size: 2rem; }

    .footer .col-md-4 { text-align: center; margin-bottom: 2rem; }
    .footer .col-md-4:last-child { margin-bottom: 0; }
}

@media (max-width: 575.98px) { /* Extra small devices (portrait phones, less than 576px) */
    body { font-size: 0.95rem; } /* Slightly smaller base font */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.4rem; }
    .hero-section h1 { font-size: 2rem; }
    .hero-section p.lead { font-size: 1rem; }

    #contactForm .col-md-6 {
        flex: 0 0 100%; /* Stack form fields */
        max-width: 100%;
    }
}

/* Cookie Consent specific style if needed beyond inline */
#cookieConsentPopup a:hover {
    color: var(--primary-light-color); /* Lighter color for link hover on dark bg */
}
#cookieConsentPopup button:hover {
    background-color: var(--primary-hover-color) !important; /* Ensure hover works */
}
*{
    opacity: 1 !important;
}