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

    Theme Name: Brian Brigh Enterprises
    Description: Modern & Advanced Logistics Solutions Template
    Author: Gemini CLI
    Version: 1.0

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

/*
    Table of Content:

    1. General Styles
    2. Typography
    3. Buttons
    4. Header & Navigation
    5. Hero Section
    6. About Us Section
    7. Services Showcase Section
    8. Why Choose Us Section
    9. Call to Action Sections
    10. Footer
    11. Utility Classes
    12. Responsive Adjustments
    13. Sidenav Styles
    14. Page Title Section

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

/* 1. General Styles */
:root {
    --primary-color: #004d99; /* Deeper, more professional blue */
    --secondary-color: #606d7a; /* Softer, warmer grey */
    --accent-color: #ff9800; /* Vibrant orange for highlights */
    --success-color: #28a745;
    --info-color: #17a2b8;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-color: #f0f2f5; /* Lighter background grey */
    --dark-color: #212529; /* Very dark grey */

    --heading-font: 'Poppins', sans-serif;
    --body-font: 'Open Sans', sans-serif;

    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --box-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.09); /* Slightly more prominent */
    --box-shadow-md: 0 .5rem 1.5rem rgba(0,0,0,.18); /* More noticeable */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    color: var(--dark-color);
    background-color: var(--light-color); /* Apply light grey background */
    overflow-x: hidden;
}

/* Container adjustments */
.container {
    padding-left: 15px;
    padding-right: 15px;
}
@media (min-width: 1200px) {
    .container {
        max-width: 1200px; /* Slightly wider container */
    }
}

/* Section Padding */
section {
    padding: 100px 0; /* More generous padding */
}

/* 2. Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1.2;
}

h1 { font-size: 3.8rem; } /* Adjusted for impact */
h2 { font-size: 2.8rem; }
h3 { font-size: 2.2rem; }
h4 { font-size: 1.7rem; }
h5 { font-size: 1.35rem; }
h6 { font-size: 1.1rem; }

p {
    font-size: 1.05rem; /* Slightly larger body text */
    line-height: 1.8; /* Improved readability */
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.lead {
    font-size: 1.35rem;
    font-weight: 400;
}

.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-accent { color: var(--accent-color) !important; } /* New accent color utility */


/* 3. Buttons */
.btn {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em; /* Slightly more letter spacing */
    padding: 14px 30px; /* Larger buttons */
    border-radius: 50rem; /* Fully rounded */
    transition: all 0.3s ease;
    box-shadow: var(--box-shadow-sm); /* Default shadow */
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    /* To darken a color in CSS variables, you'd typically use a preprocessor or JS. */
    /* For pure CSS, you might define a specific hover color variable. */
    background-color: #003366; /* Darker shade of primary for hover */
    border-color: #003366;
    transform: translateY(-3px); /* More pronounced lift */
    box-shadow: var(--box-shadow-md); /* Stronger shadow on hover */
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-md);
}

.btn-light { /* For buttons on dark backgrounds */
    background-color: var(--light-color);
    border-color: var(--light-color);
    color: var(--primary-color);
}
.btn-light:hover {
    background-color: #e0e4e9; /* Darker light color */
    border-color: #e0e4e9;
    color: var(--primary-color);
}


/* 4. Header & Navigation */
header {
    background-color: white;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1030;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Finer, more spread shadow */
}

.top-bar {
    border-bottom: 1px solid var(--light-color);
    font-size: 0.8rem; /* Slightly smaller */
    color: var(--secondary-color);
}
.top-bar .contact-info span {
    margin-right: 20px; /* More spacing */
}
.top-bar .social-icons a {
    color: var(--secondary-color);
    transition: color 0.3s ease;
}
.top-bar .social-icons a:hover {
    color: var(--primary-color);
}

.navbar-brand img {
    max-height: 55px; /* Slightly larger logo */
}

.navbar-nav .nav-item {
    margin-left: 20px; /* More spacing between nav items */
}

.navbar-nav .nav-link {
    color: var(--dark-color);
    font-weight: 500;
    padding: 0.5rem 0; /* Adjust padding for hover effect */
    position: relative;
    transition: all 0.3s ease;
}
.navbar-nav .nav-link::after { /* Underline effect for nav links */
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 100%;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-color);
}

