﻿

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?olg94c');
    src: url('fonts/icomoon.eot?olg94c#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?olg94c') format('truetype'), url('fonts/icomoon.woff?olg94c') format('woff'), url('fonts/icomoon.svg?olg94c#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-sort-icon:before {
    content: "\e938";
}

.icon-know-more-arrow:before {
    content: "\e900";
}

.icon-slider-icon:before {
    content: "\e901";
}

.icon-linkedin:before {
    content: "\f0e1";
}

.icon-GMDSSEquipment:before {
    content: "\e903";
}

.icon-Pyrotechnics:before {
    content: "\e904";
}

.icon-NavcomEquipments:before {
    content: "\e905";
}

/*.icon-ship-anchor:before {
    content: "\e906";
}*/

.icon-Team:before {
    content: "\e907";
}

.icon-vision:before {
    content: "\e908";
}

.icon-web:before {
    content: "\e909";
}

.icon-office:before {
    content: "\e90a";
}

.icon-phone:before {
    content: "\e90b";
}

.icon-email:before {
    content: "\e90c";
}

.icon-Certified-Excellence:before {
    content: "\e90d";
}

.icon-Customer-Focus:before {
    content: "\e90e";
}

.icon-Customer-Centric-Approach:before {
    content: "\e90f";
}

.icon-Excellence:before {
    content: "\e910";
}

.icon-Global-Reach:before {
    content: "\e911";
}

.icon-Global-Reach1:before {
    content: "\e912";
}

.icon-Integrity:before {
    content: "\e913";
}

.icon-breathing:before {
    content: "\e914";
}

.icon-clean:before {
    content: "\e915";
}

.icon-extinguishers:before {
    content: "\e916";
}

.icon-mask:before {
    content: "\e917";
}

.icon-co2:before {
    content: "\e918";
}

.icon-foam:before {
    content: "\e919";
}

.icon-foam-system:before {
    content: "\e91a";
}

.icon-suits:before {
    content: "\e91b";
}

.icon-lifejackets:before {
    content: "\e91c";
}

.icon-bedside-system:before {
    content: "\e91d";
}

.icon-self-contained-breathing:before {
    content: "\e91e";
}

.icon-supply-materials:before {
    content: "\e91f";
}

.icon-water-mist:before {
    content: "\e920";
}

.icon-wet-chemical:before {
    content: "\e921";
}

.icon-right-tick:before {
    content: "\e922";
}

.icon-arrow-right:before {
    content: "\e923";
}

.icon-plus:before {
    content: "\e924";
}

.icon-close:before {
    content: "\e925";
}

.icon-minus:before {
    content: "\e926";
}

.icon-Singapore:before {
    content: "\e927";
}

.icon-slider-arrow-bold-left:before {
    content: "\e928";
}

.icon-slider-arrow-bold-right:before {
    content: "\e929";
}

.icon-slider-arrow-left:before {
    content: "\e92a";
}

.icon-slider-arrow-right:before {
    content: "\e92b";
}

.icon-linkedin:before {
    content: "\e902";
}

.icon-facebook:before {
    content: "\e92d";
}

.icon-fire:before {
    content: "\e92e";
}

.icon-fire2:before {
    content: "\e92f";
}

.icon-ind-map:before {
    content: "\e930";
}

.icon-instagram:before {
    content: "\e931";
}

.icon-lifesaving:before {
    content: "\e932";
}

.icon-lifesaving2:before {
    content: "\e933";
}

.icon-marine-grey-logo:before {
    content: "\e934";
}

.icon-ship:before {
    content: "\e935";
}

.icon-youtube:before {
    content: "\e936";
}

.icon-hamburger:before {
    content: "\e937";
}

.icon-circle-left:before {
    content: "\ea44";
}



/*common style*/
:root {
    --primary: #152137;
    --orange: #ed9440;
}
* {
    margin:0;
    padding:0;
}
html {
    font-size: 10px;
}

body {
    color: #142137;
    font-family: "Roboto Condensed", sans-serif;
    font-style: normal;
    font-weight: 400;
}

a {
    color: #142137;
    transition: all ease .5s;
}
    a:hover {
        text-decoration:none;
    }
    a:hover,
    a:focus,
    a b:hover,
    a b:focus {
        color: #000;
        text-decoration: none;
    }

.ws-nowrap {
    white-space: nowrap;
}

.h1, .h2, .h3, .h5, .h6 {
    font-family: "Public Sans", sans-serif;
    font-weight: 800;
    margin-bottom: 3rem;
}

.h4 {
    font-family: "Anton", sans-serif;
    font-weight: 400;
}

p {
    font-family: "Roboto Condensed", sans-serif;
    margin:0;
}

ul {
    padding-left: 0;
}

    ul li {
        list-style: none;
    }

.c-pointer {
    cursor: pointer;
}

.text-blue {
    color: #142137;
}
.text-light-blur {
    color: #1e6883;
}
.faint-blue {
    color:#78a4b5;
}

.text-orange {
    color: #ec9440;
}
.text-blue-pointer {
    color: #1d6784 !important;
}

.block {
    padding: 5rem 0;
}

.pb-60{
    padding-bottom: 60rem;
}

.mw-85{
    max-width:85%;
}

.fs-20 {
    font-size: 2rem;
}

.fw-400{
    font-weight: 400 !important;
}
.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.mt-8 {
    margin-top: 8rem;
}
.mr-8 {
    margin-right: 8rem;
}
.ml-8 {
    margin-left: 8rem;
}
.mb-8 {
    margin-bottom: 8rem;
}
.mt-6 {
    margin-top: 6rem;
}

.mr-6 {
    margin-right: 6rem;
}

.ml-6 {
    margin-left: 6rem;
}

.mb-6 {
    margin-bottom: 6rem;
}

.pt-6 {
    padding-top: 6rem;
}

.pr-6 {
    padding-right: 6rem;
}

.pl-6 {
    padding-left: 6rem;
}

.pb-6 {
    padding-bottom: 6rem !important;
}

.pt-8 {
    padding-top: 8rem;
}

.pr-8 {
    padding-right: 8rem;
}

.pl-8 {
    padding-left: 8rem;
}

.pb-8 {
    padding-bottom: 8rem;
}

.pb-15{
    padding-bottom:15rem;
}

.bg-yellow {
    background-color: #fdf4eb !important;
}
.bg-grey {
    background-color: #e5e8ee;
}

.bg-blue {
    background-color: #1d6784;
}

