/* style.css */

:root {
    /* Fonts */
    --font-primary: 'Oswald', sans-serif;
    --font-secondary: 'Nunito', sans-serif;

    /* Colors - Gradient Scheme & Modern */
    --primary-color: #0A77C9; /* Vibrant Blue */
    --primary-color-darker: #085A9B;
    --secondary-color: #4CAF50; /* Complementary Green */
    --accent-color: #FFC107; /* Bright Yellow/Gold for accents */
    
    --text-color-dark: #222222; /* For titles and important text on light bg */
    --text-color-body: #363636; /* Bulma's default, good for body */
    --text-color-light: #FFFFFF;
    --text-color-muted: #7a7a7a;

    /* Backgrounds */
    --background-light: #f9f9f9;
    --background-dark: #1c1e26;
    --background-darker: #111319;
    
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-primary-hover: linear-gradient(135deg, var(--primary-color-darker), #3e8e41);
    --gradient-dark-section: linear-gradient(135deg, var(--background-dark), #2a2d3a);
    --gradient-light-section: linear-gradient(135deg, var(--background-light), #eef2f7);

    /* Borders & Shadows */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.12);
    --shadow-large: 0 10px 25px rgba(0, 0, 0, 0.15);

    /* Animations */
    --elastic-easing: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --transition-speed: 0.3s;
}

/* Global Styles */
body {
    font-family: var(--font-secondary);
    color: var(--text-color-body);
    background-color: var(--background-light);
    line-height: 1.7;
    font-size: 1rem; /* Bulma default is 1rem (16px) */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-primary);
    color: var(--text-color-dark);
    font-weight: 700; /* Oswald bold */
}

.title {
    color: var(--text-color-dark); /* Default for titles */
}

.subtitle {
    color: var(--text-color-muted); /* Softer subtitle */
}

p {
    font-family: var(--font-secondary);
    margin-bottom: 1rem;
}

a {
    color: var(--primary-color);
    transition: color var(--transition-speed) ease;
    font-weight: 700; /* Nunito bold for links */
}

a:hover {
    color: var(--primary-color-darker);
}

.section {
    padding: 4rem 1.5rem; /* More vertical padding for sections */
}

.container {
    max-width: 1140px; /* Standard container width */
    margin: 0 auto;
}

.Oswald-font { font-family: var(--font-primary) !important; }
.Nunito-font { font-family: var(--font-secondary) !important; }

/* Section Title Styling */
.section-title {
    font-size: 2.5rem; /* Large, prominent titles */
    margin-bottom: 3rem;
    color: var(--text-color-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 1rem; /* Space for an underline effect */
}

.section-title::after { /* Underline effect */
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--primary-color);
    margin: 0.75rem auto 0; /* Centered underline */
    border-radius: var(--border-radius-small);
}

.has-text-white .section-title,
.has-background-gradient-dark .section-title,
.has-background-darker .section-title {
    color: var(--text-color-light);
}
.has-text-white .section-title::after,
.has-background-gradient-dark .section-title::after,
.has-background-darker .section-title::after {
    background: var(--accent-color); /* Brighter underline on dark backgrounds */
}


/* Helper class for vertical spacing */
.push-top-medium { margin-top: 2rem !important; }
.push-top-large { margin-top: 3rem !important; }

/* Header & Navbar */
.header.sticky-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    box-shadow: var(--shadow-medium);
}

.navbar {
    min-height: 4.5rem; /* Slightly taller navbar */
}

.navbar-brand .navbar-item.Oswald-font {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.navbar-item.Nunito-font {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-color-dark);
    transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease;
    position: relative; /* For underline effect */
    padding: 0.75rem 1.25rem;
}

.navbar-item.Nunito-font::after {
    content: '';
    position: absolute;
    bottom: 5px; /* Position of the underline */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-speed) ease;
}

.navbar-item.Nunito-font:hover,
.navbar-item.Nunito-font:focus,
.navbar-item.Nunito-font.is-active { /* is-active for current page/section */
    color: var(--primary-color);
    background-color: transparent; /* Bulma might add a bg */
}

.navbar-item.Nunito-font:hover::after,
.navbar-item.Nunito-font:focus::after,
.navbar-item.Nunito-font.is-active::after {
    width: 60%; /* Width of the underline on hover/active */
}

