/* --------------------
   Global Body Styling
-------------------- */
body {
    font-family: 'Neo', sans-serif !important;
    direction: rtl;
    text-align: right;
    background-color: #fafafa;
    position: relative;
    margin: 0;
    padding: 0;
}

/* --------------------
   Scrollbar Styling
-------------------- */
body::-webkit-scrollbar {
    width: 9px;
}

body::-webkit-scrollbar-track {
    background: #eeeeeea4;
}

body::-webkit-scrollbar-thumb {
    background-color: #efd01c;
    border-radius: 20px;
    border: 1px solid #efd01c;
}

/* --------------------
   Custom Font
-------------------- */
@font-face {
    font-family: 'Neo';
    src: url('../css/NeoSansArabic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ================================
   Root Variables
================================ */
:root {
    --main-color: #efd01c;
    --sub-color: #17a2b8;
    --bgColor: #f1f2f6;
    --boxShadow: 0px 4px 8px #eee;
    --formShadow: 0px 4px 8px rgba(239, 208, 28, 0.4);
    --footerColor: #777;
}

/* ================================
   Global Elements
================================ */
a {
    text-decoration: none !important;
}

button:focus,
.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Title Decoration */
.title {
    position: relative;
    display: inline-block;
}

.title::before,
.title::after {
    position: absolute;
    width: 0;
    height: 0;
    content: "";
    border-right: .4em solid transparent;
    border-bottom: .4em solid transparent;
    border-left: .4em solid var(--main-color);
}

.title::before {
    left: -15px;
    top: 10px;
    transform: rotate(315deg);
}

.title::after {
    right: -15px;
    top: 18px;
    transform: rotate(133deg);
}

/* ================================
   Animations
================================ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.spinning {
    animation: spin 3s linear infinite;
}

/* ================================
   UI Helpers
================================ */
.dif {
    background: none !important;
    color: #777 !important;
    border: 1px solid #777 !important;
}

.bx {
    background-color: #fff;
    padding: 0 20px;
    box-shadow: 0px 5px 4px rgba(0,0,0,.08);
}

/* Loader Spinner */
.loader {
    margin: auto;
    display: none;
    border: 16px solid #f3f3f3;
    border-top: 16px solid var(--main-color);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 2s linear infinite;
}

/* Pages Hidden by Default */
.pages {
    display: none;
}

/* Success Box */
.success {
    padding: 20px;
    border-radius: 5px;
    box-shadow: var(--boxShadow);
    background-color: #fff;
    border: 1px solid #ddd;
    width: 400px;
    margin: 100px auto;
    position: relative;
}

.success img {
    width: 65px;
    position: absolute;
    top: -34px;
    left: calc(50% - 30px);
}

.success h4 {
    color: #777;
    font-size: 20px;
    margin-top: 20px;
}

/* Verification Box */
.verify {
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0px 20px 20px -12px #ccc;
    border: 1px solid #eee;
    background-color: #fff;
    margin: 10px 0px;
}

.verify input {
    border-radius: 10px;
    border: 1px solid #555;
    margin-bottom: 10px;
    width: 70px;
    padding: 7px;
    text-align: center;
    display: inline-block;
}
/* ================================
   Verify Inputs
================================ */
.verify input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Submit Button */
.verify input[type="submit"] {
    border: 1px solid var(--footerColor);
    background-color: var(--footerColor);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    border-radius: 30px;
    transition: all .3s ease-in-out;
    width: 115px;
    padding: 18px 22px;
    margin: 20px auto 10px auto;
    line-height: 0;
}

.verify input[type="submit"]:hover,
.verify input[type="submit"]:focus {
    background-color: var(--footerColor) !important;
    box-shadow: none !important;
}


/* ================================
   Side Percent Floating Box
================================ */
.percent {
    position: fixed;
    left: 0;
    top: 50%;
    background-color: #fff;
    z-index: 888;
    padding: 10px;
    border-radius: 0 25px 25px 0;
    box-shadow: 0px 2px 4px #ddd;
    cursor: pointer;
}

.percent img {
    width: 30px;
}


/* ================================
   Sign-in / Sign Options Popup
================================ */
#signSpan {
    display: inline-block;
    margin-left: 37px;
    margin-top: 4px;
    cursor: pointer;
}

.sign-options {
    position: absolute;
    text-align: center;
    top: 74px;
    width: 380px;
    background-color: #fff;
    z-index: 8888;
    left: 62px;
    border: 1px solid #eee;
    padding: 20px 25px 10px 25px;
    display: none;
    border-radius: 10px;
}

/* FIXED: mainColor2 لم يكن موجود → تم استبداله بـ main-color */
.sign-options::before {
    position: absolute;
    content: '';
    top: 22px;
    height: 79%;
    width: 1px;
    background-color: var(--main-color);
    left: 50%;
}

.sign-options p {
    font-size: 14px;
    margin: 23px 0;
    height: 20px;
    line-height: 1.5em;
    color: gray;
}

.sign-options h5 {
    color: #777;
    font-size: 16px;
    margin-top: 10px;
}

.sign-options a {
    background-color: var(--footerColor);
    color: #fff;
    font-size: 14px;
    padding: 9px 18px 11px;
    border-radius: 25px;
    margin: 5px auto;
    width: 108px;
    text-align: center;
    display: inline-block;
    transition: .3s ease-in-out;
}

.sign-options a:hover {
    opacity: .85;
}

/* ================================
   Forgot Password
================================ */
.forgotPass h5 {
    font-size: 16px;
    text-align: center;
    line-height: 1.4em;
}

#forgotPass input {
    border: 1px solid #ddd;
    border-radius: 25px;
    width: 100%;
    height: 48px;
    font-size: 14px;
    margin: 15px 0;
    padding: 10px 12px;
}

