@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

/* Start Root */
:root {
    --main-bg-color: #000000;
    --padding-page: 3rem;
    --padding-top-page: 8rem;
}

/* *,
body,
html,
h1,
h2,
h3,
h4,
h5,
span,
p,
li,
button,
a {
    font-family: "Titillium Web", sans-serif;
} */

*,
html,
body {
    scrollbar-width: thin;
    scrollbar-color: black #fafbfd;
}

.page {
    padding-inline: 8rem;
}

.page-body {
    position: static !important;
}

.header_title {
    margin-bottom: 2rem;
}

.header_title h1 {
    font-size: 2.25rem;
    line-height: normal;
    color: var(--main-color);
}

/* End Root */

/* Start Web area */
.mobile_links_area {
    display: none;
}

.web_area {
    background-color: #ffffff;
}

.web_navbar {
    background-color: var(--main-bg-color);
    padding-block: 0.6rem;
    padding-inline: 7rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
}

.web_navbar .logo a {
    filter: brightness(0) invert(1);
}

.web_navbar .links_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.web_navbar .links_area .left_area {
    display: flex;
    align-items: center;
    gap: 3rem;
}


.web_navbar .links ul {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.web_navbar .auth_link ul {
    gap: 1rem;
}

.web_navbar .links ul li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    padding-inline: 1rem;
    padding-block: 0.6rem;
    border-radius: 30px;
    transition: all 0.2s ease-in-out;
}

.web_navbar .links ul li a:hover {
    background-color: #181e22;
}

.web_navbar .links ul li a svg {
    --aous-aw-icon-size: 1.4rem;
    stroke-width: 2;
}

.web_navbar .links ul li a.main_btn {
    background-color: white;
    color: var(--main-bg-color);
    border-radius: 30px;
}

.services {
    padding-top: var(--padding-top-page);
    padding-bottom: 3rem;
    padding-inline: var(--padding-page);
}

.services .cards .card_area {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    align-items: center;
    color: var(--main-color);
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 10px;
}

.services.single_service .cards .card_area {
    grid-template-columns: 3fr 0.5fr;
    gap: 1rem;
}

.services .cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
}

.services .cards .card_area .content_area .title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.services .cards .card_area .content_area .link_area {
    margin-top: 1.5rem;
    background: white;
    padding: 0.65rem 1rem;
    border-radius: 20px;
    width: max-content;
    font-weight: 600;
}

.services .cards .card_area .content_area .link_area svg {
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s ease-in-out;
}

.services .cards .card_area:hover .content_area .link_area svg {
    transform: translateX(0);
    opacity: 1;
}

.services.single_service .cards .card_area .img_area svg {
    --aous-aw-icon-size: 3.5rem;
}

.services .cards .card_area .img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lending_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7rem;
    margin-block: 10rem;
    margin-inline: 1rem;
    padding-inline: var(--padding-page);
}

.lending_info .text_content,
.lending_info .image_content {
    flex: 1;
}

.lending_info .text_content h1 {
    font-size: 2.5rem;
    line-height: normal;
}

.lending_info .text_content span {
    display: block;
    font-size: 1.1rem;
    margin-top: 2rem;
}

.lending_info .text_content a {
    margin-top: 1rem;
    display: inline-block;
    color: var(--main-color);
    font-size: 1.1rem;
}

.lending_info .text_content a.main_btn {
    color: white;
    padding-inline: 1.25rem;
    padding-block: 0.95rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2rem;
    display: block;
    width: fit-content;
}

.lending_info .image_content {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
}

.lending_info .image_content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-25deg, #000000b6, transparent);
}

.lending_info .image_content img {
    object-fit: cover;
    height: 27rem;
    width: 100%;
}

.services.single_service .service_faqs {
    margin-top: 6rem;
}

.services.single_service .service_faqs .accordion-flush .accordion-item .accordion-button,
.services.single_service .service_faqs .accordion-flush .accordion-item .accordion-button.collapsed {
    padding-left: 0;
    font-size: 1rem;
    color: var(--main-bg-color);
    font-weight: 500;
}

