/* Global Styles */
:root {
    --dark-purple: #4A0070;
    --dark-purple-light: #6A0090;
    --gold: #FFD700;
    --white: #FFFFFF;
    --light-gray: #F8F9FA;
    --dark-gray: #333333;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--dark-gray);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--dark-purple);
    font-weight: 700;
}

h1 {
    font-size: clamp(2rem, 5vw, 2.8rem); /* Mobile: ~20px, Tablet: ~2.2rem, Desktop: ~2.8rem */
}

h2 {
    font-size: clamp(1.8rem, 4.5vw, 2.5rem); /* Mobile: ~1.125rem, Tablet: ~2rem, Desktop: ~2.5rem */
}

h3 {
    font-size: clamp(1.5rem, 4vw, 2.2rem); /* Mobile: ~0.9375rem, Tablet: ~1.8rem, Desktop: ~2.2rem */
}

.site-title, .site-title-footer {
    font-size: clamp(1rem, 3.5vw, 1.8rem); /* Mobile: ~1rem, Tablet: ~1.8rem, Desktop: ~1.8rem */
    font-weight: 600;
    color: var(--white);
}

.site-logo, .site-logo-footer {
    height: 35px; /* Adjust as needed */
    width: auto;
}

/* Buttons */
.btn {
    text-decoration: none !important;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    text-align: center;
}

.btn-gold {
    background-color: var(--gold);
    color: var(--dark-purple);
    border: 1px solid var(--gold);
}

.btn-gold:hover {
    border-color: darken(var(--gold), 10%);
}

.btn-dark-purple {
    background-color: var(--dark-purple);
    color: var(--white);
    border: 1px solid var(--dark-purple);
}

.btn-dark-purple:hover {
    background-color: var(--dark-purple-light);
    border-color: var(--dark-purple-light);
    color: var(--white);
}

/* Navbar */
.bg-dark-purple {
    background-color: var(--dark-purple) !important;
}

.navbar-brand .site-logo {
    max-height: 40px;
}

.navbar-nav .nav-link {
    color: var(--white) !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--gold) !important;
}

.offcanvas-header {
    background-color: var(--dark-purple);
}

.offcanvas-body {
    background-color: var(--dark-purple);
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--dark-purple-light) 100%);
    position: relative;
    padding-top: 150px !important; /* Offset for fixed header */
    padding-bottom: 80px;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); /* Asymmetric cut */
}

@media (max-width: 767.98px) {
    .hero-section {
        clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
    }
}

.hero-content {
    z-index: 2;
    position: relative;
}

.hero-image-container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
    transition: transform 0.8s ease-out;
}

