/*=================================
|| PillarWeb - MASTER CSS (CLEANED & FIXED)
|| Final Corrected Version: October 2025
==================================*/

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&family=Roboto:wght@300;700&display=swap');

/*=================================
|| 1. GLOBAL STYLES, VARIABLES & RESET
==================================*/

/* Global Variables (CSS Variables) - UPDATED FOR VIBRANCY */
:root {
    --primary-color: #ff3864; /* Brighter, more energetic magenta/coral */
    --secondary-color: #907fbf; /* Keeping secondary as is */
    --dark-color: #1a1a2e; /* Warmer, less purple deep charcoal/blue */
    --light-color: #fff;
    --transition: all 0.3s ease;
    --gradient-primary: linear-gradient(135deg, #ff3864, #c73650); /* Updated gradient */
    --gradient-secondary: linear-gradient(135deg, #907fbf, #6f42c1);
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 5px 20px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.3);
    --border-radius: 10px;
    --border-radius-large: 20px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Global Reset */
* {
    box-sizing: border-box;
}

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

/* --- CRITICAL FIX 1: MOBILE HEIGHT, LIGHTBOX CENTERING, & DARK BACKGROUND --- */
html,
body {
    /* FIX: Ensures dark background covers the entire page to remove grey space */
    background-color: var(--dark-color) !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------------- */

body {
    font-family: 'Raleway', 'Helvetica', sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Selections & Links */
::selection {
    background: var(--primary-color);
    color: var(--light-color);
}

a {
    transition: var(--transition);
    text-decoration: none;
}

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

.wrapper {
    padding: 50px 0 30px;
}

/*=================================
|| 2. TYPOGRAPHY & GLOBAL HEADERS
==================================*/

.section-title {
    font-family: 'Roboto', 'Helvetica', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.section-paragraph {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.6;
}

.text-large {
    font-size: 1.125rem;
    line-height: 1.7;
}

/*=================================
|| 3. UTILITY CLASSES & BUTTONS
==================================*/

/* Utility Colors */
.custom-red {
    color: var(--primary-color) !important;
}

.custom-purple {
    color: var(--secondary-color) !important;
}

.custom-white {
    color: var(--light-color) !important;
}

.custom-black {
    color: var(--dark-color) !important;
}

.bg-dark-custom {
    background-color: var(--dark-color) !important;
}

/* Custom Effects */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
}

/* Custom Button - btn-custom */
.btn-custom {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 78, 78, 0.3);
    color: white;
}

/* Primary Button - btn-primary */
.btn-primary {
    background: var(--gradient-primary);
    border: none;
    border-radius: 25px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    color: var(--light-color);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #c73650, #a02a3a);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 78, 78, 0.3);
    color: var(--light-color);
}

/* Outline Buttons */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    border-width: 2px;
    border-radius: var(--border-radius);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: var(--transition);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 78, 78, 0.3);
    color: var(--light-color);
}

/* Filter Buttons (Works/Portfolio) */
.btn-group .btn,
.filters-button {
    /* Adjusted margin to allow wrapping */
    margin: 0.25rem 0.15rem;
    border-radius: 25px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    text-transform: capitalize;
    transition: var(--transition);
    border: 2px solid var(--light-color);
}

.btn-outline-light:hover,
.filters-button:hover,
.filters-button.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--light-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 78, 78, 0.3);
}

/* Form Styles */
.contact-form .form-control,
.form-control {
    border-radius: var(--border-radius);
    border: 2px solid #e9ecef;
    padding: 0.75rem 1rem;
    transition: var(--transition);
    font-size: 1rem;
}

.contact-form .form-control:focus,
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(230, 78, 78, 0.25);
    outline: none;
}

/* Bootstrap Overrides (Alerts) */
.alert-info {
    background: linear-gradient(135deg, rgba(230, 78, 78, 0.1), rgba(230, 78, 78, 0.05));
    border: 1px solid rgba(230, 78, 78, 0.2);
    border-radius: var(--border-radius);
    color: var(--dark-color);
}

.alert-success {
    background: linear-gradient(135deg, rgba(144, 127, 191, 0.1), rgba(144, 127, 191, 0.05));
    border: 1px solid rgba(144, 127, 191, 0.2);
    border-radius: var(--border-radius);
    color: var(--dark-color);
}

/* Custom styling for the Ebook CTA button */
.ebook-cta-btn {
    display: inline-block;
    padding: 10px 25px;
    color: #FFC107;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    background-color: transparent;
    border: 2px solid #FFC107;
    border-radius: 50px;
    transition: all 0.2s ease;
}