.bg-linear {
    background: linear-gradient(to bottom, #1e6883, #0c4559);
}

.roboto {
    font-family: "Roboto Condensed", sans-serif;
}

.bg-arrow {
    align-items: center;
    background-color: #ffffff;
    border-radius: 10rem;
    display: inline-flex;
    height: 4.2rem;
    justify-content: center;
    transition: all ease .5s;
    width: 4.2rem;
}

    .bg-arrow span {
        color: #000000;
    }

    .bg-arrow.orange {
        background-color: var(--orange);
    }

.divider {
    border-left: 2px solid #283448;
}

/* Scrollbar track */
::-webkit-scrollbar {
    width: 0.8rem;
}

/* Scrollbar track */
::-webkit-scrollbar-track {
    background: #ec9440;
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
    background-color: #1d6784;
    border-radius: 10px;
    border: 1px solid #142137;
}

.overflow-hide {
    overflow:hidden;
    position:relative;
}
.modal-backdrop {
    background:#0008;
}
/*header*/
.navbar {
    background-color: #ffffff;
    /*box-shadow: 0 0 8rem rgba(0,0,0,0.8);*/
    padding: 1.6rem 0;
    top: 0;
    transition: all ease .5s;
    z-index:10000;
}

    .navbar.sticked {
        top: -12.2rem;
    }

.navbar-brand img {
    max-width: 28rem;
}

.nav-right {
    align-items: center;
    display: flex;
}

    .nav-right ul {
        align-items: center;
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .nav-right ul li {
            margin-right: 4rem;
        }

    .nav-right a.h6 {
        font-weight: 600 !important;
    }

    .nav-right a span {
        margin-right: 1rem;
    }

.navbar-toggler {
    border-radius: 0;
    font-weight: 600 !important;
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
    text-transform: uppercase;
}

    .navbar-toggler:hover,
    .navbar-toggler:focus {
        color: #f0953e;
        outline: none;
    }

.navbar-nav .nav-item .nav-link {
    border-top: 1px solid rgba(255,255,255,0.2);
}

.navbar-nav .nav-item:first-child .nav-link {
    border-top: 0;
}

.navbar-nav .nav-link {
    background-color: #000000;
    border-left: 2px solid #ffffff;
    color: #ffffff;
    padding: 3rem 2rem;
    text-align: left;
}

    .navbar-nav .nav-link.collapsed {
        background-color: transparent;
        border-left-color: transparent;
        color: rgba(255, 255, 255, 0.8);
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        color: #ffffff;
    }

.navbar-collapse {
    background: linear-gradient(to bottom, #051937, #262d46, #404355, #5a5a64, #737374);
    height: 100% !important;
    min-width: 40rem;
    overflow: auto;
    padding: 10rem 0 0;
    position: fixed;
    right: -100%;
    transition: opacity ease .5s;
    top: 0;
    z-index: 3;
}

    .navbar-collapse.show {
        right: 0;
        text-align: right
    }

        .navbar-collapse.show .navbar-toggler {
            border: 0;
            color: rgba(255, 255, 255, 0.5);
            position: absolute;
            right: 2rem;
            top: 2rem;
            z-index: 1;
        }

            .navbar-collapse.show .navbar-toggler:hover,
            .navbar-collapse.show .navbar-toggler:focus {
                border-color: rgba(255, 255, 255, 1);
                color: rgba(255, 255, 255, 1);
            }

    .navbar-collapse .nav-item .navbar-collapse {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        opacity: 0;
        right: -100%;
        z-index: -3;
    }

        .navbar-collapse .nav-item .navbar-collapse.show {
            opacity: 1;
            right: 40rem;
            z-index: 0;
        }

        .navbar-collapse .nav-item .navbar-collapse li {
            width: 100%;
        }

.btn-back {
    color: rgba(255, 255, 255, 0.8);
    display: none;
    font-size: 2rem;
    font-weight: 500;
    padding-left: 2rem;
    position: absolute;
    top: 2rem;
    text-align: left;
    width: auto;
}

    .btn-back span {
        font-size: 3rem;
        margin-right: 1rem;
    }

/*homepage*/
.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}

.swiper-banner .swiper-slide .card-caption {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.swiper-banner .swiper-slide .card-caption2 {
    background-color: #329ebc;
    bottom: 0;
    color: #ffffff;
    font-size: 2.4rem;
    margin: auto;
    max-width: 31rem;
    min-height: 18.3rem;
    padding: 3rem;
    position: absolute;
    right: 0;
    width: 100%;
}

.swiper-banner .swiper-slide .h1 {
    color: #ffffff;
}

.swiper-banner .card-media {
    background-color: var(--primary);
}

    .swiper-banner .card-media .img-fluid {
        object-fit: cover;
        opacity: 0;
        transition: all ease .2s;
        width: 100%;
    }

.swiper-banner .swiper-slide-active .card-media .img-fluid {
    animation: grow 4s linear forwards;
}

@keyframes grow {
    0%, 20% {
        transform: scale(1.15);
    }

    75%, 100% {
        opacity: 1;
        transform: scale(1);
    }
}

.swiper-banner .swiper-slide .card-caption2 label {
    font-weight: 400;
}

.swiper-banner .swiper-slide .card-caption2 p {
    font-weight: 700;
    margin: 0;
}

.swiper-banner .swiper-pagination-bullet {
    background-color: rgba(255,255,255,.6);
    border-radius: 0;
    height: .8rem;
    opacity: 1;
    width: 5.5rem;
}

.swiper-banner .swiper-pagination-bullet-active {
    background-color: #ffffff;
}

.swiper-banner .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 .8rem;
}

.swiper-banner .swiper-button-next,
.swiper-banner .swiper-button-prev {
    background-color: #ec9440;
    bottom: 18.3rem;
    height: 8.5rem;
    left: unset;
    right: calc(31rem - 9rem);
    top: unset;
    transition: all ease .5s;
    width: 9rem;
}

.swiper-banner .swiper-button-next {
    right: calc(31rem - 18rem);
}

.swiper-banner .swiper-button-prev {
    background-color: #329ebc;
}

    .swiper-banner .swiper-button-next:before,
    .swiper-banner .swiper-button-prev:before {
        color: #ffffff;
        font-size: 2rem;
    }

.swiper-banner .swiper-horizontal > .swiper-pagination-bullets,
.swiper-banner .swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-banner .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 6rem;
}

[data-animate] {
    opacity: 0;
    transition: all 0.8s ease-out;
}

[data-animate="bottom"] {
    transform: translate3d(-10rem, 0rem, 0);
}

.swiper-slide-active [data-animate] {
    opacity: 1;
    transform: none;
}

.animeslide-heading {
    margin-bottom: 25px;
    transition-delay: 3s;
}

.swiper-slide-active .animeslide-heading {
    transition-delay: 0.6s;
}

.swiper-slide,
.swiper-slide > a {
    display: flex;
    height: 100%;
}
    .swiper-slide {
        height:auto;
    }
    /*section one*/
.icon-marine-grey-logo:before {
    color: #e9eaed;
    font-size: 461rem;
    left: 0;
    margin: auto;
    padding-top: 16rem;
    position: absolute;
    right: 0;
    text-align: right;
    transform: translateX(52.6%);
    width: 74.2rem;
    z-index: -1;
}

.section-one .left {
    width: calc(100% - 32%);
}

.section-one .right {
    align-items: center;
    display: flex;
    width: 32%;
}

.swiper-quality-spare,
.swiper-offer {
    padding-top: 5rem;
}

    .swiper-quality-spare .card-media,
    .swiper-offer .card-media {
        border-radius: 1.2rem;
        overflow: hidden;
        position: relative;
    }

        .swiper-quality-spare .card-media {
            max-width: 36.5rem;
            margin-right: 0;
        }

        .swiper-quality-spare .card-media img,
        .swiper-offer .card-media img {
            transition: all ease 5s;
            width: 100%;
        }

        .swiper-quality-spare .card-media:hover img,
        .swiper-offer .card-media:hover img {
            transform: scale(1.5);
        }

        .swiper-quality-spare .card-media:hover .bg-arrow {
            background-color: var(--orange);
        }

    .swiper-quality-spare .card-caption,
    .swiper-offer .card-caption {
        background: var(--primary);
        background: linear-gradient(45deg, rgba(20,33,55,1) 0%, rgba(20,33,55,1) 20%, rgb(255 255 255 / 0%) 100%);
        color: #ffffff;
        display: flex;
        flex-direction: column;
        height: 100%;
        left: 0;
        padding: 3rem;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .swiper-offer .card-caption {
        flex-direction: row;
        justify-content: space-between;
    }

        .swiper-offer .card-caption p {
            max-width: 39.6rem;
            margin-bottom: 0;
        }

    .swiper-quality-spare .card-caption .d-flex {
        align-items: flex-end;
    }

    .swiper-quality-spare .card-caption .h4 {
        font-weight: 400;
        margin: 0;
        width: calc(100% - 4.5rem);
    }

    .swiper-offer .swiper-button-next,
    .swiper-offer .swiper-button-prev,
    .swiper-quality-spare .swiper-button-next,
    .swiper-quality-spare .swiper-button-prev,
    .swiper-blogs .swiper-button-next,
    .swiper-blogs .swiper-button-prev {
        color: #000000;
        left: unset;
        right: 5%;
        top: 25%;
    }

.swiper-blogs .swiper-button-next,
.swiper-blogs .swiper-button-prev {
    top: -4rem;
}

.swiper-offer .swiper-button-prev,
.swiper-quality-spare .swiper-button-prev {
    right: 9%;
}

.swiper-blogs .swiper-button-prev {
    right: 11%;
}


/*section two*/
.section-two {
}

    .section-two:before {
        background-color: #eff9ff;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
    }

    .section-two .section-top p {
        margin: auto;
        max-width: 66.6rem;
    }

    .section-two.block {
        padding: 9.5rem 0;
    }

/*section three*/
.section-three {
    background-color: #1d6883bf;
    color: #ffffff;
    padding: 14.5rem 0;
}

    .section-three:before {
        background-color: #266782;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
    }

    .section-three .border-left {
        border-left-width: .5rem !important;
        max-width: 71rem;
        padding-left: 3rem;
    }

    .section-three .h2,
    .section-three p {
        margin-bottom: 4.5rem;
    }

    .section-three p {
        text-align: justify;
    }

.counter-wrapper .h4,
.counter-wrapper .text-count {
    font-family: "Archivo", sans-serif;
}

.counter-wrapper .text-count {
    color: #ec9440;
    display: flex;
    font-size: 13.2rem;
    line-height: 1;
    font-weight:700;
}

    .counter-wrapper .text-count .count {
        font-weight: bold;
    }

/*section four*/
.section-four.block {
    padding: 11rem 0;
}

:root {
    --total-brand: 0;
    --logo-width: calc(21.8rem - 2rem);
    --total-logo-width: calc(var(--total-brand) * var(--logo-width) * 2);
    --animation-duration: calc(var(--total-brand) * 5s);
    --logo-width-2: calc(19.5rem - 2rem);
    --total-logo-width-2: calc(var(--total-brand) * var(--logo-width-2) * 2);
}

.multi-client-wrapper,
.multi-client-wrapper-2,
.multi-client-wrapper-3 {
    align-items: center;
    display: flex;
    overflow: hidden;
    width: 100%;
}

    .multi-client-wrapper:hover .brands,
    .multi-client-wrapper-2:hover .brands-2,
    .multi-client-wrapper-3:hover .brands-3 {
        animation-play-state: paused;
    }

.brands,
.brands-2,
.brands-3 {
    animation: slideLeft var(--animation-duration) linear infinite;
    display: flex;
    margin: 0;
    width: var(--total-logo-width);
}

.brands-2 {
    animation: slideRight var(--animation-duration) linear infinite;
}

@keyframes slideLeft {
    100% {
        transform: translateX(calc(-100% / 2));
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(calc(-100% / 2));
    }
}

.brand-logo {
    border: .1rem solid #f2f2f2;
    border-radius: .8rem;
    filter: drop-shadow(0 0 0.25rem rgba(0,0,0,0.2));
    margin: 1rem;
    width: var(--logo-width);
    background: #ffffff;
}

/*section five*/
.section-five {
    background-color: #e3e3e360;
    background-image: url('../images/world-map.png');
    background-position: center 20%;
    background-repeat: no-repeat;
    z-index: 1;
}

    .section-five .section-top .h5 {
        color: #142137;
        font-family: "Roboto Condensed", sans-serif;
    }

    .section-five .tab .h4 {
        font-family: "Public Sans", sans-serif;
        font-weight: 700;
    }

    .section-five .tab .bg-arrow {
        height: 6rem;
        width: 6rem;
    }

.map-wrapper .icon-ind-map,
.map-wrapper .icon-Singapore {
    font-size: 70rem;
}

.ul-list.port {
    color: #000000;
    font-family: "Roboto Condensed", sans-serif;
    padding-left: 4rem;
}

/*tab*/
.tab-container {
    display: flex;
    justify-content: space-between;
}

.tab {
    align-items: center;
    border: .3rem solid #000000;
    border-radius: 10rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 1.3rem 8.5rem 1.3rem 1.5rem;
    position: relative;
    text-align: center;
    width: calc(100% / 2 - 2rem);
}

    .tab:before {
        background: var(--primary);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: -100%;
        transition: all .35s;
        width: 100%;
        z-index: -1;
    }

    .tab:hover,
    .tab.active {
        color: #ffffff;
    }

        .tab:hover:before,
        .tab.active:before {
            top: 0;
        }

        .tab.active .icon-plus:before {
            content: "\e926"
        }

    .tab .bg-arrow {
        bottom: 0;
        margin: auto;
        position: absolute;
        right: 1rem;
        top: 0;
    }

.tab-content {
    display: none;
    padding: 3rem;
}

    .tab-content.active {
        display: block;
    }

/*section six*/
.section-six {
    background-color: var(--orange);
    padding: 10rem 0;
}
/*
.swiper-blogs .patch:before {
    background-color: var(--orange);
    content: '';
    height: 5rem;
    opacity: 1;
    position: absolute;
    transition: all ease .5s;
    top: 0;
    width: 100%;
    z-index: 1;
}*/
.home-page-blog {
    transition: 0.3s linear;
    height: 100%;
}
.swiper-blogs .patch img {
    transition: all ease 1s;
}
.swiper-blogs .patch {
    height:20rem;
}
.blog-img {
    height: 20rem;
    overflow: hidden;
}
.single-blog:hover .patch img {
    transform: scale(1.2)
}

    .swiper-blogs .card-caption {
        /*    padding-top: 65%;*/
        transition: all ease .5s;
    }

.swiper-blogs .card-caption-inner {
    background-color: var(--orange);
    padding: 2rem 2rem 0;
    transition: all linear .8s;
}

.swiper-blogs .h5 {
    font-family: "Archivo", sans-serif;
    font-weight: bold;
}

/*.swiper-blogs .swiper-slide:hover .patch:before {
    height: 0;
}*/

/*.swiper-blogs .swiper-slide:hover .card-caption {
    background-image: linear-gradient(180deg, rgba(236,148,64,0.48) 0%, rgba(236,148,64,0.9999999999999999) 90%);
}*/

/*.swiper-blogs .swiper-slide:hover .card-caption-inner {
    background-color: transparent;
}

.swiper-blogs .swiper-slide:hover .btn-link.black {
    color: #ffffff;
}
*/
/*button*/
.btn {
    align-items: center;
    display: inline-flex;
    transition: all linear .35s;
}

.btn-outline {
    background: transparent;
    border: 1px solid #ffffff85;
    border-radius: 5rem;
    color: #ffffff;
    font-size: 1.1rem;
    overflow: hidden;
    padding: .7rem 1.2rem .7rem 3.2rem;
    position: relative;
    text-align: center;
    z-index: 0;
}

    .btn-outline:before {
        background: var(--primary);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: -100%;
        transition: all .35s;
        width: 100%;
        z-index: -1;
    }

    .btn-outline:hover {
        border-color: var(--primary);
        color: #ffffff;
        transform: scale(1.05);
    }

        .btn-outline:hover span,
        .btn-link:hover span {
            background: var(--orange);
            transform: rotate(360deg);
            transition: .3s linear;
        }

        .btn-outline:hover:before,
        .btn-outline:hover:after {
            top: 0;
        }

    .btn-outline span,
    .btn-link span {
        margin-left: 4rem;
    }

    .btn-outline.black {
        border-color: #000000;
        color: #000000;
    }

        .btn-outline.black:hover {
            color: #ffffff;
        }

.btn-link {
    color: #fff;
    font-size: 1.1rem;
    padding: .7rem 1.2rem .7rem 0rem;
    position: relative;
}

    .btn-link:hover {
        color: #000000;
        text-decoration: none;
    }

    .btn-link.black {
        color: #000000;
    }

        .btn-link.black:hover {
            color: #ffffff;
        }

            .btn-link.black:hover span {
                background-color: #ffffff;
            }


/*service page*/
.top-banner {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
    height: 90vh;
}
.top-banner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000078;
}

/*Servicing*/

.life-boat-section {
    background-image: url(../images/banner/lifeboat-banner.webp);
}
.life-raft-accessories {
    background-image: url(../images/banner/life-raft-accessories.webp);
}
.life-boat-servicing {
    background-image: url(../images/banner/lifeboat-servicing.webp);
}
.fire-fighting-appliances {
    background-image: url(../images/banner/fire-fighting-appliances.webp);
}
.bwms-sales-service {
    background-image: url(../images/banner/bwms-sales-service.webp);
}
.gmdss-radio-survey {
    background-image: url(../images/banner/gmdss-radio-survey.webp);
}
.vdrAnnual-performance-test {
    background-image: url(../images/banner/vdrAnnual-performance-test.webp);
}
.calibration {
    background-image: url(../images/banner/calibration.webp);
}
.cargo-loadgear-testing {
    background-image: url(../images/banner/cargo-loadgear-testing.webp);
}
.electrical-automation {
    background-image: url(../images/banner/electrical-automation.webp);
}
.electronic-navigation {
    background-image: url(../images/banner/electronic-navigation.webp);
}
.flag-surveys {
    background-image: url(../images/banner/flag-surveys.webp);
}
.gas-detection-service {
    background-image: url('../images/services/Gas Detection Service/gas-detection-service-banner.webp');
}
.gyrosphere-banner {
    background-image: url('../images/services/Gryo Sphere-Magnetic Compass Calibration/gyrosphere-banner.webp');
}
.audit-inspections {
    background-image: url('../images/services/Audit Inspections/audit-inspections-banner.webp');
}

/*Supplies*/
.fire-fighting-equipment-and-appliances {
    background-image: url(../images/supplies/banners/fire-fighting-equipment-and-appliances.webp);
}
.fixed-firefighting-equipment {
    background-image: url(../images/supplies/banners/fixed-firefighting-equipment.webp);
}

.hydrostatic-release-unit {
    background-image: url(../images/supplies/banners/hydrostatic-release-unit.webp);
}

.life-raft-and-accessories {
    background-image: url(../images/supplies/banners/life-raft-and-accessories.webp);
}

.life-saving-equipmentonShip {
    background-image: url(../images/supplies/banners/life-saving-equipmentonShip.webp);
}

.pyrotechnics {
    background-image: url(../images/supplies/banners/pyrotechnics.webp);
}

.navcom-equipments {
    background-image: url(../images/supplies/banners/navcom-equipments.webp);
}

.general-ship-supplies {
    background-image: url(../images/supplies/banners/general-ship-supplies.webp);
}
.imo-symbol {
    background-image: url(../images/supplies/banners/IMO-symbols.webp);
}

/*Other pages Banner*/

.company-profile {
    background-image: url('../images/other pages/profile.jpg');
}
.careers {
    background-image: url('../images/other pages/careers.jpg');
}
.contact {
    background-image: url('../images/other pages/contact.jpg');
}
.quality-policy {
    background-image: url('../images/other pages/quality-policy.jpg');
}

.privacy-policy {
    background-image: url('../images/other pages/quality-policy.jpg');
}
.leadership {
    background-image: url('../images/other pages/leadership.jpg');
}
.certificates {
    background-image: url('../images/other pages/certificates.jpg');
}
.our-approvals {
    background-image: url('../images/other pages/our-approvals.jpg');
}
.blogs {
    background-image: url('../images/other pages/blogs.jpg');
}



.banner-below-line {
    width: 100%;
    height: 4rem;
    background-color: #ed9240;
    bottom: 0;
}

.life-boat-breadcrum .h6 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 800;
}
.table-heading {
    background-color: #f7d4b5;
}
.services-table thead th {
    border:none;
}

