/*
|--------------------------------------------------------------------------
| 1. GOOGLE FONT IMPORT
|--------------------------------------------------------------------------
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*
|--------------------------------------------------------------------------
| 2. BRAND COLOR VARIABLES
|--------------------------------------------------------------------------
*/
:root {
    /* Client Primary Color (#555cfb) */
    --primary-blue: #555cfb;
    /* A slightly darker version for hover effects */
    --primary-blue-dark: #3b3fe4; 
    
    /* Secondary Accent Color (e.g., for safety/warnings) */
    --secondary-accent: #ffc107; 

    /* Typography Colors */
    --color-heading: #2c3e50;
    --color-body: #6c757d;
}

body {
    /* ... other styles ... */
    font-family: 'Cambria', Georgia, serif; 
    /* Cambria is used as the primary professional font, falling back to Georgia/serif if unavailable */
}

/* Ensure the main headings also use the serif font for consistency */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cambria', Georgia, serif;
    font-weight: bold; /* Keeping headings bold for impact */
}

/*
|--------------------------------------------------------------------------
| 4. BOOTSTRAP OVERRIDES (Primary Colors)
|--------------------------------------------------------------------------
*/

/* Replace all text-blue-primary usage in HTML with 'text-primary' */
.text-primary { 
    color: var(--primary-blue) !important; 
}
.bg-primary {
    background-color: var(--primary-blue) !important;
}
.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}
.btn-primary:hover {
    background-color: var(--primary-blue-dark);
    border-color: var(--primary-blue-dark);
}

/* Custom class used in Services/About pages */
.text-blue-primary {
    color: var(--primary-blue) !important;
}

/*
|--------------------------------------------------------------------------
| 5. NAVIGATION BAR CUSTOM STYLES (White BG Requirement)
|--------------------------------------------------------------------------
*/
.navbar.bg-dark {
    /* Overriding the dark background with white */
    background-color: #ffffff !important; 
    border-bottom: 3px solid var(--primary-blue); /* Subtle blue line at the bottom */
}

/* Change navigation link color for the white background */
.navbar-dark .navbar-nav .nav-link {
    color: var(--color-heading); /* Dark text for links */
}

/* Active link and hover state */
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.dropdown-toggle:hover {
    color: var(--primary-blue); /* Primary color for active/hover */
    font-weight: 600;
}

/* Custom logo text styling for white BG */
.navbar-brand span {
    color: var(--color-heading); 
}

/* Dropdown menu styling */
.dropdown-menu {
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.dropdown-item:active, .dropdown-item:hover {
    color: var(--primary-blue);
    background-color: #f0f0ff; /* Very light blue background */
}
.dropdown-item.active {
    color: var(--primary-blue) !important;
    background-color: #f0f0ff !important;
}


/* Ensure all project images in the gallery are the same size for a uniform look */
.project-img {
    height: 200px; /* Set a fixed height for all images */
    object-fit: cover; /* This makes sure the image covers the area without distortion */
}

/* Fix to ensure the three-line hamburger icon uses the RAB brand color */
.navbar-toggler-icon {
    /* The value 1A237E must be replaced with your exact RAB logo color's HEX code */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231A237E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}


/* Add this to your style.css or within <style> tags in the <head> */
.carousel-item {
    height: 100%; /* Ensures it fills the height of the carousel */
    min-height: 70vh; /* Ensures a minimum height */
    background-position: center;
    background-size: cover; /* Crucial for stretching the image */
}

/* Ensure the overlay covers the whole item */
.carousel-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* Keep overlay layer below text if you add captions */
}