.ebook-cta-btn:hover {
    color: #212529;
    background-color: #FFC107;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

/* Custom class to force the rounded pill shape on buttons */
.btn-pill {
    border-radius: 50px !important;
}

/*=================================
|| 4. HEADER & NAVIGATION
==================================*/

/* Header Section */
/* Header Section */
.header {
    /* 1. Added solid dark color fallback (Guaranteed dark background) */
    background-color: var(--dark-color); 
    /* 2. Keeps your image/gradient for visual style */
    background-image: url(../images/www.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    padding: 10rem 0 5rem;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.header-description {
    position: relative;
    z-index: 2;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
}

.header-content {
    position: relative;
    z-index: 3;
}

.heading {
    font-weight: bold;
    padding: 1rem 2rem;
    letter-spacing: 8px;
    border: 2px solid var(--light-color);
    display: inline-block;
    font-size: 2.2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.heading:hover {
    background: rgba(230, 78, 78, 0.2);
    transform: scale(1.05);
}

.heading-subtitle {
    font-weight: 100;
    color: white !important; /* Use pure white for maximum contrast */	
    letter-spacing: 6px;
    font-size: 1.5rem;
    margin-top: 1rem;
}

/* REPLACE the previous .header h1, .header h2 block with this: */

/* -------------------------------------------------------------------------- */
/* FIX: Force Header Headings to White/Light Color (Refined) */
/* -------------------------------------------------------------------------- */
.header h1,
.header h2 {
    color: white !important; /* Use pure white for maximum contrast */
    font-weight: 700 !important; /* Ensure the text is bold */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a subtle shadow for pop */
}
/* Scroll Down Buttons */
.button-down {
    position: absolute;
    top: 95%;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.button-down-2 {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

/* Navigation Bar */
.navigationbar,
.navbar {
    background: var(--dark-color);
    padding: 1.5rem 0;
    min-height: 80px;
    transition: var(--transition);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.navigationbar.scrolled,
.navbar.scrolled {
    padding: 0.5rem 0;
    min-height: 60px;
    background: rgba(34, 30, 45, 0.95) !important;
    backdrop-filter: blur(10px);
}

.navbar-brand.logo {
    font-size: 1.5rem;
    letter-spacing: 6px;
    color: var(--light-color) !important;
    text-decoration: none;
}

.navbar-brand.logo:hover {
    color: var(--light-color) !important;
}

.globe {
    color: var(--light-color);
}

.navbar-nav .nav-link {
    color: var(--secondary-color) !important;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0 0.5rem;
    padding: 0.5rem 1rem !important;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: var(--transition);
}

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

.navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Fix for Navigation Text Color in Header */
.header .navbar-nav .nav-link {
    color: var(--light-color) !important;
}

/*=================================
|| 5. SECTION STYLES (ABOUT, WORKS, ETC.)
==================================*/

/* About Section */
.about {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 5rem 0;
}

.about-content {
    padding: 2rem;
}

/* Accordion/Services Section */
.accordion {
    --bs-accordion-border-radius: var(--border-radius);
    margin: 2rem 0;
}

.accordion-item {
    border: none;
    margin-bottom: 1rem;
    border-radius: var(--border-radius) !important;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.accordion-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    background: rgba(255, 255, 255, 0.25) !important;
}

.accordion-button {
    border: none;
    border-radius: var(--border-radius) !important;
    font-weight: 600;
    padding: 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white !important;
    transition: var(--transition);
    min-height: 80px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.accordion-button::after {
    display: none;
}

/* Enhanced Accordion Button Colors - Open State (using :not(.collapsed)) */
.accordion-button:not(.collapsed) {
    background: rgba(230, 78, 78, 0.8) !important;
    color: white !important;
    backdrop-filter: blur(15px) !important;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(230, 78, 78, 0.25);
    color: white !important;
}

/* Individual Color Overrides (Only need to override the :not(.collapsed) state) */
.accordion-button.btn-success:not(.collapsed) {
    background: linear-gradient(135deg, rgba(33, 136, 56, 0.9), rgba(26, 160, 133, 0.8)) !important;
}

.accordion-button.btn-warning:not(.collapsed) {
    background: linear-gradient(135deg, rgba(224, 168, 0, 0.9), rgba(232, 89, 12, 0.8)) !important;
}

.accordion-button.btn-danger:not(.collapsed) {
    background: linear-gradient(135deg, rgba(200, 35, 51, 0.9), rgba(217, 26, 114, 0.8)) !important;
}

.accordion-button.btn-primary:not(.collapsed) {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.9), rgba(82, 13, 194, 0.8)) !important;
}

/* Individual Color Overrides (Default/Closed State) */
.accordion-button.btn-success {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.8), rgba(32, 201, 151, 0.7)) !important;
}

.accordion-button.btn-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.8), rgba(253, 126, 20, 0.7)) !important;
}

.accordion-button.btn-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.8), rgba(232, 62, 140, 0.7)) !important;
}

