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

body {
    background: #f6f7fb;
}

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

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: .35s;
}

    header.sticky {
        background: #fff;
        box-shadow: 0 8px 25px rgba(0,0,0,.08);
    }

.container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

    .logo i {
        font-size: 32px;
        color: #e53935;
    }

    .logo span {
        color: #d68f74; /*#111;*/ /*#e4dede;*/
        font-size: 28px;
        font-weight: 700;
    }

/* Menu */

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 35px;
}

    .nav-links a {
        text-decoration: none;
        color: #333;
        font-weight: 500;
        transition: .3s;
        position: relative;
    }

        .nav-links a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -7px;
            width: 0;
            height: 3px;
            background: #e53935;
            transition: .3s;
        }

        .nav-links a:hover {
            color: #e53935;
        }

            .nav-links a:hover::after {
                width: 100%;
            }

/* Right Buttons */

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.login-btn {
    padding: 10px 22px;
    border-radius: 30px;
    border: 2px solid #e53935;
    color: #e53935;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
    text-decoration:none;
}

    .login-btn:hover {
        background: #e53935;
        color: #fff;
    }

.signup-btn {
    padding: 11px 22px;
    border: none;
    border-radius: 30px;
    background: #e53935;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
    text-decoration:none;
}

    .signup-btn:hover {
        background: #c62828;
    }

/* Dropdown */

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 50px;
    left: 0;
    background: #fff;
    width: 220px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: .35s;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 15px 20px;
}

    .dropdown-menu a:hover {
        background: #f7f7f7;
    }

/* Mobile Button */

.menu-btn {
    display: none;
    font-size: 28px;
    cursor: pointer;
}

/* Hero */

.hero {
    height: 80vh;
    background: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)), url("../images/bus.jpg?auto=format&fit=crop&w=1600&q=80") center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

    .hero h1 {
        margin-top: 20px;
        font-size: 24px !important;       
        margin-bottom: 15px;
    }

    .hero p {
        font-size: 16px;
    }

/* Mobile */

@media(max-width:992px) {

    .nav-links {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        background: #fff;
        flex-direction: column;
        padding: 30px;
        transition: .4s;
        box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }

        .nav-links.active {
            left: 0;
        }

    .nav-right {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    .dropdown-menu {
        position: relative;
        opacity: 1;
        visibility: visible;
        transform: none;
        width: 100%;
        display: none;
        box-shadow: none;
        background: #f8f8f8;
    }

    .dropdown.open .dropdown-menu {
        display: block;
    }

    .hero h1 {
        margin-top:20px;
        font-size: 24px !important;
    }
}
/* Footer */
.footer {
    background: #222;
    color: #fff;
    padding: 30px 20px;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-logo h3 {
    margin-bottom: 10px;
}

.footer-links,
.footer-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .footer a:hover {
        color: #00bcd4;
    }

/* Responsive */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-links,
    .footer-social {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 20px 15px;
    }

    .footer-logo h3 {
        font-size: 20px;
    }

    .footer p,
    .footer a {
        font-size: 14px;
    }
}
.search-section {
    width: 100%;
    padding: 30px 15px;
    background: #f5f7fb;
}

.search-box {
    max-width: 1200px;
    margin: auto;
    background: #fff;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.field {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
}

    .field i {
        color: #ff6600;
        margin-right: 10px;
    }

    .field input,
    .field select {
        width: 100%;
        border: none;
        outline: none;
        font-size: 15px;
        background: transparent;
    }

.swap-btn {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: #ff6600;
    color: #fff;
    cursor: pointer;
}

.search-btn {
    background: #ff6600;
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

    .search-btn:hover {
        background: #e65c00;
    }

@media(max-width:768px) {
    .search-box {
        flex-direction: column;
    }

    .field,
    .search-btn {
        width: 100%;
    }

    .swap-btn {
        transform: rotate(90deg);
    }
}
.popular-routes {
    padding: 70px 20px;
    background: #f8f9fa;
}

.container {
    max-width: 1200px;
    margin: auto;
}

.popular-routes h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 10px;
}

.popular-routes p {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
}

.route-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 25px;
}

