/* Professional service image hover effect */
.service-img-hover {
    transition: transform 0.22s cubic-bezier(.4,1.4,.6,1), box-shadow 0.22s cubic-bezier(.4,1.4,.6,1);
}
.service-img-hover:hover {
    transform: scale(1.06) rotate(-2deg);
    box-shadow: 0 8px 32px rgba(16,63,122,0.13);
    z-index: 2;
}

        :root {
            --brand-red: #d71920;
            --brand-blue: #103f7a;
            --brand-blue-dark: #08264d;
            --ink: #172033;
            --muted: #5f6c7b;
            --line: #dfe6ef;
            --surface: #f5f8fc;
        }

        body {
            color: var(--ink);
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.6;
        }

        .navbar {
            border-bottom: 1px solid var(--line);
            box-shadow: 0 10px 30px rgba(16, 63, 122, 0.08);
        }

        .navbar-brand img {
            height: 64px;
            width: auto;
        }

        .nav-link {
            color: var(--ink);
            font-weight: 600;
            padding-inline: 0.9rem !important;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--brand-red) !important;
        }


        .btn-brand {
            background: var(--brand-red);
            border-color: var(--brand-red);
            color: #fff;
            font-weight: 700;
            padding: 0.75rem 1.25rem;
        }

        .btn-brand:hover {
            background: #b9151b;
            border-color: #b9151b;
            color: #fff;
        }

        .btn-outline-brand {
            border-color: var(--brand-blue);
            color: var(--brand-blue);
            font-weight: 700;
            padding: 0.75rem 1.25rem;
        }

        .btn-outline-brand:hover {
            background: var(--brand-blue);
            color: #fff;
        }

        .hero {
            position: relative;
            min-height: 560px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: var(--brand-blue-dark);
        }

        .hero::before {
            position: absolute;
            inset: 0;
            content: "";
            background:
                linear-gradient(90deg, rgba(8, 38, 77, 0.93) 0%, rgba(8, 38, 77, 0.72) 45%, rgba(8, 38, 77, 0.18) 100%),
                url("Banner.png") center / cover no-repeat;
        }

        .hero-content {
            position: relative;
            max-width: 720px;
            color: #fff;
        }

        .eyebrow {
            color: #ffb4b7;
            font-size: 0.85rem;
            font-weight: 800;
            letter-spacing: 0;
            text-transform: uppercase;
        }

        .hero h1 {
            font-size: clamp(2.4rem, 5vw, 4.6rem);
            font-weight: 800;
            line-height: 1.05;
            margin: 1rem 0;
        }

        .hero p {
            color: #e7eef8;
            font-size: 1.15rem;
            max-width: 640px;
        }


        .section {
            padding: 84px 0;
        }

        .section-soft {
            background: var(--surface);
        }

        .section-title {
            color: var(--brand-blue-dark);
            font-weight: 800;
            margin-bottom: 1rem;
        }

        .section-lead {
            color: var(--muted);
            max-width: 760px;
        }


        .service-card,
        .proof-card {
            height: 100%;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
            padding: 28px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .service-card:hover,
        .proof-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 45px rgba(16, 63, 122, 0.12);
        }


        .service-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 8px;
            background: rgba(215, 25, 32, 0.1);
            color: var(--brand-red);
            font-weight: 800;
            margin-bottom: 20px;
        }


        .service-card h3,
        .proof-card h3 {
            color: var(--brand-blue-dark);
            font-size: 1.1rem;
            font-weight: 800;
        }


        .service-card p,
        .proof-card p {
            color: var(--muted);
            margin-bottom: 0;
        }

        .logistics-list {
            padding-left: 1.1em;
            margin-bottom: 0;
        }
        .logistics-list li {
            margin-bottom: 0.5em;
            color: var(--muted);
            line-height: 1.6;
        }
        .logistics-list strong {
            color: var(--brand-blue-dark);
            font-weight: 700;
        }

        .services-page {
            background: #fff;
        }

        
        .video-container{
            position: relative;
            width: 100%;
            overflow: hidden;
            z-index: 2;
        }

        .services-video {
            width: 100%;
            z-index: 1;
        }

        .video-overlay {
            position: absolute;
            inset: 0;
            content: "";
            background: rgba(255, 250, 234, 0.533);
            z-index: 0;
        }

        .video-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #06142d;
            text-align: center;
            z-index: 1;
        }



        .services-grid .service-card-detailed {
            display: flex;
            overflow: hidden;
            padding: 0;
            border: 0;
            box-shadow: 0 18px 45px rgba(16, 63, 122, 0.08);
            flex-direction: column;
        }

        .service-card-detailed:hover {
            box-shadow: 0 26px 60px rgba(16, 63, 122, 0.16);
        }

        .service-media {
            position: relative;
            min-height: 210px;
            overflow: hidden;
            background: var(--brand-blue-dark);
        }

        .service-media::after {
            position: absolute;
            inset: 0;
            content: "";
            background: linear-gradient(180deg, rgba(8, 38, 77, 0.04), rgba(8, 38, 77, 0.22));
            pointer-events: none;
        }

        .service-media img {
            width: 100%;
            height: 100%;
            min-height: 210px;
            object-fit: cover;
            transition: transform 0.35s ease;
        }

        .service-card-detailed:hover .service-media img {
            transform: scale(1.05);
        }

        .service-card-detailed .service-icon {
            position: absolute;
            right: 18px;
            bottom: 18px;
            z-index: 1;
            margin-bottom: 0;
            background: var(--brand-red);
            color: #fff;
            box-shadow: 0 12px 26px rgba(8, 38, 77, 0.22);
        }

        .service-body {
            display: flex;
            height: 100%;
            padding: 26px;
            flex-direction: column;
        }

        .service-body h3 {
            margin-bottom: 10px;
            font-size: 1.2rem;
        }

        .service-body > p {
            margin-bottom: 18px;
            color: var(--muted);
        }

        .service-body .logistics-list {
            padding-left: 0;
            list-style: none;
        }

        .service-body .logistics-list li {
            position: relative;
            margin-bottom: 0.72rem;
            padding-left: 1.35rem;
            font-size: 0.95rem;
        }

        .service-body .logistics-list li::before {
            position: absolute;
            top: 0.65em;
            left: 0;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            content: "";
            background: var(--brand-red);
        }

        .services-process {
            background:
                linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.92)),
                url("images/Road Freight Distribution.png") center / cover no-repeat;
        }

        .process-list {
            display: grid;
            gap: 18px;
        }

        .process-step {
            display: grid;
            grid-template-columns: 58px 1fr;
            gap: 20px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
            padding: 24px;
            box-shadow: 0 16px 40px rgba(16, 63, 122, 0.08);
        }

        .process-step span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            height: 58px;
            border-radius: 8px;
            background: rgba(16, 63, 122, 0.1);
            color: var(--brand-blue);
            font-weight: 800;
        }

        .process-step h3 {
            margin-bottom: 6px;
            color: var(--brand-blue-dark);
            font-size: 1.1rem;
            font-weight: 800;
        }

        .process-step p {
            margin-bottom: 0;
            color: var(--muted);
        }

        .about-band {
            background: var(--brand-blue-dark);
            color: #fff;
        }

        .about-band p {
            color: #dce7f5;
        }

        .stat {
            border-left: 4px solid var(--brand-red);
            padding-left: 18px;
        }

        .stat strong {
            display: block;
            font-size: 2rem;
            line-height: 1;
        }

        .contact-strip {
            background: linear-gradient(90deg, var(--brand-red), var(--brand-blue));
            color: #fff;
        }

        .contact-page {
            background: #fff;
        }

        .contact-hero {
            position: relative;
            padding: 104px 0 92px;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(8, 38, 77, 0.96), rgba(16, 63, 122, 0.88)),
                url("images/Sea Freight and Ocean Logistics.png") center / cover no-repeat;
            color: #fff;
        }

        .contact-hero::after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 6px;
            content: "";
            background: var(--brand-red);
        }

        .contact-hero .container {
            position: relative;
            z-index: 1;
        }

        .contact-hero h1 {
            max-width: 820px;
            margin: 1rem 0;
            font-size: clamp(2.35rem, 5vw, 4.4rem);
            font-weight: 800;
            line-height: 1.05;
        }

        .contact-hero p {
            max-width: 680px;
            margin-bottom: 0;
            color: #e8f0fb;
            font-size: 1.14rem;
        }

        .btn-contact-outline {
            border: 2px solid #fff;
            color: #fff;
            font-weight: 800;
            padding: 0.75rem 1.25rem;
        }

        .btn-contact-outline:hover {
            background: #fff;
            color: var(--brand-blue-dark);
        }

        .contact-hero-panel {
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            padding: 32px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }

        .panel-label {
            display: inline-flex;
            margin-bottom: 18px;
            border-left: 4px solid var(--brand-red);
            padding-left: 12px;
            color: #fff;
            font-size: 0.82rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .contact-hero-panel h2 {
            margin-bottom: 12px;
            font-size: 1.55rem;
            font-weight: 800;
        }

        .contact-hero-panel p {
            color: #e8f0fb;
            font-size: 1rem;
        }

        .panel-link {
            color: #fff;
            font-weight: 800;
            text-decoration: none;
        }

        .panel-link:hover {
            color: #fff;
            text-decoration: underline;
        }

        .contact-section {
            padding: 78px 0;
        }

        .contact-section-soft {
            background: var(--surface);
        }

        .contact-card {
            height: 100%;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
            padding: 30px;
            box-shadow: 0 18px 45px rgba(16, 63, 122, 0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .contact-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 55px rgba(16, 63, 122, 0.14);
        }

        .contact-card-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            margin-bottom: 22px;
            border-radius: 8px;
            background: rgba(215, 25, 32, 0.1);
            color: var(--brand-red);
            font-weight: 800;
        }

        .contact-card h2 {
            margin-bottom: 10px;
            color: var(--brand-blue-dark);
            font-size: 1.28rem;
            font-weight: 800;
        }

        .contact-card p {
            color: var(--muted);
        }

        .contact-card a {
            color: var(--brand-blue);
            font-weight: 800;
            text-decoration: none;
            overflow-wrap: anywhere;
        }

        .contact-card a:hover {
            color: var(--brand-red);
        }

        .contact-card-blue {
            border-color: var(--brand-blue);
            background: var(--brand-blue-dark);
            color: #fff;
        }

        .contact-card-blue h2,
        .contact-card-blue p,
        .contact-card-blue a {
            color: #fff;
        }

        .contact-card-blue .contact-card-icon {
            background: var(--brand-red);
            color: #fff;
        }

        .contact-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 28px;
        }

        .contact-map-section {
            padding: 78px 0 86px;
        }

        .map-header {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 30px;
        }

        .contact-map {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 8px;
            box-shadow: 0 18px 45px rgba(16, 63, 122, 0.12);
        }

        .contact-map iframe {
            display: block;
            width: 100%;
            height: min(58vw, 520px);
            min-height: 360px;
            border: 0;
        }

        footer {
            background: #071d3a;
            color: #b9c7da;
            padding: 28px 0;
        }

        footer a {
            color: #fff;
            font-weight: 700;
            text-decoration: none;
        }

        .about-page {
            background: #fff;
        }

        .about-hero {
            position: relative;
            padding: 96px 0 88px;
            background:
                linear-gradient(90deg, rgba(8, 38, 77, 0.95), rgba(16, 63, 122, 0.88)),
                url("Banner.png") center / cover no-repeat;
            color: #fff;
            overflow: hidden;
        }

        .about-hero::after {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 6px;
            content: "";
            background: var(--brand-red);
        }

        .about-hero .container {
            position: relative;
            max-width: 940px;
        }

        .about-hero h1 {
            max-width: 760px;
            margin-bottom: 22px;
            font-size: clamp(2.4rem, 5vw, 4.5rem);
            font-weight: 800;
            line-height: 1.05;
        }

        .about-hero p {
            max-width: 860px;
            margin-bottom: 0;
            color: #e8f0fb;
            font-size: 1.15rem;
        }

        .about-section {
            padding: 78px 0;
        }

        .about-card,
        .mission-card,
        .strategic-intro {
            height: 100%;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 18px 45px rgba(16, 63, 122, 0.08);
        }

        .about-card {
            padding: 30px;
            border-top: 5px solid var(--brand-red);
        }

        .about-card h2,
        .mission-card h3,
        .strategic-intro h3 {
            color: var(--brand-blue-dark);
            font-weight: 800;
            line-height: 1.2;
        }

        .about-card h2 {
            margin-bottom: 18px;
            font-size: 1.35rem;
        }

        .about-card p,
        .mission-card p,
        .strategic-intro p {
            color: var(--muted);
        }

        .about-card p:last-child,
        .mission-card p:last-child,
        .strategic-intro p:last-child {
            margin-bottom: 0;
        }

        .about-statement {
            padding: 56px 0;
            background: var(--brand-blue-dark);
            color: #fff;
        }

        .about-statement p {
            max-width: 1040px;
            margin: 0 auto;
            color: #e8f0fb;
            font-size: 1.22rem;
            font-weight: 600;
            line-height: 1.65;
            text-align: center;
        }

        .mission-card {
            padding: 34px;
            border-left: 5px solid var(--brand-red);
        }

        .mission-card h3 {
            margin-bottom: 14px;
            font-size: 1.45rem;
        }

        .strategic-row {
            margin-top: 58px;
        }

        .strategic-intro {
            padding: 28px;
            background: var(--surface);
        }

        .strategic-intro h3 {
            margin-bottom: 14px;
            font-size: 1.35rem;
        }

        .circle-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 24px;
        }

        .circle {
            width: 300px;
            height: 300px;
            border: 1px solid rgba(16, 63, 122, 0.12);
            border-radius: 50%;
            background: linear-gradient(145deg, var(--brand-blue), var(--brand-blue-dark));
            color: #fff;
            padding: 34px;
            text-align: center;
            box-shadow: 0 18px 45px rgba(8, 38, 77, 0.18);

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            transition: transform 0.2s ease, box-shadow 0.2s ease;
            z-index:1;
        }

        .circle:nth-child(2) {
            background: linear-gradient(145deg, #7492e4, var(--surface));
            color: var(--ink);
         
        }

        .circle:nth-child(3) {
            background: linear-gradient(145deg, var(--brand-red), #991017);
        }

        .circle:hover {
            transform: translateY(-5px);
            box-shadow: 0 24px 55px rgba(8, 38, 77, 0.22);
        }

        .circle h4 {
            margin-bottom: 14px;
            font-size: 1.25rem;
            font-weight: 800;
            line-height: 1.25;
        }

        .circle p {
            margin-bottom: 0;
            color: inherit;
            font-size: 0.95rem;
        }
        
        .movingcircle {
            position: absolute;
            width: 15px;
            height: 15px;
            background: rgb(112, 201, 246);
            border-radius: 50%;
            left:50%;
            transform: translateX(-50);
            top:50%;
            transform: translateY(-50%);
            animation: movingcircle 6s linear infinite;
        }

        @keyframes movingcircle {
            0% {
                
            }
            100% {
                transform: translateX(-50%) translateY(-50%) rotate(360deg);
            }
        }

        .strategic{
            background-image: url('/images/Port.png');
            position: relative;
            background-position: center;
            background-attachment: fixed;
            z-index:0
        }

        .strategic-col {
            position: relative;
            z-index: 1;
        }

        .strategic::before {
            content: ""; /* REQUIRED */
            position: absolute; /* REQUIRED */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            background: linear-gradient(
                rgba(255, 255, 255, 0.919),
                rgba(171, 170, 170, 0.556)
            );

            z-index: 0;
        }

        .circlemover{
            position: relative;
            width: 20px;
            height: 20px;
            background: rgb(0, 255, 13);
            border-radius: 50%;
            left:-60%;
            top:40%; 
            transform-origin: 150px;
            animation: circlemover linear infinite;
            animation-duration: 20s;
        }

        @keyframes circlemover {
            0% {
                 transform: rotate(0deg);     
            }
            100% {
                transform: rotate(360deg);
            }
        }



        @media (max-width: 991.98px) {
            .navbar-brand img {
                height: 54px;
            }

            .navbar-collapse {
                padding-top: 1rem;
            }

            .nav-link {
                padding: 0.55rem 0 !important;
            }

            .hero {
                min-height: 520px;
            }

            .about-hero {
                padding: 74px 0 68px;
            }

            .about-section {
                padding: 56px 0;
            }

            .contact-hero {
                padding: 76px 0 70px;
            }

            .contact-section,
            .contact-map-section {
                padding: 58px 0;
            }

            .map-header {
                align-items: flex-start;
                flex-direction: column;
            }

            .services-hero {
                padding: 76px 0 68px;
            }

            .services-hero-panel {
                max-width: 520px;
            }

            .circle-container {
                gap: 20px;
            }

            .circle {
                width: min(300px, 88vw);
                height: min(300px, 88vw);
            }
        }

        @media (max-width: 575.98px) {
            .service-body {
                padding: 22px;
            }

            .process-step {
                grid-template-columns: 1fr;
            }

            .contact-hero-panel,
            .contact-card {
                padding: 24px;
            }

            .contact-map iframe {
                height: 390px;
            }
        }