.services-table td, .table th {
    border:none;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #ffffff !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #fef5ec;
}


.comprehensive-section {
    background-color: #1d6983;
    position: relative;
}
.overlay-image {
    width: 100%;
    max-width:149.7rem;
    height: 68.1rem;
    border-radius: 6.1rem;
    background-size:cover;
    filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.2));
    border: 2rem solid rgba(30,104,131,0.41);
    background-repeat:no-repeat;
    border: 2rem solid white;
    margin-top:-55rem;

}

/*.comprehensive-section-image {
    background-image: url('../images/services/Lifeboat4.webp');
}*/

.comprehensive-section-content{
    margin-top:6rem;
}

.comprehensive-section-points li {
    display:flex;
    position:relative;
    padding-left:4rem;
    margin: 1.2rem 0;
}
.electronic-product-points li {
    margin: 1.5rem 0;
    position:relative;
}
    .electronic-product-points li:before {
        content:'';
        background:url(../images/knot.svg) no-repeat center;
        width:2.5rem;
        height:2.5rem;
        background-size:cover;
        position:absolute;
        left:-5px;
        top:7px;
    }
    .electronic-product-points li span {
        top: 0 !important;
        font-size: 3.8rem;
    }
    
.comprehensive-section-points li span[class*="icon-"] {
    position: absolute;
    left: 0;
    top: 1rem;
}

