@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Black.eot');
    src: local('Roboto Black'), local('Roboto-Black'),
    url('/fonts/Roboto/Roboto-Black.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Black.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Black.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Bold.eot');
    src: local('Roboto Bold'), local('Roboto-Bold'),
    url('/fonts/Roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Bold.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Bold.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Medium.eot');
    src: local('Roboto Medium'), local('Roboto-Medium'),
    url('/fonts/Roboto/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Medium.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Medium.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Regular.eot');
    src: local('Roboto'), local('Roboto-Regular'),
    url('/fonts/Roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Regular.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Regular.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Light.eot');
    src: local('Roboto Light'), local('Roboto-Light'),
    url('/fonts/Roboto/Roboto-Light.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Light.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Light.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Thin.eot');
    src: local('Roboto Thin'), local('Roboto-Thin'),
    url('/fonts/Roboto/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto/Roboto-Thin.woff2') format('woff2'),
    url('/fonts/Roboto/Roboto-Thin.woff') format('woff'),
    url('/fonts/Roboto/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

* {
    color: #262731;
}

a {
    text-decoration: none;
}

p {
    margin-bottom: 0;
    line-height: 120%;
    font-weight: 400;
}

strong {
    font-weight: 600;
}

body {
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #121521;
    line-height: 120%;
}

h1 {
    line-height: 120%;
    font-weight: 500;
    color: #262731;
    font-size: 38px;
    margin-bottom: 30px;
}

h2 {
    font-size: 34px;
    margin-bottom: 30px;
    line-height: 120%;
}

.btn-main {
    padding: 15px 32px;
    border-radius: 12px;
    background: #BF1818;
    display: inline-block;
    transition: .3s;
    color: #ffffff;
    text-decoration: none;
    margin-top: 15px;
    font-size: 16px;
    font-weight: 500;
}
.overflow-clip {
    overflow:clip!important; ;
}
.btn-main img {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    margin-top: -3px;
}

.btn-main:hover img {
    display: inline-block;
    cursor: pointer;
}

.btn-main:hover {
    background: #8F1010;
    color: #ffffff;
    display: inline-block;
    transition: .3s;
    cursor: pointer;
}

.btn-add {
    padding: 13px 25px;
    background: transparent;
    border: 1px solid rgba(195, 199, 205, 0.7);
    color: #606060;
    font-size: 16px;
    transition: .3s;
    display: inline-block;
    border-radius: 12px;
}

.btn-add:hover {
    background: #606060;
    border: 1px solid #606060;
    color: #ffffff;
    font-size: 16px;
}
.bg-white {
    background: #ffffff!important;
}

.bg-grey {
    background: #ECEEF1!important;
}

.menu-logo {
    max-width: 139px;
    transition: .3s;
}

.menu-logo:hover {
    transform: translateY(-3px);
}

.navbar {
    background: transparent;
}

.offcanvas {
    background: #262731!important;
}

.navbar-toggler {
    border: none;
    background: rgba(64, 64, 64, 0.4);
    padding: 11px 15px 15px 15px;
    border-radius: 14px;
}

.navbar-toggler-icon {
    background-image: url('/img/icons/icon-menu.svg');
}

.nav-item .nav-link {
    font-size: 16px;
    transition: .2s;
    color: #ffffff;
    font-weight: 400;
}

.nav-item  {
    position: relative;
}

.nav-item:after  {
    content: '';
    position: absolute;
    top:50%;
    right: 5px;
    width: 12px;
    height: 12px;
}

.offcanvas {
    background: #B5B5B5;
}

.offcanvas-header {
    padding: 20px 20px 11px 20px;
    background: #262731;
}

.offcanvas-header .btn-close {
    position: relative;
    z-index: 1;
    background: rgba(64, 64, 64, 0.4) url('/img/icons/icon-close.svg') center center no-repeat;
    width: 13px;
    padding: 14px 16px 15px 16px;
    opacity: 1 !important;
    border-radius: 14px;
    margin-right: 0;
}

.nav-item .nav-link:hover {
    color: #ffffff;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #ffffff;
}

.navbar-toggler-icon {
    filter: invert(0)!important;
    opacity: 1;
}

.navbar-toggler {
    border: none;
}

.offcanvas-body {
    background: #303648;
     margin: 10px 20px 20px 20px;
    border-radius: 12px;

}
.offcanvas-body > div  {
    width: 100%;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}

.navbar-toggler-icon:focus {
    box-shadow: none;
    border: none;
}

.dropdown-toggle::after {
    width: 13px;
    height: 13px;
    display: inline-block;
    margin-left: 8px;
    vertical-align: -2px;
    background: url('/img/icons/icon-dropdown.svg') center center no-repeat !important;
    background-size: contain !important;
    border: none;
    transition: .3s;
}

.dropdown-toggle.show::after {
    transform: rotate(180deg);
}

.dropdown-menu {
    background: transparent;
    border: 0;
}

.dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    font-weight: 400;
    color: #B5B5B5;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-size: 16px;
}

.dropdown-item, .dropdown-item:focus, .dropdown-item:active {
    background: transparent;
}

.dropdown-item {
    transition: .3s;
}

.dropdown-item:hover, .dropdown-item.active, .dropdown-item:focus, .dropdown-item:active, .dropdown-item:focus {
    color: #ed3a3a;
    background: transparent;
}
.wrap {
    overflow:clip!important; ;
}
.wrap-banner {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 100vh;
    position: relative;
}

.wrap-banner.banner-half-height {
    min-height: 80vh;
}

.banner {
    height: 100%;
    margin-top: 50px;
}

.banner h1 {
    font-weight: 500;
    color: #ffffff;
    font-size: 38px;
    line-height: 120%;
    margin-bottom: 30px;
}

.banner p {
    color: #F4F4F4;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
}
.main {
    background: url('/img/design/FMS-banner.jpg') center no-repeat;
    background-size: cover;
}

.explore {
    display: none;
}

.labels {
    position:absolute;
    top: 18px;
    left: 30px;
}

.text-block {
    margin-top: 80px;
    margin-bottom: 80px;
}

.text-block h2 {
    margin-bottom: 30px;
}

.text-block p {
    font-size: 16px;
    line-height: 120%;
    margin-bottom: 20px;
}
/*
.our-solution {
    padding-top: 80px;
    padding-bottom: 50px;
    background: #ffffff;
}

.solution-block {
    margin-bottom: 30px;
}

.solution-block-img {
    display: block;
    border-radius: 16px;
    padding: 10px 10px 20px 10px;
    transition: .4s;
    position: relative;
    background: transparent;
    -webkit-font-smoothing: subpixel-antialiased;
    transform: scale(1) translateZ(0);
    min-height: 550px;
}

@media (max-width: 374px) {
    .solution-block-img:after {
        min-height: 625px;
    }
    .solution-block-img {
        min-height: 570px;
    }
    .solution-block-wrap .btn-more {
        margin-top: 20px;
    }
}

@media (min-width:375px) and (max-width: 765px) {

    .solution-block-img:after {
        min-height: 610px;
    }

    .solution-block-img {
        min-height: 563px;
    }

    .solution-block-wrap .btn-more {
        margin-top: 20px;
    }
}


@media (min-width: 765px) {

    .solution-block-img:after {
        min-height: 527px;
    }

    .solution-block-img {
        min-height: 450px;
    }

}

.solution-block-wrap {
    overflow: hidden;
    border-radius: 16px;
}

.solution-block-img span {
    display: block;
    color: #ffffff;
    margin-bottom: 16px;
    transition: .5s;
    will-change: scale;
    position: relative;
    z-index: 1;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    transform: scale(1) translateZ(0);
}

.solution-block-img strong {
    display: block;
    color: #ffffff;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 100%;
    will-change: transform;
    position: relative;
    z-index: 1;
    transition: .3s;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    transform: scale(1) translateZ(0);
}

.solution-block-wrap .btn-more {
    position: relative;
    z-index: 1;
    margin-top: 30px;
    width: 100%;
}

.solution-block-img:after {
    content:'';
    position: absolute;
    top: 0;
    left: 50%;

    width: 100%;

    background-size: cover;
    border-radius: 16px;
    transition: .5s;
    transform-origin: top center;
    z-index: 0;
    will-change: contents;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    height: 100%;
    transform: translateX(-50%);

}

.solution-block-1 .solution-block-img:after {
    background: url('/img/design/img-solution-1.jpg') center top no-repeat;
    background-size: cover;

}

.solution-block-2 .solution-block-img:after{
    background: url('/img/design/img-solution-2.jpg') center center no-repeat;
    background-size: cover;
}

.solution-block-3 .solution-block-img:after {
    background: url('/img/design/img-solution-3.jpg') center center no-repeat;
    background-size: cover;
}

.solution-block-img:hover:after {
    height: 115%;

}

.solution-block-img:hover span {
    transform:scale(.95) translate(0,-5px) ;
}

.solution-block-img:hover strong {
    transform: scale(.95) translate(0, -17px) ;
}

.solution-block-wrap .btn-more {
    display: block;
    border: 1px solid #262731;
    border-radius: 12px;
    color: #262731;
    font-size: 16px;
    text-align: left;
    padding: 14px 16px 15px 16px;
    position: relative;
    margin-top: 40px;
    line-height: 90%;
    background: transparent;
    transition: .3s;
}

.btn-more:after {
    content:'';
    position: absolute;
    top:50%;
    right: 15px;
    width: 15px;
    height: 11px;
    background: url('/img/icons/icon-arrow-btn.svg') center no-repeat;
    background-size: cover;
    transform: translateY(-50%);
}

.solution-block-wrap .solution-block-img:hover .btn-more {
    display: block;
    border: 1px solid #ffffff;
    border-radius: 16px;
    color: #262731;
    font-size: 16px;
    text-align: left;
    padding: 14px 16px 15px 16px;
    position: relative;
    margin-top: 20px;
    scale: .93;
    line-height: 90%;
    background: #ffffff;
    transition: .3s;
}
*/

/* Секція */
/* Базові стилі секції */
.our-solution {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #ffffff;
}

/* Відступ між картками на мобільних і планшетах */
.our-solution .row {
    row-gap: 30px;
}

.our-solution-title {
    margin-bottom: 30px;
    font-size: 32px;
    font-weight: 500;
    color: #262731;
}

/* --- MOBILE FIRST (< 768px: 1 колонка) --- */
.solution-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 460px;
    /* Зверху та по боках 0, але знизу ГАРАНТОВАНИЙ відступ 20px */
    padding: 0 0 20px 0;
    background-color: transparent;
    border-radius: 16px;
    text-decoration: none;
    z-index: 1;
}

/* Маска-шторка */
.solution-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Точний розрахунок: 20px (відступ під кнопкою) + 46px (висота кнопки) + 14px (зазор) = 80px */
    -webkit-clip-path: inset(0 0 80px 0 round 16px);
    clip-path: inset(0 0 80px 0 round 16px);
    transition: clip-path 0.5s ease, -webkit-clip-path 0.5s ease;
}

.solution-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s ease;
}

/* Контейнер тексту */
.solution-card-content {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    /* Відступ від тексту гарантує, що він не наїде на лінію зрізу картинки */
    margin-bottom: 30px;
}

.solution-card-subtitle {
    display: block;
    color: #ffffff;
    margin-bottom: 12px;
    font-size: 14px;
    transition: transform 0.4s ease;
    transform: scale(1) translate(0, 0);
    transform-origin: left bottom;
}

.solution-card-title {
    display: block;
    margin: 0;
    color: #ffffff;
    font-size: 26px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.1;
    transition: transform 0.3s ease;
    transform: scale(1) translate(0, 0);
    transform-origin: left bottom;
}

/* Кнопка */
.btn-more {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%; /* Розтягується на всю ширину від краю до краю */
    border: 1px solid #262731;
    border-radius: 12px;
    color: #262731;
    font-size: 16px;
    text-align: left;
    padding: 14px 16px;
    margin: 0;
    line-height: 1;
    /* Жорстко білий фон, щоб при ховері картинка не просвічувалась крізь кнопку */
    background-color: #ffffff;
    transition: all 0.3s ease;
    transform: scale(1);
    transform-origin: center;
}

