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

* {
    font-family: "Tajawal", serif;
    font-optical-sizing: auto;
    padding: 0;
    margin: 0;
    outline: none !important;
}

body {
    background: var(--page);
}

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


:root {
    overflow-x: hidden !important;
    --page: #f9fafa;
    --theme: #EDCD1F;
    --dark: #1e2d3b;
    --gray: #f7f7f7;
    --titles: #3d5975;
}

main {
    overflow: hidden;
    position: relative;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

img {
    user-select: none;
}

header {
    background: var(--theme);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999999999999999;
}

.HeaderLogo {
    background: var(--dark);
    padding: 0 35px;
}

.HeaderLogo img {
    display: block;
    margin: 0 0;
    width: auto;
    height: 100px;
    padding: 11px;
    transition: 300ms;
    cursor: pointer;
}

.HeaderTabs {
    display: flex;
    justify-content: center;
    align-items: end;
    margin: 0 10px;
    width: max-content;
    height: 100%;
    color: var(--dark);
    padding: 0;
}

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

.HeaderTabs li {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    height: 80%;
    margin: 0 18px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 300ms;
    font-weight: 600;
}

.HeaderTabs li:hover {
    /* color: var(--theme); */
}

.HeaderTabs .ActiveHeaderTab {
    color: var(--dark);
}

.HomeBG {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
}

.HomeBG video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    object-position: top center;
}

.HomeBG .Overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: overlay;
    background-size: 73px;
}

.Banner {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 100px;
}

.BannerDiv {
}

.BannerDiv h1 {
    display: block;
    margin: 47px auto;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 63px;
    font-weight: bold;
    letter-spacing: 3px;
}

.MoreThanTablet .container {
    width: 960px;
}

.ScrollDownBtn {
    display: block;
    margin: 0 auto;
    width: fit-content;
    background: none;
    border: none;
}

.ScrollDownBtn img {
}

.OurServices {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 56px 0;
    background: white;
}

.OurProducts {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 56px 0;
    background: white;
}

.SectionHeader {
    display: block;
    margin: 0 auto 70px;
    width: 100%;
}

.SectionHeader h1 {
    display: block;
    margin: 0 auto;
    width: fit-content;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    padding-bottom: 20px;
    letter-spacing: 0.05em;
    font-size: 55px;
}

.SectionHeader h1 div {
    position: absolute;
    left: 25%;
    bottom: 0;
    width: 50%;
    background: var(--theme);
    height: 10px;
}

.ServicesItem {
    display: block;
    margin: 20px auto;
    width: 100%;
    background: var(--gray);
    min-height: 90%;
    height: fit-content;
    transition: 300ms;
}

.ServicesItem img {
    display: block;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center center;
    filter: grayscale(1);
    transition: 300ms;
    cursor: pointer;
}

.ServicesItemText {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    color: var(--titles);
}

.ServicesItemText h4 {
    line-height: 1.1em;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
    cursor: pointer;
}

.ServicesItemText p {
    line-height: 1.6em;
    font-size: 15px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines to show */
    line-clamp: 4;
    -webkit-box-orient: vertical;
    min-height: 96px;
}

.About {
    position: relative;
    z-index: 2;
}

.AboutInner {
    display: block;
    margin: 0 0;
    width: 55%;
    background: var(--gray);
    padding: 70px 10px;
    padding-right: 50px;
    min-height: 600px;
}

.AboutInner h1 {
    display: block;
    margin: 0 0;
    width: fit-content;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    padding-bottom: 20px;
    letter-spacing: 0.05em;
    font-size: 55px;
}

.AboutInner h1 div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    background: var(--theme);
    height: 10px;
}

.AboutInner p {
    line-height: 1.7em;
    font-size: 17px;
    display: block;
    margin: 23px auto;
    width: 100%;
    color: var(--titles);
}

.AboutGrayHalf {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: var(--gray);
    z-index: -1;
}