.route-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
    transition: .3s;
}

    .route-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 25px rgba(0,0,0,.15);
    }

    .route-card h3 {
        margin-bottom: 15px;
        color: #222;
    }

    .route-card p {
        text-align: left;
        margin-bottom: 20px;
        color: #555;
    }

.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #ff6b00;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    transition: .3s;
}

    .btn:hover {
        background: #e65c00;
    }
.about-site {
    padding: 70px 20px;
    background: #fff;
}

.about-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-image {
    flex: 1;
}

    .about-image img {
        width: 100%;
        border-radius: 15px;
    }

.about-content {
    flex: 1;
}

    .about-content h2 {
        font-size: 36px;
        margin-bottom: 20px;
        color: #222;
    }

    .about-content p {
        color: #666;
        line-height: 1.7;
    }

.about-features {
    margin: 30px 0;
}

.feature {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

    .feature i {
        width: 45px;
        height: 45px;
        background: #ff6600;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feature h4 {
        margin: 0 0 5px;
        color: #222;
    }

    .feature p {
        margin: 0;
        font-size: 14px;
    }

.about-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #ff6600;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
}

    .about-btn:hover {
        background: #e65c00;
    }


/* Responsive */
@media(max-width:768px) {

    .about-container {
        flex-direction: column;
        text-align: center;
    }

    .feature {
        text-align: left;
    }

    .about-content h2 {
        font-size: 28px;
    }
}
.services {
    padding: 70px 20px;
    background: #f8f9fa;
}

.services-container {
    max-width: 1200px;
    margin: auto;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

    .section-title h2 {
        font-size: 36px;
        color: #222;
        margin-bottom: 10px;
    }

    .section-title p {
        color: #666;
    }


.service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
}


.service-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    transition: .3s;
}


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


.service-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ff6600;
    color: #fff;
    font-size: 28px;
}


.service-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #222;
}


.service-card p {
    color: #666;
    line-height: 1.6;
}


/* Tablet */
@media(max-width:992px) {

    .service-grid {
        grid-template-columns: repeat(2,1fr);
    }
}


/* Mobile */
@media(max-width:600px) {

    .service-grid {
        grid-template-columns: 1fr;
    }

    .section-title h2 {
        font-size: 28px;
    }
}
.contact-section {
    padding: 70px 20px;
    background: #f8f9fa;
}


.contact-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}


.contact-info h2 {
    font-size: 36px;
    margin-bottom: 15px;
    color: #222;
}


.contact-info > p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 30px;
}


.contact-item {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 25px;
}


    .contact-item i {
        width: 50px;
        height: 50px;
        background: #ff6600;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }


    .contact-item h4 {
        margin: 0 0 5px;
        color: #222;
    }


    .contact-item p {
        margin: 0;
        color: #666;
    }



.contact-form {
    background: #fff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}


    .contact-form h3 {
        margin-bottom: 25px;
        font-size: 24px;
    }


.input-box {
    margin-bottom: 18px;
}


    .input-box input,
    .input-box textarea {
        width: 100%;
        padding: 14px;
        border: 1px solid #ddd;
        border-radius: 8px;
        outline: none;
        font-size: 15px;
    }


    .input-box textarea {
        height: 120px;
        resize: none;
    }


.contact-form button {
    width: 100%;
    padding: 14px;
    background: #ff6600;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}


    .contact-form button:hover {
        background: #e65c00;
    }



/* Responsive */

@media(max-width:768px) {

    .contact-container {
        grid-template-columns: 1fr;
    }


    .contact-info {
        text-align: center;
    }


    .contact-item {
        justify-content: center;
        text-align: left;
    }


    .contact-info h2 {
        font-size: 28px;
    }
}
.gallery-section {
    padding: 70px 20px;
    background: #fff;
}


.gallery-container {
    max-width: 1200px;
    margin: auto;
}


.section-title {
    text-align: center;
    margin-bottom: 40px;
}


    .section-title h2 {
        font-size: 36px;
        color: #222;
        margin-bottom: 10px;
    }


    .section-title p {
        color: #666;
    }


.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
}


.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    height: 260px;
}


    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .5s;
    }


    .gallery-item:hover img {
        transform: scale(1.1);
    }