.accordion-button.btn-primary {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.8), rgba(102, 16, 242, 0.7)) !important;
}

/* Text Styling for Accordion Buttons (Consolidated) */
.accordion-button .text-center {
    width: 100%;
    display: block;
    color: white !important;
}

.accordion-button .text-center h5 {
    margin-bottom: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.accordion-button .text-center p {
    margin-bottom: 0;
    font-size: 0.875rem;
    color: white !important;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Force white text on all accordion elements */
.accordion-button,
.accordion-button *,
.accordion-button .text-center,
.accordion-button .text-center h5,
.accordion-button .text-center p {
    color: white !important;
}

.accordion-body {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    font-size: 0.9rem;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-top: none !important;
    /* FIX: Align text inside the open accordion body content to the right */
    text-align: right;
}

/* Works/Portfolio Section */
.works {
    background: linear-gradient(135deg, #221e2d 0%, #2c2c54 100%);
    padding: 5rem 0;
}

/* --- CRITICAL FIX 2: MOBILE FILTER BUTTON WRAPPING --- */
.works .btn-group {
    display: flex;
    flex-wrap: wrap;
    /* Allows buttons to wrap to the next line */
    justify-content: center;
    /* Centers buttons when wrapped */
    gap: 5px;
    /* Adds space between wrapped buttons */
    width: 100%;
}

/* --------------------------------------------------- */

.works-item {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: var(--transition);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.works-single-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
}

.works-single-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-heavy);
}

.works-single-item-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(230, 78, 78, 0.9), rgba(144, 127, 191, 0.8));
    transition: var(--transition);
    border-radius: var(--border-radius);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.works-single-item:hover .works-single-item-hover {
    opacity: 1 !important;
}

.works-icons-content {
    background: rgba(0, 0, 0, 0.8);
    padding: 1.5rem;
    color: var(--light-color);
    font-size: 1rem;
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
    text-align: center;
}

.custom-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 2px solid var(--light-color);
    border-radius: 50%;
    color: var(--light-color);
    margin: 0 0.5rem;
    transition: var(--transition);
    text-decoration: none;
}

.custom-icon:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--light-color);
    transform: scale(1.1);
}


/*=================================
||			Order Form Section (For form.html)
==================================*/
.form {
    /* MATCH the gradient background from the .works section */
    background: linear-gradient(135deg, #221e2d 0%, #2c2c54 100%);
    padding: 5rem 0; /* Match the vertical padding of the .works section */
    color: white; /* Default text color is white */
}

/* Center the entire form content within the section */
.form form {
    max-width: 650px; /* Slightly wider form container for long inputs */
    margin: 0 auto; /* Center the form horizontally */
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.4); /* Darker, semi-transparent box around the form fields */
    border-radius: var(--border-radius, 10px); /* Use your general border radius variable */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
}

/* Styling for the main heading inside the form */
.form h3 {
    text-align: center;
    color: var(--primary-color, #FFC107); /* Use your primary color for the title */
    margin-bottom: 25px;
    font-size: 2rem;
}

/* Style all labels and input groups */
.form-group {
    margin-bottom: 20px;
    /* This helps tidy up the vertical space from the <br> tags in your HTML */
    line-height: 1.2; 
}

/* Style all labels */
.form label {
    display: block; 
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--light-color, #F8F9FA); /* Off-white color */
}

/* Style all text inputs and textareas */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="password"],
.form textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 5px;
    border: 1px solid #495057; 
    background-color: #343A40; /* Dark input background */
    color: white; /* White text input */
    box-shadow: none;
    transition: border-color 0.2s;
}

