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

body {
    background: #e7e7e7;
    overflow-x: hidden !important;
}

:root {
    max-width: 100%;
    overflow-x: hidden !important;
    --theme: #2bb2df;
    --theme2: #125f78;
}

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

main {
    overflow-x: hidden !important;
    width: 100%;
    overflow: hidden;
    min-height: 100vh;
    padding-top: 0;
}

button {
    cursor: pointer !important;
    user-select: none;
}

/* 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 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: fit-content;
    background: #ffffff;
    padding: 10px 0;
    z-index: 999;
}

.HeaderInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    flex-wrap: wrap;
}

.HeaderLogoParent {
    display: flex;
    justify-content: space-between;
    margin: 0 0;
    width: fit-content;
    align-items: center;
}

.HeaderLogo {
    display: block;
    margin: 0 0;
    width: fit-content;
    height: fit-content;
    position: relative;
    overflow: hidden;
    z-index: 2;
    cursor: pointer;
    transition: 300ms;
}

.HeaderLogo:hover {
    transform: scale(1.1);
    filter: brightness(110%);
}

.HeaderLogo img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: 50px;
    position: relative;
    z-index: 1;
}

.HeaderLogoParent h6 {
    display: block;
    margin: 0 0;
    padding: 0 0;
    direction: ltr;
    font-weight: 700;
    color: #737373;
    transition: 300ms;
    margin-left: 10px;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    top: 7px;
    font-weight: 400;
}

.HeaderLogoParent h6 i {
    color: var(--theme);
    margin: 0 5px;
    font-size: 16px;
}

.HeaderTabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: max-content;
}

.HeaderTabsMainList {
    display: flex;
    justify-content: start;
    align-items: center;
    width: max-content;
    margin: 0 0;
    padding: 0 0;
}

.HeaderTabsMainList li {
    display: block;
    margin: 0 11px;
    width: fit-content;
    padding: 10px 5px;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    color: #636363;
    transition: 400ms;
    position: relative;
}

.HeaderTabsMainList li:hover {
    /* transform: scale(1.1); */
    color: var(--theme);
}

.HeaderTabsMainList li ul {
    display: none;
    position: absolute;
    right: 0;
    top: 39px;
    width: max-content;
    background: #ffffff;
    min-width: 245px;
    box-shadow: 0px 0px 21px -12px #000000;
    border-radius: 10px;
    padding: 0;
    margin: 0;
}

.HeaderTabsMainList li:hover ul {
    display: block;
}

.RequestQuoteHeaderBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    font-size: 13px;
    text-transform: uppercase;
    color: #3dbd71;
    border: solid 1.9px;
    padding: 9px 13px;
    position: relative;
    padding-left: 40px;
    border-radius: 5px;
    margin-left: 10px;
    transition: 400ms;
    font-weight: 600;
}

.RequestQuoteHeaderBtn i {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}


.RequestQuoteHeaderBtn:hover {
    /* transform: scale(1.1); */
    background: #3dbd71;
    border-color: #3dbd71;
    color: white;
}

.Shine {
    position: absolute;
    right: -40px;
    top: -50%;
    height: 200%;
    width: 0;
    transform: rotate(32deg);
    box-shadow: 1px 1px 10px 5px white;
    -webkit-animation: ButtonShineAnimation 3s ease-in-out infinite;
    animation: ButtonShineAnimation 3s ease-in-out infinite;
    z-index: 22;
}

@keyframes ButtonShineAnimation {
    0% {
        right: -120%;
    }
    100% {
        right: 220%;
    }
}


.HeaderTabsMainList li ul li {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 7px 10px;
    border-bottom: solid 1px #dddddd;
    transform: scale(1.0) !important;
    font-size: 13px;
    position: relative;
    padding-right: 40px;
}

.HeaderTabsMainList li ul li:hover {
}


.HeaderTabsMainList li ul li:last-of-type {
    border: 0
}

.HeaderTabsMainList li .fa-angle-down {
    margin: 0 6px;
}