.gallery-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient( transparent, rgba(0,0,0,.8) );
    color: #fff;
}


    .gallery-overlay h3 {
        margin: 0;
        font-size: 20px;
    }



/* Tablet */

@media(max-width:992px) {

    .gallery-grid {
        grid-template-columns: repeat(2,1fr);
    }
}



/* Mobile */

@media(max-width:600px) {

    .gallery-grid {
        grid-template-columns: 1fr;
    }


    .section-title h2 {
        font-size: 28px;
    }
}
.offers-section {
    padding: 70px 20px;
    background: #f8f9fa;
}


.offers-container {
    max-width: 1200px;
    margin: auto;
}


.section-title {
    text-align: center;
    margin-bottom: 40px;
}


    .section-title h2 {
        font-size: 36px;
        color: #222;
    }


    .section-title p {
        color: #666;
    }



.offers-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}



.offer-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    transition: .3s;
}


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



.offer-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    background: #ff6600;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}



.offer-card h3 {
    color: #222;
    margin-bottom: 15px;
}



.offer-card p {
    color: #666;
    line-height: 1.6;
    min-height: 70px;
}



.coupon {
    background: #fff3e8;
    color: #ff6600;
    padding: 10px;
    border-radius: 6px;
    margin: 20px 0;
    font-size: 15px;
}



.offer-card a {
    display: inline-block;
    padding: 10px 25px;
    background: #ff6600;
    color: white;
    text-decoration: none;
    border-radius: 8px;
}


    .offer-card a:hover {
        background: #e65c00;
    }



/* Tablet */

@media(max-width:992px) {

    .offers-grid {
        grid-template-columns: repeat(2,1fr);
    }
}



/* Mobile */

@media(max-width:600px) {

    .offers-grid {
        grid-template-columns: 1fr;
    }


    .section-title h2 {
        font-size: 28px;
    }
}
.track-section {
    padding: 70px 20px;
    background: #ff6600;
    border-radius: 18px;
}


.track-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 50px;
}


.track-content {
    flex: 1;
    color: white;
}


    .track-content h2 {
        font-size: 38px;
        margin-bottom: 15px;
    }


    .track-content p {
        line-height: 1.7;
        margin-bottom: 30px;
    }



.track-form {
    background: white;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}



.track-input {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 8px;
}


    .track-input i {
        color: #ff6600;
        margin-right: 10px;
    }


    .track-input input {
        border: none;
        outline: none;
        width: 100%;
        font-size: 15px;
    }



.track-form button {
    background: #222;
    color: white;
    border: none;
    padding: 14px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}


    .track-form button:hover {
        background: #000;
    }



.track-features {
    display: flex;
    gap: 25px;
    margin-top: 35px;
    flex-wrap: wrap;
}


    .track-features div {
        display: flex;
        align-items: center;
        gap: 10px;
    }


    .track-features i {
        font-size: 22px;
    }



.track-image {
    flex: 1;
}


    .track-image img {
        width: 100%;
        max-width: 450px;
    }



/* Responsive */

@media(max-width:768px) {

    .track-container {
        flex-direction: column;
        text-align: center;
    }


    .track-form {
        flex-direction: column;
    }


        .track-input,
        .track-form button {
            width: 100%;
        }


    .track-features {
        justify-content: center;
    }


    .track-content h2 {
        font-size: 30px;
    }
}
.tickets-section {
    padding: 70px 20px;
    background: #f8f9fa;
}


