/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1.  CSS Variables
2.  Resets & Base Styles
3.  Utility Classes
4.  Layout (Bulma extended)
5.  Header / Navbar
6.  Hero Section
7.  General Section Styles
8.  Card Styles (Global & Specific)
    8.1. General Card
    8.2. Service Card
    8.3. Blog Card
    8.4. Portfolio Card
    8.5. Resource Card
9.  Component Styles
    9.1. Buttons
    9.2. Forms (Inputs, Textareas)
    9.3. Accordion (FAQ)
    9.4. Progress Indicators
    9.5. Sliders (Basic structure)
    9.6. Image Galleries
10. Specific Section Styles
    10.1. Insights
    10.2. Success Stories
    10.3. Behind the Scenes
    10.4. Events Calendar
    10.5. Accolades
    10.6. Contact Info
11. Footer
12. Particle Animation Container
13. Page-Specific Styles
    13.1. success.html
    13.2. privacy.html, terms.html
14. Animations & Transitions (AOS, Hover effects)
15. Responsive Design (Media Queries)
-------------------------------------------------------------------*/

/* 1. CSS Variables */
:root {
    --primary-color: #0D253F; /* Deep Blue - Professional, Trust */
    --primary-color-rgb: 13, 37, 63;
    --secondary-color: #FF7A00; /* Vibrant Orange - Energy, Action */
    --secondary-color-rgb: 255, 122, 0;
    --accent-color: #00C49A; /* Bright Teal - Innovation, Modern */
    --accent-color-rgb: 0, 196, 154;

    --neutral-dark: #222222;
    --neutral-medium: #555555;
    --neutral-light: #f4f7f6; /* Light background for sections */
    --neutral-white: #ffffff;
    --text-color-dark: #333333;
    --text-color-light: #f8f9fa;

    --font-primary: 'Raleway', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;

    --border-radius-sm: 8px;
    --border-radius-md: 15px;
    --box-shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
    --box-shadow-glass: 0 8px 32px 0 rgba(var(--primary-color-rgb), 0.2);

    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

    --navbar-height: 52px; /* Default Bulma navbar height, adjust if needed */
}

/* 2. Resets & Base Styles */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
    font-family: var(--font-secondary);
    color: var(--text-color-dark);
    background-color: var(--neutral-white); /* Default background */
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-primary);
    font-weight: 800;
    color: var(--neutral-dark); /* Default for titles */
}

.title {
    color: var(--neutral-dark); /* Ensure Bulma titles use this */
}