/* Burger menu icon colors */
.navbar-burger {
    color: var(--primary-color);
    width: 4.5rem;
    height: 4.5rem;
}
.navbar-burger span {
    background-color: var(--primary-color);
    height: 3px; /* Thicker burger lines */
    width: 24px; /* Wider burger lines */
}
/* Active state for burger lines */
.navbar-burger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.navbar-burger.is-active span:nth-child(2) {
    opacity: 0;
}
.navbar-burger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: rgba(255, 255, 255, 0.98); /* Solid background for mobile menu */
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 0.5rem 0;
    }
    .navbar-item.Nunito-font {
        padding: 0.75rem 1.5rem; /* More padding for mobile items */
        text-align: center;
    }
    .navbar-item.Nunito-font::after {
        bottom: 2px;
    }
}

/* Hero Section */
#hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#hero .hero-body {
    display: flex;
    align-items: center;
    justify-content: center;
}
#hero .title.has-text-white {
    font-size: 3.5rem; /* Larger hero title */
    margin-bottom: 1rem;
    color: var(--text-color-light) !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
#hero .subtitle.has-text-white {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    color: var(--text-color-light) !important;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.4);
}

/* Buttons - Global (Enhancing Bulma's .button) */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-secondary);
    font-weight: 700;
    border-radius: var(--border-radius-medium); /* Modern rounded corners */
    padding: 0.8em 1.8em; /* Comfortable padding */
    transition: transform var(--transition-speed) var(--elastic-easing), 
                background-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none; /* Remove default border if Bulma adds one */
    box-shadow: var(--shadow-light);
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-medium);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.button.is-primary {
    background: var(--gradient-primary);
    color: var(--text-color-light);
    border: none;
}
.button.is-primary:hover {
    background: var(--gradient-primary-hover);
    color: var(--text-color-light); /* Ensure text color remains light */
}

.button.is-large {
    font-size: 1.2rem; /* Adjust if Bulma's is too large/small */
    padding: 1em 2.2em;
}

/* Modern Button - Specific variant if needed beyond .button.is-primary */
.modern-button {
    /* Already covered by .button.is-primary, but can add specific styles here if different */
}

/* Forms - Global (Enhancing Bulma's input/textarea) */
.input, .textarea, .select select {
    font-family: var(--font-secondary);
    border-radius: var(--border-radius-medium);
    border: 1px solid #dbdbdb; /* Bulma default, can be customized */
    box-shadow: var(--shadow-light);
    padding: 0.8em 1em;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.input:focus, .textarea:focus, .select select:focus,
.input.is-focused, .textarea.is-focused, .select select.is-focused,
.input:active, .textarea:active, .select select:active,
.input.is-active, .textarea.is-active, .select select.is-active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.125em rgba(var(--primary-color-rgb, 10, 119, 201), 0.25); /* Use primary color for focus ring */
}
/* Placeholder color */
.input::placeholder, .textarea::placeholder {
    color: var(--text-color-muted);
    opacity: 0.7;
}

/* Modern Input/Textarea - Specific variant if needed */
.modern-input, .modern-textarea {
    background-color: #fff; /* Ensure white background for modern feel */
    /* Additional specific styles if different from default enhanced .input/.textarea */
}

/* Specific Sections Styling */

/* About Us Section */
#about .image-container img {
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-large);
}
#about .card {
    text-align: center;
    background-color: #fff; /* Ensure cards have a background */
}
#about .card .card-content p:first-of-type.title {
    margin-bottom: 0.5rem; /* Adjust spacing */
    color: var(--primary-color);
}

/* Portfolio, Gallery Sections - Card Styling */
.card { /* Global card enhancements */
    background-color: var(--text-color-light);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
    overflow: hidden; /* Crucial for image border-radius and object-fit */
    transition: transform var(--transition-speed) var(--elastic-easing), box-shadow var(--transition-speed) var(--elastic-easing);
    height: 100%; /* For equal height cards in a row */
    display: flex;
    flex-direction: column;
}
.card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: var(--shadow-large);
}