.dropdown-menu {
    border: none;
    box-shadow: var(--box-shadow-md); /* Stronger shadow */
    border-radius: var(--border-radius-md);
    padding: 0.5rem 0;
}
.dropdown-item {
    color: var(--dark-color);
    padding: 0.8rem 1.5rem; /* More padding */
    transition: background-color 0.2s ease, color 0.2s ease;
}
.dropdown-item:hover {
    background-color: var(--primary-color);
    color: white;
}

#searchModal .modal-content {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-md);
}
#searchModal .modal-header {
    border-bottom: none;
}
#searchModal .form-control {
    border-radius: var(--border-radius-md);
}


/* 5. Hero Section */
.hero-section {
    position: relative;
    color: white;
    padding: 180px 0; /* More padding */
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    min-height: 85vh; /* Taller hero section */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero-banner-bg {
    background: url('../images/banner.jpg') no-repeat center center/cover;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Darker overlay */
    z-index: 1;
}
.hero-section > .container {
    position: relative;
    z-index: 2;
}
.hero-section h1 {
    font-size: 5rem; /* Larger hero title */
    font-weight: 800;
    margin-bottom: 1.5rem; /* More spacing */
    color: white;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.6); /* More pronounced shadow */
}
.hero-section .lead {
    font-size: 1.7rem; /* Larger lead text */
    font-weight: 300;
    margin-bottom: 3rem; /* More spacing */
    color: rgba(255, 255, 255, 0.95); /* Brighter lead text */
}
.hero-section .btn {
    font-size: 1.2rem; /* Larger button */
    padding: 18px 45px;
}


/* 6. About Us Section (General styling for about.php main content) */
.about-us-section { /* This general class is less used now that about.php is split */
    background-color: white;
}
.about-us-section img {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-md);
    max-width: 100%;
    height: auto;
}
.about-us-section h2 {
    color: var(--dark-color);
}
.about-us-section p {
    color: var(--secondary-color);
}


/* 7. Services Showcase Section */
.services-showcase {
    background-color: var(--light-color);
}
.services-showcase .card {
    border: none;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--box-shadow-sm);
    transition: all 0.3s ease;
}
.services-showcase .card:hover {
    transform: translateY(-12px); /* More pronounced lift */
    box-shadow: var(--box-shadow-md); /* Stronger shadow */
}
.services-showcase .card-body {
    padding: 2.5rem; /* More padding */
}
.services-showcase .card i {
    color: var(--accent-color); /* Use accent color for icons */
    font-size: 3.8rem; /* Slightly larger icons */
    margin-bottom: 1.2rem;
}
.services-showcase .card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
}
.services-showcase .card-text {
    font-size: 1rem;
    color: var(--secondary-color);
}


/* 8. Why Choose Us Section */
.why-choose-us-section {
    background-color: white;
}
.why-choose-us-section i {
    color: var(--accent-color); /* Use accent color for icons */
    font-size: 4.5rem; /* Larger icons */
    margin-bottom: 1.5rem;
}
.why-choose-us-section h5 {
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 0.85rem;
}
.why-choose-us-section p {
    color: var(--secondary-color);
    font-size: 1rem;
}


/* 9. Call to Action Sections */
.cta-section-bottom {
    background-color: var(--primary-color);
    padding: 100px 0; /* More padding */
    color: white;
    text-align: center;
}
.cta-section-bottom h2 {
    font-size: 3.2rem; /* Larger heading */
    font-weight: 700;
    color: white;
}
.cta-section-bottom .lead {
    font-size: 1.4rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.95);
}
.cta-section-bottom .btn-light {
    color: var(--primary-color);
    background-color: white;
}
.cta-section-bottom .btn-light:hover {
    background-color: #e0e4e9; /* Darker light color */
    border-color: #e0e4e9;
    color: var(--primary-color);
}