a {
    color: var(--secondary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-color);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 3. Utility Classes (from HTML inline examples) */
.hero-body .title,
.hero-body .subtitle {
    color: var(--neutral-white) !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

.section-title {
    color: var(--neutral-dark) !important;
    text-align: center;
    margin-bottom: 3rem !important; /* Bulma title margin override */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dark-text-on-light-bg {
    color: var(--text-color-dark) !important;
}
.dark-text-on-light-bg a {
    color: var(--secondary-color) !important;
}
.dark-text-on-light-bg a:hover {
    color: var(--accent-color) !important;
}


.light-text-on-dark-bg {
    color: var(--text-color-light) !important;
}
.light-text-on-dark-bg a {
    color: var(--accent-color) !important;
}
.light-text-on-dark-bg a:hover {
    color: var(--neutral-white) !important;
}


.text-shadow {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.has-text-shadow {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}


/* Glassmorphism Style */
.glassmorphism {
    background: rgba(var(--neutral-white-rgb, 255, 255, 255), 0.1); /* Default white, can be overridden */
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(var(--neutral-white-rgb, 255, 255, 255), 0.18);
    box-shadow: var(--box-shadow-glass);
    padding: 25px;
}

/* Ensure backgrounds are covered */
[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* 4. Layout (Bulma extended) */
.container {
    max-width: 1140px; /* Or Bulma's default, can adjust */
}

/* 5. Header / Navbar */
.header .navbar {
    background-color: rgba(var(--primary-color-rgb), 0.8); /* Semi-transparent primary */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.header .navbar-item,
.header .navbar-link {
    color: var(--text-color-light);
    font-family: var(--font-secondary);
    font-weight: 600;
}
.header .navbar-item:hover,
.header .navbar-link:hover {
    background-color: rgba(var(--secondary-color-rgb), 0.8);
    color: var(--neutral-white);
}
.header .navbar-item img {
    max-height: 3rem; /* Adjust logo size */
}

.navbar-burger {
    color: var(--text-color-light);
}

/* Adjust body padding when navbar is fixed */
body {
    padding-top: var(--navbar-height);
}


/* 6. Hero Section */
#hero {
    position: relative;
    color: var(--neutral-white);
    /* background-attachment: fixed; is already in HTML, good for parallax */
}
#hero::before { /* General overlay if not specified in inline style */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--primary-color-rgb), 0.4); /* Darker overlay for better contrast */
    z-index: 1;
}
#hero .hero-body {
    position: relative;
    z-index: 2; /* Content above overlay */
    display: flex;
    align-items: center;
    justify-content: center;
}
#hero .hero-body .container {
    max-width: 800px;
}
#hero .button.is-primary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    font-weight: bold;
}
#hero .button.is-primary:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

/* 7. General Section Styles */
.section {
    padding: 4rem 1.5rem; /* Vertical padding, Bulma default for sides */
}
.section.has-background-light {
    background-color: var(--neutral-light) !important;
}


/* 8. Card Styles (Global & Specific) */
/* 8.1. General Card */
.card {
    background-color: var(--neutral-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-light);
    overflow: hidden; /* Ensures content respects border-radius */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    height: 100%; /* For equal height cards in columns */
    display: flex;
    flex-direction: column;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* Card image container */
.card .card-image {
    position: relative; /* For potential overlays or icons */
    overflow: hidden; /* Ensures img object-fit works well */
}
.card .card-image figure { /* Bulma's figure for images */
    margin: 0; /* Reset Bulma's figure margin if any */
    /* Fixed height can be applied here or to specific aspect ratio classes */
}
.card .card-image figure.is-4by3,
.card .card-image figure.is-3by2,
.card .card-image figure.is-16by9,
.card .card-image figure.is-1by1 {
   /* Bulma handles aspect ratio. We ensure image inside covers. */
}
.card .card-image figure.is-1by1 { /* For portfolio */
    padding-top: 100%; /* Creates square */
    height: 0;
    position: relative;
}
.card .card-image figure.is-1by1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.card .card-image img {
    width: 100%;
    height: 100%; /* Fill the figure */
    object-fit: cover; /* Crop to fit, maintain aspect ratio */
    display: block;
    transition: transform 0.4s ease;
}
.card:hover .card-image img {
    transform: scale(1.05);
}

/* Card content styling */
.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to fill space for equal height cards */
    display: flex;
    flex-direction: column;
}
.card .card-content .title,
.card .card-content .subtitle {
    margin-bottom: 0.75rem; /* Adjust spacing */
}
.card .card-content .content {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: auto; /* Pushes content down, useful if there's a button at bottom */
}
.card .card-content .content p:last-child {
    margin-bottom: 0;
}

/* Glassmorphism on cards */
.card.glassmorphism {
    background: rgba(var(--neutral-white-rgb), 0.6); /* Lighter for card on colored bg */
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(var(--neutral-white-rgb), 0.2);
    box-shadow: var(--box-shadow-glass);
}
.card.glassmorphism .card-content .title,
.card.glassmorphism .card-content .subtitle,
.card.glassmorphism .card-content .content,
.card.glassmorphism .card-content small {
    color: var(--text-color-dark); /* Ensure readability on glass */
}

/* 8.2 Service Card specific (already uses general card) */
#services .card .progress {
    margin-top: 1rem;
}

/* 8.3. Blog Card */
#blog .card .card-content .subtitle {
    font-size: 0.8rem;
    color: var(--neutral-medium);
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}
.read-more {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--secondary-color);
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}
.read-more:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* 8.4 Portfolio Card */
#portfolio .gallery-container .card {
    text-align: center;
}
#portfolio .card .card-content {
    padding: 1rem;
}
#portfolio .card .card-content .title {
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* 8.5. Resource Card */
#external-resources .resource-card {
    /* Glassmorphism already applied in HTML */
}
#external-resources .resource-card .title a {
    color: var(--primary-color);
}
#external-resources .resource-card .title a:hover {
    color: var(--secondary-color);
}