.Banner {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.BannerInner {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding-top: 68px;
}

.BannerDiv {
    display: block;
    margin: 0 0;
    width: 850px;
    max-width: 100%;
    color: white;
}

.BannerDiv h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 50px;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 0px 0px 40px #000000;
    line-height: 1.5;
}

.BannerDiv p {
    display: block;
    margin: 15px auto;
    width: 100%;
    font-size: 24px;
    font-weight: 300;
    text-shadow: 0px 0px 40px #000000;
    text-align: justify;
}

.BannerDiv button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 15px 15px;
    color: white;
    background: none;
    border: solid 2px;
    text-transform: uppercase;
    border-radius: 10px;
    margin: 25px 0 0;
    transition: 350ms;
}

.BannerDiv button:hover {
    background: white;
    border-color: white;
    color: var(--theme2);
}

.BannerDiv button i {
    margin: 0 13px;
}

.BannerDiv h1 u {
    text-decoration: none;
    color: var(--theme);
    background: var(--theme);
    color: #ffffff;
    padding: 5px 15px;
    border-radius: 10px;
    text-shadow: none;
    filter: brightness(90%) contrast(140%);
    margin: 0 5px;
}

.HomeFixedVid {
    position: fixed;
    left: 0;
    top: 0;
    background: #002030;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.HomeFixedVid video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.HeaderTabsMainList li ul li .fa-caret-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.HeaderLogoParent h6:hover {
    color: var(--theme);
}

.About {
    background: #ffffff;
    padding: 70px 0;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.AboutArt {
    position: absolute;
    top: -2%;
    width: 73%;
    height: 85%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
    -webkit-animation: AboutArtAnimation 12s ease-in-out infinite;
    animation: AboutArtAnimation 12s ease-in-out infinite;
    pointer-events: none;
    filter: drop-shadow(-100px -1px 6px #0000001c);
}

@keyframes AboutArtAnimation {
    0% {
        right: -15%;
        transform: rotate(-30deg) scale(1.0);
    }
    50% {
        right: -13%;
        transform: rotate(-25deg) scale(1.05);
    }
    100% {
        right: -15%;
        transform: rotate(-30deg) scale(1.0);
    }
}

.AboutDiv {
    display: block;
    margin: 0 0;
    width: 50%;
}

.AboutDiv h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--theme);
}

.AboutDiv label {
    display: block;
    margin: 15px auto;
    width: 100%;
    font-size: 17px;
    color: #898989;
    text-align: justify;
}

.AboutDiv p {
    display: block;
    margin: 15px auto;
    width: 100%;
    font-size: 17px;
    text-align: justify;
}

.AboutDiv button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #161616;
    border: solid 2px;
    padding: 10px 10px;
    text-transform: uppercase;
    background: none;
    margin: 25px 0 0;
    transition: 350ms;
}

.AboutDiv button:hover {
    transform: scale(1.1);
    background: var(--theme);
    border-color: var(--theme);
    color: white;
}

.AboutDiv button i {
    margin: 0 11px;
}

.AboutVid {
    position: absolute;
    right: -10%;
    top: -25%;
    width: 51%;
    height: 160%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
    font-size: 55px;
    cursor: pointer;
    transition: 350ms;
    opacity: 0.4;
    z-index: 1;
    border-radius: 200%;
}

.AboutVid i {
    transition: 600ms;
}


.AboutVid:hover {
    background: #2bb2df4d;
    opacity: 1;
    color: var(--theme2);
}

.AboutVid:hover i {
    transform: rotateY(360deg);
}

.AboutCounters {
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    flex-wrap: wrap;
    margin: 24px auto;
}

.AboutCountersItem {
    display: block;
    margin: 16px 0;
    width: 32%;
    margin-right: 1%;
    border-left: solid 2px #c1c1c1;
    padding: 6px 20px;
    transition: 100ms;
}

