/* Author: Asquareconsultants | Developer: Mohammed Shahnawaz */
/* Desktop CSS */
:root {
    --sharks-black: #212121;
    --sharks-white: #ffffff;
    --sharks-light-grey: #F4F4F4;
    --sharks-dark-grey: #605E5F;
    --sharks-dot: #E0E0E0;
    --sharks-primary: #ED1C25;
    --sharks-border: 1px solid #DBDBDB;
    --sharks-orange-900: #FFB100;
    --sharks-orange-800: #FFDB65;
    --sharks-blue-900: #0928AA;
    --sharks-blue-800: #0093FF;
    --sharks-blue-700: #62B7FF;
    --sharks-green-900: #1BC778;
    --sharks-pink-900: #FF6CDD;
    --sharks-aqua-900: #65E1FF;
    --sharks-purple-900: #9565FF;
    --sharks-menu-border: #707070;
    --sharks--footer: #E3E3E3;
    --sharks-space-xs: 8px;
    --sharks-space-sm: 16px;
    --sharks-space-md: 24px;
    --sharks-space-lg: 32px;
    --sharks-space-xl: 40px;
    --sharks-space-xxl: 80px;
    --sharks-padding-section: 80px;
    --sharks-grid: 1440px;
    --sharks-grid-sm: 1200px;
    --sharks-header-height: 100px;
    --sharks-header-mobile: 80px;
    --sharks-Montserrat: "Montserrat", sans-serif;
    --sharks-HelveticaNeueBoldItalic: "Helvetica Neue BoldItalic", sans-serif;
    --sharks-HelveticaNeueCondensedBold: "Helvetica Neue CondensedBold", sans-serif;
    --sharks-HelveticaNeueBold: "Helvetica Neue Bold", sans-serif;
    --sharks-HelveticaNeueCondensedBlack: "Helvetica Neue CondensedBlack", sans-serif;
    --sharks-HelveticaNeueItalic: "Helvetica Neue Italic", sans-serif;
    --sharks-HelveticaNeue: "Helvetica Neue", sans-serif;
    --sharks-HelveticaNeueUltraLightItalic: "Helvetica Neue UltraLightItalic", sans-serif;
    --sharks-HelveticaNeueThinItalic: "Helvetica Neue ThinItalic", sans-serif;
    --sharks-HelveticaNeueMedium: "Helvetica Neue Medium", sans-serif;
    --sharks-HelveticaNeueMediumItalic: "Helvetica Neue MediumItalic", sans-serif;
    --sharks-HelveticaNeueUltraLight: "Helvetica Neue UltraLight", sans-serif;
    --sharks-HelveticaNeueLight: "Helvetica Neue Light", sans-serif;
    --sharks-HelveticaNeueLightItalic: "Helvetica Neue LightItalic", sans-serif;
    --sharks-HelveticaNeueThin: "Helvetica Neue Thin", sans-serif;
}
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

button {
    cursor: pointer;
}
button.moha--primary--btn {
    width: 100%;
    max-width: max-content;
    height: 56px;
    padding: var(--sharks-space-sm) var(--sharks-space-md);
    background-color: var(--sharks-black);
    border: none;
    outline: none;
    border-radius: 40px;
    color: var(--sharks-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.owl-carousel {
    touch-action: manipulation;
}
h1 {
    font-family: var(--sharks-HelveticaNeueThin);
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

input,
select,
textarea {
    outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

button,
input,
optgroup,
select,
textarea {
    font-family: var(--sharks-figtree);
}

a {
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

a:hover {
    text-decoration: underline;
}

body,
html {
    font-optical-sizing: auto;
    font-style: normal;
    font-family: var(--sharks-HelveticaNeue);
    font-weight: 400;
    background-color: var(--sharks-white);
    scroll-behavior: smooth;
    scroll-padding: 60px;
    letter-spacing: 0.0400em;
}
.loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10000;
    background-color: rgba(255, 255, 255, 1);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
main {
    width: 100%;
    height: auto;
    min-height: 100vh;
}
section,
footer {
    width: 100%;
    height: auto;
    min-height: 100px;
}
.section--padding {
    padding: var(--sharks-padding-section) 0;
}
.shark__grid {
    width: 100%;
    height: auto;
    max-width: var(--sharks-grid);
    margin-inline: auto;
}
.shark__grid__sm {
    width: 100%;
    height: auto;
    max-width: var(--sharks-grid-sm);
    margin-inline: auto;
}
.grid--padding {
    padding: 0 var(--sharks-space-sm);
}
body.overflow--hidden {
    overflow: hidden;
}
.d-block {
    display: block !important;
}
h4.section--sub--heading {
    font: 400 24px/30px var(--sharks-Montserrat);
    font-style: italic;
    color: var(--sharks-black);
    margin-bottom: var(--sharks-space-xl);
}
h2.section--heading {
    font: 400 42px/48px var(--sharks-Montserrat);
    color: var(--sharks-primary);
    margin-bottom: var(--sharks-space-xl);
    letter-spacing: 0;
}
h2.section--heading a{
    color:var(--sharks-primary);
    text-decoration:underline;
}
h1.page--title {
    font: 700 30px/36px var(--sharks-HelveticaNeueBold);
    color: var(--sharks-white);
}
img.img--fluid {
    width: 100%;
    height: auto;
}
/* LAYOUT */
.header__wrapper {
    width: 100%;
    height: auto;
}
header {
    width: 100%;
    height: var(--sharks-header-height);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;

}
header.header--fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateY(-20px);
    animation: slideDown 0.4s ease forwards;
    background-color: var(--sharks-white);
    box-shadow: -2px 5px 14px -4px rgba(230, 230, 230, 0.75);
    -webkit-box-shadow: -2px 5px 14px -4px rgba(230, 230, 230, 0.75);
    -moz-box-shadow: -2px 5px 14px -4px rgba(230, 230, 230, 0.75);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}
header.header--fixed::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    z-index: 1;
    width: var(--scroll-width, 0%);
    height: 5px;
    background-color: var(--sharks-primary);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.header--row {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sharks-space-sm);
}
.header--row .logo {
    width: 190px;
    height: auto;
    position: relative;
    z-index: 10;
}
.header--row .logo img {
    width: 100%;
    height: auto;
}
.header--row .logo img.normal {
    display: block;
}
.header--row .logo img.scrolled {
    display: none;
}
header.header--fixed .header--row .logo img.normal {
    display: none;
}
header.header--fixed .header--row .logo img.scrolled {
    display: block;
}
.header--row nav ul {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.header--row nav ul li {
    font: 500 18px/normal var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-white);
    letter-spacing: 0.0400rem;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    padding: 0 24px;
}
.header--row nav ul li a,
.header--row nav ul li span {
    font: 500 18px/normal var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-white);
    letter-spacing: 0.0400rem;
    cursor: pointer;
    position: relative;
    z-index: 2;
    text-decoration: none;
}
.header--row nav ul li a::after,
.header--row nav ul li span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 2px;
    opacity: 0;
    transform: scale(0, 1);
    transform-origin: left center;
    border-bottom: 2px solid var(--sharks-white);
    transition: transform 0.5s, opacity 0.3s;
}
.header--row nav ul li span.active::after {
    border-color: var(--sharks-primary);
}
.header--row nav ul li a:hover::after,
.header--row nav ul li span:hover::after,
.header--row nav ul li span.active::after {
    opacity: 1;
    transform: scale(1, 1);
}
header.header--fixed .header--row nav ul li a,
header.header--fixed .header--row nav ul li span {
    color: var(--sharks-black);
}
.sub--menu--wrapper {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    width: 100%;
    height: 600px;
    background-color: var(--sharks-black);
}
.sub--menu--wrapper .sub--menu--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}
.sub--menu--row .sub--menu {
    width: 100%;
    max-width: 720px;
    height: auto;
    padding-top: calc(var(--sharks-header-height) + 20px);
    display: none;
}
.sub--menu--row .sub--menu ul {
    width: 100%;
    max-width: 310px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sub--menu--row .sub--menu ul li {
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--sharks-menu-border);
    position: relative;
    padding: 0;
}
.sub--menu--row .sub--menu ul li a {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    font: 500 16px/normal var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-white);
    transition: transform 0.5s, opacity 0.3s;
    text-decoration: none;
}
.sub--menu--row .sub--menu ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    opacity: 0;
    transform: scale(0, 1);
    transform-origin: left center;
    border-bottom: 2px solid var(--sharks-primary);
    transition: transform 0.5s, opacity 0.3s;
}
.sub--menu--row .sub--menu ul li a:hover::after,
.sub--menu--row .sub--menu ul li a:hover::after,
.sub--menu--row .sub--menu ul li a.active::after {
    opacity: 1;
    transform: scale(1, 1);
}

