/**========================================================================
 *                               Base Styles
 *========================================================================**/
/*================================ Fonts Face ==============================*/

@font-face {
  font-family: "IRANSansWeb";
  font-style: normal;
  font-weight: 200;
    src: url('../fonts/iran/iranSans1.woff') format('woff'), url('../fonts/iran/iranSans1.woff2') format('woff2'), url('../fonts/iran/iranSans1.ttf') format('truetype');
}
@font-face {
  font-family: "IRANSansWeb";
  font-style: normal;
  font-weight: 300;
    src: url('../fonts/iran/iranSans2.woff') format('woff'), url('../fonts/iran/iranSans2.woff2') format('woff2'), url('../fonts/iran/iranSans2.ttf') format('truetype');
}
@font-face {
  font-family: "IRANSansWeb";
  font-style: normal;
  font-weight: 500;
    src: url('../fonts/iran/iranSans3.woff') format('woff'), url('../fonts/iran/iranSans3.woff2') format('woff2'), url('../fonts/iran/iranSans3.ttf') format('truetype');
}
@font-face {
    font-family: "IRANSansWeb";
  font-style: normal;
  font-weight: normal;
    src: url('../fonts/iran/iranSans4.woff') format('woff'), url('../fonts/iran/iranSans4.woff2') format('woff2'), url('../fonts/iran/iranSans4.ttf') format('truetype');
}
@font-face {
    font-family: "IRANSansWeb";
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/iran/iranSans5.woff') format('woff'), url('../fonts/iran/iranSans5.woff2') format('woff2'), url('../fonts/iran/iranSans5.ttf') format('truetype');
}
/*================================  Css Variable ==============================*/

:root {
    --headerHeight: 90px;
    /*--------------------- Main Colors ---------------------*/
    --mainColor: #0069d9;
    --secondColor: #e8f3ff;
    --thirdColor: #002963;
    --fourthColor: #fa0008;
    /*----------------- BackGround Colors --------------------*/
    --darkBack: #21252b;
    --grayBack: #f8f8f8;
    --whiteColor: #ffffff;
    /*----------------- Mobile Navigation --------------------*/
    --mobileMenuColor: rgb(255, 255, 255);
    --mobileMenuAccordionBack: #f5f5f5;
    --mobileMenuBorderColor: rgba(0, 0, 0, 0.1);
    /*-----------------=---- Text Colors ---------------------*/
    --footerTextColor: #f7f8fa;
    --lightTextColor: #fff;
    --grayTextColor: #9e9e9e;
    --textColorL0: #000;
    --textColorL1: #101010;
    --textColorL2: #202020;
    --textColorL3: #303030;
    --textColorL4: #404040;
    --textColorL5: #505050;
    --textColorL6: #606060;
    --textColorL7: #707070;
    --textColorL8: #80808080;
    --textColorL9: #90909090;
    /*-----------------=---- Border Colors ---------------------*/
    --borderColor: #e8e8e8;
    /*-----------------=---- Border Radius ---------------------*/
    --borderRadius: 0.25rem;
    /*--------------------- Box Shadow ---------------------*/
    --boxShadow: 0 0 0.4375rem rgba(0, 0, 0, 0.05);
    --boxShadowL2: 0 0 0.75rem rgba(0, 0, 0, 0.2);
    --boxShadowHover: 0 0 0.4375rem rgba(0, 8, 255, 0.9);
    --boxShadowHoverL2: 0 0 0.4375rem rgba(0, 8, 255, 0.15);
    /*-----------------=---- Transition ---------------------*/
    --Transition300: all ease-in-out 300ms;
    --Transition500: all ease-in-out 500ms;
    /*--------------------- Font Size ---------------------*/
    --card-title-fontSize: 1.5rem;
    --sub-title-fontSize: 1.125rem;
    /*---------------------- Fonts ---------------------*/
    --fontIcons: "Font Awesome 6 Pro";
    --baseFont: "IRANSansWeb";
    /*--------------------- Text Shadow ---------------------*/
    --textShadowL1: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}

/*================================ Basic Style ==============================*/

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--baseFont) !important;
    color: var(--textColorL1);
    overflow-x: hidden;
    font-weight: 400;
    line-height: 1.75;
    direction: rtl;
}
body *:not(i) {
    font-family: var(--baseFont) !important;
}

i {
    justify-content: center;
    align-items: center;
    line-height: 1;
    display: flex;
}

ul {
    padding: 0;
    margin: 0;
}

p {
    color: var(--grayTextColor);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.9;
}

p a {
    color: var(--fourthColor);
}

p a:hover {
    color: var(--textColorL3);
}

a {
    transition: var(--Transition300);
    color: var(--textColorL1);
    text-decoration: none;
}

a:hover {
    color: var(--mainColor);
}

/*=================================  Basic Class ===============================*/

.flex {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    display: flex;
}

.flex-column {
    flex-direction: column;
    display: flex;
    gap: 1rem;
}

.img-fluid {
    max-height: 100%;
}

.row {
    min-width: 100%;
    flex: 1;
}

/*================================  Colors ==============================*/

.bg-light {
    background-color: var(--secondColor) !important;
}

.bg-gray {
    background-color: var(--grayBack);
}

/*================================  Scroll Bar ==============================*/

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 0.5rem;
}

::-webkit-scrollbar-thumb {
    background-color: var(--mainColor);
    border-radius: 0.125rem;
}

::-webkit-scrollbar-track {
    background-color: var(--grayBack);
}

/*================================ Container Style ==============================*/

.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

@media (min-width: 36rem) {
    .container-sm,
    .container {
        max-width: 33.75rem;
    }
}

@media (min-width: 48rem) {
    .container-md,
    .container-sm,
    .container {
        max-width: 45rem;
    }
}

@media (min-width: 64rem) {
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 60rem;
    }
}

@media (min-width: 75rem) {
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 72.5rem;
    }
}

@media (min-width: 83.75rem) {
    .container-xl,
    .container-lg,
    .container {
        max-width: 78.75rem;
    }
}

@media (min-width: 87.5rem) {
    .container-xl,
    .container-lg,
    .container {
        max-width: 83.75rem;
    }
}

/*================================ Colors ==============================*/

.bg-gray {
    background-color: var(--grayBack);
}

/*================================ Image ==============================*/

figure {
    justify-content: center;
    align-items: center;
    overflow: hidden;
    display: flex;
    margin: 0;
}

figure img {
    max-height: 100%;
    max-width: 100%;
}

.thumbnail-zoom figure img {
    transition: var(--Transition300);
}

.thumbnail-zoom:hover figure img {
    transform: scale(1.1);
}

/*================================ Form And Inputs ==============================*/