.manufacturers-brand{
    flex-wrap:wrap;
    justify-content:center;
}

.manufacturers-brand li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.manufacturers-brand li img {
        width: var(--logo-width-2)
 }
.manufacturers-brand li p{
    font-weight:700;
}

.fire-fight-points {
    width: 100%;
    max-width: 149.7rem;
    border-radius: 4rem;
    padding: 6rem;
    background-color: #fdf4eb;
}
.fire-fighting-tab li {
    margin-top:2rem;
    display:flex;
    align-items:center;
}

.fire-fighting-tab li span {
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f9ddc5;
    color: #ed9435;
    flex-shrink:0;
    margin-right:3.5rem;
}

    .accordion-2 table tr td, .accordion-2 table tr th{
        font-size: 2.4rem !important;
    }
    .accordion-2 table tr:nth-of-type(odd) {
        background-color: #FDE6D0 !important;
    }
    .accordion-2 table tr:nth-of-type(even) {
        background-color: transparent;
    }
    .accordion-2 table th {
        border-right: 12px solid #fef0e3;
    }


  /*supplies page*/
.swiper-store .icon-slider-icon {
    height: 6.2rem;
    width: 6.2rem;
    background-color: #1f6784;
    color: #ffffff;
    border-radius: 0.4rem;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease, transform 0.3s ease;
}

.slider-rotate-icon {
    transform: rotate(180deg);
}

.swiper-store .icon-slider-icon:hover, .swiper-store .icon-slider-icon:focus {
    border: 1px solid #1f6784;
    background-color: transparent;
    color: #1f6784;
}

.swiper-store .swiper-wrapper .swiper-slide-active + .swiper-slide {
    filter: drop-shadow(0.927px 2.853px 10px rgba(0,0,0,0.5));
}




/*careers page*/
.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 2.375rem 1.75rem;
    font-size: 2rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 1.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.career_form:before {
    content: '';
    position: absolute;
    background: url(../images/services/lifeboat4.webp) center no-repeat;
    width: calc(100% - 65%);
    height: 100%;
    right: 0;
    top: 0;
    background-size: cover;
}
.career_form {
    background: #fff6ed;
    padding: 4.5rem;
    position: relative;
    overflow: hidden;
}

.form_outer {
    max-width: calc(100% - 38%);
}
.inner_form_div {
    max-width: calc(100% - 12%);
    margin: auto;
}

.choose_btn button {
    border: 0.2rem solid #b3c9c1;
    background: #ffffff;
    padding: 0 2rem;
    color: #1d6784;
    font-weight: 700;
}
    .choose_btn button:hover, .choose_btn button:focus {
        outline:unset;
    }


.condition_check_box {
    cursor: pointer;
}
    .condition_check_box label {
        padding-left: 3rem;
        position: relative;
        line-height: normal;
    }
input[type="checkbox"] + label:before {
    content: "";
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: white;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 3px;
}
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

    input[type="checkbox"]:checked + label:after {
        content: "";
        position: absolute;
        left: 5px;
        top: 11px;
        background: white;
        width: 2px;
        height: 2px;
        box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
        transform: rotate(45deg);
    }
input[type="checkbox"]:checked + label:before {
    background: #1d6784;
}

.btn-filled:before {
    background: var(--primary);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    transition: all .35s;
    width: 100%;
    z-index: -1;
}

.btn-filled {
    background: var(--primary);
    border: 1px solid #ffffff85;
    border-radius: 5rem;
    color: #ffffff;
    font-size: 1.1rem;
    overflow: hidden;
    padding: .7rem 1.2rem .7rem 3.2rem;
    position: relative;
    text-align: center;
    z-index: 0;
    transition: all .35s ease; 
}

    .btn-filled:before {
        background: transparent; 
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0; 
        transition: all .35s ease;
        width: 100%;
        z-index: -1;
    }

    .btn-filled:hover {
        background: transparent; 
        border-color: var(--primary); 
        color: var(--primary); 
        transform: scale(1.05); 
    }

        .btn-filled:hover:before {
            background: transparent; 
            top: 0;
        }

    .btn-filled span {
        margin-left: 4rem;
    }

    .btn-filled.black {
        border-color: #000000;
        color: #000000;
    }

        .btn-filled.black:hover {
            color: #ffffff;
        }

  .error-msg{
      display:none;
  }

/*contact-us*/
.location-section li {
    position: relative;
    padding-left: 4rem;
}

    .location-section li span {
        position: absolute;
        left: 0;
        top: 1rem;
    }



/*vision-mission secction*/
.vision-box, .mission-box {
    width: calc(100% - 4%);
    filter: drop-shadow(-9.801px 4.994px 5px rgba(0, 0, 0, 0.25));
    background-color: #ec9440;
    border-top-right-radius: 10rem;
    border-bottom-left-radius: 10rem;
    padding: 3.5rem;
}

    .vision-box .vision-mission-media img, .mission-box .vision-mission-media img {
        border-top-right-radius: 10rem;
        border-bottom-left-radius: 10rem;
        filter: drop-shadow(-9.801px 4.994px 5px rgba(0,0,0,0.25));
    }
.vision-mission-media .media-text {
    color: #ffffff;
    padding: 3rem 3rem 0 3rem;
}

.vision-mission-media .media-text span {
    font-size: 15rem;
    padding-top:1.5rem;
    
}
    .vision-mission-media .media-text h3 {
       font-family: "Public Sans", sans-serif;
    }
