/* =====================================================
   SAI RENUKA CAB
   MAIN WEBSITE STYLES
===================================================== */


/* ================= RESET ================= */

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

:root {

    --primary: #d99a18;
    --primary-dark: #b87908;

    --dark: #111827;
    --dark-soft: #1f2937;

    --text: #374151;
    --text-light: #6b7280;

    --light: #f8f8f6;
    --white: #ffffff;

    --border: #e5e7eb;

    --radius: 12px;

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

}

html {
    scroll-behavior: smooth;
}

body {

    font-family: "DM Sans", sans-serif;

    color: var(--text);

    background: var(--white);

    line-height: 1.6;

    overflow-x: hidden;

}

h1,
h2,
h3,
h4 {

    font-family: "Manrope", sans-serif;

    color: var(--dark);

    line-height: 1.2;

}

a {

    text-decoration: none;

    color: inherit;

}

img {

    max-width: 100%;

    display: block;

}

button,
input,
select,
textarea {

    font-family: inherit;

}


/* ================= CONTAINER ================= */

.container {

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

}


/* ================= HEADER ================= */

.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(255, 255, 255, 0.96);

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

    transition: 0.3s ease;

}

.header.scrolled {

    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);

}

.nav-container {

    height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


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

.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

}

.logo-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: var(--dark);

    color: var(--primary);

    font-family: "Manrope", sans-serif;

    font-weight: 800;

    font-size: 15px;

}

.logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}

.logo-text strong {

    font-family: "Manrope", sans-serif;

    font-size: 17px;

    color: var(--dark);

}

.logo-text span {

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    color: var(--primary-dark);

    font-weight: 700;

}


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

.navbar {

    display: flex;

    align-items: center;

    gap: 25px;

}

.navbar a {

    font-size: 13px;

    font-weight: 600;

    color: var(--text);

    transition: 0.25s ease;

}

.navbar a:hover {

    color: var(--primary-dark);

}


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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 13px 22px;

    border-radius: 7px;

    font-size: 14px;

    font-weight: 700;

    border: 1px solid transparent;

    cursor: pointer;

    transition: 0.3s ease;

}

.btn-primary {

    background: var(--primary);

    color: #111;

}

.btn-primary:hover {

    background: var(--primary-dark);

    color: var(--white);

    transform: translateY(-2px);

}

.btn-dark {

    background: var(--dark);

    color: var(--white);

}

.btn-dark:hover {

    background: var(--primary);

    color: var(--dark);

}

.btn-outline {

    border-color: rgba(255, 255, 255, 0.7);

    color: var(--white);

}

.btn-outline:hover {

    background: var(--white);

    color: var(--dark);

}

.btn-light {

    background: var(--white);

    color: var(--dark);

}

.btn-light:hover {

    background: var(--primary);

}

.btn-large {

    padding: 16px 25px;

}

.btn-full {

    width: 100%;

}


/* ================= HEADER PHONE ================= */

.header-actions {

    display: flex;

    align-items: center;

    gap: 15px;

}

.header-phone {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 13px;

    font-weight: 700;

    color: var(--dark);

}

.phone-icon {

    color: var(--primary-dark);

    font-size: 17px;

}

.menu-toggle {

    display: none;

    border: none;

    background: transparent;

    cursor: pointer;

}

.menu-toggle span {

    display: block;

    width: 24px;

    height: 2px;

    background: var(--dark);

    margin: 5px 0;

}


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

.hero {

    position: relative;

    min-height: 720px;

    padding-top: 78px;

    display: flex;

    align-items: center;

    background-image: url("../images/hero-cab.jpg");

    background-size: cover;

    background-position: center;

    color: var(--white);

}

.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(5, 8, 15, 0.9) 0%,
        rgba(5, 8, 15, 0.7) 45%,
        rgba(5, 8, 15, 0.25) 100%
    );

}

.hero-container {

    position: relative;

    z-index: 2;

}

.hero-content {

    max-width: 670px;

}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 14px;

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 50px;

    background: rgba(255, 255, 255, 0.08);

    font-size: 12px;

    margin-bottom: 25px;

}