.sub--menu--row .sub--menu ul li a:hover,
.sub--menu--row .sub--menu ul li a.active {
    color: var(--sharks-primary);
}
.sub--menu--row .sub--menu ul li ul {
    position: fixed;
    right: 0;
    top: 120px;
    padding-left: 20px;
    z-index: -1px;
    display: none;
    min-height:600px;
}
.sub--menu--row .sub--menu ul li ul li {
    border: none;
}
.sub--menu--row .sub--menu ul li ul li a::after {
    content: none;
}
.sub--menu--row .sub--menu ul li:hover ul {
    display: block;
}
.sub--menu--row .sub--menu ul li .menu--arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 20px;
    background-image: url('../img/right-menu-arrow-white.svg');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.sub--menu--row .sub--menu ul li:hover .menu--arrow {
    background-image: url('../img/right-menu-arrow-red.svg');
}
/* mobile menu */
.header__mobile__wrapper {
    width: 100%;
    height: var(--sharks-header-mobile);
    background-color: var(--sharks-white);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
    align-items: center;
    box-shadow: -2px 5px 14px -4px rgba(230, 230, 230, 0.75);
    -webkit-box-shadow: -2px 5px 14px -4px rgba(230, 230, 230, 0.75);
    -moz-box-shadow: -2px 5px 14px -4px rgba(230, 230, 230, 0.75);
}
.header__mobile__wrapper .header--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header__mobile__wrapper #hamburger {
    width: 25px;
    height: 18px;
    position: relative;
    float: right;
    z-index: 1000;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.header__mobile__wrapper #hamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #000;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
}

.header__mobile__wrapper #hamburger.open span {
    background: #000;
}

.header__mobile__wrapper #hamburger span:nth-child(1) {
    top: 0;
}

.header__mobile__wrapper #hamburger span:nth-child(2),
.header__mobile__wrapper #hamburger span:nth-child(3) {
    top: 8px;
}

.header__mobile__wrapper #hamburger span:nth-child(4) {
    top: 16px;
}

.header__mobile__wrapper #hamburger.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}