.form-label {
    color: var(--grayTextColorL2);
    margin-bottom: 0.25rem;
    font-size: 0.825rem;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
select {
    -webkit-appearance: none;
    appearance: none;
}

input[type="password"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="text"],
input[type="url"],
input[type="tel"],
input[type="date"],
textarea.form-control,
select.form-control,
textarea,
select {
    background-color: rgba(255, 255, 255, 0.5);
    border: 0.06rem solid var(--darkBack);
    transition: 500ms ease-in-out;
    color: var(--darkBack);
    border-radius: 0.175rem;
    font-size: 0.9375rem;
    padding: 0.625rem;
    box-shadow: none;
    height: 3rem;
    width: 100%;
    margin: 0 0;
}

select {
    background-image: url(../images/arrow-down.svg);
    background-position: left 1rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1.75rem;
    padding-left: 3rem;
}

textarea.form-control,
textarea {
    min-height: 9.375rem;
    min-width: 100%;
}

input[type="password"]:focus,
input[type="password"]:hover,
input[type="search"]:focus,
input[type="search"]:hover,
input[type="number"]:focus,
input[type="number"]:hover,
input[type="email"]:focus,
input[type="email"]:hover,
input[type="date"]:focus,
input[type="date"]:hover,
input[type="text"]:focus,
input[type="text"]:hover,
input[type="url"]:focus,
input[type="url"]:hover,
input[type="tel"]:focus,
input[type="tel"]:hover,
textarea.form-control:focus,
textarea.form-control:hover,
select.form-control:focus,
select.form-control:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover {
    border: 0.09rem solid var(--mainColor);
    box-shadow: var(--boxShadowHoverL2);
    background-color: var(--whiteColor);
    outline: 0;
}

.form-check-input:focus {
    box-shadow: none;
    outline: 0;
}

.form-check-input:checked {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

.form-section-title {
    border-bottom: 0.05rem solid var(--primaryColor);
    color: var(--darkTextColor);
    justify-content: flex-start;
    align-items: baseline;
    padding-bottom: 0.5rem;
    margin-top: 1.25rem;
    font-weight: 500;
    display: flex;
    gap: 0.5rem;
}


.search_button{
    width: 50px;
    height: 50px;
    background-color: var(--mainColor);
    border: none;
}

.submit-form {
    all: unset;
    border-radius: var(--borderRadius);
    background-color: var(--darkBack);
    transition: var(--Transition300);
    color: var(--whiteColor);
    justify-content: center;
    padding: 0.5rem 1.5rem;
    align-items: center;
    font-size: 1.125rem;
    display: flex;
    gap: 0.25rem;
}

.submit-form:hover {
    background-color: var(--thirdColor);
}

/*================================ List Style ==============================*/
.list-title {
    color: var(--thirdColor);
    font-size: 1.125rem;
    font-weight: bold;
}

.base-list {
    flex-direction: column;
    list-style: none;
    display: flex;
}

.base-list li::after {
    font-family: var(--fontIcons);
    inset: 0.25rem 0 auto auto;
    justify-content: center;
    font-size: 0.625rem;
    align-items: center;
    position: absolute;
    aspect-ratio: 1/1;
    font-weight: 900;
    content: "\f111";
    color: #ffbf00;
    line-height: 1;
    display: flex;
    margin: auto;
    width: 1.25rem;
}

.base-list li {
    color: var(--textColor4);
    padding-right: 1.5625rem;
    position: relative;
    font-weight: 400;
    font-size: 1rem;
}

.base-list.gear li::after {
    color: var(--mainColor);
    font-size: 0.8375rem;
    content: "\f013";
}

.base-list.gear li {
    border-bottom: 0.0625rem solid var(--borderColor);
    padding-bottom: 0.25rem;
    margin-top: 0.5rem;
}

.base-list.gear li:last-child {
    padding-bottom: none;
    border-bottom: none;
}

/*================================ Buttons ==============================*/

.default-button {
    border-radius: var(--borderRadius);
    outline: 0.125rem solid var(--mainColor);
    padding: 0.5625rem 1.25rem;
    text-transform: uppercase;
    color: var(--mainColor);
    transition: all 1000ms;
    display: inline-flex;
    align-items: center;
    position: relative;
    width: fit-content;
    font-weight: bold;
    overflow: hidden;
    cursor: pointer;
    font-size: 0.9375rem;
    gap: 0.25rem;
    border: none;
}

.default-button i {
    font-size: 1.125rem;
}

.default-button:hover {
    box-shadow: 0.25rem 0.3125rem 1.0625rem -0.25rem #268391;
    outline: 0.125rem solid #70bdca;
    transform: scale(1.075);
    color: #ffffff;
}

.default-button::before {
    background-color: var(--mainColor);
    transition: width 1000ms;
    transform: skewX(45deg);
    position: absolute;
    height: 100%;
    z-index: -1;
    left: -3.125rem;
    content: "";
    width: 0;
    top: 0;
}

.default-button:hover::before {
    width: 250%;
}

/*================================ Slider ==============================*/
.carousel-section {
    position: relative;
    padding: 0 3.125rem;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: 0;
    left: auto;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: 0;
    right: auto;
}

.swiper-button-next,
.swiper-button-prev {
    box-shadow: 0.3125rem 0.3125rem 0 0 var(--mainColor);
    border: 0.125rem solid var(--mainColor);
    background-color: var(--whiteColor);
    border-radius: var(--borderRadius);
    transition: var(--Transition300);
    color: var(--mainColor);
    height: 2.1875rem;
    width: 2.1875rem;
}

.swiper-button-next {
    box-shadow: -0.3125rem 0.3125rem 0rem 0 var(--mainColor);
}

.swiper-button-prev:hover {
    box-shadow: 0.1875rem 0.1875rem 0 0 var(--mainColor);
}

.swiper-button-next:hover {
    box-shadow: -0.1875rem 0.1875rem 0 0 var(--mainColor);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.25rem;
    font-weight: 300;
}

.swiper-pagination-bullet {
    background-color: var(--textColorL0);
    transition: all ease 200ms;
    height: 0.625rem;
    width: 0.625rem;
    opacity: 1;
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet:hover {
    background-color: var(--mainColor) !important;
    transition: all ease 200ms;
}

/*================================ Default Section Title Area ==============================*/

.section-title {
    flex-direction: column;
    margin-bottom: 1rem;
    display: flex;
}

.section-title .subject {
    color: var(--mainColor);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.section-title .title {
    margin-bottom: 0.625rem;
    font-weight: 700;
    font-size: 2rem;
}

.section-title p {
    color: var(--textColorL5);
    font-size: 0.9375rem;
    text-align: justify;
}

.section-title.middle p {
    text-align-last: center;
}

.section-title.middle {
    max-width: 45rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-title.middle .page-breadcrumb {
    justify-content: center;
    padding: 0.5rem 1rem;
}

.section-title:has(.page-breadcrumb) {
    max-width: fit-content;
}

/*================================ Card Style ==============================*/

.card {
    border-radius: var(--borderRadius);
    border-color: var(--borderColor);
    padding: 0.625rem;
}

.card.xl {
    border-radius: var(--borderRadius);
    border-color: var(--darkBack);
    border-width: 0.125rem;
    padding: 0.625rem;
}

.simple-card {
    border: 0.0625rem solid transparent;
    background-color: var(--whiteColor);
    transition: var(--Transition500);
    box-shadow: var(--boxShadow);
    border-radius: 0.625rem;
    flex-direction: column;
    text-align: center;
    padding: 0.25rem;
    display: flex;
    height: 100%;
}

.simple-card figure {
    border-radius: var(--borderRadius);
    aspect-ratio: 4/3;
}

.simple-card figure img {
    object-fit: contain;
    min-height: 100%;
    width: 100%;
}

.simple-card i {
    color: var(--whiteColor);
    font-size: 2.8125rem;
}

.simple-card .card-content {
    padding: 0.75rem 1rem 0.5rem 1rem;
    flex-direction: column;
    display: flex;
}

.simple-card .title {
    margin-bottom: 0.25rem;
    font-weight: 600;
    line-height: 1.6;
    font-size: 1rem;
}

.simple-card p {
    color: var(--textColorL7);
    margin: 0;
}

.simple-card:hover {
    background-color: var(--secondColor);
    border-color: var(--mainColor);
}

.simple-card .card-button {
    background-color: var(--thirdColor);
    border-radius: var(--borderRadius);
    border: 0.125rem solid transparent;
    transition: var(--Transition300);
    color: var(--whiteColor);
    padding: 0.25rem 1rem;
    margin-top: 0.25rem;
    font-weight: 500;
    cursor: pointer;
}

.simple-card .card-button:hover {
    background-color: var(--whiteColor);
    border-color: var(--thirdColor);
    color: var(--thirdColor);
}

.primary-title {
    color: var(--mainColor);
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.table-primary tr th {
    background-color: rgb(136, 197, 255);
}

.map-section {
    max-width: 45rem;
    margin: auto;
}

.tt_sm {
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    display: flex;
}

/*================================ Page Breadcrumb ==============================*/

.page-breadcrumb {
    justify-content: flex-start;
    padding: 1.25rem 0.625rem;
    align-items: center;
    font-size: 1rem;
    flex-wrap: wrap;
    display: flex;
    gap: 0.625rem;
}

.page-breadcrumb a {
    transition: all ease-in-out 200ms;
    color: var(--darkBack);
}

.page-breadcrumb a:hover {
    color: var(--mainColor);
}

.separator {
    color: var(--fourthColor);
}

.page-breadcrumb .last {
    color: var(--darkBack);
    opacity: 0.7;
}

/*================================ Pagination ==============================*/
.pagination {
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
}

.page-link {
    border: 0.0625rem solid var(--mainColor);
    transition: var(--Transition300);
    background-color: transparent;
    color: var(--textColorL3);
    position: relative;
    border-radius: 0;
    display: block;
}

.pagination .page-item:nth-child(2) a {
    border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
}

.pagination .page-item:nth-last-child(2) a {
    border-radius: var(--borderRadius) 0 0 var(--borderRadius);
}

.pagination .page-item:first-child a,
.pagination .page-item:last-child a {
    border-radius: var(--borderRadius);
    color: var(--mainColor);
    margin: 0 0.5rem;
}

.page-link:hover,
.page-item.active .page-link,
.page-item.ellipsis .page-link {
    color: var(--lightTextColor) !important;
    border: 0.0625rem solid var(--mainColor);
    background-color: var(--mainColor);
}

.page-item.disabled .page-link {
    color: var(--borderColor) !important;
    background-color: transparent;
}

/*============================ END OF Base Styles ============================*/

/**========================================================================
 *                                 Header
 *========================================================================**/

header {
    box-shadow: 0 0.0625rem 0.5rem 0 rgba(0, 0, 0, 0.075);
    background-color: var(--whiteColor);
    min-height: 4.375rem;
    align-items: center;
    position: fixed;
    display: flex;
    z-index: 100;
    width: 100%;
    right: 0;
    top: 0;
}

/*================================ Header Contact Section ==============================*/

.header-contact-section {
    background-color: #f6f9ff;
    padding: 0.125rem 0;
    align-items: center;
    display: flex;
    width: 100%;
}

.header-contact-item {
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.header-contact {
    align-items: center;
    display: flex;
}

.header-contact-value {
    color: var(--fourthColor);
    font-weight: 300;
    font-size: 1rem;
    display: block;
}

.header-contact-item {
    color: var(--textColorL3);
    font-size: 0.8375rem;
    font-weight: 500;
}

.header-contact-item i {
    background-color: rgba(255, 255, 255, 0.5);
    justify-content: center;
    color: var(--mainColor);
    align-items: center;
    font-size: 1.125rem;
    border-radius: 50%;
    display: flex;
    height: 2rem;
    width: 2rem;
}

.phone-icon {
    position: relative;
    width: 2.1875rem;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.phone-icon .back-circle {
    background-color: rgb(0, 191, 0);
    animation: back 2s infinite;
    border-radius: 100%;
    position: absolute;
    margin: auto;
    opacity: 0;
    inset: 0;
}

.phone-icon .phone {
    animation: call 2s infinite;
    position: absolute;
    margin: auto;
    height: 2.1875rem;
    width: 2.1875rem;
    inset: 0;
}

@keyframes back {
    0% {
        height: 0rem;
        width: 0rem;
    }

    50% {
        height: 1.125rem;
        width: 1.125rem;
        opacity: 0.4;
    }

    70% {
        height: 1.75rem;
        width: 1.75rem;
        opacity: 0.15;
    }

    100% {
        height: 2.1875rem;
        width: 2.1875rem;
        opacity: 0;
    }
}

@keyframes call {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    10% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    20% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    30% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    40% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    50% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        height: 2.1875rem;
        width: 2.1875rem;
    }

    60% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    70% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    80% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    90% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

/*================================ Header Main Section ==============================*/

.header-content {
    align-items: center;
    min-height: 3.75rem;
    display: flex;
}

.header-logo {
    box-sizing: border-box;
    max-height: 5.625rem;
    max-width: 7.5rem;
    padding: 0;
    margin-bottom: 20px;
}

header a {
    color: rgba(0, 0, 0, 0.55);
    font-size: 0.9375rem;
    font-weight: 500;
}

header a:hover {
    color: rgba(0, 0, 0, 0.8);
}

/*================================ Navigation ==============================*/

.menu-dropdown-open {
    position: relative;
    list-style: none;
}

.menu-dropdown-list,
.nested-menu-dropdown-list {
    border: 0.0625rem solid var(--textColorL7);
    background-color: var(--whiteColor);
    border-radius: var(--borderRadius);
    transition: var(--Transition300);
    box-shadow: var(--boxShadow);
    transform: translateY(2.5rem);
    transition-delay: 300ms;
    visibility: hidden;
    position: absolute;
    width: 12.25rem;
    z-index: 100;
    opacity: 0;
    padding: 0;
    top: 100%;
    right: 0;
}

.nested-menu-dropdown-list {
    list-style: none;
    right: 100%;
    top: 0;
}

.menu-dropdown-open:hover > .menu-dropdown-list,
.menu-dropdown-open:hover > .nested-menu-dropdown-list,
.menu-dropdown-open:hover > .products-navigation-dropdown {
    transform: translateY(0.5rem);
    transition-delay: 100ms;
    visibility: visible;
    opacity: 1;
}

.menu-dropdown-open:hover > .products-navigation-dropdown {
    transform: translateY(0);
}

.navigation-item {
    height: 100%;
}

.navigation-item-title {
    align-items: flex-end;
    font-size: 1rem;
    display: flex;
    gap: 0.125rem;
    height: 100%;
    line-height: 1;
}

.navigation-item ul li {
    padding: 0.5625rem 0.75rem;
}

.navigation-item-link {
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    display: flex;
}

header .navigation-item-title .fa {
    line-height: 1.25;
    font-size: 0.75rem;
    font-weight: bold;
}

.products-navigation-dropdown {
    text-align: start;
    width: calc(100vw - 3rem);
    min-height: 450px;
    position: fixed;
    padding: 0;
    margin: auto;
    flex-direction: column;
    display: flex;
    inset: var(--headerHeight) 0 auto 0;
}

.products-navigation-dropdown .nav-tabs {
    background-color: var(--grayBack);
    height: 100%;
    min-width: 200px;
    padding: 20px 0;
    border: none;
    display: block;
    flex-direction: column;
    max-height: 450px;
    overflow-y: auto;
    direction: ltr;
}

.products-navigation-dropdown .nav-tabs .nav-link {
    background-color: transparent;
    justify-content: flex-start;
    color: var(--textColorL1);
    border-radius: 0;
    align-items: center;
    padding: 0.75rem 1rem;
    font-size: 14px;
    display: flex;
    gap: 0.25rem;
    border: none;
    width: 100%;
    direction: rtl;
}

.products-navigation-dropdown .tab-pane {
    position: relative;
}

.category-list {
    background-color: #fff;
    transition: 0.3s;
    width: 100%;
    height: 100%;
    max-height: 500px;
    overflow-y: auto;
    padding: 1rem;
    columns: 4;
}

.category-list > li {
    width: 100%;
}

.navigation-item .category-list ul {
    flex-direction: column;
    white-space: nowrap;
    flex-wrap: wrap;
    display: flex;
}

.navigation-item .category-list ul ul {
    padding-inline-start: 1rem;
}

.navigation-item .category-list li {
    padding: 0.25rem;
}

.navigation-item .category-list li::before {
    all: unset;
}

.category-list a {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #565656;
}

.navigation-item .category-list ul .category-list-title {
    font-size: 0.8125rem;
    color: #565656;
    font-weight: 400;

}

.products-navigation-dropdown .category-list-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--textColorL1);
    position: relative;
    font-weight: 600;
    font-size: 14px;
}

.category-list-title:before {
    background-color: var(--mainColor);
    content: "";
    height: 7px;
    width: 3px;
}

.category-list li {
    display: inline-block;
}

.category-list li a {
    display: block;
}

.category-list-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--textColor4);
}

.category-list-title {
    font-size: 17px;
    font-weight: bold;
    color: var(--color1);
}

.category-list-link:hover,
.category-list-title:hover {
    color: var(--color2);
    transition: all ease 200ms;
}

.products-navigation-dropdown .nav-tabs .nav-link.active,
.products-navigation-dropdown .nav-tabs .nav-link:hover {
    background-color: var(--whiteColor);
    color: var(--mainColor);
}

/*================================ Select Language ==============================*/

.header-search-button {
    border-radius: var(--borderRadius);
    background-color: var(--grayBack);
    padding: 0.125rem 0.5rem;
    aspect-ratio: 1/1;
    width: 2.5rem;
}

.language-select-box {
    position: relative;
}

.language-select-box a {
    border-radius: var(--borderRadius);
    background-color: var(--grayBack);
    justify-content: space-between;
    color: var(--white-color);
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    min-width: fit-content;
    min-width: 4.0625rem;
    align-items: center;
    min-height: 2.5rem;
    font-weight: 400;
    display: flex;
    gap: 0.25rem;
}

.language-select-box a img {
    border-left: 0.0625rem solid var(--borderColor);
    box-sizing: content-box;
    padding-left: 0.375rem;
    margin-left: 0.25rem;
    max-width: 1rem;
}

.language-select-box a span {
    font-size: 0.9375rem;
    padding: 0.25rem 0;
}

.language-select-box ul {
    border-radius: var(--borderRadius);
    background-color: var(--grayBack);
    backdrop-filter: blur(0.75rem);
    transition: all linear 300ms;
    transform: translateY(100%);
    top: calc(100% + 0.375rem);
    transition-delay: 200ms;
    min-width: 4.0625rem;
    visibility: hidden;
    position: absolute;
    width: fit-content;
    list-style: none;
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
    padding: 0;
    right: 0;
}

.language-select-box:hover > a + ul {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

.language-select-box ul li a {
    border-radius: 0;
    min-height: 1.875rem;
}

.language-select-box ul li {
    border-bottom: 0.0625rem solid var(--borderColor);
}

.language-select-box ul li:last-child {
    border-bottom: none;
}

/*================== Hamburger Menu Button =================*/

.hamburger-button {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
    gap: 0.375rem;
}

.hamburger-button span {
    background: var(--mainColor);
    transition: all 0.3s ease;
    transition-delay: 200ms;
    border-radius: 6.25rem;
    height: 0.3rem;
    width: 2rem;
}

.hamburger-button:hover span.top,
body:has(#mobileMenuNavigation.show) .hamburger-button span.top {
    transform: translateY(210%) rotate(45deg);
    background: var(--mainColor);
}

.hamburger-button:hover span.bot,
body:has(#mobileMenuNavigation.show) .hamburger-button span.bot {
    transform: translateY(-210%) rotate(-45deg);
    background: var(--mainColor);
}

.hamburger-button:hover span.mid,
body:has(#mobileMenuNavigation.show) .hamburger-button span.mid {
    transform: translateX(-1.25rem);
    opacity: 0;
}

/*============================ END OF Header ============================*/

/**========================================================================
 *                           Main Styles
 *========================================================================**/
main {
    padding-top: var(--headerHeight);
}

/*================================ Home Page ==============================*/
.hero-slider {
    border-radius: 0 0 8rem 8rem;
    max-width: 100%;
    overflow: hidden;
    height: 100vh;
    max-height: 37.5rem;
    overflow: hidden;
}

.hero-slider .swiper-slide {
    position: relative;
    text-align: center;
}

.hero-slider .swiper-slide img {
    height: 100%;
    min-width: 100%;
    inset: 0;
    margin: auto;
    object-fit: cover;
    filter: brightness(0.3);
    object-position: center;
    position: absolute;
    z-index: -1;
}

.hero-slider .swiper-slide::after,
.hero-slider .swiper-slide::before {
    background: url(../images/slider-patern.png);
    background-size: contain;
    position: absolute;
    aspect-ratio: 1/4;
    height: 80%;
    content: "";
    bottom: -0.625rem;
    left: 0;
}

.hero-slider .swiper-slide::before {
    transform: scaleX(-1);
    left: auto;
    right: 0;
}

.hero-slider .swiper-slide .sub-title {
    color: var(--mainColor);
    font-size: 1.25rem;
    font-weight: 600;
}

.hero-slider .swiper-slide .title {
    color: var(--lightTextColor);
    margin-block: 0.75rem 1.25rem;
    font-size: 2.5rem;
    font-weight: 700;
}

.hero-slider .swiper-slide p {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

/*================================ Features Section ==============================*/

.features-section {
    position: relative;
    margin-top: -5rem;
    z-index: 10;
}

.feature-card {
    background-color: var(--whiteColor);
    padding: 1.25rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0rem 0.125rem 0.3125rem -0.0625rem, rgba(0, 0, 0, 0.3) 0rem 0.0625rem 0.1875rem -0.0625rem;
    position: relative;
    transition: var(--Transition500);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../images/features-bg.webp");
    background-color: var(--whiteColor);
    border-radius: var(--borderRadius);
    display: flex;
    height: 100%;
    gap: 1rem;
}

.feature-card figure {
    max-width: 4rem;
    align-items: flex-start;
}

.feature-card figure img {
    transition: var(--Transition500);
}

.feature-card h4 {
    margin-bottom: 0.75rem;
    transition: var(--Transition500);
    font-size: var(--card-title-fontSize);
    font-weight: 600;
}

.feature-card p {
    transition: var(--Transition500);
    margin: 0;
}

.feature-card:hover {
    background-color: var(--mainColor);
}

.feature-card:hover figure img {
    transform: scale(1.2);
}

.feature-card:hover h4,
.feature-card:hover p {
    color: var(--whiteColor);
}

/*================================  About Us ==============================*/

.about-img {
    background-color: var(--mainColor);
    padding: 1.25rem;
    border-radius: 37% 63% 63% 37% / 50% 50% 50% 50%;
    animation: round-shape 5s infinite linear;
    margin: 0 auto 1rem auto;
    max-width: 37.5rem;
}

.about-img img {
    border-radius: 37% 63% 63% 37% / 50% 50% 50% 50%;
    animation: round-shape 4s infinite linear forwards;
}

.about-text-area .section-title {
    margin-bottom: 0.75rem;
}

.about-text-area .default-button {
    margin-top: 1.5625rem;
}

.about-card {
    max-width: 31.25rem;
    display: flex;
    gap: 1.5rem;
}

.about-card i {
    font-size: 2.8125rem;
    color: var(--mainColor);
}

.about-card figure {
    align-items: flex-start;
    min-width: 5.625rem;
    max-width: 6.25rem;
}

.about-card .sub-title {
    margin-bottom: 0.5rem;
    font-size: var(--sub-title-fontSize);
    font-weight: 600;
}

/*================================ Contact Us Page ==============================*/

.contact-us-social .social-medias-list .social-link {
    border: 0.0625rem solid var(--grayTextColor);
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    align-items: center;
    font-size: 1rem;
    display: flex;
    gap: 0.25rem;
}

.contact-us-social .social-medias-list .social-link i {
    font-size: 1.125rem;
}

.contact-us-social .social-medias-list .social-link:hover {
    background-color: var(--lightBack);
    border-color: var(--primaryColor);
}

.contact-item {
    border-bottom: 0.0625rem solid var(--borderColor);
    flex-direction: column;
    padding-bottom: 0.5rem;
    display: flex;
    height: 100%;
    gap: 0.5rem;
}

.contact-item-title {
    color: var(--darkBack);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1rem;
}

.contact-item-title i {
    color: var(--mainColor);
    font-size: 1.125rem;
}

.contact-item-value {
    color: var(--thirdColor);
    font-size: 1.0625rem;
    font-weight: bold;
}

.routing-list {
    display: flex;
    align-items: center;
}

.Routing-item {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Routing-item img {
    max-width: 100%;
    width: 3.125rem;
}

/*================================ Services Section ==============================*/

.services-slider .swiper-slide {
    padding: 0.25rem;
}

.service-card {
    margin-top: 1.875rem;
    display: block;
    overflow: hidden;
    border-radius: 0.625rem;
    padding: 1.875rem 1.25rem 1.5625rem;
    box-shadow: var(--boxShadow);
    background-color: var(--whiteColor);
    position: relative;
}

.service-card::before {
    content: "";
    width: 100%;
    height: 0.125rem;
    border-radius: 0.625rem;
    transition: var(--Transition500);
    background-color: var(--mainColor);
    position: absolute;
    bottom: 0;
    left: 0;
}

.service-card .service-card-content {
    position: relative;
    height: 220px;
    text-align: center;
}

.service-card .service-card-content i {
    width: 5rem;
    height: 5rem;
    border-radius: 37% 63% 63% 37% / 50% 50% 50% 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondColor);
    color: var(--mainColor);
    transition: var(--Transition500);
    font-size: 2.1875rem;
}

.service-card .service-card-content .title {
    transition: var(--Transition500);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
}

.service-card .service-card-content p {
    transition: var(--Transition500);
    margin-bottom: 0.75rem;
}

.service-card:hover::before {
    height: 100%;
}

.service-card:hover .service-card-content i {
    background-color: var(--whiteColor);
    animation: round-shape 3s infinite linear;
}

.service-card:hover .service-card-content h4,
.service-card:hover .service-card-content a,
.service-card:hover .service-card-content p {
    color: var(--whiteColor);
}

/*================================ Process Steps Section ==============================*/

.working-process-card {
    padding: 0rem 1rem 2rem 1rem;
    box-shadow: var(--boxShadow);
    transition: 0.5s ease-in-out;
    height: 100%;
    text-align: center;
    border-radius: var(--borderRadius);
    border: 0.0625rem solid var(--borderColor);
    position: relative;
}

.working-process-card .working-process-number {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 37% 63% 63% 37% / 50% 50% 50% 50%;
    background-color: var(--mainColor);
    box-shadow: var(--boxShadow);
    border: 0.0625rem solid var(--borderColor);
    transition: 0.5s ease-in-out;
    color: var(--whiteColor);
    margin: auto;
    position: relative;
    top: -1.25rem;
}

.working-process-card .working-process-number span {
    font-size: 1.5625rem;
    font-weight: 700;
    margin-bottom: 0rem;
    display: flex;
}

.working-process-card .step-title {
    margin-bottom: 0.75rem;
    transition: var(--Transition300);
    font-size: var(--card-title-fontSize);
    font-weight: 600;
}

.working-process-card i {
    font-size: 5rem;
    z-index: -1;
    position: absolute;
    color: var(--secondColor);
    bottom: 0.9375rem;
    left: 0.9375rem;
}

.working-process-card p {
    transition: 0.5s ease-in-out;
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.75rem;
    color: var(--whiteColor);
    visibility: hidden;
    margin: auto;
    opacity: 0;
    margin: 0;
}

.working-process-card:hover .step-title {
    visibility: hidden;
    opacity: 0;
}

.working-process-card:hover p {
    visibility: visible;
    opacity: 1;
}

.working-process-card:hover {
    background-color: var(--mainColor);
}

.working-process-card:hover .working-process-number {
    animation: round-shape 3s infinite linear;
    background-color: var(--whiteColor);
    color: var(--mainColor);
}

.working-process-card:hover i {
    z-index: 0;
    opacity: 0.3;
}

/*================================ About Feature Section ==============================*/

.section-thumbnail {
    border-radius: var(--borderRadius);
    overflow: hidden;
}

.section-thumbnail img {
    object-fit: cover;
    min-height: 100%;
    width: 100%;
}

.about-feature-section .about-card {
    border: 0.0625rem solid var(--borderColor);
    padding: 1rem;
    background-color: var(--whiteColor);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    height: 100%;
    gap: 1rem;
    max-width: 100%;
}

.about-feature-section .about-card p {
    margin: 0;
}

/*================================ Testimonial Section ==============================*/

.testimonial-card {
    background-color: var(--whiteColor);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    transition: 0.5s ease-in-out;
    border: 0.0625rem solid var(--borderColor);
    position: relative;
    height: 100%;
    padding: 1.25rem;
    overflow: hidden;
}

.testimonial-card::before {
    content: "";
    width: 9.375rem;
    height: 9.375rem;
    border-radius: 50%;
    transition: 0.5s ease-in-out;
    background-color: var(--textColorL2);
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
}

.testimonial-card .testimonial-card-header {
    position: relative;
    margin-bottom: 1.25rem;
    padding-right: 0.625rem;
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.testimonial-card .testimonial-card-header img {
    width: 4.375rem;
    height: 4.375rem;
    border-radius: 50%;
    transition: 0.5s ease-in-out;
    border: 0.125rem solid var(--textColorL2);
}

.testimonial-card .testimonial-card-header .title {
    font-size: var(--sub-title-fontSize);
    color: var(--textColorL5);
    margin-bottom: 0.375rem;
    font-weight: 600;
    display: block;
}

.testimonial-card .testimonial-card-header span {
    color: var(--textColorL6);
    font-size: 0.9375rem;
}

.testimonial-card p {
    color: var(--textColorL2);
    font-size: 1rem;
    text-align: justify;
}

.testimonial-card a {
    font-size: 1rem;
    font-weight: bold;
    color: var(--textColorL0);
    opacity: 0.7;
}

.testimonial-card:hover a {
    color: var(--mainColor);
    opacity: 1;
}

.testimonial-card .fa-quote-left {
    color: var(--textColorL2);
    font-size: 2rem;
    transition: 0.5s ease-in-out;
    opacity: 0.3;
    position: absolute;
    bottom: 0.3125rem;
    left: 1.875rem;
}

.testimonial-card:hover::before {
    background-color: var(--mainColor);
}

.testimonial-card:hover .testimonial-card-header img {
    border-color: var(--mainColor);
}

.testimonial-card:hover .fa-quote-left {
    color: var(--mainColor);
}

/*================================ Logos Slider ==============================*/

.logos-slider figure {
    padding: 0.625rem;
    height: 7.8125rem;
    border: 0.0625rem solid var(--borderColor);
}

.logos-slider figure img {
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
}

/*================================ Accordion ==============================*/

.accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 0.0625rem solid var(--borderColor);
    border-radius: 0 !important;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--textColorL3);
    box-shadow: none;
}

.accordion-button:focus {
    border-color: var(--borderColor);
    box-shadow: none;
    z-index: 3;
    outline: 0;
}

.accordion-button {
    justify-content: space-between;
    border-radius: 0 !important;
    align-items: center;
    font-weight: 600;
    padding: 1.25rem;
    text-align: right;
}

.accordion-button::after {
    background-image: none;
    font-family: var(--fontIcons);
    height: fit-content;
    width: fit-content;
    font-weight: 400;
    content: "\f078";
    font-size: 1.25rem;
    line-height: 0;
    margin-left: 0;
}

.accordion-body p {
    text-align: justify;
    margin-bottom: 0;
    color: var(--grayTextColor);
    line-height: 1.8;
    font-weight: 500;
    font-size: 1rem;
}

/*================================ Blog Card ==============================*/

.article-card {
    border: 0.0625rem solid var(--borderColor);
    transition: var(--Transition300);
    background: var(--whiteColor);
    flex-direction: column;
    border-radius: 0.375rem;
    position: relative;
    overflow: hidden;
    display: flex;
    height: 100%;
}

.article-card:hover {
    border-color: var(--mainColor);
}

.article-badge {
    background-color: var(--secondColor);
    border-radius: var(--borderRadius);
    padding: 0.3125rem 0.625rem;
    color: var(--textColorL3);
    font-size: 0.875rem;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
}

.article-thumbnail {
    aspect-ratio: 16/9;
    max-width: 43.75rem;
    overflow: hidden;
    width: 100%;
}

.article-thumbnail img {
    object-fit: cover;
    width: 100%;
}

.article-card.new .article-thumbnail img {
    filter: saturate(50%);
}

.article-card.new:hover .article-thumbnail img {
    filter: saturate(100%);
}

.article-card .card-body {
    justify-content: space-between;
    flex-direction: column;
    display: flex;
}

.article-title {
    font-size: var(--sub-title-fontSize);
    transition: var(--Transition300);
    color: var(--textColorL2);
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.6;
}

.article-card.new .article-title {
    text-shadow: var(--textShadowL1);
    color: var(--lightTextColor);
    padding: 0.5rem 0.75rem;
    position: absolute;
    font-weight: 500;
    z-index: 2;
    bottom: 0;
    margin: 0;
}

.article-card.new:hover .article-title {
    color: var(--secondColor);
}

.article-card:hover .article-title {
    color: var(--textColorL4);
}

.article-card p {
    -webkit-box-orient: vertical;
    color: var(--textColorL6);
    -webkit-line-clamp: 3;
    display: -webkit-box;
    font-size: 0.915rem;
    overflow: hidden;
    width: 100%;
}

.article-card-bottom {
    justify-content: space-between;
    display: flex;
}

.published-date {
    color: var(--grayTextColor);
    font-size: 0.825rem;
    font-weight: 400;
}

.article-card-bottom .read-more {
    transition: var(--Transition300);
    color: var(--mainColor);
    font-size: 0.9375rem;
    padding: 0.25rem 0;
    font-weight: 500;
    opacity: 0.7;
}

.article-card-bottom .read-more:hover {
    opacity: 1;
}

/*================================ About Us Banner ==============================*/

.about-us-banner {
    border-radius: 1rem;
    overflow: hidden;
    margin: 2rem 0.5rem;
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.4);
}

.company-description p,
.company-core-values p {
    color: var(--textColorL3);
    font-size: 1.25rem;
    margin: 0;
    text-align: justify;
    font-weight: 300;
}

.company-core-values p {
    text-align: center;
    margin-bottom: 1rem;
}

.core-values-list {
    border: 0.125rem solid rgba(0, 0, 0, 0.9);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
}

.slider-description p {
    font-size: 1rem;
    text-align: justify;
    color: var(--textColorL6);
}

.media-slider {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 0.125rem solid var(--darkBack);
}

.media-slider figure {
    aspect-ratio: 16/9;
}

.media-slider.one-one figure {
    aspect-ratio: 1/1;
}

.media-slider figure img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.certificate-item figure {
    border-radius: var(--borderRadius);
    border: 0.125rem solid var(--darkBack);
    box-shadow: var(--boxShadowL2);
    transition: var(--Transition300);
}

.certificate-item figure:hover {
    box-shadow: var(--boxShadowHover);
    cursor: pointer;
}

.subset-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    border: 0.0625rem solid var(--borderColor);
    background-color: var(--whiteColor);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
}

.subset-item .subset-logo {
    max-height: 6.25rem;
}

.subset-item p {
    padding: 1rem;
    text-align: justify;
    background-color: var(--grayBack);
    border-radius: var(--borderRadius);
    color: var(--textColorL5);
    font-size: 0.9375rem;
    font-weight: 300;
}

/*================================ Blog Page ==============================*/

.blog-sidebar .title {
    margin-bottom: 0.75rem;
    line-height: 2;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--darkBack);
    text-shadow: var(--textShadowL1);
    position: relative;
}

.blog-sidebar .title::after {
    content: "";
    width: 35%;
    height: 0.15rem;
    background-color: var(--mainColor);
    display: block;
}

.blog-sidebar .search-box {
    padding: 0.625rem;
}

.blog-categories ul {
    gap: 0.125rem;
}

.blog-categories a {
    font-size: 1rem;
    font-weight: 400;
    color: var(--textColorL4);
}

.blog-categories a:hover {
    color: var(--mainColor);
}

.popular-articles-section {
    position: sticky;
    top: 5.625rem;
}

.sidebar-articles-list {
    list-style: none;
}

.sidebar-article-item {
    border-bottom: 0.0625rem solid var(--borderColor);
    padding-bottom: 1rem;
}

.sidebar-article-item > a {
    display: flex;
    gap: 1rem;
}

.sidebar-article-item figure {
    border-radius: var(--borderRadius);
    width: 5rem;
}

.sidebar-article-item img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.sidebar-article-textual-content {
    justify-content: center;
    flex-direction: column;
    display: flex;
    gap: 0.625rem;
}

.sidebar-article-textual-content .sidebar-article-title {
    text-shadow: var(--textShadowL1);
    color: var(--textColorL3);
    font-size: 0.875rem;
}

.sidebar-article-textual-content .sidebar-article-date {
    color: var(--textColorL7);
    font-size: 0.8125rem;
}

.sidebar-articles-list .sidebar-article-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

/*================================ Blog Single Page ==============================*/

.blog-single-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    text-align: justify;
}

.blog-single-page .article-sub-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.blog-single-page .article-thumbnail {
    border-radius: var(--borderRadius);
    margin-bottom: 1rem;
    max-width: 100%;
    flex: 1;
}

.blog-single-page .article-thumbnail img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.blog-single-page p {
    color: var(--textColorL5);
    font-size: 0.9375rem;
}

.share-article {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.share-article .title {
    font-size: 0.8375rem;
    font-weight: 500;
    color: var(--darkBack);
}

/*================================ Products Page ==============================*/
.products-types {
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    gap: 1rem;
}

.product-type {
    color: var(--textColorL4);
    align-items: center;
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    gap: 0.25rem;
}

.product-type i {
    color: var(--mainColor);
}

.foreign-partners .section-thumbnail {
    aspect-ratio: 16/9;
    border: 0.125rem solid var(--darkBack);
    border-radius: 0.75rem;
}

/*================================ Product Single Page ==============================*/
.product-hero-section {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    height: calc(100vh - 4.375rem);
    max-height: 40.625rem;
    z-index: 1;
    padding: 1rem 0 5rem 0;
}

.product-hero-section::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: auto;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 50, 0.5);
}