.badge-dot {

    width: 8px;

    height: 8px;

    background: var(--primary);

    border-radius: 50%;

}

.hero h1 {

    color: var(--white);

    font-size: clamp(42px, 6vw, 76px);

    letter-spacing: -2px;

    margin-bottom: 24px;

}

.hero h1 span {

    display: block;

    color: var(--primary);

}

.hero-description {

    max-width: 560px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 17px;

    margin-bottom: 32px;

}

.hero-buttons {

    display: flex;

    gap: 14px;

    margin-bottom: 55px;

}

.hero-trust {

    display: flex;

    align-items: center;

    gap: 24px;

}

.trust-item {

    display: flex;

    flex-direction: column;

}

.trust-item strong {

    color: var(--white);

    font-size: 16px;

}

.trust-item span {

    color: rgba(255, 255, 255, 0.6);

    font-size: 11px;

}

.trust-divider {

    width: 1px;

    height: 35px;

    background: rgba(255, 255, 255, 0.25);

}

.hero-scroll {

    position: absolute;

    z-index: 3;

    bottom: 25px;

    right: 45px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: rgba(255, 255, 255, 0.6);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

}

.scroll-arrow {

    font-size: 20px;

    color: var(--primary);

}


/* ================= QUICK BOOKING ================= */

.quick-booking {

    background: var(--primary);

}

.quick-booking-inner {

    min-height: 95px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}

.quick-booking-text {

    display: flex;

    align-items: center;

    gap: 15px;

}

.quick-icon {

    font-size: 28px;

}

.quick-booking-text strong {

    display: block;

    color: var(--dark);

    font-size: 17px;

}

.quick-booking-text small {

    color: rgba(0, 0, 0, 0.65);

    font-size: 12px;

}

.quick-booking-actions {

    display: flex;

    align-items: center;

    gap: 22px;

}

.quick-action {

    display: flex;

    align-items: center;

    gap: 10px;

}

.quick-action > span {

    font-size: 21px;

}

.quick-action small {

    display: block;

    font-size: 10px;

    color: rgba(0, 0, 0, 0.6);

}

.quick-action strong {

    display: block;

    font-size: 13px;

    color: var(--dark);

}


/* ================= SECTIONS ================= */

.section {

    padding: 110px 0;

}

.services-section {

    background: var(--white);

}

.section-heading {

    max-width: 650px;

    margin-bottom: 50px;

}

.section-heading.centered {

    text-align: center;

    margin-left: auto;

    margin-right: auto;

}

.eyebrow {

    display: block;

    color: var(--primary-dark);

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 800;

    margin-bottom: 15px;

}

.section-heading h2,

.why-content h2,

.corporate-content h2,

.booking-intro h2,

.contact-info h2 {

    font-size: clamp(32px, 4vw, 48px);

    letter-spacing: -1.5px;

    margin-bottom: 18px;

}

.section-heading h2 span,

.why-content h2 span,

.corporate-content h2 span,

.booking-intro h2 span,

.contact-info h2 span {

    color: var(--primary-dark);

}

.section-heading p,

.why-content p,

.corporate-content p,

.booking-intro p,

.contact-info > p {

    color: var(--text-light);

    font-size: 16px;

}


/* ================= SERVICES ================= */

.services-grid {

    display: grid;

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

    gap: 18px;

}

.service-card {

    padding: 30px 25px;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    transition: 0.3s ease;

}

.service-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow);

    border-color: var(--primary);

}

.service-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #fff6df;

    font-size: 23px;

    margin-bottom: 25px;

}

.service-card h3 {

    font-size: 20px;

    margin-bottom: 12px;

}

.service-card p {

    color: var(--text-light);

    font-size: 13px;

    min-height: 95px;

    margin-bottom: 20px;

}

.service-card a {

    color: var(--primary-dark);

    font-size: 13px;

    font-weight: 700;

}


/* ================= ROUTES ================= */

.routes-section {

    background: var(--light);

}

.routes-grid {

    display: grid;

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

    gap: 12px;

}