.AboutBG {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    width: 55%;
    height: 100%;
    z-index: 3;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.Counters {
    background: var(--theme);
    padding: 50px 0;
}

.CounterItem {
    color: var(--titles);
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 2;
}

.CounterItem h1 {
    text-align: center;
    font-size: 60px;
    font-weight: bold;
}

.CounterItem label {
    line-height: 1.1em;
    text-align: center;
    font-size: 23px;
    display: block;
    margin: 0 auto;
    width: 50%;
    font-weight: bold;
}

.CounterItemBorder {
    position: absolute;
    right: -6%;
    top: 30%;
    width: 2px;
    height: 40%;
    background: white;
}

.Counters .col-lg-3:last-child .CounterItemBorder {
    display: none;
}

.Projects {
    background: white;
    padding: 59px 0;
    display: block;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.ProjectItem {
    display: block;
    margin: 15px auto;
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.ProjectItem img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: 500ms;
}

.ProjectItem h1 {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ffffff94;
    justify-content: center;
    align-items: center;
    font-size: 23px;
    color: var(--titles);
}

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

.ProjectItem:hover h1 {
    display: flex;
}

.Clients {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: white;
    padding: 50px 0;
}

.ClientsItem {
    display: block;
    margin: 0 auto;
    width: 80%;
    position: relative;
    filter: grayscale(1);
    transition: 300ms;
}

.ClientsItem img {
    display: block;
    margin: 0 auto;
    width: 85%;
    aspect-ratio: 1/1;
    object-fit: contain;
    object-position: center center;
}

.ClientsItem:hover {
    filter: grayscale(0);
}

.Clients .SectionHeader {
    margin: 0 auto 15px;
}

.Contact {
    display: block;
    margin: 0 auto;
    width: 100%;
    background: white;
    padding: 60px 0;
    border-top: solid 1px var(--titles);
}

.ContactMap {
    display: block;
    margin: 0 auto;
    width: 100%;
    background: var(--gray);
    position: relative;
    aspect-ratio: 1/0.4;
    overflow: hidden;
}

.ContactMap iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.ContactSection {
    display: block;
    margin: 40px auto;
    width: 100%;
    color: var(--titles);
}

.ContactSection h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
    font-size: 27px;
}

.ContactSection label {
    display: block;
    margin: 6px 0;
    width: 100%;
    letter-spacing: normal;
    line-height: normal;
    font-size: 18px;
}

.ContactSection p {
    display: block;
    margin: 30px 0;
    width: 100%;
    letter-spacing: normal;
    line-height: normal;
    font-size: 18px;
}

.ContactSectionForm {
}

.ContactSectionFormRow {
    display: block;
    margin: 18px auto;
    width: 100%;
}

.ContactSectionFormRow label {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 15px;
}

.ContactSectionFormRow input {
    display: block;
    margin: 5px auto;
    width: 100%;
    background: var(--gray);
    border: solid 1px var(
        --titles);
    height: 40px;
    padding: 0 10px;
}

.ContactSectionFormRow textarea {
    display: block;
    margin: 5px auto;
    width: 100%;
    background: var(--gray);
    border: solid 1px var(--titles);
    height: auto;
    padding: 0 10px;
    min-height: 80px;
}

.ContactSectionFormSubmit {
    display: flex;
    justify-content: end;
    margin: 0 auto;
    width: 100%;
}

.ContactSectionFormSubmit button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    background: var(--dark);
    color: var(--theme);
    font-weight: bold;
    border: none;
    padding: 8px 45px;
    transition: 300ms;
}

.ContactSectionFormSubmit button:hover {
    color: var(--dark);
    background: var(--theme);
}

.EmploymentParagraph {
    position: relative;
    padding-bottom: 20px;
}

.EmploymentParagraph g {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 10px;
    background: var(--theme);
}

.ContactGetQuote {
}

.ContactGetQuote h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
    font-size: 23px;
    color: var(--titles);
}

.ContactGetQuoteSocialMedia {
    display: flex;
    justify-content: start;
    margin: 15px auto;
    width: 100%;
    align-items: center;
}

.ContactGetQuoteSocialMedia a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    aspect-ratio: 1/1;
    margin: 0 4px;
    overflow: hidden;
    border-radius: 1000px;
    padding: 0;
    text-decoration: none !important;
}

.ContactGetQuoteSocialMedia a img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.ServicesItem:hover {
}

.ClientsSlider {
    direction: ltr !important;
}

.ClientsSliderItem {
}

.ProductsSlider {
    /* margin-top: 50px; */
}

.ProductsSliderItem {
}

.ProductsSliderItem .ServicesItem {
    margin: 50px auto;
    width: 85%;
}

.ProductsSliderItem .ServicesItem:hover img {
    filter: grayscale(0);
}

.ProductsPage .ServicesItem:hover img {
    filter: grayscale(0);
}

.ProjectsNew {
    position: relative;
    background: #f7f7f7;
}