.product-hero-image {
    position: absolute;
    z-index: -2;
    inset: 0;
    margin: auto;
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.product-hero-section .section-title {
    margin-block: auto;
    max-width: 50rem;
    gap: 0.5rem;
}

.product-hero-section .section-title .title,
.product-hero-section .section-title p,
.product-hero-section .page-breadcrumb a,
.product-hero-section .page-breadcrumb .last {
    color: var(--whiteColor);
}

.product-hero-section .section-title .product-type,
.product-hero-section .section-title .product-type i {
    color: var(--secondColor);
    opacity: 0.9;
}

.product-hero-section .section-title a {
    background-color: var(--whiteColor);
}

.product-page-card {
    border-radius: 2rem;
    background-color: var(--whiteColor);
    border: 0.0625rem solid var(--borderColor);
    padding: 2rem 3rem;
    margin-bottom: 3rem;
}

.product-detail-section {
    margin-top: -4rem;
    z-index: 2;
    position: relative;
}

.product-detail-section p {
    color: var(--textColorL5);
    text-align: justify;
    font-weight: 500;
    font-size: 1rem;
    line-height: 2;
}

.galley-image-item {
    border-radius: var(--borderRadius);
    aspect-ratio: 4/3;
    border: 0.0625rem solid var(--borderColor);
}

.galley-image-item img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
}

