/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Brand Variables */
:root {
    --navy: #1A2B48;
    --yellow: #FDEE00;
    --silver: #C0C0C2;
}

/* Global Styles */
body {
    font-family: 'Roboto', sans-serif;
    color: #333;
}

h1, h2, h3, .navbar-brand {
    font-family: 'Montserrat', sans-serif;
}

/* Custom Colors */
.bg-navy { background-color: var(--navy) !important; }
.text-navy { color: var(--navy) !important; }
.text-yellow { color: var(--yellow) !important; }
.bg-silver { background-color: var(--silver); }

/* Buttons */
.btn-yellow {
    background-color: var(--yellow);
    color: var(--navy);
    font-weight: 700;
    border: none;
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.btn-yellow:hover {
    background-color: #e6d900;
    color: var(--navy);
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
}

.hero-section {
    height: 85vh; /* Sets the height of the hero area */
    width: 100%;
}

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; /* This makes it act like a background-image */
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 43, 72, 0.7); /* Your Brand Navy at 70% opacity */
    z-index: 2;
}

.hero-section .container {
    z-index: 3; /* Keeps the text above the image and the overlay */
}

.text-yellow {
    color: #ffcc00 !important; 
}

/* Font Classes */
.Montserrat { font-family: 'Montserrat', sans-serif; }
.Roboto { font-family: 'Roboto', sans-serif; }


.tracking-wider {
    letter-spacing: 2px;
}

/* Services Footer Banner Styling */
.services-footer-banner {
    height: 450px; 
    width: 100%;
}

.banner-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 1;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(26, 43, 72, 0.9)), to(rgba(26, 43, 72, 0.4)));
    background: -o-linear-gradient(left, rgba(26, 43, 72, 0.9) 0%, rgba(26, 43, 72, 0.4) 100%);
    background: linear-gradient(90deg, rgba(26, 43, 72, 0.9) 0%, rgba(26, 43, 72, 0.4) 100%);
    z-index: 2;
}

.banner-overlay .container {
    z-index: 3;
}


/* Fleet Banner Styling */
.fleet-banner-img {
    height: 550px; 
    -o-object-fit: cover; 
       object-fit: cover; 
}

.bg-navy-overlay {
    background-color: rgba(26, 43, 72, 0.85); 
    border-left: 5px solid #FDEE00; 
    bottom: 10%; 
    left: 5% !important;
    right: auto !important;
    max-width: 500px;
}


/* Custom Booking Form Styling */
.form-control:focus {
    border-color: var(--yellow);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(253, 238, 0, 0.25);
            box-shadow: 0 0 0 0.25rem rgba(253, 238, 0, 0.25);
}

.btn-navy {
    background-color: #1a2b48;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn-navy:hover {
    background-color: #0d1a2f;
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
    color: var(--yellow) !important;
}

.form-check-input:checked {
    background-color: #1a2b48;
    border-color: #1a2b48;
}

/* success page */
.text-success {
    color: #28a745 !important;
}

.btn-navy {
    background-color: #1a2b48;
    border: none;
}

.btn-navy:hover {
    background-color: #0d1a2f;
    color: #FDEE00;
}

/* Priority Toggle Styling */
.border-danger {
    border-color: #dc3545 !important;
    border-width: 2px !important;
}

.form-check-input#priorityService:checked {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    -webkit-box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
            box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

/* pulse animation for the icon */
.fa-bolt {
    -webkit-animation: pulse-yellow 2s infinite;
            animation: pulse-yellow 2s infinite;
}

@-webkit-keyframes pulse-yellow {
    0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
    50% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0.8; color: #FDEE00; }
    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

@keyframes pulse-yellow {
    0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
    50% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0.8; color: #FDEE00; }
    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

/* Responsive adjustment for tablets/phones */
@media (max-width: 768px) {
    .fleet-banner-img {
        height: 350px;
    }
}

    /* Mobile responsive height */
@media (max-width: 768px) {
    .services-footer-banner {
        height: 350px;
    }
}