.ProjectInner {
    display: block;
    margin: 0 0;
    width: 100%;
    padding: 100px 10px;
    padding-right: 50px;
}

.ProjectInner h1 {
    display: block;
    margin: 0 0;
    width: fit-content;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    padding-bottom: 20px;
    letter-spacing: 0.05em;
    font-size: 55px;
}

.ProjectInner h1 div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    background: var(--theme);
    height: 10px;
}

.ProjectInner p {
    line-height: 1.7em;
    font-size: 17px;
    display: block;
    margin: 23px auto;
    width: 100%;
    color: var(--titles);
}

.ProjectsSliderItemInner {
    display: block;
    margin: 10px auto;
    width: 90%;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    /* border-radius: 20px; */
}

.ProjectsSliderItemInner img {
    display: block;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center center;
}

.ProjectsSliderItemText {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 19px;
    color: #4a4a4a;
}

.ProjectsSliderItemText h1 {
    display: block;
    margin: 5px auto;
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
}

.ProjectsSliderItemText p {
    margin: 0 auto;
    width: 100%;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    line-clamp: 3;
    -webkit-box-orient: vertical;
}


.ProjectsSlider .slick-dots {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    flex-direction: column;
}

.ProjectsSlider .slick-dots li {
    display: flex;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.ProjectsSlider .slick-dots li div {
    display: block;
    margin: 4px auto;
    width: 13px;
    height: 13px;
    background: #838383;
    border-radius: 1000px;
    opacity: 0.3;
    transition: 300ms;
    cursor: pointer;
}

.ProjectsSlider .slick-dots .slick-active div {
    height: 20px;
    opacity: 1;
    background: var(--theme);
    cursor: default;
}

.ProjectsSliderParent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.ProjectsSlider {
    display: block;
    margin: 0 auto;
    width: 100%;
    direction: ltr !important;
    position: relative;
    padding-left: 40px;
}

.ClientsSlider .slick-dots, .ProductsSlider .slick-dots, .SolutionsSlider .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    padding: 0;
    margin: 43px auto 0;
}

.ClientsSlider .slick-dots li, .ProductsSlider .slick-dots li, .SolutionsSlider .slick-dots li {
    display: block;
    margin: 0 auto;
    width: fit-content;
}

.ClientsSlider .slick-dots li div, .ProductsSlider .slick-dots li div, .SolutionsSlider .slick-dots li div {
    display: block;
    margin: 0 3px;
    width: 15px;
    height: 12px;
    background: #000000;
    border-radius: 1000px;
    transition: 300ms;
    opacity: 0.2;
    cursor: pointer;
}

.ClientsSlider .slick-dots .slick-active div, .ProductsSlider .slick-dots .slick-active div, .SolutionsSlider .slick-dots .slick-active div {
    background: var(--theme);
    width: 27px;
    opacity: 1;
    cursor: default;
}

.ContactSectionFormRow label u {
    text-decoration: none;
    font-size: 13px;
}

.UploadReferenceBtn {
    display: block;
    margin: 6px auto;
    width: 100%;
    height: 45px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    border: none;
    text-transform: uppercase;
    background: var(--dark);
    color: aliceblue;
    font-weight: 600;
    letter-spacing: 2px;
    transition: 300ms;
}

.UploadReferenceBtn i {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00000014;
}

.ReferenceSelected {
    background: #6aa073;
}

.UploadReferenceBtn:hover {
    background: var(--theme);
    color: var(--dark);
}

.Pagination {
    display: flex;
    justify-content: center;
    align-items: start;
    width: fit-content;
    margin: 36px auto;
    flex-wrap: wrap;
}

.Pagination a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    text-decoration: none;
    padding: 5px 10px;
    margin: 0 10px;
    background: #dedede;
    border-radius: 5px;
    color: var(--dark);
    transition: 300ms;
}

.Pagination .ActivePagination {
    background: var(--theme) !important;
    color: var(--dark) !important;
}


.Pagination a:hover {
    background: #d5d5d5;
    transform: scale(1.1);
}

.ExternalPage {
    padding-top: 100px;
}

.ProductsPage {
    padding: 110px 0;
    background: #ffffff;
}

.AboutPage {
    padding: 45px 0;
}

.AboutCover {
    display: flex;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1/0.4;
    background: var(--dark);
    position: relative;
    overflow: hidden;
    z-index: 2;
    justify-content: center;
    align-items: center;
}