.forgotPass img.f {
    width: 110px;
}

.forgotPass .modal-header {
    padding-bottom: 0;
}

.forgotPass .modal-body {
    text-align: center;
    padding-top: 0;
}


/* ================================
   Sign Container
================================ */
.parent-sign {
    margin: 60px 0;
    background-color: #fff;
    box-shadow: 0px 0px 8px #ddd;
    border-radius: 10px;
    overflow: hidden;
}

/* Image Box */
.parent-sign .boxImg {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.parent-sign .boxImg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,.6);
}

.parent-sign .boxImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text on Image */
.parent-sign .text-title {
    position: absolute;
    top: 30%;
    left: 23%;
    transform: translate(-20%, -20%);
}

.parent-sign .text-title img {
    width: 140px;
    background-color: #fff;
    padding: 10px;
    border-radius: 14px;
    margin: 20px auto;
    display: block;
}

.parent-sign .text-title h3 {
    color: #fff;
    font-weight: bold;
}

/* Responsive Fix */
@media (max-width: 767px) {
    .parent-sign .text-title {
        top: 25%;
        left: 10%;
    }
}
@media (max-width: 768px) {

  .header {
    height: auto !important;
    min-height: 100vh;
    background-attachment: scroll !important;
    padding-bottom: 40px;
  }

  .header .overlay .content {
    margin-top: 40px;
  }

  .header form {
    margin: 20px 10px;
    padding: 20px 15px;
  }
}


/* ================================
   Sign Form
================================ */
.sign {
    padding: 25px;
}

.sign .icon-sign {
    background-color: #fff;
    width: 80px;
    height: 80px;
    margin: auto auto 13px;
    border-radius: 50%;
    box-shadow: 0px 0px 8px #ccc;
    padding-top: 12px;
    border: 1px solid #ddd;
}

.sign .icon-sign img {
    width: 50px;
    margin: auto;
    display: block;
}

/* Inputs */
.sign input {
    font-size: 13px;
    height: 43px;
    margin: 10px 0;
}

/* Labels */
.sign label {
    font-weight: bold;
    color: var(--sub-color);
}

/* Focus */
.sign input:focus,
.sign .submit:focus {
    outline: none !important;
    border-color: var(--sub-color);
    box-shadow: none !important;
}

/* Links */
.sign a {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 13px 0;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    position: relative;
}

.sign a i {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 17px;
}

/* Submit Button */
.sign .submit {
    background-color: var(--sub-color);
    padding: 13px 0;
    color: #fff;
    width: 100%;
    font-size: 14px;
    margin: 20px 0 10px 0;
    border: none;
    border-radius: 4px;
    transition: .3s ease-in-out;
    box-shadow: 0 4px 8px #ccc;
}

.sign .submit:hover {
    background-color: #fff;
    color: var(--sub-color);
    border: 1px solid #ccc;
}

/* Sub text */
.sign .span {
    color: #777;
}

.sign h6 {
    display: inline-block;
    padding-right: 6px;
    color: #777;
}


/* Holder */
.holder {
    position: relative;
    overflow: hidden;
}

/* Navbar */
nav {
    direction: rtl;
    background-color: #fff;
    padding-bottom: 0;
}

nav .navbar-nav {
    padding-right: 4px;
}

nav .navbar-light .navbar-nav .active > .nav-link {
    color: #fff !important;
}

.navbar-nav .nav-link {
    font-size: 17px;
    color: #333;
    cursor: pointer;
    transition: .3s ease-in-out;
    position: relative;
    margin-right: 7px;
}

/* Underline Hover */
.navbar .nav-link::before {
    content: '';
    position: absolute;
    bottom: -12px;
    right: 0;
    background-color: var(--main-color);
    transition: width .3s ease-in-out;
    width: 0;
    height: 3px;
    border-radius: 25px;
}

.navbar .nav-link:hover::before {
    width: 100%;
}

/* Dropdown */
.navbar-nav .dropdown-menu {
    text-align: right;
    top: 40px !important;
}

.navbar-nav .dropdown-item {
    padding: 5px !important;
    transition: .3s ease-in-out;
}

.dropdown-toggle::after {
    margin-right: .255em;
}

/* Brand */
.navbar-light .navbar-brand {
    color: rgb(225,116,12);
    font-size: 30px;
    letter-spacing: .2em;
    font-weight: bold;
}

/* Sign-in link */
.navbar .sign {
    float: left;
}

.navbar .sign a {
    text-decoration: none;
    color: #777 !important;
    font-weight: bold;
}

/* English Button */
nav .en {
    background-color: var(--main-color);
    color: #fff !important;
    transition: .3s ease-in-out;
    border-radius: 25px;
    padding: 5px 10px 9px !important;
    margin-top: 4px;
}

/* Navigation small menu */
.navbar .navigation {
    position: absolute;
    top: 15px;
}

.navbar .navigation li {
    display: inline-block;
    margin-left: 16px;
    font-size: 14px;
    cursor: pointer;
}