.btn-more::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 16px;
    height: 16px;
    background: url('/img/icons/icon-arrow-btn.svg') center no-repeat;
    background-size: contain;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* --- HOVER ЕФЕКТИ --- */
.solution-card:hover .solution-card-bg {
    /* Картинка падає до самого низу */
    -webkit-clip-path: inset(0 0 0 0 round 16px);
    clip-path: inset(0 0 0 0 round 16px);
}

.solution-card:hover .solution-card-bg img {
    transform: scale(1.03);
}

.solution-card:hover .solution-card-subtitle {
    transform: scale(0.95) translateY(-6px);
}

.solution-card:hover .solution-card-title {
    transform: scale(0.95) translateY(-14px);
}

.solution-card:hover .btn-more {
    border-color: #ffffff;
    border-radius: 16px;
    color: #262731;
    /* ПОВЕРНУТО: Кнопка ідеально стискається до центру */
    transform: scale(0.93);
}

.solution-card:hover .btn-more::after {
    transform: translateY(-50%) translateX(4px);
}

/* --- ТАБЛЕТКИ (>= 768px: 2 колонки) --- */
@media (min-width: 768px) {
    .solution-card {
        min-height: 480px;
    }
}

/* --- ДЕСКТОП (>= 992px: 3 колонки) --- */
@media (min-width: 992px) {
    .our-solution {
        padding-top: 80px;
    }

    .solution-card {
        min-height: 550px;
        padding: 0 0 24px 0; /* Збільшений відступ знизу під кнопкою */
    }

    .solution-card-bg {
        /* 24px (низ) + 46px (кнопка) + 16px (зазор над кнопкою) = 86px */
        -webkit-clip-path: inset(0 0 86px 0 round 16px);
        clip-path: inset(0 0 86px 0 round 16px);
    }

    .solution-card-content {
        padding: 0 24px;
        margin-bottom: 36px;
    }

    .solution-card-title {
        font-size: 30px;
    }
}

.why-we {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #F6F7F9;
}

.why-we-img {
    background: #ffffff;
    padding: 15px;
    border-radius: 16px;

}

.why-we-img img {
    display: block;
    margin: 0 auto;
}

.why-we-text {
    margin-top: 30px;
}

.why-we-text > div{
    margin-bottom: 40px;
}

.why-we-text > div:last-child {
    margin-bottom: 0;
}

.why-we-text h3 {
    font-size: 28px;
    margin-bottom: 16px;
}

.why-we-text p {
    color: #606060;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 0;
}

.for-what {
    padding-top: 100px;
    padding-bottom: 80px;
    background: #1A325F;
}

.for-what h2 {
   color: #F6F7F9;
    line-height: 120%;
}


.for-what img,
.for-what svg {
    display: block;
    margin: 0 auto 14px auto;
}

.for-what span {
    display: block;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #F6F7F9;
}

.for-what-img > div {
    margin-bottom: 30px;
}

.for-what-img > div:last-child {
    margin-bottom: 0;
}

.with-you {
    padding-top: 80px;
    padding-bottom: 80px;
}

.drop-header-item {
    background: #F6F7F9;
    padding: 20px 15px;
    border-radius: 16px;
    position: relative;
    transition: .3s;
    margin-top: 20px;
}

.with-you-item:first-child .drop-header-item{
    margin-top: 0;
}

.drop-header-item:last-child {
    margin-bottom: 0;
}

.drop-header-item:hover {
    background: #C3C7CD;
    cursor: pointer;
}

.drop-header-item.drop-active {
    background: #C3C7CD!important;
    margin-bottom: 0;
}

.drop-header-item:after {
    content: '';
    position: absolute;
    top:50%;
    right: 15px;
    width: 17px;
    height: 17px;
    background: url('/img/icons/icon-plus.svg') center no-repeat;
    background-size: cover;
    transform: translateY(-50%);
}

.drop-header-item.drop-active:after {
    width: 0;
    height: 0;
}

.drop-header-item span {
    display: block;
    font-size: 16px;
    font-weight: 500;
}

.drop-active-xs {
    display: block!important;
}

.drop-active-lg {
    display: none!important;
}

.with-you-drop-body {
    padding: 15px;
    border-radius: 16px;
    background: #F6F7F9;
}

.with-you-drop-body strong {
    color: #262731;
    font-size: 20px;
    display: block;
    margin-bottom: 15px;
}

.with-you-drop-body p {
    color: #606060;
    font-size: 16px;
    line-height: 120%;
}

.btn-learn-more {
    font-size: 16px;
    font-weight: 400;
    color: #606060;
    border: 1px solid rgba(195, 199, 205, 0.7);
    border-radius: 12px;
    padding: 10px 20px;
    transition: .3s;
    display: inline-block;
    margin-top: 30px;
}

.btn-learn-more:hover {
    color: #ffffff;
    border: 1px solid #606060;
    background: #606060;
}

.modernize {
    padding-top: 100px;
    padding-bottom: 100px;
    background: url('/img/design/bg-modernize.jpg') center right no-repeat;
    background-size: cover;
}

.modernize h2 {
   color: #FFFFFF;
}

.modernize p {
    color: #FFFFFF;
    font-size: 20px;
    line-height: 120%;
}

.modernize .btn-main {
    margin-top: 20px;
}

.experience {
    padding-top: 80px;
    padding-bottom: 80px;
}

.experience img {
    display: block;
    margin: 0 auto;
    border-radius: 16px;
}

.experience-item {
    margin-top: 40px;
}

.experience-item strong {
    display: block;
    font-size: 55px;
    color: #BF1818;
    margin-bottom: 12px;
    line-height: 100%;
    font-weight: bold;
    text-align: center;
}

.experience-item span {
    display: block;
    font-size: 16px;
    color: #262731;
    line-height: 100%;
    font-weight: 300;
    text-align: center;
}

footer {
    background: #F6F7F9;
    padding-top: 70px;
    color: #262731;
    padding-bottom: 60px;
}

.footer-logo {
    display: block;
    transition: .3s;
    margin-bottom: 28px;
}

.footer-logo:hover {
   transform: translateY(-3px);
}

.footer-logo img {
    max-width: 255px;
}

.footer-bottom {
    padding-bottom: 5px;
    margin-top: 10px;
    padding-top: 5px;
}

.footer-bottom > div {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-menu ul {
    padding-left: 0;
    margin-bottom: 0;
}

.footer-menu ul li {
    list-style: none;
    margin-bottom: 10px;
}

.footer-menu ul li strong {
    display: block;
    margin-bottom: 20px;
    font-weight: 400;
    color: #262731;
    font-size: 19px;
}

.footer-menu a {
    color: rgba(38, 39, 49, 0.7);
    padding-top: 10px;
    padding-bottom: 10px;
    transition: .3s;
    font-weight: 400;
    font-size: 16px;
}

.footer-menu a:hover {
    color: #BF1818;
}

footer .follow a {
    display: inline-block;
    transition: .3s;
    margin-right: 10px;
}

footer .follow a:last-child {
   margin-right: 0;
}

footer .follow a:hover {
    transform: translateY(-3px);
}

.footer-menu-bottom  {
   border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-bottom .footer-menu ul {
    margin-bottom: 0;
    margin-top: 10px;
}

.footer-bottom .footer-menu ul li {
    margin-right: 10px;
    display: inline-block;
}

.footer-developer span {
    font-weight: 300;
    color: rgba(244, 241, 233, .5);
    font-size: 13px;
}

.footer-developer span a {
    transition: .3s;
    display: inline-block;
    color: rgba(255, 255, 255, 0.8);
    margin-left: 10px;
}

.footer-developer span a:hover {
    transition: .3s;
    transform: translateY(-3px);
}

.footer-menu .btn-main {
    padding: 10px 30px;
    margin-top: 1px;
}

.footer-menu .btn-main:hover {
    color: #ffffff;
}

.footer-menu p {
    font-size: 13px;
    font-weight: 300;
    margin-top: 10px;
}

.footer-phone a {
    font-weight: 500;
}

.footer-menu-bottom {
    padding-top: 0;
    padding-bottom: 5px;
}

.footer-menu-bottom span {
    display: block;
    font-size: 13px;
    font-weight: 300;
    color: #262731;
    margin-bottom: 5px;
}

.footer-menu-bottom a {
    display: block;
    font-size: 13px;
    color: #262731;
    font-weight: 300;
    transition: .3s;
    margin-bottom: 5px;
}

.footer-menu-bottom a:hover {
    color: #BF1818;
}

.footer-social a {
    display: inline-block;
    padding: 10px 10px;
    color: #262731;
    font-weight: 500;
    transition: .12s;
}

.footer-social a:hover {
      filter: invert(18%) sepia(75%) saturate(3573%) hue-rotate(345deg) brightness(75%) contrast(104%);

}

.footer-social a:first-child {
    padding-left: 0;
}

.dev a {
    display: block;
    vertical-align:middle;
    margin-left: 5px;
}

.dev span {
    display: inline-block;
    vertical-align:middle;
}

@media(min-width: 768px) {

    h1 {
        font-size: 30px;
    }

    .navbar {
        padding-top: 10px;
        padding-bottom: 10px;
        background: transparent;
    }

    .banner p {
        font-size: 20px;
        margin-top: 10px;
    }

    .explore {
        display: block;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .explore span {
        color:#ffffff;
        display: block;
        font-size: 16px;
    }

    .explore span:before {
        content: '';
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 25px;
        border-radius: 2px;
        background: linear-gradient(171deg, #ededed, #bf1818);
        background-size: 400% 400%;

        -webkit-animation: AnimationName 5s ease infinite;
        -moz-animation: AnimationName 5s ease infinite;
        animation: AnimationName 5s ease infinite;
    }

    @-webkit-keyframes AnimationName {
        0%{background-position:0% 2%}
        50%{background-position:100% 99%}
        100%{background-position:0% 2%}
    }

    @-moz-keyframes AnimationName {
        0%{background-position:0% 2%}
        50%{background-position:100% 99%}
        100%{background-position:0% 2%}
    }

    @keyframes AnimationName {
        0%{background-position:0% 2%}
        50%{background-position:100% 99%}
        100%{background-position:0% 2%}
    }

    .text-block p {
        margin-top: 0;
        font-size: 20px;
        margin-bottom: 30px;
        padding-top: 12px;
        line-height: 120%;
        font-weight: 400;
    }

    .solution-block {
        margin-bottom: 0;
    }

    .solution-block-img strong {
        font-size: 22px;
    }

    .solution-block-img {
        padding: 15px 0 25px 0;
    }
    .solution-block-img span {
        padding-left: 15px;
        padding-right: 15px;
    }

    .solution-block-img strong {
        padding-left: 15px;
        padding-right: 15px;
    }

    .why-we-text > div{
        margin-bottom: 0;
    }

    .why-we-text h3 {
        font-size: 20px;
    }

    .for-what-img > div {
        margin-bottom: 0;
    }

    .drop-header-item {
        margin-top: 0;
    }

    .drop-active-xs {
        display: none!important;
    }

    .drop-active-lg {
        display: block!important;
    }

    .modernize h2 {
        margin-bottom: 0;
    }


    .footer-menu-bottom a {
        margin-bottom: 0;
    }

    .footer-menu-bottom {
        padding-top: 10px;
    }

    .footer-menu a {
        font-size: 14px;
    }

    .footer-bottom .footer-menu ul li {
        display: block;
    }

    .dev a {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
        margin-top: -3px;
    }

    .dev a:hover {
        transform: translateY(-3px);
    }

}

@media(min-width: 992px) {

    h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 44px;
        line-height: 120%;
    }

    .offcanvas {
        background: transparent!important;
        background-size: unset;
    }
    .offcanvas-body {
        background: transparent;
    }

    .offcanvas-body > div  {
        width: auto;
    }

    .navbar-nav {
        background: rgba(64, 64, 64, 0.4);
        border-radius: 16px;
        padding: 5px 5px 5px 10px;
    }

    .nav-item .nav-link {
        font-size: 16px;
        margin-right: 15px;
        border-top: none;
        font-weight: 400;
    }

    .offcanvas-body {
        background: transparent;
        margin: 0;
        border-radius: 12px;
    }

    .offcanvas-body .navbar-nav .btn-main {
        margin: 0;
        padding: 15px 20px;
        font-weight: 500;
    }

    .nav-item .nav-link:last-child {
        border-bottom:none;
    }

    .navbar-nav .dropdown-menu {
        background: rgb(48 54 72);
        border-radius: 12px;
        padding: 18px 3px 20px 3px;
        top: 55px;
    }

    .btn-main {
        font-size: 16px;
        border: none;
    }

    .banner h1 {
        font-size: 50px;
    }

    .footer-bottom .footer-menu ul li {
        display: inline-block;
    }

    .dropdown-menu .dropdown-item {
        margin-bottom: 10px;
    }

    .dropdown-menu li:last-child .dropdown-item {
        margin-bottom: 0;
    }
    .nav-item:after  {
        content: '';
        position: absolute;
        top:50%;
        right: 5px;
        width: 0;
        height: 0;
        background: none;
        background-size: contain;
        transform: translateY(-50%);
    }

    .why-we-text h3 {
        font-size: 27px;
    }

    .for-what h2 {
        margin-bottom: 0;
    }

    .with-you-drop-body {
        padding: 25px;
    }

    .modernize p {
        width: 75%;
    }

    .footer-menu-bottom {
        margin-top: 10px;
    }

    .count-input input {
        width: 70px;
    }

    .footer-social a {
        padding: 10px 5px;
        font-size: 14px;
    }

}

@media(min-width: 1200px) {

    h2 {
        font-size: 54px;
        margin-bottom: 60px;
    }

    .banner-img {
        min-height: 700px;
    }

    .nav-item .nav-link {
        margin-right: 25px;
    }

    .menu-logo {
        max-width: 175px;
    }

    .text-block {
        margin-top: 120px;
        margin-bottom: 120px;
    }

    .text-block p {
       font-size: 20px;
       width: 95%;
    }

    .our-solution {
        padding-top: 120px;
        padding-bottom: 115px;
    }

    .solution-block-img {
        min-height: 620px;
        padding: 15px 0 25px 0;
    }

    .solution-block-img:after {
        transform: scale(1,.85) translateX(-50%) translateZ(0);
    }

    .solution-block-img span {
        padding-left: 15px;
        padding-right: 15px;
    }

    .solution-block-img strong {
        padding-left: 15px;
        padding-right: 15px;
    }

    .why-we {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .why-we-img {
        padding-top: 60px;
        padding-bottom: 55px;
    }

    .why-we-text {
        margin-top: 40px;
    }

    .why-we-text h3 {
        font-size: 28px;
    }

    .for-what {
        padding-top: 150px;
        padding-bottom: 130px;
    }

    .with-you {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .with-you-drop-body strong {
        margin-bottom: 30px;
    }

    .modernize {
        padding-top: 150px;
        padding-bottom: 150px;
    }

    .experience {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .experience-item span {
        font-size: 20px;
    }

    footer {
        padding-bottom: 5px;
    }

    .footer-social a {
        padding: 10px 10px;
        font-size: 15px;
    }

}

@media(min-width: 1440px) {

    .navbar {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .nav-item .nav-link {
        margin-right: 25px;
    }

    .banner {
        margin-top: 70px;
    }

    .banner h1 {
        width: 85%;
        font-size: 60px;
    }

    .banner p {
        font-size: 20px;
        width: 100%;
    }

    .text-block p {
        width: 95%;
        margin-bottom: 0;
    }

    .solution-block-img strong {
        font-size: 32px;
    }

    .modernize p {
        width: 71%;
        margin-top: 10px;
    }


    footer {
        padding-top: 80px;
    }

    .footer-menu a {
        font-size: 16px;
    }
}

@media(min-width: 1900px) {  }


/* About page */
.about {
    background: url('/img/design/bg-about.jpg') center no-repeat;
    background-size: cover;
}

.our-story {
    padding-top: 60px;
    padding-bottom: 40px;
    background: #F6F7F9;
}

#desktopCarousel .list-group {
    border-left: 2px solid #B5B5B5;
    border-radius: 0;
}

#desktopCarousel .list-group-item {
    background: transparent;
    border: 0;
    transform: translateX(-2px);
    transition: .3s;
    border-radius: 0;
    min-height: 140px;
    font-weight: 400;
    padding: 20px 30px;
    position: relative;
}

#desktopCarousel .list-group-item span {
    display: block;
    color: #B5B5B5;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

#desktopCarousel .list-group-item.active {
    border: 0;
    background: transparent !important;
    min-height: 140px;
}

#desktopCarousel .list-group-item.active:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 73px;
    width: 2px;
    border-radius: 90px;
    background: #262731;
}

#desktopCarousel .list-group-item+.list-group-item.active {
    margin-top: 0;
    transform: translate(-2px,-3px);
}


#desktopCarousel .list-group-item.active span {
    color: #262731;
    line-height: 20px;
}

#desktopCarousel .carousel-item img {
    display: block;
    min-width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
}