.AboutCover .setbg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.4;
    filter: blur(2px);
}

.AboutCover h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-size: 50px;
    font-weight: bold;
}

.AboutPageBody {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
}

.AboutPageBody * {
    max-width: 100%;
}

.ProductShowPage {
    padding: 80px 0;
}

.ProductShowPageThumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

.ProductShowPageThumb {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1/1;
    background: #ebebeb;
    position: relative;
    overflow: hidden;
}

.ProductShowPageBody {
}

.ProductShowPageBodyHeader {
}

.ProductShowPageBodyHeader h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 25px;
    font-weight: bold;
    color: var(--dark);
}

.ProductShowPageBodyHeader p {
    display: block;
    margin: 10px auto 30px;
    width: 100%;
    font-size: 16px;
}

.ProductShowPageBodyTextEditor {
}

.ProductShowPageBodyTextEditor * {
}

.ProductShowPageThumbsGH {
    display: block;
    margin: 0 auto;
    width: 100%;
    overflow-y: auto;
    background: #ebebeb;
    padding: 10px 0;
}

.ProductShowPageThumbsItem {
    display: block;
    margin: 0 7px;
    width: 60px;
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    filter: grayscale(1);
    border: solid 2px transparent;
    transition: 300ms;
}

.ActiveProductShowPageThumb {
    filter: grayscale(0);
    border-color: var(--theme);
}

.ProductShowPageThumbsGHInner {
    display: flex;
    justify-content: start;
    align-items: center;
    width: max-content;
    flex-direction: row;
}

.ProductShowPageThumbsItem:hover {
    transform: scale(1.1);
}

.RawMeterialShowPage {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 40px 0;
}

.RawMeterialShowPageCover {
    display: block;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1/0.4;
    background: #e9e9e9;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.RawMeterialShowPageCover img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.RawMeterialShowPageHeader {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.RawMeterialShowPageHeader h4 {
    display: block;
    margin: 16px auto;
    width: 100%;
    font-weight: bold;
    color: var(--theme);
    filter: brightness(90%);
}

.RawMeterialShowPageBody {
}

.RawMeterialShowPageBody * {
    max-width: 100%;
}

.RawMeterialShowProducts {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 100%;
}

.RawMeterialShowProducts .ServicesItem {
    width: 29%;
    margin: 21px 2%;
    background: #ffffff;
}

.RawMeterialShowProductsParent {
    display: block;
    margin: 80px auto 0;
    width: 100%;
}

.OurServices .ServicesItem {
    filter: none !important;
}

.ProductDetailsBtn {
    background: #1f5079;
    display: block;
    margin: 0 auto;
    width: fit-content;
    color: white;
    padding: 8px 20px;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    transition: 300ms;
}

.ProductDetailsBtn i {
    margin: 0 0;
    margin-right: 9px;
}

.ProductDetailsBtn:hover {
    background: var(--theme);
}

.ProductsDetailsPopUp {
    display: none;
}

.ProductsDetailsPopUpInner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ProductsDetailsPopUpFade {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000000;
    opacity: 0.5;
}

.ProductsDetailsPopUpDiv {
    display: block;
    margin: 0 auto;
    width: 700px;
    background: #f2f2f2;
    position: relative;
    padding: 40px 20px;
    max-width: 100%;
}

.ProductsDetailsPopUpDiv g {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    background: red;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px #1f5079;
    border-radius: 5px;
    margin: 10px;
    background: none;
    color: #6d6d6d;
    cursor: pointer;
}

.ProductDetailsName {
    display: block;
    margin: 0 auto 25px;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

.ProductDetailsContactBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 35px auto 0;
    width: fit-content;
    padding: 10px 22px;
    border: none;
    background: #1f5079;
    color: white;
}

.ProductDetailsContactBtn i {
    margin: 0 6px;
}

.ProductDetailsContactBtn .setbg {
    display: inline-block;
    width: 15px;
    aspect-ratio: 1/1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    filter: invert(1);
    margin-right: 9px;
}

.AboutSection {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 100px 0;
    background: white;
    position: relative;
    z-index: 2;
}

.AboutSectionInner {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 0 0;
    padding-left: 230px;
    position: relative;
    min-height: 390px;
}

.AboutSectionThumbCEO {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    background: var(--theme);
    color: aliceblue;
    padding-bottom: 10px;
    z-index: 2;
}