.feature-card.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feature-card.product p {
    text-align: center;
}

.feature-card.product figure {
    align-items: center;
    padding: 0.75rem;
    max-width: 6rem;
    aspect-ratio: 1/1;
}

.product-description-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
}

.product-description-list li {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.product-description-list li p {
    margin: 0;
    font-weight: 400;
    color: var(--textColorL7);
    font-size: 0.9375rem;
}

.product-description-list li .li-counter {
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--thirdColor);
    color: var(--whiteColor);
    border-radius: var(--borderRadius);
}

.product-description-list.production-steps {
    gap: 2rem;
}

.product-description-list.production-steps li {
    flex-direction: column;
    align-items: flex-start;
}

.product-description-list.production-steps .title-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-description-list.production-steps .title-box .title {
    font-weight: bold;
    color: var(--thirdColor);
    margin: 0;
}

.production-steps-galley figure {
    height: 100%;
    border-radius: var(--borderRadius);
    border: 0.0625rem solid var(--borderColor);
}

.production-steps-galley figure img {
    min-height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.project-road-image {
    max-width: 50rem;
    margin: auto;
}

.product-catalog-image img {
    max-height: 15.625rem;
    width: auto;
}

.product-detail-section .section-title {
    max-width: 52.5rem;
}

.product-detail-section .simple-card {
    border: 0.0625rem solid var(--borderColor);
    box-shadow: var(--boxShadow);
}

.product-detail-section .simple-card p {
    text-align: center;
}

.about-image {
    height: 300px;
    box-shadow: 0 0 3px 2px lightgreyt;
}

/*============================ END OF Main Styles ============================*/

/**========================================================================
 *                              Footer Section
 *========================================================================**/

footer {
    background-color: rgb(42, 58, 110);
    color: var(--lightTextColor);
}

.footer-main-section,
.footer-contact-section {
    padding: 2rem 0;
}

footer .title {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

footer a {
    color: var(--lightTextColor);
    opacity: 0.8;
}

footer a:hover {
    color: var(--lightTextColor);
    opacity: 1;
}

footer p {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #cacfd8;
    text-align: justify;
}

.social-medias-list {
    list-style: none;
    gap: 0.625rem;
    display: flex;
}

/*================================ Footer CTA Section ==============================*/

.footer-cta-section {
    background-color: #002963;
    padding: 2rem 0;
}

.footer-cta-section .title {
    color: var(--footerTextColor);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 2.125rem;
}

.footer-cta-section p {
    color: var(--footerTextColor);
    font-weight: bold;
}

.footer-cta-section .default-button {
    font-weight: bold;
    background-color: var(--whiteColor);
    font-size: var(--card-title-fontSize);
    padding-inline: 1.75rem;
    opacity: 1;
}

/*================================ Footer Company Description ==============================*/

.footer-description figure {
    max-height: 6.25rem;
    max-width: 12.5rem;
    margin-bottom: 1rem;
}

.footer-description p {
    font-size: 0.875rem;
    color: #cacfd8;
    text-align: center;
}

.footer-description .social-medias-list .social-link {
    font-size: 1.25rem;
}

.social-medias-list .social-link {
    transition: var(--Transition300);
    color: var(--grayTextColor);
    font-size: 1.25rem;
    padding: 0.1875rem;
    line-height: 0;
}

.social-medias-list .social-link:hover {
    color: var(--primaryColor);
}

/*================================ Footer Links Section ==============================*/

.footer-links-section ul {
    flex-direction: column;
    list-style: none;
    display: flex;
    gap: 0.375rem;
}

.footer-links-section ul li a {
    font-size: 0.875rem;
}

.footer-symbol-card figure {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--borderRadius);
    width: 100%;
    max-width: 6.875rem;
    aspect-ratio: 1/1;
    padding: 0.5rem;
}

/*================================ Footer Contact Section ==============================*/
.footer-contact-section {
    border-block: 0.0625rem solid var(--borderColor);
}

.footer-contact-item {
    display: flex;
    gap: 0.5rem;
}

.footer-contact-item i {
    font-size: 1.5rem;
    color: #fabd23;
}

.footer-contact-item .contact-content {
    flex-direction: column;
    display: flex;
    gap: 0.25rem;
}

.footer-contact-item .contact-content a,
.footer-contact-item .contact-content p {
    font-size: var(--sub-title-fontSize);
    color: var(--footerTextColor);
    transition: var(--Transition300);
    opacity: 1;
    margin: 0;
}

.footer-contact-item .contact-content a:hover,
.footer-contact-item .contact-content p:hover {
    color: #fabd23;
}

.footer-contact-item .contact-content span {
    font-size: 0.9375rem;
    color: #a2a6b0;
}

/*================================ Footer Copyright==============================*/

.footer-copyright {
    background-color: #002963;
    border-top: 0.0625rem solid var(--borderColor);
    padding: 0.75rem 0;
    margin-top: 1.25rem;
}

.footer-copyright p {
    font-size: 0.875rem;
    margin: 0;
}

/*============================ END OF Footer ============================*/

/**========================================================================
 *                           Fixed Elements
 *========================================================================**/
/*================================ Scroll Up Button ==============================*/

#scrollToTop {
    box-shadow: 0 0 0.5625rem rgba(0, 0, 0, 0.12);
    visibility: hidden;
    position: fixed;
    padding: 0.5rem;
    aspect-ratio: 1/1;
    bottom: 0.9375rem;
    right: 0.9375rem;
    z-index: 100;
    cursor: pointer;
    transition: var(Transition300);
    background-color: var(--whiteColor);
}