/* Header */
.header {
    height: 600px;
    background: url('../images/header.jpg') center/cover no-repeat;
    background-attachment: fixed;
    position: relative;
}

/* Fix for mobile – disable fixed because iOS breaks it */
@media (max-width: 768px) {
    .header {
        background-attachment: scroll !important;
    }
}

.header .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    top: 0;
    right: 0;
    transition: .3s ease-in-out;
}

.header .overlay .content {
    margin-top: 110px;
    text-align: right;
}

.header .overlay .content h1,
.header .overlay .content h4 {
    color: #fff;
}

/* Booking Form Inside Header */
.header form {
    background-color: #fff;
    padding: 40px 20px;
    margin: 70px 10px 20px;
    border-radius: 10px;
}

.header form h4 {
    text-align: center;
    color: #fff;
    margin: 5px 0 25px;
}

.header form .form-control {
    margin: 10px auto;
    padding-right: 10px !important;
    height: 44px;
    background: #f1f2f6;
}

.header form label {
    text-align: right !important;
    color: #333;
    margin: 10px 0;
    display: block;
}

.header form button {
    margin-top: 45px;
    border-radius: 25px;
    padding-bottom: 8px;
    font-size: 15px;
}
@media (max-width: 576px) {

  .btns {
    width: 100%;
    margin: 10px auto 25px;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    gap: 10px;
    justify-content: center;
  }

  .btns button {
    width: 48%;
    margin: 0 !important;
    font-size: 14px;
  }
}

/* Dropdown */
#chooseBus .dropdown {
    width: 100%;
}

#chooseBus .dropdown-parent .dropdown-link:after {
    transform: rotate(180deg);
    left: 20px;
    right: unset;
}

#chooseBus .dropdown-item {
    text-align: right;
}

#chooseBus .dropdown-selected .dropdown-link {
    background: var(--sub-color);
    color: #fff;
}

#chooseBus .dropdown-toggle {
    border: 1px solid #ced4da;
    width: 100%;
    border-radius: 4px;
    box-shadow: none;
    background: #f1f2f6 !important;
}

#chooseBus .dropdown-toggle::after {
    left: 10px;
    top: 20px;
    position: absolute;
    color: #777;
}

#chooseBus .dropdown-toggle .dropdown-icon {
    display: none;
}

/* Counter */
.count {
    margin-top: 13px;
    padding: 0;
    text-align: right;
}

.count li {
    display: inline-block;
}

.count .change-cart {
    background: #fff;
    color: #6c757d;
    border: 1px solid #ddd;
    font-size: 21px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    padding-top: 1px;
    text-align: center;
    cursor: pointer;
}

.header .count .change-cart {
    background: #f1f2f6;
}

.count .change-cart:hover,
.count .change-cart:focus {
    background: #fff !important;
}

.count input.cart-amount {
    width: 36px;
    background: none;
    text-align: center;
    font-size: 16px;
    border: none;
}
@media (max-width: 576px) {

  #chooseBus .row {
    row-gap: 12px;
  }

  #chooseBus label {
    font-size: 13px;
  }

  #chooseBus .form-control,
  #chooseBus .dropdown-toggle {
    height: 42px;
    font-size: 14px;
  }

  #chooseBus button[type="submit"] {
    width: 100%;
    margin-top: 10px;
  }
}

/* Buttons Container */
.btns {
    margin: -80px auto 40px;
    background: #f1f2f6;
    width: 500px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.btns button {
    background: none;
    border: 1px solid var(--sub-color);
    width: 140px;
    padding: 7px;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    margin: auto 10px !important;
    transition: .3s ease-in-out;
}

.btns button.actBtn {
    background-color: var(--sub-color);
    color: #fff;
    border-color: transparent;
}

/* Back Button */
.back {
    display: none;
    position: relative;
}

.back i.fa-times {
    position: absolute;
    left: 0;
    top: 7px;
    font-size: 14px;
    color: #777;
    cursor: pointer;
}
/* ================================
   Fix Direction Buttons – Mobile
================================ */

@media (max-width: 576px) {

  .btns {
    width: 100% !important;
    margin: 15px auto 25px !important;
    padding: 12px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
  }

  .btns button {
    width: 50%;
    padding: 10px 0;
    font-size: 14px;
    border-radius: 25px;
    margin: 0 !important;
  }
}


/* start about */
/* -------------------------
   About Section
-------------------------- */
.about {
    padding: 40px 0;
}

.about .holder {
    background-color: #fff;
    box-shadow: 0px 20px 14px -12px #eee;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #eee;
    padding: 20px 25px;
}

/* Image */
.about .image {
    text-align: center;
    overflow: hidden;
}

.about .image img {
    width: 100%;
    margin: auto;
    display: block;
}

/* Text Block */
.about .text {
    margin-top: 65px;
}

.about .text h4 {
    color: var(--main-color);
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--main-color);
}

.about .text p {
    line-height: 1.7em;
    color: #777;
    font-size: 15px;
    margin: 15px 0;
}

/* Play icon */
.about .play {
    width: 40px;
    height: 40px;
    margin: 20px 0;
    cursor: pointer;
}

/* Highlighted text */
.about span {
    display: inline-block;
    color: var(--main-color);
    font-weight: bold;
}

/* Responsive Fix */
@media (max-width: 768px) {
    .about .text {
        margin-top: 25px;
    }
}

/* End about */