.tickets-container {
    max-width: 1200px;
    margin: auto;
}


.section-title {
    text-align: center;
    margin-bottom: 40px;
}


    .section-title h2 {
        font-size: 36px;
        color: #222;
    }


    .section-title p {
        color: #666;
    }



.tickets-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
}



.ticket-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    transition: .3s;
}


    .ticket-card:hover {
        transform: translateY(-6px);
    }



.bus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}


    .bus-header h3 {
        font-size: 20px;
        color: #222;
    }


    .bus-header span {
        background: #fff0e6;
        color: #ff6600;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
    }



.route-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25px 0;
    text-align: center;
}


    .route-info i {
        color: #ff6600;
        font-size: 20px;
    }


    .route-info h4 {
        margin-bottom: 5px;
    }


    .route-info p {
        color: #666;
        margin: 0;
    }



.ticket-details {
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 14px;
}


    .ticket-details i {
        color: #ff6600;
    }



.ticket-footer {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


    .ticket-footer h3 {
        color: #ff6600;
    }


    .ticket-footer a {
        background: #ff6600;
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        text-decoration: none;
    }


        .ticket-footer a:hover {
            background: #e65c00;
        }



/* Tablet */

@media(max-width:992px) {

    .tickets-grid {
        grid-template-columns: repeat(2,1fr);
    }
}



/* Mobile */

@media(max-width:600px) {

    .tickets-grid {
        grid-template-columns: 1fr;
    }

    .section-title h2 {
        font-size: 28px;
    }
}
.routes-section {
    padding: 70px 20px;
    background: #fff;
}


.routes-container {
    max-width: 1200px;
    margin: auto;
}


.section-title {
    text-align: center;
    margin-bottom: 40px;
}


    .section-title h2 {
        font-size: 36px;
        color: #222;
    }


    .section-title p {
        color: #666;
    }



.routes-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}



.route-card {
    background: #fff;
    padding: 30px 20px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    transition: .3s;
    border: 1px solid #eee;
}


    .route-card:hover {
        transform: translateY(-8px);
        border-color: #ff6600;
    }



.route-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #ff6600;
    color: #fff;
    font-size: 28px;
}



.route-card h3 {
    font-size: 19px;
    color: #222;
    margin-bottom: 20px;
}



.route-details {
    display: flex;
    justify-content: space-around;
    margin-bottom: 25px;
}


    .route-details p {
        color: #666;
        font-size: 14px;
    }


    .route-details i {
        color: #ff6600;
    }



.route-card a {
    display: inline-block;
    padding: 10px 22px;
    background: #ff6600;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
}


    .route-card a:hover {
        background: #e65c00;
    }



/* Tablet */

@media(max-width:992px) {

    .routes-grid {
        grid-template-columns: repeat(2,1fr);
    }
}



/* Mobile */

@media(max-width:600px) {

    .routes-grid {
        grid-template-columns: 1fr;
    }


    .section-title h2 {
        font-size: 28px;
    }
}
.help-section {
    padding: 70px 20px;
    background: #f8f9fa;
}


.help-container {
    max-width: 1200px;
    margin: auto;
}


.section-title {
    text-align: center;
    margin-bottom: 40px;
}


    .section-title h2 {
        font-size: 36px;
        color: #222;
    }


    .section-title p {
        color: #666;
    }



.help-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}



.help-card {
    background: #fff;
    padding: 30px 20px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    transition: .3s;
}


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



