@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;
}

/* Universal "* { color }" reset removed: it set a colour on every element directly
   (specificity 0,0,0), beating inheritance — a footgun that made child elements
   ignore their parent's colour. The default text colour now lives on body (below)
   and inherits normally. */

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: #262731; /* was #121521; now matches the colour the removed universal reset gave every element, so no descendant text shifts */
    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 {
    /* Phase 4: the static circuit-board image was replaced by the #hero-network
       canvas. Solid dark base so the hero is a clean dark panel before/without JS. */
    background-color: #080c16;
}

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

/* ===========================================================================
   Phase 4 — Homepage products section (homepage body, main.tpl). Three
   independent, purpose-built products as distinct offerings; replaces the old
   "Our solutions" block that duplicated the hero cards. Light white section:
   product name dark (#262731), one-liner + Explore in brand red (#ef5350),
   description in #606060, capabilities as neutral pill tags. Responsive grid
   1 col (<600) -> 2 col (>=600) -> 3 col (>=992); whole card clickable via a
   stretched link.
   =========================================================================== */
.products {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #ffffff;
}

.products-title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.15;
    color: #262731;
}

.products-subline {
    margin: 0 0 36px;
    max-width: 680px;
    font-size: 17px;
    line-height: 1.5;
    color: #606060;
}

.products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    box-sizing: border-box;
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.product-card-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #f4f4f4;
}

.product-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease;
}

.product-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 24px;
}

.product-card-name {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    color: #262731;
}

.product-card-oneliner {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #ef5350;
}

.product-card-desc {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #606060;
}

.product-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.product-card-tags li {
    padding: 6px 12px;
    border-radius: 999px;
    background-color: #f4f4f4;
    color: #606060;
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
}

.product-card-link {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ef5350;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: gap .3s ease;
}

.product-card-arrow {
    color: #ef5350;
    font-size: 16px;
    line-height: 1;
    transition: transform .3s ease;
}

/* Stretched link: makes the whole card clickable */
.product-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
}

.product-card:hover {
    border-color: #d6d9df;
    box-shadow: 0 16px 40px rgba(18, 21, 33, 0.10);
    transform: translateY(-4px);
}

.product-card:hover .product-card-media img {
    transform: scale(1.04);
}

.product-card:hover .product-card-arrow {
    transform: translateX(4px);
}

.product-card-link:focus-visible {
    outline: 2px solid #ef5350;
    outline-offset: 3px;
}

/* Tablet: 2 columns (600-991) */
@media (min-width: 600px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns (>=992) */
@media (min-width: 992px) {
    .products {
        padding-top: 80px;
        padding-bottom: 70px;
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}

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

/* ===========================================================================
   Phase 4 — Homepage text sections: who-we-serve (industries strip),
   value (built for control), why-retrotech (differentiation). Text-forward,
   no image assets; light sections matching the site type scale and rhythm.
   Brand red #ef5350 used only as a thin top-accent on each item.
   .experience-title is the heading added to the reframed stats section.
   =========================================================================== */

/* --- Who we serve --- */
.who-we-serve {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #F6F7F9;
}

.serve-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    box-sizing: border-box;
}

.serve-item {
    box-sizing: border-box;
    padding-top: 18px;
    border-top: 2px solid #ef5350;
}

.serve-item h3 {
    font-size: 22px;
    line-height: 120%;
    margin-bottom: 10px;
    color: #262731;
}

.serve-item p {
    font-size: 16px;
    line-height: 140%;
    color: #606060;
    margin-bottom: 0;
}

.serve-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 36px;
    color: #ef5350;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: gap .3s ease;
}

.serve-link-arrow {
    color: #ef5350;
    transition: transform .3s ease;
}

.serve-link:hover .serve-link-arrow {
    transform: translateX(4px);
}

/* --- Built for control, not complexity --- */
.value {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #ffffff;
}

.value-intro {
    max-width: 760px;
    margin: 0 0 38px;
    font-size: 18px;
    line-height: 140%;
    color: #606060;
}

.value-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    box-sizing: border-box;
}

.value-item {
    box-sizing: border-box;
    padding-top: 18px;
    border-top: 2px solid #ef5350;
}

.value-item h3 {
    font-size: 22px;
    line-height: 120%;
    margin-bottom: 12px;
    color: #262731;
}

.value-item p {
    font-size: 16px;
    line-height: 150%;
    color: #606060;
    margin-bottom: 0;
}

/* --- Why Retrotech --- */
.why-retrotech {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #F6F7F9;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    box-sizing: border-box;
}

.why-item {
    box-sizing: border-box;
    padding-top: 18px;
    border-top: 2px solid #ef5350;
}

.why-item h3 {
    font-size: 20px;
    line-height: 120%;
    margin-bottom: 12px;
    color: #262731;
}

.why-item p {
    font-size: 16px;
    line-height: 150%;
    color: #606060;
    margin-bottom: 0;
}

/* Responsive grids: serve/value 1 -> 3 (>=768); why 1 -> 2 (>=600) -> 4 (>=992) */
@media (min-width: 600px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .serve-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .value-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .why-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Heading added to the reframed stats section ("Backed by real experience") */
.experience-title {
    text-align: center;
    margin-bottom: 40px;
}

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

    .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%);
    }

    .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%;
    }

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

    .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%;
}