.header__mobile__wrapper #hamburger.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.header__mobile__wrapper #hamburger.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.header__mobile__wrapper #hamburger.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}
.mobile--menu--wrapper {
    width: 100%;
    height: 100vh;
    background-color: var(--sharks-black);
    padding: calc(var(--sharks-header-mobile) + 20px) var(--sharks-space-md) var(--sharks-space-md);
    position: fixed;
    right: -100%;
    top: 0;
    z-index: 99;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.mobile--menu--wrapper.open {
    right: 0;
}
.mobile--menu--wrapper .mobile--menu--items {
    width: 100%;
    height: calc(100vh - calc(var(--sharks-header-mobile) + 20px));
    overflow: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.mobile--menu--items::-webkit-scrollbar {
    display: none;
}
.mobile--menu--items ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.mobile--menu--items ul li {
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--sharks-white);
    padding: var(--sharks-space-md) 0;
    position: relative;
}
.mobile--menu--items ul li.has--menu {
    background-image: url('../img/right-menu-arrow-white.svg');
    background-size: 10px;
    background-position: top 25px right 5px;
    background-repeat: no-repeat;
}
.mobile--menu--items ul li a {
    font: 500 18px/normal var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-white);
}
.mobile--menu--items ul li ul {
    padding: 20px 0 0 20px;
    margin: 0;
    display: none;
}
.mobile--menu--items ul li ul li:last-child {
    border-bottom: none;
}
.mobile--menu--items ul li.open ul {
    display: block;
}
footer {
    padding: var(--sharks-space-xl) 0 var(--sharks-space-sm);
    background-color: var(--sharks--footer);
}
footer .footer--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--sharks-space-sm);
    padding-bottom: var(--sharks-space-lg);
    margin-bottom: var(--sharks-space-sm);
    border-bottom: 1px solid var(--sharks-white);
}
footer .footer--row.last {
    margin: 0;
    padding: 0;
    border: none;
}
footer .footer--row .footer--col {
    width: 20%;
    height: auto;
}
footer .footer--row.last .footer--col {
    width: 100%;

}
.footer--col.bottom--line {
    font: 400 14px/18px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
}
.footer--col ul {
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-xs);
}
.footer--col ul li a {
    font: 400 16px/28px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
    text-decoration: none;
    background-image: url('../img/footer-arrow.svg');
    background-repeat: no-repeat;
    background-position: left top 6px;
    background-size: 5px;
    padding-left: 20px;
}
.footer--col ul li a:hover {
    color: var(--sharks-primary);
    text-decoration: underline;
}
/* Sections */
.sharks__hero__bannner {
    width: 100%;
    height: auto;
}
.hero--banner--item {
    width: 100%;
    height: auto;
    position: relative;
}
.hero--banner--item .banner--title {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    bottom: 140px;
    z-index: 1;
    font: 700 36px/56px var(--sharks-HelveticaNeueBold);
    color: var(--sharks-white);
}

/* home page */
.home__about,
.home__our__presence {
    background-color: var(--sharks-white);
}
.home__our__solutions,
.home__testimonials {
    background-color: var(--sharks-light-grey);
}
.home__testimonials {
    margin-bottom: var(--sharks-space-xl);
}
.home--about--row,
.home--presence--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    gap: var(--sharks-space-lg);
}
.home--about--row .home--about--col,
.home--presence--row .home--presence--col {
    width: 100%;
    height: auto;
}

.home--presence--row .home--presence--col img {
    width: 100%;
    height: auto;
}
.home--presence--col:last-child {
    display: flex;
    align-items: center;
}
.home--presence--col ul {
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-lg);
}
.home--presence--col ul li {
    position: relative;
    font: 500 18px/24px var(--sharks-HelveticaNeueLight);
    color: var(--sharks-black);
    padding-left: var(--sharks-space-md);

}
.home--presence--col ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color);
}
.home--presence--col a.view--more--red {
    border: 1px solid var(--sharks-primary);
    outline: none;
    width: max-content;
    padding: 10px 20px;
    border-radius: 10px;
    color: var(--sharks-primary);
    background-color: transparent;
    font: 400 16px/20px var(--sharks-HelveticaNeue);
    text-decoration: none;
}
.solutions--list {
    width: 100%;
    height: auto;
    padding-bottom: var(--sharks-space-xl);
}
.home--about--col.about--text {
    font: 400 24px/42px var(--sharks-HelveticaNeueLight);
    color: var(--sharks-black);

}
.home--about--col .about--cards {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-sm);
}
.about--cards .about--card {
    width: 100%;
    height: auto;
    min-height: 100px;
    border: var(--sharks-border);
    background-color: var(--sharks-white);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sharks-space-lg);
    font: 500 20px/24px var(--sharks-HelveticaNeueLight);
    color: var(--sharks-black);
    padding: 20px 20px 20px 40px;

}
.about--cards .about--card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: var(--sharks-dark-grey);
}
.about--card img {
    width: 50px;
    height: auto;
}

.our--solution--item {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.our--solution--item img {
    width: 100%;
    display: block;
}

.our--solution--item--action {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* text left, button right */
    color: var(--sharks-white);
    font: 400 24px/30px var(--sharks-HelveticaNeue);
}
.our--solution--item--action--row {
    width: 100%;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
}
.our--solution--item--action--row span {
    width: max-content;
    transform: translateX(0);
    transition: transform 0.5s ease;
}

.our--solution--item--action--row a.view--more--white {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
    border: 1px solid var(--sharks-white);
    padding: 10px 20px;
    border-radius: 10px;
    color: var(--sharks-white);
    background-color: transparent;
    font: 400 16px/20px var(--sharks-HelveticaNeue);
    text-decoration: none;
    margin-left: auto;
}

/* Hover state */
.our--solution--item:hover .our--solution--item--action--row span {
    transform: translateX(20px) !important;
}

.our--solution--item:hover .our--solution--item--action--row a.view--more--white {
    opacity: 1;
    transform: translateX(-20px);
}



.testimonials--item {
    width: 100%;
    height: auto;
    position: relative;
    background-color: var(--sharks-white);
    padding: var(--sharks-space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sharks-space-xs);
}
.testimonials--item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: var(--sharks-dark-grey);
}
.testimonials--item img.quote {
    width: 40px !important;
    height: auto;
}
.testimonials--item img.testimonila--logo {
    width: auto !important;
    height: 60px;
}
.testimonials--item .testimonial--details {
    text-align: center;
    font: 400 18px/24px var(--sharks-HelveticaNeueLight);
    color: var(--sharks-black);

}
.testimonials--item .testimonial--desig {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font: 500 16px/20px var(--sharks-HelveticaNeueLight);
    color: var(--sharks-black);
    margin: var(--sharks-space-xs) 0;

}
.footer--socials {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    gap: var(--sharks-space-xs);
}
.footer--socials img {
    width: 30px;
    height: auto;
}
.footer--col--title {
    width: 100%;
    height: auto;
    margin-bottom: var(--sharks-space-sm);
    font: 500 18px/24px var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-black);
}
.footer--col img.footer--logo {
    width: 150px;
    height: auto;
}
.footer--col--subtitle {
    width: 100%;
    height: auto;
    font: 500 16px/20px var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-black);
    margin-top: var(--sharks-space-sm);
}
.footer--col.col--sm a {
    display: block;
    font: 400 16px/20px var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-black);
}
/* owl carousel modifiers */
.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: var(--sharks-space-lg) !important;
    text-align: right;
}
.owl-theme .owl-dots .owl-dot span {
    width: var(--sharks-space-xs) !important;
    height: var(--sharks-space-xs) !important;
    margin: 0 5px !important;
    background: var(--sharks-dot) !important;
    transition: all 0.3s ease-in-out !important;
    -webkit-transition: all 0.3s ease-in-out !important;
    -moz-transition: all 0.3s ease-in-out !important;
    -ms-transition: all 0.3s ease-in-out !important;
    -o-transition: all 0.3s ease-in-out !important;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--sharks-primary) !important;
}
.owl-theme .owl-dots .owl-dot.active span {
    width: var(--sharks-space-lg) !important;
}
.sharks--hero--banner .owl-nav.disabled+.owl-dots {
    margin-top: 0 !important;
    position: absolute;
    bottom: 40px;
    width: 100%;
    padding: 20px;
}

