/* =====================================================
   GRAYSON TOWNCAR - BASE STYLES
   Premium Transportation Color Palette & Utilities
   ===================================================== */

/* CSS Variables for Premium Colors */
:root {
    --gtc-gold: #C9A227;
    --gtc-gold-light: #D4AF37;
    --gtc-champagne: #E8D5B7;
    --gtc-dark: #0d1117;
    --gtc-dark-navy: #0A1428;
    --gtc-cream: #F8F6F0;
}

/* Add the feature class styling here */
.feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    font-size: 1.5rem;
}

/* Add a subtle transition for the icons */
.feature i {
    transition: transform 0.2s ease;
}

/* Add a hover effect to make the icons more interactive */
.feature:hover i {
    transform: scale(1.2);
}

/* If you want the hover effect for the cards */
.hover-elevate {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-elevate:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Dark backgrounds - Updated for premium look */
.bg-hero-dark, .bg-navbar-dark, .bg-footer-dark {
    background-color: var(--gtc-dark) !important;
}

.bg-button-dark {
    background-color: var(--gtc-dark-navy) !important;
}

/* Gold & Champagne Colors */
.bg-custom-light-gold {
    background-color: var(--gtc-cream) !important;
}

.custom-button-bg {
    background: linear-gradient(135deg, var(--gtc-gold) 0%, var(--gtc-gold-light) 100%) !important;
    color: var(--gtc-dark) !important;
}

.custom-button-bg:hover {
    background: linear-gradient(135deg, var(--gtc-gold-light) 0%, var(--gtc-gold) 100%) !important;
}

.custom-bg-gold1 {
    background-color: var(--gtc-cream) !important;
}

.text-gold {
    color: var(--gtc-gold) !important;
}

/* Gradient backgrounds */
.about-gradient {
    background: linear-gradient(to top, #486581, #D6E6F2) !important;
}

.about-gradient3 {
    background: linear-gradient(to left, #9b9b9bcd, #ffffffd6) !important;
}

.home-gradient, .fleet-gradient, .about-gradient2 {
    background: linear-gradient(to bottom, var(--gtc-cream), #D6E6F2) !important;
}

/* Premium Gold Button */
.btn-gold {
    background: linear-gradient(135deg, var(--gtc-gold) 0%, var(--gtc-gold-light) 100%);
    color: var(--gtc-dark);
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background: linear-gradient(135deg, var(--gtc-gold-light) 0%, var(--gtc-gold) 100%);
    color: var(--gtc-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(201, 162, 39, 0.3);
}