/* ==================================================
        RUHANMAS RENT A CAR
        PREMIUM NAVY BLUE THEME
================================================== */

:root {

    --blue-dark: #001233;
    --blue-main: #0055ff;
    --blue-electric: #00c6ff;
    --blue-light: #8ecbff;
    --yellow: #ffd43b;
    --white: #ffffff;

}


/* ==================================================
        GLOBAL
================================================== */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;

}


html {

    scroll-behavior: smooth;

}


body {

    background: #f4f8ff;
    color: #222;
    overflow-x: hidden;

}


/* ==================================================
        NAVBAR
================================================== */

header {

    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 20px 8%;

    background:
        linear-gradient(
            90deg,
            var(--blue-dark),
            var(--blue-main)
        );

    box-shadow:
        0 8px 25px rgba(0, 102, 255, .35);

    position: sticky;

    top: 0;

    z-index: 9999;

}


/* ==================================================
        LOGO
================================================== */

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

}


.logo img {

    width: 85px;

    height: 85px;

    object-fit: cover;

    border-radius: 50%;

    border: 3px solid white;

    box-shadow:
        0 0 15px rgba(255, 255, 255, .5);

    transition: .4s;

}


.logo img:hover {

    transform:
        rotate(10deg)
        scale(1.12);

    box-shadow:
        0 0 25px var(--yellow),
        0 0 45px rgba(0, 198, 255, .7);

}


.brand-name {

    font-size: 28px;

    font-weight: 800;

    color: white;

}


.brand-name small {

    display: block;

    margin-top: 5px;

    font-size: 12px;

    letter-spacing: 4px;

    color: #d9ecff;

}


/* ==================================================
        NAVIGATION
================================================== */

nav {

    display: flex;

    align-items: center;

    gap: 35px;

}


nav a {

    position: relative;

    text-decoration: none;

    color: white;

    font-weight: 600;

    font-size: 16px;

}


nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0%;

    height: 3px;

    background: var(--yellow);

    border-radius: 10px;

    transition: .3s;

}


nav a:hover::after,
nav a.active::after {

    width: 100%;

}


nav a:hover,
nav a.active {

    color: var(--yellow);

}


/* ==================================================
        MOBILE MENU BUTTON
================================================== */

.menu-toggle {

    display: none;

    background: transparent;

    border: none;

    color: white;

    font-size: 30px;

    cursor: pointer;

}


/* ==================================================
        FLEET HERO
================================================== */

.fleet-hero {

    position: relative;

    min-height: 380px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 60px 8%;

    overflow: hidden;

    color: white;

}


.fleet-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 18, 51, .94),
            rgba(0, 85, 255, .65)
        ),
        url('../images/vellfire.jpg');

    background-size: cover;

    background-position: center;

    z-index: -1;

}


.fleet-hero-content {

    max-width: 850px;

}


.fleet-label {

    display: inline-block;

    padding: 8px 20px;

    border-radius: 50px;

    background: rgba(255, 255, 255, .12);

    border: 1px solid rgba(255, 255, 255, .3);

    color: var(--yellow);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 20px;

}


.fleet-hero h1 {

    font-size: 55px;

    font-weight: 800;

    line-height: 1.15;

}


.fleet-hero h1 span {

    color: var(--yellow);

}


.fleet-hero p {

    margin-top: 20px;

    font-size: 18px;

    color: rgba(255, 255, 255, .9);

}


/* ==================================================
        FLEET SECTION
================================================== */

.fleet-section {

    padding: 80px 6%;

}


.fleet-container {

    max-width: 1250px;

    margin: auto;

}


.page-title {

    text-align: center;

    margin-bottom: 40px;

}


.page-title h2 {

    color: var(--blue-dark);

    font-size: 38px;

    font-weight: 800;

}


.page-title p {

    margin-top: 10px;

    color: #666;

    font-size: 16px;

}


/* ==================================================
        SEARCH & FILTER
================================================== */

.fleet-tools {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 45px;

}


.search-box {

    position: relative;

    width: 400px;

}


.search-box i {

    position: absolute;

    left: 18px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--blue-main);

}


.search-box input {

    width: 100%;

    padding: 15px 20px 15px 48px;

    border: 2px solid #e1e8f5;

    border-radius: 50px;

    outline: none;

    background: white;

    font-size: 14px;

    transition: .3s;

}


.search-box input:focus {

    border-color: var(--blue-main);

    box-shadow:
        0 0 20px rgba(0, 85, 255, .15);

}


/* ==================================================
        FILTER BUTTONS
================================================== */

.filter-buttons {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}


.filter-btn {

    border: none;

    padding: 12px 22px;

    border-radius: 50px;

    background: white;

    color: var(--blue-dark);

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 5px 20px rgba(0, 18, 51, .08);

    transition: .3s;

}