.AboutCountersItem h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 15px;
    color: var(--theme2);
    text-transform: uppercase;
    font-weight: bold;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 36px;
    cursor: default;
}

.AboutCountersItem h5 {
    display: block;
    margin: 5px 0 0;
    width: fit-content;
    text-decoration: none;
    font-size: 20px;
    color: #4e4e4e;
    letter-spacing: 1px;
    cursor: default;
    position: relative;
}

.AboutCountersItem h5 u {
    text-decoration: none;
    font-size: 25px;
    font-weight: bold;
}

.AboutPattern {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
    z-index: 1;
    filter: invert(1);
    opacity: 0.1;
    -webkit-animation: AboutPatternAnimation 5s ease-in-out infinite;
    animation: AboutPatternAnimation 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes AboutPatternAnimation {
    0% {
        transform: scale(1.0)
    }
    50% {
        transform: scale(1.2)
    }
    100% {
        transform: scale(1.0)
    }
}

.AboutCountersItem:hover {
    background: #f7f7f7;
    border-left: solid 5px var(--theme2);
}

.OurServices {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 80px 0 70px;
    background: #00203091;
    position: relative;
}

.HomeSectionHeader {
    display: block;
    margin: 0 0;
    width: 800px;
    max-width: 100%;
    color: #3c3c3c;
    position: relative;
    z-index: 2;
}

.HomeSectionHeader h1 {
    display: block;
    margin: 0 0;
    width: fit-content;
    font-size: 40px;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    padding-bottom: 20px;
}

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

.HomeSectionHeader p {
    display: block;
    margin: 15px auto;
    width: 100%;
    font-size: 20px;
    font-weight: 400;
}

.OurServices .HomeSectionHeader {
    color: white;
}

.OurServicesGH {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
    margin: 20px auto;
    flex-wrap: wrap;
}

.OurServicesItem {
    display: block;
    margin: 30px 0;
    width: 30%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1.2;
    z-index: 2;
    background: #ffffff;
    border-radius: 20px;
    transition: 200ms;
    cursor: pointer;
}

.OurServiceItemThumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    object-position: center center;
    opacity: 1;
    transition: 0.7s;
    filter: grayscale(50%);
}

.OurServicesItemDetails {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px;
    pointer-events: none;
    color: #ffffff;
    transition: 200ms;
}

.OurServicesItemDetails h2 {
    display: block;
    margin: 5px auto;
    width: 100%;
    font-weight: bold;
    font-size: 28px;
    color: var(--theme);
    font-size: 21px;
    text-transform: uppercase;
}

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

.OurServicesItemFade {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: #000000;
    z-index: -1;
    box-shadow: -2px -20px 85px 101px #000000;
    opacity: 0.9;
}


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

.OurServicesItem:hover .OurServiceItemThumb {
    transform: scale(1.2);
    filter: brightness(110%);
}

.AboutCountersItem h5 s {
    position: absolute;
    right: -5px;
    top: 5px;
    margin: -10px;
    text-decoration: none;
    font-weight: bold;
}

.Clients {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    padding: 1px 0;
    background: #ffffff;
    z-index: 3;
}

.ClientsSliderEdge {
    position: absolute;
    left: 0;
    top: -113px;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    z-index: -2;
    background-position: top center;
    background-repeat: no-repeat;
    direction: ltr;
}


.ClientsSliderEdge:nth-last-child {
}

.ClientsInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 60px auto;
    background: #ebebebc9;
    padding: 20px;
    border-radius: 10px;
}

.ClientsInner h1 {
    display: block;
    margin: 0 0;
    border-right: solid 4px var(--theme);
    padding: 15px 40px;
    width: max-content;
    max-width: 30%;
    color: #484848;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 30px;
}

.ClientsSliderParent {
    display: block;
    margin: 0 0;
    width: 70%;
    direction: ltr;
}

.ClientsSlider {
    mix-blend-mode: darken;
}

.ClientsSliderItem {
}