/* 9. Component Styles */
/* 9.1. Buttons (extending Bulma's .button) */
.button {
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 0.75em 1.5em; /* Slightly larger padding */
}
.button.is-primary {
    background-color: var(--secondary-color);
    border-color: transparent; /* No border or same as bg */
    color: var(--neutral-white);
}
.button.is-primary:hover {
    background-color: var(--accent-color);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--secondary-color-rgb), 0.3);
}
.button.is-info {
    background-color: var(--accent-color);
    border-color: transparent;
    color: var(--neutral-white);
}
.button.is-info:hover {
    background-color: var(--secondary-color);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--accent-color-rgb), 0.3);
}
.button.is-link.is-outlined {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.button.is-link.is-outlined:hover {
    background-color: var(--primary-color);
    color: var(--neutral-white);
}

/* Custom Modern Button (if Bulma's button is not sufficient) */
.modern-button { /* This class is used on the contact form submit */
    /* Extends Bulma's .button.is-primary */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 9.2. Forms (Inputs, Textareas) */
.modern-input,
.modern-textarea {
    border-radius: var(--border-radius-sm) !important;
    border: 1px solid #dbdbdb !important; /* Bulma's default border */
    box-shadow: none !important; /* Remove Bulma's default focus shadow */
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    padding: 0.75em 1em !important; /* Consistent padding */
}
.modern-input:focus,
.modern-textarea:focus {
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 0.125em rgba(var(--secondary-color-rgb), 0.25) !important;
}
.label {
    color: var(--neutral-dark);
    font-weight: 600;
}

/* 9.3. Accordion (FAQ) */
.faq-accordion .accordion-item {
    margin-bottom: 1rem;
    border-radius: var(--border-radius-md); /* Ensure glassmorphism radius is consistent */
    overflow: hidden; /* For content transitions */
}
.faq-accordion .accordion-header {
    background-color: transparent; /* Handled by glassmorphism */
    color: var(--text-color-dark); /* Text color for header */
    font-weight: bold;
    text-align: left;
    border: none; /* Remove Bulma button border */
    padding: 1rem 1.5rem;
    position: relative; /* For icon positioning if needed */
}
.faq-accordion .accordion-header:hover {
    /* background-color: rgba(var(--primary-color-rgb), 0.1); */
}
.faq-accordion .accordion-header .icon {
    transition: transform 0.3s ease;
}
.faq-accordion .accordion-item.active .accordion-header .icon {
    transform: rotate(45deg);
}
.faq-accordion .accordion-content {
    /* background-color: rgba(var(--neutral-white-rgb), 0.05); Slightly different tone for content */
    /* padding is already on the div in HTML */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out; /* Smooth transition */
}
.faq-accordion .accordion-item.active .accordion-content {
    max-height: 500px; /* Adjust as needed, or use JS to set height */
    padding-top: 1rem; /* Add padding back when active */
    padding-bottom: 1.5rem;
}


/* 9.4. Progress Indicators (Bulma's .progress) */
.progress {
    border-radius: var(--border-radius-sm);
    height: 0.75rem !important; /* Slightly thinner */
}
.progress::-webkit-progress-bar {
    background-color: #e0e0e0;
    border-radius: var(--border-radius-sm);
}
.progress.is-primary::-webkit-progress-value {
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-sm);
}
.progress.is-success::-webkit-progress-value {
    background-color: var(--accent-color);
    border-radius: var(--border-radius-sm);
}
.progress.is-info::-webkit-progress-value {
    background-color: var(--primary-color);
    border-radius: var(--border-radius-sm);
}
/* For Firefox */
.progress::-moz-progress-bar {
    border-radius: var(--border-radius-sm);
}
.progress.is-primary::-moz-progress-bar {
    background-color: var(--secondary-color);
}
.progress.is-success::-moz-progress-bar {
    background-color: var(--accent-color);
}
.progress.is-info::-moz-progress-bar {
    background-color: var(--primary-color);
}

/* 9.5. Sliders (Basic structure for JS to control) */
.insights-slider {
    /* Placeholder for potential slider styling by JS library or custom CSS */
    display: flex; /* Example if it's a flex-based slider */
    overflow-x: auto; /* Basic horizontal scroll */
}
.insights-slider .slide {
    min-width: 280px; /* Example slide width */
    margin-right: 1rem;
    flex-shrink: 0;
}

/* 9.6. Image Galleries */
/* Using Bulma columns for galleries. Portfolio already styled. */


/* 10. Specific Section Styles */
/* 10.1. Insights */
#insights .content h3 {
    color: var(--primary-color);
}
#insights .insights-slider .slide h5 {
    color: var(--primary-color);
}

/* 10.2. Success Stories */
/* General card style applies. */

/* 10.3. Behind the Scenes */
#behind-the-scenes .content h3 {
    color: var(--primary-color);
}

/* 10.4. Events Calendar */
#events .event-item {
    /* Glassmorphism applied in HTML */
    border-left: 5px solid var(--secondary-color);
    margin-bottom: 1.5rem;
}
#events .event-item .title {
    color: var(--primary-color);
}

/* 10.5. Accolades */
#accolades .accolade-logos img {
    max-height: 80px; /* Control logo size */
    width: auto;
    margin: 0 auto 0.5rem auto; /* Center and add bottom margin */
    filter: grayscale(50%);
    transition: filter 0.3s ease;
}
#accolades .accolade-logos img:hover {
    filter: grayscale(0%);
}
#accolades .accolade-logos p {
    font-size: 0.85rem;
}