#mobileCarousel .custom-indicators {
    position: absolute;
    top: 280px;
    bottom: auto;
    margin-bottom: 0;
}

#mobileCarousel .custom-indicators [data-bs-target] {
    width: 40px;
    height: 3px;
    background: #262731;
    border: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex: 1 0 0;
    border-radius: 25px;
    margin-left: 0;
    margin-right: 0;
}

#mobileCarousel .custom-indicators .active {
    opacity: 1 !important;
}

#mobileCarousel .custom-indicators {
    background: #B5B5B5;
    margin-left: 0;
    margin-right: 0;
    border-radius: 25px;
}

#mobileCarousel .carousel-indicators {
    border-radius: 16px;
    margin-right: 5px;
    margin-bottom: 15px;
    margin-left: 5px;
    left: 0;
}

#mobileCarousel .carousel-item img {
    height: 250px;
    object-fit: cover;
    border-radius: 20px;
}

#mobileCarousel .carousel-item div {
    padding: 65px 5px 1px 5px;
    text-align: left;
    min-height: 220px;
}

.who-we-block.text-block p {
    margin-bottom: 30px;
}

.who-we-block img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}

.how-we-think {
    background: url('/img/design/bg-how-we-think.jpg') center no-repeat;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
}

.how-we-think h2 {
    color: #FFFFFF;
}

.how-we-think .how-we-think-block {
    margin-bottom: 20px;
}

.how-we-think .how-we-think-block:last-child {
    margin-bottom: 0;
}

.how-we-think .how-we-think-block > div {
    background: rgba(26, 50, 95, 0.50);
    backdrop-filter:  blur(10px);
    padding: 25px 15px;
    border-radius: 16px;
}

.how-we-think .how-we-think-block span {
    display: block;
    color: #BF1818;
    font-size: 32px;
    margin-bottom: 16px;
    line-height: 100%;
}

.how-we-think .how-we-think-block h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 16px;
}

.how-we-think .how-we-think-block p {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    margin-bottom:0 ;
    line-height: 120%;
}

.built-for-intelligence {
    padding-top: 80px;
    padding-bottom: 80px;
}

.built-for-intelligence h2 {
    line-height: 120%;
}

.built-for-intelligence img {
    display: block;
    margin: 0 auto;
    border-radius: 16px;
}


@media (min-width: 768px) {

    .wrap-banner.banner-half-height {
        min-height: 60vh;
    }

    #mobileCarousel .carousel-indicators {
    margin-right: 30px;
    margin-left: 30px;
    }

    #mobileCarousel .carousel-item div {
        padding: 65px 50px 1px 50px;
        min-height: 180px;
    }

    .how-we-think .how-we-think-block {
        margin-bottom: 0;
    }

    .how-we-think .how-we-think-block > div {
        min-height: 100%;
    }
}

@media (min-width: 992px) {

    .who-we-block img {
        margin-top: 30px;
    }

    .who-we-block .animate-on-scroll {
        margin-top: 30px;
    }

     .who-we-block .animate-on-scroll img {
        margin-top: 0;
     }

}

@media (min-width: 1200px) {
    .our-story {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    #desktopCarousel .list-group-item {
        padding: 20px 50px;
    }

    .how-we-think {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .built-for-intelligence {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .wrap-banner.banner-half-height {
        min-height: 60vh;
    }
}

@media(min-width: 1400px) {

   .banner-half-height {
        min-height: 65vh;
    }

    .who-we-block img {
        margin-top: 60px;
    }

    .how-we-think .how-we-think-block p {
        width: 90%;
    }

}

/*Industries page*/

.industries {
    background: url('/img/design/img-industries-banner.jpg') center no-repeat;
    background-size: cover;
}

.text-block-icons {
    margin-top: 80px;
    margin-bottom: 80px;
}

.block-icons-item {
    margin-top: 20px;
}

.block-icons-item > div {
    background: #1A325F;
    border-radius: 16px;
    padding: 28px 20px;
}

.block-icons-item > div img {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
}

.block-icons-item > div h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    color:#ffffff;
}

.block-icons-item > div p {
    font-size: 16px;
    font-weight: 400;
    color: #F4F4F4;
}

.fleet-operator {
    padding-top: 100px;
    padding-bottom: 100px;
    background: #262731;
    background-size: cover;
}

.fleet-operator h2 {
    color: #ffffff;
}

.fleet-operator-text h3 {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 16px;
    font-weight: 500;
}

.fleet-operator-text p {
    font-size: 16px;
    line-height: 120%;
    font-weight: 400;
    color: #F4F4F4;
}

.fleet-xs-block  {
   margin-bottom: 20px;
}

.fleet-xs-block:last-child  {
   margin-bottom: 0;
}

.fleet-xs-block > div {
    min-height: 120px;
    padding: 32px 22px;
    border-radius: 16px;
}


.fleet-block-1 > div {
    background: url('/img/design/img-fleet-1.jpg') center center no-repeat;
    background-size: cover;
}

.fleet-block-2 > div {
    background: url('/img/design/img-fleet-2.jpg') center center no-repeat;
    background-size: cover;
}

.fleet-block-3 > div{
    background: url('/img/design/img-fleet-3.jpg') center center no-repeat;
    background-size: cover;
}

.fleet-block-4 > div{
    background: url('/img/design/img-fleet-4.jpg') center center no-repeat;
    background-size: cover;
}

.key-sectors {
    padding-top: 80px;
    padding-bottom: 80px;
}

.key-sectors-row {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 20px 5px;
    min-height: 500px;
    border-radius: 16px;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.key-sectors-row:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: linear-gradient(359.74deg, rgba(0, 0, 0, 0.55) 0.92%, rgba(0, 0, 0, 0.352718) 16.39%, rgba(0, 0, 0, 0.143033) 30.52%, rgba(0, 0, 0, 0) 44.75%, rgba(0, 0, 0, 0) 62.46%, rgba(0, 0, 0, 0.143) 74.9%, rgba(0, 0, 0, 0.352) 87.14%, rgba(0, 0, 0, 0.55) 99.77%);
    z-index: 1;
    pointer-events: none;
}

.sector-1 {
    background-image: url('/img/design/img-key-sectors-1.jpg');
}

.sector-2 {
   background-image: url('/img/design/img-key-sectors-2-xs.jpg');
}

.sector-3 {
    background-image: url('/img/design/img-key-sectors-3.jpg');
    margin-bottom: 0;
}

.key-sectors-row div{
    position: relative;
}

/* Піднімаємо контент над градієнтом */
.key-sectors-num,
.key-sectors-text {
    position: relative;
    z-index: 2;
}

@keyframes maritime-parallax {
    0% {
        background-size: 110% auto;
        background-position: center 40%;
    }
    100% {
        /* Картинка повільно збільшується та зміщується вниз */
        background-size: 118% auto;
        background-position: center 60%;
    }
}

.key-sectors-row .key-sectors-num span {
    font-size: 75px;
    color: #FFFFFF;
    display: block;
    line-height: 100%;
}
.key-sectors-row .key-sectors-text h3 {
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 25px;
}

.key-sectors-row .key-sectors-text p {
    font-size: 14px;
    color: #FFFFFF;
    margin-bottom: 15px;
    font-weight: 400;
    line-height: 120%;
}

.key-sectors-row .key-sectors-text ul {
    margin-bottom: 0;
    padding-left: 0;
}

.key-sectors-row .key-sectors-text ul li {
    list-style: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}

.key-sectors-row .key-sectors-text ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top:50%;
    transform: translateY(-50%);
    width: 15px;
    height: 11px;
    background: url('/img/icons/icon-tick.svg') center no-repeat;
    background-size: cover;
}