/* Card Image Handling */
.card .card-image {
    position: relative; /* For aspect ratio or overlay content */
    /* Bulma's figure.image.is-4by3 handles aspect ratio */
}
.card .card-image figure.image {
    /* This element often has padding-top for aspect ratio (e.g., 75% for 4:3) */
    /* Ensure it's a block or similar that img can fill */
    margin: 0; /* Remove default figure margin */
}
.card .card-image img {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: 100%; /* Fill the figure, which has aspect ratio */
    object-fit: cover; /* Crucial for responsive images in fixed aspect ratio containers */
    border-top-left-radius: var(--border-radius-medium); /* If image is at the very top */
    border-top-right-radius: var(--border-radius-medium);
    transition: transform 0.4s ease;
}
.card:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on image hover */
}

.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to expand, useful for equal height cards */
}
.card .card-content .title {
    margin-bottom: 0.75rem;
    font-size: 1.3rem; /* Slightly smaller title for cards */
    color: var(--primary-color);
}
.card .card-content .content {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* For cards where all content including title should be centered (as per strict rule) */
#portfolio .card .card-content,
#gallery .card .card-content,
#accolades .card .card-content { /* Example, adjust if not all cards need this */
    text-align: center;
}
#portfolio .card .card-content .title,
#gallery .card .card-content .title,
#accolades .card .card-content .title {
    /* No text-align here, already centered by parent if needed */
}

/* Accolades Section */
#accolades .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
}
#accolades .image-container img {
    max-height: 100px; /* Control logo size */
    width: auto;
    filter: grayscale(50%); /* Subdued logos */
    transition: filter var(--transition-speed) ease, transform var(--transition-speed) var(--elastic-easing);
}
#accolades .image-container img:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}
#accolades .column p.is-size-7 {
    margin-top: 0.5rem;
    color: var(--text-color-muted);
    font-weight: 600;
}

/* Testimonials Section */
.testimonial-card .card-content {
    position: relative;
    padding-left: 3rem; /* Space for quote icon */
}
.testimonial-card .card-content::before {
    content: '“';
    font-family: 'Georgia', serif; /* Or a nice quote font */
    font-size: 5rem;
    color: var(--primary-color);
    opacity: 0.2;
    position: absolute;
    left: 0.5rem;
    top: -0.5rem;
    line-height: 1;
}
.testimonial-card p.has-text-weight-bold {
    margin-top: 1rem;
    color: var(--primary-color);
    font-style: italic;
}

/* Innovation Section */
#innovation .image-container img {
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-large);
}

/* Accordion Styling */
.accordion .accordion-item {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0.5rem;
}
.accordion .accordion-item:last-child {
    border-bottom: none;
}
.accordion .accordion-header {
    background-color: transparent;
    border: none;
    width: 100%;
    text-align: left;
    padding: 1rem 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color-dark);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-speed) ease;
}
.accordion .accordion-header:hover {
    color: var(--primary-color);
}
.accordion .accordion-header::after { /* +/- icon indicator */
    content: '+';
    font-size: 1.5rem;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--transition-speed) var(--elastic-easing);
    color: var(--primary-color);
}
.accordion .accordion-header.is-active::after {
    transform: translateY(-50%) rotate(45deg); /* Turns + to x */
}
.accordion .accordion-content {
    padding: 0 0.5rem 1rem 0.5rem;
    display: none; /* Controlled by JS */
    font-size: 0.95rem;
    line-height: 1.6;
}
.accordion .accordion-content p {
    margin-bottom: 0.5rem;
}

/* External Resources Section */
#external-resources .resource-card {
    margin-bottom: 1.5rem;
    background: #fff; /* Distinct background for resource cards */
}
#external-resources .resource-card .card-content {
    padding: 1.5rem;
}
#external-resources .resource-card .title a {
    color: var(--primary-color);
    font-size: 1.2rem;
}
#external-resources .resource-card .title a:hover {
    text-decoration: underline;
}
#external-resources .resource-card .subtitle {
    font-size: 0.9rem;
    color: var(--text-color-muted);
    line-height: 1.5;
}


/* Contact Section */
#contact {
    background: var(--gradient-dark-section); /* Dark gradient for contact */
}
#contact .label.has-text-white {
    color: var(--text-color-light) !important;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