.route-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 22px 25px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 9px;

    transition: 0.3s ease;

}

.route-card:hover {

    border-color: var(--primary);

    transform: translateX(5px);

}

.route-from,

.route-to {

    font-weight: 700;

    font-size: 14px;

}

.route-arrow {

    color: var(--primary-dark);

    margin: 0 10px;

    font-weight: 800;

}

.route-book {

    color: var(--primary-dark);

    font-size: 12px;

    font-weight: 700;

}

.routes-bottom {

    text-align: center;

    margin-top: 35px;

    color: var(--text-light);

    font-size: 14px;

}

.routes-bottom a {

    color: var(--primary-dark);

    font-weight: 700;

    margin-left: 7px;

}


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

.fleet-section {

    background: var(--white);

}

.fleet-grid {

    display: grid;

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

    gap: 22px;

}

.fleet-card {

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    transition: 0.3s ease;

}

.fleet-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow);

}

.fleet-image {

    height: 220px;

    background: #eeeeee;

    overflow: hidden;

}

.fleet-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s ease;

}

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

    transform: scale(1.05);

}

.fleet-content {

    padding: 25px;

}

.fleet-label {

    color: var(--primary-dark);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}

.fleet-content h3 {

    font-size: 25px;

    margin: 8px 0 12px;

}

.fleet-content p {

    color: var(--text-light);

    font-size: 13px;

    margin-bottom: 18px;

}

.fleet-features {

    display: flex;

    flex-direction: column;

    gap: 5px;

    font-size: 12px;

    color: var(--text-light);

    margin-bottom: 20px;

}

.fleet-link {

    color: var(--primary-dark);

    font-size: 13px;

    font-weight: 700;

}


/* ================= WHY ================= */

.why-section {

    background: var(--dark);

    color: var(--white);

}

.why-container {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;

    align-items: center;

}

.why-content h2 {

    color: var(--white);

}

.why-content p {

    color: rgba(255, 255, 255, 0.65);

    margin-bottom: 30px;

}

.why-features {

    display: grid;

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

    gap: 35px 25px;

}

.why-feature {

    display: flex;

    gap: 15px;

}

.why-feature-icon {

    flex-shrink: 0;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(217, 154, 24, 0.15);

    color: var(--primary);

    font-weight: 800;

    font-size: 12px;

}

.why-feature h3 {

    color: var(--white);

    font-size: 16px;

    margin-bottom: 7px;

}

.why-feature p {

    color: rgba(255, 255, 255, 0.55);

    font-size: 12px;

}


/* ================= CORPORATE ================= */

.corporate-section {

    padding: 100px 0;

    background:

        linear-gradient(
            90deg,
            rgba(10, 15, 25, 0.94),
            rgba(10, 15, 25, 0.78)
        ),

        url("../images/hero-cab.jpg");

    background-size: cover;

    background-position: center;

    color: var(--white);

}

.corporate-content {

    max-width: 650px;

}

.corporate-content h2 {

    color: var(--white);

}

.corporate-content p {

    color: rgba(255, 255, 255, 0.7);

    max-width: 570px;

    margin-bottom: 25px;

}

.corporate-list {

    display: grid;

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

    gap: 12px;

    margin-bottom: 30px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 13px;

}


/* ================= REVIEWS ================= */

.reviews-section {

    background: var(--light);

}

.reviews-grid {

    display: grid;

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

    gap: 20px;

}

.review-card {

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 30px;

}

.stars {

    color: var(--primary);

    letter-spacing: 3px;

    margin-bottom: 18px;

}

.review-card > p {

    color: var(--text);

    font-size: 14px;

    font-style: italic;

    margin-bottom: 25px;

}

.review-author {

    display: flex;

    align-items: center;

    gap: 12px;

}

.author-avatar {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--dark);

    color: var(--primary);

    font-weight: 800;

}

.review-author strong {

    display: block;

    font-size: 12px;

}

.review-author span {

    display: block;

    color: var(--text-light);

    font-size: 11px;

}

.review-note {

    text-align: center;

    margin-top: 35px;

    color: var(--text-light);

    font-size: 13px;

}