.vision-mission-media .media-text p {
        line-height: 2.8rem;
}

.our-values-points .values-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d7d6d5;
    background-color: #176e94;
    width: 7.2rem;
    height: 7.2rem;
    font-size: 4.8rem;
    flex-shrink: 0;
    filter: drop-shadow(3.776px 4.663px 11px rgba(0,0,0,0.25));
    transition:0.3s linear;
}
.our-values-points:hover .values-icons {
    color: #fff;
    background-color: #ec9440;
}

.why-choose-1 {
    padding: 3rem;
}

.why-choose-2{
    padding:3rem;
}
.why-choose-2 p{
    line-height:2.8rem;
}

.why-choose-3{
    background-image:url('../images/about-us/why-us.webp');
    background-repeat:no-repeat;
    background-size:cover;
    height:100%;
    position:relative;
    padding:4rem;
}
    .why-choose-3::before {
        content: '';
        width: 100%;
        height: 25rem;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(30, 104, 131, 0.999) 100%);
        display: flex;
        position: absolute;
        bottom: 0;
        left:0;
    }

.why-choose-3-text{
    position: relative;
    z-index: 1;
}

/*supply*/
.liferaft-specification-points li {
    border-bottom: 1px solid #818181;
    margin: 2rem 0 !important;
}

.accordion {
    width: 100%;
    margin: 20px auto;
}
.accordion-2 .accordion-item {
    border-radius: 1.5rem;
    background: #ffffff;
    filter: drop-shadow(0 0 12px rgba(0,0,0,0.5));
}

.values-icons {
    margin-right: 3rem;
}
    .accordion-item {
    border-bottom: 1px solid #ddd;
}

.accordion-btn {
    width: 100%;
    padding: 15px;
    text-align: left;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
    font-family: "Public Sans", sans-serif;
}

    .accordion-btn .icon-right-tick{
        font-size:2rem;
        position:absolute;
        left:2rem;
        top:2.5rem;
    }

.accordion-2 .accordion-item .accordion-btn div {
    padding: 0 3.5rem;
    flex-direction: column;
}

.accordion-2 .accordion-item .accordion-btn .icon-slider-arrow-right {
    right: 2rem;
    transform:rotate(90deg);
    font-size: 2rem;
    top: 2.6rem;
}

.rotated-arrow {
    transform: rotate(270deg) !important;
}

.accordion-btn div {
    margin-bottom: 0;
}

.accordion-btn .text-icon, .icon-slider-arrow-right {
    position: absolute;
    right: 1rem;
}
.accordion-content {
    display: none; 
    padding: 0 1.5rem;
}
.accordion-content-2{
    padding:1rem 5rem 3rem;
}

.accordion-content ul li {
    position: relative;
    padding-left: 4rem;
}

    .accordion-content ul li span {
        position: absolute;
        left: 0;
        top: 0.79rem;
    }

    .accordion-content p {
        padding: 15px 0;
        margin: 0;
    }

.btn-outline-2 {
    border: 1px solid #1e6883;
    color: #1e6883;
}

.btn-outline-2 .bg-arrow {
        background-color: #1e6883;
    }

.btn-outline-2 .bg-arrow span {
        color:#ffffff;
    }

.life-jacket-text {
    padding: 3rem;
    background-color: #fff0e2;
}
.life-jacket-text h3 {
    padding-bottom: 1rem;
    border-bottom: 1px solid #979797;
}



.desk-store-card:hover .caption ul {
    line-height: 35px;
}

.desk-store-card:hover .caption li {
    display: block;
    padding-left: 0;
}

.desk-store-card .caption .icon {
    color: #222;
    background: #fff;
    border: 1px solid #606060;
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    font-size: 16px;
    margin-right: 8px;
}



.swiper-store .swiper-slide:hover {
    display: initial;
}



.swiper-store .swiper-button-prev {
    left: 0;
    bottom: 0;
    top: unset;
}

.swiper-store .swiper-button-next{
    top:unset;
    bottom:0;
}

.swiper-store .swiper-pagination {
    bottom: 3.4rem; /* Aligns the progress bar at the bottom */
    top: unset;
    width: calc(100% - 70%); /* Responsive width with padding on both sides */
    height: 0.6rem;
    background-color: #000000;
    margin: 0 auto;
    left: 0;
    right: 0;
    max-width: 48.2rem;
    border-radius: 0.3rem;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    border-radius: 0.6rem;
    background-color: #f0953e;
}

/*quality-policy-page*/
.sticky-heading{
    position:sticky;
    top:4rem;
}

.quality-policy-points li {
    list-style: disc;
}
/*Our Leadership*/
.profile-outer {
    background: unset;
    border: 1px solid #979797;
    border-radius: 1.2rem;
    position: relative;
    padding: 5rem;
    overflow: hidden;
    transition: 0.5s all ease-in-out;
    background:#fff;
}
.profile-card:hover {
    filter: drop-shadow(.1rem .2rem .7rem rgba(29, 104, 131, 1));
    border-radius: 0;
    border-color: #1d6883;
}
.profile-card:hover .profile-description .profile-description-top a {
    color: #0077B5;
}
.profile-card:before, .profile-card:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #1d6883;
    position: absolute;
    transition: 0.3s all ease-in-out;
}

.profile-card:before {
    top: 0;
    left: -100%;
}

.profile-card:after {
    bottom: 0;
    right: -100%;
}

.profile-card .border-profile:before, .profile-card .border-profile:after {
    content: '';
    width: 1px;
    height: 100%;
    background: #1d6883;
    position: absolute;
    transition: 0.3s all ease-in-out;
}

.profile-card .border-profile:before {
    top: -100%;
    left: 0;
}

.profile-card .border-profile:after {
    bottom: -100%;
    right: 0;
}

.profile-card:hover:before {
    left: 0;
}

.profile-card:hover:after {
    right: 0;
}

.profile-card:hover .border-profile:before {
    top: 0;
}

.profile-card:hover .border-profile:after {
    bottom: 0;
}

    .profile-image {
        border-radius: 1.2rem;
    }

.profile-description .profile-description-top a {
    font-size: 4.5rem;
    position: absolute;
    right: -95px;
    top: -30px;
    z-index: 1;
}
.profile-description .profile-description-top a:hover {
    color: #1d6784;
}

.profile-description-bottom p {
    text-align: justify;
}

/*Certificates*/
.certificate-details ul li {
    list-style: disc;
    font-family: "Roboto Condensed", sans-serif;
}

.certificate-details ul li + li {
   padding-top:1rem;
}
.certificate-outer {
    background-color: #fff6ef;
    border: 1px solid #dddddd;
}
.certificate-img {
    border-radius: 1rem;
    border: 0.1rem solid #ee923f;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/*OurApproval*/
.our-approval-outer::before{
right:unset;
left:0;
}

.our-approval-outer2::before {
    left: unset;
    right: 0; 
}

 
.our-approval-outer p{ text-transform: uppercase; }

.our-approval-outer {
    border-radius: 1.3rem;
}
    .our-approval-outer::before {
        display: none;
    }
    .our-approval-slider .swiper-wrapper {
        padding-bottom: 1rem;
    }
.our-approval-slider .swiper-pagination {
    bottom:-1rem;
} 


/*.our-approval-logo-box {
    max-width: 194px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 2px 2px rgb(0, 0, 0, 0.1);
    border: 1px solid transparent;
    transition: 0.2s ease-in-out;
}*/
.our-approval-logo-box:hover {
    border-color:#ef9541;
}
.our-approval-logo-box .brand-logo {
    border: unset;
    border-radius: unset;
    filter: unset;
}

.our-approval-logo-box p {
    font-size:1.4rem;
    line-height: 2rem;
}

.our-approval-outer .form_outer .inner_form_div {
    max-width: calc(100% - 7%);
}

.approvals-bwms .form_outer .inner_form_div {
    max-width: calc(100% - 50%);
}
.card-approval {
    max-width: 194px;
    margin: 10px;
    width: 100%; 
    background-color: #fff;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 2px 2px rgb(0, 0, 0, 0.1);
    border: 1px solid transparent;
    transition: 0.2s ease-in-out;
}




/*blog-page*/
.blog-post-details p {
    text-align: justify;
}

.blog-post-right .why-choose-2 {
    padding:4.5rem;
}


.blog-post-right .why-choose-2 .btn-outline {
    background-color: #ec9440;
    border: unset;
    padding: 1.2rem 3rem;
}

.shorting-blogs .select-dropdown {
    position: relative;
    display: inline-block;
    max-width: 100%;
    float: right;
}

.shorting-blogs .select-dropdown__button {
    padding: 1rem 3.5rem 1rem 1.5rem;
    background-color: #fff6ed;
    color: #000;
    border-radius: 0.3rem;
    cursor: pointer;
    text-align: left;
    min-width:30rem;
    background-image: unset;
    filter: none;
    border: 0;
} 
.shorting-blogs .select-dropdown__button::focus {
    outline: none;
} 
.shorting-blogs .select-dropdown__list {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    max-height: 30rem;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style-type: none;
    opacity: 0;
    pointer-events: none;
    transform-origin: top left;
    transform: scale(1, 0);
    transition: all ease-in-out 0.3s;
    z-index: 2;
}

    .shorting-blogs .select-dropdown__list.active {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1, 1);
    }