/* 10. Footer */
footer {
    background-color: var(--dark-color);
    color: white;
    padding-top: 80px; /* More padding */
    padding-bottom: 40px;
}
footer h5 {
    color: var(--accent-color); /* Use accent color for footer headings */
    font-weight: 700;
    margin-bottom: 2.2rem;
}
footer p {
    font-size: 0.95rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.8); /* Brighter text */
}
footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}
footer a:hover {
    color: var(--accent-color); /* Use accent color on hover */
}
footer .social-icons a {
    color: white;
    font-size: 1.6rem; /* Slightly larger social icons */
    margin-right: 15px;
}
footer .social-icons a:hover {
    color: var(--accent-color);
}
footer .fa-home,
footer .fa-phone,
footer .fa-envelope,
footer .fa-clock {
    color: var(--accent-color); /* Use accent color for contact icons */
    margin-right: 12px;
}
footer hr {
    border-color: rgba(255, 255, 255, 0.15); /* Slightly brighter HR */
    margin-top: 3rem;
    margin-bottom: 3rem;
}
footer .copy p {
    margin-bottom: 0;
    font-size: 0.9rem;
}
footer #to-top {
    font-size: 1.3rem;
    padding: 10px 14px;
    border-radius: var(--border-radius-md);
}

/* 11. Utility Classes */
.shadow-sm { box-shadow: var(--box-shadow-sm) !important; }
.shadow-md { box-shadow: var(--box-shadow-md) !important; }

/* 12. Responsive Adjustments */
@media (max-width: 991.98px) {
    .navbar-nav .nav-item {
        margin-left: 0;
        text-align: center;
    }
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
    }
    .navbar-collapse {
        background-color: white;
        padding-bottom: 1rem;
    }
    .hero-section h1 {
        font-size: 3.5rem;
    }
    .hero-section .lead {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 2.2rem;
    }
    section {
        padding: 80px 0;
    }
    .top-bar {
        text-align: center;
        flex-direction: column;
    }
    .top-bar .contact-info span {
        margin: 5px 0;
        display: block;
    }
    .top-bar .social-icons {
        margin-top: 10px;
    }
    footer .col-md-3, footer .col-md-2, footer .col-md-4 {
        margin-bottom: 30px;
    }
    footer .text-md-left, footer .text-md-right {
        text-align: center !important;
    }
}

@media (max-width: 767.98px) {
    h1 {
        font-size: 2.8rem;
    }
    h2 {
        font-size: 2rem;
    }
    .hero-section h1 {
        font-size: 3.2rem;
    }
    .hero-section .lead {
        font-size: 1.1rem;
    }
    .btn-lg {
        padding: 12px 25px;
        font-size: 1rem;
    }
}

/* Sidenav Styles */
.sidenav {
    padding: 25px; /* More padding */
    background-color: white;
    border-radius: var(--border-radius-lg); /* More rounded corners */
    box-shadow: var(--box-shadow-sm);
    margin-bottom: 30px;
}
.sidenav h4 {
    color: var(--primary-color);
    margin-bottom: 20px; /* More spacing */
    font-size: 1.3rem; /* Slightly larger */
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid var(--light-color); /* Subtle separator */
    padding-bottom: 10px;
}
.sidenav a {
    display: block;
    padding: 12px 15px; /* More padding */
    color: var(--dark-color);
    text-decoration: none;
    border-radius: var(--border-radius-md); /* Slightly rounded */
    transition: all 0.2s ease;
    margin-bottom: 5px; /* Space between links */
}
.sidenav a:hover, .sidenav a.active {
    background-color: var(--primary-color);
    color: white;
    transform: translateX(5px); /* Slide effect on hover */
}

/* Page Title Section */
.page-title-section {
    background: linear-gradient(45deg, var(--primary-color) 0%, #007bff 100%); /* Consistent gradient with primary color */
    color: white;
    padding: 100px 0; /* More padding */
    text-align: center;
    margin-bottom: 50px; /* More margin below */
    position: relative;
    overflow: hidden;
}
.page-title-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.15); /* Slightly more visible overlay */
    transform: rotate(30deg);
    z-index: 0;
}
.page-title-section h1 {
    color: white;
    font-size: 4rem; /* Larger title */
    font-weight: 800;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4); /* Subtle text shadow */
}
.page-title-section p {
    color: rgba(255, 255, 255, 0.9); /* Brighter paragraph */
    font-size: 1.3rem; /* Larger paragraph */
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}