.review-note a {

    color: var(--primary-dark);

    font-weight: 700;

}


/* ================= BOOKING ================= */

.booking-section {

    background: var(--white);

}

.booking-container {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 80px;

    align-items: start;

}

.booking-intro {

    position: sticky;

    top: 120px;

}

.booking-contact {

    margin-top: 35px;

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.booking-contact a {

    display: flex;

    align-items: center;

    gap: 13px;

}

.booking-contact a > span {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff6df;

    color: var(--primary-dark);

}

.booking-contact small {

    display: block;

    color: var(--text-light);

    font-size: 11px;

}

.booking-contact strong {

    display: block;

    font-size: 13px;

}

.booking-form-wrapper {

    padding: 35px;

    background: var(--light);

    border-radius: 15px;

}

.booking-form {

    display: flex;

    flex-direction: column;

    gap: 17px;

}

.form-row {

    display: grid;

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

    gap: 15px;

}

.form-group {

    display: flex;

    flex-direction: column;

    gap: 7px;

}

.form-group label {

    font-size: 12px;

    font-weight: 700;

    color: var(--dark);

}

.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    border: 1px solid var(--border);

    background: var(--white);

    border-radius: 7px;

    padding: 13px 14px;

    font-size: 13px;

    color: var(--text);

    outline: none;

    transition: 0.25s ease;

}

.form-group textarea {

    resize: vertical;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 3px rgba(217, 154, 24, 0.1);

}

.form-note {

    text-align: center;

    color: var(--text-light);

    font-size: 11px;

}


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

.contact-section {

    padding: 100px 0;

    background: var(--light);

}

.contact-container {

    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 100px;

    align-items: center;

}

.contact-details {

    display: flex;

    flex-direction: column;

    gap: 18px;

    margin-top: 35px;

}

.contact-detail {

    display: flex;

    align-items: center;

    gap: 15px;

}

.contact-icon {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--white);

    border-radius: 50%;

    color: var(--primary-dark);

    font-size: 18px;

}

.contact-detail small {

    display: block;

    color: var(--text-light);

    font-size: 11px;

}

.contact-detail strong {

    display: block;

    font-size: 14px;

}

.contact-card {

    background: var(--dark);

    color: var(--white);

    padding: 45px 35px;

    border-radius: 15px;

    text-align: center;

}

.contact-card-icon {

    font-size: 42px;

    margin-bottom: 20px;

}

.contact-card h3 {

    color: var(--white);

    font-size: 25px;

    margin-bottom: 12px;

}

.contact-card p {

    color: rgba(255, 255, 255, 0.6);

    font-size: 13px;

    margin-bottom: 25px;

}

.contact-card-call {

    display: block;

    color: rgba(255, 255, 255, 0.65);

    font-size: 12px;

    margin-top: 18px;

}


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

.footer {

    background: #0b0f17;

    color: var(--white);

}

.footer-container {

    padding: 65px 0;

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;

    gap: 50px;

}

.footer-logo .logo-text strong {

    color: var(--white);

}

.footer-brand > p {

    color: rgba(255, 255, 255, 0.55);

    font-size: 13px;

    max-width: 300px;

    margin: 20px 0;

}

.footer-socials {

    display: flex;

    gap: 10px;

}

.footer-socials a {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255, 255, 255, 0.1);

    color: var(--white);

    font-size: 12px;

    transition: 0.25s ease;

}

.footer-socials a:hover {

    background: var(--primary);

    color: var(--dark);

}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.footer-column h4 {

    color: var(--white);

    font-size: 14px;

    margin-bottom: 8px;

}

.footer-column a,

.footer-column p {

    color: rgba(255, 255, 255, 0.55);

    font-size: 12px;

    transition: 0.25s ease;

}

.footer-column a:hover {

    color: var(--primary);

}

.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}

.footer-bottom-inner {

    min-height: 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}

.footer-bottom p {

    color: rgba(255, 255, 255, 0.4);

    font-size: 11px;

}


/* ================= MOBILE BOTTOM BAR ================= */

.mobile-bottom-bar {

    display: none;

}