.help-icon {
    width: 65px;
    height: 65px;
    margin: auto;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #ff6600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}



.help-card h3 {
    color: #222;
    margin-bottom: 15px;
}



.help-card p {
    color: #666;
    line-height: 1.6;
    min-height: 80px;
}



.help-card a {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #ff6600;
    color: white;
    border-radius: 8px;
    text-decoration: none;
}



    .help-card a:hover {
        background: #e65c00;
    }



/* FAQ */

.faq-box {
    margin-top: 50px;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}


    .faq-box h3 {
        margin-bottom: 20px;
        color: #222;
    }


    .faq-box details {
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }


    .faq-box summary {
        cursor: pointer;
        font-weight: 600;
        color: #333;
    }


    .faq-box p {
        color: #666;
        line-height: 1.6;
    }



/* Tablet */

@media(max-width:992px) {

    .help-grid {
        grid-template-columns: repeat(2,1fr);
    }
}



/* Mobile */

@media(max-width:600px) {

    .help-grid {
        grid-template-columns: 1fr;
    }


    .section-title h2 {
        font-size: 28px;
    }
}
.login-section {
    padding: 70px 20px;
    background: #f8f9fa;
}


.login-container {
    max-width: 1000px;
    margin: auto;
    display: flex;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
}


.login-image {
    flex: 1;
}


    .login-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



.login-box {
    flex: 1;
    padding: 45px;
}


.login-header {
    text-align: center;
    margin-bottom: 30px;
}


    .login-header h2 {
        font-size: 32px;
        color: #222;
    }


    .login-header p {
        color: #666;
    }



.login-input {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}


    .login-input i {
        color: #ff6600;
        margin-right: 12px;
    }


    .login-input input {
        width: 100%;
        border: none;
        outline: none;
        font-size: 15px;
    }



.login-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    font-size: 14px;
}


    .login-options a {
        color: #ff6600;
        text-decoration: none;
    }



.login-box form button {
    width: 100%;
    padding: 14px;
    background: #ff6600;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}


    .login-box form button:hover {
        background: #e65c00;
    }



.divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}


    .divider span {
        background: #fff;
        padding: 0 15px;
        color: #777;
        position: relative;
        z-index: 1;
    }


    .divider:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background: #ddd;
        top: 50%;
        left: 0;
    }



.social-login button {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
}


.google {
    background: #fff;
    border: 1px solid #ddd !important;
}


.facebook {
    background: #1877f2;
    color: #fff;
}


.register-text {
    text-align: center;
    margin-top: 20px;
}


    .register-text a {
        color: #ff6600;
        text-decoration: none;
    }



/* Responsive */

@media(max-width:768px) {

    .login-container {
        flex-direction: column;
    }


    .login-image {
        height: 250px;
    }


    .login-box {
        padding: 30px 20px;
    }
}
.signup-section {
    padding: 70px 20px;
    background: #f8f9fa;
}


.signup-container {
    max-width: 1000px;
    margin: auto;
    display: flex;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
}


.signup-box {
    flex: 1;
    padding: 45px;
}


.signup-header {
    text-align: center;
    margin-bottom: 30px;
}


    .signup-header h2 {
        font-size: 32px;
        color: #222;
        margin-bottom: 10px;
    }


    .signup-header p {
        color: #666;
    }



.signup-input {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 18px;
}


    .signup-input i {
        color: #ff6600;
        margin-right: 12px;
    }


    .signup-input input {
        width: 100%;
        border: none;
        outline: none;
        font-size: 15px;
    }



.terms {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
}



.signup-box form button {
    width: 100%;
    padding: 14px;
    background: #ff6600;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}


    .signup-box form button:hover {
        background: #e65c00;
    }



.divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}


    .divider span {
        background: #fff;
        padding: 0 15px;
        color: #777;
        position: relative;
        z-index: 1;
    }


    .divider:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background: #ddd;
        top: 50%;
        left: 0;
    }



.social-signup button {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: none;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
}


.google-btn {
    background: #fff;
    border: 1px solid #ddd !important;
}


.facebook-btn {
    background: #1877f2;
    color: #fff;
}



.login-link {
    text-align: center;
    margin-top: 20px;
}


    .login-link a {
        color: #ff6600;
        text-decoration: none;
    }



