/* Custom CSS for GTC - General Trading Corporation */

/* ---------------------------------
   1. Brand Colors & Fonts
--------------------------------- */
:root {
    /* Define your brand colors for easy reference */
    --gtc-primary-color: #004A7F; /* A strong blue for corporate feel */
    --gtc-secondary-color: #FFC300; /* An accent yellow/gold for highlighting */
    --gtc-dark: #212529;
    --gtc-light: #f8f9fa;
}

/* Apply Google Font to body and main headings */
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

/* Use brand color for specific text elements */
.text-gtc-primary {
    color: var(--gtc-primary-color) !important;
}
.text-gtc-secondary {
    color: var(--gtc-secondary-color) !important;
}

/* Customizing Bootstrap buttons to use brand colors */
.btn-primary {
    background-color: var(--gtc-primary-color);
    border-color: var(--gtc-primary-color);
    /* Adding subtle rounding and transition for polish */
    border-radius: 0.5rem; 
    transition: background-color 0.3s ease;
}
.btn-primary:hover {
    background-color: #00375E; /* Slightly darker on hover */
    border-color: #00375E;
}
.btn-outline-light {
    border-radius: 0.5rem; 
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* ---------------------------------
   2. Navigation Bar
--------------------------------- */

.navbar {
    background-color: var(--gtc-primary-color) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.navbar-brand {
    color: var(--gtc-secondary-color) !important;
}

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

.navbar-nav .nav-link.active {
    border-bottom: 3px solid var(--gtc-secondary-color);
    padding-bottom: 5px;
    color: var(--gtc-secondary-color) !important; /* Keep active link visible */
}

/* ---------------------------------
   3. Hero Section
--------------------------------- */

.hero-section {
    /* Uses your uploaded image 'hero-background.webp' */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/hero-background.webp') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Optional: adds a nice parallax effect */
    height: 70vh; /* Set the height of the banner */
    padding: 100px 0; /* Vertical padding */
}

/* Make text in the hero section stand out */
.hero-section h1 {
    font-size: clamp(2.5rem, 5vw, 4rem); /* Responsive font size */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}


/* ---------------------------------
   4. Utility / Components
--------------------------------- */

/* Border accent for list items (used in Home and About pages) */
.list-group-item-action {
    border-left: 5px solid var(--gtc-primary-color);
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 0.3rem;
}

/* Product Card Images (used in products.html) */
.product-img {
    height: 250px; /* Uniform height for all images in the cards */
    object-fit: cover; /* Ensures images cover the area without distortion */
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

/* Footer Link Styling */
.footer a {
    color: rgba(255, 255, 255, 0.7); /* Lighter white for readability on dark background */
    transition: color 0.2s ease;
}

.footer a:hover {
    color: var(--gtc-secondary-color); /* Highlight on hover */
}