.inner__banner {
    width: 100%;
    height: auto;
    position: relative;
    line-height: 0;
}
.inner__banner .breadcrum--wrapper {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    bottom: 60px;
    z-index: 1;
}
.inner--banner--details {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-lg);
}

.inner--banner--details span {
    font: 400 18px/24px var(--sharks-HelveticaNeue);
    color: rgba(255, 255, 255, 0.8);
}
.inner--banner--details a {
    font: 500 18px/24px var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-white);
}
.inner--banner--details .breadcrum {
    display: flex;
    align-items: center;
    gap: 12px;
}
.inner--banner--details .breadcrum img {
    width: 6px;
    height: auto;
}
h2.page--up--title {
    color: var(--sharks-white);
    font: 500 36px/42px var(--sharks-HelveticaNeueMedium);
    margin-bottom: var(--sharks-space-xl);
}
/* Solutions */
.bgs--grey {
    background-color: var(--sharks-light-grey);
}
.solution__layout1 {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
}
.solution__layout1 .solution--layout1--col {
    width: 50%;
    height: auto;
}
/* Contact */
.contact--wrapper {
    width: 100%;
    height: auto;
    background: linear-gradient(to right, var(--sharks-white) 50%, var(--sharks-light-grey) 50%);
}
.contact--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    padding: var(--sharks-padding-section) 0;
}
.contact--row .contact--col {
    width: 50%;
    height: auto;
}
.contact--row .contact--col:first-child {
    padding-right: 60px;
}
.contact--row .contact--col:last-child {
    padding-left: 60px;
}
.contact--col address {
    width: 100%;
    height: auto;
    max-width: 400px;
    font: 400 18px/24px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
    margin-bottom: 60px;

}
.contact--col .contact--calls {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sharks-space-lg);
}
.contact--calls .contact--call--item {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    gap: var(--sharks-space-md);
}
.contact--call--item img {
    width: 30px;
}
.contact--calls .contact--call--item a {
    font: 400 18px/24px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
}
.contact--form {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-lg);
}
.contact--form .form--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--sharks-space-sm);
}
.contact--form .form--row:last-child {
    justify-content: flex-end;
}
.form--row label {
    width: 100%;
    padding-top: 15px;
    max-width: 150px;
    font: 400px 18px/24px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);

}
.form--row .formField {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form--row .formField label {
    color: var(--sharks-primary);
    max-width: 100%;
    padding-top: 0;
}
.form--row input,
.form--row select,
.form--row textarea {
    width: 100%;
    height: 48px;
    border: var(--sharks-border);
    padding: 0 var(--sharks-space-sm);
    font: 500px 18px/24px var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-black);

}
.form--row textarea {
    padding: var(--sharks-space-sm);
}
.form--row select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    background-image: url('../img/select-arrow.svg');
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: center right var(--sharks-space-sm);
}