/* Ensure focus state is clear and matches the gradient theme */
.form input:focus,
.form textarea:focus {
    border-color: var(--primary-color, #FFC107);
    outline: none;
    background-color: #495057; /* Slightly lighter on focus */
}

/* Placeholder styling */
.form input::placeholder,
.form textarea::placeholder {
    color: #ADB5BD; 
}

/* Style for required star */
.required {
    color: var(--primary-color, #FFC107);
    margin-left: 5px;
}

/* Custom file upload styling */
.file-upload {
    background-color:#E64E4E;
    padding: 15px;
    border-radius: 5px;
    border: 1px dashed #6C757D;
    text-align: center;
    cursor: pointer;
}

.file-upload input[type="file"] {
    opacity: 0; 
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-upload p {
    margin: 0;
    color: #ADB5BD;
}

/* Style the submit button */
.form button[type="submit"] {
    width: 100%;
    margin-top: 30px;
    /* Assuming your .colo class and rounded-pill handle the final look */
    /* Ensure the button uses a strong color from your theme */
    background-color: var(--primary-color, #E64E4E); /* Use a strong primary color */
    border: none;
    cursor: pointer;
    font-weight: bold;
}


/*=================================
|| ADVANCED GALLERY LIGHTBOX STYLES (CRITICAL FIXES APPLIED)
==================================*/

/* 1. Body Scroll Lock */
body.lightbox-open {
    overflow: hidden;
    padding-right: 17px;
    /* Prevents content shift when scrollbar is hidden */
}

/* 2. Modal Container (Main backdrop) */
.advanced-lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* CRITICAL FIX: Use Dynamic Viewport Height for mobile reliability */
    height: 100dvh;

    /* FIX: Set the transparent backdrop color */
    background-color: rgba(34, 30, 45, 0.95);

    z-index: 2000;

    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.advanced-lightbox-modal.active {
    opacity: 1;
    visibility: visible;
}

/* 3. Image Wrapper/Content Area */
.lightbox-container {
    position: relative;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    background-color: transparent;
    overflow: hidden;
}

/* 4. Image, Content & Loading */
.lightbox-image {
    /* Targets the image directly */
    display: block;
    max-width: 100%;
    max-height: 75vh;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-heavy);
}

.lightbox-loading {
    color: #fff;
    font-size: 1.2rem;
    padding: 20px;
}

/* 5. Controls (Prev/Next/Close) */

/* CLOSE BUTTON - CRITICAL: Must be explicitly displayed to override any defaults */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: var(--primary-color);
    color: var(--light-color);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition);
    opacity: 1;
    z-index: 2005;
}

/* PREV/NEXT ARROWS - CRITICAL: Must be explicitly displayed to override any defaults */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-color);
    font-size: 50px;
    cursor: pointer;
    background: rgba(34, 30, 45, 0.7);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2001;
    transition: var(--transition);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.lightbox-close:hover {
    transform: scale(1.05);
}

/* 6. Info/Caption */
.lightbox-info {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2003;
    width: auto;
    max-width: 90%;
    padding: 10px 20px;
    background: rgba(34, 30, 45, 0.7);
    color: var(--light-color);
    text-align: center;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.lightbox-title {
    font-size: 1rem;
    font-weight: 600;
}

.lightbox-counter {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Responsive adjustments for controls */
@media (max-width: 768px) {

    .lightbox-prev,
    .lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .lightbox-prev {
        left: 5px;
    }

    .lightbox-next {
        right: 5px;
    }

    .lightbox-close {
        top: 10px;
        right: 10px;
    }
}


/* Contact Section (Cleaned CSS for HTML Fix) */
.contact {
    /* Background is now set in HTML */
    background-image: url(../images/footer_bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    padding: 5rem 0;
    z-index: 1; 
}

/* 1. Ensure Headings are DARK (Visible on Light Background) */
#contact h2.section-title,
#contact p.section-paragraph,
#contact h2 {
    /* Forces text to dark color */
    color: var(--dark-color) !important; 
    position: relative; 
    z-index: 2; 
}

/* ... keep all other contact styles (contact-content, address, social-icons, etc.) as they were ... */

/* 2. Content Box Styling (The White Box that holds the form) */
.contact-content {
    /* Ensures the form box itself is a semi-transparent white */
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-large);
    margin: 2rem 0;
    padding: 3rem;
    position: relative;
    z-index: 2;
    box-shadow: var(--box-shadow);
}

/* Address and Link Styling */
.address {
    line-height: 1.8;
    font-size: 1.1rem;
}

.address a {
    color: var(--dark-color);
    text-decoration: none;
    transition: var(--transition);
}

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

/* Social Icons */
.social-icons {
    margin-top: 2rem;
}

.social-icons li {
    margin: 0 0.5rem;
}

.social-icons a,
.social-icons i {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: var(--transition);
    border-radius: 50%;
    margin: 0.25rem;
    background: var(--primary-color);
    color: white;
    border: 2px solid rgba(230, 78, 78, 0.5);
}

.social-icons a:hover,
.social-icons i:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(230, 78, 78, 0.3);
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.facebook a:hover i {
    background-color: #3b5998;
    border-color: #3b5998;
}

.twitter a:hover i {
    background-color: #e1306c;
    border-color: #e1306c;
}

/*=================================
|| 6. FOOTER, ANIMATIONS AND BACK-TO-TOP
==================================*/

/* Back to Top Button */
#back-to-top {
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 999;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
    opacity: 0.8;
}