.services.single_service .service_faqs .accordion-body {
    padding-left: 0;
}

.services.single_service .service_faqs .accordion-button:after {
    opacity: 1;
}

/* End Web area */

/* Start Hero */
.hero_area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-bottom: 4rem;
    padding-top: var(--padding-top-page);
    padding-inline: var(--padding-page);
}

.hero_area .map_content #map {
    height: 65vh;
}

.hero_area .form_content {
    padding-top: 4rem;
    width: 85%;
}

.hero_area .form_content .text_content {
    margin-bottom: 2rem;
}

.hero_area .form_content .text_content h1 {
    font-size: 3rem;
    line-height: normal;
    font-weight: 700;
}

.hero_area .form_content .text_content p {
    font-size: 1rem;
}

.hero_area .form_control_area {
    position: relative;
}

.hero_area .form_control_area .form_control_content {
    margin-bottom: 0.75rem;
}

.hero_area .form_control_area .line_location {
    position: absolute;
    width: 1px;
    height: 45px;
    background-color: black;
    top: 35px;
    left: 20px;
    z-index: 9;
}

.hero_area .form_control_area .line_location::before,
.hero_area .form_control_area .line_location::after {
    content: '';
    position: absolute;
    height: 0.6rem;
    width: 0.6rem;
    background-color: black;
}

.hero_area .form_control_area .line_location::before {
    top: -15px;
    left: -4px;
    border-radius: 50%;
}

.hero_area .form_control_area .line_location::after {
    bottom: -15px;
    left: -4px;
}

html[dir="rtl"] .hero_area .form_control_area .line_location {
    left: unset;
    right: 16px;
}

body.theme-dark .hero_area .form_control_area .line_location,
body.theme-dark .hero_area .form_control_area .line_location::before,
body.theme-dark .hero_area .form_control_area .line_location::after {
    background-color: white;
}

.hero_area .form_control_area .form_control_content .tom_select .ts-control {
    padding-left: 2.5rem;
    padding-block: 1.1rem;
    background: #f5f5f5;
    border-color: transparent;
}

.hero_area .form_control_area .form_control_content .tom_select .ts-control::after {
    display: none;
}

body.theme-dark .hero_area .form_control_area .form_control_content .tom_select .ts-control {
    background-color: #181e22;
}

html[dir="rtl"] .hero_area .form_control_area .form_control_content .tom_select .ts-control {
    padding-left: unset;
    padding-right: 2rem !important;
}

.hero_area .form_control_area .form_control_content .tom_select .ts-control .item {
    font-size: 0.95rem;
}

.hero_area .form_content .btn_hero_action {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.hero_area .form_content .btn_hero_action button {
    padding-block: 0.75rem;
    min-width: 10rem;
}

.hero_area .form_content .btn_hero_action a {
    font-size: 1rem;
    color: var(--main-color);
    font-weight: 500;
}

.hero_area .form_content .btn_hero_action a svg {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-5px);
    --aous-aw-icon-size: 1.35rem;
    transition: all 0.3s ease-in-out;
}

html[dir="rtl"] .hero_area .form_content .btn_hero_action a svg {
    rotate: 180deg;
}

.hero_area .form_content .btn_hero_action a:hover svg {
    visibility: visible;
    opacity: 1;
    transform: translateX(2px);
}


/* End Hero */

/* Start Footer */
.web_footer {
    background-color: var(--main-bg-color);
    padding-inline: 8rem;
    padding-top: 5rem;
    padding-bottom: 2rem;
}

.web_footer .company_name {
    margin-bottom: 2.5rem;
}

.web_footer .company_name h1 {
    color: white;
    margin-bottom: 1rem;
}

.web_footer .company_name a {
    color: white;
}