.fits-operation {
    padding-top: 100px;
    padding-bottom: 100px;
    background: url('/img/design/bg-feets-operation.jpg') center no-repeat;
    background-size: cover;
}

.fits-operation p {
    color:#ffffff;
    font-size: 20px;
    line-height: 120%;
    margin-bottom: 15px;
}

.fits-operation h2 {
    color:#ffffff;
    line-height: 120%;
}

@media(min-width: 768px) {

    .block-icons-item > div {
        min-height: 100%;
    }

    .block-icons-item > div h3 {
        font-size: 16px;
    }

    .block-icons-item > div p {
        font-size: 15px;
    }

    .fleet-operator {
        background: url('/img/design/img-fleet-operators.jpg') center no-repeat;
        background-size: cover;
        padding-top: 100px;
        padding-bottom: 100px;
    }

    #fleetCarousel .list-group {
        border-left: 2px solid #7e7b7b;
        border-radius: 0;
    }

    #fleetCarousel .list-group-item {
        background: transparent;
        transform: translateX(-2px);
        transition: .3s;
        border-radius: 0;
        border: none;
        height: 42px;
        font-weight: 400;
        padding:0;
        position: relative;
    }

    #fleetCarousel .list-group-item span {
        display: block;
        color: #0e2d67;
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
    }

    #fleetCarousel .list-group-item.active-fleet {
        background: transparent !important;
    }

    #fleetCarousel .list-group-item.active-fleet:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 42px;
        width: 2px;
        border-radius: 90px;
        background: rgba(191, 24, 24, 0.80);
    }

    #fleetCarousel .list-group-item+.list-group-item.active-fleet {
        margin-top: 0;
        transform: translate(-2px,-3px);
    }

    #fleetCarousel .list-group-item.active-fleet span {
        color: #ffffff;
        line-height: 20px;
    }

    #fleetCarousel .carousel-item > div {
        padding: 20px 20px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        min-height: 176px;
        margin-left: 10px;
        margin-right: 10px;
    }

    #fleetCarousel .carousel-item h3 {
        color: #ffffff;
        font-size: 22px;
        font-weight: 500;
        margin-bottom: 15px;
    }

    #fleetCarousel .carousel-item p {
        color: #F4F4F4;
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 0;
    }

    .key-sectors-row:before {
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.352718) 15.65%,
        rgba(0, 0, 0, 0.143033) 29.94%, rgba(0, 0, 0, 0) 44.34%, rgba(0, 0, 0, 0) 62.26%,
        rgba(0, 0, 0, 0.143) 74.84%, rgba(0, 0, 0, 0.352) 87.22%, rgba(0, 0, 0, 0.55) 100%);
    }

    .sector-2 {
        background-image: url('/img/design/img-key-sectors-2.jpg');
    }


    .fits-operation p {
        width: 80%;
        padding-top: 10px;
    }

}

@media(min-width: 992px) {


    .block-icons-item > div h3 {
        font-size: 20px;
    }

    .block-icons-item > div p {
        font-size: 16px;
    }

    .key-sectors-row .key-sectors-num span {
        font-size: 90px;
    }
    .fleet-operator {

        padding-top: 130px;
        padding-bottom: 130px;
    }

}

@media(min-width: 1200px) {

    .text-block-icons {
        margin-top: 120px;
        margin-bottom: 120px;
    }

    .fleet-operator {

        padding-top: 230px;
        padding-bottom: 230px;
    }

    #fleetCarousel .list-group-item {
        height: 42px;
    }

    #fleetCarousel .list-group-item.active-fleet:before {
        height: 42px;
    }

    #fleetCarousel .carousel-item > div {
        padding: 20px 13px;
    }

    #fleetCarousel .carousel-item h3 {
        font-size: 28px;
    }

    #fleetCarousel .carousel-item p {
        font-size: 20px;
    }

    .key-sectors {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .key-sectors-row {
        background-size: 110% auto;
        background-position: center 40%;
        background-repeat: no-repeat;
    }

    .sector-1 {

    }

    .sector-2 {

    }

    .sector-3 {

    }

    .key-sectors-row {
        padding: 30px 35px;
        margin-bottom: 40px;
    }

    .sector-3 {
        margin-bottom: 0;
    }

    .fits-operation {
        padding-top: 140px;
        padding-bottom: 100px;
    }

    .fits-operation p {
        width: 89%;
    }

}

@media(min-width: 1400px) {

    .block-icons-item {
        margin-top: 60px;
    }

    .block-icons-item > div p {
        width: 98%;
    }

    .block-icons-item > div img {
        width: 30px;
        height: 30px;
    }

    #fleetCarousel .carousel-item > div {
        padding: 20px 25px;
    }

    .key-sectors-row {
       min-height: 600px;
    }

}


/*Partners Page*/

.partners {
    background: url('/img/design/bg-partners.jpg') center  bottom no-repeat;
    background-size: cover;
}

.become-partner {
    background: url('/img/design/bg-become-partner.jpg') center bottom no-repeat;
    background-size: cover;
}

.partners-text h2 {
    margin-bottom: 0;
    margin-top: 0;
}

.why-choose-us {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #ECEEF1;
}

.bg-why-choose-list {
    background: url('/img/design/bg-why-choose-us-list.jpg') center bottom no-repeat;
    background-size: cover;
    border-radius: 16px;
    padding: 24px;
    margin-top: 30px;
}
.list-why-choose h3 {
    color:#ffffff;
    margin-bottom: 24px;
    font-weight: 400;
}
.list-why-choose ul {
    margin-bottom: 0;
    padding-left: 0;
}

.list-why-choose ul li {
    margin-bottom: 20px;
    padding-left: 20px;
    list-style: none;
    position: relative;
    color: #ffffff;
    font-weight: 400;
    line-height: 120%;
}

.list-why-choose ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #BF1818;
}

@media(min-width: 768px) {

    .bg-why-choose-list {
        padding: 30px;
        min-height: 300px;
    }

    .list-why-choose ul li {
        font-size: 20px;
    }
}

@media(min-width: 992px) {  }

@media(min-width: 1200px) {

    .why-choose-us {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .list-why-choose ul li{
        padding-left: 23px;
    }

    .list-why-choose ul li:before {
        height: 12px;
        width: 12px;
    }

}

@media(min-width: 1400px) {
    .bg-why-choose-list {
        min-height: 500px;
        padding: 60px;
    }

}

.ul ul {
    margin-bottom: 0;
    padding-left: 0;
}

.ul ul li {
    margin-bottom: 15px;
    padding-left: 15px;
    list-style: none;
    position: relative;
    color: #ffffff;
    font-weight: 400;
    line-height: 120%;
}

.ul ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #BF1818;
}

@media(min-width: 768px) {

    .ul ul li {
        font-size: 20px;
    }
}

@media(min-width: 1200px) {

    .ul ul li {
        padding-left: 23px;
    }

   .ul ul li:before {
        height: 12px;
        width: 12px;
    }

}


/*Resources page*/

.resources {
    background: url('/img/design/bg-resourses.jpg') center no-repeat;
    background-size: cover;
}

.resources-text .block-icons-item > div {
    background: #262731;
}

.resources-text .text-block {
    margin-top: 0;
}

.resources-text .text-block h2 {
    margin-bottom: 40px;
    line-height: 120%;
}

.resources-text.text-block-icons {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 80px;
    padding-bottom: 55px;
    background: rgba(195, 199, 205, 0.9);
}

.resources-text .block-icons-item {
    margin-top: 12px;
    margin-bottom: 12px;
}

.built-operations {
    padding-top: 80px;
    padding-bottom: 80px;
}

.built-operations-img {
    min-height: 300px;
    background: url('/img/design/img-built-operations.jpg') center center no-repeat;
    background-size: cover;
    margin-top: 30px;
    border-radius: 16px;
}

.built-operations-img p {
    margin-bottom: 15px;
    padding-left: 0;
    color: #ffffff;
    font-weight: 400;
    line-height: 120%;
}

.stay-informed {
    background: url('/img/design/img-stay-informed.jpg') center center no-repeat;
    background-size: cover;
}

@media(min-width: 768px) {

    .resources-text .block-icons-item {
        margin-top: 0;
        margin-bottom: 25px;
    }

    .built-operations-img p {
        font-size: 20px;

    }

}

@media(min-width: 992px) {  }

@media(min-width: 1200px) {

    .resources-text.text-block-icons {
        padding-top: 120px;
        padding-bottom: 90px;
    }

    .built-operations {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .built-operations-img {
        min-height: 500px;
        background-size: 110% auto;
        background-position: center 10%;
        background-repeat: no-repeat;
        margin-top: 60px;
    }

}

@media(min-width: 1400px) {  }


/*Data Migration page*/

.data-migration {
    background: url('/img/design/bg-data-migration.jpg') center right no-repeat;
    background-size: cover;
}

.data-migration-text.text-block-icons {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 80px;
    padding-bottom: 80px;
    background: url('/img/design/img-how-migration-work.jpg') center center no-repeat;
    background-size: cover;
}

.data-migration-text .block-icons-item > div {
    background: #F6F7F9;
}

.data-migration-text .text-block {
    margin-top: 0;
}

.data-migration-text .text-block h2 {
    margin-bottom: 40px;
    line-height: 120%;
}

.data-migration-text .text-block-icons {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 80px;
    padding-bottom: 80px;
    background: rgba(195, 199, 205, 0.9);
}

.data-migration-text .block-icons-item {
    margin-top: 12px;
    margin-bottom: 12px;
}

.data-migration-text .block-icons-item h3 {
    color: #262731;
    font-weight: 400;
    font-size: 16px;
}

.data-migration-text .block-icons-item span {
    font-size: 54px;
    display: block;
    line-height: 100%;
    color: #BF1818;
    margin-top: 16px;
    margin-bottom: 16px;
}

.data-migration-text .block-icons-item p {
    color: #262731;
    font-weight: 500;
}

.what-data {
    background: #1A325F;
    padding-top: 80px;
    padding-bottom: 80px;
}


.what-data h2 {
   color: #ffffff;
}

.what-data h3 {
   color: #ffffff;
    font-size: 20px;
    font-weight: 500;
}

.what-data p{
   color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
}

.what-data-row {
    padding-top: 25px;
    padding-bottom: 28px;
    margin-left: 0;
    margin-right: 0;
    border-bottom: 1px solid #BF1818;
}

.what-data-row:first-child {
    border-top: 1px solid #BF1818;
}

.stay-informed {
    background: url('/img/design/img-stay-informed.jpg') center center no-repeat;
    background-size: cover;
}

.why-matters {
    padding-top: 80px;
    padding-bottom: 80px;
}

.why-matters-img {
    min-height: 300px;
    background: url('/img/design/img-data-migration.jpg') center center no-repeat;
    background-size: cover;
    margin-top: 30px;
    border-radius: 16px;
    padding: 24px 16px;
}


.assess-migration {
    background: url('/img/design/img-assess-migration.jpg') center center no-repeat;
    background-size: cover;
}

.assess-migration h2 {
    color: #262731;
}

.assess-migration p {
    color: #262731;
}

.assess-migration .btn-main {
    padding: 15px 21px;
}

@media(min-width: 768px) {

    .data-migration-text .block-icons-item {
        margin-top: 0;
        margin-bottom: 25px;
    }

    .why-matters-img {
        padding: 40px 30px;
    }

}

@media(min-width: 992px) {  }

@media(min-width: 1200px) {

    .data-migration-text.text-block-icons {
        padding-top: 120px;
        padding-bottom: 90px;
    }

    .why-matters {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .why-matters-img {
        min-height: 500px;
        background-size: 110% auto;
        background-position: center 10%;
        background-repeat: no-repeat;
        margin-top: 60px;
        padding: 60px;
    }

    .ul ul li {
        margin-bottom: 22px;
    }

    .assess-migration p {
        width: 70%;
    }

}

@media(min-width: 1400px) {

    .what-data {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

/*Training & Implementation page*/

.training {
    background: url('/img/design/bg-training.jpg') center center no-repeat;
    background-size: cover;
}

.training-text .text-block h2{
    margin-bottom: 0;
    margin-top: 0;
}

.training-text .block-icons-item h3{
    font-weight: 400;
    font-size: 16px;
    color: #F4F4F4;
}

.training-text .block-icons-item span {
    font-size: 54px;
    display: block;
    line-height: 100%;
    color: #ffffff;
    margin-top: 16px;
    margin-bottom: 16px;
}

.training-text .block-icons-item p {
    color: #ffffff;
    font-weight: 500;
}

.training-works {
    background: url('/img/design/img-how-training-works.jpg') center left no-repeat;
    background-size: cover;
}

.team-gain {
    background: url('/img/design/img-training-team.jpg') center center no-repeat !important;
    background-size: cover!important;
}

.team-gain .block-icons-item > div {
    background: #FFFFFF;
}

.team-gain .block-icons-item h3 {
    color: #262731;
}

.team-gain .block-icons-item p {
    color: #262731;
}

.implementation-img {
    background: url('/img/design/img-training.jpg') center center no-repeat;
    background-size: cover;
}

.system-adoption {
    background: url('/img/design/img-system-adoption.jpg') center center no-repeat;
    background-size: cover;
}


/*Marine data building page*/

.marine-data-building {
    background: url('/img/design/bg-marine-data-building.jpg') center center no-repeat;
    background-size: cover;
}

.about-marine-data-building  {
   background: #ECEEF1;
}

.about-marine-data-building h2 {
    margin-bottom: 40px;
}

.marine-data-building-img {

    background: url('/img/design/img-what-marine-data-building-is.jpg') center center no-repeat;
    background-size: cover;
    display: block;
    margin: 0  auto;
}

.about-building-block {
    margin-top: 30px;
}

.about-building-block > div {
    background: #ffffff;
    padding: 28px 20px;
    border-radius: 16px;
    height: 100%;
}

.about-building-block > div > div {
    position: relative;
    padding-left: 15px;
    min-height: 100%;
}

.about-building-block > div > div:before {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 1px;
    background: #BF1818;
}

.about-building-block h3 {
    font-size: 18px;
    font-weight: 500;
}

.about-building-block p {
    color: #606060;
    font-weight: 400;
    line-height: 120%;
}

.data-building-required .ul {
    background: url('/img/design/img-marine-data-building.jpg') center center no-repeat;
    background-size: cover;
    min-height: 450px;
}

.data-building-carousel-wrap {
    background: #1A325F;
    padding-top: 80px;
    padding-bottom: 80px;
}

.data-building-carousel-wrap h2 {
   color: #ffffff;
}

#data-building-carousel .carousel-indicators {
    position: relative;
    min-height: 100%;
    margin-left: 0;
    margin-right: 0;
}

#data-building-carousel .carousel-indicators {
    position: relative;
    min-height: 100%;
    margin-left: 0;
    margin-right: 0;
}

#data-building-carousel{
  width: 100%;
}

#data-building-carousel .custom-indicators {
    margin-top: 30px;
}