.form--row textarea {
    height: 100px;
}
.form--row button {
    border: none;
    outline: none;
    background-color: var(--sharks-light-grey);
    color: var(--sharks-primary);
    padding: 15px 30px;
    font: 500px 18px/24px var(--sharks-HelveticaNeueMedium);
}
.contact--col h4 {
    font: 400 24px/30px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
    margin-bottom: var(--sharks-space-xl);

}
.contact--col ul.insight--list {
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-md);
}
.contact--col ul.insight--list li {
    font: 400px 18px/24px var(--sharks-HelveticaNeue);

    color: var(--sharks-black);
    background-image: url('../img/list-red-arrow.svg');
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 8px;
    padding-left: var(--sharks-space-lg);
}
/* Insight */
.insight--wrapper {
    width: 100%;
    height: auto;
    background: linear-gradient(to right, var(--sharks-light-grey) 50%, var(--sharks-white) 50%);
}
/* Gallery */
.gallery--wrapper {
    width: 100%;
    height: auto;
    padding: var(--sharks-padding-section) 0;
}
.gallery--items {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sharks-space-md);
    margin-bottom: var(--sharks-space-xl);
}
.gallery--items:last-child {
    margin-bottom: 0;
}
.gallery--items .gallery--item {
    width: calc(25% - 20px);
    min-width: 330px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-xs);
}
.gallery--item .gallery--item--thumb {
    width: 100%;
    height: auto;
    position: relative;
}
.gallery--item--thumb .play--btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.gallery--item span {
    font: 400px 16px/20px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);

}
/* Blogs */
.blogs--wrapper {
    width: 100%;
    height: auto;
    padding: var(--sharks-padding-section) 0;
}
.blogs--items {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-xl);
}
.blogs--items .blog--item {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    gap: var(--sharks-space-sm);
}
.blog--item .blog--thumbnail {
    width: 100%;
    max-width: 500px;
    height: auto;
}
.blog--item .blog--details {
    width: calc(100% - 516px);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0 12px;
    border-bottom: var(--sharks-border);
}
.blog--details .blog--title {
    width: 100%;
    height: auto;
    font: 400 24px/30px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);

}
.blog--details .blog--title a {
    color: var(--sharks-black);
}
.blog--details .blog--title a:hover {
    color: var(--sharks-primary);
}
.blog--details .blog--title a:hover {
    text-decoration: underline;
}
.blog--details .blog--date {
    width: 100%;
    height: auto;
    font: 400 18px/24px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
}
/* Newsroom */
.newsroom--wrapper {
    width: 100%;
    height: auto;
    padding: var(--sharks-padding-section) 0;
}
.newsroom--items {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    gap: var(--sharks-space-lg);
}
.newsroom--items .newsroom--item {
    width: 100%;
    height: auto;
}
.newsroom--item .newsroom--details {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sharks-space-xl);
    border-bottom: var(--sharks-border);
    padding-bottom: var(--sharks-space-lg);
}
.newsroom--item .newsroom--details a {
    color: var(--sharks-black);
}
.newsroom--item .newsroom--details a:hover {
    color: var(--sharks-primary);
}
.newsroom--details .newsroom--title {
    width: 100%;
    height: auto;
    font: 400 24px/30px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);

}
/* Processes */
.processes--wrapper {
    width: 100%;
    height: auto;
    padding: var(--sharks-padding-section) 0;
}
.processes--wrapper h2.section--heading {
    margin-bottom: var(--sharks-space-sm);
}
.processes1 {
    background-color: var(--sharks-light-grey);
}
.processes--shields {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--sharks-space-lg);
}
.processes--shields .processes--shield--item {
    width: 100%;
    height: auto;
    margin-top: var(--sharks-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-md);
}
.processes--shield--item img {
    width: 40px;
}
.processes--shield--item .processes--shield--details {
    width: 100%;
    height: auto;
    border-left: 5px solid var(--sharks-primary);
    padding-left: var(--sharks-space-sm);
    font: 400 24px/30px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);

}
.processes2 {
    min-height: 100vh;
    background-image: url('../img/processes/quality.avif');
    display: flex;
    align-items: center;
}
.processes2 .processes2--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.processes2--row .processes2--col {
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-md);
}
.processes2--col .processes2--title {
    width: 100%;
    height: auto;
    font: 700 36px/42px var(--sharks-Montserrat);
    color: var(--sharks-primary);
}
.processes2--col .processes2--description {
    width: 100%;
    height: auto;
    font: 400 20px/26px var(--sharks-HelveticaNeue);
	line-height: 35px;
    color: var(--sharks-white);

}
.processes3 {
    background-color: var(--sharks-white);
}
.processes3 .processes3--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--sharks-space-xl);
}
.processes3--row .processes3--col {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.processes3--col:first-child {
    padding-right: var(--sharks-space-xl);
}
.processes3--col p {
    font: 400 20px/30px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
}
.processes3--col ul {
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-md);
}
.processes3--col ul li {
    font: 400 20px/26px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
    position: relative;
    padding-left: var(--sharks-space-lg);

}
.processes3--col ul li::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 3px;
    left: 0;
    background-image: url('../img/bullet-point.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
}
.processes3 h2.section--heading {
    margin-bottom: var(--sharks-space-xl);
}
.processes4 {
    background-color: var(--sharks-light-grey);
}
.processes4 .processes4--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--sharks-space-xl);
}
.processes4--row .processes4--col {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.processes4--col p {
    margin-bottom: var(--sharks-space-xl);
    font: 400 20px/26px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);

}
.processes4--col p strong {
    font: 700 20px/26px var(--sharks-HelveticaNeueBold);

}
.processes4--col:first-child {
    padding-right: var(--sharks-space-xl);
}
.processes4--col ul {
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-md);
}
.processes4--col ul li {
    font: 400 20px/26px var(--sharks-HelveticaNeue);

    color: var(--sharks-black);
    position: relative;
    padding-left: var(--sharks-space-lg);
}
.processes4--col ul li::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 3px;
    left: 0;
    background-image: url('../img/bullet-point.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
}
.processes5 {
    background-color: var(--sharks-white);
    padding-bottom: 0;
}
.processes5 h2.section--heading {
    margin-bottom: var(--sharks-space-xl);
}
.phases--scroller {
    width: 100%;
    height: auto;
    overflow: hidden;
    overflow-x: auto;
}
.processes5--phases {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
}
.phases--item {
    width: 25%;
    height: auto;
    position: relative;
}
.phases--item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 15px;
    background-color: #3C3C3C;
}
.phases--item:nth-child(odd):after {
    background-color: var(--sharks-primary);
}