.filter-btn i {

    margin-right: 5px;

}


.filter-btn:hover {

    background: var(--blue-main);

    color: white;

    transform: translateY(-3px);

}


.filter-btn.active {

    background: var(--blue-main);

    color: white;

    box-shadow:
        0 8px 25px rgba(0, 85, 255, .3);

}


/* ==================================================
        FLEET GRID
================================================== */

.fleet-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;

}


/* ==================================================
        FLEET CARD
================================================== */

.fleet-card {

    display: flex;

    flex-direction: column;

    height: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(0, 18, 51, .98),
            rgba(0, 55, 120, .95),
            rgba(0, 102, 255, .85)
        );

    border-radius: 30px;

    border: 1px solid rgba(255, 255, 255, .15);

    box-shadow:
        0 20px 50px rgba(0, 18, 51, .18),
        0 0 25px rgba(0, 102, 255, .12);

    transition: .4s;

    animation: cardAppear .6s ease;

}


.fleet-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 30px 65px rgba(0, 18, 51, .3),
        0 0 40px rgba(0, 198, 255, .35);

}


/* ==================================================
        VEHICLE IMAGE
================================================== */

.vehicle-image {

    position: relative;

    height: 200px;

    padding: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .08),
            rgba(0, 198, 255, .08)
        );

    overflow: hidden;

}


.vehicle-image::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:
        rgba(0, 198, 255, .12);

    filter: blur(30px);

}


.vehicle-image img {

    position: relative;

    z-index: 2;

    max-width: 90%;

    max-height: 90%;

    width: auto;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 20px 20px rgba(0, 0, 0, .5)
        );

    transition: .4s;

}


.fleet-card:hover .vehicle-image img {

    transform:
        scale(1.06)
        translateY(-5px);

}


/* ==================================================
        VEHICLE TYPE
================================================== */

.vehicle-type {

    position: absolute;

    z-index: 3;

    top: 15px;

    right: 15px;

    padding: 6px 13px;

    border-radius: 50px;

    background: var(--yellow);

    color: var(--blue-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


.vehicle-type.scooter {

    background: var(--blue-electric);

    color: var(--blue-dark);

}


/* ==================================================
        VEHICLE CONTENT
================================================== */

.vehicle-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 25px;

}


.vehicle-content h3 {

    color: white;

    font-size: 22px;

    font-weight: 800;

    margin-bottom: 18px;

}


/* ==================================================
        VEHICLE DETAILS
================================================== */

.vehicle-details {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

    margin-bottom: 25px;

}


.vehicle-details span {

    color: rgba(255, 255, 255, .9);

    font-size: 13px;

}


.vehicle-details i {

    color: var(--yellow);

    margin-right: 5px;

}


/* ==================================================
        PRICE
================================================== */

.vehicle-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: auto;

}


.vehicle-price {

    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

}


.vehicle-price small {

    width: 100%;

    color: rgba(255, 255, 255, .65);

    font-size: 10px;

    margin-bottom: 2px;

}


.vehicle-price strong {

    color: var(--yellow);

    font-size: 23px;

    font-weight: 800;

}


.vehicle-price span {

    color: rgba(255, 255, 255, .8);

    font-size: 12px;

    margin-left: 4px;

}


/* ==================================================
        BOOK BUTTON
================================================== */

.book-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 11px 17px;

    background: white;

    color: var(--blue-main);

    border-radius: 50px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    transition: .4s;

    white-space: nowrap;

}


.book-btn:hover {

    background: var(--yellow);

    color: var(--blue-dark);

    transform:
        translateY(-4px)
        scale(1.04);

    box-shadow:
        0 10px 25px rgba(255, 212, 59, .35);

}


/* ==================================================
        NO RESULT
================================================== */

.no-result {

    display: none;

    text-align: center;

    padding: 60px 20px;

}


.no-result i {

    font-size: 50px;

    color: var(--blue-main);

    margin-bottom: 20px;

}


.no-result h3 {

    color: var(--blue-dark);

    font-size: 24px;

    font-weight: 800;

}


.no-result p {

    color: #666;

    margin-top: 8px;

}


/* ==================================================
        FOOTER
================================================== */

footer {

    background: #001233;

    color: white;

    text-align: center;

    padding: 40px 20px;

}


footer h3 {

    color: var(--blue-light);

    font-size: 25px;

    font-weight: 800;

}


footer p {

    color: rgba(255, 255, 255, .8);

    margin-top: 10px;

}


/* ==================================================
        FLOATING CONTACT / CHAT BUTTON
================================================== */

.contact-widget {

    position: fixed;

    bottom: 30px;

    right: 30px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 14px;

    z-index: 999999;

}


/* ==================================================
        CONTACT OPTIONS
================================================== */

