@import "https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700&display=swap";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    border: none;
    outline: none;
}

a {
    text-decoration: none !important;
}

/* p,
h1,
h2 {
    margin-bottom: 0 !important;
} */

* {
    font-family: vazirmatn, sans-serif;
}

body,
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
    position: relative;
}

[dir="ltr"] body,
[dir="ltr"] html {
    direction: ltr;
    font-family: vazirmatn, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] html {
    direction: rtl;
    font-family: vazirmatn, sans-serif;
}

.container {
    max-width: 1190px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.section {
    padding-top: 124px;
    padding-bottom: 124px;
    transition: display 0.5s ease;
    -webkit-transition: display 0.5s ease;
    -moz-transition: display 0.5s ease;
    -ms-transition: display 0.5s ease;
    -o-transition: display 0.5s ease;
}

.section .title-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 70px;
}

.section .title-section>h1 {
    text-align: center;
    font-size: 60px;
    font-weight: 600;
    line-height: 100px;
    color: var(--main-header-col);
    text-shadow: 0 3px 6px #00000029;
}

.section .title-section>p {
    text-align: center;
    max-width: 1000px;
    line-height: 24px;
    color: var(--footer-col);
}

[dir="ltr"] .section .title-section>p {
    font-size: 19px;
}

[dir="rtl"] .section .title-section>p {
    font-size: 20px;
}

.section .title-section.title-section-page {
    margin: 50px 0;
    gap: 10px;
    font-size: 1.1rem;
    flex-direction: column;
    align-items: flex-start;
}

.section .title-section.title-section-page .constant-title-page {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.section .title-section.title-section-page .constant-title-page>a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--main-header-col);
    font-weight: 700;
}

.section .title-section.title-section-page .constant-title-page>a i {
    font-size: 1rem;
    margin-bottom: 4px;
}

.section .title-section.title-section-page .constant-title-page>span {
    font-size: 1rem;
    color: var(--main-header-col);
}

.section .title-section.title-section-page .constant-title-page>h3 {
    color: var(--main-header-col);
    font-weight: 500;
}

.section .title-section.title-section-page>h1 {
    color: var(--main-header-col);
    font-size: 45px;
    line-height: 80px;
    margin: 1rem 0;
    position: relative;
}

