/* ---------------------------------- Import ---------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* --------------------------------- Variables --------------------------------- */

:root {
    --body-color: #000000;
    --fade-color: #000000bd;
    --title-color: #333;
    --text-color: #666;
    --text-color-light: #777;
    --text-color-lightest: #a7a7a7;
    --nav-color: #fbfbfea9;
    --modal-background-color: #d5d5d51f;
    --divider-color: #a19fad;
    --theme-shadow-color: #001f2e;
    --white-light-color: #fff;
    --white-color: #fff;
    --black-color: #000;
    /* ============================= Theme Colors ============================= */
    --theme-color: #6e95ff;
    --theme-color-hover: #fff;
    --theme-text-color: #ffffff;
    /* ================================ Fonts ================================ */
    --font-1: 'Raleway', sans-serif;
    --font-2: 'Montserrat', sans-serif;
}


/* ------------------------------------ CSS ------------------------------------ */


/* ------------------------ Body ------------------------ */

* {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

img {
    user-select: none;
}

body {
    background: var(--body-color);
    font-family: var(--font-1);
    position: relative;
}

body::before {
    content: "";
    background-image: url("../images/bg-stripes.svg");
    background-size: 150% auto;
    background-position: center center;
    background-repeat: no-repeat repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    z-index: -1;
}

body::after {
    content: "";
    background-image: url("../images/circles.svg");
    background-size: 110% auto;
    background-position: center center;
    background-repeat: no-repeat repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -1;
}


/* ---------------------- Container ---------------------- */

.container {
    padding: 0 40px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1800px;
    display: block;
}


/* ----------------------- Loader ----------------------- */

.loader_container {
    background: var(--black-color);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
}

.loader_contianer img {
    width: 100%;
    max-width: 250px;
}


/* --------------------- Scroll Bar --------------------- */

::-webkit-scrollbar {
    width: 10px;
}

 ::-webkit-scrollbar-track {
    background: var(--black-color) !important;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--white-color);
}

 ::-webkit-scrollbar-thumb:hover {
    background: var(--white-color);
}


/* ---------------------- Selection ---------------------- */

::selection {
    background: var(--theme-color);
    color: var(--white-color);
}


/* --------------------- Scroll Top --------------------- */

.scrollTopBtn {
    background: transparent;
    border: none;
    outline: none;
    width: 59px;
    height: 106px;
    position: fixed;
    bottom: 50px;
    right: 30px;
    transition: .3s linear;
    z-index: 10;
    cursor: pointer;
    display: none;
}

.scrollTopBtn .car-image {
    width: 100%;
}

.scrollTopBtn:hover::before,
.scrollTopBtn:hover::after {
    display: block;
}

.scrollTopBtn::before,
.scrollTopBtn::after {
    content: "";
    background: radial-gradient(var(--white-color), transparent);
    width: 13px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    z-index: 10;
    display: none;
}

.scrollTopBtn::before {
    left: 9px;
}

.scrollTopBtn::after {
    right: 9px;
}


/* --------------------- Sweet Alert --------------------- */

.swal-overlay {
    backdrop-filter: blur(50px);
    background: transparent !important;
}

.swal-modal {
    background: var(--body-color) !important;
    color: var(--white-color);
}

.swal-modal .swal-icon--success__line {
    background: var(--theme-color) !important;
}

.swal-modal .swal-icon--success__ring {
    border-color: var(--theme-color) !important;
}

.swal-modal .swal-icon--warning,
.swal-modal .swal-icon--error {
    background: transparent !important;
    border-color: var(--theme-color) !important;
}

.swal-modal .swal-icon:before,
.swal-modal .swal-icon:after,
.swal-icon--success__hide-corners {
    background: transparent !important;
}

.swal-title {
    color: var(--white-color);
}

.swal-text {
    color: var(--white-color);
}

.swal-modal .swal-icon--warning__body,
.swal-modal .swal-icon--warning__dot,
.swal-modal .swal-icon--error__body,
.swal-modal .swal-icon--error__dot {
    background: var(--theme-color);
}

.swal-modal .swal-button--cancel {
    box-shadow: none;
    background: var(--sidebar-hover-color);
    color: var(--title-color);
}

.swal-modal .swal-button--cancel:hover,
.swal-modal .swal-button--cancel:focus,
.swal-modal .swal-button--cancel:active {
    border: none;
    outline: none;
}