#scrollToTop i {
    font-size: 1.25rem;
}

#scrollToTop:hover::before {
    width: 300%;
}

/*================================ Fixed Menu ==============================*/

.fixed-menu {
    box-shadow: 0 -0.0625rem 0.5625rem 0.0625rem rgba(0, 0, 0, 0.1);
    background-color: var(--whiteColor);
    border-radius: 0.5rem 0.5rem 0 0;
    padding-block: 0.75rem 0.375rem;
    align-items: center;
    inset: auto 0 0 0;
    max-width: 25rem;
    position: fixed;
    display: flex;
    margin: auto;
    z-index: 10;
    width: 100%;
}

.fixed-menu .fixed-menu-item {
    flex: 1;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    gap: 0.5rem;
    color: var(--thirdColor);
}

.fixed-menu .fixed-menu-item .fixed-menu-item-title {
    font-size: 0.9375rem;
    line-height: 1;
}

/**========================================================================
  *                           Modals
  *========================================================================**/
/*================================ Search Modal ==============================*/

#SearchBoxModal {
    background-color: rgba(217, 217, 217, 0.6);
    backdrop-filter: blur(0.625rem);
    height: 100%;
}

#SearchBoxModal .btn-close {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background-size: 1.5rem;
}

#SearchBoxModal .search-modal {
    height: 100%;
    display: flex;
    align-items: center;
    margin: auto;
}