#data-building-carousel img {
    display: block;
    border-radius: 16px;
}

#data-building-carousel .carousel-indicators [data-bs-target] {
    position: relative;
    top:0;
    left: 0;
    width: 100%;
    text-indent: unset;
    min-height: 100%;
    height: 100%;
    background: transparent;
    color: #ffffff;
    display: none;
    transition: .3s;
}

#data-building-carousel .carousel-indicators [data-bs-target].active {
    display:block;
}

#data-building-carousel .carousel-indicators [data-bs-target] h3 {
    color: #ffffff;
    font-weight: 500;
    padding-top: 30px;
    line-height: 100%;
    font-size: 20px;
}

#data-building-carousel .carousel-indicators [data-bs-target] p {
    font-weight: 300;
    color: #ffffff;
    font-size: 16px;
    line-height: 120%;
    padding-top: 5px;
}

#data-building-carousel .carousel-indicators [data-bs-target]:before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    height: 2px;
    width: 100%;
}

#data-building-carousel .carousel-indicators [data-bs-target].active:after{
    content: '';
    position: absolute;
    top:-1px;
    left: 0;
    background: #ffffff;
    height: 2px;
    width: 100%;
    border-radius: 100%;
}

.marine-data-operational-intelligence {
    background: #ffffff;
    color: #262731;
}

.marine-data-operational-intelligence h2 {
    color: #262731;
}

.marine-data-operational-intelligence h3 {
    color: #262731;
}

.marine-data-operational-intelligence p {
    color: #262731;
}

.marine-data-building-bottom {
    background: url('/img/design/img-marine-data-migration-bottom.jpg') center center!important;
    background-size: cover;
}

@media(min-width: 768px) {

    #data-building-carousel .carousel-indicators [data-bs-target] {
        display: block;
    }

}

@media(min-width: 992px) {
    .about-marine-data-building h2 {
        margin-bottom: 60px;
    }

}
@media(min-width: 1200px) {

    .about-building-block h3 {
        font-size: 24px;
    }

    .data-building-carousel-wrap {
        padding-top: 120px;
        padding-bottom: 120px;
    }

}
@media(min-width: 1400px) {

    .about-building-block {
        margin-top: 30px;
    }

    .about-building-block h3 {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .about-building-block > div {
        background: #ffffff;
        padding: 47px 24px;
    }

    #data-building-carousel .custom-indicators {
        margin-top: 50px;
    }

}


.form-control {
    display: block;
    width: 100%;
    height:auto;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    color: #000000;
    background-color: #F1F1F1;
    background-clip: padding-box;
    border: 0;
    border-radius: 0;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    outline: none;
    box-shadow: none;
    margin-bottom: 20px;
}

label {
    margin-bottom: 0;
}

.form-control::placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control::placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control::-ms-input-placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control::-webkit-input-placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control:-moz-placeholder {
    color: #B5B5B5;
    opacity: 1;
}

.form-control::-moz-placeholder{
    color: #B5B5B5;
    opacity: 1;
}

.form-control:focus {
    outline: none;
    box-shadow: none;
    border: none;
    background: #F1F1F1;
    color:#000000;
}

textarea {
    resize: none;
}


/*Custom Development page*/

.custom-development {
    background: url('/img/design/banner-custom-development.jpg') center center no-repeat;
    background-size: cover;
}

.custom-development-what-build{
    background: rgba(195, 199, 205, 0.90);
    padding-top: 80px;
    padding-bottom: 80px;
}

.custom-development-what-build h2 {
    color: #262731;
}

.custom-development-what-build .how-we-think-block > div {
   background: #262731;
    padding: 35px 25px;
}

.custom-development-what-build .how-we-think-block > div h3 {
    font-size: 16px;
    font-weight: 400;
    color: #F4F4F4;
}

.custom-development-what-build .how-we-think-block > div span {
    font-size: 24px;
    font-weight: 500;
}

.custom-development-what-build .how-we-think-block p {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    line-height:20px;
}

#custom-development-carousel-lg .list-group {
    border-left: 2px solid #B5B5B5;
    border-radius: 0;
}

#custom-development-carousel-lg .list-group-item {
    background: transparent;
    border: 0;
    transform: translateX(-2px);
    transition: .3s;
    border-radius: 0;
    min-height: 140px;
    font-weight: 400;
    padding: 20px 30px;
    position: relative;
}

#custom-development-carousel-lg .list-group-item span {
    display: block;
    color: #B5B5B5;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

#custom-development-carousel-lg .list-group-item.active-custom-dev-item {
    border: 0;
    background: transparent !important;
    min-height: 140px;
}

#custom-development-carousel-lg .list-group-item.active-custom-dev-item:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    border-radius: 90px;
    background: #262731!important;
}

#custom-development-carousel-lg .list-group-item+.list-group-item.active-custom-dev-item {
    margin-top: 0;
    transform: translate(-2px,-3px)!important;
}


#custom-development-carousel-lg .list-group-item.active-custom-dev-item span {
    color: #262731;
    line-height: 20px;
}

#custom-development-carousel-lg .carousel-item img {
    display: block;
    min-width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
}


#custom-development-carousel-xs .custom-indicators {
    position: absolute;
    top: 280px;
    bottom: auto;
    margin-bottom: 0;
}

#custom-development-carousel-xs .custom-indicators [data-bs-target] {
    width: 40px;
    background: #262731;
    border: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex: 1 0 0;
    border-radius: 25px;
    margin-left: 0;
    margin-right: 0;
}

#custom-development-carousel-xs .custom-indicators .active {
    opacity: 1 !important;
}

#custom-development-carousel-xs .custom-indicators {
    background: #B5B5B5;
    margin-left: 0;
    margin-right: 0;
    border-radius: 25px;
}

#custom-development-carousel-xs .carousel-indicators {
    border-radius: 16px;
    margin-right: 5px;
    margin-bottom: 15px;
    margin-left: 5px;
    left: 0;
}

#custom-development-carousel-xs .carousel-item img {
    height: 250px;
    object-fit: cover;
    border-radius: 20px;
}

#custom-development-carousel-xs .carousel-item div {
    padding: 65px 5px 1px 5px;
    text-align: left;
    min-height: 220px;
}

.custom-development-partners {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #ECEEF1;
}

.custom-block-item {
    margin-bottom: 30px;

}

.custom-block-item:last-child {
    margin-bottom: 0;
}

.custom-block-item h3{
    margin-bottom: 15px;
    padding-left: 15px;
    position: relative;
    font-weight: 500;
    font-size: 20px;
}

.custom-block-item p {
    font-size: 16px;
    font-weight: 400;
    color: #606060;
    line-height: 120%;

}

.custom-block-item h3:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #BF1818;
}

.custom-development-architecture-img {
    min-height: 300px;
    background: url('/img/design/img-custom-development-architecture.jpg') center center no-repeat;
    background-size: cover;
    margin-top: 30px;
    border-radius: 16px;
}

.custom-development-architecture .about-building-block > div {
    background: #262731;
    color: #ffffff;
    height: 100%;
}


.custom-development-architecture .about-building-block > div>div {

    min-height: 100%;
}


.custom-development-architecture .about-building-block h3 {
    color: #ffffff;
}

.custom-development-architecture .about-building-block p {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

.custom-development-software {
    background: url('/img/design/img-custom-development-software.jpg') center center no-repeat;
    background-size: cover;
}

.carousel-small strong {
    display: block;
    margin-top: 35px;
    margin-bottom: 12px;
    font-size: 20px;
}

.carousel-large strong {
    display: block;
    margin-bottom: 12px;
    font-size: 20px;
}
.carousel-large strong {
    display: block;
    margin-bottom: 12px;
    font-size: 20px;
    opacity: 0.5;
}
#custom-development-carousel-lg .list-group-item.active-custom-dev-item strong {

    display: block;
    margin-bottom: 12px;
    font-size: 20px;
    opacity: 1;

}


#custom-development-carousel-xs .carousel-item div {
    padding: 19px 0 1px 0;
    text-align: left;
    min-height: 220px;
}
@media(min-width: 768px) {

    .custom-development-what-build .how-we-think-block > div {
        padding: 30px 15px;
    }

    #custom-development-carousel-xs .carousel-indicators {
        margin-right: 30px;
        margin-left: 30px;
    }

    #custom-development-carousel-xs .carousel-item div {
        padding: 5px 29px 1px 29px;
        min-height: 180px;
    }

    .carousel-small strong {
        margin-top: 50px;
    }

}

@media(min-width: 992px) {

    .custom-development-what-build .how-we-think-block > div {
        padding: 35px 25px;
    }

    #custom-development-carousel-lg .list-group-item {
        padding: 20px 50px;
    }
}