/* Class added by JavaScript to show the button */
#back-to-top.show {
    display: flex !important;
}

/* Hover effect for the button */
#back-to-top:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Footer */
footer {
    padding: 2rem 0;
    background: rgba(34, 30, 45, 0.9);
    backdrop-filter: blur(10px);
}

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

footer a:hover {
    color: #c73650;
    text-decoration: underline;
}

/* Footer Animations */
.footer-contact-info {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.2s ease-out 0.2s forwards;
}

.footer-social-links {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.2s ease-out 0.4s forwards;
}

.footer-copyright {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.2s ease-out 0.6s forwards;
}

.social-link-hover {
    transition: all 0.3s ease;
}

.social-link-hover:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.footer-link-hover {
    transition: all 0.3s ease;
    position: relative;
}

.footer-link-hover:hover {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.footer-link-hover::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background-color: var(--primary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.footer-link-hover:hover::after {
    width: 100%;
}

/* Animations & Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes bounce {

    0%,
    20%,
    53%,
    80%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        transform: translate3d(0, -30px, 0);
    }

    70% {
        transform: translate3d(0, -15px, 0);
    }

    90% {
        transform: translate3d(0, -4px, 0);
    }
}

/* Animation Classes */
.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.fade-in-down {
    animation: fadeInDown 0.6s ease-out;
}

.fade-in-left {
    animation: fadeInLeft 0.6s ease-out;
}

.fade-in-right {
    animation: fadeInRight 0.6s ease-out;
}

.pulse-animation {
    animation: pulse 2s infinite;
}

.bounce-animation {
    animation: bounce 2s infinite;
}

/*=================================
|| 7. ACCESSIBILITY AND INTENDED USE
==================================*/

/* Accessibility (A11Y) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus indicators */
.btn:focus,
.form-control:focus,
a:focus,
button:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-outline-light {
        border-width: 3px;
    }

    .accordion-button {
        border: 2px solid var(--dark-color);
    }

    .works-single-item-hover {
        background: rgba(0, 0, 0, 0.8);
    }

    .heading {
        border-width: 3px;
    }

    .custom-icon {
        border-width: 3px;
    }

    .form-control {
        border-width: 3px;
    }
}

/* Dark mode support (Example that can be extended) */
@media (prefers-color-scheme: dark) {
    :root {
        --light-color: #1a1a1a;
        --dark-color: #ffffff;
    }

    .about {
        background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
        color: #f8f9fa;
    }

    .contact-content {
        background-color: rgba(33, 37, 41, 0.95);
        color: #f8f9fa;
    }
}

/* Print Styles */
@media print {

    .navigationbar,
    .navbar,
    .works-single-item-hover,
    #back-to-top,
    .btn,
    .filters-button {
        display: none !important;
    }

    .accordion-item {
        page-break-inside: avoid;
    }

    .section-title {
        color: black !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
    }

    .section-title {
        font-size: 18pt;
        margin-bottom: 12pt;
    }

    .heading {
        font-size: 16pt;
        border: 2pt solid #000;
    }
}

/* ================================================= */
/* 8. MEDIA QUERIES - RESPONSIVE LAYOUT FIXES */
/* ================================================= */

/* --- CORE GALLERY ITEM RESET --- */
#works_container .works-single-item {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 1. Mobile Portrait (Default) - 1 Column */
#works_container {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 1.5rem !important;
}

/* 2. Tablet Portrait / Mobile Landscape (768px and up) */
@media screen and (min-width: 768px) {

    /* Gallery: 2x1 */
    #works_container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    #works_container .works-single-item {
        width: 50% !important;
        max-width: 50% !important;
    }

    /* Accordion: 4x1 (Default Grid) */
    #priceAccordion {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1rem !important;
    }

    #priceAccordion .accordion-item {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 3. Desktop (992px and up) - 3 Columns Gallery */