/* safety */
/* -------------------------
   Safety Section
-------------------------- */
.safety {
    padding: 40px 0;
    background-color: var(--bgColor);
    margin-bottom: 40px;
    box-shadow: var(--boxShadow);
}

.img-holder {
    overflow: hidden;
    margin-bottom: 20px;
}

.img-holder img {
    width: 100%;
    display: block;
}

/* -------------------------
   Services Section
-------------------------- */
.services {
    padding: 100px 0 40px;
}

.services h3 {
    margin: 0 0 30px;
}

.services .serv {
    border-radius: 5px;
    margin: 10px 0;
    background-color: #fff;
    overflow: hidden;
    padding: 25px 20px;
    box-shadow: 0px 4px 8px #ddd;
    transition: all 0.3s ease-in-out;
}

/* Hide services on very small screens */
@media (max-width: 480px) {
    .services {
        display: none;
    }
}

.services .serv img {
    width: 70px;
    margin-bottom: 15px;
    opacity: 0.6;
}

.services .serv h5 {
    color: var(--main-color);
    font-weight: bold;
    margin: 0 0 20px;
    font-size: 17px;
}

.services .serv p {
    color: #777;
    line-height: 1.6;
}

/* Button */
.services .serv a {
    border: none;
    border-radius: 25px;
    padding: 10px 19px 11px;
    background-color: var(--footerColor);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

.services .serv a:hover {
    color: #fff !important;
    opacity: 0.9;
}

.services .serv a i {
    font-size: 10px;
}

/* End safety */

/* start travel */
/* -------------------------
   Travel Section
-------------------------- */
.travel {
    padding: 50px 0;
}

/* background of pages inside travel */
.travel .pages {
    background: #777;
}

/* Links on the left sidebar */
.travel .links {
    margin-top: 40px;
}

.travel .links a {
    color: #fff !important;
    display: block;
    margin: 20px 0;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.travel .links a i {
    color: #efd01c;
}

/* Main Tabs Navigation */
.main {
    padding: 0;
    margin: 30px 0;
    text-align: center;
}

.main li {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--footerColor);
    color: var(--footerColor);
    background: transparent;
    border-radius: 0;
    transition: all 0.3s ease-in-out;
}

.main li:hover,
.main li.active {
    background: var(--main-color);
    color: #fff;
    border-radius: 5px;
}

.main li.active {
    border-bottom: 0;
}

/* Responsive Fix - better than hiding whole travel section */
@media (max-width: 480px) {

    /* Reduce spacing */
    .travel {
        padding: 20px 0;
    }

    /* Stack items */
    .main li {
        margin: 5px;
        display: inline-block;
        padding: 8px 12px;
        font-size: 14px;
    }

    /* Make links smaller */
    .travel .links a {
        margin: 12px 0;
        font-size: 14px;
    }
}

/* -------------------------
   Direction Arrow Banner
-------------------------- */
.direction {
    position: relative;
    overflow: hidden;
}

.direction .arrows {
    position: absolute;
    right: 0;
    top: 0;
    background-color: var(--main-color);
    color: #fff;
    width: 185px;
    height: 106px;
    padding: 14px 0 14px 45px;
    font-weight: bold;
    font-size: 19px;
    line-height: 4.3em;
    clip-path: polygon(48% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.direction .arrows i {
    font-size: 15px;
}

/* -------------------------
   My Trips Table
-------------------------- */
#myTrips {
    background-color: #fff;
    border: 1px solid #eee;
    padding: 0 10px;
    box-shadow: 0px 3px 6px #eee;
    margin: 37px 0 70px;
    display: table;
    width: 100%;
}

#myTrips thead th {
    background: #777;
    color: #fff;
    font-weight: normal;
    text-align: center;
}

#myTrips td {
    vertical-align: middle !important;
    text-align: center;
}

#myTrips .cat {
    background-color: #777;
    color: #fff;
    border-radius: 25px;
    padding: 7px 15px;
    font-size: 13px;
    display: inline-block;
}

#myTrips i.fa-arrow-left {
    font-size: 12px;
    margin: 0 4px;
}

/* -------------------------
   Section Title (h2)
-------------------------- */
h2.Title {
    color: #666;
    position: relative;
    margin: 40px 0;
    text-align: center;
}

h2.Title::before,
h2.Title::after {
    position: absolute;
    content: '';
    top: 44px;
    width: 60px;
    height: 3px;
    background-color: var(--sub-color);
    border-radius: 20px;
}

h2.Title::before {
    left: 36%;
}

h2.Title::after {
    right: 36%;
}

h2.Title img {
    width: 40px;
}

/* -------------------------
   No Trips Message
-------------------------- */
.noTrips {
    width: 470px;
    max-width: 95%;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px #ddd;
    margin: 20px auto;
    text-align: center;
}

.noTrips h4 {
    margin: 15px 0;
}

.noTrips a {
    background-color: var(--sub-color);
    color: #fff;
    padding: 8px 27px 12px;
    border-radius: 25px;
    margin: 8px 0;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0px 0px 4px var(--sub-color);
}

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

    .direction .arrows {
        width: 150px;
        height: 85px;
        font-size: 16px;
        line-height: 3.2em;
        padding-left: 30px;
    }

    h2.Title::before {
        left: 25%;
    }
    h2.Title::after {
        right: 25%;
    }

    #myTrips {
        padding: 0;
        box-shadow: none;
    }

    .noTrips {
        width: 100%;
        padding: 15px;
    }
}

/* End my trips */

