/*==================================================
    UniQue Ride & Logistics
    Main Stylesheet
    Author: OpenAI
    Version: 1.0
==================================================*/

/*==============================
ROOT VARIABLES
==============================*/

:root{

    --primary:#1565A0;
    --secondary:#E98F3D;

    --dark:#12345A;

    --light:#F4F6F8;

    --white:#ffffff;

    --black:#222222;

    --gray:#6c757d;

    --border:#dee2e6;

    --shadow:0 15px 40px rgba(0,0,0,.08);

    --transition:.4s ease;

}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    color:var(--black);

    background:#fff;

    overflow-x:hidden;

    line-height:1.8;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

img{

    max-width:100%;

    display:block;

}

section{

    padding:90px 0;

}

h1,h2,h3,h4,h5,h6{

    font-weight:700;

    color:var(--dark);

}

p{

    color:#666;

    font-size:16px;

}

/*==============================
TOP BAR
==============================*/

.top-bar{

    background:var(--dark);

    color:#fff;

    font-size:14px;

}

.top-bar i{

    color:var(--secondary);

}

.top-bar small{

    color:#fff;

}

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

.navbar{

    background:#fff;

    box-shadow:0 2px 20px rgba(0,0,0,.08);

    padding:18px 0;

}

.navbar-brand img{

    max-height:60px;

}

.nav-link{

    color:var(--dark)!important;

    font-weight:600;

    margin-left:18px;

    position:relative;

}

.nav-link:hover{

    color:var(--primary)!important;

}

.nav-link::after{

    content:"";

    position:absolute;

    width:0;

    height:3px;

    background:var(--secondary);

    left:0;

    bottom:-6px;

    transition:.4s;

}

.nav-link:hover::after{

    width:100%;

}

.navbar .btn{

    border-radius:40px;

    padding:12px 28px;

    font-weight:600;

}

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

.btn-primary{

    background:var(--primary);

    border:none;

    border-radius:40px;

    padding:14px 30px;

}

.btn-primary:hover{

    background:var(--secondary);

}

.btn-warning{

    background:var(--secondary);

    border:none;

    color:#fff;

    border-radius:40px;

    padding:14px 30px;

}

.btn-warning:hover{

    background:var(--primary);

    color:#fff;

}

.btn-outline-primary{

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:40px;

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:#fff;

}

/*==============================
HERO SECTION
==============================*/

.hero-section{

    margin-top:0;

}

.hero-image{

    height:90vh;

    object-fit:cover;

    filter:brightness(.45);

}

.carousel-caption{

    top:50%;

    transform:translateY(-50%);

    bottom:auto;

    text-align:left;

}

.carousel-caption h1{

    color:#fff;

    font-size:64px;

    font-weight:800;

    line-height:1.2;

}

.carousel-caption p{

    color:#fff;

    font-size:22px;

    margin:25px 0;

}

/*==============================
SECTION TITLE
==============================*/

.section-title{

    color:var(--secondary);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-title::before{

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:var(--secondary);

    margin-bottom:12px;

}

/*==============================
ABOUT
==============================*/

.about-img img{

    border-radius:20px;

    box-shadow:var(--shadow);

}

.about-content p{

    margin-bottom:20px;

}
/*==============================
SERVICES SECTION
==============================*/

.services-section{
    background:var(--light);
}

.service-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
    height:100%;
}

.service-card:hover{
    transform:translateY(-12px);
}

.service-card img{
    width:100%;
    height:230px;
    object-fit:cover;
}

.service-card .p-4{
    padding:30px !important;
}

.service-card h4{
    margin:20px 0 15px;
    font-size:22px;
}

.service-card p{
    margin-bottom:25px;
}

.service-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

/*==============================
FEATURE BOXES
==============================*/

.feature-box{
    background:#fff;
    border-radius:15px;
    padding:30px;
    box-shadow:var(--shadow);
    transition:.35s;
    text-align:center;
    height:100%;
}

.feature-box:hover{
    transform:translateY(-10px);
}

.feature-box i{
    width:70px;
    height:70px;
    border-radius:50%;
    background:var(--secondary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    font-size:28px;
}

.feature-box h5{
    margin:20px 0 10px;
}

/*==============================
COUNTER SECTION
==============================*/

.counter-section{
    background:linear-gradient(
        rgba(18,52,90,.93),
        rgba(18,52,90,.93)
    ),
    url("../images/counter.jpg");

    background-size:cover;
    background-position:center;
    color:#fff;
    padding:90px 0;
}

.counter-section h2{
    font-size:55px;
    color:var(--secondary);
    font-weight:700;
}

.counter-section p{
    color:#fff;
    font-size:18px;
}

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

.fleet-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.4s;
}