.swal-modal .swal-button--confirm {
    background: var(--theme-color);
    color: #fff;
    border: none;
    box-shadow: none;
}

.swal-modal .swal-button--confirm:hover {
    background: var(--theme-color-hover);
}


/* ------------------------ Header ------------------------ */

header {
    background: var(--theme-color);
    background: var(--black-color);
    padding: 12px 0;
    border-bottom: 1px solid var(--white-color);
}

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

header .content .left {
    display: flex;
    align-items: center;
    gap: 0 45px;
}

header .content .left .link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0 8px;
}

header .content .left .link .icon {
    fill: var(--white-color);
    width: 14px;
}

header .content .left .link .icon.clock {
    stroke: var(--white-color);
}

header .content .left .link .text {
    font-size: 14px;
    font-weight: 400;
    color: var(--white-color);
}

header .content .left .link .text.number,
header .content .left .link .text .number {
    font-family: var(--font-2);
}

header .content .right {
    display: flex;
    align-items: center;
    gap: 0 15px;
}

header .content .right .link {
    text-decoration: none;
}

header .content .right .link .icon {
    fill: var(--white-color);
    height: 16px;
}

header .content .right .link .icon.linkedin {
    height: 20px;
    width: 20px;
}

header .content .right .link:hover .icon {
    fill: var(--text-color-lightest);
}


/* ------------------------- Nav ------------------------- */

nav {
    background: var(--black-color);
    padding: 15px 0;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    transition: height .2s linear;
}

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

nav .content .logo {
    width: 150px;
}

nav .content .nav-ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0 30px;
}

nav .content .nav-ul .nav-link {
    color: var(--white-color);
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    text-decoration: none;
    text-transform: capitalize;
    display: inline-block;
    position: relative;
    float: left;
}

nav .content .nav-ul .nav-link::after {
    content: "";
    background: var(--white-color);
    width: 0px;
    height: 2.5px;
    border-radius: 20px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: width .3s linear;
}

nav .content .nav-ul .nav-link.active::after,
nav .content .nav-ul .nav-link:hover::after {
    width: 100%;
}

nav .content .nav-ul .nav-link .dropdown {
    position: relative;
}

nav .content .nav-ul .nav-link .dropdown .nav-link-with-dropdown {
    display: flex;
    gap: 5px;
}

nav .content .right .nav-ul .nav-link .dropdown .nav-link-with-dropdown .icon {
    fill: var(--white-color);
    width: 20px;
}

nav .content .nav-ul .nav-link .dropdown .dropdown-content {
    background: var(--black-color);
    padding: 10px 0;
    border-radius: 10px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    position: absolute;
    top: 15px;
    left: -2px;
    display: none;
    z-index: 5;
}

nav .content .nav-ul .nav-link .dropdown:hover .dropdown-content {
    display: flex;
}

nav .content .nav-ul .nav-link .dropdown .dropdown-content .dropdown-link {
    color: var(--white-color);
    font-size: 16px;
    text-decoration: none;
    margin: 0 0 0 15px;
    position: relative;
}

nav .content .nav-ul .nav-link .dropdown .dropdown-content .dropdown-link::after {
    content: "";
    background: var(--white-color);
    width: 0px;
    height: 2.5px;
    border-radius: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width .3s linear;
}

nav .content .nav-ul .nav-link .dropdown .dropdown-content .dropdown-link.active::after,
nav .content .nav-ul .nav-link .dropdown .dropdown-content .dropdown-link:hover::after {
    width: 100%;
}

nav .content .nav-ul .nav-link.with-dropdown .dropdown .nav-link-with-dropdown .icon {
    fill: var(--white-color);
    width: 18px;
}

nav .content button.toggle {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    display: none;
}

nav .content button.toggle .icon {
    width: 30px;
    fill: var(--white-color);
}


/* ------------------------- Nav ------------------------- */


/* ------------------------ Header ------------------------ */

section.header {
    padding: 80px 0 0 0;
}

section.header .header-swiper .swiper-wrapper .swiper-slide .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    overflow: hidden;
}

section.header .header-swiper .swiper-wrapper .swiper-slide .content .left {
    width: 50%;
}

section.header .header-swiper .swiper-wrapper .swiper-slide .content .right {
    width: 40%;
}