@media screen and (min-width: 992px) {

    /* Gallery: 3x1 */
    #works_container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }

    #works_container .works-single-item {
        width: 33.3333% !important;
        max-width: 33.3333% !important;
    }
}

/*=================================
|| 9. FONT AWESOME AND END OF FILE
==================================*/

/* Basic Font Awesome Definitions (Retained from your code) */
.fa,
.fas,
.far,
.fal,
.fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

/* Ensure these icons are defined for display if the CDN is not used, but using the CDN is safer */
.fa-facebook:before {
    content: "\f09a";
}

.fa-twitter:before {
    content: "\f099";
}

.fa-instagram:before {
    content: "\f16d";
}

.fa-linkedin:before {
    content: "\f08c";
}

.fa-envelope:before {
    content: "\f0e0";
}

.fa-chevron-left:before {
    content: "\f053";
}

.fa-chevron-right:before {
    content: "\f054";
}

.fa-chevron-up:before {
    content: "\f077";
}

.fa-times:before {
    content: "\f00d";
}

/* Final Icon Alignment Fix */
#back-to-top .fa-chevron-up {
    margin-left: -11px !important;
    margin-top: 0 !important;
    position: relative !important;
    top: -1px !important;
}

/* FIX: Ensures the 4th accordion button text is NOT capitalized */
#priceAccordion .accordion-item:nth-child(4) h5 {
    text-transform: none !important;
}

/* ================================================= */
/* CRITICAL FIX 3: Ensures Hover Content is Clickable */
/* ================================================= */

/* Bring the entire hover box to the front */
.works-single-item-hover {
    z-index: 10;
    /* The opacity: 0; is already in your file, which handles the hover state */
}

/* Ensure the buttons and content are above the background overlay */
.works-icons-content {
    position: relative;
    z-index: 15;
}

/* Remove default link text decoration on buttons */
.works-icons-content a.lightbox-trigger {
    text-decoration: none;
    cursor: pointer;
}



/*=================================
||			Form Sent Confirmation Message (CLEANED)
==================================*/

/* Style the main content block (The 'box' around your text) */
.confirmation-message {
    max-width: 600px;
    margin: 0 auto; /* Centers the block horizontally */
    padding: 30px;
    text-align: center; /* Centers the headings and button */
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 10px;
	margin-top: 250px;
	margin-bottom: 150px;
}

/* Style the main status headline */
.confirmation-message h2 {
    color: white;
    font-size: 2rem;
    font-weight: 700;
}

/* Style the list container (ul) */
.confirmation-message ul {
    /* Resets for tight spacing between the list and the promise paragraph */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    
    /* Aesthetic styles */
    text-align: left; /* Aligns list text for better readability */
    list-style-type: none; 
    padding-left: 0;
    font-size: 1.1rem;
    line-height: 1.4; 
}

/* Style individual list items (li) to eliminate excessive space */
.confirmation-message ul li {
    margin: 0 !important; 
    padding: 2px 0; /* Keeps lines close together */
}


/* Style the promise paragraph (<p class="launch-promise">) */
.launch-promise {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--light-color, #F8F9FA); 
    
    /* CRITICAL: Ensures it sits right below the list */
    margin-top: 5px !important; 
    padding-top: 0 !important; 
    
    /* Adds space below the promise before the button starts */
    margin-bottom: 30px; 
}