/* destinations */
/* -------------------------
   Destinations Section
-------------------------- */
.destinations {
    padding: 40px 0;
    margin: 20px 0;
}

/* Section Title */
.destinations h2 {
    color: #666;
    position: relative;
    margin-bottom: 40px;
    text-align: center;
}

.destinations h2::before,
.destinations h2::after {
    position: absolute;
    content: '';
    top: 44px;
    width: 60px;
    height: 3px;
    background-color: var(--sub-color);
    border-radius: 20px;
}

.destinations h2::before {
    left: 36%;
}

.destinations h2::after {
    right: 36%;
}

.destinations h2 img {
    width: 40px;
}

/* Destination Cards */
.destinations .area {
    margin: 20px 0;
    position: relative;
    border-radius: 7px;
    padding: 20px;
    transition: all 0.4s ease-in-out;
    background-color: #fdfdfd;
    box-shadow: 0px 0px 8px #ddd;
}

.destinations .area .img-over {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0px 38px 5px -35px #888;
}

.destinations .area img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

.destinations .area:hover img {
    transform: scale(1.1);
}

/* Text inside card */
.destinations .area p {
    font-size: 20px;
    margin: 14px;
    color: #c7ae1b;
    font-weight: bolder;
}

/* Button Tag */
.destinations .area span {
    background-color: var(--sub-color);
    color: #fff;
    padding: 7px 40px;
    margin: 5px;
    display: inline-block;
    border-radius: 6px;
    box-shadow: 0px 0px 4px #ccc;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.destinations .area span::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background-color: rgba(255, 218, 0, 0.17);
    transition: height 0.3s ease-in-out;
}

.destinations .area:hover span::before {
    height: 100%;
}

/* -------------------------
   Responsive
-------------------------- */
@media (max-width: 768px) {
    .destinations .area p {
        font-size: 17px;
        margin: 10px 0;
    }

    .destinations .area img {
        height: 180px;
    }

    .destinations h2::before {
        left: 28%;
    }

    .destinations h2::after {
        right: 28%;
    }
}

@media (max-width: 480px) {
    .destinations .area {
        padding: 15px;
        margin: 15px 0;
    }

    .destinations .area img {
        height: 150px;
    }

    .destinations h2::before,
    .destinations h2::after {
        width: 40px;
        top: 38px;
    }

    .destinations h2::before {
        left: 25%;
    }

    .destinations h2::after {
        right: 25%;
    }
}

/* destinations */


/* app */
/* -------------------------
   App Section
-------------------------- */
.app {
    padding: 50px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../images/white bus.jpg'); /* fixed path */
    position: relative;
}

/* Overlay */
.app .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
    top: 0;
    right: 0;
    transition: all .3s ease-in-out;
}

.app h3 {
    color: #fff;
}

/* Download buttons */
.app .content a img {
    width: 175px;
    height: 55px;
    margin-left: 5px;
    border-radius: 7px;
}

/* Paragraph */
.app .content p {
    padding: 10px;
    font-size: 17px;
    line-height: 1.6em;
    color: #ffffffc9;
    margin: 20px 0;
}

/* -------------------------
   Responsive: Hide section & footer
-------------------------- */
@media (max-width: 480px) {

    /* Hide the app section */
    .app {
        display: none !important;
    }

    /* Hide footer as requested */
    footer,
    .footer,
    #footer {
        display: none !important;
    }
}

/* End app */

/* categories */
/* -------------------------
   Categories Section
-------------------------- */
.categories {
    padding: 50px 0;
    background-color: var(--bgColor);
    position: relative;
}

/* Owl Carousel Navigation */
.categories .owl-carousel .owl-nav.disabled {
    display: block !important;
}

.categories .owl-carousel .owl-nav button {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background-color: var(--main-color);
    color: #fff;
    height: 50px;
    width: 50px;
    border-radius: 10px;
    font-size: 40px;
    line-height: 0.5em;
    box-shadow: 0px 0px 8px var(--main-color);
    transition: all .2s ease-in-out;
}

.categories .owl-carousel .owl-nav button span {
    position: absolute;
    top: 7px;
    left: 17px;
}

.categories .owl-carousel .owl-nav button:focus {
    outline: none;
}

.categories .owl-carousel .owl-nav .owl-prev {
    right: -60px;
}

.categories .owl-carousel .owl-nav .owl-next {
    left: -60px;
}

.categories .owl-carousel .owl-nav button:hover {
    background-color: #d3b217;
}

/* Item Card */
.categories .item {
    padding: 15px 0;
}

.categories .card {
    border: 0;
    height: 330px;
    border-radius: 12px;
    box-shadow: 0px 4px 8px #ddd;
    position: relative;
    margin-bottom: 35px;
    overflow: hidden;
    background-color: #fff;
    transition: all .3s ease-in-out;
}

.categories .card:hover {
    box-shadow: 0px 6px 14px #ccc;
    transform: translateY(-3px);
}

/* Rating overlay */
.average {
    position: absolute;
    bottom: -25px;
    left: 10%;
    width: 200px;
    padding: 5px 10px;
    text-align: center;
    background-color: #eee;
    border: 1px solid var(--main-color);
    border-radius: 6px;
}

.average h5 {
    direction: rtl;
}

/* Card image */
.categories .card .card-img-top {
    height: 190px;
    object-fit: cover;
}

/* Card body */
.categories .card-body {
    padding-top: 7px;
}