#SearchBoxModal .search-modal-content {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 2rem;
}

#SearchBoxModal .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.modal-search-input {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.modal-search-input input {
    padding: 0.625rem 0.625rem 0.625rem 2.1875rem;
    border: none;
    border-bottom: 0.0625rem solid var(--borderColor);
    background-color: transparent;
    padding-bottom: 0.75rem;
    font-size: 1.125rem;
    font-weight: bolder;
    line-height: 1.5;
    color: var(--textColorL0);
    outline: none;
    width: 100%;
}

.modal-search-input input::placeholder {
    font-size: 1.125rem;
    font-weight: bolder;
    line-height: 1.5;
    color: var(--color5);
}

.modal-search-input a {
    position: absolute;
    font-size: 1.5rem;
    color: var(--textColorL1);
    line-height: 1;
    inset: 0 auto 0 0.25rem;
    margin: auto;
}

/*================================ Mobile Menu Navigation ==============================*/

#mobileMenuNavigation {
    transition: all 0.5s linear;
    background: rgba(0, 0, 0, 0);
}

#mobileMenuNavigation.show {
    background: rgba(0, 0, 0, 0.5);
}

#mobileMenuNavigation .modal-dialog {
    transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86), -webkit-transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
    opacity: 1;
    visibility: visible;
    transform: translate(0);
    transform: translatex(100%);
    margin: 0;
    margin-left: auto;
    max-width: 22.5rem;
}