section.header .header-swiper .swiper-wrapper .swiper-slide .content .left .heading {
    color: var(--theme-color);
    font-size: 60px;
    font-weight: 700;
    display: block;
    margin-bottom: 30px;
}

section.header .header-swiper .swiper-wrapper .swiper-slide .content .left .heading .next-line {
    color: var(--theme-text-color);
    display: block;
}

section.header .header-swiper .swiper-wrapper .swiper-slide .content .left .car-image {
    width: 100%;
}

section.header .header-swiper .swiper-wrapper .swiper-slide .content .right .car-image {
    width: 100%;
}


/* ------------------- Similar Sections ------------------- */

section.similar .seprator {
    background: var(--theme-text-color);
    padding: 0.5px 0;
    margin: 60px auto;
    border-radius: 10px;
    width: 70%;
    display: block;
}

section.similar .seprator.none {
    visibility: hidden;
}

section.similar .content {
    display: flex;
    align-items: center;
    gap: 50px 30px;
}

section.similar .content.center {
    justify-content: center;
}

section.similar .content .left {
    width: 35%;
}

section.similar .content .left img {
    width: 100%;
}

section.similar .content .right {
    width: 55%;
}

section.similar .content .heading {
    color: var(--theme-color);
    font-family: var(--font-1);
    font-size: 50px;
    font-weight: 800;
    text-transform: uppercase;
}

section.similar .content .right .paragraph {
    color: var(--theme-text-color);
    font-size: 22px;
    font-weight: 600;
    margin: 10px 0 0 0;
}

section.similar .content .right .paragraph .number {
    font-family: var(--font-2);
    font-weight: 500;
}

section.similar .content .right .small-paragraph {
    color: var(--theme-text-color);
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 0 0;
}

section.similar .content .right .small-paragraph .number {
    font-family: var(--font-2);
    font-weight: 500;
}

section.similar .content .right .name {
    font-weight: 800;
}

section.similar .content .right .name .highlight {
    background: var(--white-color);
    color: var(--theme-color);
}

section.similar .content .right ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px 0;
    margin-top: 60px;
}

section.similar .content .right ul li {
    color: var(--theme-text-color);
    display: flex;
    align-items: center;
    gap: 0 10px;
}

section.similar .content .right ul li .icon {
    width: 18px;
    stroke: var(--theme-color);
}

section.similar .content .right ul li .text {
    color: var(--theme-text-color);
    font-size: 20px;
    line-height: 25px;
    font-weight: 600;
}

section.similar .content .right ul li .text .number {
    font-family: var(--font-2);
}

section.similar .content .right .contact-illustration {
    width: 100%;
}

section.similar .content .left form {
    display: flex;
    flex-direction: column;
    gap: 20px 0;
    margin-top: 20px;
}

section.similar .content .left form input,
section.similar .content .left form textarea {
    background: #000;
    color: var(--theme-text-color);
    font-family: var(--font-1);
    padding: 15px;
    border: none;
    border: 1px solid gray;
    border-radius: 5px;
    outline: none;
    resize: none;
}

section.similar .content .left form input:focus,
section.similar .content .left form textarea:focus {
    border-color: var(--theme-color);
}

section.similar .content .left form input.error,
section.similar .content .left form textarea.error {
    border-color: #f00;
}

section.similar .content .left form input::placeholder,
section.similar .content .left form textarea::placeholder {
    color: var(--theme-text-color);
}

.submit-btn {
    background: var(--theme-color);
    color: var(--white-color);
    font-size: 16px;
    font-family: var(--font-1);
    line-height: 18px;
    text-transform: uppercase;
    padding: 10px 0;
    border: none;
    border-radius: 5px;
    outline: none;
    width: 130px;
    cursor: pointer;
}


/* --------------------- Career Page --------------------- */

.career {
    background: var(--black-color);
    border: 1px solid var(--white-color);
    padding: 10px 20px;
    border-radius: 10px;
    width: calc(100% - 40px);
    max-width: 800px;
}

.career .heading {
    color: var(--white-color) !important;
    text-align: center;
}

.career .drag-area {
    padding: 30px;
    border: 2px dashed var(--white-color);
    border-radius: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    cursor: pointer;
}

.career .drag-area.active {
    border: 2px solid var(--white-color);
}

.career .drag-area.choosed {
    padding: 10px;
}

.career .drag-area.error {
    border-color: #f00;
}

.career .drag-area .drag-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.career .drag-area .pdf-preview {
    border-radius: 10px;
    width: 100%;
    height: 50vh;
}