.ClientsSliderItem .setbg {
    display: block;
    margin: 0 auto;
    width: 66%;
    aspect-ratio: 1/0.5;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    filter: grayscale(1);
    opacity: 0.6;
    transition: 300ms;
    cursor: grab;
}

.ClientsSliderEdgeFlipped {
    transform: rotateX(180deg);
    background-position: bottom center;
    top: unset;
    height: 200px;
    bottom: -122px;
}

.ClientsSliderItem .setbg:hover {
    filter: none;
    opacity: 1
}

.ClientsInner:last-child h1 {
    border: 0;
    border-left: solid 4px var(--theme);
}

.CertificateSlider {
    direction: ltr;
}

.ClientsBG {
    position: absolute;
    left: -22%;
    top: -38%;
    width: 85%;
    height: 180%;
    z-index: -1;
    overflow: visible;
    pointer-events: none;
}

.ClientsBG iframe {
    position: absolute;
    left: -35%;
    top: -5%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    filter: grayscale(1);
    /* opacity: 0.3; */
    transform: scale(1.6) rotateY(180deg);
}

.ClientsInnerParent {
}

.GetConsultation {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    background: #0b3d4e;
    padding: 140px 0 70px;
    z-index: 1;
}

.GetConsultation .HomeSectionHeader {
    margin: 0 0;
    color: white;
}

.GetConsultationForm {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
    align-items: start;
    flex-wrap: wrap;
    padding-right: 300px;
    position: relative;
    z-index: 2;
}

.GetConsultationForm textarea {
    display: block;
    margin: 12px auto;
    width: 100%;
    padding: 15px 15px;
    min-height: 135px;
    border-radius: 5px;
    border: none;
}

.GetConsultationFormRow {
    width: 49%;
    margin: 21px 0;
    height: 50px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 5px;
}

.GetConsultationFormRow input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 0 17px;
}

.GetConsultation .HomeSectionHeader h1 {
}

.AnimatedRobot {
    position: absolute;
    right: 1%;
    bottom: 0;
    width: auto;
    height: 504px;
    aspect-ratio: 1/1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 3;
    pointer-events: none;
}

.FAQ {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 30px 0;
    background: #ffffff;
    z-index: 2;
    position: relative;
}

.FAQsGH {
}

.FaqItem {
    display: block;
    margin: 25px auto;
    width: 100%;
    border: solid 2px var(--theme2);
    padding: 20px;
    cursor: pointer;
    transition: 350ms;
    border-radius: 10px;
    padding-left: 77px;
    position: relative;
    opacity: 0.7;
}

.FaqItem .setbg {
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    aspect-ratio: 1/1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 15px;
}

.FaqItem h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    color: var(--theme2);
    position: relative;
    padding-right: 50px;
    cursor: unset;
    user-select: none;
}

.FaqItem h4 i {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: auto;
    transition: 350ms;
}

.FaqItem p {
    display: none;
    margin: 10px auto 0;
    width: 100%;
    font-size: 18px;
}

.FaqItemOpened {
    opacity: 1;
}

.FaqItemOpened h4 {
}

.FaqItemOpened h4 i {
    transform: rotateX(180deg);
}

.FaqItemOpened p {
    display: block;
}

.FAQ .HomeSectionHeader {
    margin: 0 auto 40px;
    text-align: center;
}

.FAQ .HomeSectionHeader h1 {
    margin: 0 auto;
}

.GetConsultationFormSubmit {
    display: block;
    margin: 15px auto 0;
    width: 100%;
    padding: 13px 0;
    text-transform: uppercase;
    color: white;
    background: var(--theme);
    border: none;
    font-size: 16px;
    border-radius: 5px;
    position: relative;
    transition: 350ms;
    letter-spacing: 3px;
}

.GetConsultationFormSubmit:hover {
    background: #292929;
}

.GetConsultationFormSubmit i {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 21px;
}

.GetConsultation .AboutPattern {
    opacity: 0.1;
    filter: none;
}