.mobile-navigation-logo img {
    max-height: 4.375rem;
}

.search-box {
    position: relative;
    width: 100%;
    padding: 1rem 0.5rem;
    border-bottom: solid 0.0625rem var(--secondColor);
}

.search-box input {
    width: 100%;
    border-radius: var(--borderRadius);
    border: 0.0625rem solid var(--borderColor);
    transition: var(--Transition300);
    padding: 0.5rem;
}

.search-box input:hover,
.search-box input:focus {
    border-color: var(--mainColor);
    box-shadow: none;
    outline: none;
}

.search-box button {
    all: unset;
    position: absolute;
    inset: 0 auto 0 1.25rem;
    margin: auto;
    color: var(--darkBack);
}

#mobileMenuNavigation .modal-dialog .modal-content {
    border-radius: 0;
    background-color: var(--mobileMenuColor);
    max-height: 100vh;
    overflow-y: auto;
}

#mobileMenuNavigation.show .modal-dialog {
    transform: translatex(0);
    transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86), -webkit-transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
}

#mobileMenuNavigation .btn-close {
    color: var(--lightTextColor);
    background: none;
    font-size: 3rem;
    opacity: 0.8;
    padding: 0;
    left: 1.5625rem;
    top: 0.75rem;
}

.btn-close:focus {
    outline: none;
    box-shadow: none;
}

