/* Import the base layout and responsive styles first */
@import url("style.css");

/* =================== "CORPORATE VIBRANT V2" THEME =================== */

:root {
    /* --- Your Brand Colors --- */
    --primary-color: #f2302e;        /* Vibrant Red for actions */
    --secondary-color: #016588;      /* Professional Blue for structure & headings */
    --text-color: #626869;           /* Cool Grey for body text */

    /* --- Derived & Complementary Colors --- */
    --primary-darker: #c92422;       /* Darker red for 3D button shadow */
    --primary-glow: rgba(242, 48, 46, 0.5); /* Red for focus glow */
    --theme-bg-white: #ffffff;       /* Main background */
    
    /* --- THE KEY CHANGE IS HERE --- */
    --theme-bg-light: #e9ecef;       /* NEW: A slightly darker, elegant grey for alt sections */
    
    /* --- Overriding Old Variables --- */
    /* This ensures any rules from style.css use our new colors */
    --primary-hover: var(--primary-darker);
    --light-grey: var(--theme-bg-light);
    --white: var(--theme-bg-white);
}


/* --- 1. Global & Typography --- */
body {
    background-color: var(--theme-bg-white);
    color: var(--text-color);
    font-weight: 400; /* A bit lighter than the default for cleaner look */
}

/* Headings will use the professional blue */
h1, h2, h3, h4 {
    color: var(--secondary-color);
}


/* --- 2. Header, Footer, and Navigation --- */
/* Use the professional blue to create strong "bookends" for the page */
.main-nav, .main-footer {
    background-color: var(--secondary-color);
}
.main-header {
    background-color: var(--theme-bg-white);
}
.header-contact a, .main-footer h4 {
    color: var(--secondary-color); /* Headings in footer blue */
}
/* In the blue footer, links should be white for contrast */
.main-footer a {
    color: #fff;
}
.main-footer a:hover {
    color: var(--primary-color); /* Red hover for links in footer */
}
/* --- Styles for New Header Accreditation Logos --- */

.main-header .container {
    /* This allows the new logo section to fit in the middle */
    justify-content: space-between;
}

.header-accreditations {
    display: flex;
    align-items: center;
    gap: 15px; /* Adjust spacing between logos */
}

.accred-logo {
    max-height: 55px; /* Adjust the size of the logos */
    width: auto;
}

/* --- Responsive adjustments for smaller screens --- */
@media (max-width: 992px) {
    .header-accreditations {
        /* Hide the logos on tablets and below to prevent crowding */
        display: none;
    }
}
/* --- 3. Buttons & Calls-to-Action --- */
/* All action items use the vibrant red */
.cta-button, form button {
    background-color: var(--primary-color);
    color: #ffffff; /* White text on the red button */
    box-shadow: 0 5px 0 var(--primary-darker);
}

.cta-button:active, form button:active {
    box-shadow: 0 1px 0 var(--primary-darker);
}

.cta-button:hover, form button:hover {
    box-shadow: 0 3px 0 var(--primary-darker);
}


/* --- 4. Forms & Input Fields --- */
/* Custom focus glow using the vibrant red */
form input:focus, form textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow);
    border-color: var(--primary-color); /* Add a border color on focus too */
}
form input, form textarea {
    border: 1px solid #ccc; /* Ensure default border is visible */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


/* --- 5. Custom Theming for Page Elements --- */
/* Hero Section */
.hero-slider .bullet-list .fa-check-circle {
    color: var(--primary-color); /* Red checkmarks */
}

/* Gallery Section */
.card-overlay {
    background: rgba(1, 101, 136, 0.8); /* Semi-transparent blue overlay */
}

/* Review Cards */
.review-card {
    border-left: 5px solid var(--primary-color); /* Red accent border */
}

/* FAQ Section */
.faq-question::after {
    color: var(--primary-color); /* Red '+' icon */
}
.faq-question:hover {
    background-color: #f1f3f5;
}

/* Other Services Section */
.service-lists li {
    /* Replace the yellow SVG icon with a red one */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23f2302e"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>');
}