@media(min-width: 1200px) {

    .custom-development-standard h2 {
        width: 90%;
    }

    .custom-development-what-build {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .custom-development-partners {
        padding-top: 120px;
        padding-bottom: 120px;
    }


}

@media(min-width: 1400px) {
    .custom-development-standard h2 {

        width: 90%;
    }

    .custom-development-architecture-img {
        min-height: 500px;
        background-size: 110% auto;
        background-position: center 10%;
        background-repeat: no-repeat;
        margin-top: 60px;
    }


}


/*Solutions page*/

.solutions {
    background: url('/img/design/banner-solutions.jpg') center center no-repeat;
    background-size: cover;
}

.solution-support .block-icons-item > div {
    background: #ECEEF1;
    border-radius: 16px;
    padding: 28px 20px;
}

.solution-support h2 {
    margin-bottom: 40px;
}

.solution-support .block-icons-item > div h3 {
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #262731;
}

.solution-support .block-icons-item > div p {
    font-size: 16px;
    font-weight: 400;
    color: #262731;
}

.solution-support h2 {
    margin-bottom: 20px;
}

.solutions-why {
    background: url('/img/design/img-solution-why.jpg') center center no-repeat;
    background-size: cover;
}

.solutions-why h2{
   color: #ffffff;
}

.solutions-why h3{
   color: #ffffff;
}

.solutions-why .list-why-choose h3 {
    font-size: 22px;
}

.solutions-why p{
   color: #F4F4F4;
}

.solutions-service-lifecycle {
    background: url('/img/design/img-solutions-service-lifecycle.jpg') center center no-repeat;
    background-size: cover;
}

.solutions-service-lifecycle .fleet-xs-block > div {
    background: rgba(38, 39, 49, 0.9);
    backdrop-filter:  blur(10px);
}

.solutions-service-lifecycle   #fleetCarousel .list-group-item {
    height: 60px;
}

.solutions-service-lifecycle  #fleetCarousel .list-group-item.active-fleet:before {
    height: 60px;

}

.solutions-delivered {
    background: #ffffff;
}

.solutions-delivered {
    background: #ffffff;
}

.solutions-delivered .how-we-think-block > div {
    background: rgba(195, 199, 205, 0.90);
    padding: 35px 25px;
}

.solutions-delivered .how-we-think-block > div {
    background: rgba(195, 199, 205, 0.90);
    padding: 35px 25px;
}

.solutions-delivered .how-we-think-block > div h3 {
    font-size: 16px;
    font-weight: 400;
    color: #262731;
}

.solutions-delivered .how-we-think-block > div p {
    font-size: 16px;
    font-weight: 500;
    color: #262731;
}

.solutions-ready-to-talk {
    background: url('/img/design/img-solutions-ready-to-talk.jpg') center center no-repeat;
    background-size: cover;
}

.solutions-ready-to-talk {
    background: url('/img/design/img-solutions-ready-to-talk.jpg') center center no-repeat;
    background-size: cover;
}

@media(min-width: 768px) {

    .solution-support h2 {
        width: 74%;
    }

    .solutions-service-lifecycle #fleetCarousel .carousel-item > div {
        background: rgba(38, 39, 49, 0.69);
        backdrop-filter:  blur(10px);
    }

    .solutions-delivered h2 {
        width: 60%;
    }

    .solutions-delivered .how-we-think-block > div {
        padding: 35px 18px;
    }

}

@media(min-width: 992px) {
    .solution-support h2 {

        width: 74%;
    }

    .solutions-delivered .how-we-think-block > div {
        padding: 35px 25px;
    }
}

@media(min-width: 1200px) {
    .solution-support .block-icons-item > div h3 {
        font-size: 20px;
    }

    .solutions-service-lifecycle {
        padding-top: 150px;
        padding-bottom: 150px;
    }
}

@media(min-width: 1400px) {
    .solutions-ready-to-talk h2{
        width: 100%;
    }
}


/*Privacy Policy page*/

.inform-block-page{
    padding-top: 20px;
}

.inform-block-page-left {
    top:50px
}

.site-privacy-menu .list-group-item {
    padding: 18px 0;
    border: none;
    border-bottom: 1px solid #dee2e6;
    color: rgba(96, 96, 96, 0.51);
    background: transparent;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
}

.site-privacy-menu .list-group-item-action:not(.active) {
    z-index: 1;
    color: rgba(96, 96, 96, 0.51)!important;
    text-decoration: none;
    background-color:transparent;
    border-bottom: 1px solid #dee2e6 !important;
}

.site-privacy-menu .list-group-item-action:not(.active) .site-menu-number {
    color: rgba(96, 96, 96, 0.53) !important;
    font-weight:500;
}

.site-privacy-menu .list-group-item-action:not(.active):hover {
    z-index: 1;
    color: #262731;
    text-decoration: none;
    background-color:transparent;
    border-bottom: 1px solid #BF1818 !important;
}

.site-privacy-menu .list-group-item.active {
    color: #262731!important;
    background-color: transparent !important;
    border-bottom: 1px solid #BF1818 !important;
}

.site-menu-number {
    font-size: 14px;
    color: #ccc;
}

.site-privacy-menu .list-group-item.active .site-menu-number {
    color: #BF1818!important;
    font-weight: 700;
}

.inform-block-item h2 {
    font-size: 28px;
    padding-bottom: 10px;
    padding-top: 40px;
    margin-bottom: 0;
}

.inform-block-item:first-child h2 {
   padding-top: 20px;
}

.site-accent-number {
    color: #BF1818;
    margin-right: 10px;
}

.inform-block-item p {
    font-size: 16px;
    line-height: 20px;
    color: #606060;
    font-weight: 400;
    margin-bottom: 15px;
}

.inform-block-item p strong {
    font-size: 16px;
    color: #262731;
    font-weight: 500;
}

.inform-block-item h3 {
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 15px;
    color: #262731;
    font-weight: 500;
}

.inform-block-item p a {
    font-size: 16px;
    color:  #606060;
    text-decoration: none;
    border-bottom: 1px solid #606060;
    transition: .3s;
}

.inform-block-item p a:hover {
    color: #262731;
    border-bottom: 1px solid #262731;
}

.inform-block-page ul{
    padding-left: 28px;
    margin-bottom: 25px;
}

.inform-block-page ul li {
    font-weight: 400;
    color: #606060;
    margin-bottom: 12px;
}

.wrap-banner.without-banner {
    min-height: 0!important;
}

@media(min-width: 768px) {  }

@media(min-width: 992px) {

    .inform-block-item h3 {
        font-size: 23px;
    }

}

@media(min-width: 1400px) {
    .inform-block-item h2 {
        font-size: 32px;
    }

}


/*Retronet FMS page*/

.retronet-fms {
    background: url('/img/design/banner-1.jpg') center center no-repeat;
    background-size: cover;
}

.overview-block {
    background: #F4F4F4;
    border-radius: 16px;
    margin-top: 60px ;
    margin-left: 0;
    margin-right: 0;
}

.overview-block-item  {
   padding: 15px 5px;
    margin-left: 0;
    margin-right: 0;
}

.overview-block-img img {
    display: block;
    border-radius: 16px;
}

.overview-block-item:first-child  {
   padding-top: 30px;
}

.overview-block-item:last-child  {
   padding-bottom: 30px;
}

.overview-block-item img {
    display: block;
    width: 30px;
    height: 30px;
}

.overview-block-item h3 {
    margin-bottom: 0;
    color: #262731;
    font-size: 20px;
    font-weight: 500;
    margin-left: 7px;
}

.overview-block-item p {
    margin-bottom: 0;
    color: #606060;
    font-size: 16px;
    font-weight: 400;
    padding-top: 12px;
}

.retronet-fms-key-benefits {
    padding-top: 100px;
    padding-bottom: 100px;
    background: url('/img/design/img-retronet-fms-key-benefits-xs.jpg') center left no-repeat;
    background-size: cover;
}
.retronet-fms-key-benefits  #fleetCarousel .list-group-item {
    height: 60px;
}

.retronet-fms-key-benefits #fleetCarousel .list-group-item.active-fleet:before {
    height: 60px;

}
.h-number {
    display: block;
    font-weight: 500;
    font-size: 38px;
    line-height: 100%;
    padding-top: 0;
    padding-bottom: 12px;
    color: #BF1818;
}

.retronet-fms-key-benefits .fleet-xs-block > div {
    background: rgba(79, 83, 89, 0.56);
    backdrop-filter: blur(4px);

}

.retronet-fms-key-benefits .fleet-xs-block > div h3{
    font-size: 16px;
    font-weight: 400;
}

.retronet-fms-control-item  {
    margin-bottom: 25px;
}

.retronet-fms-control-item > div {
    background: #ECEEF1;
    border-radius: 16px;
    padding: 24px 16px;
    min-height: 100%;
}

.retronet-fms-control-item > div h3 {
    color: #262731;
    font-size: 20px;
    margin-bottom: 16px;
    padding-left: 3px;
}

.retronet-fms-control-item > div p {
    color: #606060;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 3px;
    font-weight: 400;
    line-height: 20px;
}

.retronet-fms-control-item > div img {
    display: block;
    border-radius: 16px;
}

.retronet-fms-operational-control {
    padding-top: 80px;
    padding-bottom: 80px;
}

.procurement-block {
    background: #262731;
}

.retronet-fms-financial-claims {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #ECEEF1;
}

.financial-claims-row {
    margin-bottom: 20px;
    margin-top: 0;
}

.financial-claim-text {
    background: #FFFFFF;
    padding: 20px;
    border-radius: 16px;
    min-height: 100%;
}

.retronet-fms-financial-claims ul li{
   color:  #262731;
}

.retronet-fms-financial-claims strong {
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}
.retronet-fms-financial-claims .ul ul li:before {
    top: 10px;
}

.retronet-fms-financial-claims img{
    display: block;
    border-radius: 16px;
}

.retronet-fms-analytics-img {
    background: url('/img/design/img-retronet-fms-financial-analytics.jpg') center center no-repeat;
    background-size: cover;
}

.retronet-fms-analytics-text .about-building-block >div {
    background: #F6F7F9;
    height: 100%;
}

.retronet-fms-safety {
    background: rgba(195, 199, 205, 0.89);
    padding-top: 80px;
    padding-bottom: 80px;
}

.retronet-fms-safety-left {
    background: transparent;
}

.retronet-fms-safety-right {
    background: transparent;
    border-radius: 16px;
    padding: 0;
}

.site-scroll-window {
    height: 500px;
    overflow-y: scroll;
    position: relative;
    scroll-behavior: smooth;
    border-radius: 16px;
    background: #ffffff;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0;
}

.site-scroll-window::-webkit-scrollbar {
    display: none;
}

.site-safety-menu .list-group-item {
    padding: 15px 0;
    background: transparent !important;
    border: none;
    border-bottom: 2px solid #eee;
    color: #666;
    font-size: 14px;
    transition: 0.3s;
    font-weight: 500;
}

.site-safety-menu .list-group-item.active {
    color: #000 !important;
    border-bottom: 1px solid #BF1818!important;
    font-weight: 500;
}

.site-menu-number {
    font-size: 16px;
    color: rgba(96, 96, 96, 0.81);
}

.site-safety-menu .list-group-item.active .site-menu-number{
    color: #BF1818;
}

.site-safety-menu .list-group-item-action:not(.active):hover {
    color: #000!important;
    border-bottom: 1px solid #BF1818!important;
    font-weight: 500;
}

.site-safety-menu .list-group-item-action:not(.active)  {
   color: #666!important;
}

.site-safety-menu .list-group-item-action:not(.active) .site-menu-number {
   color: #666!important;
}

.site-safety-menu .list-group-item-action:not(.active):hover .site-menu-number{
    color: #BF1818!important;
}

.site-safety-menu.list-group-flush>.list-group-item:last-child {
    border-bottom-width: 1px!important;
}

.site-safety-card {
    padding: 20px 20px 7px 20px;
    height: 100%;
    margin-bottom: 0;
}

.site-safety-card h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 15px;
    padding-top: 16px;
}

.site-safety-card:first-child h3 {
    padding-top: 1px;
}

.site-safety-card p {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 24px;
    color: #262731;
}

.site-safety-card img {
   display: block;
    margin: 20px auto 0 auto;
}