.hero-section .animate-cta, .hero-section h1, .hero-section p {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hero-section.is-visible .animate-cta, .hero-section.is-visible h1, .hero-section.is-visible p {
    opacity: 1;
    transform: translateY(0);
}

.hero-section.is-visible h1 { transition-delay: 0.2s; }
.hero-section.is-visible p { transition-delay: 0.4s; }
.hero-section.is-visible .animate-cta { transition-delay: 0.6s; }
.hero-section.is-visible .animate-image { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }

/* General Section Styling */
section {
    padding: 80px 0;
}

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

.text-dark-purple {
    color: var(--dark-purple) !important;
}

.text-gold {
    color: var(--gold) !important;
}

.text-dark-gray {
    color: var(--dark-gray);
}

/* Service Cards */
.service-card, .segment-card, .testimonial-card {
    background-color: var(--white);
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    padding: 2rem;
}

.service-card:hover, .segment-card:hover, .testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.service-card-col, .segment-card-col, .testimonial-card-col {
    display: flex;
}

/* Advantages Section */
.advantage-item {
    padding: 2rem;
}

.advantage-item i {
    font-size: 4rem;
}

/* Solutions Accordion */
.accordion-item {
    border: 1px solid var(--dark-purple);
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.accordion-button {
    background-color: var(--white);
    color: var(--dark-purple);
    font-weight: 600;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
}

.accordion-button:not(.collapsed) {
    background-color: var(--dark-purple);
    color: var(--gold);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-body {
    padding: 1.5rem;
    background-color: var(--white);
    border-top: 1px solid var(--light-gray);
}

.accordion-body ul {
    padding-left: 1.5rem;
    margin-top: 1rem;
}

.accordion-body li {
    margin-bottom: 0.5rem;
}

/* Testimonials */
.avatar-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid var(--gold);
}

/* About Us - Interactive Map */
.interactive-map-container {
    position: relative;
    max-width: 100%;
    height: 400px; /* Fixed height for map */
    background-color: var(--dark-purple-light);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.map-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4; /* Dark overlay effect */
}

.map-pin {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: var(--gold);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 10;
}

.map-pin:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(255, 215, 0, 0.7);
}

/* Specific pin positions (example, adjust based on actual map image) */
.pin-1 { top: 20%; left: 15%; }
.pin-2 { top: 40%; left: 40%; }
.pin-3 { top: 60%; left: 65%; }
.pin-4 { top: 80%; left: 85%; }

@media (max-width: 767.98px) {
    .interactive-map-container {
        height: 300px;
    }
    .pin-1 { top: 15%; left: 25%; }
    .pin-2 { top: 35%; left: 50%; }
    .pin-3 { top: 55%; left: 75%; }
    .pin-4 { top: 75%; left: 90%; }
}

/* Contact Us Section */
.contact-section-row {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.contact-info-col {
    background-color: var(--dark-purple);
}

.contact-form-col {
    background-color: var(--white);
}

.form-control {
    border-radius: 0.5rem;
    border-color: #ced4da;
    padding: 0.75rem 1rem;
}

.form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
}

.email-break {
    word-break: break-all;
}

/* Side CTA Banner */
.side-cta-banner {
    position: fixed;
    right: -150px; /* Initially hidden */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
    transition: right 0.5s ease-out;
}

.side-cta-banner.show {
    right: 0;
}

.side-cta-banner .btn {
    writing-mode: vertical-lr; /* Vertical text */
    text-orientation: mixed;
    border-radius: 0.5rem 0 0 0.5rem;
    padding: 1rem 0.75rem;
    height: auto;
}

@media (max-width: 767.98px) {
    .side-cta-banner {
        right: -100%; /* Hide completely on small screens */
        display: none;
    }
}

/* Footer */
.footer-section {
    background-color: var(--dark-purple);
    color: var(--white);
}

.footer-cta-panel {
    background-color: var(--gold);
    color: var(--dark-purple);
    border-radius: 0.75rem;
    margin-top: -100px; /* Overlap with previous section */
    position: relative;
    z-index: 5;
}

.footer-cta-panel .btn {
    background-color: var(--dark-purple);
    color: var(--white);
}

.footer-cta-panel .btn:hover {
    background-color: var(--dark-purple-light);
}

.site-logo-footer {
    max-height: 35px;
}

.site-title-footer {
    font-size: clamp(1rem, 3.5vw, 1.5rem);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer-section a {
    color: var(--white-50);
    text-decoration: none;
}

.footer-section a:hover {
    color: var(--gold);
}

/* Cookie Banner */
.cookie-banner {
    z-index: 1100;
    background-color: var(--dark-purple);
    color: var(--white);
    border-top: 1px solid var(--gold);
    border-radius: 0.5rem 0.5rem 0 0;
}

.cookie-banner p a {
    color: var(--gold);
}

.cookie-banner .btn-gold {
    color: var(--dark-purple);
    background-color: var(--gold);
    border-color: var(--gold);
}

.cookie-banner .btn-outline-light {
    color: var(--white);
    border-color: var(--white);
}

.cookie-banner .btn-outline-light:hover {
    background-color: var(--white);
    color: var(--dark-purple);
}

/* Cookie Settings Modal */
#cookieSettingsModal .modal-content {
    background-color: var(--dark-purple);
    border: 1px solid var(--gold);
    border-radius: 0.75rem;
}

#cookieSettingsModal .modal-header {
    border-bottom: none;
}