.categories .card-body small {
    display: inline-block;
    margin-bottom: 7px;
    color: #777;
}

.categories .card-body b {
    color: var(--main-color);
    margin: 10px 0;
    display: inline-block;
}

.categories .card-body h5 {
    font-size: 14px;
}

/* Icons list */
.categories .card ul {
    padding-right: 0;
    margin-bottom: 0;
    text-align: center;
}

.categories .card ul li {
    display: inline-block;
    margin-left: 5px;
    padding: 5px 5px 5px 0;
}

.categories .card ul li img {
    width: 19px;
}

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

    .categories .owl-carousel .owl-nav .owl-prev {
        right: -25px;
    }

    .categories .owl-carousel .owl-nav .owl-next {
        left: -25px;
    }

    .categories .card {
        height: auto;
    }

    .categories .card .card-img-top {
        height: 160px;
    }
}

@media (max-width: 480px) {

    /* Make it mobile-friendly instead of hiding completely */
    .categories {
        padding: 30px 0;
    }

    .categories .owl-carousel .owl-nav button {
        height: 40px;
        width: 40px;
        font-size: 30px;
    }

    .categories .owl-carousel .owl-nav .owl-prev {
        right: -15px;
    }

    .categories .owl-carousel .owl-nav .owl-next {
        left: -15px;
    }

    .average {
        bottom: -20px;
        width: 150px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* End categories */

/* start arrival time */
/* ============================================
   Arrival Time – Search Summary + Edit Form
============================================ */
.arrivalTime .timeLine,
.arrivalTime .editSearch {
    padding: 20px 15px;
    background-color: #fff;
    box-shadow: 0 4px 8px #ddd;
    margin-bottom: 20px;
    border-radius: 6px;
}

.arrivalTime .timeLine {
    margin: 15px 0;
}

/* Edit Search Panel */
.arrivalTime .editSearch {
    position: relative;
    display: none;
}

.arrivalTime .editSearch .fa-times {
    position: absolute;
    left: 15px;
    top: 15px;
    cursor: pointer;
    font-size: 18px;
    z-index: 4;
}

.arrivalTime .editSearch .quantity__input {
    width: 66px;
}

.arrivalTime .editSearch label {
    margin-bottom: 1rem;
}

.arrivalTime .editSearch button {
    margin-top: 38px;
}

.arrivalTime .editSearch select {
    padding: 0px 5px;
}

/* ============================================
   Trip Details Boxes
============================================ */
.arrivalTime strong {
    display: block;
    margin-bottom: 10px;
}

.arrivalTime .details .filteration,
.arrivalTime .details .direction,
.arrivalTime .details .ticket,
.tripDetails,
.booking .chair,
.booking .user,
.booking .e-pay {
    padding: 20px 15px;
    background-color: #fff;
    box-shadow: 0 4px 8px #ddd;
    margin-bottom: 20px;
    border-radius: 6px;
}

/* Icons inside the info boxes */
.arrivalTime .details .direction img {
    width: 30px;
    margin: 20px auto;
}

.arrivalTime .details .direction h4 {
    font-weight: bold;
    font-size: 17px;
}

/* Ticket icon */
.arrivalTime .details .ticket img {
    width: 45px;
    margin: 0 auto 10px auto;
}

/* ============================================
   Trip Times – Choose Trip Buttons
============================================ */
.arrivalTime .tripTime {
    padding: 20px 0;
}

.arrivalTime .tripTime .chooseTrip,
.arrivalTime .tripTime .choose,
.arrivalTime .tripTime .delete {
    background-color: var(--main-color);
    border: none;
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 5px;
    transition: 0.2s ease-in-out;
}

.arrivalTime .tripTime .chooseTrip:hover,
.arrivalTime .tripTime .choose:hover {
    opacity: 0.85;
}

.arrivalTime .tripTime .b {
    font-size: 12px;
    background-color: #aaa;
    color: #fff;
    padding: 5px 10px;
    border-radius: 18px;
    cursor: pointer;
    margin-top: 20px;
    display: block;
    text-align: center !important;
}

.arrivalTime .tripTime h6 {
    margin: 0 0 10px;
}

/* ============================================
   Trip Details Section
============================================ */
.tripDetails img {
    width: 27px;
    margin: 10px auto;
}

.tripDetails span {
    color: #17a2b8;
    font-weight: bold;
}

.tripDetails button {
    background-color: #dc3545;
    border: none;
    width: 100%;
    padding: 7px 10px;
    cursor: pointer;
    border-radius: 3px;
    text-align: center !important;
    color: #fff;
    transition: 0.2s ease-in-out;
}

.tripDetails button:hover {
    opacity: 0.85;
}

.tripDetails h6 {
    margin: 10px 0;
}

.tripDetails h5 {
    font-size: 16px;
}

/* ============================================
   No Trips (search empty)
============================================ */
.arrivalTime .noTrips p {
    font-weight: bold;
}

.arrivalTime .noTrips button {
    background: none;
    border: none;
    color: #17a2b8;
    text-decoration: underline;
    cursor: pointer;
}

/* ============================================
   Modal – Share Ticket
============================================ */
.modal .modal-body a {
    display: block;
    margin-bottom: 25px;
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    color: #fff !important;
    text-align: center !important;
    padding: 13px 0;
    font-size: 14px;
    box-shadow: 0 4px 8px #ccc;
}

.modal .modal-body .envelope {
    background-color: orange;
}

.modal .modal-body .facebook {
    background-color: #004085;
}

.modal .modal-body h5 {
    display: block;
    margin: 10px 0 20px;
    font-size: 15px;
    text-align: center;
}

.modal .modal-body .new {
    box-shadow: none;
    color: #007bff !important;
}

.modal .modal-header {
    border: none !important;
}

.modal .modal-body h4 {
    text-align: center;
    margin-bottom: 17px;
}

/* ============================================
   Buses Page General Styling
============================================ */
.bus {
    padding: 50px 0;
    margin: 30px 0;
}

.box {
    padding: 40px 10px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 4px #ddd;
}

.image {
    overflow: hidden;
    text-align: center;
}

.image img {
    width: 100%;
}

/* Bus info text */
.busInfo h3 {
    color: var(--mainColor);
}

.busInfo h5 {
    font-size: 22px;
    display: inline-block;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.busInfo p {
    font-size: 17px;
    color: #777;
    padding: 10px 0 10px 15px;
    line-height: 1.4em;
    margin-bottom: 40px;
}

/* End buses */

/* booking */
/* ============================================
   Booking (chairs + user + payment)
============================================ */
.booking h4 {
    color: var(--sub-color);
    font-size: 20px;
}

/* User Image Box */
.booking .user img {
    width: 70px;
    background-color: #eee;
    border-radius: 10px;
    margin: auto;
}

.booking .user ul {
    padding-right: 0;
    list-style: none;
}

/* Chair Buttons */
.booking .chair button {
    border: none;
    transform: rotate(-90deg);
    width: 30px;
    height: 30px;
    padding: 0;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    background-color: #ddd;
    color: #777;
    margin: 0 1px;
    transition: 0.3s ease-in-out;
}

.booking .chair button:hover {
    background-color: #ccc;
}

/* Reserved seat */
.booking .chair button.reserved {
    background-color: var(--sub-color);
    color: #fff;
}

/* Text around chairs */
.booking .chair h5 {
    font-size: 18px;
}

.booking .chair strong {
    display: block;
    margin-bottom: 8px;
}

/* E-Payment */
.booking .e-pay label {
    display: block;
    cursor: pointer;
}

.booking .e-pay label img {
    width: 80px;
}

/* ============================================
   Manage Booking
============================================ */
.manage-booking {
    margin: 40px 0;
    padding: 40px;
    background-color: #fff;
    box-shadow: 0 2px 4px #eee;
}

/* Left menu */
.manage-booking ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.manage-booking ul li {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    background-color: #eeeeee6e;
    cursor: pointer;
    transition: 0.3s;
}

/* Active item */
.manage-booking ul li.active,
.manage-booking ul li:hover {
    background-color: #efd01c;
    color: #fff;
}

/* Form box */
.manage-booking form {
    background-color: #fff;
    box-shadow: 0 2px 4px #eee;
    padding: 20px;
}

/* Inputs + labels */
.manage-booking form input,
.manage-booking form label,
.manage-booking form select {
    display: block;
    margin: 15px 0;
}

/* Input style */
.manage-booking form input {
    width: 60%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #eee;
    border-radius: 7px;
}

/* Select */
.manage-booking form select {
    width: 60%;
    height: 40px;
    border: 1px solid #eee;
    cursor: pointer;
}

.manage-booking form select::-ms-expand {
    background: #efd01c;
}

/* Focus */
.manage-booking form input:focus,
.manage-booking form select:focus {
    outline: none;
    border-color: #ccc;
}

/* Submit button */
.manage-booking form button {
    border: none;
    border-radius: 7px;
    padding: 10px 19px 11px;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    background-color: var(--footerColor);
}

/* Hidden form (tabs) */
.form {
    display: none;
}

/* End manage booking */

/* contact */
.contact {padding: 50px 0px;}

.contact form , .contact-list , .map{
  padding: 20px;
  box-shadow:#dddddd52 25px 37px 20px -9px;
  border-radius:25px 0px 25px 25px;
  background-color: #fff;
  margin: 20px 0px;
  border: 1px solid #eeeeee38;
}
.contact form input , .contact form textarea
{
  background: none;
  border: 1px solid #eee;
}
.contact form input:focus , .contact form textarea:focus 
{
  box-shadow: none;
  outline: none;
}
.contact form label , .contact form input , .contact form textarea {margin: 7px 0px;}
.contact form button {
  background-color: var(--footerColor);
  padding: 7px 20px 9px 20px;
  color: #fff;
  box-shadow: 0px 0px 4px 0px #fff;
  cursor: pointer;
  border: none;
  display: inline-block;
  border-radius: 25px 0px 25px 25px;
  margin: 10px 0px;
}
.contact-list li {
  margin: 8px 0px;
}
.contact-list li i {color: var(--main-color);height: 20px;width: 20px;}

/* footer */
footer {
/* ============================================
   Footer Styling
============================================ */
footer {
    background-color: var(--footerColor);
    padding: 40px 20px 5px 20px;
    color: #fff;
}

/* Footer Title */
footer h5 {
    color: #fff;
    display: inline-block;
    border-bottom: 1px solid #fbfbfb;
    padding-bottom: 3px;
    margin-bottom: 20px;
    font-size: 17px;
}

/* Footer Links */
footer ul.site {
    padding: 0;
    margin: 0;
    list-style: none;
}

footer ul.site li {
    display: inline-block;
    margin-right: 10px;
}

footer ul.site li a {
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
}

/* Copyright */
footer .copyright span {
    color: #fff;
}

/* Social Icons */
footer .social {
    text-align: center;
    margin-bottom: 20px;
}

footer .social a {
    display: inline-block;
    padding: 6px;
    font-size: 18px;
    color: var(--footerColor);
    background-color: #fff;
    border-radius: 1px 50% 50% 50%;
    margin: 0 2px 10px 2px;
    height: 40px;
    width: 40px;
    line-height: 29px;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
}

footer .social a:hover {
    background-color: #f2f2f2;
}

/* Hide footer on phone screens (like app section) */
@media (max-width: 480px) {
    footer {
        display: none !important;
    }
}


/* End footer */
/* ============================================
   Scroll Up Button
============================================ */
.scroll_up {
  position: fixed;
  text-align: center;
  cursor: pointer;
  z-index: 66;
  left: 30px;
  bottom: 40px;
  transition: all .3s ease-in-out;
}

.scroll_up i {
  display: none;
  color: #fff;
  padding: 11px 13px;
  font-size: 23px;
  height: 45px;
  width: 45px;
  background-color: var(--main-color);
  border-radius: 10px;
  box-shadow: 0px 0px 8px #efd01c;
}


/* ============================================
   Percent Section (Cards Modal)
============================================ */
#percent .col-md-4 { padding: 0; }
#percent .col-md-4 .card { margin: 0 5px 13px 4px;}

#percent .modal-body {
  padding: 1rem 2rem;
  height: 500px;
  overflow-y: scroll;
}

#percent .card {
  margin: 14px 0;
  overflow: hidden;
  box-shadow: 0 19px 38px rgba(0,0,0,.30),
              0 15px 12px rgba(0,0,0,.22);
}

#percent .card img { height: 160px; }

#percent .card-text {
  font-size: 15px;
  line-height: 1.4em;
  margin-bottom: 13px;
}

#percent .card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 50px 2px 0;
  background-color: #333333b5;
  text-align: center;
}