#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;
}

@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;
    }



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

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

@media(min-width: 768px) {

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



    .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*/

.retro-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;
}

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

.retro-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;
}

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

}

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

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

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

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

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

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

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

.procurement-block {
    background: #262731;
}

.retro-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%;
}

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

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

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

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

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

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

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

.retro-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;
}

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

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

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

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

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

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

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

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

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

.retro-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);
}

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

@media(min-width: 768px) {

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



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

    .retro-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;
    }

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

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

    .retro-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) {
    .retro-fms-key-benefits {
        padding-top: 150px;
        padding-bottom: 150px;
    }

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

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

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

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

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

    }

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

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

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

}


@media(min-width: 1400px) {

    .retro-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*/

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

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

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

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

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

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

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

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

.how-we-think.retroner-rtms-key-platform {
    background: url('/img/design/img-retro-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);
}

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

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

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

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

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

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

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

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

@media(min-width: 1400px) {

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

/*Retronet dcs*/

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

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

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

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

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

.retro-dcs-engineering-documentation{
    background: url('/img/design/img-retro-dcs-control.jpg') center center no-repeat;
    background-size: cover;
}
@media(min-width: 1200px) {
    .retro-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;
}

.wrap-banner.main {
    position: relative;
    background-color: #080c16;
}

.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;
    /* Horizontal guard without trapping vertical content in a scroll box: clip X,
       keep Y visible so short/landscape viewports grow the page instead of
       clipping the headline/cards. */
    overflow-x: clip;
    overflow-y: visible;
    min-height: 100vh;          /* not a fixed height */
    background-color: #080c16;  /* dark base behind the canvas */
    display: flex;
    flex-direction: column;
}

/* The animated canvas fills the whole hero, behind the nav and content. */
.wrap-banner.main #hero-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
}

.wrap-banner.main .banner-wrap {
    flex: 1 1 auto;             /* fill the space below the nav */
    flex-direction: column;     /* BS5 d-flex + align-items-center are already applied */
    justify-content: flex-start; /* seat content in the upper-middle, not dead-center */
    position: relative;
    z-index: 10;
    /* padding-top nudges the (left-aligned) content up: 104px min clears the in-flow
       nav on short screens; 22vh seats it upper-middle on tall screens. Bottom space
       and the absolute .explore hint are unchanged. */
    padding: clamp(104px, 22vh, 260px) 0 clamp(70px, 9vh, 130px);
}

/* Homepage hero content: centered comfortable measure with fluid side padding;
   drop the shared .banner height:100% / margin-top so the content can center. */
.wrap-banner.main .banner {
    height: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
    padding-left: clamp(16px, 4vw, 48px);
    padding-right: clamp(16px, 4vw, 48px);
}

/* Fluid headline, left-aligned as before. */
.wrap-banner.main .banner h1 {
    font-size: clamp(1.9rem, 1rem + 3.7vw, 6rem);
    line-height: 1.12;
    width: auto;
    text-wrap: balance;
}

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



.retro-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;
}


/* ===========================================================================
   Phase 4 — Homepage hero: vertical statement + supporting line (text-only)
   Scoped under .banner so it overrides the base p rules. Quiet, secondary
   styling on the dark network animation; must NOT compete with the red
   .btn-main nav button. Homepage-only markup (header.tpl, $url.page eq '').
   The products now live in a dedicated .products section (homepage body);
   the old hero product-card styles were removed with the text-only hero.
   =========================================================================== */

/* Vertical statement, directly under the hero headline */
.banner .hero-statement {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(1rem, 0.9rem + 0.6vw, 1.45rem);
    font-weight: 400;
    line-height: 1.5;
    max-width: 640px;
    margin: 0 0 6px;
}

/* Supporting sub-statement: dimmer than the statement, readable on the animation */
.banner .hero-supporting {
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(0.9rem, 0.84rem + 0.4vw, 1.18rem);
    font-weight: 400;
    line-height: 1.55;
    max-width: 620px;
    margin: 10px 0 0;
}



/* ===========================================================================
   Phase 4 — Large-screen hero scaling (homepage only). The headline/statement
   clamps above grow with the viewport; these >=1920/2560 tiers widen the banner
   content measure so the text-only hero stays balanced on wide/4K monitors.
   Nothing here applies below 1920px, so phone/tablet appearance is untouched. */

@media (min-width: 1920px) {
    /* Widen the content measure so the text-only hero fills more of the viewport. */
    .wrap-banner.main .banner {
        max-width: 1440px;
    }
}

@media (min-width: 2560px) {
    .wrap-banner.main .banner {
        max-width: 1600px;
    }
}

/* Preserve appearance after removing the universal "* { color }" reset: these
   carousel titles are nested <strong> with no own colour. The reset used to force
   them to #262731; without it they'd inherit Bootstrap's .list-group-item colour
   (~#212529). Re-assert #262731 so they look exactly as before. */
#desktopCarousel .list-group-item strong,
#fleetCarousel .list-group-item strong,
#custom-development-carousel-lg .list-group-item strong {
    color: #262731;
}