/* Highlight the key takeaway (3 working days) */
.launch-promise .text-primary {
    color: var(--primary-color, #FFC107) !important;
}

/* Tweak the button placement if needed */
.confirmation-message .button-down {
    margin-top: 20px;
}


/*=================================================
|| PAYPAL & WORKS ICON CONTENT FIXES
=================================================*/

/* Default spacing for the content box */
.works-icons-content {
    display: flex;
    flex-direction: column; /* Stack all major groups vertically by default (good for mobile) */
    align-items: center;
    gap: 15px; /* Space between the button rows */
}

/* Ensure the top buttons stay in a row */
.action-buttons-top {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows buttons to wrap on tiny screens */
    gap: 10px; /* Space between Enlarge and Preview */
}

/* PayPal Group: Align price next to button */
.paypal-buy-group {
    display: flex;
    align-items: center; /* Vertically align price and PayPal button */
    gap: 10px; /* Space between price and button */
    padding: 5px 0;
    justify-content: center;
}

/* Price Tag Styling */
.price-tag {
    font-size: 1.5rem; /* Make the price large */
    font-weight: 700;
    color: var(--color-white); /* Ensure color matches theme */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Ensure the PayPal form itself remains inline with the price */
.paypal-form-inline {
    display: flex;
    align-items: center;
}

/* Custom styling for the PayPal button image (optional, to ensure it looks clean) */
.paypal-buy-group input[type="image"] {
    max-width: 80px; /* Keep the small PayPal image size controlled */
    height: auto;
    transition: transform 0.2s ease;
}

/* Mobile Fix: Ensure the overlay stays visible when manually activated */
.works-single-item.mobile-active .works-single-item-hover { 
    opacity: 1 !important; 
}


/* =======================================
   MOBILE READABILITY FIXES (Max Width 767px)
   ======================================= */

@media only screen and (max-width: 767px) {
    
    /* 1. FIX: Heading Section Text (White text on dark background) */
    /* Forces all text in the main header content area to white */
    .header-description .header-content h1,
    .header-description .header-content p,
    .header-description .header-content .heading-subtitle {
        color: white !important;
    }

    /* Hides the SEO h2 element to clean up the view */
    .header-description h2.carousel-item {
        display: none !important; 
    }

/* 2. FIX: Price on Images (Works Section) - FINAL ATTEMPT */
    /* This targets ANY text inside the item-description or h5 in the works section */
    .works .item-description *,
    .works .item-description h5,
    .works .item-description p {
        color: white !important;
    }
    
    /* 3. & 4. FIX: How it works & Commitment Sections */
    /* Targets the entire content block that incorrectly uses 'text-dark' on mobile */
    .col-lg-8 .container.text-dark,
    .col-lg-8 .container.text-dark h3,
    .col-lg-8 .container.text-dark p,
    .col-lg-8 .container.text-dark b,
    .col-lg-8 .container.text-dark strong,
    .col-lg-8 .container.text-dark li {
        /* Forces text to white, overriding the inherited text-dark */
        color: white !important;
    }
    
    /* Ensures list item icons (like fa-check-circle) are also forced white */
    .col-lg-8 .container.text-dark .fa {
        color: white !important;
    }
    
    /* Specific fix for the text inside the accordion body */
    .accordion-body {
        color: #333 !important; /* Keep accordion text dark as the body is white */
    }

/* =================================================================
   ULTIMATE MOBILE READABILITY FIXES (Max Width 767px)
   ================================================================= */

@media only screen and (max-width: 767px) {
    
    /* 1. INDEX.HTML: Price on Images Fix (The Most Aggressive Selector) */
    /* This targets all text elements inside the work item to force white */
    .works .item-description h5,
    .works .item-description p,
    .works .item-description a,
    .works .item-description * {
        color: #FFFFFF !important;
    }
    /* Targets the primary text container which might hold the price */
    .works .card-body {
        color: #FFFFFF !important;
    }
    
    /* ----------------------------------------------------------- */
    /* 3. FORM PAGE: Section #form text fix (Text is dark on dark background) */
    /* Forcing all text inside the form section to white */
    #form,
    #form h2,
    #form h3,
    #form p,
    #form a,
    #form * {
        color: #FFFFFF !important;
    }
    
    /* 4. CONTENT-SENT PAGE: Section #content-submitted fix (Text is white on white background, unreadable) */
    /* The problem here is the text needs to be DARK (#333) if the background is light. 
       If the text is white and unreadable, the background is unexpectedly white on mobile. */
    #content-submitted,
    #content-submitted h2,
    #content-submitted h3,
    #content-submitted p,
    #content-submitted a,
    #content-submitted * {
        /* Forcing text to a dark gray, assuming the background is unexpectedly light on mobile */
        color: #333333 !important; 
    }
    
    /* 5. CONFIRMATION PAGE: Section #confirmation text fix (Needs Dark Text) */
    /* Targetting the main confirmation section to force text to black on mobile's light background */
    #confirmation,
    #confirmation h2,
    #confirmation h3,
    #confirmation p,
    #confirmation div,
    #confirmation li {
        color: #333 !important; /* Dark text for readability on light background */
    }
	
	/* 6. MAIL-SENT PAGE: Section #inquiry-sent fix (Needs Dark Text) */
    /* Targetting the general inquiry confirmation page to force dark text on mobile's light background */
    #inquiry-sent,
    #inquiry-sent h2,
    #inquiry-sent h3,
    #inquiry-sent p {
        color: #333 !important; /* Dark text for readability on light background */
    }
    
    /* Ensure the icons in the inquiry-sent alert box also adapt */
    #inquiry-sent .alert .fa {
        color: #007bff !important; /* Keeping primary color for info icon */
    }
	
    /* Re-apply the global white text fix for all sections that *should* be dark on mobile */
    .header-description .header-content h1,
    .header-description .header-content p,
    .col-lg-8 .container.text-dark * {
        color: white !important;
    }