.web_footer .sections_card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.web_footer .section_content .section_title {
    display: block;
    font-size: 1.25rem;
    color: white;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.web_footer .section_content ul {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.web_footer .section_content ul li a {
    color: white;
    font-weight: 500;
    font-size: 1rem;
}

.web_footer .section_content ul li a:hover {
    color: #b6b5b5;
}

.web_footer .other_links {
    padding-top: 4.5rem;
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
}

.web_footer .other_links .social_media ul {
    display: flex;
    gap: 1rem;
}

.web_footer .other_links .social_media ul li a {
    color: white;
    font-weight: 500;
}

.web_footer .other_links .social_media ul li a svg {
    --aous-aw-icon-size: 1.75rem;
}

.web_footer .other_links .language_links ul li a {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.web_footer .other_links .language_links ul li a svg {
    stroke-width: 2;
    --aous-aw-icon-size: 1.3rem;
}

.web_footer .app_stores {
    padding-top: 2.5rem;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.web_footer .app_stores a img {
    width: 10rem;
    height: 3rem;
    object-fit: contain;
}

.web_area .copyright {
    padding-top: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.web_area .copyright a {
    color: #b6b5b5;
}

.web_area .copyright a:hover {
    color: white;
}

.web_area .copyright span {
    color: #b6b5b5;
}

.web_area .copyright .help_links {
    display: flex;
    gap: 2.5rem;
}

/* End Footer */

/* Start Booking ride guide */

.booking_ride_guide_area .steps_area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 5rem;
    column-gap: 3rem;
}

.booking_ride_guide_area .steps_area .step_content .image_content {
    position: relative;
    overflow: hidden;
}

.booking_ride_guide_area .steps_area .step_content .image_content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #000000, transparent);
}

.booking_ride_guide_area .steps_area .step_content .image_content img {
    max-height: 400px;
    width: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
}

.booking_ride_guide_area .steps_area .step_content:hover .image_content img {
    transform: scale(1.05) translateY(-20px);
}

.booking_ride_guide_area .steps_area .step_content .title {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.booking_ride_guide_area .steps_area .step_content .description {
    font-size: 1rem;
}

.booking_ride_guide_area .action_button {
    margin-top: 3rem;
}

.booking_ride_guide_area .action_button .btn {
    color: white;
    padding-inline: 1.25rem;
    padding-block: 0.95rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2rem;
    display: block;
    width: fit-content;
}

/* End Booking ride guide */

/* Start Service details */

.service_details .title {
    font-size: 2.5rem;
}

/* End Service details */

/* Start Partner introduction */

.introduction_content .landing_page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    height: 100vh;
    padding-top: var(--padding-top-page);
}

.introduction_content .landing_page .text_content h1 {
    font-size: 3rem;
    line-height: normal;
    font-weight: 700;
    margin-bottom: 2rem;
}

html[dir="rtl"] .introduction_content .landing_page .text_content h1 {
    font-size: 2rem;
        line-height: 48px;
}

.introduction_content .landing_page .text_content p {
    font-size: 1.2rem;
}

.introduction_content .landing_page .text_content .action_tools {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 4rem;
}

.introduction_content .landing_page .text_content .action_tools a:not(.btn-primary) {
    font-size: 1rem;
    color: var(--main-color);
    font-weight: 500;
}

.introduction_content .landing_page .text_content .action_tools .btn-primary {
    color: white;
    padding-inline: 1.25rem;
    padding-block: 0.8rem;
    font-size: 1.1rem;
    font-weight: 600;
    width: fit-content;
}

.introduction_content .landing_page .image_content img {
    border-radius: 10px;
}

.introduction_content .features_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 2rem;
    margin-top: 5rem;
    margin-bottom: 13rem;
}

.introduction_content .features_content h1 {
    font-size: 1.3rem;
    line-height: normal;
}

.introduction_content .features_content p {
    font-size: 1rem;
    color: var(--aous-aw-muted);
}

.introduction_content .steps_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.introduction_content .steps_content h1 {
    font-size: 2.75rem;
    font-weight: 600;
    margin-bottom: 2rem;
    line-height: normal;
}

.introduction_content .steps_content .step_content {
    margin-bottom: 2rem;
}

.introduction_content .steps_content .step_content p {
    font-size: 1rem;
    color: var(--aous-aw-muted);
}

.introduction_content .motivational_description {
    margin-top: 3rem;
}

.introduction_content .motivational_description p {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 4rem auto;
    width: 70%;
    text-align: center;
    margin-top: 8rem;
    color: var(--aous-aw-muted);
}

/* End Partner introduction */

/* Start Card single info page */
.content_single {
    padding-top: var(--padding-top-page);
}

.card_single_info_page {
    width: 60%;
}

.card_single_info_page h2 {
    color: var(--main-color);
}

.card_single_info_page p {
    line-height: 1.6;
    font-size: 1rem;
}

.card_single_info_page ul {
    list-style: disc;
    padding-left: 2rem;
    margin-top: 1rem;
}

.card_single_info_page ul li {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.card_single_info_page ul li b,
.card_single_info_page ul li strong {
    display: block;
    font-size: 1rem;
}

.card_single_info_page a {
    color: var(--aous-aw-body-color);
    font-weight: 600;
    text-decoration: underline;
}

/* End Card single info page */

/* Start About Raha */
.about_raha {
    width: 60%;
    padding-top: var(--padding-top-page);
}

.about_raha .content_section {
    margin-bottom: 3.5rem;
}

.about_raha .content_section p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.about_raha .content_section ul {
    list-style: disc;
    padding-left: 2rem;
    margin-top: 1rem;
}

.about_raha .content_section ul li {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* End About Raha */


/* Start Faqs section */

.faqs_section {
    padding-top: 8rem;
    padding-bottom: 4rem;
}

.faqs_section .header_section h1 {
    font-size: 2.25rem;
    line-height: normal;
}

.faqs_section .header_section p {
    font-size: 1.1rem;
}

.faqs_section .question_area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
}

.faqs_section .question_area .accordion-item {
    border: 1px solid var(--border-color);
    box-shadow: 1px 2px 10px var(--shadow-color);
    border-radius: 10px;
}

.faqs_section .question_area .accordion-item:first-of-type .accordion-button {
    font-weight: 500;
    font-size: 1rem;
    color: var(--main-color);
}

.faqs_section .question_area .accordion-item .accordion-body {
    font-size: 0.9rem;
    line-height: 1.6;
}

.faqs_section .question_area .accordion {
    margin-bottom: 1rem;
}

.faqs_section .question_area .accordion-button:after,
.faqs_section .question_area .accordion-button:not(.collapsed)::after {
    background-image: unset
}

/* End Faqs section */

/* Start More info section */
.more_info_section {
    min-height: 100vh;
}

.more_info_section .header_section_dark {
    background-color: black;
    padding-inline: 8.5rem;
    position: absolute;
    left: 0;
    z-index: 8;
    width: 100%;
    top: 0;
    height: 24rem;
    display: flex;
    align-items: center;
}

.more_info_section .header_section_dark h1 {
    color: white;
    font-size: 3rem;
    width: 50%;
    line-height: normal;
}

.more_info_section .info_text_area {
    background-color: white;
    padding-block: 2.5rem;
    padding-inline: 4rem;
    margin-top: 16rem;
    width: 100%;
    position: relative;
    z-index: 9;
}

.more_info_section .inquiry_area {
    margin-bottom: 2.5rem;
}

.more_info_section .info_text_area .inquiry_area h2 {
    font-size: 1.25rem;
}

.more_info_section .info_text_area .inquiry_area p {
    font-size: 1.1rem;
    font-weight: 300;
    color: #777;
}

.more_info_section .info_text_area .inquiry_area p {
    font-weight: 400;
    width: 65%;
    font-size: 1.1rem;
    color: #333;
}


/* End More info section */