#percent .card-body a {
  display: inline-block;
  font-size: 16px;
  margin: 3px 0;
  padding: 6px 18px;
  box-shadow: none !important;
}

/* Modal Close Button */
#percent .close,
#percent .modal-header .close {
  position: absolute;
  margin: 10px;
  left: 7px;
  top: 7px;
  width: 40px;
  height: 40px;
  background: #333538;
  color: #fff;
  opacity: 1;
  border-radius: 50%;
  font-size: 27px;
  line-height: 40px;
  padding: 0 !important;
  transition: .3s;
}

/* Percent Ribbon */
.perc {
  position: absolute;
  top: 12px;
  left: -34px;
  width: 190px;
  height: 46px;
  padding-right: 20px;
  padding-top: 10px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background-color: #FBC212;
  color: #fff;
  transform: rotate(-35deg);
  z-index: 999;
}


/* ============================================
   Media Queries
============================================ */

/* Modal sizes for Bootstrap */
@media (min-width: 576px) {
  .modal-dialog { max-width: 730px; }
}

@media (max-width: 575px) {
  .modal-dialog { max-width: 400px; }

  .perc {
    height: 30px;
    font-size: 13px;
    padding-top: 6px;
    left: -42px;
  }
}

/* Hide Fixed Items on Large Screens */
@media (min-width: 768px) {
  .fixed-icon,
  .fixed-sidebar,
  .hidden-log {
    display: none;
  }
}