.contact-options {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 12px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px)
        scale(.95);

    pointer-events: none;

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;

}


.contact-widget.show .contact-options {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;

}


/* ==================================================
        CONTACT OPTION
================================================== */

.contact-option {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    padding: 11px 20px;

    min-width: 135px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    background: white;

    color: var(--blue-dark);

    box-shadow:
        0 8px 20px rgba(0, 18, 51, .25);

    white-space: nowrap;

    transition: .3s;

}


.contact-option:hover {

    transform: translateX(-6px);

    background: var(--yellow);

    color: var(--blue-dark);

    box-shadow:
        0 10px 25px rgba(255, 212, 59, .4);

}


/* ==================================================
        WHATSAPP
================================================== */

.whatsapp-option i {

    color: #25D366;

    font-size: 18px;

}


/* ==================================================
        CALL
================================================== */

.call-option i {

    color: var(--blue-main);

    font-size: 18px;

}


.contact-option:hover i {

    color: var(--blue-dark);

}


/* ==================================================
        MAIN ROUND BUTTON
================================================== */

.contact-main {

    width: 62px;

    height: 62px;

    min-width: 62px;

    min-height: 62px;

    border-radius: 50%;

    border: none;

    outline: none;

    cursor: pointer;

    color: white;

    font-size: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            var(--blue-main),
            var(--blue-electric)
        );

    box-shadow:
        0 10px 25px rgba(0, 102, 255, .45),
        0 0 20px rgba(0, 198, 255, .4);

    transition: .35s;

}


.contact-main:hover {

    transform:
        scale(1.1)
        rotate(8deg);

    box-shadow:
        0 15px 35px rgba(0, 102, 255, .6),
        0 0 30px var(--yellow);

}


/* ==================================================
        CHAT BUTTON OPEN
================================================== */

.contact-widget.show .contact-main {

    background:
        linear-gradient(
            135deg,
            var(--blue-dark),
            var(--blue-main)
        );

}


/* ==================================================
        ANIMATION
================================================== */