.fleet-card:hover{
    transform:translateY(-10px);
}

.fleet-card img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.fleet-content{
    padding:30px;
}

.fleet-content h4{
    margin-bottom:15px;
}

/*==============================
TESTIMONIALS
==============================*/

.testimonial-card{
    background:#fff;
    border-radius:18px;
    padding:40px;
    box-shadow:var(--shadow);
    position:relative;
    transition:.35s;
    height:100%;
}

.testimonial-card:hover{
    transform:translateY(-8px);
}

.quote{
    color:var(--secondary);
    font-size:45px;
    margin-bottom:20px;
}

.testimonial-card h5{
    margin-top:25px;
    color:var(--primary);
}

.testimonial-card small{
    color:#777;
}

/*==============================
CALL TO ACTION
==============================*/

.cta-section{
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--dark)
    );
}

.cta-section h2{
    color:#fff;
    font-size:42px;
}

.cta-section p{
    color:#f5f5f5;
}

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

.footer{
    background:#0d2b49;
    color:#ddd;
}

.footer h5{
    color:#fff;
    margin-bottom:25px;
}

.footer p{
    color:#d8d8d8;
}

.footer ul{
    list-style:none;
    padding:0;
}

.footer ul li{
    margin-bottom:12px;
}

.footer ul li a{
    color:#ddd;
    transition:.3s;
}

.footer ul li a:hover{
    color:var(--secondary);
    padding-left:8px;
}

.footer hr{
    border-color:rgba(255,255,255,.15);
}

.footer .social-links a{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    color:#fff;
    border-radius:50%;
    margin-right:8px;
    transition:.3s;
}

.footer .social-links a:hover{
    background:var(--secondary);
    transform:translateY(-5px);
}

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

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    background:#25D366;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    z-index:9999;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

    transition:.3s;

}

.whatsapp-float:hover{

    color:#fff;

    transform:scale(1.12);

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:991px){

.carousel-caption{
    text-align:center;
}

.carousel-caption h1{
    font-size:42px;
}

.carousel-caption p{
    font-size:18px;
}

.hero-image{
    height:75vh;
}

.navbar .btn{
    margin-top:20px;
}

section{
    padding:70px 0;
}

}

@media(max-width:767px){

.hero-image{
    height:65vh;
}

.carousel-caption h1{
    font-size:32px;
}

.carousel-caption p{
    font-size:16px;
}

.counter-section h2{
    font-size:40px;
}

.cta-section h2{
    font-size:30px;
}

.service-card,
.feature-box,
.fleet-card,
.testimonial-card{
    margin-bottom:25px;
}

.footer{
    text-align:center;
}

.footer .social-links{
    margin-top:20px;
}

}

@media(max-width:576px){

.section-title{
    font-size:14px;
}

h2{
    font-size:30px;
}

.btn{
    width:100%;
    margin-bottom:12px;
}

.carousel-caption{
    padding:0 20px;
}

}

/*==========================
PREMIUM HERO
===========================*/

.hero-premium{

position:relative;

overflow:hidden;

min-height:100vh;

display:flex;

align-items:center;

}

.hero-bg{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

animation:zoomHero 20s infinite alternate;

}

.hero-overlay{

position:absolute;

width:100%;

height:100%;

background:linear-gradient(rgba(10,35,65,.82),rgba(10,35,65,.78));

}

.hero-title{

font-size:60px;

font-weight:800;

line-height:1.1;

}

.hero-text{

font-size:20px;

opacity:.95;

margin-top:20px;

}

.hero-badge{

background:#E67E22;

padding:10px 20px;

border-radius:40px;

font-weight:600;

display:inline-block;

}

.booking-card{

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

backdrop-filter:blur(15px);

padding:35px;

border-radius:20px;

box-shadow:0 20px 50px rgba(0,0,0,.3);

color:white;

}

.booking-card input,

.booking-card select{

height:55px;

border-radius:10px;

}

.counter{

font-size:45px;

font-weight:800;

color:#F4A340;

}

.scroll-down{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

font-size:35px;

color:white;

animation:bounce 2s infinite;

}

@keyframes zoomHero{

0%{

transform:scale(1);

}

100%{

transform:scale(1.12);

}

}

@keyframes bounce{

0%,100%{

transform:translate(-50%,0);

}

50%{

transform:translate(-50%,12px);

}

}

@media(max-width:991px){

.hero-title{

font-size:42px;

}

.booking-card{

margin-top:40px;

}

}