.shorting-blogs .select-dropdown__list-item {
    display: block;
    list-style-type: none;
    padding: 1rem 1.5rem;
    background: #fff6ed;
    border-top: 1px solid #e6e6e6;
    line-height: 1.4;
    cursor: pointer;
    color: #000;
    transition: all ease-in-out 0.3s;
}

.all-blogs-cards {
    padding-top: 2rem;
    border-top: 1px solid #c0bfbf;
    margin-top: 2rem;
}

.single-blog {
    background: #fff6ed;
    padding: 2rem;
    transition: 0.3s linear;
    height:100%;
}
    .single-blog a {
        height: 100%;
        display: flex;
        flex-direction: column;
    }


    .single-blog.inner:hover {
        box-shadow: 0 1.4rem 2.8rem rgba(0,0,0,0.25), 0 1rem 1rem rgba(0,0,0,0.22);
    }

    .single-blog .icon-sort-icon {
        transition: 0.3s linear;
    }

    .single-blog .icon-sort-icon {
        overflow: hidden;
    }

    .single-blog.inner:hover .icon-sort-icon {
        transform: scale(1.1)
    }

.select-dropdown .icon-sort-icon {
    position: absolute;
    right: 2rem;
    top: 2.2rem;
    font-size:1.6rem;
}
.select-dropdown__button:focus {
    outline: none;
}
.blog-date  {
    margin-top: auto;
}
    .blog-date p {
        font-size:2.2rem;
    }
    .blog-content {
        height: 60%;
        display: flex;
        flex-direction: column;
        margin-top:2rem;
    }
        .blog-content .h5 {
            margin-bottom:1rem;
            font-weight:600;
            font-size:2.8rem;
        }

.single-blog.inner .blog-content > p {
    font-size: 2.8rem;
    line-height: 40px;
    margin-bottom: 3rem;
}

.blog-pagination .border-orange {
    max-width: 25rem;
    height: 0.5rem;
    background: #ed9241;
    margin: 1.5rem auto;
    border-radius: 3px;
}

.blog-pagination .btn-outline, .blog-pagination .btn-outline .bg-arrow {
    border: 1px solid #ee923f;
    color: #ee923f;
}
    .blog-pagination .btn-outline:hover{
        border:unset;
    }
.blog-description h5 {
    font-family: inherit !important;
    font-weight: 500 !important;
    color: inherit !important;
    font-size: 3.2rem !important;
    margin-top:3rem !important;
}
.blog-description p {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
    .blog-description p > span {
        font-size:2rem !important;
    }
    .blog-description p a {
        font-size: inherit !important;
        text-decoration: none !important;
        color: inherit !important
    }
/*footer*/
footer {
    background-color: #1d6883;
    color: #ffffff;
    padding: 7rem 0 5rem;
    position: relative;
}

.footer-top {
    text-align: center;
}

    .footer-top .h5 {
        font-family: "Roboto Condensed", sans-serif;
        text-align: center;
    }

.footer-middle {
    border: 2px solid #293548;
    border-radius: 2.5rem;
    margin: 5rem auto 0;
    max-width: 160rem;
    padding: 3rem;
}

    .footer-middle .card {
        background-color: #30738c;
        height: 100%;
        padding: 3rem 2rem;
        text-align: center;
    }
    .footer-middle p {
        opacity:1 !important;
    }
    .footer-middle .h6 {
        font-family: "Roboto Condensed", sans-serif;
        margin-bottom: 2rem;
        opacity: .6;
        position: relative;
        font-size: 2.4rem;
    }

    .footer-middle a {
        margin: 0 1rem;
    }

        .footer-middle a.h6 {
            color: #ffffff;
            opacity: 1;
        }

    .footer-middle .social-wrapper {
        margin: auto;
    }

        .footer-middle .social-wrapper a.h6 {
            align-items: center;
            display: flex !important;
            font-size: 5.4rem;
            justify-content: center;
            margin-bottom: 0;
        }

.footer-bottom {
    margin-top: 5rem;
    text-align: center;
}

    .footer-bottom a {
        color: #ffffff;
        display: inline-block;
        margin-bottom: 2rem;
    }

        .footer-middle a:hover,
        .footer-bottom a:hover, 
        .blog-description p a:hover
        {
            color: var(--orange) !important;
        }

        .footer-bottom a + a {
            border-left: 1px solid #ffffff;
            margin-left: 2rem;
            padding-left: 2rem;
        }

.footer-bottom-two {
    margin-top: 3rem;
}

/*scroll to top*/
.progress-wrap {
    border-radius: 5rem;
    box-shadow: inset 0 0 0 2px rgb(143 66 66 / 10%);
    bottom: 4rem;
    cursor: pointer;
    display: block;
    height: 4.6rem;
    opacity: 0;
    position: fixed;
    right: 4rem;
    transform: translateY(15px);
    transition: all 200ms linear;
    visibility: hidden;
    width: 4.6rem;
    z-index: 1;
}

    .progress-wrap.active-progress {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

    .progress-wrap::after {
        content: "\e923";
        cursor: pointer;
        color: var(--primary);
        display: block;
        font-family: icomoon;
        font-size: 2rem;
        height: 4.6rem;
        line-height: 4.6rem;
        left: 0;
        position: absolute;
        text-align: center;
        transform: rotate(-90deg);
        transition: all 200ms linear;
        top: 0;
        width: 4.6rem;
        z-index: 1;
    }

    .progress-wrap svg {
        fill: #f1f1f1;
    }

    .progress-wrap svg.progress-circle path {
        stroke: var(--primary); /* --- Lijn progres kleur --- */
        stroke-width: 6;
        box-sizing: border-box;
        -webkit-transition: all 200ms linear;
        transition: all 200ms linear;
    }

    .section-feature:before {
        background-color: #F3F3F2;
        content: '';
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
    }

    .section-feature .section {
        background-color: #F3F3F2;
    }

    .section-feature .wave {
        margin-left: 4rem;
    }

    .section-feature li {
        display: flex;
        margin-top: 3.5rem;
        padding-left: 5rem;
        position: relative;
    }

        .section-feature li [class^="icon-"] {
            align-items: center;
            background-color: #005A8C;
            border: .5rem solid #ffffff;
            border-radius: 10rem;
            color: #ffffff;
            display: flex;
            height: 8.5rem;
            justify-content: center;
            left: -5rem;
            position: absolute;
            width: 8.5rem;
        }


.faq-question li
{ position: relative;
  padding-left: 3rem; 

}

.faq-question h4 {
    font-family: "Public Sans", sans-serif !important;
}

.faq-question li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 50%;
    background: #1e6883;
}
    .faq-question li:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 3px;
        height: 50%;
        background: #1e688352;
    }
.faq-question ul hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.faq-advice{
    padding:4rem 0;
    position:relative;
    z-index:1;
    background-color:#195C75;
}
.faq-advice a {
    color:#ffffff;
    text-decoration:underline;
}

.mission-vision-section {
    background-image: url('../images/services/bg.webp');
    background-size: cover;
    margin: 4rem 0 0;
    position: relative;
}

.section-feature:before {
    background-color: #F3F3F2;
    content: '';
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
}

.section-feature .section {
    background-color: #F3F3F2;
}

.section-feature .wave {
    margin-left: 4rem;
}

.section-feature li {
    display: flex;
    margin-top: 3.5rem;
    padding-left: 5rem;
    position: relative;
}

    .section-feature li [class^="icon-"] {
        align-items: center;
        background-color: #005A8C;
        border: .5rem solid #ffffff;
        border-radius: 10rem;
        color: #ffffff;
        display: flex;
        height: 8.5rem;
        justify-content: center;
        left: -5rem;
        position: absolute;
        width: 8.5rem;
    }