#cookieSettingsModal .modal-footer {
    border-top: none;
}

.form-check-input:checked {
    background-color: var(--gold);
    border-color: var(--gold);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
}

.form-check-label {
    color: var(--white);
}

/* Animations on scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 1199.98px) {
    .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar-nav .nav-item {
        width: 100%;
    }
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
    }
}

@media (min-width: 1200px) {
    .offcanvas {
        visibility: hidden !important;
    }
    .navbar-toggler {
        display: none;
    }
}

@media (max-width: 767.98px) {
    h1 {
        font-size: 1.8rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    h3 {
        font-size: 1.25rem;
    }
    .site-title, .site-title-footer {
        font-size: 1.25rem;
    }
  
    .hero-content {
        text-align: center;
    }
    .hero-image-container {
        margin-top: 2rem;
    }
    .footer-cta-panel {
        margin-top: -50px;
    }
    .footer-section .row {
        text-align: center;
    }
    .footer-section .col-md-4 {
        margin-bottom: 2rem;
    }
    .footer-section .col-md-4:last-child {
        margin-bottom: 0;
    }
    .cookie-banner .container {
        flex-direction: column;
    }
    .cookie-banner .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .cookie-banner .btn:last-child {
        margin-bottom: 0;
    }
}
/*
 * New stock styles for common HTML elements within .complianceVaultNode
 * These styles provide default typography, spacing, and layout
 * without excessively large font sizes for headings.
 */

.complianceVaultNode {
    /* Padding for the main container, providing space from its edges */
    padding: 1.5rem 1.5rem; /* Top/bottom and left/right padding */
}

/* Headings */
.complianceVaultNode h1 {
    /* H1 - Primary heading, moderate size */
    font-size: 2rem; /* Approximately 32px on a 16px base */
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.2;
}

.complianceVaultNode h2 {
    /* H2 - Secondary heading */
    font-size: 1.75rem; /* Approximately 28px */
    margin-top: 2rem;
    margin-bottom: 0.9rem;
    font-weight: bold;
    line-height: 1.3;
}

.complianceVaultNode h3 {
    /* H3 - Tertiary heading */
    font-size: 1.5rem; /* Approximately 24px */
    margin-top: 1.8rem;
    margin-bottom: 0.8rem;
    font-weight: bold;
    line-height: 1.4;
}

.complianceVaultNode h4 {
    /* H4 - Sub-heading */
    font-size: 1.25rem; /* Approximately 20px */
    margin-top: 1.5rem;
    margin-bottom: 0.7rem;
    font-weight: bold;
    line-height: 1.5;
}

.complianceVaultNode h5 {
    /* H5 - Smallest heading, often used for minor sections or labels */
    font-size: 1rem; /* Base font size, approximately 16px */
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
    font-weight: bold;
    line-height: 1.6;
}

/* Paragraphs */
.complianceVaultNode p {
    /* Standard paragraph text */
    font-size: 1rem; /* Base font size */
    margin-bottom: 1rem; /* Space between paragraphs */
    line-height: 1.6; /* Improved readability */
}

/* Unordered Lists */
.complianceVaultNode ul {
    /* Default styling for unordered lists */
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem; /* Indentation for bullet points */
    list-style-type: disc; /* Default bullet style */
}

/* List Items */
.complianceVaultNode li {
    /* Styling for individual list items */
    margin-bottom: 0.5rem; /* Space between list items */
    line-height: 1.5; /* Line height for list item text */
}


@media (max-width: 575px) {
    nav{
        padding: 10px !important;
    }
}

#cookieSettingsModal{
    z-index: 1100;
}

main{
    overflow: hidden !important;
}

.footer-section{
    text-align: center;
}