.section .read-more.general-btn .read-more-btn {
    --shadow-hover: rgb(255, 255, 255);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.72px;
    color: var(--dark-col);
    margin-top: 20px;
    background-color: var(--shadow-hover);
    padding: 15px 40px 10px;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.section .read-more.general-btn .read-more-btn button {
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.7);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.section .read-more.general-btn .read-more-btn:hover {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    box-shadow: 0 1px 25px var(--shadow-hover);
}

.edit-part {
    display: none;
    --width: 300px;
    max-width: var(--width);
    width: 100%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #fff;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    z-index: 20;
}

[dir="ltr"] .edit-part {
    left: calc(var(--width) * -1);
}

[dir="rtl"] .edit-part {
    right: calc(var(--width) * -1);
}

.section:hover .edit-part {
    display: block;
}

[dir="ltr"] .edit-part:hover {
    left: 0;
}

[dir="rtl"] .edit-part:hover {
    right: 0;
}

.edit-part .header-edit-part {
    max-width: 300px;
    width: 100%;
    height: 45px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 3px 6px #00000029;
    padding: 11px;
}

.edit-part .header-edit-part>h2 {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: -0.6px;
    color: var(--footer-col);
}

.edit-part .header-edit-part>h3 {
    position: absolute;
    top: 0;
    bottom: 0;
    font-size: 10px;
    line-height: 18px;
    letter-spacing: -0.4px;
    color: var(--footer-col);
    background: #fff 0% 0% no-repeat padding-box;
    box-shadow: 0 3px 6px #00000029;
    height: 100%;
    width: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

[dir="ltr"] .edit-part .header-edit-part>h3 {
    right: -3rem;
}

[dir="rtl"] .edit-part .header-edit-part>h3 {
    left: -3rem;
}

.edit-part .header-edit-part>h3 span {
    font-size: 1.1rem;
}

.edit-part .change-edit-part {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.edit-part .change-edit-part .change-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}

.edit-part .change-edit-part .change-container>label {
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.6px;
    color: var(--footer-col);
}

.edit-part .change-edit-part .change-container .dropdown-colors {
    display: flex;
    flex-direction: column;
    max-width: 120px;
    width: 100%;
    position: relative;
}

.edit-part .change-edit-part .change-container.change-header-logo {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.edit-part .change-edit-part .change-container .dropdown-colors .select-color,
.edit-part .change-edit-part .change-container.change-header-logo .select-color {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    width: 100%;
    cursor: pointer;
    position: relative;
}

.edit-part .change-edit-part .change-container.change-header-logo .select-color {
    width: 215px;
    height: 60px;
    margin: 0 auto;
}

.edit-part .change-edit-part .change-container .dropdown-colors .select-color .selected-color,
.edit-part .change-edit-part .change-container.change-header-logo .selected-color {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: 1px solid rgba(100, 100, 111, 0.2);
    color: #000;
    padding-left: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.edit-part .change-edit-part .change-container.change-header-logo .selected-color {
    background-color: #fff;
}

.edit-part .change-edit-part .change-container .dropdown-colors .select-color .caret,
.edit-part .change-edit-part .change-container.change-header-logo .caret {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

[dir="ltr"] .edit-part .change-edit-part .change-container .dropdown-colors .select-color .caret,
[dir="ltr"] .edit-part .change-edit-part .change-container.change-header-logo .caret {
    right: 5px;
}

[dir="rtl"] .edit-part .change-edit-part .change-container .dropdown-colors .select-color .caret,
[dir="rtl"] .edit-part .change-edit-part .change-container.change-header-logo .caret {
    left: 5px;
}

.edit-part .change-edit-part .change-container .dropdown-colors .menu-colors,
.edit-part .change-edit-part .change-container.change-header-logo ul {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: absolute;
    top: 2rem;
    z-index: 50;
    width: 120px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: 2px solid rgba(100, 100, 111, 0.2);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

[dir="ltr"] .edit-part .change-edit-part .change-container .dropdown-colors .menu-colors,
[dir="ltr"] .edit-part .change-edit-part .change-container.change-header-logo ul {
    right: 0;
}

[dir="rtl"] .edit-part .change-edit-part .change-container .dropdown-colors .menu-colors,
[dir="rtl"] .edit-part .change-edit-part .change-container.change-header-logo ul {
    left: 0;
}

.edit-part .change-edit-part .change-container.change-header-logo ul {
    width: 215px;
    top: 5.2rem;
    left: 1.7rem;
}

.edit-part .change-edit-part .change-container .dropdown-colors .menu-colors.active-menu,
.edit-part .change-edit-part .change-container.change-header-logo ul.active-menu {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.edit-part .change-edit-part .change-container .dropdown-colors .menu-colors>li,
.edit-part .change-edit-part .change-container.change-header-logo ul>li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    max-width: 120px;
    width: 100%;
    cursor: pointer;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: 1px solid rgba(100, 100, 111, 0.2);
}

.edit-part .change-edit-part .change-container.change-header-logo ul>li {
    height: 60px;
    max-width: 215px;
    width: 100%;
}

.edit-part .change-edit-part .change-container.change-header-logo ul>li img,
.edit-part .change-edit-part .change-container.change-header-logo .selected-color>img {
    width: 100%;
    height: 50px;
    aspect-ratio: 1/1;
    object-fit: contain;
    object-position: center;
}

.edit-part .change-edit-part .change-container.change-bg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.edit-part .change-edit-part .change-container .label-upload-file,
.edit-part .change-edit-part .change-container .label-remove-file {
    border: 1px solid rgba(100, 100, 111, 0.2);
    padding: 10px 1rem;
    margin: 0 auto;
    max-width: 200px;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.edit-part .change-edit-part .change-container .label-upload-file__wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.edit-part .change-edit-part .change-container .label-upload-file__con {
    width: calc(100% / 2);
}

.edit-part .change-edit-part .change-container .label-upload-file {
    width: 100%;
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
}

.edit-part .change-edit-part .change-container .label-upload-file::after {
    position: absolute;
    inset: 0;
    content: "";
    background-color: rgba(255, 255, 255, 0.4);
    z-index: -1;
}

.edit-part .change-edit-part .change-container .label-upload-file>h3,
.edit-part .change-edit-part .change-container .label-remove-file>h3 {
    font-size: 16px;
    margin-bottom: 0;
}

:root {
    --main-header-col: #5f2171;
    --sub-header-col: #321f5f;
    --light-col: #f5f5f5;
    --page-col: #c8c8c8;
    --dark-col: #294686;
    --btn-col: #b600f8;
    --footer-col: #4a4c50;
    --trans: all 0.5s ease;
}

.section-wrapper {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (min-width: 1334px) {
    .section-wrapper {
        background-attachment: fixed !important;
    }
}

.aaa {
    transition: 1s ease;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
    height: 100px;
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.header {

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
    height: 100px;
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.header:hover .edit-part {
    display: block;
}

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

.header .container,
.header nav,
.header nav .logo,
.header nav .logo a,
.header nav .logo a img {
    height: 100%;

}


.header nav .logo {
    max-width: 200px;
}

.header nav .logo a,
.header nav .logo a>img {
    display: flex;
    align-items: center;
    width: 100%;
    object-fit: contain;
}

.header nav .kkk {
    transform: translate3d(0, 80%, 0);
    animation: slider-text 2s ease forwards;
    -webkit-animation: slider-text 2s ease forwards;
    animation-delay: 0.5s;
}

.header nav .header-links {
    /* transform: translate3d(0, 80%, 0);
    animation: slider-text 2s ease forwards;
    -webkit-animation: slider-text 2s ease forwards;
    animation-delay: 0.5s; */
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 0;
}

.header nav .header-links .header-link a,
.header nav .header-links .header-link .btn,
.header nav .header-links .pages-span {
    line-height: 1.5;
    font-weight: 700;
    text-transform: uppercase;

    cursor: pointer;
    text-decoration: none;
}

[dir="ltr"] .header nav .header-links .header-link a,
[dir="ltr"] .header nav .header-links .pages-span {
    font-size: 17px;
}

[dir="rtl"] .header nav .header-links .header-link a,
[dir="rtl"] .header nav .header-links .pages-span {
    font-size: 19px;
}

.header nav .header-links .header-link .dropdown-item {
    padding: 10px 20px;
    font-size: 16px !important;
}

.header nav .header-links .header-link .dropdown-item.active,
.header nav .header-links .header-link .dropdown-item:active,
.header nav .header-links .header-link .dropdown-item:hover {
    background-color: transparent;
}

.header nav .header-links .header-link.header-language a {
    line-height: 1.5;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--main-header-col);
    cursor: pointer;
}

.header nav .toggle-bars {
    display: none;
}

.header nav .toggle-bars>i {
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--main-header-col);
}

.header nav .toggle-bars .menuButton {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 13%;
    width: 3.5em;
    height: 3.5em;
    border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -ms-border-radius: 0.5em;
    -o-border-radius: 0.5em;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.header nav .toggle-bars input[type="checkbox"] {
    -webkit-appearance: none;
    display: none;
    visibility: hidden;
}

.mmo {
    background: rgba(255, 255, 255, 0.5);

}

/* .mmo{
    width: 100%;
    justify-content: center;
    text-align: center;
    align-items: center;
} */
.header nav .toggle-bars .menuButton span {
    width: 30px;
    height: 4px;
   
    cursor: pointer;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.header nav .toggle-bars input[type]:checked~span.top {
    transform: translateY(290%) rotate(45deg);
    -webkit-transform: translateY(290%) rotate(45deg);
    -moz-transform: translateY(290%) rotate(45deg);
    -ms-transform: translateY(290%) rotate(45deg);
    -o-transform: translateY(290%) rotate(45deg);
}

.header nav .toggle-bars input[type]:checked~span.bot {
    transform: translateY(-270%) rotate(-45deg);
    -webkit-transform: translateY(-270%) rotate(-45deg);
    -moz-transform: translateY(-270%) rotate(-45deg);
    -ms-transform: translateY(-270%) rotate(-45deg);
    -o-transform: translateY(-270%) rotate(-45deg);
}

.header nav .toggle-bars input[type]:checked~span.mid {
    opacity: 0;
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
}

.header .edit-part {
    top: calc(100% + 3rem);
}

.header .dropdown-li {
    position: relative;
}

[dir="rtl"] .dropdown-toggle::after {
    margin-right: 0.255em;
}


.slider-section {
    height: 100vh;
    background: #f5f5f5;
    position: relative;
}

.slider-section:hover .edit-part {
    display: block;
}

.slider-section input[name="radio"] {
    display: none;
}

.slider-section .slides {
    height: 100%;
}

.slider-section .slides .carousel-inner .carousel-item {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (min-width: 1334px) {
    .slider-section .slides .carousel-inner .carousel-item {
        background-attachment: fixed;
    }
}

.slider-section .slides .slide .container {
    text-align: start;
}

.slider-section .slider-text:has(.slider-text-h1) {
    margin-top: 28vh;
}

.slider-section .slider-text:not(:has(.slider-text-h1)) {
    margin-top: 38vh;
}

.slider-section .slider-text {
    max-width: 900px;
    transform: translate3d(0, 80%, 0);
    animation: slider-text 2s ease forwards;
    -webkit-animation: slider-text 2s ease forwards;
    animation-delay: 0.5s;
    opacity: 0;
}

/* video{
    position:absolute;
    height:100%;
    width:100%;
     overflow: hidden;
     object-fit: cover;
    
} */

.slider-section .slider-text .slider-text-h1 {
    font-weight: 700;
    font-size: clamp(50px, 7.0vw, 100px);
    line-height: 4.4vw;
    color: var(--sub-header-col);
    text-shadow: 0 3px 6px #00000029;
    margin-bottom: 0 !important;
}

[dir="rtl"] .slider-section .slider-text .slider-text-h1 {
    margin-bottom: 26px !important;
}

.slider-section .slider-text .slider-text-h2 {
    font-size: clamp(30px, 2.6vw, 30px);
    line-height: 32px;
    color: var(--main-header-col);
    text-shadow: 0 3px 6px #00000014;
    font-weight: 500;
    margin: 16px 0 10px !important;
}

.slider-section .slider-text .slider-text-p {
    font-size: clamp(16px, 1vw, 20px);
    color: var(--footer-col);
    text-shadow: 0 3px 6px #00000029;
    margin-bottom: 0;
    margin: 10px 0 5px !important;
}

.slider-section .slider-text .slider-text-btn {
    color: var(--light-col);
    width: fit-content;
    padding: 12px 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--btn-col);
    cursor: pointer;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    margin-top: 24px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.slider-section .slider-text .slider-text-btn button {
    font-size: 20px;
    line-height: 28px;
    background-color: rgba(255, 255, 255, 0.7);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 500;
}

.slider-section .slider-text .slider-text-btn:hover {
    --shadow-hover: var(--btn-col);
    box-shadow: 0 1px 20px var(--shadow-hover);
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}

.slider-section .slides .carousel-indicators [data-bs-target] {
    background-color: var(--sub-header-col);
}

.slider-section.local-video-section #background-video {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1099px) {
    .slider-section.local-video-section #background-video {
        width: auto;
        height: 100%;
    }
}

.slider-section.local-video-section .slides {
    position: relative;
}

.slider-section.local-video-section .slides .slider-text {
    animation-delay: 3s;
}

.slider-section.local-video-section .slider-text:has(.slider-text-h1) {
    padding-top: 28vh;
    margin: 0;
}

.slider-section.local-video-section .slider-text:not(:has(.slider-text-h1)) {
    padding-top: 38vh;
    margin: 0;
}

.slider-section.youtube-video-section #background-video {
    width: 100vw;
    height: 100vh;
}

.slider-section.youtube-video-section #background-video iframe {
    position: absolute;
    /* bottom: 0; */

    width: 100vw;
    height: 100vh;
    pointer-events: none;
    visibility: hidden;
}

@media (min-aspect-ratio: 16/9) {
    .slider-section.youtube-video-section #background-video video {
        height: 56.25vw;
    }
}

@media (max-aspect-ratio: 16/9) {
    .slider-section.youtube-video-section #background-video video {
        width: 177.78vh;
    }
}

.slider-section.youtube-video-section #background-video video.active-video {
    visibility: visible;
}

.slider-section.youtube-video-section #background-video img {
    position: relative;
    visibility: visible;
    width: 100%;
}

.slider-section.youtube-video-section #background-video img.active-img {
    visibility: hidden;
}

.slider-section.youtube-video-section .slides .slider-text {
    position: absolute;
    top: 0;
}

.slider-section.youtube-video-section .slider-text:has(.slider-text-h1) {
    /* padding-top: 28vh; */
    /* margin: 0; */
    margin-top: 45vh;
}

.slider-section.youtube-video-section .slider-text:not(:has(.slider-text-h1)) {
    padding-top: 38vh;
    margin: 0;
}

.about-section {
    background: var(--dark-col) 0% 0% no-repeat padding-box;
    position: relative;
}

@media (max-width:1200px) and (min-width:767px) {
    .about-section .about-content .about-info p {
        margin-right: 120px;
    }
}

@media (max-width:767px) and (min-width:10px) {
    .about-section .about-content .about-info {
        padding: 12px;
    }
}


@media (max-width:3000px) and (min-width:1024px) {
    .new {
        margin-top: -150px;

    }

    .new-2 {
        margin-top: -30px;
    }
}



.about-section .about-content .about-info {

    display: flex;
    align-items: center;
    gap: 120px;
}

.about-section .about-content .about-info .logo {
    max-width: 250px;
    height: 250px;
}

.about-section .about-content .about-info .logo>a,
.about-section .about-content .about-info .logo>a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* [dir="ltr"] .about-section .about-content .about-info .about-text.padding-active {
    padding-left: 180px;
} */

[dir="rtl"] .about-section .about-content .about-info .about-text.padding-active {
    padding-right: 180px;
}

.about-section .about-content .about-info .about-text h1 {
    font-size: 60px;
    line-height: 80px;
    margin-bottom: 2rem !important;
    color: var(--light-col);
    text-shadow: 0 3px 6px #00000029;
}

.about-section .about-content .about-info .about-text p {
    line-height: 32px;
    color: var(--light-col);
    margin-bottom: 7px;
    max-width: 700px;
    text-align: justify;
}

[dir="ltr"] .about-section .about-content .about-info .about-text p {
    font-size: 18px;
}

[dir="rtl"] .about-section .about-content .about-info .about-text p {
    font-size: 20px;
}

.about-section .about-content .read-more.general-btn {
    display: flex;
    justify-content: flex-end;
}

.about-section .about-content .about-statistics {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 60px 0;
}

.about-section .about-content .about-statistics .statistic {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.about-section .about-content .about-statistics .statistic h1 {
    direction: ltr;
    font-size: 40px;
    font-weight: 700;
    color: var(--light-col);
    /* margin-bottom: 6px !important; */
}

.about-section .about-content .about-statistics .statistic .delimiter {
    color: var(--light-col);
}

.about-section .about-content .about-statistics .statistic h2 {
    color: var(--light-col);
    font-weight: 500;
}

[dir="ltr"] .about-section .about-content .about-statistics .statistic h2 {
    font-size: 24px;
}

[dir="rtl"] .about-section .about-content .about-statistics .statistic h2 {
    font-size: 25px;
}

body.general-page-body {
    position: relative;
}

body.general-page-body .general-bg-img-page {
    position: absolute;
    background-image: url(../img/page-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    z-index: 1;
    top: 0;
    left: 0;
}

.section.section-page,
.section.details-page {
    padding-bottom: 0;
}

.section .general__content {
    background-color: #fff;
     padding: 100px 50px 400px; 
    border-radius: 10px 10px 0 0 !important;
    -webkit-border-radius: 10px 10px 0 0 !important;
    -moz-border-radius: 10px 10px 0 0 !important;
    -ms-border-radius: 10px 10px 0 0 !important;
    -o-border-radius: 10px 10px 0 0 !important;
    position: relative;
    z-index: 1;
}
/*.section .general__content-2 {*/
/*    background-color: #fff;*/
/*    padding: 100px 50px 400px;*/
/*    border-radius: 10px 10px 0 0 !important;*/
/*    -webkit-border-radius: 10px 10px 0 0 !important;*/
/*    -moz-border-radius: 10px 10px 0 0 !important;*/
/*    -ms-border-radius: 10px 10px 0 0 !important;*/
/*    -o-border-radius: 10px 10px 0 0 !important;*/
/*    position: relative;*/
/*    z-index: 1;*/
/*}*/

.about-section.about-page {
    background: var(--page-col);
    position: relative;
    padding-bottom: 0;
}

.about-page-body .container {
    max-width: 1400px;
    padding-left: 4rem;
    padding-right: 4rem;
}

.about-section.about-page .about-content .about-info .about-text h1 {
    color: var(--dark-col);
    text-shadow: none;
}

.about-section.about-page .about-content {
    padding: 100px 100px 400px;
    background: #fff;
    margin-top: 8rem;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    -ms-border-radius: 10px 10px 0 0;
    -o-border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 2;
}

.about-section.about-page .about-content .about-info .about-section__content-container {
    display: flex;
    gap: 20px;
}

.about-section.about-page .about-content .about-info .about-text p {
    max-width: 100%;
    color: var(--sub-header-col);
    word-break: break-word;
}

body.about-page-body .about-section .about-content .about-text {
    width: 100%;
}

.about-section.about-page .about-content .about-statistics {
    margin-top: 0;
}

.about-section.about-page .about-content .about-statistics .statistic>h1 {
    color: var(--dark-col);
}

.about-section.about-page .about-content .about-statistics .statistic>h2 {
    color: var(--dark-col);
}

.services-section {
    background: var(--light-col);
    position: relative;
}

.services-section .services-content .cards {
    gap: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.services-section .services-content .cards .card {
    flex: 0 0 auto;
    width: calc((100% / 3) - 30px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding: 3rem 2rem;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.09);
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.services-section .services-content .cards .card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
}

.services-section .services-content .cards .card .title-description__container,
.services-section .services-content .cards .card .img-title__container {
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.services-section .services-content .cards .card .img-title__container {
    display: flex;
    flex-direction: column;
}

.services-section .services-content .cards .card .img-title__container>.service-card__img {
    max-height: 250px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.services-section .services-content .cards .card .img-title__container .service-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1/1;
}

.services-section .services-content .cards .card .title-description__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    transform: translateY(200%);
    -webkit-transform: translateY(200%);
    -moz-transform: translateY(200%);
    -ms-transform: translateY(200%);
    -o-transform: translateY(200%);
}

.services-section .services-content .cards .card:hover .title-description__container {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}

.services-section .services-content .cards .card:hover .img-title__container {
    transform: translateY(-200%);
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    -o-transform: translateY(-200%);
}

.services-section .services-content .cards .card .title-description__container .service-card__icon {
    padding-top: 1rem;
    font-size: 1.3rem;
    color: var(--main-header-col);
}

[dir="ltr"] .services-section .services-content .cards .card .title-description__container .service-card__icon {
    text-align: end;
}

[dir="rtl"] .services-section .services-content .cards .card .title-description__container .service-card__icon {
    text-align: start;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}

.services-section .services-content .cards .card .service-card__subtitle {
    margin-top: 30px;
    text-align: center;
    font-size: 21px;
    font-weight: 500;
    color: var(--main-header-col);
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.services-section .services-content .cards .card .service-card__paragraph {
    color: var(--footer-col);
    margin-top: 1rem;
    text-align: justify;
    font-size: 16px;
}

.services-section .read-more.general-btn {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.services-section .read-more.general-btn .read-more-btn {
    --shadow-hover: var(--dark-col);
    background-color: var(--shadow-hover);
    color: #fff;
    font-weight: 500;
    position: relative;
    z-index: 1;
    margin-top: 0;
}

.balance-section {
    background: var(--dark-col) 0% 0% no-repeat padding-box;
    position: relative;
}

.balance-section .title-section .header__section,
.balance-section .title-section .header__section-subtitle {
    color: #fff;
}

.products-section {
    /* background: var(--light-col) 0% 0% no-repeat padding-box; */
    position: relative;
}

.products-section .cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
}

.products-section .cards .card {
    flex: 0 0 auto;
    width: calc((100% / 4) - 25px);
    display: flex;
    flex-direction: column;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.09);
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}

.products-section .cards .card.update-products-card {
    padding: 1rem;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
}

.products-section .cards .card.update-products-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.products-section .cards .card:hover {
    scale: 1.02;
}

.products-section .cards.products-cards-page .card {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    overflow: hidden;
    padding: 1rem;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}

.products-section .cards.products-cards-page .card:hover {
    scale: 1.05;
}

.products-section .cards .card .img-products-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.products-section .cards .card .img-products-container .product-card__img {
    max-height: 250px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.products-section .cards .card .img-products-container .product-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1/1;
}

.products-section .cards .card .product-card-text {
    padding: 10px 0 0;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.products-section .cards .card .product-card-text>h2 {
    margin-top: 10px;
    font-size: 20px;
    line-height: 25px;
    letter-spacing: -0.88px;
    color: var(--sub-header-col);
    font-weight: 600;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.products-section .cards .card .product-card-text>h3 {
    font-size: 15px;
    line-height: 20px;
    margin-top: 10px;
    color: var(--btn-col);
}

.products-section .cards .card .product-card-text>p {
    font-size: 15px;
    line-height: 24px;
    color: var(--footer-col);
}

.products-section .read-more.general-btn {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.products-section .read-more.general-btn .read-more-btn {
    --shadow-hover: var(--dark-col);
    background-color: var(--shadow-hover);
    color: #fff;
    font-weight: 500;
    position: relative;
    z-index: 1;
    margin-top: 0;
}

.products-section .all-products-container .all-products-btn.active {
    display: none;
}

.projects-section {
    background: var(--light-col) 0% 0% no-repeat padding-box;
    position: relative;
}

.projects-section .cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
}

.projects-section .cards .card {
    flex: 0 0 auto;
    width: calc((100% / 2) - 25px);
    display: flex;
    flex-direction: column;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.09);
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.projects-section .cards .card.update-projects-card {
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.projects-section .cards.projects-cards-page .card {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    overflow: hidden;
    padding: 1rem;
}

.projects-section .cards .card .img-projects-container {
    display: flex;
    flex-direction: column;
}

.projects-section .cards .card .img-projects-container .project-card__img {
    height: 400px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.projects-section .cards .card .img-projects-container .project-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.projects-section .cards .card:hover .img-projects-container .project-card__img img {
    scale: 1.08;
}

.projects-section .cards .card:hover {
    box-shadow: 0 1px 30px rgba(17, 24, 39, 0.09);
}

.projects-section .cards .card .project-card-text {
    padding: 2rem;
    text-align: start;
    display: flex;
    flex-direction: column;
}

.projects-section .cards .card .project-card-text.project-section-card__text {
    padding: 2rem 1rem;
}

.projects-section .cards .card .project-card-text>h2 {
    font-size: 24px;
    line-height: 30px;
    color: var(--sub-header-col);
    font-weight: 600;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.projects-section .cards .card .project-card-text>h3 {
    font-size: 16px;
    font-weight: 500;
    color: var(--btn-col);
    margin: 8px 0 16px !important;
}

.projects-section .cards .card .project-card-text>p {
    line-height: 24px;
    color: #7e7e7f;
    font-weight: 400;
}

[dir="ltr"] .projects-section .cards .card .project-card-text>p {
    font-size: 15px;
}

[dir="rtl"] .projects-section .cards .card .project-card-text>p {
    font-size: 17px;
}

.projects-section .read-more.general-btn {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.projects-section .read-more.general-btn .read-more-btn {
    --shadow-hover: var(--dark-col);
    background-color: var(--shadow-hover);
    color: #fff;
    font-weight: 500;
    position: relative;
    z-index: 1;
    margin-top: 0;
}

.projects-section .all-projects-container .all-projects-btn.active {
    display: none;
}

.portfolios-section {
    background: var(--dark-col) 0% 0% no-repeat padding-box;
    position: relative;
}

.portfolios-section.portfolios-page {
    background: var(--light-col);
}

.portfolios-section .portfolios-content .title-section>h1 {
    color: var(--light-col);
    text-transform: uppercase;
}

.portfolios-section .portfolios-content .title-section>p {
    color: var(--light-col);
}

.portfolios-section.portfolios-page .portfolios-content .title-section>h1 {
    color: var(--main-header-col);
}

.portfolios-section .cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.portfolios-section .cards .card {
    position: relative;
    flex: 0 0 auto;
    width: calc((100% / 4) - 20px);
    display: flex;
    flex-direction: column;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    overflow: hidden;
    border: none;
}

.portfolios-section .cards .card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#17161a));
    background: -webkit-linear-gradient(top, transparent 0%, #17161a 100%);
    background: linear-gradient(180deg, transparent 0%, #17161a 100%);
    transition: height 150ms linear;
    will-change: height;
    z-index: 1;
    transition: var(--trans);
    -webkit-transition: height 150ms linear;
    -moz-transition: height 150ms linear;
    -ms-transition: height 150ms linear;
    -o-transition: height 150ms linear;
}

.portfolios-section .cards .card:hover {
    scale: 1.05;
}

.portfolios-section .cards .card:hover::after {
    height: 50%;
}

.portfolios-section .cards.portfolios-cards-page .card {
    display: flex;
}

.portfolios-section .all-portfolios-container .all-portfolios-btn.active {
    display: none;
}

.portfolios-section .cards .card .img-portfolios-container {
    width: 100%;
}

.portfolios-section .cards .card .img-portfolios-container img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
}

.portfolios-section .read-portfolios-container .read-portfolios-btn {
    font-weight: 700;
    font-size: 22px;
    line-height: 40px;
    letter-spacing: -0.88px;
    color: var(--light-col);
    background: 0 0;
    cursor: pointer;
}

.portfolios-section .cards .card .read-portfolios-btn {
    position: absolute;
    bottom: -60%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    z-index: 10;
}

.portfolios-section .cards .card:hover .read-portfolios-btn {
    bottom: 8px;
}

.portfolios-section .read-more.general-btn {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.portfolios-section .cards .card .read-portfolios-btn {
    font-weight: 700;
    font-size: 22px;
    line-height: 40px;
    letter-spacing: -0.88px;
    color: var(--light-col);
    background: 0 0;
    cursor: pointer;
}

.why-section {
    position: relative;
    padding: 10rem 0;
}

.why-section .why-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.why-section .why-content>h1 {
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 2rem;
    color: var(--main-header-col);
}

.why-section .why-content>p {
    max-width: 1000px;
    line-height: 30px;
    color: var(--footer-col);
    margin-top: 2rem;
}

[dir="ltr"] .why-section .why-content>p {
    font-size: 18px;
}

[dir="rtl"] .why-section .why-content>p {
    font-size: 19px;
}

.news-section {
    background: var(--light-col) 0% 0% no-repeat padding-box;
    position: relative;
}

.news-section .cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.news-section .cards .card {
    position: relative;
    flex: 0 0 auto;
    width: calc((100% / 3) - 30px);
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.news-section .cards .card.update-news-card {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.09);
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.news-section .cards .card.update-news-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.news-section .cards .card.update-news-card .img-news-container {
    overflow: hidden;
    position: relative;
}

.news-section .cards .card.update-news-card .img-news-container::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 68%;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#17161a));
    background: -webkit-linear-gradient(top, transparent 0%, #17161a 100%);
    background: linear-gradient(180deg, transparent 0%, #17161a 100%);
    -webkit-transition: height 150ms linear;
    transition: height 150ms linear;
    will-change: height;
    z-index: 1;
    -moz-transition: height 150ms linear;
    -ms-transition: height 150ms linear;
    -o-transition: height 150ms linear;
}

.news-section .cards .card.update-news-card:hover .img-news-container::after {
    height: 100%;
}

.news-section .cards .card.update-news-card .img-news-container img {
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.news-section .cards .card.update-news-card:hover .img-news-container img {
    scale: 1.05;
}

.news-section .cards .card.update-news-card .img-news-container h2 {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    font-size: 22px;
    letter-spacing: -0.88px;
    color: #fff;
    text-align: start;
    font-weight: 500;
    width: 100%;
    padding: 0 10px;
    line-height: 1.3;
}

[dir="rtl"] .news-section .cards .card.update-news-card .img-news-container h2 {
    font-size: 24px;
}

.news-section .cards .card.update-news-card .news-card-text {
    padding: 1.5rem 1rem;
}

.news-section .cards .card.update-news-card .news-card-text .read-more-news span {
    position: relative;
}

.news-section .cards .card.update-news-card .news-card-text .read-more-news span::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 10px;
    width: 0;
    height: 2px;
    background-color: var(--dark-col);
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.news-section .cards .card.update-news-card:hover .news-card-text .read-more-news span::after {
    width: 100%;
}

.news-section .cards .card .img-news-container {
    width: 100%;
}

.news-section .cards .card .img-news-container a>img,
.news-section .cards .card.update-news-card .img-news-container img {
    width: 100%;
    height: 280px;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
}

.news-section .cards .card .news-card-text>h2 {
    font-size: 22px;
    line-height: 40px;
    letter-spacing: -0.88px;
    color: var(--sub-header-col);
    text-align: center;
    margin: 10px 0;
    font-weight: 500;
}

.news-section .cards .card .news-card-text>h3 {
    font-size: 13px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -0.68px;
    color: var(--footer-col);
    margin-bottom: 0;
}

[dir="ltr"] .news-section .cards .card .news-card-text>h3 i {
    margin-right: 5px;
}

[dir="rtl"] .news-section .cards .card .news-card-text>h3 i {
    margin-left: 5px;
}

.news-section .cards .card .news-card-text>p {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: var(--footer-col);
}

.news-section .read-more.general-btn {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

@media screen and (max-width: 992px) {
    .news-section .cards {
        gap: 20px;
    }

    .news-section .cards .card {
        width: calc((100% / 2) - 10px);
    }

    .news-section .cards .card.update-news-card .news-card-text {
        display: none;
    }

    .news-section .cards .card.update-news-card .img-news-container h2 {
        font-size: clamp(18px, 2.5vw, 40px) !important;
    }
}

@media screen and (max-width: 550px) {
    .news-section .cards {
        gap: 10px;
    }

    .news-section .cards .card {
        width: calc((100% / 2) - 5px);
    }
}

.show-section {
    background: var(--dark-col) 0% 0% no-repeat padding-box;
    position: relative;
}

.show-section .show-content .title-section>h1 {
    color: var(--light-col);
    text-transform: uppercase;
}

.show-section .show-content .title-section>p {
    color: var(--light-col);
}

.show-section .show-content .show-video {
    max-width: 1080px;
    width: 100%;
    height: 607px;
    margin: 0 auto;
}

.show-section .show-content .show-video>iframe {
    width: 100%;
    height: 100%;
}

.show-section .show-content .show-video>video {
    width: 100%;
    height: 100%;
}

.branches-section {
    background: var(--light-col) 0% 0% no-repeat padding-box;
    position: relative;
}

.branches-section .branch-card {
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.09);
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}

.branches-section .branch-card:hover {
    scale: 1.02;
}

.branches-section .read-more.general-btn .read-more-btn {
    --shadow-hover: var(--dark-col);
    background-color: var(--shadow-hover);
    color: #fff;
    font-weight: 500;
    position: relative;
    z-index: 1;
    margin-top: 0;
}

.branches-section .all-branches-container .all-branches-btn.active {
    display: none;
}

.gallery-section {
    background: var(--dark-col);
}

.gallery-section .gallery-content .title-section>h1 {
    color: var(--light-col);
    text-transform: uppercase;
}

.gallery-section .gallery-content .title-section>p {
    color: var(--light-col);
}

.gallery-section .cards .card {
    position: relative;
    display: flex;
    border: none;
    background-color: transparent;
}

.gallery-section .cards .card:hover {
    scale: 1.04;
}

.clients-section,
.partners-section {
    position: relative;
    background: var(--light-col) 0% 0% no-repeat padding-box;
}

.clients-section .cards .card,
.partners-section .cards .card {
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    border: none;
}

.clients-section .cards .card:hover,
.partners-section .cards .card:hover {
    scale: 1.04;
}

.clients-section .cards .card .img-clients-container,
.partners-section .cards .card .img-partners-container {
    width: 100%;
    max-height: 140px;
    height: 100%;
}

.clients-section .cards .card a.img-clients-container>img,
.partners-section .cards .card a.img-partners-container>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.restaurantOrder-section .restaurantOrder-content .nav-tabs {
    border: none;
    border-bottom: 1px solid #eee;
    width: fit-content;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    gap: 20px;
}

.restaurantOrder-section .restaurantOrder-content .nav-tabs li .nav-link {
    color: var(--footer-col);
    opacity: 0.5;
    background-color: transparent;
    border: none;
    padding: 1rem;
    position: relative;
    font-size: 21px;
    font-weight: 700;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.restaurantOrder-section .restaurantOrder-content .nav-tabs li .nav-link.active,
.restaurantOrder-section .restaurantOrder-content .nav-tabs li .nav-link:hover {
    opacity: 1;
}

.restaurantOrder-section .restaurantOrder-content .nav-tabs li .nav-link i {
    font-size: 40px;
}

.restaurantOrder-content .rest-img_container {
    overflow: hidden;
}

.restaurantOrder-content .rest-order_img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.restaurantOrder-content .rest-order_name {
    color: var(--footer-col);
    margin-top: 1rem;
    text-align: center;
    font-size: 18px;
}

.restaurantOrder-content .rest-order_calory {
    color: var(--footer-col);
    text-align: center;
    font-size: 15px;
}

.restaurantOrder-content .rest-order_card:hover .rest-order_img {
    scale: 1.08;
}

@media screen and (max-width: 992px) {
    .restaurantOrder-section .restaurantOrder-content .nav-tabs {
        width: 800px;
    }
}

.findRestaurant-section {
    position: relative;
    background: var(--light-col) 0% 0% no-repeat padding-box;
}

.findRestaurant-section .cards .card {
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    border: none;
}

.findRestaurant-section .cards .card .img-findRestaurant-container {
    width: 180px;
    height: 180px;
    position: relative;
    overflow: hidden;
}

.findRestaurant-section .cards .card .img-findRestaurant-container::after {
    position: absolute;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.findRestaurant-section .cards .card:hover .img-findRestaurant-container::after {
    opacity: 1;
}

.findRestaurant-section .cards .card .img-findRestaurant-container .find_service-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.findRestaurant-section .cards .card:hover .img-findRestaurant-container .find_service-img {
    scale: 1.2;
}

.findRestaurant-section .cards .card .img-findRestaurant-container .find_stores {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 2;
}

.findRestaurant-section .cards .card .img-findRestaurant-container .find_stores a {
    color: #eee;
    opacity: 0;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.findRestaurant-section .cards .card .img-findRestaurant-container .find_stores a:hover {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}

.findRestaurant-section .cards .card:hover .img-findRestaurant-container .find_stores a {
    opacity: 1;
}

.findRestaurant-section .cards .card .order-btn {
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
    background-color: var(--dark-col);
}

.findRestaurant-section .cards .card .rest_name {
    text-align: center;
    color: var(--main-header-col);
}

.apps-section {
    background: var(--dark-col);
    position: relative;
}

.apps-section .apps-content .title-section>h1 {
    color: var(--light-col);
}

.apps-section .apps-content .title-section>p {
    color: var(--light-col);
}

.apps-section .apps-content .app-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 1rem;
}

.apps-section .apps-content .app-text .app-name-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 9px;
    max-width: 150px;
    height: 150px;
    background: var(--light-col);
    border-radius: 26px;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    -ms-border-radius: 26px;
    -o-border-radius: 26px;
}

.apps-section .apps-content .app-text>h2 {
    margin-bottom: 52px;
    line-height: 57px;
    color: var(--light-col);
    background: 0 0;
    text-transform: uppercase;
}

[dir="ltr"] .apps-section .apps-content .app-text>h2 {
    font-size: 30px;
}

[dir="rtl"] .apps-section .apps-content .app-text>h2 {
    font-size: 24px;
}

.apps-section .apps-content .app-stores {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.apps-section .apps-content .app-stores>a {
    max-width: 250px;
}

.section .ratio-1 {
    aspect-ratio: 1/1;
}

.section .team-color {
    color: #363c4f;
}

.team-section .team-card {
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.team-section .team-card:hover {
    scale: 1.04;
}

.careers-section {
    position: relative;
}

.careers-section .careers-content .read-more.general-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.careers-section .careers-content .read-more.general-btn .read-more-btn {
    color: #fff;
    background-color: var(--dark-col);
    margin-top: 0;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 3rem;
}

.careers-section .careers-content .read-more.general-btn .read-more-btn:hover {
    --shadow-hover: var(--dark-col);
}

.section .trans-h {
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.plans-section .cards .card {
    position: relative;
    overflow: hidden;
    border: none;
    background: #fff;
}

.plans-section .cards .card:hover {
    box-shadow: 0 0.25rem 1.75rem 10px rgba(30, 34, 40, 0.07) !important;
}

.plans-section .cards .card .plan-card-text {
    padding: 0.75rem 1.25rem;
}

.plans-section .cards .card .plan-card-text .plan-card-title {
    text-align: center;
    margin-top: 1rem;
    font-size: 35px;
    line-height: 57px;
    font-weight: 700;
}

.plans-section .cards .card .plan-card-text .plan-card-info {
    text-align: center;
    font-size: 18px;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.plans-section .cards .card .plan-card-text .plan-card-price {
    display: flex;
    justify-content: center;
    gap: 5px;
    position: relative;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    animation: move-price 0.1s;
    -webkit-animation: move-price 0.1s;
}

.plans-section .cards .card .plan-card-text .plan-card-price>.dollar-sign {
    color: #000;
    opacity: 0.6;
    font-size: 24px;
    text-transform: uppercase;
    margin-top: 0.5rem;
    font-weight: 700;
}

.plans-section .cards .card .plan-card-text .plan-card-price>.price-card {
    font-size: 50px;
    font-weight: 700;
}

.plans-section .cards .card .plan-card-text .plan-card-price>.duration {
    color: #000;
    opacity: 0.6;
    font-size: 18px;
    margin-top: 2rem;
}

.plans-section .cards .card .plan-card-text .plan-card-feature {
    overflow: hidden;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[dir="ltr"] .plans-section .cards .card .plan-card-text .plan-card-feature {
    padding-left: 2rem;
}

[dir="rtl"] .plans-section .cards .card .plan-card-text .plan-card-feature {
    padding-right: 2rem;
}

.plans-section .cards .card .plan-card-text .plan-card-feature>li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--footer-col);
    display: flex;
    font-size: 1.1rem;
}

.plans-section .cards .card .plan-card-text .read-more.general-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0 1rem;
}

.plans-section .cards .card .plan-card-text .read-more.general-btn .read-more-btn {
    color: #fff;
    background-color: var(--dark-col);
    font-weight: 500;
    margin-top: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.plans-section .cards .card .plan-card-text .read-more.general-btn .read-more-btn:hover {
    --shadow-hover: var(--dark-col);
}

.contacts-section {
    background: var(--dark-col) 0% 0% no-repeat padding-box;
    position: relative;
}

.contacts-section .contacts-content .title-section>h1 {
    color: var(--light-col);
}

.contacts-section .contacts-content .title-section>p {
    color: var(--light-col);
}

.contacts-section .contacts-content .contacts-info {
    display: flex;
    justify-content: center;
    gap: 44px;
}

.contacts-section .contacts-content .contacts-info form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contacts-section .contacts-content .contacts-info form .input-container {
    display: flex;
    align-items: center;
    gap: 24px;
}

.contacts-section .contacts-content .contacts-info form .input-container>label {
    font-size: 18px;
    line-height: 28px;
    color: #aeaeae;
    max-width: 150px;
    width: 100%;
}

[dir="rtl"] .contacts-section .contacts-content .contacts-info form .input-container>label {
    font-weight: 500;
}

.contacts-section .contacts-content .contacts-info form .input-container>input,
.contacts-section .contacts-content .contacts-info form .input-container>textarea {
    width: 455px;
    height: 50px;
    background: #adadad80;
    padding: 11px 20px;
    font-size: 18px;
    line-height: 28px;
    color: #efefef;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    box-shadow: 0 0.25rem 1.75rem rgba(30, 34, 40, 0.1);
    border: none !important;
}

.contacts-section .contacts-content .contacts-info form .input-container .captcha__container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: none !important;
}

.contacts-section .contacts-content .contacts-info form .input-container .captcha__container .captcha__input-container {
    width: 70%;
}

.contacts-section .contacts-content .contacts-info form .input-container .captcha__container .captcha__img-container {
    width: 30%;
}

.contacts-section .contacts-content .contacts-info form .input-container input[name="captcha"] {
    padding: 11px 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background: #adadad80;
    font-size: 18px;
    color: #efefef;
    box-shadow: 0 0.25rem 1.75rem rgba(30, 34, 40, 0.1);
    width: 100%;
    border: none !important;
}

.contacts-section .contacts-content .contacts-info form .input-container .captcha__container .captcha__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

[dir="rtl"] .contacts-section .contacts-content .contacts-info form .input-container.input-dir-container>input {
    direction: ltr;
}

.contacts-section .contacts-content .contacts-info form .input-container>input::placeholder,
.contacts-section .contacts-content .contacts-info form .input-container>textarea::placeholder,
.contacts-section .contacts-content .contacts-info form .input-container input[name="captcha"]::placeholder {
    color: #fff;
    opacity: 0.3;
}

[dir="ltr"] .contacts-section .contacts-content .contacts-info form .input-container>input::placeholder,
[dir="ltr"] .contacts-section .contacts-content .contacts-info form .input-container>textarea::placeholder {
    font-size: 16px;
}

[dir="rtl"] .contacts-section .contacts-content .contacts-info form .input-container>input::placeholder,
[dir="rtl"] .contacts-section .contacts-content .contacts-info form .input-container>textarea::placeholder {
    font-size: 18px;
    text-align: right;
}

.contacts-section .contacts-content .contacts-info form .input-container>textarea {
    height: 150px;
    resize: none;
}

.contacts-section .contacts-content .contacts-info form .submit-form-container {
    display: flex;
    justify-content: end;
}

.contacts-section .contacts-content .contacts-info form .submit-form-btn {
    max-width: 180px;
    width: 100%;
    height: 50px;
    background: var(--btn-col);
    cursor: pointer;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contacts-section .contacts-content .contacts-info form .submit-form-btn button {
    font-size: 20px;
    line-height: 28px;
    background-color: rgba(255, 255, 255, 0.7);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 700;
}

.contacts-section .contacts-content .contacts-info form .submit-form-btn:hover {
    --shadow-hover: rgb(255, 255, 255);
    box-shadow: 0 1px 20px var(--shadow-hover);
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}

.contacts-section .contacts-content .contacts-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contacts-section .contacts-content .contacts-text>p,
.contacts-section .contacts-content .contacts-text>a {
    font-size: 18px;
    line-height: 32px;
    color: var(--light-col);
}

.footer {
    position: relative;
    background: var(--footer-col) 0% 0% no-repeat padding-box;
    padding: 25px 0;
}

.footer .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer .footer-content .logo {
    max-width: 270px;
    height: 170px;
    object-fit: cover;
}

.footer .footer-content .logo a,
.footer .footer-content .logo a>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer .footer-content .social-icons {
    margin: 55px 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
}

.footer .footer-content .social-icons a>i {
    color: var(--light-col);
    font-size: 20px;
}

.footer .footer-content .social-icons a>img.footer__whatsapp-img {
    max-width: 22px;
}

.footer .footer-content .social-icons a>img.footer__whatsapp-img2 {
    max-width: 30px;
}

.footer .footer-content .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 35px;
    padding-left: 0;
}

.footer .footer-links>li a {
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    color: var(--light-col);
}

[dir="ltr"] .footer .footer-links>li a {
    font-size: 16px;
}

[dir="rtl"] .footer .footer-links>li a {
    font-size: 17px;
}

.footer .footer-copyright>h1 {
    font-size: 13px;
    line-height: 20px;
    color: #adadad;
    text-shadow: 0 0 1px #adadad;
    font-weight: 400;
}

.footer .footer-copyright>p,
.footer .footer-copyright>p a {
    font-size: 12px;
    line-height: 20px;
    color: #adadad;
    text-shadow: 0 0 1px #adadad;
    font-weight: 400;
}

.footer:hover .edit-part {
    display: block;
    top: auto;
    bottom: 0;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
}

.footer .edit-part:hover {
    top: auto;
    bottom: 0;
}

.footer .edit-part .header-edit-part {
    height: 0;
    padding: 0;
    position: static;
}

.footer .edit-part .header-edit-part>h3 {
    padding: 11px;
    height: 50px;
    top: auto;
    bottom: 1rem;
    margin-bottom: 0;
}

[dir="ltr"] .footer .edit-part .header-edit-part>h3 {
    right: -3rem;
}

.footer .edit-part .change-edit-part .change-container .dropdown-colors .menu-colors {
    top: calc(-5rem * var(--menu-num));
}

[dir="ltr"] .footer .edit-part .change-edit-part .change-container .dropdown-colors .menu-colors {
    right: -135px;
}

[dir="rtl"] .footer .edit-part .change-edit-part .change-container .dropdown-colors .menu-colors {
    left: -135px;
}

.chat-icon {
    position: fixed;
    bottom: 30px;
    z-index: 999;
}

[dir="ltr"] .chat-icon {
    right: 30px;
}

[dir="rtl"] .chat-icon {
    left: 30px;
}

.chat-icon .whatsapp-chat__icon {
    cursor: pointer;
}

.section-page {
    padding-top: 240px;
}

.section-page .title-section-page {
    display: flex;
    flex-direction: column;
    margin-bottom: 70px;
}

.section-page .title-section-page>h1 {
    font-size: 50px;
    color: var(--main-header-col);
}

.section-page .title-section-page>p {
    font-size: 18px;
    color: var(--footer-col);
    margin-top: 1rem;
}

.section.details-page {
    background: var(--light-col);
}

.section.details-page .details-content {
    padding: 100px 50px 400px;
    background: #fff;
    margin-top: 8rem;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    position: relative;
    z-index: 2;
}

.section.career-details-section .details-content,
.section.news-details-section .details-content,
.section.portfolio-details-section .details-content,
.section.project-details-section .details-content,
.section.service-details-section .details-content,
.section.team-details-section .details-content {
    grid-template-columns: 1fr;
}

.section.news-details-section .details-content {
    text-align: start;
}

.section.details-page .details-content .title-details-page {
    color: var(--main-header-col);
    line-height: 1;
}

.section.details-page .details-content .title-details-page {
    font-size: 35px;
}

.section.details-page .details-content .price-details-page {
    font-size: 22px;
    color: #adadad;
    margin-top: 1rem;
    font-weight: 700;
}

.section.career-details-section .details-content .title-details-page {
    margin-bottom: 5rem !important;
    color: var(--main-header-col);
    text-shadow: 0 3px 6px #00000029;
    text-transform: initial;
}

.section.details-page .details-content .news-details__content-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
    margin: 4rem 0 0 !important;
}

.section.details-page .details-content .details-details-page {
    font-size: 18px;
    line-height: 2rem;
    color: #adadad;
    margin: 6px 0 2rem !important;
}

.section.details-page .details-content .btn-details-page {
    --shadow-hover: var(--btn-col);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 180px;
    width: 100%;
    padding: 12px 0;
    cursor: pointer;
    border: 1px solid var(--shadow-hover);
    background-color: var(--shadow-hover);
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.section.details-page .details-content .btn-details-page:hover {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    box-shadow: 0 1px 25px var(--shadow-hover);
}

.section.details-page .details-content .btn-details-page button {
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.7);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.section.details-page .details-content .img-details-page {
    width: 100%;
    margin: 0 auto;
    display: block;
    margin-top: 2rem;
}

.section.details-page .details-content .img-details-page img {
    width: 100%;
}

.section.product-details-section .details-content {
    grid-template-columns: 1fr;
}

.section.product-details-section .products-info__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    padding-bottom: 6rem;
    border-bottom: 1px solid #ddd;
}

.section.product-details-section .details-content .cards .card.update-products-card {
    box-shadow: 0 1px 20px rgba(17, 24, 39, 0.09);
}

.section.product-details-section .details-content .img-details-page img {
    object-fit: cover;
}

.section.product-details-section .details-content .title-details-page {
    font-size: 26px !important;
    line-height: 1.4;
    margin-top: 1rem;
}

.section.product-details-section .details-content .price-details-page {
    font-size: 20px;
    font-weight: 500;
    margin-top: 10px;
}

.section.product-details-section .details-content .details-details-page {
    font-size: 17px;
    line-height: 1.6;
    margin: 2rem 0 !important;
}

.section.product-details-section .details-content .btn-details-page {
    max-width: 160px !important;
    padding: 10px 0;
}

.section.product-details-section .details-content .btn-details-page button {
    font-size: 18px;
}

.section.product-details-section .details-content .products-info__related .related-product__title {
    padding: 2rem 0 4rem;
    font-size: 25px;
    font-weight: 500;
}

.section.team-details-section .details-content .team-details-text {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section.team-details-section .details-content .details-details-page {
    font-size: 22px;
    font-weight: 400;
}

.section.team-details-section .details-content .teams__info {
    font-size: 17px;
    line-height: 1.8;
    color: #8e8e8e;
    text-align: center;
}

.section.team-details-section .details-content .team-details-text__container {
    width: 400px;
    height: 400px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.section.team-details-section .details-content .team-details-text__container img {
    width: 100%;
    height: 100%;
    object-position: top;
}

.section.team-details-section .details-content .img-details-page {
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1199px) {
    .section.product-details-section .products-info__container {
        grid-template-columns: 1fr;
    }
}

.section.news-details-section .details-content .news-details-text {
    padding-bottom: 6rem;
    border-bottom: 1px solid #ddd;
}

.section.news-details-section .details-content .title-details-page {
    font-size: 30px;
    font-weight: 700;
    color: #2d2f34;
    line-height: 1.5;
}

.section.news-details-section .details-content .subtitle-details-page {
    font-size: 15px;
    font-weight: 300;
    color: #2d2f34;
    margin-bottom: 2rem !important;
}

.section.news-details-section .details-content .news__subtitle {
    margin-top: 1rem;
    font-size: 17px;
    font-weight: 400;
    color: #868686;
}

.section.news-details-section .details-content .news-header-img__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.section.news-details-section .details-content .news-header-img__container .news-headers__container {
    flex: 0 0 auto;
    width: 70%;
}

.section.news-details-section .details-content .news-header-img__container .news-img__container {
    flex: 0 0 auto;
}

.section.news-details-section .details-content .news-header-img__container .news-img__container img {
    max-width: 800px;
    object-fit: cover;
}

.section.news-details-section .details-content .latest-news__container .latest-news__title {
    padding: 2rem 0 4rem;
    font-size: 25px;
    font-weight: 500;
}

.section.news-details-section .details-content .details-details-page {
    margin: 0 !important;
}

@media screen and (max-width: 992px) {
    .section.news-details-section .details-content .news-header-img__container {
        flex-wrap: wrap;
    }

    .section.news-details-section .details-content .news-header-img__container .news-headers__container {
        width: 100%;
        max-width: 100%;
    }

    .section.news-details-section .details-content .news-header-img__container .news-img__container {
        width: 100%;
    }
}

@media screen and (max-width: 450px) {
    .section.news-details-section .details-content .title-details-page {
        font-size: 24px !important;
    }
}

.section.details-page .details-content .image {
    max-width: 500px;
    height: 400px;
    margin: 0 auto;
    margin-top: 20px;
}

.section.details-page .details-content .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header.header-form-page {
    background: 0 0;
}

.section.career-details-section {
    background: var(--page-col);
    padding-bottom: 0;
}

.section.career-details-section .details-content {
    padding: 100px 50px 400px;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    -ms-border-radius: 10px 10px 0 0;
    -o-border-radius: 10px 10px 0 0;
}

.footer.footer-form-page {
    background: var(--footer-col);
}

.career-details-section .form-details-page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.career-details-section .form-details-page .title-section-form {
    color: #2d2f34;
    text-align: start;
    font-size: 1.2rem;
    font-weight: 700;
}

.career-details-section .form-details-page .input-control,
.career-details-section .form-details-page .email-input-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.career-details-section .form-details-page .captcha-form {
    border: none;
    padding: 0;
}

.career-details-section .form-details-page .input-control>label:not(.title-section-form),
.career-details-section .form-details-page .email-input-container>label {
    line-height: 20px;
    color: #2d2f34;
    font-weight: 600;
}

.career-details-section .form-details-page .input-control>input,
.career-details-section .form-details-page .input-control>textarea,
.career-details-section .form-details-page .email-input-container>input,
.career-details-section .form-details-page .input-control>select {
    width: 100%;
    background-color: #efefef;
    min-height: 50px;
    box-shadow: none;
    color: #000;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-clip: padding-box;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -moz-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -ms-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

[dir="rtl"] .career-details-section .form-details-page .input-control.input-dir-control>input {
    direction: ltr;
}

[dir="rtl"] .career-details-section .form-details-page .input-control.input-dir-control>input::placeholder {
    text-align: end;
}

.career-details-section .form-details-page .input-control>.error-message,
.career-details-section .form-details-page .input-control .upload-file-label>.error-message,
.career-details-section .form-details-page .email-input-container>.error-message {
    color: #ff3860;
    line-height: 20px;
}

.career-details-section .form-details-page .input-control.success>input,
.career-details-section .form-details-page .email-input-container.success>input,
.career-details-section .form-details-page .input-control.success>select,
.career-details-section .form-details-page .input-control .upload-file-label.success {
    border-color: #09c372;
}

.career-details-section .form-details-page .input-control.error>input,
.career-details-section .form-details-page .email-input-container.error>input,
.career-details-section .form-details-page .input-control.error>select,
.career-details-section .form-details-page .input-control .upload-file-label.error {
    border-color: #ff3860;
}

.career-details-section .form-details-page .input-control>input[type="date"] {
    text-transform: uppercase;
}

.career-details-section .form-details-page .input-control.resume-form>.resume-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    font-weight: 600;
    line-height: 20px;
    color: #2d2f34;
}

.career-details-section .form-details-page .input-control .upload-file-label {
    display: flex;
    align-items: center;
    gap: 25px;
    border: 1px solid #ced4da;
    min-height: 50px;
    box-shadow: none;
    color: #000;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    border-radius: 0.25rem;
}

.career-details-section .form-details-page .input-control.check-code {
    flex-direction: row;
    align-items: center;
}

.career-details-section .form-details-page .input-control.check-code>input {
    width: 300px;
}

.career-details-section .form-details-page .career-selection,
.career-details-section .form-details-page .career-requirements {
    width: 100%;
}

.career-details-section .form-details-page .career-selection {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.career-details-section .form-details-page .career-requirements {
    display: flex;
    flex-direction: column;
    gap: 25px;
    border-bottom: 1px solid #ced4da;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}

.career-details-section .form-details-page .career-requirements .requirements {
    text-align: start;
    display: none;
    flex-direction: column;
    gap: 10px;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
}

.career-details-section .form-details-page .career-requirements .requirements.active {
    display: flex;
}

.career-details-section .form-details-page .career-requirements .requirements>li {
    color: #aeaeae;
    font-size: 18px;
    text-indent: -5px;
}

.career-details-section .form-details-page .career-requirements .requirements>li:before {
    content: "-";
    text-indent: -5px;
    margin-right: 5px;
}

.career-details-section .form-details-page .career-requirements .input-container {
    display: flex;
    align-items: center;
    gap: 25px;
}

.career-details-section .form-details-page .submit-btn-form {
    --shadow-hover: #6c757d;
    font-size: 1rem;
    background-color: var(--shadow-hover);
    padding: 0.8rem 3rem;
    margin: 0 auto;
    cursor: pointer;
    transition: var(--trans);
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    margin-top: -25px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.career-details-section .form-details-page .submit-btn-form:hover {
    background: #5a6268;
    box-shadow: 0 1px 25px var(--shadow-hover);
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}

.career-details-section .form-details-page .submit-btn-form button {
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.7);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.section.details-form-section .details-content .title-details-page {
    margin-bottom: 1rem !important;
}

.section.details-form-section .details-content .details-details-page {
    margin-bottom: 4rem;
}

.section.details-form-section .form-details-page .career-requirements {
    width: 50%;
    margin: 0 auto;
}

.section.details-form-section .form-details-page .title-section-form {
    font-weight: 600;
}

.section.details-form-section .form-details-page .input-control>input {
    width: 100%;
}

.section.details-form-section .form-details-page .career-requirements {
    margin-bottom: 2rem;
}

.section.details-form-section .form-details-page .submit-btn-form {
    margin-top: auto;
}

@media screen and (max-width: 767px) {
    .section.details-form-section .form-details-page .career-requirements {
        width: 100%;
    }
}

@media screen and (max-width: 1099px) {
    .section.details-page .details-content {
        grid-template-columns: 1fr;
    }

    .show-section .show-content .show-video {
        height: 527px;
    }

    .about-section.about-page .about-content .about-info .about-section__content-container {
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 1024px) {

    .products-section .all-products-container,
    .projects-section .all-projects-container {
        justify-content: center;
    }

    .portfolios-section .all-portfolios-container {
        justify-content: center;
    }

    .contacts-section .contacts-content .contacts-info {
        flex-wrap: wrap;
    }

    .contacts-section .contacts-content .contacts-info form {
        max-width: 600px;
    }

    .contacts-section .contacts-content .contacts-info form .input-container>input,
    .contacts-section .contacts-content .contacts-info form .input-container>textarea,
    .contacts-section .contacts-content .contacts-info form .input-container .captcha__container {
        width: clamp(200px, 40vw, 500px);
    }
}

@media screen and (max-width: 992px) {

    .header nav .logo a,
    .header nav .logo a>img {
        height: 70px;
    }

    .header nav {
        padding: 1rem 0;
    }

    .header nav .header-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        height: 100vh;
        box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        background: #fff;
        padding: 8rem 2rem 2rem;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-100px);
        -webkit-transform: translateY(-100px);
        -moz-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        -o-transform: translateY(-100px);
    }

    .header nav .header-links.active {
        overflow: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: initial;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }

    .header nav .toggle-bars {
        display: flex;
    }

    .header nav .toggle-bars .open-menu-icon {
        display: flex;
    }

    .header nav .toggle-bars .open-menu-icon.active {
        display: none;
    }

    .header nav .toggle-bars .close-menu-icon {
        display: none;
    }

    .header nav .toggle-bars .close-menu-icon.active {
        display: flex;
        position: relative;
        z-index: 1000;
    }

    .header .dropdown-pages {
        position: relative !important;
        background: 0 0 !important;
        border: none;
        transition: var(--trans);
        -webkit-transition: var(--trans);
        -moz-transition: var(--trans);
        -ms-transition: var(--trans);
        -o-transition: var(--trans);
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        -moz-transform: translate3d(0, 0, 0) !important;
        -ms-transform: translate3d(0, 0, 0) !important;
        -o-transform: translate3d(0, 0, 0) !important;
    }

    .header .dropdown-li {
        text-align: center;
        transition: var(--trans);
        -webkit-transition: var(--trans);
        -moz-transition: var(--trans);
        -ms-transition: var(--trans);
        -o-transition: var(--trans);
    }

    [dir="ltr"] .about-section .about-content .about-info .about-text.padding-active {
        padding-left: 0;
    }

    [dir="rtl"] .about-section .about-content .about-info .about-text.padding-active {
        padding-right: 0;
    }

    .section.details-page .details-content .news-details__content-container {
        flex-direction: column;
    }

    .services-section .services-content .cards .card {
        padding: 2rem 1rem;
    }

    .services-section .services-content .cards .card .title-description__container {
        padding: 2rem 1rem;
    }

    .show-section .show-content .show-video {
        height: 392px;
    }

    .portfolios-section .cards {
        grid-template-columns: repeat(2, 2fr);
    }

    .about-section .about-content .about-info {
        gap: 50px;
    }
}

@media screen and (max-width: 860px) {
    .products-section .title-section-page {
        justify-content: center;
    }

    .projects-section .title-section-page {
        justify-content: center;
    }
}

@media screen and (max-width: 792px) {
    .section-page .title-section-page {
        justify-content: center;
    }
}

@media screen and (max-width: 767px) {

    .slider-section .slider-text .slider-text-h1,
    .slider-section .slider-text .slider-text-h2 {
        line-height: 1.1;
    }

    .slider-section .slider-text .slider-text-btn button {
        font-size: 18px;
    }

    .about-section .about-content .about-info {
        flex-direction: column;
        gap: 1rem;
    }

    .contacts-section .contacts-content .contacts-info form .submit-form-btn {
        width: clamp(150px, 20vw, 250px);
    }

    .section.details-page .details-content {
        padding: 100px 20px;
    }

    .about-page-body .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .about-section.about-page .about-content {
        padding: 100px 50px 200px;
    }

    .section.team-details-section .details-content .team-details-text__container {
        width: 300px;
        height: 300px;
    }

    .services-section .services-content .cards .card .service-card__subtitle {
        font-size: 18px;
    }

    .show-section .show-content .show-video {
        height: 290px;
    }

    .career-details-section .form-details-page .career-requirements .input-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .career-details-section .form-details-page .input-control.check-code {
        flex-direction: column;
        align-items: flex-start;
    }

    .career-details-section .form-details-page .input-control.check-code>input {
        width: 100%;
    }

    .career-details-section .form-details-page .input-control,
    .career-details-section .form-details-page .email-input-container {
        width: 100%;
    }
}

@media screen and (max-width: 676px) {
    .slider-section .slider-text {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .slider-section .slider-text:not(:has(.slider-text-h1)) {
        margin-top: 270px;
    }

    .slider-section .slider-text .slider-text-btn {
        margin: 24px auto;
    }

    .products-section .cards {
        gap: 12px;
    }

    .products-section .cards .card .product-card-text>h2 {
        font-size: 18px;
    }

    .contacts-section .contacts-content .contacts-info form {
        width: 100%;
    }

    .contacts-section .contacts-content .contacts-info form .input-container {
        flex-direction: column;
        align-items: self-start;
        gap: 10px;
    }

    .contacts-section .contacts-content .contacts-info form .input-container>input,
    .contacts-section .contacts-content .contacts-info form .input-container>textarea,
    .contacts-section .contacts-content .contacts-info form .input-container .captcha__container {
        width: 100%;
    }

    .contacts-section .contacts-content .contacts-text>p,
    .contacts-section .contacts-content .contacts-text>a {
        text-align: center;
    }

    .about-section .about-content .about-statistics .statistic {
        width: 40%;
    }
}

@media screen and (max-width: 582px) {
    .section-page .title-section-page {
        justify-content: center;
    }

    .section-page .cards .card:not(.products-section .cards .card) {
        max-width: 400px;
        align-items: center;
    }
}

@media screen and (max-width: 500px) {
    .edit-part .change-edit-part .change-container .label-upload-file__wrapper {
        flex-wrap: wrap;
        gap: 10px;
    }

    .edit-part .change-edit-part .change-container .label-upload-file__con {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #image-upload-online-div #thumbnails img {
        width: 100%;
    }

    .slider-section .slides .carousel-inner .carousel-caption {
        width: 100%;
        left: 0%;
        right: 0%;
    }

    .slider-section .slider-text .slider-text-h1 {
        margin-bottom: 1rem;
    }

    .slider-section .slider-text .slider-text-h3 {
        max-width: 197px;
        font-size: 18px;
        line-height: 24px;
        margin: 1rem auto 0;
    }

    .show-section .show-content .show-video {
        height: 400px;
    }

    .why-section .why-content {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .contacts-section .contacts-content .contacts-info form .input-container .captcha__container {
        flex-direction: column;
    }

    .contacts-section .contacts-content .contacts-info form .input-container .captcha__container .captcha__input-container {
        width: 100%;
    }

    .contacts-section .contacts-content .contacts-info form .input-container .captcha__container .captcha__img-container {
        width: 50%;
    }

    .show-section .show-content .show-video {
        height: 267px;
    }

    .section-page .title-section-page>h1 {
        font-size: 40px;
    }

    .products-section .cards .card .img-products-container {
        height: 40vw;
    }

    .products-section .cards .card .img-products-container .product-card__img img {
        object-fit: contain;
    }

    .services-section .services-content .cards .card .img-title__container>.service-card__img {
        height: 120px;
    }

    .products-section .cards .card .product-card-text>p {
        display: none;
    }

    .products-section .cards .card .product-card-text>h3 {
        margin-bottom: 0;
    }

    .news-section .cards .card .img-news-container a>img,
    .news-section .cards .card.update-news-card .img-news-container img {
        height: 200px;
    }
}

@media screen and (max-width: 450px) {
    .section .title-section>h1 {
        font-size: 40px !important;
        line-height: 55px !important;
        margin-bottom: 1.5rem !important;
    }

    .section .title-section>p {
        font-size: 18px !important;
    }

    .apps-section .apps-content .title-section>h1 {
        text-align: center;
        line-height: 60px;
    }

    .products-section .title-section.title-section-page .constant-title-page {
        font-size: 16px;
    }

    .products-section .title-section.title-section-page .constant-title-page>span {
        font-size: 14px;
        margin-top: 2px;
    }

    .products-section .title-section.title-section-page>h1 {
        font-size: 40px;
        line-height: 75px;
    }

    .edit-part {
        --width: 250px;
    }

    .header nav .logo {
        max-width: 100px;
        height: 50px;
    }

    .header nav .logo a,
    .header nav .logo a>img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .about-section .about-content .about-info .about-text h1 {
        text-align: center;
        font-size: 40px;
        line-height: 60px;
        margin: 2rem 0;
    }

    .about-section .about-content .about-info .about-text .about-read-more {
        justify-content: center;
    }

    .about-section.about-page .about-content {
        padding: 80px 24px;
        margin-top: 15rem;
    }

    .products-section .cards {
        gap: 16px;
    }

    .section.details-page .details-content {
        padding: 80px 24px;
        margin-top: 15rem;
    }

    .section.details-page .details-content .title-details-page {
        font-size: 33px;
    }

    .section.details-page .details-content .price-details-page {
        font-size: 20px;
    }

    .section.details-page .details-content .details-details-page {
        font-size: 16px;
    }

    .section.details-page .details-content .btn-details-page {
        max-width: 200px;
    }
}

@media screen and (max-width: 400px) {
    #image-upload-online-div .upload_img_online {
        width: 100%;
    }

    .footer .edit-part .change-edit-part .change-container .dropdown-colors .menu-colors {
        top: -6rem;
        right: -60px;
    }

    .about-section .about-content .about-statistics .statistic {
        width: 100%;
    }

    .section.team-details-section .details-content .team-details-text__container {
        width: 100%;
        height: 200px;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
    }

    .section.team-details-section .details-content .team-details-text__container img {
        object-fit: contain;
    }

    .show-section .show-content .show-video {
        height: 217px;
    }

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

    [dir="ltr"] .plans-section .cards .card .plan-card-text .plan-card-feature {
        padding-left: 1rem;
    }

    [dir="rtl"] .plans-section .cards .card .plan-card-text .plan-card-feature {
        padding-right: 1rem;
    }
}

@media screen and (max-width: 350px) {
    .section .title-section>h1 {
        font-size: 40px;
        line-height: 80px;
    }

    .about-section .about-content .about-statistics {
        justify-content: center;
    }
}

@media screen and (max-width: 1200px) {
    .products-section .cards .card {
        width: calc((100% / 3) - 25px);
    }
}

@media screen and (max-width: 992px) {
    .services-section .services-content .cards {
        gap: 20px;
    }

    .services-section .services-content .cards .card {
        width: calc((100% / 2) - 20px);
    }

    .portfolios-section .cards .card {
        width: calc((100% / 2) - 20px);
    }

    .products-section .cards .card {
        width: calc((100% / 2) - 25px);
    }
}

@media screen and (max-width: 767px) {
    .section-page .general__content.projects-content {
        padding: 100px 20px 400px;
    }

    .projects-section .cards .card {
        width: 100%;
    }
}

@media screen and (max-width: 550px) {
    .products-section .cards .card.update-products-card {
        padding: 10px 5px;
    }

    .section .general__content {
         padding: 100px 25px 400px; 
    }
    /*.section .general__content-2 {*/
    /*    padding: 100px 25px 400px;*/
    /*}*/

}

@media screen and (max-width: 350px) {
    .products-section .cards .card .img-products-container .product-card__img {
        height: 100%;
    }

    .clients-section .cards .card,
    .portfolios-section .cards .card,
    .services-section .services-content .cards .card,
    .products-section .cards .card,
    .news-section .cards .card {
        width: 100%;
    }

    .news-section .cards .card .news-card-text>h3 {
        font-size: 14px;
    }

    .news-section .cards .card .news-card-text>p {
        font-size: 17px;
        line-height: 20px;
    }
}

@media screen and (min-width: 1200px) {
    .main-body .container {
        max-width: 1200px !important;
    }
}

.ck_section ul li {
    list-style: initial;
}

figure.table>table {
    width: 100%;
}

figure.table>table td {
    border-width: 1px;
    border: 1px solid #d3d3d3;
}

.about-section .about-content .about-info .about-text p {
    display: block;
}

.section-page.product-details-section .details-details-page.general__section-paragraph {
    margin-bottom: revert !important;
}

























.section-margine {
    margin: 70px 0 0 0;
}

.col-md-4 {
    width: 33.33333333%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

@media (min-width:992px) {
    .col-md-4 {
        float: left
    }

    .col-md-12 {
        float: left
    }
}

.col-md-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%
}

.section-4-box {
    padding: 20px 0;
    overflow: hidden;
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.section-4-box-icon-cont {
    float: left;
    width: 30px;
    margin: 0 23px 53px 0;
}

.section-4-box-text-cont {
    margin: 0 0 0 15px;
}

.section-4-box-text-cont h5 {
    text-transform: uppercase;
    color: #ffffff;
    font-size: 16px;
    margin: 0 0 10px 0;
}

.section-4-box-text-cont p {
    color: #ffffff;
    font-size: 14px;
}

.col-md-4 {
    width: 33.33333333%
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto
}


/* .section-4-box-icon-cont i, .btn-seconday, a:visited {
    color: #d45252;
} */




.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
    content: "\f1cd";
}




.white {
    background-color: white;
}

.cNav-2 {
    color: #fff;
}




.who {
    border: #3c5884 1.5px solid;
    border-radius: 20px;
    padding: 15px;
}



.kkk-2 {
    color: #1d2f44;
}

ul li a {
    color: #3c5884;
}

.mon {
    color: #000;
}



.button-22 {
    padding: 1rem 2rem;
    border-radius: 2.5rem;
    border: none;
    font-size: 1.4rem;
    font-weight: 400;
    color: #f4f0ff;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.button-22::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 2.5rem;
    background-color: #0f4778;
    /* box-shadow: inset 0 0 12px rgba(151, 200, 255, 0.44); */
    z-index: -1;
}

.button-22::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(8, 77, 126, 0) 0%,
            rgba(8, 77, 126, 0.42) 100%),
        rgba(43, 126, 252, 0.24);
    box-shadow: inset 0 0 12px rgba(23, 128, 247, 0.44);
    /* box-shadow: inset 0 0 12px rgba(151, 200, 255, 0.44); */
    border-radius: 2.5rem;
    opacity: 0;
    z-index: -1;
    transition: all 0.3s ease-in;
}

.button-22:hover::after {
    opacity: 1;
}

.button-22-border {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 2.5rem;
    z-index: -1;
}

.button-22-border::before {
    content: "";
    position: absolute;
    border-radius: 2.5rem;
    padding: 1px;
    inset: 0;
    background-color: #0f4778;

    pointer-events: none;
}













.button-23 {
    padding: 1rem 2rem;
    border-radius: 2.5rem;
    border: none;
    font-size: 1.4rem;
    font-weight: 400;
    color: #0f4778;
    /* color: #f4f0ff; */
    text-align: center;
    position: relative;
    cursor: pointer;
}

.button-23::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 2.5rem;
    background: #fff;
    /* box-shadow: inset 0 0 12px rgba(151, 200, 255, 0.44); */
    z-index: -1;
}

.button-23::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(8, 77, 126, 0) 0%,
            rgba(8, 77, 126, 0.42) 100%),
        rgba(43, 126, 252, 0.24);
    box-shadow: inset 0 0 12px rgba(151, 200, 255, 0.44);
    /* box-shadow: inset 0 0 12px rgba(151, 200, 255, 0.44); */
    border-radius: 2.5rem;
    opacity: 0;
    z-index: -1;
    transition: all 0.3s ease-in;
}

.button-23:hover::after {
    opacity: 1;
}

.button-23-border {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 2.5rem;
    z-index: -1;
}

.button-23-border::before {
    content: "";
    position: absolute;
    border-radius: 2.5rem;
    padding: 1px;
    inset: 0;
    background: #f4f0ff;
    /* -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; */
    pointer-events: none;
}

.new-3 {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.new-3:hover {
    /* animation:  0.5s ease forwards;
    -webkit-animation: 0.5s ease forwards; */
    /* animation-delay: calc(0.15s* var(--delay)); */
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.scrolled .logo img {
    content: url('/public/assets/img/new-2-removebg-preview.png'); /* replace with the scrolled logo image */
  }





  .semi-circle {
    /* background-color: aqua;
    border: 1px solid red; */
    height: 550px;
    width: 330px;
    border-top-right-radius: 400px;
    border-bottom-right-radius: 400px;
    
  }
  
  /* make it responsive */
  @media (max-width: 768px) {
    .semi-circle {
     
      height: 400px;
      width: 200px;
      border-top-right-radius: 200px;
      border-bottom-right-radius: 200px;
    }
  }
  
  @media (max-width: 480px) {
    .semi-circle {
      
      height: 400px;
      width: 200px;
      border-top-right-radius: 200px;
      border-bottom-right-radius: 200px;
    }
  }
.hh{
    display: flex;
    flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding-top: 75%;
   font-size : 2.5vw;
}

@media (max-width: 1650px) {
    .hh{
        font-size: 2.5vw;
    }
}

@media (max-width: 1335px) {
    .hh{
        font-size: 3.5vw;
    }
}



@media (max-width: 748px) {
    .hh{
        font-size: 4.5vw;
    }
    
}
@media (max-width: 992px) {
    .hh{
       padding-top: 80%;
    }
    
}












.poli{
    color: #0f4778;
    font-size: 1.6em;
}










/* Default styles */
.toggle-bars .menuButton input,
.toggle-bars .menuButton .top,
.toggle-bars .menuButton .mid,
.toggle-bars .menuButton .bot {
    background-color: #fff; /* Initial color (white) */
    color: #fff;
    display: inline-block;
   
    transition: background-color 0.3s; /* Smooth transition */
}

/* Styles when the checkbox is checked */
.menuButton input:checked + .top,
.menuButton input:checked + .top + .mid,
.menuButton input:checked + .top + .mid + .bot {
    background-color: #3c5884; /* Change to blue when clicked */
}

/* Styles when scrolled */
.scrolled .menuButton input,
.scrolled .menuButton .top,
.scrolled .menuButton .mid,
.scrolled .menuButton .bot {
    background-color: #3c5884; /* Change to blue when scrolled */
}

/* Optional: Style for the input itself */
.menuButton input {
    display: none; /* Hide the checkbox itself */
}