.GetConsultationFormValidation {
    display: block;
    margin: 0 auto;
    width: 100%;
    background: #e5c1c1;
    color: #a91f1f;
    padding: 12px 10px;
    position: relative;
    border-radius: 10px;
    padding-left: 60px;
    min-height: 50px;
}

.GetConsultationFormValidation i {
    position: absolute;
    left: 11px;
    top: 0;
    width: auto;
    height: fit-content;
    font-size: 25px;
    margin: 5px;
}

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

.News {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 60px 0;
    background: #f3f3f3;
}

.NewsGH {
    display: flex;
    justify-content: space-between;
    margin: 60px auto 0;
    width: 100%;
    align-items: start;
    flex-wrap: wrap;
}

.NewsItem {
    display: block;
    margin: 0 0;
    width: 29%;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 20px;
}

.NewsItemDetails {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    color: #444444;
    padding-bottom: 75px;
}

.NewsItemDetails h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
    font-size: 18px;
    color: var(--theme);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 43px;
}

.NewsItemDetails p {
    display: block;
    margin: 9px auto;
    width: 100%;
    font-size: 14px;
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines to show */
    line-clamp: 4;
    -webkit-box-orient: vertical;
    min-height: 84px;
}

.NewsItemDetails button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    text-transform: uppercase;
    margin: 20px;
    padding: 8px 16px;
    font-size: 14px;
    border: solid 2px;
    border-radius: 5px;
    transition: 300ms;
    overflow: hidden;
    color: #898989;
}

.NewsItemDetails button i {
    margin-left: 10px;
    position: relative;
    transition: 600ms;
}

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


.NewsItemDetails button:hover {
    transform: scale(1.05);
    color: var(--theme);
}

.NewsItemDetails button:hover i {
    transform: rotateX(180deg);
}

.Reels {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--theme2);
    padding: 44px 0;
    z-index: 2;
}

.ReelsBG {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
    max-width: 65%;
    object-fit: cover;
    object-position: center top;
    filter: contrast(113%);
    pointer-events: none;
}

.ReelsSlider {
    direction: ltr;
}

.ReelsSliderItem {
}

.ReelsSliderItemThumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.9;
    filter: saturate(100%) brightness(100%);
    transition: 500ms;
}

.ReelIcon {
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    aspect-ratio: 1/1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 15px;
    z-index: 22;
    filter: invert(1) drop-shadow(0px 0px 9px black);
}

.ReelsSliderItemInner {
    display: block;
    margin: 32px 0;
    width: 77%;
    background: #000000;
    position: relative;
    overflow: hidden;
    z-index: 2;
    aspect-ratio: 1/1.5;
    border-radius: 20px;
    box-shadow: 0px 0px 30px -5px #000000;
    cursor: pointer;
    transition: 350ms;
}

.ReelsSliderItemDetails {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px;
    color: white;
}

.ReelsSliderItemDetails label {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 13px;
    color: #d5d5d5;
    pointer-events: none;
}

.ReelsSliderItemDetails label i {
    margin-right: 4px;
}

.ReelsSliderItemDetails p {
    display: block;
    margin: 5px auto;
    width: 100%;
    font-size: 13px;
}

.ReelsSliderItemFade {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    background: #000000;
    z-index: -1;
    box-shadow: 0px -20px 88px 105px #000000;
    opacity: 0.7;
}

.ReelsSliderParent {
    display: block;
    margin: 0 0;
    width: 65%;
    position: relative;
    z-index: 22;
}

.ReelsBGFade {
    position: absolute;
    left: 0;
    top: 0;
    width: 44%;
    height: 100%;
    background: #011d32;
    box-shadow: 53px 0px 118px 113px #011d32;
}

.ReelsBGFade .AboutPattern {
    right: unset;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.07;
    filter: invert(0);
}

.ReelsSliderItemInner:hover {
    transform: scale(1.02);
}

.ReelsSliderItemInner:hover .ReelsSliderItemThumb {
    filter: saturate(105%) brightness(110%);
    transform: scale(1.1);
}