.signup-image {
    flex: 1;
}


    .signup-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



/* Responsive */

@media(max-width:768px) {

    .signup-container {
        flex-direction: column-reverse;
    }


    .signup-image {
        height: 250px;
    }


    .signup-box {
        padding: 30px 20px;
    }
}

.search-result-section {
    padding: 40px 20px;
    background: #f6f7fb;
}


.result-container {
    max-width: 1200px;
    margin: auto;
}


/* Search Summary */

.search-summary {
    background: #ffb787;/* #fff;*/
    padding: 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
    flex-wrap: wrap;
}


.location span,
.date span {
    color: #777;
    font-size: 13px;
}


.location h3,
.date h3 {
    margin: 5px 0;
    color: #222;
}


.swap-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: #ff6600;
    color: #fff;
}


.date {
    display: flex;
    align-items: center;
    gap: 12px;
}


    .date i {
        color: #ff6600;
        font-size: 25px;
    }


.modify-btn {
    margin-left: auto;
    padding: 12px 22px;
    border: none;
    background: #222;
    color: #fff;
    border-radius: 8px;
}



/* Results */

.result-title {
    margin: 35px 0 20px;
    color: #222;
    text-align:center !important;
}


.bus-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.bus-card {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr .8fr;
    align-items: center;
    gap: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
}


.bus-name span {
    background: #fff0e6;
    color: #ff6600;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
}


.time-route {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    text-align: center;
}


    .time-route i {
        color: #ff6600;
    }


.bus-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #666;
}


    .bus-info i {
        color: #ff6600;
    }


.price-book h3 {
    color: #ff6600;
    margin-bottom: 10px !important;
}


.price-book button {
    background: #ff6600;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    
}
.price-book a {
    background: #ff6600;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
   
}


/* Responsive */

@media(max-width:900px) {

    .bus-card {
        grid-template-columns: 1fr;
        text-align: center;
    }


    .bus-info {
        align-items: center;
    }


    .modify-btn {
        margin-left: 0;
    }
}


@media(max-width:600px) {

    .search-summary {
        flex-direction: column;
        text-align: center !important;
    }
}
.seat-section {
    padding: 60px 20px;
    background: #f6f7fb;
}


.seat-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}


.seat-layout-box,
.booking-summary {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}


.bus-info-title {
    margin: 20px 0;
}


    .bus-info-title p {
        color: #666;
    }



.legend {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
}


    .legend span {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
    }


    .legend i {
        width: 18px;
        height: 18px;
        display: inline-block;
        border-radius: 4px;
    }


.available {
    background: #fff;
    border: 1px solid #ff6600;
}


.selected {
    background: #ff6600;
}


.booked {
    background: #ccc;
}



.bus-layout {
    max-width: 350px;
    margin: auto;
    padding: 25px;
    background: #fafafa;
    border-radius: 20px;
}



.driver {
    text-align: right;
    margin-bottom: 25px;
    color: #666;
}


.seat-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
}



.seat {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    border: 1px solid #ff6600;
    background: #fff;
    cursor: pointer;
}


    .seat:hover {
        background: #ffe0cc;
    }


    .seat.selected {
        background: #ff6600;
        color: #fff;
    }


    .seat.booked {
        background: #ccc;
        border-color: #ccc;
        cursor: not-allowed;
    }



/* Summary */

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}


    .summary-item span {
        color: #666;
    }


    .summary-item strong {
        color: #222;
    }



.continue-btn {
    width: 100%;
    margin-top: 25px;
    padding: 15px;
    background: #ff6600;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    text-decoration:none;
    text-align:center !important;
}


    .continue-btn:hover {
        background: #e65c00;
    }



/* Responsive */

@media(max-width:900px) {

    .seat-container {
        grid-template-columns: 1fr;
    }
}