@keyframes cardAppear {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==================================================
        TABLET
================================================== */

@media (max-width: 1200px) {

    .fleet-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* ==================================================
        MOBILE / TABLET
================================================== */

@media (max-width: 900px) {

    header {

        padding: 15px 6%;

        flex-wrap: wrap;

    }


    .logo img {

        width: 65px;

        height: 65px;

    }


    .brand-name {

        font-size: 22px;

    }


    .menu-toggle {

        display: block;

        margin-left: auto;

    }


    nav {

        display: none;

        width: 100%;

        flex-direction: column;

        align-items: center;

        gap: 22px;

        padding: 25px 0;

        margin-top: 15px;

        background:
            rgba(0, 18, 51, .98);

        border-radius:
            0 0 25px 25px;

    }


    nav.show {

        display: flex;

        animation:
            menuDown .3s ease;

    }


    nav a {

        font-size: 18px;

    }


    .fleet-hero {

        min-height: 330px;

    }


    .fleet-hero h1 {

        font-size: 50px;

    }


    .fleet-hero p {

        font-size: 15px;

    }


    .fleet-tools {

        flex-direction: column;

        align-items: stretch;

    }


    .search-box {

        width: 100%;

    }


    .filter-buttons {

        justify-content: center;

    }


    .fleet-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;

    }


    .vehicle-content {

        padding: 20px;

    }


    .vehicle-content h3 {

        font-size: 19px;

    }


    .vehicle-bottom {

        flex-direction: column;

        align-items: stretch;

    }


    .book-btn {

        justify-content: center;

    }


    .contact-widget {

        bottom: 20px;

        right: 20px;

    }


    .contact-main {

        width: 56px;

        height: 56px;

        min-width: 56px;

        min-height: 56px;

        font-size: 22px;

    }


    .contact-option {

        padding: 9px 16px;

        font-size: 13px;

        min-width: 125px;

    }

}


/* ==================================================
        MOBILE
================================================== */

@media (max-width: 600px) {

    .fleet-section {

        padding: 60px 5%;

    }


    .page-title h2 {

        font-size: 30px;

    }


    .page-title p {

        font-size: 14px;

    }


    .fleet-grid {

        grid-template-columns: 1fr;

    }


    .fleet-hero {

        min-height: 300px;

    }


    .fleet-hero h1 {

        font-size: 35px;

    }


    .vehicle-image {

        height: 230px;

    }


    .vehicle-content h3 {

        font-size: 21px;

    }


    .vehicle-bottom {

        flex-direction: row;

        align-items: center;

    }


    .book-btn {

        padding: 10px 15px;

        font-size: 11px;

    }


    .contact-widget {

        bottom: 18px;

        right: 18px;

    }

}


/* ==================================================
        MENU ANIMATION
================================================== */

@keyframes menuDown {

    from {

        opacity: 0;

        transform: translateY(-15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==================================================
        ACCESSIBILITY
================================================== */

@media (prefers-reduced-motion: reduce) {

    .fleet-card,
    .vehicle-image img,
    .book-btn,
    .logo img,
    .contact-option,
    .contact-main {

        animation: none !important;

        transition: none !important;

    }

}



/* ===========================
        FOOTER ADMIN LINK
=========================== */


footer .footer-admin{

    margin-top:22px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.15);

}


footer .footer-admin a{

    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--blue-light);
    text-decoration:none;
    font-weight:600;
    font-size:13.5px;
    letter-spacing:.3px;
    transition:.3s;

}


footer .footer-admin a:hover{

    color:var(--yellow);

}



/* ==================================================
        VEHICLE AVAILABILITY STATUS
        (driven by Database/availability.php)
================================================== */

.vehicle-status {

    position: absolute;

    z-index: 3;

    top: 15px;

    left: 15px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 13px;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .5px;

    backdrop-filter: blur(4px);

}


.vehicle-status i {

    font-size: 12px;

}


.vehicle-status.is-available {

    background: rgba(20, 168, 96, .95);

    color: #ffffff;

    box-shadow: 0 6px 16px rgba(20, 168, 96, .35);

}


.vehicle-status.is-unavailable {

    background: rgba(214, 48, 64, .95);

    color: #ffffff;

    box-shadow: 0 6px 16px rgba(214, 48, 64, .35);

}


/* ==================================================
        UNAVAILABLE CARD STATE
================================================== */

.fleet-card[data-available="0"] .vehicle-image img {

    filter: grayscale(100%);

    opacity: .55;

}


.fleet-card[data-available="0"] {

    opacity: .9;

}


/* DISABLED BOOK BUTTON */

.book-btn.is-disabled,
.book-btn.is-disabled:hover {

    background: rgba(255, 255, 255, .22);

    color: rgba(255, 255, 255, .7);

    border: 1px dashed rgba(255, 255, 255, .45);

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}

/* =========================================================
   UNIFIED NAVBAR + HAMBURGER
   Identical on Home, Fleet, Booking, About Us and Terms & Conditions.
   Keep this block LAST in the stylesheet so it wins over older rules.
========================================================= */

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 8%;
    position:sticky;
    top:0;
    z-index:9999;
}

.brand-name{
    font-size:28px;
    font-weight:800;
    color:white;
}

.brand-name small{
    display:block;
    margin-top:5px;
    font-size:12px;
    font-weight:400;
    letter-spacing:4px;
    color:#d9ecff;
}

nav{
    display:flex;
    align-items:center;
    gap:35px;
}

nav a{
    font-size:16px;
    font-weight:600;
    color:white;
}

/* HAMBURGER */
.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:white;
    font-size:32px;
    line-height:1;
    padding:4px 6px;
    cursor:pointer;
    position:relative;
    top:-6px;               /* sits slightly higher than before */
}

@media (max-width:1100px){

    header{
        padding-left:6%;
        padding-right:6%;
    }

    nav{
        gap:22px;
    }

    nav a{
        font-size:14px;
    }

}

@media (max-width:900px){

    header{
        padding:15px 6%;
        flex-wrap:wrap;
    }

    .logo img{
        width:65px;
        height:65px;
    }

    .brand-name{
        font-size:22px;
    }

    .brand-name small{
        font-size:10px;
        letter-spacing:3px;
    }

    .menu-toggle{
        display:block;
        margin-left:auto;
    }

    nav{
        display:none;
        width:100%;
        flex-direction:column;
        align-items:center;
        gap:22px;
        padding:25px 0;
        margin-top:15px;
        background:rgba(0,18,51,.95);
        border-radius:0 0 25px 25px;
    }

    nav.show{
        display:flex;
        animation:menuDown .3s ease;
    }

    nav a{
        font-size:18px;
    }

}

@media (max-width:500px){

    .brand-name{
        font-size:20px;
    }

    .brand-name small{
        font-size:9px;
        letter-spacing:2px;
    }

}

/* Personalized collection heading — intentionally subtle so the original fleet layout remains unchanged. */
.recommendation-note{
    width:100%;
    margin:0 auto 24px;
    padding:0 4px;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:6px;
    animation:recommendationFade .35s ease;
}
.recommendation-note strong{
    color:var(--blue-dark);
    font-size:22px;
    font-weight:800;
    letter-spacing:-.3px;
}
.recommendation-note span{
    color:#66758b;
    font-size:13px;
    font-weight:500;
}
@keyframes recommendationFade{
    from{opacity:0;transform:translateY(6px)}
    to{opacity:1;transform:translateY(0)}
}