.phases--item .phase--title {
    width: 100%;
    height: 60px;
    background-color: var(--sharks-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 400 24px/30px var(--sharks-HelveticaNeue);

    color: var(--sharks-white);
    position: relative;
}
.phases--item .phase--title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('../img/phase-arrow.svg');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: left center;
    width: 24px;
    height: 24px;
}
.phases--item:first-child .phase--title::before {
    content: none;
}
.phases--item:nth-child(even) .phase--title {
    background-color: #3C3C3C;
}
.phases--item .phase--details {
    width: 100%;
    height: 100%;
    background-color: var(--sharks-white);
    padding: var(--sharks-space-md);
}
.phases--item:nth-child(odd) .phase--details {
    background-color: var(--sharks-light-grey);
}
.phase--details .phase--detail--title {
    font: 400 24px/30px var(--sharks-HelveticaNeue);

    color: var(--sharks-black);
    margin-bottom: var(--sharks-space-md);
}
.phase--details ul {
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-xs);
    padding: 0 0 var(--sharks-space-lg);
    margin-bottom: var(--sharks-space-lg);
    border-bottom: 1px solid #707070;
}
.phase--details ul:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.phase--details ul li {
    position: relative;
    font: 400 18px/24px var(--sharks-HelveticaNeue);

    color: var(--sharks-black);
    padding-left: var(--sharks-space-sm);
}
.phase--details ul li::before {
    content: '•';
    position: absolute;
    left: 0;
}
.processes6 {
    background-color: var(--sharks-white);
}
.processes6--row {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sharks-space-xl);
}
.processes6--row .processes6--item {
    width: calc(50% - 20px);
    height: auto;
    min-height: 100px;
    border: var(--sharks-border);
    background-color: var(--sharks-white);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sharks-space-lg);
    font: 500 20px/24px var(--sharks-HelveticaNeueLight);

    color: var(--sharks-black);
    padding: 20px 20px 20px 40px;

}
.processes6--row .processes6--item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: var(--sharks-dark-grey);
}
.processes6--row .processes6--item img {
    width: 50px;
    height: auto;
}
.processes6 h2.section--heading {
    margin-bottom: var(--sharks-space-xl);
}
/* about */
.about--wrapper {
    width: 100%;
    height: auto;
    padding: var(--sharks-padding-section) 0;
}
.about1 {
    background-color: var(--sharks-white);
}
.about1--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    gap: var(--sharks-space-xl);
}
.about1--row .about1--col {
    width: 50%;
    height: auto;

}
.about1--col:first-child {
    padding-right: var(--sharks-space-lg);
    font: 400 18px/24px var(--sharks-HelveticaNeueLight);

    color: var(--sharks-black);
}
.about1--col:last-child {
    padding-left: var(--sharks-space-lg);
}
.about1--col p {
    margin-bottom: var(--sharks-space-sm);
}
.about1--col p:last-child {
    margin-bottom: 0;
}

.about2 {
    background: linear-gradient(to right, var(--sharks-light-grey) 50%, var(--sharks-white) 50%);
    padding: 0;
}
.about2--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
}
.about2--row .about2--col {
    width: 50%;
    height: auto;
}
.about2--row .about2--col:first-child {
    padding: var(--sharks-padding-section) var(--sharks-space-xl) var(--sharks-padding-section) var(--sharks-space-sm);
}
.about2--row .about2--col:last-child {
    padding: var(--sharks-padding-section) var(--sharks-space-sm) var(--sharks-padding-section) var(--sharks-space-xl);
}
.about2--title {
    width: max-content;
    height: auto;
    padding: 10px 30px;
    background-color: var(--sharks-primary);
    color: var(--sharks-white);
    font: 400 24px/30px var(--sharks-Montserrat);
    margin-bottom: var(--sharks-space-sm);
}
.about2--content {
    width: 100%;
    height: auto;
    border-left: 2px solid var(--sharks-primary);
    padding-left: var(--sharks-space-md);
    margin-bottom: var(--sharks-space-xl);

}
.about2--content:last-child {
    margin-bottom: 0;
}
.about2--content p {
    font: 400 18px/24px var(--sharks-HelveticaNeueLight);
    color: var(--sharks-black);
    margin-bottom: var(--sharks-space-sm);

}
.about2--content p:last-child {
    margin-bottom: 0;
}
.about2--content ul {
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-md);
    margin-bottom: var(--sharks-space-md);
}
.about2--content ul li {
    font: 400 18px/24px var(--sharks-HelveticaNeueLight);
    color: var(--sharks-black);
    position: relative;
    padding-left: var(--sharks-space-lg);

}
.about2--content ul li::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 3px;
    left: 0;
    background-image: url('../img/bullet-point.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
}
.leadership--wrapper,
.leadership--item {
    width: 100%;
    height: auto;
}
.leadership--item {
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-md);
}
.leadership--item p {
    font: 400 20px/30px var(--sharks-HelveticaNeue);

}
.leadership--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    gap: var(--sharks-space-md);
}
.leadership--row .leadership--col {
    width: 100%;
    height: auto;
}
.leadership--row .leadership--col:first-child {
    max-width: 200px;
    padding-right: var(--sharks-space-md);
}
.leadership--row .leadership--col:last-child {
    border-left: 1px solid var(--sharks-black);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: var(--sharks-space-md);
}
.leadership--col:last-child p {
    color: var(--sharks-black);
    font: 500 26px/36px var(--sharks-HelveticaNeueMedium);
}
.leadership--col:last-child span {
    font: 400 18px/24px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
}
.events--wrapper {
    width: 100%;
    height: auto;
    margin-top: var(--sharks-space-xl);
}
.event--item {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.event--item p {
    font: 500 22px/30px var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-black);
    margin: var(--sharks-space-md) 0 var(--sharks-space-sm);
}
.event--item span {
        font: 400 18px/24px var(--sharks-HelveticaNeueLight);
    color: var(--sharks-black);

}
.event--item img {
    max-width: 176px;
}
.events--wrapper .owl-dots {
    display: flex;
    align-items: center;
}
.events--wrapper .owl-dots button {
    width: 100%;
}
.events--wrapper .owl-dots .owl-dot span {
    width: 100% !important;
    height: 10px;
    margin: 0 !important;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 0 !important;
}
.events--wrapper .owl-nav.disabled+.owl-dots {
    text-align: left;
}
.events--wrapper .owl-dots .owl-dot.active span {
    width: 100% !important;
}