.Reels .HomeSectionHeader {
    color: white;
}

footer {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    background: var(--theme2);
    padding: 0 0 40px;
}

.FooterSection {
    color: white;
    display: block;
    margin: 0 auto;
    width: 100%;
}

.FooterSectionLogo {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 80px;
    object-fit: contain;
    object-position: left;
}

.FooterSection p {
    display: block;
    margin: 15px auto;
    width: 100%;
    text-align: justify;
    font-size: 14px;
    text-align-last: auto;
}

.FooterSection ul {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.FooterSection ul li {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 14px;
    padding: 6px 5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 300ms;
}

.FooterSection h4 {
    display: block;
    margin: 9px 0;
    width: fit-content;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    padding: 12px 0;
}

.FooterSection h4 div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    height: 3px;
    background: var(--theme);
}

.FooterSection ul li:hover {
    text-decoration: underline;
    background: #0f4e62;
}

.FooterSection {
}

.FooterSection label {
    display: flex;
    margin: 15px auto;
    width: 100%;
    font-size: 17px;
    align-items: center;
}

.FooterSection label i {
    margin-right: 10px;
    background: #ffffff2e;
    width: 35px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1000px;
}


.FooterSocialMedia {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 5px;
    background: #0f4e62;
    margin: 0 auto 55px;
    color: white;
}

.FooterSocialMedia a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    background: #197b9b;
    aspect-ratio: 1/1;
    margin: 0 10px;
    border-radius: 1000px;
    color: white;
    font-size: 20px;
    border: solid 2px #ffffff12;
    transition: 300ms;
}

.FooterSocialMedia a i {
    transition: 700ms;
}

.FooterSocialMedia a:hover {
    transform: scale(1.1);
    background: #2092b7;
    border-color: #2092b7;
}

.FooterSocialMedia a:hover i {
    transform: rotateY(360deg);
}

.ScrollerBtn {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99999999999999999;
}

.ScrollerBtn button {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 50px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--theme);
    border: none;
    color: white;
    font-size: 20px;
    margin: 20px;
    border-radius: 10px;
    transition: 300ms;
}

.ScrollerBtn button i {
}

.ScrollerBtn button:hover {
    transform: scale(1.1);
    background: #222222;
}

.ScrollIndicatorAmount {
    position: fixed;
    left: 0;
    top: 0;
    height: 5px;
    background: var(--theme);
    z-index: 99999999999999999999;
}

.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 {
}

@keyframes rotation {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}

.PreloaderDiv img {
    animation: 4s linear infinite rotation;
}

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

.SolutionsGH {
    display: flex;
    justify-content: space-between;
    margin: 19px auto 0;
    width: 100%;
    align-items: start;
    flex-wrap: wrap;
}

.SolutionsItem {
    display: block;
    margin: 18px 0;
    width: 48%;
    overflow: hidden;
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 10px;
    min-height: 123px;
    padding-left: 130px;
    cursor: pointer;
    transition: 350ms;
}

.SolutionsItem .setsrc {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 5px;
    margin: 10px;
}

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

.SolutionsItemDetails h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    color: var(--theme2);
    transition: 350ms;
}

.SolutionsItemDetails p {
    display: block;
    margin: 10px auto;
    width: 100%;
    font-size: 15px;
    color: #a5a5a5;
}

.SolutionsItem:hover {
    transform: scale(1.03);
    box-shadow: -9px 5px 1px 1px #0000001c;
}

.SolutionsItem:hover h4 {
    color: var(--theme);
    text-decoration: underline;
}

.VideoPlayer {
    display: none;
}

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

.VideoPlayerDiv {
    display: flex;
    margin: 0 auto;
    width: 650px;
    aspect-ratio: 1/1;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    max-height: 80%;
    background: #000000;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    flex-wrap: wrap;
}