.AboutSectionThumbCEO .setbg {
    display: block;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1/1.5;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.AboutSectionThumbCEOTextGH {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 0 10px;
}

.AboutSectionThumbCEOTextGH * {
    max-width: 100%;
}

.AboutSectionText {
}

.AboutSectionTextHeader {
    display: block;
    margin: 0 0 0;
    width: fit-content;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 8px;
}

.AboutSectionTextHeader div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 7px;
    background: var(--theme);
}

.Signature {
    display: block;
    margin: 0 0;
    width: 145px;
    aspect-ratio: 1/0.5;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.Buildings {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 200px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.AboutSectionWithBorder {
    border-top: solid 40px var(--theme);
}

.AboutSectionTextIcon {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    aspect-ratio: 1/1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}


.AboutSectionTextWithIcon {
    display: block;
    margin: 60px auto;
    width: 100%;
    padding-left: 140px;
    position: relative;
}

.AboutSectionTextEditorGH {
    display: block;
    margin: 19px auto;
    width: 100%;
}

.AboutSectionTextEditorGH * {
    max-width: 100%;
}

.ExternalPageSharedHeader {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.ExternalPageSharedHeader h1 {
    display: block;
    margin: 0 0;
    width: fit-content;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    padding-bottom: 10px;
}

.ExternalPageSharedHeader h1 div {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 50%;
    height: 7px;
    background: var(--theme);
    width: 90px;
}

.ExternalPageSharedHeader label {
    display: block;
    margin: 13px auto;
    width: 100%;
    font-weight: bold;
    color: #9d9d9c;
}

.ProductFeaturesGH {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
    flex-wrap: wrap;
}

.ProductFeaturesItem {
    display: block;
    margin: 10px 0;
    position: relative;
    padding: 7px 0;
    padding-left: 100px;
    width: 45%;
}

.ProductFeaturesItem h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-weight: 500;
    font-size: 20px;
}

.ProductFeaturesItem p {
    display: block;
    margin: 5px auto;
    width: 100%;
}

.ProductFeatureIcon {
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;
    aspect-ratio: 1/1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.ProductSpecifications {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 85px 0;
    border-top: solid 40px var(--theme);
}

.ProductSpecificationsTexEditor {
}

.ProductSpecificationsTexEditor * {
    max-width: 100%;
}

.ProductSpecificationsTable {
    display: block;
    margin: 80px auto;
    width: 500px;
    max-width: 100%;
}

.ProductSpecificationsTable h1 {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.ProductSpecificationsTable h1 g {
    display: block;
    margin: 0 0;
    width: 49%;
    background: #1d2d3c;
    color: aliceblue;
    padding: 10px 8px;
    font-size: 28px;
    text-transform: uppercase;
    text-align: center;
}

.ProductSpecificationsTable h1 g:last-child {
    background: #dbbe1f;
}

.ProductSpecificationsTable h1 y {
    display: block;
    margin: 0 0;
    width: 49%;
    background: #ededed;
    color: #1d2d3c;
    padding: 10px 8px;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    border-bottom: solid 1px white;
}

.ProductSpecificationsTable h1 y:first-child {
    padding-right: 40px;
}

.ProductSpecificationsTable h1 y .setbg {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    background-size: 18px;
    background-position: center center;
    background-repeat: no-repeat;
    filter: invert(1);
}

.SolutionsPage {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 90px 0;
}

.SolutionsItem {
    display: flex;
    margin: 0 auto;
    width: 100%;
    border-top: solid 31px var(--theme);
    justify-content: space-between;
    align-items: start;
}

.SolutionsItemText {
    display: block;
    margin: 0 0;
    width: 45%;
    padding: 35px 15px;
    min-height: 330px;
}

.SolutionsItemText h1 {
    display: block;
    margin: 9px auto;
    width: 100%;
    position: relative;
    padding: 0 0;
    padding-bottom: 15px;
    text-transform: uppercase;
    font-size: 25px;
}

.SolutionsItemText h1 div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90px;
    height: 8px;
    background: var(--theme);
    max-width: 50%;
}

.SolutionsItemText p {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 14px;
}

.SolutionsItemImages {
    display: flex;
    margin: 0 0;
    width: 50%;
    flex-wrap: wrap;
    justify-content: start;
    aspect-ratio: 1/0.7;
    overflow: hidden;
    position: relative;
    overflow-y: auto;
}

.SolutionsItemThumb {
    display: block;
    margin: 1%;
    width: 48%;
    aspect-ratio: 1/0.5;
    background-size: cover;
    cursor: pointer;
    transition: 300ms;
}

.SolutionsItemThumb:hover {
    transform: scale(1.05);
}

.ImagePrev {
    display: none;
}

.ImagePrevInner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999;
    display: flex;
    justify-content: center;
];
] c;
];
    align-items: center;
}