/* FINAL ATTEMPT: Fix for Price Text on Mobile */
/* Targets the price-tag span directly within the works section on mobile */
.works .card-body .price-tag,
.works .price-tag {
    color: #FFFFFF !important;
}

}

/* -------------------------------------------------------------------------- */
/* NEW FAQ Section (Final Cleaned Code - Closed Color Handled in HTML) */
/* -------------------------------------------------------------------------- */

/* General Section Styling */
.faq {
    /* Sets the background gradient for the whole section */
    background: linear-gradient(135deg, #221e2d 0%, #2c2c54 100%);
    padding: 5rem 0;
}

/* Accordion Item Styling (Container) */
.faq .accordion-item {
    box-shadow: var(--shadow-heavy);
    margin-bottom: 15px; 
    border-radius: var(--border-radius-large);
    border-color: transparent !important; /* Ensure no conflicting borders */
}

/* Button Styling (Handles text color, border, and general look) */
#faq .accordion-item .accordion-button {
    /* This ensures text is visible against the background you set in HTML */
    color: var(--light-color) !important; 
    
    /* Ensure the button is styled consistently */
    border: none !important; 
    box-shadow: none !important; 
    padding: 1.5rem; 
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: none;
    
    /* Crucial: Ensure the button background is ready to take the inline HTML style */
    background-image: none !important;
}

/* 1. OPEN STATE STYLING (Darker Red: #942727) */
#faq .accordion-item .accordion-button:not(.collapsed) {
    /* Darker background for the active state */
    background-color: #942727 !important; 
    color: var(--light-color) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-color: #942727 !important; 
    filter: none !important;
}

/* 2. Fix for Focus States (Prevents default focus box) */
#faq .accordion-item .accordion-button:focus {
    /* Uses a clean, solid color on focus */
    background-color: #bb3d3d !important; 
    box-shadow: none !important;
    outline: 0 !important;
}

/* 3. Fix for the Bootstrap Arrow Icon Color */
#faq .accordion-button::after {
    filter: invert(1) !important; /* Invert the icon to white for visibility */
    background-image: none !important; 
}

/* Answer Body Styling */
.faq .accordion-body {
    background-color: white !important; /* Ensure the answer panel is white */
    color: #333 !important;
    text-align: left; 
}

/* -------------------------------------------------------------------------- */
/* FIX: Mobile Navigation Visibility */
/* -------------------------------------------------------------------------- */

/* 1. Force the collapsed navigation background to dark (Overrides potential white default) */
@media (max-width: 991.98px) {
    .navigationbar .navbar-collapse {
        /* Ensures the background of the menu list is dark when collapsed */
        background-color: var(--dark-color) !important;
        /* Adds padding for visual space on mobile */
        padding: 10px 0;
    }
}

/* 2. Fix the Toggle Icon Color (The Hamburger Icon) */
.navbar-toggler-icon {
    /* Uses a standard Bootstrap filter trick to make the icon white */
    filter: invert(1) !important; 
}

/* 3. Ensure the Links themselves are white (Text links) */
.navigationbar .navbar-nav .nav-link {
    color: var(--light-color) !important;
}

/* 4. Fix for the Brand/Logo text color on mobile */
.navigationbar .navbar-brand {
    color: var(--light-color) !important;
}


/* -------------------------------------------------------------------------- */
/* FIX: Header Content Overflow on Mobile (Vertical Phones) */
/* -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* Target the main heading in the header section */
    .header .heading {
        /* Reduce the font size for small screens to prevent horizontal overflow */
        font-size: 2rem !important;
        /* Ensure the element itself is forced to fit the container */
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Also ensure the hidden h2 is not somehow contributing to width */
    .header .carousel-item {
        width: 100%;
    }
    
    /* Reduce padding on the container if necessary */
    .header .header-content {
        padding: 0 15px;
    }
}