.VideoPlayerDiv video {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

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

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

.AboutPageIntroduction video {
    display: block;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1/0.5;
    background: #1a1a1a;
    border-radius: 20px;
    overflow: hidden;
}

.AboutPageIntroduction h1 {
    display: block;
    margin: 40px auto 0;
    width: 100%;
    text-transform: uppercase;
    color: var(--theme);
}

.AboutPageIntroduction p {
    display: block;
    margin: 10px auto 20px;
    width: 100%;
    font-size: 17px;
}

.AboutFullDescription {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    background: #ffffff;
    border-radius: 20px;
}

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

.AboutFullDescription h1,
.AboutFullDescription h2,
.AboutFullDescription h3,
.AboutFullDescription h4,
.AboutFullDescription h5,
.AboutFullDescription h6,
.AboutFullDescription h1 *,
.AboutFullDescription h2 *,
.AboutFullDescription h3 *,
.AboutFullDescription h4 *,
.AboutFullDescription h5 *,
.AboutFullDescription h6 * {
    color: var(--theme);
}

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

.SolutionShowCover {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 111px 21px;
    position: relative;
    padding-left: 27%;
    background: #ffffff;
    border-radius: 30px;
}

.SolutionShowCover img {
    position: absolute;
    left: 3%;
    top: 10%;
    width: 273px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 100%;
    max-height: 80%;
    border: solid 5px var(--theme);
    padding: 6px;
    object-fit: cover;
    object-position: center center;
}

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

.SolutionShowCover p {
    display: block;
    margin: 10px auto;
    width: 100%;
    font-size: 17px;
    color: #7a7a7a;
}

.SolutionShowFullDesGH {
}

.SolutionShowFullDesGH {
    display: block;
    margin: 20px auto;
    width: 100%;
    padding: 20px;
    border-radius: 20px;
}

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

.SolutionShowFullDesGH h1,
.SolutionShowFullDesGH h2,
.SolutionShowFullDesGH h3,
.SolutionShowFullDesGH h4,
.SolutionShowFullDesGH h5,
.SolutionShowFullDesGH h6,
.SolutionShowFullDesGH h1 *,
.SolutionShowFullDesGH h2 *,
.SolutionShowFullDesGH h3 *,
.SolutionShowFullDesGH h4 *,
.SolutionShowFullDesGH h5 *,
.SolutionShowFullDesGH h6 * {
    color: var(--theme);
}

.SolutionVideo {
    display: block;
    margin: 23px auto 40px;
    width: 90%;
    aspect-ratio: 1/0.5;
    border-radius: 20px;
    background: #303030;
}

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

.SolutionShowCover button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 30px 0 0;
    padding: 10px 20px;
    color: #3dbd71;
    text-transform: uppercase;
    border: solid 2px;
    border-radius: 5px;
    background: none;
    padding-left: 40px;
    position: relative;
    transition: 350ms;
}

.SolutionShowCover button i {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 21px;
    font-weight: 600;
}

.SolutionShowCover button:hover {
    transform: scale(1.1);
    background: #3dbd71;
    border-color: #3dbd71;
    color: white;
}

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

.AllStories .NewsItem {
    margin: 20px 0;
}

.StoryShow {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 100px 0 25px;
}

.StoryShowInner {
    text-align: center;
}

.StoryShowImage {
    display: block;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1/0.4;
    object-fit: cover;
    object-position: center center;
    border-radius: 20px;
}

.StoryShowMain {
    display: block;
    margin: 36px auto;
    width: 100%;
}

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

.StoryShowMain p {
    display: block;
    margin: 10px auto;
    width: 100%;
    font-size: 24px;
    font-weight: 300;
}

.StoryShowFullDescription {
    display: block;
    margin: 20px auto;
    width: 100%;
    padding: 40px;
    border-radius: 20px;
    background: #ffffff;
    text-align: start;
}

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