.about3 {
    background: linear-gradient(to right, var(--sharks-white) 50%, var(--sharks-light-grey) 50%);
    padding: 0;
}
.about3--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
}
.about3--row .about3--col {
    width: 50%;
    height: auto;
}
.about3--row .about3--col:first-child {
    padding: var(--sharks-padding-section) var(--sharks-space-xl) var(--sharks-padding-section) var(--sharks-space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--sharks-space-md);
}
.about3--col:first-child img {
    width: 100px;
}
.about3--row .about3--col:last-child {
    padding: var(--sharks-padding-section) var(--sharks-space-sm) var(--sharks-padding-section) var(--sharks-space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.about3--col ul {
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-md);
}
.about3--col ul li {
    font: 400 18px/24px var(--sharks-HelveticaNeueLight);
    color: var(--sharks-black);
    position: relative;
    padding-left: var(--sharks-space-lg);

}
.about3--col ul li::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 3px;
    left: 0;
    background-image: url('../img/bullet-point.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
}
.about4 {
    background-color: var(--sharks-white);
}
.about4--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sharks-space-md);
    padding-top: var(--sharks-space-xl);
}
.about4--row .about4--item {
    width: max-content;
    height: auto;
    display: flex;
    align-items: center;

}
.about4--item img {
    width: 100%;
    max-width: 350px;
}

.about5 {
    background-color: var(--sharks-light-grey);
}
.about5 .section--heading {
    padding: 0 var(--sharks-space-sm);
}
.about5--wrapper {
    width: 100%;
    height: auto;
    margin-top: 48px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.about5--slide {
    display: inline-block;
    animation: 35s csrGallerySlide infinite linear;
}
.about5--slide img {
    width: 250px;
    height: auto;
    margin: 0 12px;
}
.about5--slide img.img--lg {
    min-height: 392px;
}
.about5--wrapper:hover .about5--slide {
    animation-play-state: paused;
}

@keyframes csrGallerySlide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Solutions */
.color--red {
    color: var(--sharks-primary) !important;
}
.bgs--grey {
    background-color: var(--sharks-light-grey) !important;
}
.solution--wrapper {
    width: 100%;
    height: auto;
    padding: var(--sharks-padding-section) 0;
}
.solution--top {
    background-color: var(--sharks-white);
}
.solution--subtitle {
    width: 100%;
    height: auto;
    margin-bottom: var(--sharks-space-md);
    font: 400 24px/26px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
}
.solution--subtitle:last-child {
    margin-bottom: 0;
}
.solution--common--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    gap: var(--sharks-space-xxl);
    margin-bottom: var(--sharks-space-xl);
}
.solution--common--row.no--margin {
    margin-bottom: 0;
}
.solution--common--col {
    width: 50%;
    height: auto;
}
.solution--common--col.align--center {
    display: flex;
    align-items: center;
}
.solution--common--col span.solution--number {
    font: 700 52px/70px var(--sharks-Montserrat);
    color: var(--sharks-black);
}
.solution--common--col h4.solution--section--title {
    font: 400 36px/42px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
    padding: var(--sharks-space-md) 0;
    border-bottom: 1px solid var(--sharks-primary);
    margin-bottom: var(--sharks-space-md);
}
.solution--common--col p {
    font: 400 20px/30px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
}
button.solution--download {
    width: 100%;
    height: 56px;
    max-width: 500px;
    background-color: transparent;
    outline: none;
    border: 1px solid var(--sharks-primary);
    color: var(--sharks-primary);
    text-align: left;
    margin-top: var(--sharks-space-xl);
    font: 400 24px/30px var(--sharks-HelveticaNeue);
    padding: 0 var(--sharks-space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
button.solution--download:hover {
    color: var(--sharks-white);
    background-color: var(--sharks-primary);
}
button.solution--download img {
    width: auto;
    height: 20px;
}
button.solution--download img:first-child {
    display: block;
}
button.solution--download img:last-child {
    display: none;
}
button.solution--download:hover img:first-child {
    display: none;
}
button.solution--download:hover img:last-child {
    display: block;
}
h5.solution--subtitle {
    font: 400 28px/36px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
}
img.solution--inner--img {
    margin-bottom: var(--sharks-space-md);
}
.solution--common--col p {
    font: 400 20px/30px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
    margin-bottom: var(--sharks-space-sm);
}
.solution--common--col p:last-child {
    margin-bottom: 0;
    padding-bottom: var(--sharks-space-lg);
    border-bottom: 5px solid var(--sharks-primary);
}
h3.solution--bold {
    font: 700 24px/30px var(--sharks-HelveticaNeueBold);
    color: var(--sharks-black);
}
.download--brochure {
    width: 100%;
    height: auto;
}
.modal--wrapper {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}
.modal--wrapper.d-flex {
    display: flex;
}
.modal--wrapper .modal--form--wrapper {
    width: 100%;
    height: auto;
    max-width: 600px;
    background-color: var(--sharks-white);
    border: var(--sharks-border);
    padding: var(--sharks-space-md);
    position: relative;
}
button.modal--close {
    background-color: var(--sharks-white);
    border: none;
    outline: none;
    position: absolute;
    right: 0;
    top: -40px;
    width: 40px;
    height: 40px;
}
.modal--form--scroller {
    width: 100%;
    height: auto;
    max-height: 400px;
    margin-top: var(--sharks-space-md);
    overflow: hidden;
    overflow-y: auto;
}
.email--message {
    width: 100%;
    height: auto;
    font: 400 16px/20px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
}
.email--message.success {
    color: var(--sharks-green-900);
}
.email--message.error {
    color: var(--sharks-primary);
}

/* portfolio */
.portfolio--wrapper {
    width: 100%;
    height: auto;
    padding: var(--sharks-padding-section) 0;
}
.portfolio--counters {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
}
.portfolio--counters .portfolio--counter {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 52px;
    border-right: 2px solid var(--sharks-black);
    padding-right: var(--sharks-space-lg);
    margin-right: var(--sharks-space-lg);
    text-align: center;
}
.portfolio--counters .portfolio--counter:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}
.portfolio--counter span:first-child {
    font: 700 84px/96px var(--sharks-HelveticaNeueBold);
    color: var(--sharks-black);
}
.portfolio--counter span:last-child {
    font: 400 30px/36px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
}
.portfolio--sectors {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sharks-space-lg);
}
.portfolio--sector--item {
    width: calc(25% - 24px);
    height: auto;
    position: relative;
    overflow: hidden;
}
.portfolio--sector--item img {
    transform: scale(1);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.portfolio--sector--item:hover img {
    transform: scale(1.2);
}
.portfolio--sector--item .portfolio--sector--title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 100%;
    height: auto;
    padding: 0 var(--sharks-space-sm);
    text-align: center;
    font: 400 20px/24px var(--sharks-HelveticaNeue);
    color: var(--sharks-white);
}