.mission-vision-section:before {
    content: '';
    background: #1e6883;
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
}

.mission-vision-section .section {
    background: #1e6883;
}
.mission-points .mission-card-box {
    position: absolute;
    left: -27.5rem;
    top: 0;
    bottom: 0;
    margin: auto !important;
    height: fit-content;
}
    .mission-points .mission-card-box .img-fluid {
        width: 80%;
    }
.mission-vision-section .desc {
    max-width: calc(100% - 35%);
    margin: auto;
    padding: 10rem 0;
}

.sub-menu-toggle .icon-slider-arrow-right {
    right:2rem;
}
.nav-menu-wrap {
    max-width: 40rem;
    position: fixed;
    right: 0;
    top: 0;
    transform: translate3d(100%,0px,0px);
    transition: 0.3s linear;
}

    .nav-menu-wrap.active {
        transform: translate3d(0%,0px,0px);
    }

.nav-menu {
    width: 100%;
    height: auto;
    overflow: hidden;
    -webkit-transition: height 500ms linear;
    -o-transition: height 500ms linear;
    -moz-transition: height 500ms linear;
    transition: height 500ms linear;
}

.nav-menu,
.sub-menu {
    margin: 0px;
    padding: 0px;
    position: relative;
    background: #1d6883;
    height: 100vh;
    overflow-y:auto;
}
.menu-icon::before {
    color: #e9eaed;
    font-size: 4rem;
    left: 0;
    margin: auto;
    padding-top: 16rem;
    position: absolute;
    right: 0;
    text-align: right;
    transform: translateX(52.6%);
    width: 100%;
}

.side-bar-icon:before {
    color: #e9eaed24;
    font-size: 76rem;
    left: 0;
    margin: auto;
    padding-top: 2rem;
    position: absolute;
    right: 0;
    text-align: unset;
    transform: unset;
    width: 21%;
    margin: auto;
    top: 0;
    bottom: 0;
    height: fit-content;
}

.nav-menu li {
    list-style-type: none;
    display: block;
    background: transparent;
    float: left;
    width: 100%;
    border-top: solid 1px #cccccc5e;
    padding-left:2rem;
}

        .nav-menu li:last-child {
            border-bottom: 1px solid #cccccc5e;
        }

        .nav-menu li > a {
            display: block;
            color: #fff;
            text-decoration: none;
            padding: 2.5rem 1.5rem;
            position: relative;
            -webkit-transition: all 300ms ease;
            -moz-transition: all 300ms ease;
            transition: all 300ms ease;
        }
            .nav-menu li > a:hover {
                color:#ec9440;
            }

            .nav-menu .sub-menu-toggle {
                display: none;
                line-height: normal;
            }
    .sub-menu li > div {
        display:flex;
        align-items:center;
        justify-content:space-between;
        color:#fff;
    } 
    .nav-menu-wrap .close {
        font-size: 2rem;
        font-weight: 100;
        line-height: normal !important;
        color: #fff !important;
        width: 4rem;
        height: 4rem;
        border: 1px solid;
        margin: 2.5rem 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 1;
        border-radius: 50%;
        padding-right: 5px;
    }
.nav-menu-wrap .icon-close {
    cursor:pointer;
    width:3rem;
    height:3rem;
    display:flex;
    justify-content:center;
    align-items:center;
}
/*Sub nav menus*/
.nav-menu .sub-menu {
    display: block;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 100%;
    -moz-transition: all 400ms ease-in;
    -webkit-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
    z-index: 5;
    -moz-transform: translate3d(0%,0px,0px);
    -webkit-transform: translate3d(0%,0px,0px);
    -ms-transform: translate(0%,0px);
    -o-transform: translate(0%,0px);
    transform: translate3d(0%,0px,0px);
    background: #1d6883;
    height: 100vh;
}

        .nav-menu .sub-menu.active {
            -moz-transform: translate3d(-100%,0px,0px);
            -webkit-transform: translate3d(-100%,0px,0px);
            -ms-transform: translate(-100%,0px);
            -o-transform: translate(-100%,0px);
            transform: translate3d(-100%,0px,0px);
        }


    /*Sub menu toggle*/
    .nav-menu .sub-menu-toggle {
        position: relative;
        top: 0px;
        right: 0px;
        color: #fff;
        display: flex;
        cursor: pointer;
        width: 100%;
        text-align: center
    }


/*Nav menu toggle*/
.nav-menu-toggle {
    border: solid 1px #ddd;
    background: #ccc;
    height: 35px;
    width: 35px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    margin-bottom: 15px;
    z-index: 999;
}

    .nav-menu-toggle .toggle {
        color: #fff;
        line-height: 35px;
        font-size: 150%;
    }