.StoryShowFullDescription h1,
.StoryShowFullDescription h2,
.StoryShowFullDescription h3,
.StoryShowFullDescription h4,
.StoryShowFullDescription h5,
.StoryShowFullDescription h6,
.StoryShowFullDescription h1 *,
.StoryShowFullDescription h2 *,
.StoryShowFullDescription h3 *,
.StoryShowFullDescription h4 *,
.StoryShowFullDescription h5 *,
.StoryShowFullDescription h6 * {
    color: var(--theme);
}

.RelatedNews {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 0 0 30px;
}

.RelatedNews .NewsItem {
    margin: 15px 0;
}

.RelatedNews .NewsGH {
    margin: 0 auto;
}

.Contact {
    padding: 110px 0 40px;
}

.ContactCover {
    height: fit-content;
    padding: 130px 90px;
    position: relative;
    overflow: hidden;
    background: var(--theme2);
    z-index: 2;
    color: #f0f8ff;
    border-radius: 20px;
    margin: 0 auto 25px;
}

.ContactCover video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    mix-blend-mode: luminosity;
    opacity: .3;
    filter: contrast(.5);
}

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

.ContactCoverInner h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 55px;
    font-weight: bold;
    text-transform: uppercase;
}

.ContactCoverInner p {
    display: block;
    margin: 18px auto;
    width: 100%;
    font-size: 26px;
    font-weight: 200;
}

.ContactCover video {
    width: 100%;
    object-fit: cover;
    z-index: -1;
    mix-blend-mode: luminosity;
    opacity: 0.7;
    filter: contrast(.5);
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center center;
}

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

.ContactPageBody h1 {
    font-size: 23px;
    letter-spacing: 0;
    padding: 19px 0;
    border-bottom: 1px solid #00000012;
    font-weight: 500;
}

.ContactPageBody h1 i {
    margin: 0 11px;
    color: var(--theme2);
}

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

.ContactPageSocialMedia a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    background: #ffffff;
    width: 47px;
    margin: 10px;
    aspect-ratio: 1 / 1;
    border-radius: 1000px;
    font-size: 22px;
    transition: .3s;
    color: var(--theme2);
}

.ContactPageBody iframe {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 330px;
    border-radius: 10px;
}

@media (max-width: 1600px) {
    .AboutArt {
        position: absolute;
        right: -10%;
        top: 0;
        width: 70%;
        height: 80%;
        transform: rotate(100deg);
        animation: unset;
        z-index: 2;
    }

    .AnimatedRobot {
        right: -8%;
    }

    .ClientsBG {
        display: none;
    }
}

.SideMenuBtn {
    display: none;
}

.SideMenu {
    display: none;
}

.VideoPlayerDivCloser {
    display: none;
}


.QuoteSuccess {
}

.QuoteSuccessInner {
    /* position: fixed; */
    left: 0;
    top: 0;
    width: 100%;
    height: fit-content;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
}

.QuoteSuccessDiv {
    display: block;
    margin: 0 auto;
    width: 500px;
    text-align: center;
}

.PageErrorArt {
    display: block;
    margin: 0 auto;
    width: 100%;
    filter: hue-rotate(327deg) brightness(109%);
}

.QuoteSuccessDiv p {
    display: block;
    margin: 25px auto 4px;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    color: #666666;
}

.QuoteSuccessDiv label {
    display: block;
    margin: 0 auto;
    width: fit-content;
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--theme2);
}

.QuoteSuccessDiv label u {
    text-decoration: none;
    font-size: 31px;
    color: #cd6767;
}

.QuoteSuccessDiv button {
    display: flex;
    margin: 20px auto 0;
    width: fit-content;
    justify-content: center;
    align-items: center;
    padding: 8px 20px;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    padding-left: 40px;
    font-size: 15px;
    background: none;
    border: solid 2px;
    color: var(--theme2);
    border-radius: 5px;
    transition: 350ms;
    filter: brightness(80%);
}

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

.QuoteSuccessDiv button:hover {
    transform: scale(1.1);
    background: var(--theme2);
    color: white;
    border-color: var(--theme2);
    filter: brightness(100%);
}