#contact .input, #contact .textarea {
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent inputs on dark bg */
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-color-light);
}
#contact .input::placeholder, #contact .textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
#contact .input:focus, #contact .textarea:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-color);
    color: var(--text-color-light);
    box-shadow: 0 0 0 0.125em rgba(255, 193, 7, 0.3); /* Accent color focus ring */
}
#contact .button.is-primary {
    background: var(--gradient-primary); /* Use the main primary gradient */
}
#contact .button.is-primary:hover {
     background: var(--gradient-primary-hover);
}
#contact .content.has-text-white-ter a.has-text-primary {
    color: var(--accent-color) !important; /* Links stand out on dark bg */
}
#contact .content.has-text-white-ter a.has-text-primary:hover {
    color: var(--text-color-light) !important;
}

/* Footer */
.footer {
    background-color: var(--background-darker);
    padding: 3rem 1.5rem 2rem; /* Less bottom padding */
    color: rgba(255,255,255,0.7);
}
.footer .footer-link {
    color: rgba(255,255,255,0.8);
    font-weight: 600;
    margin: 0 0.5rem;
    transition: color var(--transition-speed) ease, text-decoration var(--transition-speed) ease;
}
.footer .footer-link:hover {
    color: var(--text-color-light);
    text-decoration: underline;
}
.footer .social-links p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
}
.footer .social-links a { /* Text-based social links */
    margin: 0 0.75rem;
    font-size: 0.95rem;
}
.footer p {
    font-size: 0.9rem;
}
.footer .is-size-7 {
    font-size: 0.8rem !important;
    opacity: 0.6;
    margin-top: 1rem;
}

/* Background Gradient Classes from HTML */
.has-background-light-gradient {
    background: var(--gradient-light-section);
}
.has-background-gradient-dark { /* This one used in contact, already styled */
    background: var(--gradient-dark-section);
}

/* Page specific styles */
/* success.html */
.success-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background: var(--gradient-light-section);
}
.success-page-container .success-icon {
    font-size: 5rem; /* Example, replace with actual icon/image */
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}
.success-page-container .title {
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
}
.success-page-container .subtitle {
    color: var(--text-color-muted);
    margin-bottom: 2rem;
}

/* privacy.html & terms.html */
.privacy-page-container,
.terms-page-container {
    padding-top: calc(4.5rem + 2rem); /* navbar height + extra space */
    padding-bottom: 2rem;
    min-height: calc(100vh - 4.5rem - 5rem); /* Adjust footer height estimation */
}
.privacy-page-container .content h1,
.terms-page-container .content h1 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}
.privacy-page-container .content h2,
.terms-page-container .content h2 {
    font-size: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--text-color-dark);
}
.privacy-page-container .content p,
.terms-page-container .content p,
.privacy-page-container .content li,
.terms-page-container .content li {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-color-body);
}

/* Read More Link Style */
.read-more-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    padding: 0.5em 0; /* Vertical padding for easier clicking */
    position: relative;
}
.read-more-link::after {
    content: '→'; /* Arrow */
    margin-left: 0.5em;
    transition: margin-left var(--transition-speed) ease;
}
.read-more-link:hover {
    color: var(--primary-color-darker);
}
.read-more-link:hover::after {
    margin-left: 0.8em; /* Move arrow slightly on hover */
}


/* Responsive Adjustments (Bulma handles most, add specifics if needed) */
@media screen and (max-width: 768px) {
    .section {
        padding: 3rem 1rem;
    }
    #hero .title.has-text-white {
        font-size: 2.5rem;
    }
    #hero .subtitle.has-text-white {
        font-size: 1.2rem;
    }
    .section-title {
        font-size: 2rem;
    }
    .columns.is-vcentered .column:first-child { /* Asymmetric balance: stack order */
        order: 2;
    }
    .columns.is-vcentered .column:last-child {
        order: 1;
        margin-bottom: 2rem; /* Space when stacked */
    }
    /* Reverse stacking for specific sections if needed */
    #innovation .columns.is-vcentered .column:first-child {
        order: 1; /* Image first on mobile for innovation */
    }
     #innovation .columns.is-vcentered .column:last-child {
        order: 2;
    }

    .card .card-content .title {
        font-size: 1.2rem;
    }
}