.image-gradient-overlay {
    z-index: 0;
    opacity: 1;
    background-image: repeating-linear-gradient(90deg, #000c, #0006 85%, #0000);
    background-position: 0 0;
    background-size: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 0%;
    max-height: 600px;
    display: flex;
    position: absolute;
    inset: 0% auto 0% 0%;
    animation: grow 1s ease-out forwards;
}
@keyframes grow {
    from {
        width: 0;
    }
    to {
        width: 150%;
    }
}
.portfolio--clients {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sharks-space-lg);
}
.portfolio--clients .portfolio--client--item {
    width: calc(20% - 25.66666px);
    height: auto;
    padding: var(--sharks-space-xl);
}
.portfolio--sector--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    gap: var(--sharks-space-lg);
}
.portfolio--sector--row .portfolio--sector--col {
    width: 100%;
    height: auto;
}
.portfolio--sector--col:first-child {
    padding-right: var(--sharks-space-md);
}
h4.sector--subtitle {
    font: 400 30px/36px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
    margin-bottom: var(--sharks-space-lg);

}
.portfolio--sector--col p {
    font: 400 22px/30px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
    margin-bottom: 0;

}
.portfolio--sector--col p a{
    color:var(--sharks-primary);
}
.portfolio--project--wrapper {
    width: 100%;
    height: auto;
    margin-top: var(--sharks-space-xl);
}
h3.project--title {
    font: 500 30px/36px var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-black);
    margin-bottom: var(--sharks-space-lg);

}
.portfolio--project--row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    gap: var(--sharks-space-lg);
}
.portfolio--project--row .portfolio--project--col {
    width: 100%;
    height: auto;
}
.portfolio--project--col img {
    margin-bottom: var(--sharks-space-md);
}
.portfolio--project--col p {
    font: 400 16px/28px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);
    margin-bottom: 4px;

}
.portfolio--other--project--wrapper {
    width: 100%;
    height: auto;
    margin-top: var(--sharks-space-xl);
}
.portfolio--other--project--row {
    width: 100%;
    height: auto;
    max-height: 240px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--sharks-space-lg);
    transition: max-height 1s ease-in-out;
}
.portfolio--other--project--row.show {
    max-height: 10000px;
}
.portfolio--other--project--row .portfolio--other--project--item {
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--sharks-black);
    padding-bottom: var(--sharks-space-lg);
}
.portfolio--other--project--item p {
    font: 400 16px/28px var(--sharks-HelveticaNeue);
    color: var(--sharks-black);

}
.portfolio--other--project--action {
    width: 100%;
    height: auto;
    margin-top: var(--sharks-space-lg);
    display: flex;
    justify-content: flex-end;
}
.portfolio--other--project--action button.view--more {
    background-color: transparent;
    border: none;
    outline: none;
    font: 500 16px/20px var(--sharks-HelveticaNeueMedium);
    color: var(--sharks-black);
    display: flex;
    align-items: center;
    gap: 4px;

}
button.view--more img {
    width: 20px;
}
button.view--more.show img {
    transform: rotate(180deg);
}
.solutions--landing--table {
    width: 100%;
    height: auto;
    overflow: hidden;
    overflow-x: auto;
    padding-top: 20px;
}
.solutions--landing--table table {
    width: 100%;
    min-width: 700px;
    height: auto;
    border-collapse: separate;
    table-layout: fixed;
    border-spacing: 2px;
    border: 1px solid #ccc;
    font: 400 16px/20px var(--sharks-HelveticaNeue);
}
.solutions--landing--table table thead td {
    background-color: #0093FF;
}
.solutions--landing--table table tr td,
.solutions--landing--table table tr th {
    padding: var(--sharks-space-sm);
}
.solutions--landing--table table tr th {
    text-align: left;
}
.solutions--landing--table table tr:nth-child(odd) td {
    background-color: var(--sharks-light-grey);
    vertical-align: top;
}
.solutions--landing--table table tr:nth-child(even) td {
    background-color: #E8E8E8;
    vertical-align: top;
}
.solutions--landing--table table tr th:nth-child(1) {
    background-color: #696969;
    color: var(--sharks-white);
}
.solutions--landing--table table tr th:nth-child(2) {
    background-color: #3C3C3C;
    color: var(--sharks-white);
}
.solutions--landing--table table tr th:nth-child(3) {
    background-color: #ED1C25;
    color: var(--sharks-white);
}
.solutions--landing--table th.col--last {
    position: relative;
}
.solutions--landing--table th.col--last::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    background-color: var(--sharks-primary);
    top: -20px;
    left: 0;
    border-radius: 5px 5px 0 0;
}
.page--up {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1000;
    background-color: var(--sharks-primary);
    
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display:none;
}
.page--up img {
    width: 30px;
    height: auto;
}
.page--up.d-flex{
    display: flex;
}