@media(max-width:500px) {

    .seat-layout-box,
    .booking-summary {
        padding: 20px;
    }


    .seat {
        width: 38px;
        height: 38px;
    }
}
.bus-details-section {
    padding: 40px 20px;
    background: #f5f6fa;
}


.bus-details-container {
    max-width: 1200px;
    margin: auto;
}


/* Header */

.bus-header-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 15px #ddd;
}


.operator h2 {
    margin: 0;
}


.operator p {
    color: #666;
}



.journey-time {
    display: flex;
    align-items: center;
    gap: 25px;
    text-align: center;
}


.duration {
    color: #777;
}



.fare h2 {
    color: #ff6600;
}


/* Main */

.seat-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
    margin-top: 30px;
}


.seat-area,
.points,
.booking-summary {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
}



.seat-info {
    display: flex;
    gap: 15px;
    margin: 15px 0;
}


    .seat-info span {
        background: #fff0e6;
        padding: 8px 15px;
        color: #ff6600;
        border-radius: 20px;
    }


/* Seats */

.bus-layout {
    background: #fafafa;
    padding: 20px;
    border-radius: 20px;
}


.steering {
    text-align: right;
    margin-bottom: 20px;
}


.seat-grid {
    display: grid;
    grid-template-columns: repeat(4,100px);
    gap: 15px;
}


.seat {
    height: 60px;
    border: 2px solid #ff6600;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
}


    .seat:hover,
    .seat.active {
        background: #ff6600;
        color: white;
    }


    .seat.booked {
        background: #ccc;
        border-color: #ccc;
    }


.sleeper {
    height: 80px;
}



.upper-seat {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}



/* Points */

.point {
    border-left: 3px solid #ddd;
    padding: 15px;
    margin: 15px 0;
}


    .point.active {
        border-color: #ff6600;
        background: #fff7f0;
    }


    .point span {
        color: #777;
        font-size: 14px;
    }



/* Summary */

.no-seat {
    color: #777;
}


.price-box {
    border-top: 1px solid #ddd;
    margin-top: 30px;
    padding-top: 20px;
}


    .price-box button {
        width: 100%;
        padding: 14px;
        background: #ff6600;
        color: white;
        border: none;
        border-radius: 8px;
    }



/* Responsive */

@media(max-width:900px) {

    .seat-main {
        grid-template-columns: 1fr;
    }


    .bus-header-card {
        flex-direction: column;
        gap: 20px;
    }


    .seat-grid {
        grid-template-columns: repeat(2,100px);
    }
}
.passenger-section {
    padding: 50px 20px;
    background: #f6f7fb;
}


.passenger-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}



.passenger-form,
.passenger-summary {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}



.subtitle {
    color: #777;
}



/* Selected seat */

.selected-seat-info {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff4eb;
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
}


    .selected-seat-info i {
        background: #ff6600;
        color: white;
        padding: 15px;
        border-radius: 50%;
    }



/* Form */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}


.input-group {
    margin-bottom: 20px;
}


    .input-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
    }


.input-box {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 8px;
}


    .input-box i {
        color: #ff6600;
        margin-right: 10px;
    }


    .input-box input,
    .input-box select {
        border: none;
        outline: none;
        width: 100%;
        font-size: 15px;
    }


.contact-title {
    margin: 25px 0;
}



/* Summary */


.route {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 25px 0;
}


    .route i {
        color: #ff6600;
    }


.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}


    .summary-row span {
        color: #777;
    }


.price {
    color: #ff6600;
}



.payment-btn {
    width: 100%;
    padding: 15px;
    margin-top: 25px;
    background: #ff6600;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    text-align: center !important;
}



    .payment-btn:hover {
        background: #e65c00;
    }



/* Responsive */

@media(max-width:900px) {

    .passenger-container {
        grid-template-columns: 1fr;
    }


    .form-row {
        grid-template-columns: 1fr;
    }
}

.payment-section {
    padding: 60px 20px;
    background: #f6f7fb;
}



.payment-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}



.payment-box,
.payment-summary {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}