/* 10.6. Contact Info */
#contact .contact-info {
    /* Glassmorphism applied in HTML */
}
#contact .contact-info h4 {
    color: var(--primary-color);
}
#contact .contact-info hr {
    background-color: rgba(var(--primary-color-rgb), 0.2);
    height: 1px;
}


/* 11. Footer */
.footer {
    background-color: var(--neutral-dark) !important; /* Overriding Bulma default */
    color: var(--text-color-light);
    padding: 3rem 1.5rem 2rem; /* Less bottom padding */
}
.footer .title.is-5 {
    color: var(--neutral-white) !important; /* Ensure titles in footer are white */
    margin-bottom: 1rem;
}
.footer a {
    color: #a0aec0; /* Lighter gray for links */
    font-weight: 500;
}
.footer a:hover {
    color: var(--secondary-color);
}
.footer ul {
    list-style: none;
    margin-left: 0;
}
.footer ul li {
    margin-bottom: 0.5rem;
}
.footer hr {
    background-color: var(--neutral-medium);
}
.footer .content p {
    color: #a0aec0; /* Subdued text for copyright */
}

/* 12. Particle Animation Container */
#particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; /* Behind content */
    pointer-events: none; /* Allow clicks through */
    /* Particles will be generated by Anime.js or another library */
}


/* 13. Page-Specific Styles */
/* 13.1. success.html */
.success-page-container { /* Add this class to body or a main wrapper in success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--navbar-height)); /* Full viewport height minus navbar */
    text-align: center;
    padding: 2rem;
    background: var(--gradient-primary);
}
.success-page-container .success-content {
    background: rgba(var(--neutral-white-rgb), 0.9);
    padding: 2rem 3rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-light);
}
.success-page-container .success-content .icon {
    font-size: 4rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}
.success-page-container .success-content h1 {
    color: var(--primary-color);
}

/* 13.2. privacy.html, terms.html */
.legal-page-content { /* Add this class to the main content container on these pages */
    padding-top: calc(var(--navbar-height) + 30px); /* Navbar height + extra space */
    padding-bottom: 4rem;
    min-height: calc(100vh - var(--navbar-height) - 70px); /* Footer height approx */
}
.legal-page-content .container {
    background-color: var(--neutral-white);
    padding: 2rem;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-light);
}
.legal-page-content h1, .legal-page-content h2 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}
.legal-page-content p {
    margin-bottom: 1rem;
    line-height: 1.8;
}
.legal-page-content ul {
    list-style-position: inside;
    margin-left: 1rem;
    margin-bottom: 1rem;
}


/* 14. Animations & Transitions (AOS, Hover effects) */
/* AOS will handle its own classes. These are general transitions. */
/* Hover effects are already added to buttons, cards, links. */


/* 15. Responsive Design (Media Queries) */
@media screen and (max-width: 1023px) { /* Bulma's tablet breakpoint */
    .header .navbar-menu {
        background-color: rgba(var(--primary-color-rgb), 0.95); /* Solid for dropdown */
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 0.5rem 0;
    }
    .header .navbar-item,
    .header .navbar-link {
        color: var(--text-color-light); /* Ensure text is light on dark mobile menu */
    }
    .header .navbar-item:hover {
         background-color: rgba(var(--secondary-color-rgb), 0.9);
    }
    body {
        /* padding-top will be handled by Bulma's is-fixed-top if used correctly,
           or needs JS adjustment if header height changes */
    }
    .section {
        padding: 3rem 1rem;
    }
    .columns.is-reversed-mobile {
        flex-direction: column-reverse;
    }
}

@media screen and (max-width: 768px) { /* Bulma's mobile breakpoint */
    .hero-body .title {
        font-size: 2rem; /* Adjust hero title size for mobile */
    }
    .hero-body .subtitle {
        font-size: 1.1rem; /* Adjust hero subtitle size for mobile */
    }
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 2rem !important;
    }
    .card .card-content {
        padding: 1rem;
    }
    .columns .column.is-two-thirds { /* Example for responsive column behavior */
        width: 100% !important; /* Ensure they stack properly */
    }
    #contact .columns {
        flex-direction: column-reverse; /* Put form first on mobile if needed */
    }
    #contact .contact-info {
        margin-top: 2rem;
    }
    .footer .columns {
        text-align: center;
    }
    .footer .column:not(:last-child) {
        margin-bottom: 1.5rem;
    }
}

/* Ensure very high contrast for specific elements if needed */
.high-contrast-text {
    color: #000000 !important;
    background-color: #FFFFFF !important;
}