/* Phones & Small Tablets */
@media (max-width: 767px) {
  .rr { margin-right: 0 !important; }
  .arrows { display: none; }
  .arrivalTime .editSearch label { margin-top: 15px; }
  .manage-booking form input,
  .manage-booking form select { width: 100%; }

  .fixed-icon,
  .fixed-sidebar { display: block; }

  .hidden-log {
    position: absolute;
    left: 80px;
    top: 42px;
    display: block;
    color: #333 !important;
  }

  .busInfo { margin-top: 20px; }
  .travel .image-holder img { width: 100%; }

  .percent { bottom: 3%; top: unset; }

  .travel .main { display: block !important; }
}

/* Extra Small Screens (iPhone X, SE...) */
@media (max-width: 414px) {

  .btns { 
    width: auto; 
    padding: 20px 0; 
    margin: -80px 17px 40px; 
  }

  .btns button {
    width: auto;
    padding: 7px 10px;
    margin: 0 !important;
    font-size: 13px !important;
  }

  .noTrips { width: auto; }

  #chairs { zoom: 77%; }

  /* Category Slider */
  .categories .owl-carousel .owl-nav button.owl-prev,
  .categories .owl-carousel .owl-nav button.owl-next {
    display: none;
  }

  .categories .card {
    margin-right: 20px;
    margin-left: 20px;
  }

  .average { left: 16%; }

  /* Social Icons Alignment */
  .social { text-align: right !important; }
  .social a { text-align: center; }

  /* Hide Desktop Elements */
  .title::after, 
  .title::before { display: none; }

  .main {
    display: flex;
    overflow-y: scroll;
  }
}

/* Hide Percent Ribbon on Very Small Screens */
@media screen and (max-width: 480px) {
  .perc { display: none; }
}

.arrivalTime .timeLine p {
  font-size: 13px;
  color: #777;
  margin-bottom: 4px;
}

.arrivalTime .timeLine .info-value {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.arrivalTime .timeLine i {
  color: var(--main-color);
}