.career .drag-area .drag-text .icon {
    fill: var(--white-color);
    width: 24px;
}

.career .drag-area .drag-text .text {
    color: var(--white-color);
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
}

.career .submit-btn {
    background: var(--white-color);
    color: var(--theme-color);
    font-weight: 600;
    margin: 15px auto 0 auto;
    display: block;
    width: 180px;
}


/* --------------------- Subs Diaries --------------------- */

section.subs-diary .content .right {
    width: 100%;
    text-align: center;
}

section.subs-diary figure {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

section.subs-diary figure a {
    background: #0075fb36;
    padding: 0 8px;
    border-radius: 10px;
    border: 2px solid var(--theme-color);
    width: calc(16.6% - 30px);
    display: inline-block;
}

section.subs-diary figure a img {
    width: 100%;
}


/* ---------------------- Machineries ---------------------- */

.banner-area {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.banner-area::before {
    content: "";
    background: var(--fade-color);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.banner-area h1.heading {
    color: var(--white-color);
    font-size: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    margin-top: 0;
}

.banner-area .banner {
    width: 100%;
}

.machineries .heading {
    color: var(--theme-color);
    font-family: var(--font-1);
    font-size: 50px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    margin-top: 80px;
}

.machineries .products-parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 20px 0;
}

.machineries .products-parent .product-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(25% - 22.5px);
}

.machineries .products-parent .product-box .box-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
}

.machineries .products-parent .product-box .box-header .product-image {
    background: var(--black-color);
    width: 100%;
}

.machineries .products-parent .product-box .box-header .label {
    background: var(--theme-color);
    color: var(--white-color);
    padding: 5px;
    font-size: 18px;
    line-height: 25px;
    text-transform: uppercase;
    text-align: center;
}

.machineries .products-parent .product-box .box-footer .description {
    color: var(--white-color);
    font-size: 15px;
    text-align: center;
    margin: 0;
}


/* ------------------------ Footer ------------------------ */

footer {
    background: var(--theme-color);
    background: var(--black-color);
    padding: 50px 0;
    margin-top: 100px;
}

footer .content {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    justify-content: space-between;
}

footer .content .col .heading {
    color: var(--white-color);
    font-size: 25px;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 20px;
}

footer .content .col .about-us .paragraph {
    font-size: 15px;
    color: var(--white-color);
    width: 250px;
}

footer .content .col .about-us .beforwardlogo {
    width: 100%;
    max-width: 250px;
}

footer .content .col .about-us .jojologo {
    margin-top: 2rem;
    width: 100%;
    max-width: 250px;
}

footer .content .col .quick-links .links {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px 0;
}

footer .content .col .quick-links .links .link {
    color: var(--white-color);
    font-size: 17px;
    font-weight: 400;
    line-height: 15px;
    text-decoration: none;
    text-transform: capitalize;
    position: relative;
}

footer .content .col .quick-links .links .link::after {
    content: "";
    background: var(--white-color);
    width: 0px;
    height: 1.5px;
    border-radius: 20px;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    transition: width .3s linear;
}

footer .content .col .quick-links .links .link:hover::after {
    width: 100%;
}

footer .content .col .contact-info .info {
    margin-bottom: 5px;
}

footer .content .col .contact-info .info .number {
    font-family: var(--font-2);
}

footer .content .col .contact-info .small-heading {
    color: var(--white-color);
    font-size: 17px;
    font-weight: 450;
    text-transform: capitalize;
}

footer .content .col .contact-info .paragraph {
    color: var(--white-color);
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
    margin: 5px 0;
    display: inline-block;
    width: 250px;
}

footer .content .col .social-links {
    display: flex;
    gap: 0 15px;
}

footer .content .col .social-links .link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    width: 35px;
    height: 35px;
}

footer .content .col .social-links .link:hover {
    background: var(--white-color);
}

footer .content .col .social-links .link .icon {
    width: 20px;
    fill: var(--white-color);
}

footer .content .col .social-links .link:hover .icon {
    fill: var(--theme-color);
}

footer .bottom-line {
    font-size: 13px;
    color: var(--white-color);
    margin: 20px 0 0 0;
    display: block;
}

footer .bottom-line a {
    color: var(--white-color);
    text-decoration: none;
}

footer .bottom-line .number {
    font-family: var(--font-2);
}