/*================================ Mobile Navigation ==============================*/

.mobile-navigation-item {
    border-bottom: 0.0625rem solid var(--mobileMenuBorderColor);
    width: 100%;
}

.mobile-navigation-item-link,
.mobile-navigation-item-title {
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    padding: 0.625rem;
    padding-left: 0.625rem;
    width: 100%;
    font-size: 1rem;
    font-weight: 300;
    transition: var(--Transition300);
    color: rgba(0, 0, 0, 0.7);
}

.mobile-navigation-item-title:hover,
.mobile-navigation-item-link:hover,
.open-mobile-navigation-accordion > a {
    color: rgb(0, 0, 0);
    transition: var(--Transition300);
}

.mobile-navigation-item-link {
    font-size: 0.9375rem;
    padding-right: 2.5rem;
}

.mobile-navigation-item-link:has(.fa) {
    padding: 0.625rem 2.5rem;
}

.mobile-navigation-accordion li {
    border-top: 0.0625rem solid var(--mobileMenuBorderColor);
}

.mobile-navigation-item-title .fa,
.mobile-navigation-item-link .fa {
    border-right: 0.0625rem solid var(--mobileMenuBorderColor);
    height: 100%;
    padding: 0 0.75rem;
    position: absolute;
    transition: var(Transition300);
    left: 0;
}

.mobile-navigation-accordion {
    visibility: hidden;
    overflow: hidden;
    max-height: 0;
    padding: 0;
}

.mobile-navigation-item .fa::before {
    transition: var(--Transition300);
}

.open-mobile-navigation-accordion > .mobile-navigation-accordion {
    opacity: 1;
    visibility: visible;
    background-color: var(--mobileMenuAccordionBack);
    max-height: 187.5rem;
    overflow-y: auto;
}

.open-mobile-navigation-accordion > a .fa::before {
    transform: rotate(-180deg);
}

/**========================================================================
 *                           Responsive
 *========================================================================**/
/*================================  LG Monitor ==============================*/

@media (max-width: 75rem) {
    header .container {
        max-width: 100%;
        padding-inline: 1.5rem;
    }
}

/*================================  MD Monitor  ==============================*/

@media (max-width: 63.9375rem) {
    .header-logo {
        padding-bottom: 0.625rem;
        margin-bottom: unset;
    }

    .about-img {
        max-width: 31.25rem;
    }
}

/*================================ Tablet ==============================*/

@media (max-width: 47.9375rem) {
    .company-description .section-title {
        text-align: center;
        margin: 0;
    }

    .company-description .section-thumbnail {
        max-width: 25rem;
        margin: 0 auto;
    }
}

/*================================ Phone ==============================*/

@media (max-width: 35.9375rem) {
    header .container {
        padding-inline: 0.5rem;
    }

    header .container .row {
        margin-right: 0;
        margin-left: 0;
    }

    header .container .row > * {
        padding-right: 0.125rem;
        padding-left: 0.125rem;
    }

    .header-contact {
        align-items: flex-end;
    }

    .language-select-box a {
        aspect-ratio: 1/1;
        justify-content: center;
        min-height: 2.5rem;
        min-width: unset;
    }

    .language-select-box a span {
        display: none;
    }

    .language-select-box a img {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        width: 100%;
        max-width: 1.375rem;
    }

    .language-select-box ul {
        min-width: unset;
    }

    .language-select-box ul li a {
        min-height: 2.5rem;
    }

    .hero-slider .swiper-slide .container {
        padding: 2rem 1rem 5rem 1rem;
    }

    .product-hero-section {
        height: fit-content;
    }

    #mobileMenuNavigation .modal-dialog {
        max-width: 62.5rem;
    }

    #mobileMenuNavigation .btn-close {
        color: var(--textColorL1);
        font-size: 2rem;
        top: 0.625rem;
        left: 0.625rem;
    }

    #scrollToTop {
        bottom: 4.375rem;
    }

    .fixed-menu {
        border-radius: 0;
        max-width: unset;
    }
}

/*================================================
Animation Area CSS
=================================================*/
@-webkit-keyframes round-shape {
    0% {
        border-radius: 37% 63% 63% 37% / 50% 50% 50% 50%;
    }

    35% {
        border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
    }

    70% {
        border-radius: 70% 30% 30% 70% / 50% 50% 50% 50%;
    }
}

@keyframes round-shape {
    0% {
        border-radius: 37% 63% 63% 37% / 50% 50% 50% 50%;
    }

    35% {
        border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
    }

    70% {
        border-radius: 70% 30% 30% 70% / 50% 50% 50% 50%;
    }
}

@-webkit-keyframes spins {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
    }
}

@keyframes spins {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
    }
}

@-webkit-keyframes half-spins {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes half-spins {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.service-card-content img {
    height: 50px;
}

.nav-index ul li{
    padding-bottom: 20px;
}