.site-safety-card > div {
    min-height: 100%;
    border-top: 1px solid rgba(195, 199, 205, 0.4);
}

.site-safety-card:first-child > div {
    border-top: none;
}

.site-safety-menu .list-group-item {
    padding: 15px 0;
    background: transparent !important;
    border: none;
    border-bottom: 1px solid rgba(96, 96, 96, 0.8);
    color: rgba(96, 96, 96, 0.8);
    font-size: 16px;
    transition: 0.3s;
}

.retronet-fms-communication .retronet-fms-control-item > div{
    background: rgba(38, 39, 49, 0.96);
}

.retronet-fms-communication .retronet-fms-control-item > div h3 {
    color: #ffffff;
}

.retronet-fms-communication .retronet-fms-control-item > div p {
    color: #ffffff;
}

.retronet-fms-crew {
    background: #ECEEF1;
}
.resources-text.text-block-icons.retronet-fms-crew{
    background: #ECEEF1;
}

.retronet-fms-crew .block-icons-item > div{
    background: #FFFFFF;
}

.retronet-fms-crew .block-icons-item h3 {
    color: #262731;
    font-weight: 500;
}

.retronet-fms-crew .block-icons-item p {
    color: #606060;
}

.retronet-fms-crew .block-icons-item > div img{
    width: 28px;
    height: 28px;
}

.ready-to-streamline {
    background: url('/img/design/img-retronet-fsm-ready-streamline.jpg') center center no-repeat;
    background-size: cover;
}

@media(min-width: 768px) {

    .retronet-fms-key-benefits {
        background: url('/img/design/img-retronet-fms-key-benefits.jpg') center center no-repeat;
    }

    .retronet-fms-key-benefits #fleetCarousel .carousel-item > div {
        padding: 20px 20px;
        border-radius: 16px;
        min-height: 199px;
        margin-left: 10px;
        margin-right: 10px;
        background: rgba(38, 39, 49, 0.62);
        backdrop-filter: blur(4px);
    }

    .retronet-fms-key-benefits #fleetCarousel .carousel-item > div h3{
        font-size: 16px;
        font-weight: 400;
    }

    .retronet-fms-control-row {
        padding-top: 20px
    }

    .retronet-fms-control-item > div h3 {
        color: #262731;
        font-size: 28px;
    }

    .financial-claim-text {

        padding: 40px 30px;

    }

    .site-scroll-window {
        height: 522px;
    }

    .site-safety-card h3 {
        padding-top: 15px;
    }

    .retronet-fms-control-item > div p {
        min-height: 79px;
        margin-bottom: 6px;
    }

    .retronet-fms-financial-claims strong {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .retronet-fms-safety-right {
        padding: 0 0 0 40px;
    }



}

@media(min-width: 992px) {

    .site-safety-card img {
        margin: 0 auto 0 auto;
    }

    .site-scroll-window {
        height: 370px;
    }

    .site-safety-menu .list-group-item {
        padding: 12px 0;
        font-size: 15px;
    }
}

@media(min-width: 1200px) {
    .retronet-fms-key-benefits {
        padding-top: 150px;
        padding-bottom: 150px;
    }

    .h-number {
        font-size: 54px;
    }

    .retronet-fms-key-benefits #fleetCarousel .carousel-item > div p {
       font-size: 16px;
    }

    .retronet-fms-operational-control {
        padding-top: 120px;
        padding-bottom: 100px;
    }

    .retronet-fms-control-row {
        padding-top: 30px
    }

    .retronet-fms-control-item > div {
        padding: 32px 21px;

    }

    .retronet-fms-control-item > div p {
        min-height: 1px;
        margin-bottom: 20px;
    }

    .retronet-fms-financial-claims {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .financial-claims-row {
        margin-bottom: 30px;
    }
    .retronet-fms-safety {
        padding-top: 120px;
        padding-bottom: 120px;
    }

}


@media(min-width: 1400px) {

    .retronet-fms-safety-right {
        padding: 0 0 0 120px;
    }

    .site-safety-card h3 {
        font-size: 28px;
    }

    .site-scroll-window {
        height: 430px;
    }

    .site-safety-menu .list-group-item {
        padding: 15px 0;
        font-size: 16px;
    }

    .site-safety-card p {
        font-size: 20px;
    }

    .overview-block-item {
        padding: 15px 15px;
    }

}


/*Retronet RTMS page*/

.retronet-rtms {
    background: url('/img/design/RTMS-banner-last.jpg') center bottom no-repeat;
    background-size: cover;
}

.retronet-rtms-operations-img {
    background: url('/img/design/img-retronet-rtms-operation.jpg') center center no-repeat;
    background-size: cover;
}

.text-block-icons.resources-text.retronet-rtms-what {
    background: #1A325F;
}

.retronet-rtms-what h2 {
    color: #ffffff;
}

.retronet-rtms-what .block-icons-item > div {
    background: #F6F7F9;
}

.retronet-rtms-what .block-icons-item > div img {
    width: 48px;
    height: 48px;
}

.retronet-rtms-support-terminal .ul li {
    font-size: 16px;
    margin-bottom: 20px;
}

.retronet-rtms-support-terminal strong {
    font-size: 22px;
    margin-bottom: 21px;
}

.how-we-think.retroner-rtms-key-platform {
    background: url('/img/design/img-retronet-rtms-key-platform.jpg') center center no-repeat;
    background-size: cover;
}

.how-we-think.retroner-rtms-key-platform .how-we-think-block > div {
    background: rgba(38, 39, 49, 0.51);
    backdrop-filter: blur(6px);
}

.retronet-rtms-operational {
    background: #F4F4F4;
}

.retronet-rtms-compliance .retronet-fms-control-item > div {
    background: #C3C7CD;
}

.retronet-rtsm-operations-img {
    background: url('/img/design/img-retronet-rtms-coordinated.jpg') center center no-repeat;
    background-size: cover;
}

.retroner-rtsm-upgrade {
    background: url('/img/design/img-retronet-rtms-upgrade.jpg') center center no-repeat;
    background-size: cover;
}

@media(min-width: 768px) {
    .retronet-rtms-support-terminal strong{
        font-size: 20px;
        margin-bottom: 10px;
    }
}

@media(min-width: 992px) {
    .retronet-rtms-support-terminal .ul li {
        margin-bottom: 14px;
    }
    .retronet-rtms-support-terminal strong {
        font-size: 20px;
        margin-bottom: 16px;
    }
}