.payment-subtitle {
    color: #777;
}



/* Payment methods */

.payment-methods {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
    margin: 25px 0;
}


.payment-option {
    border: 1px solid #ddd;
    padding: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}


    .payment-option input {
        accent-color: #ff6600;
    }


    .payment-option i {
        font-size: 22px;
        color: #ff6600;
    }


    .payment-option.active {
        border-color: #ff6600;
        background: #fff5ed;
    }



/* Inputs */

.card-details h3 {
    margin: 25px 0 15px;
}



.input-box {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    padding: 13px;
    border-radius: 8px;
    margin-bottom: 15px;
}


    .input-box i {
        color: #ff6600;
        margin-right: 10px;
    }


    .input-box input {
        border: none;
        outline: none;
        width: 100%;
        font-size: 15px;
    }


.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}



/* Button */

.pay-btn {
    width: 100%;
    padding: 16px;
    background: #ff6600;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    cursor: pointer;
    text-decoration:none;
    text-align:center !important;
}


    .pay-btn:hover {
        background: #e65c00;
    }



/* Summary */


.route {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 25px 0;
}


    .route i {
        color: #ff6600;
    }


.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}


    .summary-row span {
        color: #777;
    }


.total b {
    color: #ff6600;
    font-size: 22px;
}



/* Responsive */

@media(max-width:900px) {

    .payment-container {
        grid-template-columns: 1fr;
    }


    .payment-methods {
        grid-template-columns: 1fr;
    }


    .form-row {
        grid-template-columns: 1fr;
    }
}
.confirmation-section {
    padding: 60px 20px;
    background: #f6f7fb;
}


.confirmation-container {
    max-width: 900px;
    margin: auto;
}



/* Success */

.success-box {
    background: white;
    text-align: center;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    margin-bottom: 25px;
}


.success-icon {
    width: 70px;
    height: 70px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #28a745;
    color: white;
    border-radius: 50%;
    font-size: 35px;
}


.success-box h2 {
    color: #28a745;
}



.success-box p {
    color: #666;
}




/* Ticket */

.ticket-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
}



.ticket-header {
    background: #ff6600;
    color: white;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.ticket-status span {
    background: white;
    color: #ff6600;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
}



.ticket-body {
    padding: 30px;
}



/* Route */

.route-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}


    .route-box i {
        font-size: 35px;
        color: #ff6600;
    }



    .route-box span {
        color: #777;
    }




/* Details */

.ticket-details {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px dashed #ddd;
}


    .ticket-details span {
        display: block;
        color: #777;
        font-size: 14px;
    }


    .ticket-details strong {
        display: block;
        margin-top: 8px;
    }


.amount {
    color: #ff6600;
}




/* QR */

.qr-section {
    text-align: center;
    margin-top: 30px;
}


.qr-placeholder {
    width: 100px;
    height: 100px;
    margin: auto;
    background: #222;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
}




/* Footer */

.ticket-footer {
    padding: 20px;
    display: flex;
    gap: 15px;
    border-top: 1px solid #eee;
}


    .ticket-footer button {
        flex: 1;
        padding: 14px;
        border: none;
        background: #ff6600;
        color: white;
        border-radius: 8px;
        cursor: pointer;
    }


    .ticket-footer .print-btn {
        background: #222;
    }



/* Instructions */

.instructions {
    background: white;
    margin-top: 25px;
    padding: 25px;
    border-radius: 15px;
}


    .instructions li {
        margin: 10px 0;
        color: #555;
    }



/* Responsive */

@media(max-width:700px) {

    .ticket-header {
        flex-direction: column;
        gap: 15px;
    }


    .route-box {
        flex-direction: column;
        gap: 20px;
    }


    .ticket-details {
        grid-template-columns: 1fr 1fr;
    }


    .ticket-footer {
        flex-direction: column;
    }
}
.margintop{
    margin-top:2px;
}