.symbol-img {
    background: #fff6ee;
    padding-top: 1.5rem;
    text-align: center;
    font-size: 2rem;
    line-height: normal;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
    .symbol-img p {
        max-width: 200px;
        margin: auto;
        color: #ec9440;
        font-weight: 600;
    }
    .symbol-img a {
        background: url(../images/supplies/IMOImages/arrow-right-down.svg) center no-repeat;
        width: 34px;
        height: 34px;
        background-size: contain;
        position: absolute;
        bottom: 12px;
        right: 39px;
    }
    .img-frame::after {
        content: '';
        background: url(../images/supplies/IMOImages/imo-fram.svg) center no-repeat;
        background-size: cover;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }


/* General Ship Supplies */ 

.generalShipSupplies .item {
    display: flex;
    margin-bottom: 45px;
    box-shadow: 0px 8px 16px rgb(0 0 0 / 53%);
}
.generalShipSupplies .item .image { 
    width: 60%;
}
.generalShipSupplies .right-wrapper {
    position: relative;
    width: 40%;
}
.generalShipSupplies .right-wrapper:before {
    content: '';
    position: absolute;
    background: #ec9440;
    width: 100%;
    height: 100%;
}

.generalShipSupplies .item:nth-child(even) {
    flex-direction: row-reverse;
} 
.generalShipSupplies img { 
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.generalShipSupplies .card {
    background: #fff;
    padding: 70px 40px;
    margin: 60px;
    padding: 50px;
    height: calc(100% - 120px);
}
.generalShipSupplies .card p{
    font-size:3rem;
}
.generalShipSupplies .cardR {
    margin-left: -10%;
}
.generalShipSupplies .cardL { 
    margin-right: -10%;
}
.generalShipSupplies .card ul li {
    display: flex;
    align-items: baseline;
}

.generalShipSupplies .card span, .list-icon li span {
    color: #1d6983;
    margin-right: 10px;
}


/* Fixed Firefighting Equipment */

.tabs {
    margin-bottom: 5rem;
    position: relative;
    z-index: 1;
}
.tabs .tab-container {
    background: #ec9440;
    display: block;
    position: relative;
    padding: 3rem;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.tabs .nav-pills .nav-link {
    text-align: left;
    border-radius: 0rem;
    background: #ffffff;
    border: none;
    margin-bottom: 4px;
    padding: 1.6rem 2rem;
    display: flex;
    align-items: baseline;
    cursor: pointer;
    transition: .3s linear;
}
.tabs .nav-pills .nav-link:hover,
.tabs .nav-pills .nav-link.active {
    background-color: #1d6883;
    color: #fff;
    transition: .3s linear;
}
.tabs .nav-pills button:focus{  outline: none; border: none; }
.tabs .nav-pills .nav-link span {
    color: #1d6883;
    margin-right: 1rem;
}
.tabs .nav-pills .nav-link:hover span,
.tabs .nav-pills .nav-link.active span {
    color: #fff;
}

.tabs .nav-pills > button.nav-link:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.tabs .nav-pills > button.nav-link:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.tabs .tab-content {
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    position:sticky;
    top:5rem;
}
.tabs table{ margin-top: 1rem; margin-bottom: 0; }
.tabs table th, .tabs table td {
    padding: 0 1.2rem;
    background: #e7eff2;
    border: 4px solid #ffffff;
    font-size: 18px;
}


.tabs ul{ padding-left: 2rem; margin-top: 1rem; }
.tabs li {
    display: flex;
    align-items: baseline;
}
.quality-policy-points li {
    list-style:none;
    position:relative;
    padding-left:3rem;
}
    .quality-policy-points li span {
        position:absolute;
        left:0;
        top:10px;
    }
    .tabs li span, .quality-policy-points li span {
        color: #1d6883;
        margin-right: 10px;
    }

.tabs .h4 {
    font-family: 'Roboto Condensed';
    font-weight: 800;
}

.bg-gray {
    background-image: url('../images/supplies/hydrostatic/gray.jpg');
    height: 546px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.bg-gray > img{ max-height: 400px; }

.img-wrap > img {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}
.brand-item ul li {
    position:relative;
    padding-left:2rem;
}
.brand-item ul li:after {
    content:'';
    width:5px;
    height:5px;
    background:#000;
    border-radius:50%;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
}
.full-table {
  background:#fff;
    padding:4rem;
    border-radius:1.5rem;
}

/* map dot */

.map-overlay .nav {
    position: absolute;
    bottom: -2rem;
    right: 2rem;
    background: #ffffffd4;
}

.map-overlay .nav li.nav-item a {
    background: none;
    padding: 0;
    margin: 0 10px;
    display: inline-block;
    border: 0;
    text-align: center;
    font-size: 1.5rem;
    color: #777;
}

.map-overlay .nav li.nav-item a.active,
.map-overlay .nav li.nav-item a:hover {
    color: #f1511f;
}

.map-overlay {
    position: absolute;
    right: 0rem;
    top: 42%;
    z-index: 9;
    transform: translateY(-50%);
    max-width: 400px;
}


.marker {
    position: absolute;
    left: 4%;
    top: 47.99%;
    z-index: 5;
}

.marker-2 {
    left: 8%;
    top: 47.99%;
}

.marker-3 {
    left: 10%;
    top: 49.99%;
}

.marker-4 {
    left: 8%;
    top: 50.99%;
}

.marker-5 {
    left: 6%;
    top: 50.99%;
}

.marker-6 {
    left: 4%;
    top: 51%;
}

.marker-7 {
    left: 11%;
    top: 56.99%;
}

.marker-8 {
    left: 16%;
    top: 52.99%;
}

.marker-9 {
    left: 16%;
    top: 54.99%;
}

.marker-10 {
    left: 16%;
    top: 56.99%;
}



.marker-11 {
    left: 17%;
    top: 60.85%;
}

.marker-12 {
    left: 17%;
    top: 65%;
}

.marker-13 {
    left: 22%;
    top: 75%;
}

.marker-14 {
    left: 22%;
    top: 78%;
}

.marker-15 {
    left: 24%;
    top: 84%;
}

.marker-16 {
    left: 27%;
    top: 91%;
}

.marker-17 {
    left: 35%;
    top: 95%;
}

.marker-18 {
    left: 40%;
    top: 83%;
}

.marker-19 {
    left: 40%;
    top: 78%;
}

.marker-20 {
    left: 40%;
    top: 74%;
}

.marker-21 {
    left: 50%;
    top: 66.99%;
}

.marker-22 {
    left: 58%;
    top: 60%;
}

.marker-23 {
    left: 62%;
    top: 53%;
}

.singaporemarker {
    top: 60%;
    left: 40%;
    position: absolute;
    z-index: 5;
}

.dot {
    width: 10px;
    height: 10px;
    border: 1px solid #655244;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #f1511f;
    z-index: 10;
    position: absolute;
}


.pulse {
    position: absolute;
    height: 34px;
    width: 34px;
    top: -12px;
    left: -12px;
    z-index: 2;
    opacity: 0;
    border: 3px solid rgba(237,47,39,1);
    background: transparent;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    -webkit-animation: flash 2s ease-out;
    -moz-animation: flash 2s ease-out;
    animation: flash 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.map-overlay + .map-overlay img {
    max-height: 350px;
}

@-webkit-keyframes flash {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }

    25% {
        -webkit-transform: scale(0);
        opacity: 0.2;
    }

    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.5;
    }

    75% {
        -webkit-transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}

@-moz-keyframes flash {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }

    25% {
        -webkit-transform: scale(0);
        opacity: 0.2;
    }

    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.5;
    }

    75% {
        -webkit-transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}

@-o-keyframes flash {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }

    25% {
        -webkit-transform: scale(0);
        opacity: 0.2;
    }

    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.5;
    }

    75% {
        -webkit-transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}

@keyframes flash {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }

    25% {
        -webkit-transform: scale(0);
        opacity: 0.2;
    }

    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.5;
    }

    75% {
        -webkit-transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}
 .tooltip{ font-size: 1.2rem; }


 /*NEW STYLES*/


.responsive-email-contacts .email-link,
.responsive-email-contacts .email-label {
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: white !important;
}

.responsive-email-contacts .email-item {
    margin-bottom: 12px !important;
    text-align: center !important; 
}

.responsive-email-contacts .email-label {
    display: block !important; 
    font-weight: bold !important;
    margin-bottom: 4px !important; 
    margin-right: 0 !important; 
}

.responsive-email-contacts .email-link {
    display: inline-block !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    word-break: break-all !important;
}


@media (min-width: 576px) {
    .responsive-email-contacts .email-link,
    .responsive-email-contacts .email-label {
        font-size: calc(16px + 0.5vw) !important;
        line-height: 1.5 !important;
    }

    .responsive-email-contacts .email-item {
        margin-bottom: 8px !important;
        text-align: left !important; 
        display: flex !important; 
        align-items: center !important;
    }

    .responsive-email-contacts .email-label {
        display: inline-block !important; 
        margin-right: 8px !important;
        margin-bottom: 0 !important; 
    }
}


@media (min-width: 768px) {
    .responsive-email-contacts .email-link,
    .responsive-email-contacts .email-label {
        font-size: calc(18px + 0.5vw) !important;
    }
}


@media (min-width: 992px) {
    .responsive-email-contacts .email-link,
    .responsive-email-contacts .email-label {
        font-size: calc(20px + 0.5vw) !important;
    }
}

@media (min-width: 1200px) {
    .responsive-email-contacts .email-link,
    .responsive-email-contacts .email-label {
        font-size: 22px !important;
    }
}

.responsive-phone-numbers .phone-link {
    font-size: 20px !important; 
    line-height: 1.5 !important;
    padding: 0.5rem 1rem !important;
    text-decoration: none !important;
    color: inherit !important;
    font-weight: normal !important; 
}

@media (min-width: 576px) {
    .responsive-phone-numbers .phone-link {
        font-size: calc(16px + 0.5vw) !important;
    }
}

@media (min-width: 768px) {
    .responsive-phone-numbers .phone-link {
        font-size: calc(18px + 0.5vw) !important;
    }
}

@media (min-width: 992px) {
    .responsive-phone-numbers .phone-link {
        font-size: calc(20px + 0.5vw) !important;
    }
}

@media (min-width: 1200px) {
    .responsive-phone-numbers .phone-link {
        font-size: 22px !important;
    }
}


/* Base Card Layout */
.card-media {
    position: relative;
    overflow: hidden;
}

/* Icon Positioning and Responsive Scaling */
.calibration-icon {
   
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
   
    width: 72px !important;
    height: 73px;
    object-fit: contain;
 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    pointer-events: none; 
    transition: none !important;
    transform: none !important;
}

@media (max-width: 1440px) {
    .calibration-icon {
        width: 48px;
        height: 48px;
        top: 12px;
        left: 12px;
    }
}
/* Tablet scaling (768px - 1024px) */
@media (max-width: 1024px) {
    .calibration-icon {
        width: 40px;
        height: 41px;
        top: 12px;
        left: 12px;
    }
}

/* Small tablet scaling (576px - 768px) */
@media (max-width: 768px) {
    .calibration-icon {
        width: 40px;
        height: 41px;
        top: 10px;
        left: 10px;
    }
}

/* Mobile scaling (<576px) */
@media (max-width: 576px) {
    .calibration-icon {
        width: 38px;
        height: 38px;
/*        top: 8px;*/
        left: 8px;
    }
}

/* Card Caption Adjustment */
.card-caption {
    position: relative; 
    padding-top: 30px; 
}

@media (max-width: 576px) {
    .card-caption {
        padding-top: 25px; 
    }
}


.np-social-wrapper {
    gap: 1rem;
    padding: 0.5rem 0;
}

.np-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f5f5f5;
    color: #333;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .np-social-link:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

.np-social-icon {
    font-size: 16px;
}

/* Specific platform colors on hover */
.np-social-link:hover.fa-linkedin-in {
    background-color: #0077b5;
    color: white;
}

.np-social-link:hover.fa-instagram {
    background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    color: white;
}

.np-social-link:hover.fa-facebook-f {
    background-color: #1877f2;
    color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .np-social-wrapper {
        gap: 0.75rem;
    }

    .np-social-link {
        width: 32px;
        height: 32px;
    }

    .np-social-icon {
        font-size: 14px;
    }
}