.ImagePrevDiv {
    display: flex;
    margin: 0 auto;
    width: 800px;
    max-width: 80%;
    aspect-ratio: 1/1;
    max-height: 90%;
    position: relative;
    overflow: hidden;
    background: #000000;
    justify-content: center;
    align-items: center;
}

.ImagePrevDiv img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.ImagePrevFade {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000000;
    opacity: 0.5;
}

.Preloader {
}

.PreloaderInner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    z-index: 9999999999999999999999;
}

.PreloaderDiv {
    display: block;
    margin: 0 auto;
    width: 250px;
    background: none;
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.PreloaderDiv img {
    display: block;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    object-position: center center;
    position: relative;
    z-index: 2;
    padding: 60px;
}

.PreloaderLoader {
    position: absolute;
    left: 15%;
    top: 15%;
    width: 70%;
    aspect-ratio: 1/1;
    background: #f1f1f1;
    z-index: -1;
    border-radius: 10000px;
    transform: translatey(0px);
    -webkit-animation: PreloaderLoaderAnimation 3s ease-in-out infinite;
    animation: PreloaderLoaderAnimation 3s ease-in-out infinite;
}

@keyframes PreloaderLoaderAnimation {
    0% {
        transform: scale(0.0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0.0);
    }
}

.SideMenuBtn {
    display: none;
}

.SideMenu {
    display: none;
}

footer {
    display: none;
    margin: 0 auto;
    width: 100%;
    background: #ffffff;
    padding: 10px 0;
    border-top: solid 1px #e7e7e7;
}

.FooterInner {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.FooterInner p {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-weight: 500;
    color: #7c7c7c;
}

.FooterInner p a {
    display: inline-block;
    text-decoration: none !important;
}

.FooterInner p a img {
    display: inline-block;
    width: 60px;
    vertical-align: baseline;
    transition: 300ms;
}

.FooterInner p a img:hover {
    transform: scale(1.1);
}

.ErrorPage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 100px;
}

.ErrorPageDiv {
    display: block;
    margin: 0 auto;
    width: fit-content;
    text-align: center;
}

.ErrorPageDiv img {
    display: block;
    margin: 0 auto;
    width: 146px;
    filter: hue-rotate(-168deg);
}

.ErrorPageDiv h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: var(--dark);
}

.ErrorPageDiv p {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.ErrorPageDiv button {
    display: block;
    margin: 20px auto;
    width: fit-content;
    padding: 10px 15px;
    background: var(--dark);
    color: aliceblue;
    border-radius: 5px;
    padding-left: 45px;
    position: relative;
    border: none;
    transition: 300ms;
}

.ErrorPageDiv button .setbg {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center center;
    filter: invert(1);
}

.Solutions {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 70px 0;
    background: white;
}

.SolutionsSliderItem {
}

.SolutionsSliderItemInner {
    display: block;
    margin: 0 auto;
    width: 90%;
    background: #f7f7f7;
}

.SolutionsSliderItemImages {
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    aspect-ratio: 1/1;
    flex-wrap: wrap;
    overflow: hidden;
    overflow-y: auto;
}

.SolutionsSliderItemImagesItem {
    display: block;
    margin: 3px 1%;
    width: 48%;
    aspect-ratio: 1/0.7;
    background-size: cover;
    cursor: pointer;
}

.SolutionsSliderItemText {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 15px;
}

.SolutionsSliderItemText h1 {
    line-height: 1.1em;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
    /* cursor: pointer; */
    margin: 15px auto;
    text-transform: uppercase;
}

.SolutionsSliderItemText p {
    line-height: 1.6em;
    font-size: 15px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    min-height: 96px;
}

.FooterLogos {
    display: flex;
    justify-content: start;
    width: 100%;
    margin: 20px auto;
    flex-wrap: wrap;
}

.FooterLogosItem {
    display: block;
    margin: 9px 4%;
    width: 20%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 300ms;
}

.FooterLogosItem img {
    display: block;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    object-position: center;
}

.FooterLogosItem:hover {
    transform: scale(1.1);
}