@media(min-width: 1200px) {
    .retronet-rtms-support-terminal strong {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .retronet-rtms-support-terminal .ul li {
        margin-bottom: 17px;
        font-size: 17px;
    }
}

@media(min-width: 1400px) {

    .retronet-rtms-support-terminal .ul li {
        margin-bottom: 20px;
        font-size: 20px;
    }
}

/*Retronet dcs*/

.retronet-dcs {
    background: url('/img/design/DCS-banner.jpg') center center no-repeat;
    background-size: cover;
}
.retronet-dcs-lifecycle-img {
    background: url('/img/design/img-retronet-dcs-engineering.jpg') center center no-repeat;
    background-size: cover;
}

.retronet-dcs-operationals-benefits {
    background: url('/img/design/img-retronet-dcs-operational.jpg') center center no-repeat!important;
    background-size: cover!important;
}

.retronet-dcs-operationals-benefits h2 {
   color: #ffffff;
}

.retronet-dcs-operationals-benefits .block-icons-item > div {
    background: rgba(38, 39, 49, 0.48);
    backdrop-filter: blur(5px);
}

.retronet-dsc-document-architecture {
    padding-top: 80px;
    padding-bottom: 80px;
}

.retronet-dcs-engineering-documentation{
    background: url('/img/design/img-retronet-dcs-control.jpg') center center no-repeat;
    background-size: cover;
}
@media(min-width: 1200px) {
    .retronet-dsc-document-architecture {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}


/*Contacts us page*/

.contact-us {
    background: #262731;
}
.contact-form-section {
    background: #262731;
    padding-top: 40px;
    padding-bottom: 60px;
    color: #ffffff;
}

.contact-section-title {
    font-size: 36px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 40px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
}

.detail-label {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 12px;
}

.detail-value,
.detail-value a {
    font-size: 15px;
    font-weight: 400;
    color: #ECEEF1;
    line-height: 1.5;
    margin: 0;
    text-decoration: none;
    transition: color 0.3s;
}

.detail-value a:hover {
    color: #ee2626;
}

.bottom-border-form {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.field-label {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}

.field-input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-size: 15px;
    padding: 5px 0 10px 0;
    outline: none;
    transition: border-color 0.3s ease;
}

.field-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.field-input:focus {
    border-bottom-color: #ffffff;
}

.contact-form-section h2 {
    color: #ffffff;
}

@media (min-width: 992px) {

    .contact-form-section {
        padding-top: 80px;
        padding-bottom: 95px;
    }

    .contact-section-title {
        font-size: 48px;
        margin-bottom: 60px;
    }

    .contact-details {
        margin-bottom: 0;
    }

    .detail-label {
        font-size: 20px;
    }
}

@media (min-width: 1440px) {
    .contact-form-section {
        padding-top: 80px;
        padding-bottom: 120px;
    }
}


/*Page 404*/

.page-404{
    display: flex;
    flex-direction: column;
    background: url('/img/design/banner-404.jpg') center center no-repeat;
    background-size: cover;
}


/*Request information-page*/

.request-information {
    background: #262731;
}

.inquiries-text-block  h2{
    color: #ffffff;
}
.inquiries-section {
    background-color: #262731;
    color: #ffffff;
    padding-top: 60px;
    padding-bottom: 60px;
}

.inquiries-text-block {
    margin-bottom: 50px;
}

.inquiries-title {
    font-size: 38px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 30px;
    line-height: 1.1;
    color: #ffffff;
}

.inquiries-subtitle {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 35px 0;
    max-width: 420px;
}

.inquiries-list-header {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
}

.inquiries-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inquiries-list li {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    padding-left: 20px;
}

.inquiries-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 7px;
    height: 7px;
    background-color: #c92323;
}

.inquiries-form {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.form-field-group {
    display: flex;
    flex-direction: column;
}

.field-label {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
    padding-left: 2px;
}

.field-control {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    padding: 8px 2px 12px 2px;
    outline: none;
    border-radius: 0;
    transition: border-color 0.3s ease;
}

.field-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.field-control:focus {
    border-bottom-color: #ffffff;
}

@media (min-width: 992px) {
    .inquiries-section {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .inquiries-title {
        font-size: 48px;
        margin-bottom: 40px;
    }

    .inquiries-text-block {
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    .inquiries-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}


/* ---index steps --- */

.step-item {
    margin-bottom: 10px;
}

.step-header {
    background-color: #f6f7f9;
    padding: 18px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.step-header:hover {
    background-color: #e2e4e8;
}

.step-header.active {
    background-color: #c3c7cd;
}

.step-title {
    font-size: 16px;
    font-weight: 400;
    color: #262731;
}

.step-icon {
    position: relative;
    width: 20px;
    height: 20px;
}

.step-icon::before,
.step-icon::after {
    content: '';
    position: absolute;
    background-color: #262731;
    transition: transform 0.3s ease;
}

.step-icon::before { top: 0; left: 9px; width: 2px; height: 20px; }
.step-icon::after { top: 9px; left: 0; width: 20px; height: 2px; }

.step-header.active .step-icon::before { transform: rotate(45deg); }
.step-header.active .step-icon::after { transform: rotate(45deg); }

.step-body-inner {
    background-color: #f6f7f9;
    border-radius: 12px;
    padding: 25px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.step-content-pane {
    background-color: #f6f7f9;
    border-radius: 12px;
    padding: 40px;
}

.step-body-inner h3,
.step-content-pane h3 {
    font-size: 20px;
    font-weight: 400;
    color: #262731;
    margin-top: 0;
    margin-bottom: 15px;
}

.step-body-inner p,
.step-content-pane p {
    font-size: 15px;
    color: #606060;
    line-height: 1.5;
    margin-bottom: 25px;
}

.btn-learn-more {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid rgba(195, 199, 205, 0.7);
    border-radius: 10px;
    color: #606060;
    font-size: 15px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-learn-more:hover {
    background-color: #606060;
    color: #ffffff;
}

.page-404 h1 {
    width: 100%!important;
    text-align: center;
}

.page-404  p{
    width: 100%!important;
    text-align: center;
}
.page-404 .banner-wrap {
    display: flex;
    flex-grow:1;
    align-items: center;
}

.page-404 .row {
    width: 100%!important;
    justify-content:center ;
}

.page-404 .row .col-xl-8 {
   text-align: center!important;
   width: 100%!important;
}

.page-404 .row div {
   text-align: center!important;
   width: 100%!important;
}

.page-404  .banner {
    margin-top: -30px !important;
    display: flex;
    justify-content: center;
}

@media (min-width: 992px) {
    .how-we-think.retroner-rtms-key-platform .how-we-think-block > div {
        padding: 30px 25px;
    }
}

.team-gain .block-icons-item > div {
    background:#262731;

}

.team-gain .block-icons-item > div img {
    filter: invert(100%) brightness(150%);
}

.team-gain .block-icons-item > div h3 {
    color: #ffffff;
}

.team-gain .block-icons-item > div p {
    color: #F4F4F4;
}


@keyframes growDown {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}
.animate__growDown {
    animation-name: growDown;
    transform-origin: top center;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

@keyframes myCustomOvershootScale {
    0% {
        opacity: 0;
        transform: scale(0)
    }
    70% {
        opacity: 1;
        transform: scale(var(--custom-overshoot, 1.15));
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate__myOvershootScale {

    --custom-overshoot: 1.15;
    animation-name: myCustomOvershootScale;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes revealAndScaleDown {
    0% {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: scale(var(--custom-overshoot, 1.2));
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: scale(1);
    }
}

.animate__revealAndScaleDown {
    --custom-overshoot: 1.2;
    animation-name: revealAndScaleDown;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;

    overflow: hidden;
}

.radius {
    border-radius: 16px!important;
}

/* --- Animations main icons --- */
/* --- icon 1 --- */
@keyframes flame-levitate {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-4px) scale(1.05);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

.custom-energy-icon svg {
    display: block;
    margin-bottom: 20px;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.custom-energy-icon svg .energy-flame {

    transform-origin: 50px 38px;
    transition: transform 0.4s ease;
}

.for-what:hover .custom-energy-icon svg {
    transform: scale(1.05);
}

.for-what:hover .custom-energy-icon svg .energy-flame {
    animation: flame-levitate 1.5s ease-in-out infinite;
}

/* --- icon 2 --- */

@keyframes spark-pulse-glow {
    0% {
        transform: scale(1) translate(0, 0);
    }
    50% {
        transform: scale(1.15) translate(3px, -3px);
    }

    100% {
        transform: scale(1) translate(0, 0);
    }
}

.custom-tech-icon svg {
    display: block;
    margin-bottom: 20px;

    transition: transform 0.4s ease, filter 0.4s ease;
}

.custom-tech-icon svg .tech-spark {
    transform-origin: 70px 24px;
    transition: transform 0.4s ease;
}

.for-what:hover .custom-tech-icon svg {
    transform: translateY(-1px);
}

.for-what:hover .custom-tech-icon svg .tech-spark {
    animation: spark-pulse-glow 1.4s ease-in-out infinite;
}

/*Icon 3*/

@keyframes ship-float-waves {
    0% {

        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-4px) rotate(1.5deg);
    }

    50% {

        transform: translateY(2px) rotate(-1deg);
    }
    75% {

        transform: translateY(-2px) rotate(1deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}


.custom-ship-icon svg {
    display: block;
    margin-bottom: 20px;

    transform-origin: 50% 90%;
    transition: transform 0.4s ease;
}

.for-what:hover .custom-ship-icon svg {
    animation: ship-float-waves 4s ease-in-out infinite;
}

/*icon 4*/
@keyframes data-blink {
    0%, 100% {
        transform: scale(1) translateY(0);
    }
    50% {

        transform: scale(1.03);
    }
}

.custom-cpu-icon svg {
    display: block;
    margin-bottom: 20px;
    transition: transform 0.4s ease;
}

.for-what:hover .custom-cpu-icon svg {
    transform: translateY(-5px);
}

.for-what:hover .custom-cpu-icon svg .data-node {
    animation: data-blink 1.2s ease-in-out infinite;
}

.for-what:hover .custom-cpu-icon svg .node-1 { animation-delay: 0s; }
.for-what:hover .custom-cpu-icon svg .node-2 { animation-delay: 0.3s; }
.for-what:hover .custom-cpu-icon svg .node-3 { animation-delay: 0.6s; }
.for-what:hover .custom-cpu-icon svg .node-4 { animation-delay: 0.9s; }


.wrap-banner.main {
    position: relative;
    overflow: hidden;
    background-color: #1A325F;
}

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

@media (max-width: 991px) {
    .banner-video {

        object-position: 50% center;
    }
}

.banner-overlay {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgb(2 10 15 / 64%) 1px, #010e1f5c 1px),
    linear-gradient(90deg, rgb(1 7 11 / 30%) 1px, #031c31 1px),
    radial-gradient(circle, rgba(0, 20, 66, 0.22) 0%, rgb(3 10 22 / 95%) 100%);
    background-size: 0 0,0 0, 100% 100%;
    background-position: center center;
}


.wrap-banner.main > nav,
.wrap-banner.main > .banner-wrap {
    position: relative;
    z-index: 10;
}

.floating-icons-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.floating-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    opacity: 0;
    animation: slowFadeIn 1.5s ease-out forwards;
}

.floating-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}


.icon-1 { top: 20%; left: 15%; animation-delay: 0.2s; }
.icon-2 { bottom: 25%; right: 15%; animation-delay: 0.6s; }
.icon-3 { top: 30%; right: 20%; animation-delay: 1.0s; }
.icon-4 { bottom: 20%; left: 20%; animation-delay: 1.4s; }
.icon-5 { top: 45%; right: 4%; animation-delay: 1.8s; }
.icon-6 { top: 12%; left: 40%; animation-delay: 2.2s; }
.icon-7 { bottom: 18%; right: 30%; animation-delay: 2.6s; }


.icon-1 svg { animation: microPulse 3s ease-in-out infinite 0.2s; }
.icon-2 svg { animation: microPulse 3s ease-in-out infinite 1.5s; }

.icon-3 svg path {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: trimPathAnim 4s ease-in-out infinite 1s;
}

.icon-4 svg {
    transform-origin: center center;
    animation: slowRotate 15s linear infinite;
}

@keyframes slowFadeIn {
    0%   { opacity: 0; }
    100% { opacity: .80; }
}

@keyframes microPulse {
    0%   { opacity: 1; transform: scale(1); }
    40%  { opacity: 0.4; transform: scale(0.95); }
    80%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes trimPathAnim {
    0%   { stroke-dashoffset: 1500; opacity: 0; }
    10%  { opacity: 1; }
    45%  { stroke-dashoffset: 0; }
    55%  { stroke-dashoffset: 0; }
    90%  { stroke-dashoffset: 1500; opacity: 1; }
    100% { stroke-dashoffset: 1500; opacity: 0; }
}

@keyframes slowRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes quietPulse {
    0%   { opacity: 0.5; transform: scale(0.98); }
    50%  { opacity: 0.8; transform: scale(1.1); }
    100% { opacity: 0.5; transform: scale(0.98); }
}

@media (min-width: 768px) {
    .floating-icon {
        position: absolute;
        width: 40px;
        height: 40px;
    }

    .icon-1 { top: 41%; left: 21%; animation-delay: 0.2s; }
    .icon-2 { bottom: 51%; right: 39%; animation-delay: 0.6s; }
    .icon-3 { top: 65%;right: 14%; animation-delay: 1.0s; }
    .icon-4 {  bottom: 25%;left: 30%; animation-delay: 1.4s; }
    .icon-5 {top: 63%; right: 81%; animation-delay: 1.8s; }
    .icon-6 {top: 33%; left: 9%; width: 30px; height: 30px;}
    .icon-7 { right: 10%; bottom: 10%; width: 30px; height: 30px;}
}

@media (min-width: 1400px) {
    .icon-3 { top: 56%;right: 22%; animation-delay: 1.0s; }
    .icon-1 {
        top: 34%;
        left: 26%;
        animation-delay: 0.2s;
    }

}

.icon-1 svg { animation: microPulse 3s ease-in-out infinite 0.2s; }
.icon-2 svg { animation: microPulse 3s ease-in-out infinite 1.5s; }

.icon-3 svg path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: trimPathAnim 4s ease-in-out infinite 1s;
}

.icon-4 svg {
    transform-origin: center center;
    animation: slowRotate 15s linear infinite;
}

.icon-5 svg { animation: microPulse 3s ease-in-out infinite 0.8s; }
.icon-6 svg { animation: quietPulse 3.5s ease-in-out infinite 0.5s; }
.icon-7 svg { animation: quietPulse 4s ease-in-out infinite 2s; }


.wrap-banner.main {
    position: relative;
    overflow: hidden;
    height: 100vh !important;
    min-height: 650px !important;
    background-color: #1A325F;
    display: block !important;
}

.wrap-banner.main .banner-wrap {
    height: calc(100vh - 120px) !important;
    position: relative;
    z-index: 10;
}

.wrap-banner.main .explore {
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    .wrap-banner.main .explore {
        bottom: 15px !important;
    }
}

.wrap-banner.main nav.navbar {
    position: relative !important;
    z-index: 9999 !important;
}



/* --- Oil & Energy Icon --- */

.for-what:hover .circle-anim-100 {
    stroke-dasharray: 183;
    stroke-dashoffset: 183;
    animation: drawCircle100 1.5s ease-out forwards;
}

@keyframes drawCircle100 {

    to { stroke-dashoffset: 0; }
}

.for-what:hover .lightning-anim-100 {
    transform-origin: 33.3px 33.3px;
    animation: lightningPulse100 3s infinite;
}

@keyframes lightningPulse100 {
    0%, 100% { transform: scale(1); opacity: 1; }
    5% { transform: scale(1.15); opacity: 0.8; }
    10% { transform: scale(0.95); opacity: 1; }
    15% { transform: scale(1.1); opacity: 0.9; }
    20% { transform: scale(1); opacity: 1; }
}

.drop-anim-100 {
    will-change: transform;
}

.for-what:hover .drop-anim-100 {
    animation: dropFloat100 3s ease-in-out infinite;
}

@keyframes dropFloat100 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/*Marine*/

.custom-ship-icon {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.for-what:hover .custom-ship-icon svg {
    transition: transform 1s ease;
}


.for-what:hover .ship-drive {
    animation: shipBounce 1.8s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes shipBounce {
    0% { transform: translateY(0px); }
    100% { transform: translateY(2.5px); }
}

.drop-pulse {
    will-change: transform;
}

.for-what:hover .drop-pulse {
    animation: dropBounce 0.9s ease-in-out infinite alternate;
}

@keyframes dropBounce {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-2px); }
}


/* --- Tech Solutions Icon --- */
.custom-tech-icon {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.tech-float {
    will-change: transform;
}

.for-what:hover .tech-float {
    animation: techLevitate 1.5s ease-in-out infinite alternate;
}

@keyframes techLevitate {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-4px); }
}

.tech-node {
    will-change: opacity, transform;
    transform-origin: center;
    transform-box: fill-box;
}


.for-what:hover .tech-node-1 { animation: dataBlink 1.5s infinite; }
.for-what:hover .tech-node-2 { animation: dataBlink 1.5s infinite 0.5s; }
.for-what:hover .tech-node-3 { animation: dataBlink 1.5s infinite 1.0s; }

@keyframes dataBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(0.3);
    }
}

.retronet-rtms-what ul li{
    margin-bottom: 10px;
    color: #606060;
}

.retroner-rtms-key-platform .how-we-think-block h3 {
    color: #BF1818;
}

.retroner-rtms-key-platform  .how-we-think-block p {

    font-size: 16px;
}


.banner-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}


.banner-video::-webkit-media-controls {
    display: none !important;
}