1709 lines
113 KiB
HTML
1709 lines
113 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Pelagia Marine Services Pvt. Ltd. — Total Ship Management, Dredging, and Maritime Consultancy solutions from Panvel, Maharashtra, India.">
|
||
<link rel="canonical" href="https://www.pelagiamarine.com/">
|
||
<title>Pelagia Marine Services | Home</title>
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "LocalBusiness",
|
||
"@id": "https://www.pelagiamarine.com/#organization",
|
||
"name": "Pelagia Marine Services",
|
||
"legalName": "Pelagia Marine Services Pvt. Ltd.",
|
||
"alternateName": "PMS",
|
||
"url": "https://www.pelagiamarine.com/",
|
||
"logo": "https://www.pelagiamarine.com/assets/img/logo.png",
|
||
"image": "https://www.pelagiamarine.com/assets/img/home-ship.jpg",
|
||
"description": "Pelagia Marine Services Pvt. Ltd. provides Total Ship Management, Dredging, Maritime Consultancy, Technical Advisory, Vetting, CDI, and Audit services from Panvel, Maharashtra, India.",
|
||
"foundingDate": "2014",
|
||
"email": "info@pelagiamarine.com",
|
||
"telephone": "+91-22-4127-1333",
|
||
"address": {
|
||
"@type": "PostalAddress",
|
||
"streetAddress": "ZION, 409-410, Sector 10, Kharghar",
|
||
"addressLocality": "Panvel",
|
||
"addressRegion": "Maharashtra",
|
||
"postalCode": "410210",
|
||
"addressCountry": "IN"
|
||
},
|
||
"areaServed": [
|
||
"India",
|
||
"Global"
|
||
],
|
||
"sameAs": [
|
||
"https://www.facebook.com/Pelagia-Marine-436758780042821/",
|
||
"https://twitter.com/PelagiaMarine"
|
||
],
|
||
"contactPoint": [
|
||
{
|
||
"@type": "ContactPoint",
|
||
"telephone": "+91-22-4127-1333",
|
||
"contactType": "customer service",
|
||
"email": "info@pelagiamarine.com",
|
||
"areaServed": "IN",
|
||
"availableLanguage": [
|
||
"en"
|
||
]
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ── Reset & Tokens ──────────────────────────────── */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--navy: #07213d;
|
||
--navy-mid: #0d3460;
|
||
--ocean: #1565a8;
|
||
--gold: #c49a1e;
|
||
--gold-lt: #e8b832;
|
||
--off-white: #f4f8fc;
|
||
--text: #1a2332;
|
||
--muted: #5a6a7e;
|
||
--border: #d8e4f0;
|
||
--white: #ffffff;
|
||
--radius: 8px;
|
||
--shadow: 0 4px 24px rgba(7,33,61,.10);
|
||
--shadow-lg: 0 12px 48px rgba(7,33,61,.18);
|
||
--transition: .25s ease;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--white); line-height: 1.6; }
|
||
|
||
img { display: block; max-width: 100%; }
|
||
a { text-decoration: none; color: inherit; }
|
||
ul { list-style: none; }
|
||
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||
.section-label {
|
||
font-size: .75rem; font-weight: 600; letter-spacing: .12em;
|
||
text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
|
||
}
|
||
.section-title {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
|
||
color: var(--navy); line-height: 1.2; margin-bottom: 16px;
|
||
}
|
||
.section-lead { font-size: 1.05rem; color: var(--muted); max-width: 640px; }
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 12px 28px; border-radius: var(--radius);
|
||
font-size: .9rem; font-weight: 600; cursor: pointer;
|
||
transition: var(--transition); border: 2px solid transparent;
|
||
}
|
||
.btn-primary { background: var(--gold); color: var(--navy); }
|
||
.btn-primary:hover { background: var(--gold-lt); }
|
||
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
|
||
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: var(--white); }
|
||
.btn-navy { background: var(--navy); color: var(--white); }
|
||
.btn-navy:hover { background: var(--navy-mid); }
|
||
.divider-gold { width: 48px; height: 3px; background: var(--gold); border-radius: 2px; margin: 16px 0 24px; }
|
||
|
||
|
||
/* ── Announcement Bar ────────────────────────────── */
|
||
.announce-bar {
|
||
background: var(--navy); color: rgba(255,255,255,.8);
|
||
font-size: .78rem; text-align: center; padding: 8px 24px;
|
||
}
|
||
.announce-bar a { color: var(--gold-lt); font-weight: 600; }
|
||
|
||
|
||
/* ── Navigation ──────────────────────────────────── */
|
||
.site-nav {
|
||
position: sticky; top: 0; z-index: 100;
|
||
background: var(--white);
|
||
border-bottom: 1px solid var(--border);
|
||
box-shadow: 0 2px 12px rgba(7,33,61,.06);
|
||
}
|
||
.nav-inner {
|
||
display: flex; align-items: center; gap: 32px;
|
||
height: 68px;
|
||
}
|
||
.nav-brand {
|
||
display: flex; align-items: center; gap: 12px; flex-shrink: 0;
|
||
}
|
||
.nav-brand img { height: 44px; width: auto; }
|
||
.nav-brand-text {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: .95rem; font-weight: 600; color: var(--navy);
|
||
line-height: 1.25;
|
||
}
|
||
.nav-brand-text span { display: block; font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 400; color: var(--muted); letter-spacing: .04em; }
|
||
|
||
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
|
||
.nav-links > li { position: relative; }
|
||
.nav-links > li > a {
|
||
display: flex; align-items: center; gap: 4px;
|
||
padding: 8px 12px; border-radius: var(--radius);
|
||
font-size: .875rem; font-weight: 500; color: var(--text);
|
||
transition: var(--transition);
|
||
}
|
||
.nav-links > li > a:hover,
|
||
.nav-links > li.active > a { color: var(--ocean); background: var(--off-white); }
|
||
.nav-links > li > a .chevron {
|
||
width: 12px; height: 12px; transition: transform .2s;
|
||
opacity: .6;
|
||
}
|
||
.nav-links > li:hover > a .chevron { transform: rotate(180deg); }
|
||
|
||
.dropdown {
|
||
display: none; position: absolute; top: calc(100% + 4px); left: 0;
|
||
background: var(--white); border: 1px solid var(--border);
|
||
border-radius: var(--radius); box-shadow: var(--shadow-lg);
|
||
min-width: 220px; padding: 8px;
|
||
animation: dropIn .15s ease;
|
||
}
|
||
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } }
|
||
.nav-links > li:hover .dropdown { display: block; }
|
||
.dropdown li a {
|
||
display: block; padding: 8px 12px; border-radius: 6px;
|
||
font-size: .85rem; color: var(--text);
|
||
transition: var(--transition);
|
||
}
|
||
.dropdown li a:hover { background: var(--off-white); color: var(--ocean); }
|
||
.dropdown .dropdown-header {
|
||
display: block; padding: 8px 12px 4px;
|
||
font-size: .72rem; font-weight: 600; letter-spacing: .08em;
|
||
text-transform: uppercase; color: var(--muted);
|
||
}
|
||
.dropdown .dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
|
||
.dropdown .dropdown-indent { padding-left: 24px; }
|
||
|
||
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
|
||
.nav-login {
|
||
font-size: .8rem; font-weight: 600; color: var(--muted);
|
||
display: flex; align-items: center; gap: 5px;
|
||
padding: 6px 12px; border-radius: var(--radius);
|
||
border: 1px solid var(--border); transition: var(--transition);
|
||
}
|
||
.nav-login:hover { background: var(--off-white); color: var(--navy); }
|
||
.nav-login svg { width: 14px; height: 14px; }
|
||
.nav-portal {
|
||
font-size: .8rem; font-weight: 600;
|
||
background: var(--navy); color: var(--white);
|
||
padding: 8px 16px; border-radius: var(--radius);
|
||
transition: var(--transition);
|
||
}
|
||
.nav-portal:hover { background: var(--navy-mid); }
|
||
|
||
.nav-hamburger {
|
||
display: none; flex-direction: column; gap: 5px;
|
||
cursor: pointer; padding: 8px; background: none; border: none;
|
||
margin-left: auto;
|
||
}
|
||
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: var(--transition); }
|
||
|
||
@media (max-width: 900px) {
|
||
.nav-links, .nav-actions { display: none; }
|
||
.nav-hamburger { display: flex; }
|
||
.nav-inner { gap: 0; }
|
||
.nav-mobile-open .nav-links {
|
||
display: flex; flex-direction: column; align-items: flex-start;
|
||
position: absolute; top: 68px; left: 0; right: 0;
|
||
background: var(--white); border-bottom: 1px solid var(--border);
|
||
padding: 12px; gap: 2px; box-shadow: var(--shadow);
|
||
}
|
||
.nav-mobile-open .nav-links .dropdown { position: static; box-shadow: none; border: none; display: none; }
|
||
.nav-mobile-open .nav-links > li.open .dropdown { display: block; }
|
||
}
|
||
|
||
|
||
/* ── Hero ─────────────────────────────────────────── */
|
||
.hero {
|
||
position: relative; height: 92vh; min-height: 520px;
|
||
overflow: hidden; display: flex; align-items: center;
|
||
}
|
||
.hero-slides { position: absolute; inset: 0; }
|
||
.hero-slide {
|
||
position: absolute; inset: 0;
|
||
background-size: cover; background-position: center;
|
||
opacity: 0; animation: heroFade 30s infinite;
|
||
}
|
||
.hero-slide:nth-child(1) { background-image: url('assets/slides/slide-1.jpg'); animation-delay: 0s; }
|
||
.hero-slide:nth-child(2) { background-image: url('assets/slides/slide-2.jpg'); animation-delay: 6s; }
|
||
.hero-slide:nth-child(3) { background-image: url('assets/slides/slide-3.jpg'); animation-delay: 12s; }
|
||
.hero-slide:nth-child(4) { background-image: url('assets/slides/slide-4.jpg'); animation-delay: 18s; }
|
||
.hero-slide:nth-child(5) { background-image: url('assets/slides/slide-5.jpg'); animation-delay: 24s; }
|
||
|
||
@keyframes heroFade {
|
||
0% { opacity: 0; transform: scale(1.04); }
|
||
4% { opacity: 1; transform: scale(1.02); }
|
||
16% { opacity: 1; transform: scale(1); }
|
||
20% { opacity: 0; transform: scale(1); }
|
||
100% { opacity: 0; }
|
||
}
|
||
|
||
.hero-overlay {
|
||
position: absolute; inset: 0;
|
||
background: linear-gradient(135deg, rgba(7,33,61,.82) 0%, rgba(13,52,96,.55) 60%, rgba(7,33,61,.25) 100%);
|
||
}
|
||
.hero-content {
|
||
position: relative; z-index: 2; max-width: 680px;
|
||
padding: 0 24px;
|
||
}
|
||
.hero-eyebrow {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
background: rgba(196,154,30,.15); border: 1px solid rgba(196,154,30,.4);
|
||
color: var(--gold-lt); font-size: .78rem; font-weight: 600;
|
||
letter-spacing: .1em; text-transform: uppercase;
|
||
padding: 6px 14px; border-radius: 20px; margin-bottom: 20px;
|
||
}
|
||
.hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-lt); }
|
||
.hero-title {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(2.2rem, 5.5vw, 4rem);
|
||
color: var(--white); line-height: 1.15; margin-bottom: 20px;
|
||
}
|
||
.hero-title em { color: var(--gold-lt); font-style: normal; }
|
||
.hero-desc {
|
||
font-size: 1.05rem; color: rgba(255,255,255,.82); margin-bottom: 36px;
|
||
max-width: 520px; line-height: 1.7;
|
||
}
|
||
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
|
||
.hero-scroll {
|
||
position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
|
||
z-index: 2; display: flex; flex-direction: column; align-items: center;
|
||
gap: 6px; color: rgba(255,255,255,.6); font-size: .7rem; letter-spacing: .1em;
|
||
text-transform: uppercase; cursor: pointer; transition: var(--transition);
|
||
}
|
||
.hero-scroll:hover { color: var(--white); }
|
||
.scroll-dot {
|
||
width: 28px; height: 44px; border: 2px solid rgba(255,255,255,.4);
|
||
border-radius: 14px; display: flex; justify-content: center; padding-top: 8px;
|
||
}
|
||
.scroll-dot::after {
|
||
content: ''; width: 4px; height: 8px; background: rgba(255,255,255,.7);
|
||
border-radius: 2px; animation: scrollDot 2s infinite;
|
||
}
|
||
@keyframes scrollDot { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(6px); } }
|
||
|
||
.hero-badges {
|
||
position: absolute; bottom: 0; right: 0; z-index: 2;
|
||
display: flex; gap: 1px;
|
||
}
|
||
.hero-badge {
|
||
background: rgba(7,33,61,.75); backdrop-filter: blur(8px);
|
||
color: var(--white); padding: 14px 20px; text-align: center;
|
||
border-top: 3px solid var(--gold);
|
||
}
|
||
.hero-badge-num { font-size: 1.75rem; font-weight: 700; color: var(--gold-lt); line-height: 1; }
|
||
.hero-badge-label { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 3px; }
|
||
|
||
@media (max-width: 768px) { .hero-badges { display: none; } }
|
||
|
||
|
||
/* ── About ───────────────────────────────────────── */
|
||
.about { padding: 96px 0; background: var(--white); }
|
||
.about-grid {
|
||
display: grid; grid-template-columns: 1fr 1fr;
|
||
gap: 72px; align-items: center;
|
||
}
|
||
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
|
||
.about-text p { color: var(--muted); margin-bottom: 16px; line-height: 1.8; }
|
||
.about-text p:last-child { margin-bottom: 0; }
|
||
.about-text strong { color: var(--navy); }
|
||
.about-certs {
|
||
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px;
|
||
}
|
||
.cert-pill {
|
||
font-size: .72rem; font-weight: 600; letter-spacing: .04em;
|
||
color: var(--ocean); background: rgba(21,101,168,.08);
|
||
border: 1px solid rgba(21,101,168,.2);
|
||
padding: 5px 12px; border-radius: 20px;
|
||
}
|
||
.about-image-wrap {
|
||
position: relative;
|
||
}
|
||
.about-image-wrap img {
|
||
width: 100%; border-radius: 12px;
|
||
box-shadow: var(--shadow-lg); object-fit: cover;
|
||
}
|
||
.about-badge {
|
||
position: absolute; bottom: -24px; left: -24px;
|
||
background: var(--navy); color: var(--white);
|
||
padding: 20px 24px; border-radius: 12px;
|
||
border-left: 4px solid var(--gold);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.about-badge-num { font-size: 2rem; font-weight: 700; color: var(--gold-lt); line-height: 1; }
|
||
.about-badge-text { font-size: .75rem; color: rgba(255,255,255,.7); margin-top: 4px; }
|
||
.about-stats {
|
||
display: grid; grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px; margin-top: 48px; padding-top: 48px;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.stat { text-align: center; }
|
||
.stat-num { font-size: 2rem; font-weight: 700; color: var(--navy); line-height: 1; }
|
||
.stat-label { font-size: .78rem; color: var(--muted); margin-top: 4px; }
|
||
|
||
|
||
/* ── Services ────────────────────────────────────── */
|
||
.services { padding: 96px 0; background: var(--off-white); }
|
||
.services-header { text-align: center; margin-bottom: 56px; }
|
||
.services-header .section-lead { margin: 0 auto; }
|
||
.services-header .divider-gold { margin: 16px auto 24px; }
|
||
.services-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
.service-card {
|
||
background: var(--white); border-radius: 12px;
|
||
border: 1px solid var(--border);
|
||
padding: 36px 28px; transition: var(--transition);
|
||
cursor: default;
|
||
}
|
||
.service-card:hover {
|
||
box-shadow: var(--shadow-lg);
|
||
border-color: rgba(21,101,168,.2);
|
||
transform: translateY(-4px);
|
||
}
|
||
.service-icon {
|
||
width: 52px; height: 52px; border-radius: 12px;
|
||
background: rgba(21,101,168,.08);
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
.service-icon svg { width: 26px; height: 26px; color: var(--ocean); }
|
||
.service-card h3 { font-size: 1.05rem; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
|
||
.service-card p { font-size: .875rem; color: var(--muted); line-height: 1.7; }
|
||
.service-card-link {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
font-size: .8rem; font-weight: 600; color: var(--ocean);
|
||
margin-top: 16px; transition: var(--transition);
|
||
}
|
||
.service-card-link:hover { gap: 8px; }
|
||
.service-card-link svg { width: 14px; height: 14px; }
|
||
|
||
|
||
/* ── Fleet Strip ─────────────────────────────────── */
|
||
.fleet-strip { padding: 80px 0; background: var(--navy); }
|
||
.fleet-strip-inner {
|
||
display: grid; grid-template-columns: 1fr 2fr;
|
||
gap: 64px; align-items: center;
|
||
}
|
||
@media (max-width: 768px) { .fleet-strip-inner { grid-template-columns: 1fr; gap: 32px; } }
|
||
.fleet-strip .section-title { color: var(--white); }
|
||
.fleet-strip .section-lead { color: rgba(255,255,255,.65); }
|
||
.fleet-strip .divider-gold { background: var(--gold); }
|
||
.fleet-types {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
|
||
}
|
||
.fleet-type {
|
||
display: flex; align-items: center; gap: 12px;
|
||
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
|
||
border-radius: var(--radius); padding: 14px 16px;
|
||
}
|
||
.fleet-type-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
|
||
.fleet-type span { font-size: .84rem; color: rgba(255,255,255,.85); }
|
||
|
||
|
||
/* ── Clients ─────────────────────────────────────── */
|
||
.clients { padding: 80px 0; background: var(--white); overflow: hidden; }
|
||
.clients-header { text-align: center; margin-bottom: 48px; }
|
||
.clients-header .divider-gold { margin: 16px auto 0; }
|
||
.clients-ticker-wrap { overflow: hidden; }
|
||
.clients-ticker {
|
||
display: flex; gap: 40px;
|
||
animation: ticker 20s linear infinite;
|
||
width: max-content;
|
||
}
|
||
.clients-ticker:hover { animation-play-state: paused; }
|
||
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
|
||
.client-logo {
|
||
width: 120px; height: 72px; flex-shrink: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
filter: grayscale(1) opacity(.55);
|
||
transition: var(--transition);
|
||
}
|
||
.client-logo:hover { filter: none; }
|
||
.client-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||
|
||
|
||
/* ── Why Us ──────────────────────────────────────── */
|
||
.why-us { padding: 96px 0; background: var(--off-white); }
|
||
.why-us-grid {
|
||
display: grid; grid-template-columns: 1fr 1fr;
|
||
gap: 72px; align-items: start;
|
||
}
|
||
@media (max-width: 768px) { .why-us-grid { grid-template-columns: 1fr; gap: 40px; } }
|
||
.why-list { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
|
||
.why-item {
|
||
display: flex; gap: 16px; align-items: flex-start;
|
||
}
|
||
.why-item-icon {
|
||
width: 40px; height: 40px; border-radius: 8px;
|
||
background: rgba(196,154,30,.1); border: 1px solid rgba(196,154,30,.25);
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0; margin-top: 2px;
|
||
}
|
||
.why-item-icon svg { width: 18px; height: 18px; color: var(--gold); }
|
||
.why-item h4 { font-size: .95rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
|
||
.why-item p { font-size: .85rem; color: var(--muted); line-height: 1.65; }
|
||
.why-image-grid {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
|
||
}
|
||
.why-image-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
|
||
.why-image-grid img:first-child { grid-column: span 2; }
|
||
|
||
|
||
/* ── Contact ─────────────────────────────────────── */
|
||
.contact { padding: 96px 0; background: var(--white); }
|
||
.contact-grid {
|
||
display: grid; grid-template-columns: 1fr 1.4fr;
|
||
gap: 64px; align-items: start;
|
||
}
|
||
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
|
||
.contact-info { }
|
||
.contact-offices { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
|
||
.office-card {
|
||
padding: 20px; border-radius: var(--radius);
|
||
border: 1px solid var(--border); background: var(--off-white);
|
||
}
|
||
.office-card h4 {
|
||
font-size: .8rem; font-weight: 600; letter-spacing: .08em;
|
||
text-transform: uppercase; color: var(--ocean); margin-bottom: 6px;
|
||
}
|
||
.office-card p { font-size: .85rem; color: var(--muted); line-height: 1.65; }
|
||
.contact-detail {
|
||
display: flex; align-items: flex-start; gap: 10px;
|
||
margin-top: 16px;
|
||
}
|
||
.contact-detail svg { width: 16px; height: 16px; color: var(--gold); margin-top: 2px; flex-shrink: 0; }
|
||
.contact-detail span { font-size: .85rem; color: var(--muted); }
|
||
.contact-detail a { color: var(--ocean); }
|
||
|
||
.contact-form-wrap {
|
||
background: var(--off-white); border-radius: 12px;
|
||
border: 1px solid var(--border); padding: 36px;
|
||
}
|
||
.contact-form-wrap h3 { font-size: 1.1rem; font-weight: 600; color: var(--navy); margin-bottom: 24px; }
|
||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }
|
||
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
|
||
.form-group label { font-size: .78rem; font-weight: 500; color: var(--text); }
|
||
.form-group input,
|
||
.form-group select,
|
||
.form-group textarea {
|
||
padding: 10px 14px; border-radius: var(--radius);
|
||
border: 1px solid var(--border); background: var(--white);
|
||
font-family: inherit; font-size: .875rem; color: var(--text);
|
||
transition: var(--transition); outline: none;
|
||
}
|
||
.form-group input:focus,
|
||
.form-group select:focus,
|
||
.form-group textarea:focus { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(21,101,168,.1); }
|
||
.form-group textarea { resize: vertical; min-height: 100px; }
|
||
|
||
|
||
/* ── Footer ──────────────────────────────────────── */
|
||
.site-footer { background: var(--navy); color: rgba(255,255,255,.75); }
|
||
.footer-main { padding: 64px 0 40px; }
|
||
.footer-grid {
|
||
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
|
||
gap: 48px;
|
||
}
|
||
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
|
||
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }
|
||
.footer-brand img { height: 40px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .9; }
|
||
.footer-brand p { font-size: .84rem; line-height: 1.7; max-width: 280px; }
|
||
.footer-col h4 {
|
||
font-size: .72rem; font-weight: 700; letter-spacing: .1em;
|
||
text-transform: uppercase; color: var(--gold-lt); margin-bottom: 16px;
|
||
}
|
||
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
|
||
.footer-col ul li a {
|
||
font-size: .84rem; color: rgba(255,255,255,.65); transition: var(--transition);
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.footer-col ul li a::before { content: '›'; color: var(--gold); font-size: 1rem; }
|
||
.footer-col ul li a:hover { color: var(--white); }
|
||
.footer-divider { height: 1px; background: rgba(255,255,255,.1); }
|
||
.footer-bottom {
|
||
padding: 20px 0; display: flex; align-items: center; justify-content: space-between;
|
||
flex-wrap: wrap; gap: 12px;
|
||
}
|
||
.footer-bottom p { font-size: .78rem; color: rgba(255,255,255,.45); }
|
||
.footer-bottom a { color: rgba(255,255,255,.55); }
|
||
.footer-bottom a:hover { color: var(--white); }
|
||
.footer-social { display: flex; gap: 8px; }
|
||
.social-btn {
|
||
width: 34px; height: 34px; border-radius: 50%;
|
||
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: rgba(255,255,255,.65); transition: var(--transition);
|
||
}
|
||
.social-btn:hover { background: rgba(255,255,255,.16); color: var(--white); }
|
||
.social-btn svg { width: 14px; height: 14px; }
|
||
|
||
|
||
/* ── Scroll reveal ───────────────────────────────── */
|
||
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
|
||
.reveal.visible { opacity: 1; transform: none; }
|
||
|
||
/* ── Mobile overrides for added sections ─────────── */
|
||
@media (max-width: 768px) {
|
||
#commitment .reveal > div,
|
||
#technical-consultancy .reveal { grid-template-columns: 1fr !important; gap: 32px !important; }
|
||
#audits .container > .reveal { grid-template-columns: 1fr !important; }
|
||
#career .container > .reveal { grid-template-columns: 1fr !important; }
|
||
#project-management .container > .reveal { grid-template-columns: 1fr !important; }
|
||
#inland-dredging > div { grid-template-columns: 1fr !important; gap: 24px !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Announce Bar -->
|
||
<div class="announce-bar">
|
||
Managed vessels now accepting crew applications — <a href="#contact">Enquire now →</a>
|
||
</div>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="site-nav" id="site-nav">
|
||
<div class="container nav-inner">
|
||
<a href="#" class="nav-brand">
|
||
<img src="assets/img/logo.png" alt="Pelagia Marine Services">
|
||
<div class="nav-brand-text">
|
||
Pelagia Marine Services
|
||
<span>Private Limited</span>
|
||
</div>
|
||
</a>
|
||
|
||
<ul class="nav-links">
|
||
<li class="active"><a href="#">Home</a></li>
|
||
<li>
|
||
<a href="#about">
|
||
Our Company
|
||
<svg class="chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><polyline points="2,4 6,8 10,4"/></svg>
|
||
</a>
|
||
<ul class="dropdown">
|
||
<span class="dropdown-header">Company</span>
|
||
<li><a href="#about">Company Profile</a></li>
|
||
<li><a href="#mission">Mission & Vision</a></li>
|
||
<li><a href="#policies">Our Policies</a></li>
|
||
<li><a href="#commitment">Commitment</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#services">
|
||
Services
|
||
<svg class="chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><polyline points="2,4 6,8 10,4"/></svg>
|
||
</a>
|
||
<ul class="dropdown" style="min-width:260px">
|
||
<span class="dropdown-header">Ship Management</span>
|
||
<li><a href="#ship-management">Ship Management</a></li>
|
||
<li class="dropdown-indent"><a href="#dredging">Dredgers</a></li>
|
||
<li class="dropdown-indent"><a href="#main-fleet">Main Fleet & Others</a></li>
|
||
<div class="dropdown-divider"></div>
|
||
<span class="dropdown-header">Dredging</span>
|
||
<li class="dropdown-indent"><a href="#dredging-projects">Dredging Projects</a></li>
|
||
<li class="dropdown-indent"><a href="#inland-dredging">Inland Dredging</a></li>
|
||
<div class="dropdown-divider"></div>
|
||
<span class="dropdown-header">Consultancy</span>
|
||
<li class="dropdown-indent"><a href="#project-management">Project Management</a></li>
|
||
<li class="dropdown-indent"><a href="#technical-consultancy">Technical Consultancy</a></li>
|
||
<li class="dropdown-indent"><a href="#vetting-cdi">Vetting / CDI</a></li>
|
||
<li class="dropdown-indent"><a href="#audits">Audits</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#career">
|
||
Career
|
||
<svg class="chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><polyline points="2,4 6,8 10,4"/></svg>
|
||
</a>
|
||
<ul class="dropdown">
|
||
<li><a href="#floating-staff">Floating Staff</a></li>
|
||
<li><a href="#shore-staff">Shore Staff</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#contact">Contact Us</a></li>
|
||
</ul>
|
||
|
||
<div class="nav-actions">
|
||
<a href="https://pms.pelagiamarine.com" class="nav-login">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="5" r="3"/><path d="M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6"/></svg>
|
||
Staff Login
|
||
</a>
|
||
</div>
|
||
|
||
<button class="nav-hamburger" id="hamburger" aria-label="Open menu">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero-slides" aria-hidden="true">
|
||
<div class="hero-slide"></div>
|
||
<div class="hero-slide"></div>
|
||
<div class="hero-slide"></div>
|
||
<div class="hero-slide"></div>
|
||
<div class="hero-slide"></div>
|
||
</div>
|
||
<div class="hero-overlay" aria-hidden="true"></div>
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="hero-eyebrow">Est. 2014 · Panvel, Maharashtra, India</div>
|
||
<h1 class="hero-title">
|
||
Maritime Excellence<br>Across Every <em>Ocean</em>
|
||
</h1>
|
||
<p class="hero-desc">
|
||
Total Ship Management, Dredging Operations, and Maritime Consultancy — delivered by seasoned mariners for owners who demand safety and quality without compromise.
|
||
</p>
|
||
<div class="hero-cta">
|
||
<a href="#services" class="btn btn-primary">Our Services</a>
|
||
<a href="#contact" class="btn btn-outline">Get in Touch</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="#about" class="hero-scroll" aria-label="Scroll down">
|
||
<div class="scroll-dot"></div>
|
||
<span>Explore</span>
|
||
</a>
|
||
<div class="hero-badges">
|
||
<div class="hero-badge">
|
||
<div class="hero-badge-num">10+</div>
|
||
<div class="hero-badge-label">Years Active</div>
|
||
</div>
|
||
<div class="hero-badge">
|
||
<div class="hero-badge-num">150+</div>
|
||
<div class="hero-badge-label">Crew On Board</div>
|
||
</div>
|
||
<div class="hero-badge">
|
||
<div class="hero-badge-num">25+</div>
|
||
<div class="hero-badge-label">Years Experience</div>
|
||
</div>
|
||
<div class="hero-badge">
|
||
<div class="hero-badge-num">4</div>
|
||
<div class="hero-badge-label">Global Offices</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About -->
|
||
<section class="about" id="about">
|
||
<div class="container">
|
||
<div class="about-grid">
|
||
<div class="about-text reveal">
|
||
<p class="section-label">Who We Are</p>
|
||
<h2 class="section-title">India's Trusted Maritime Services Partner</h2>
|
||
<div class="divider-gold"></div>
|
||
<p>
|
||
<strong>Pelagia Marine Services Pvt. Ltd. (PMS)</strong> was founded in 2014 by two Master Mariners — both alumni of the world-renowned T.S. Rajendra maritime institute — with over <strong>25 combined years</strong> of sailing experience and 20+ years of professional experience in shipping, offshore, and dredging. The company manages Bulk Carriers, Tankers (Crude, Product, Chemical), Containers, Self-Unloaders, Trans-shippers, OSVs / PSVs (DP1–DP3), Dredgers, and Multi-utility Crafts.
|
||
</p>
|
||
<p>
|
||
In today's competitive and specialised market, as vessel owners continue their attempt to lower costs without compromising on safety and quality, the need to outsource operations to a trusted third party is growing. PMS is well equipped to support and manage the entire gamut of Maritime Services for clients in India and abroad — with close to <strong>150 floating staff</strong> currently on managed vessels and an equal number on leave.
|
||
</p>
|
||
<p>
|
||
Branch offices in <strong>Singapore, Surat</strong> and <strong>Visakhapatnam</strong> enable dedicated attention to our pan-India and global clientele.
|
||
</p>
|
||
<div class="about-certs">
|
||
<span class="cert-pill">RPSL Certified</span>
|
||
<span class="cert-pill">MLC 2006 Compliant</span>
|
||
<span class="cert-pill">ISO 9001</span>
|
||
<span class="cert-pill">ISO 14001</span>
|
||
<span class="cert-pill">OHSAS 18001</span>
|
||
</div>
|
||
<div class="about-stats">
|
||
<div class="stat">
|
||
<div class="stat-num">150+</div>
|
||
<div class="stat-label">Floating Staff</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-num">45+</div>
|
||
<div class="stat-label">Shore-side Years</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-num">4</div>
|
||
<div class="stat-label">Global Offices</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="about-image-wrap reveal" style="transition-delay:.12s">
|
||
<img src="assets/img/home-ship.jpg" alt="Vessel managed by Pelagia Marine Services" loading="lazy">
|
||
<div class="about-badge">
|
||
<div class="about-badge-num">2014</div>
|
||
<div class="about-badge-text">Year Founded</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Mission & Vision -->
|
||
<section class="about" id="mission" style="background:var(--off-white); padding:96px 0;">
|
||
<div class="container">
|
||
<div style="text-align:center; margin-bottom:56px;" class="reveal">
|
||
<p class="section-label">Our Purpose</p>
|
||
<h2 class="section-title">Mission & Vision</h2>
|
||
<div class="divider-gold" style="margin:16px auto 0;"></div>
|
||
</div>
|
||
<div class="about-grid reveal">
|
||
<div class="about-text">
|
||
<p class="section-label">Mission</p>
|
||
<h3 style="font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--navy); margin-bottom:12px;">Driving Excellence Through Professionalism</h3>
|
||
<div class="divider-gold"></div>
|
||
<p>To support responsible and valued customers achieve their business objectives through our professionalism, dedication, enthusiasm and innovation.</p>
|
||
<p class="section-label" style="margin-top:32px;">Vision</p>
|
||
<h3 style="font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--navy); margin-bottom:12px;">Leading Maritime Service Provider</h3>
|
||
<div class="divider-gold"></div>
|
||
<p>To be the leading service provider in ship management and support services globally.</p>
|
||
<div style="margin-top:32px; display:flex; flex-direction:column; gap:14px;">
|
||
<div style="display:flex; gap:12px; align-items:flex-start;">
|
||
<div class="why-item-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M10 2C5.6 2 2 5.6 2 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path d="M7 10l2 2 4-4"/></svg></div>
|
||
<div><h4 style="font-size:.95rem; font-weight:600; color:var(--navy); margin-bottom:2px;">Safety First</h4><p style="font-size:.85rem; color:var(--muted);">Safe operation of the vessels we manage, minimising risk and preventing injury, loss of life and damage to property or the environment.</p></div>
|
||
</div>
|
||
<div style="display:flex; gap:12px; align-items:flex-start;">
|
||
<div class="why-item-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M10 2C5.6 2 2 5.6 2 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path d="M7 10l2 2 4-4"/></svg></div>
|
||
<div><h4 style="font-size:.95rem; font-weight:600; color:var(--navy); margin-bottom:2px;">Environment</h4><p style="font-size:.85rem; color:var(--muted);">Manage all activities to minimise the negative impact to the environment in which we operate.</p></div>
|
||
</div>
|
||
<div style="display:flex; gap:12px; align-items:flex-start;">
|
||
<div class="why-item-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M10 2C5.6 2 2 5.6 2 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path d="M7 10l2 2 4-4"/></svg></div>
|
||
<div><h4 style="font-size:.95rem; font-weight:600; color:var(--navy); margin-bottom:2px;">Quality</h4><p style="font-size:.85rem; color:var(--muted);">Meet and exceed the expectations of our customers while complying with all applicable statutory requirements.</p></div>
|
||
</div>
|
||
<div style="display:flex; gap:12px; align-items:flex-start;">
|
||
<div class="why-item-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M10 2C5.6 2 2 5.6 2 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path d="M7 10l2 2 4-4"/></svg></div>
|
||
<div><h4 style="font-size:.95rem; font-weight:600; color:var(--navy); margin-bottom:2px;">Human Resources</h4><p style="font-size:.85rem; color:var(--muted);">To be the employer of choice for competent seafarers and office staff worldwide.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="transition-delay:.12s;">
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px;">
|
||
<img src="assets/img/our-goals.jpg" alt="Our Goals" style="width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px;">
|
||
<img src="assets/img/our-principles.jpg" alt="Our Principles" style="width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px;">
|
||
<img src="assets/img/our-values.jpg" alt="Our Values" style="width:100%; grid-column:span 2; aspect-ratio:16/7; object-fit:cover; border-radius:8px;">
|
||
</div>
|
||
<div style="background:var(--navy); border-radius:12px; padding:28px; border-left:4px solid var(--gold);">
|
||
<p style="font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:14px;">We Value</p>
|
||
<ul style="list-style:none; display:flex; flex-direction:column; gap:8px;">
|
||
<li style="font-size:.85rem; color:rgba(255,255,255,.8); display:flex; gap:8px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem; line-height:1.4;">›</span>Our People — respecting the individual, treating them fairly and providing opportunities for continuous learning.</li>
|
||
<li style="font-size:.85rem; color:rgba(255,255,255,.8); display:flex; gap:8px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem; line-height:1.4;">›</span>Our Business Partners and adherence to the highest ethical standards.</li>
|
||
<li style="font-size:.85rem; color:rgba(255,255,255,.8); display:flex; gap:8px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem; line-height:1.4;">›</span>Our Independence as a family-owned company with long-term focus on third-party ship management.</li>
|
||
<li style="font-size:.85rem; color:rgba(255,255,255,.8); display:flex; gap:8px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem; line-height:1.4;">›</span>The Good Reputation of Pelagia Marine Services Pvt. Ltd.</li>
|
||
<li style="font-size:.85rem; color:rgba(255,255,255,.8); display:flex; gap:8px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem; line-height:1.4;">›</span>An entrepreneurial approach coupled with rigorous risk management.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Our Policies -->
|
||
<section id="policies" style="padding:96px 0; background:var(--white);">
|
||
<div class="container">
|
||
<div style="text-align:center; margin-bottom:56px;" class="reveal">
|
||
<p class="section-label">How We Operate</p>
|
||
<h2 class="section-title">Our Policies</h2>
|
||
<div class="divider-gold" style="margin:16px auto 0;"></div>
|
||
</div>
|
||
<div class="about-grid">
|
||
<div class="about-text reveal">
|
||
<p class="section-label">Quality Policy</p>
|
||
<h3 style="font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--navy); margin-bottom:12px;">Highest Standards of Integrity</h3>
|
||
<div class="divider-gold"></div>
|
||
<p>Pelagia Marine Services Pvt. Ltd. follows a clearly defined set of policies designed to ensure that all employees maintain the highest possible level of business, social and environmental integrity in all aspects of their activities.</p>
|
||
<p>Pelagia Marine Services Pvt. Ltd. will:</p>
|
||
<ul style="list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:12px;">
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Adopt procedures and disciplines to ensure the system is effectively implemented in line with our organisational goals.</li>
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Undertake relevant skills training and conduct appropriate quality awareness training.</li>
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Establish responsibilities for quality and communicate these clearly to all employees.</li>
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Check the effectiveness and ongoing relevance of policies and procedures by initiating regular reviews.</li>
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Regularly review the needs and expectations of our customers and initiate continuous improvement activities.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal" style="transition-delay:.12s;">
|
||
<img src="assets/img/qaulity-policy.jpg" alt="Quality Policy" style="width:100%; border-radius:12px; box-shadow:var(--shadow-lg); object-fit:cover; margin-bottom:24px;">
|
||
</div>
|
||
</div>
|
||
<div class="about-grid" style="margin-top:64px;">
|
||
<div class="reveal" style="transition-delay:.08s;">
|
||
<img src="assets/img/our-objectives.jpg" alt="OHSE Objectives" style="width:100%; border-radius:12px; box-shadow:var(--shadow-lg); object-fit:cover;">
|
||
</div>
|
||
<div class="about-text reveal" style="transition-delay:.16s;">
|
||
<p class="section-label">OHSE Policy</p>
|
||
<h3 style="font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--navy); margin-bottom:12px;">Occupational Health, Safety & Environment</h3>
|
||
<div class="divider-gold"></div>
|
||
<p>The Company recognises that occupational health, safety and environmental (OHSE) management is essential to achieve our operating objectives. We are committed to prevention of injury and ill health and continual improvement in OHSE performance. Our policy is based on the requirements of the ISM Code, ISO 14001:2004, and OHSAS 18001:2007.</p>
|
||
<p style="margin-top:12px; font-weight:600; color:var(--navy); font-size:.9rem;">Our Objectives:</p>
|
||
<ul style="list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:8px;">
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Provide safe practices in ship operation and a safe working environment.</li>
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Assess all identified risks to ships, personnel and the environment and establish appropriate safeguards.</li>
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Continuously improve safety management skills of personnel ashore and aboard ships, including emergency preparedness.</li>
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Achieve zero pollution, zero accidents and zero incidents.</li>
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Develop a sense of personal responsibility in all personnel towards health, safety and environmental protection.</li>
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Operate within the legal framework determined by statutory requirements of state, port and flag administrations.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Commitment -->
|
||
<section id="commitment" style="padding:80px 0; background:var(--navy);">
|
||
<div class="container">
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;" class="reveal">
|
||
<div>
|
||
<p class="section-label" style="color:var(--gold);">Our Promise</p>
|
||
<h2 class="section-title" style="color:var(--white);">Our Commitment</h2>
|
||
<div class="divider-gold"></div>
|
||
<p style="color:rgba(255,255,255,.75); line-height:1.8; margin-bottom:20px;">Pelagia Marine Services Pvt. Ltd. is highly committed to its Mission, Vision and Policies through its QHSE standards. The Company is committed to help its clients achieve their goals of being more productive and competitive, meeting statutory compliance and maintaining the highest standards of safety and environmental preservation at all times.</p>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px;">
|
||
<div style="background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:16px; border-top:3px solid var(--gold);">
|
||
<div style="font-size:1.4rem; font-weight:700; color:var(--gold-lt);">Zero</div>
|
||
<div style="font-size:.75rem; color:rgba(255,255,255,.65); margin-top:4px; text-transform:uppercase; letter-spacing:.06em;">Pollution Target</div>
|
||
</div>
|
||
<div style="background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:16px; border-top:3px solid var(--gold);">
|
||
<div style="font-size:1.4rem; font-weight:700; color:var(--gold-lt);">Zero</div>
|
||
<div style="font-size:.75rem; color:rgba(255,255,255,.65); margin-top:4px; text-transform:uppercase; letter-spacing:.06em;">Accident Goal</div>
|
||
</div>
|
||
<div style="background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:16px; border-top:3px solid var(--gold);">
|
||
<div style="font-size:1.4rem; font-weight:700; color:var(--gold-lt);">100%</div>
|
||
<div style="font-size:.75rem; color:rgba(255,255,255,.65); margin-top:4px; text-transform:uppercase; letter-spacing:.06em;">Statutory Compliance</div>
|
||
</div>
|
||
<div style="background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:16px; border-top:3px solid var(--gold);">
|
||
<div style="font-size:1.4rem; font-weight:700; color:var(--gold-lt);">24/7</div>
|
||
<div style="font-size:.75rem; color:rgba(255,255,255,.65); margin-top:4px; text-transform:uppercase; letter-spacing:.06em;">Shore Support</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p style="color:rgba(255,255,255,.7); font-size:.85rem; margin-bottom:20px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;">We Systematically:</p>
|
||
<ul style="list-style:none; display:flex; flex-direction:column; gap:10px;">
|
||
<li style="display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:rgba(255,255,255,.75);"><span style="color:var(--gold); font-size:1rem; line-height:1.5;">›</span>Manage risks to as low as reasonably practicable (ALARP)</li>
|
||
<li style="display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:rgba(255,255,255,.75);"><span style="color:var(--gold); font-size:1rem; line-height:1.5;">›</span>Continuously define, monitor and improve performance</li>
|
||
<li style="display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:rgba(255,255,255,.75);"><span style="color:var(--gold); font-size:1rem; line-height:1.5;">›</span>Reward results and recognise achievement</li>
|
||
<li style="display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:rgba(255,255,255,.75);"><span style="color:var(--gold); font-size:1rem; line-height:1.5;">›</span>Maintain cost consciousness without compromising safety</li>
|
||
<li style="display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:rgba(255,255,255,.75);"><span style="color:var(--gold); font-size:1rem; line-height:1.5;">›</span>Encourage initiative and innovation throughout the organisation</li>
|
||
<li style="display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:rgba(255,255,255,.75);"><span style="color:var(--gold); font-size:1rem; line-height:1.5;">›</span>Promote teamwork and streamlined business processes</li>
|
||
<li style="display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:rgba(255,255,255,.75);"><span style="color:var(--gold); font-size:1rem; line-height:1.5;">›</span>Take pride in cultural diversity and benefit from our experienced team ashore and on board</li>
|
||
<li style="display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:rgba(255,255,255,.75);"><span style="color:var(--gold); font-size:1rem; line-height:1.5;">›</span>Provide a modern working environment so all employees can contribute to the best of their abilities</li>
|
||
<li style="display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:rgba(255,255,255,.75);"><span style="color:var(--gold); font-size:1rem; line-height:1.5;">›</span>Are socially responsible in all our operations</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services -->
|
||
<section class="services" id="services">
|
||
<div class="container">
|
||
<div class="services-header reveal">
|
||
<p class="section-label">What We Do</p>
|
||
<h2 class="section-title">Comprehensive Maritime Solutions</h2>
|
||
<div class="divider-gold"></div>
|
||
<p class="section-lead">
|
||
From full technical and crew management to dredging operations and specialist consultancy, PMS delivers end-to-end maritime services.
|
||
</p>
|
||
</div>
|
||
<div class="services-grid">
|
||
<!-- Ship Management -->
|
||
<div class="service-card reveal">
|
||
<div class="service-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||
<path d="M3 17l2-8h14l2 8"/><path d="M3 17H21"/><path d="M7 17v2"/><path d="M17 17v2"/>
|
||
<path d="M12 9V5"/><path d="M9 5h6"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Ship Management</h3>
|
||
<p>PMS provides Total Ship Management Solutions that extend far beyond the normal limits — covering technical, crew, commercial, and QHSE management. A dedicated shore team of ex-Master Mariners, ex-Chief Engineers, Marine Personnel Officers, Technical Officers, and Accountants ensures round-the-clock support. Bespoke, ship-specific IT systems span crew management, purchase management, and QHSE management.</p>
|
||
<a href="#contact" class="service-card-link">
|
||
Learn more
|
||
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h8M8 4l3 3-3 3"/></svg>
|
||
</a>
|
||
</div>
|
||
<!-- Dredging -->
|
||
<div class="service-card reveal" style="transition-delay:.06s">
|
||
<div class="service-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||
<path d="M2 20h20M4 20V10l4-6h8l4 6v10"/>
|
||
<path d="M9 20v-6h6v6"/><circle cx="12" cy="8" r="1.5"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Dredging Operations</h3>
|
||
<p>A pioneer in third-party dredger management under the ISM Code, PMS manages Cutter Suction Dredgers (CSD) and Trailer Suction Hopper Dredgers (TSHD) — including the fleet of Dredging Corporation of India (DCI), a Government of India undertaking. Highly skilled personnel, professional inventory management, and a strong focus on minimising downtime deliver accurate performance under the most demanding conditions.</p>
|
||
<a href="#contact" class="service-card-link">
|
||
Learn more
|
||
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h8M8 4l3 3-3 3"/></svg>
|
||
</a>
|
||
</div>
|
||
<!-- Main Fleet -->
|
||
<div class="service-card reveal" style="transition-delay:.12s">
|
||
<div class="service-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||
<path d="M3 18l3-10h12l3 10H3z"/><path d="M7 8V5h10v3"/>
|
||
<path d="M12 5v3"/><path d="M7 13h10"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Main Fleet & Others</h3>
|
||
<p>PMS operates its own recruitment cell supplying experienced, competent seafarers to all vessel types on a cost or lump-sum basis. Since 2016, the offering expanded from crew management into full technical management and newbuilding supervision — covering bulk carriers, reefers, TSHDs, CSDs, OSVs, tugs, and DP-class vessels — with transparent reporting on vessel performance and financials.</p>
|
||
<a href="#contact" class="service-card-link">
|
||
Learn more
|
||
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h8M8 4l3 3-3 3"/></svg>
|
||
</a>
|
||
</div>
|
||
<!-- Consultancy -->
|
||
<div class="service-card reveal" style="transition-delay:.18s">
|
||
<div class="service-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||
<rect x="4" y="3" width="16" height="18" rx="2"/>
|
||
<path d="M8 7h8M8 11h8M8 15h5"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Project Management Consultancy</h3>
|
||
<p>End-to-end project management for complex maritime, dredging, and offshore projects. PMS also provides Technical Consultancy — covering condition surveys, pre-purchase inspections, and specialist advisory — delivered by ex-mariners who understand both the operational and commercial dimensions of every project.</p>
|
||
<a href="#contact" class="service-card-link">
|
||
Learn more
|
||
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h8M8 4l3 3-3 3"/></svg>
|
||
</a>
|
||
</div>
|
||
<!-- Vetting/CDI -->
|
||
<div class="service-card reveal" style="transition-delay:.24s">
|
||
<div class="service-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||
<path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Vetting / CDI</h3>
|
||
<p>Comprehensive vetting preparation and Chemical Distribution Institute (CDI) inspections. PMS assists ship owners and operators to prepare for SIRE, CDI, and internal vetting — leveraging ex-mariner inspectors with deep knowledge of tanker and chemical carrier operations.</p>
|
||
<a href="#contact" class="service-card-link">
|
||
Learn more
|
||
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h8M8 4l3 3-3 3"/></svg>
|
||
</a>
|
||
</div>
|
||
<!-- Audits -->
|
||
<div class="service-card reveal" style="transition-delay:.30s">
|
||
<div class="service-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||
<circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
|
||
<path d="M8 11l2 2 4-4"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Audits & Technical Consultancy</h3>
|
||
<p>Trained and certified auditors — Master Mariners and Chief Engineers — assist owners and operators to raise the bar in professional ship management. <strong>Shipboard:</strong> ISM / ISPS, ISO, Navigation, VDR Analysis, MARPOL Compliance, Safety, USCG Preparation. <strong>Office:</strong> TMSA, ISO Gap Analysis. Also covers technical inspections, condition surveys, and specialised consultancy.</p>
|
||
<a href="#contact" class="service-card-link">
|
||
Learn more
|
||
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h8M8 4l3 3-3 3"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Ship Management Details -->
|
||
<section id="ship-management" style="padding:96px 0; background:var(--white);">
|
||
<div class="container">
|
||
<div class="about-grid">
|
||
<div class="about-text reveal">
|
||
<p class="section-label">Ship Management</p>
|
||
<h2 class="section-title">Total Ship Management Solutions</h2>
|
||
<div class="divider-gold"></div>
|
||
<p>Pelagia Marine Services Pvt. Ltd. (PMS) provides Total Ship Management Solutions with a vast and experienced pool of floating and shore staff. Our ship management services extend far beyond the normal limits — with carefully selected technologies, people, and practices earning us a reputation for safety and quality without compromise.</p>
|
||
<p>A dedicated office team of marine professionals supports floating staff round the clock, including:</p>
|
||
<ul style="list-style:none; display:flex; flex-direction:column; gap:8px; margin:16px 0;">
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Ex-Master Mariners and ex-Chief Engineers</li>
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Marine Personnel Officers and Technical Officers</li>
|
||
<li style="font-size:.875rem; color:var(--muted); display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span>Accountants and commercial management staff</li>
|
||
</ul>
|
||
<p>Strong IT systems are the backbone of our operations — including web-based Crew Management, Purchase Management, and QHSE Management Systems. Ship-specific planned maintenance systems can be developed on request by our experienced software team.</p>
|
||
<div class="about-certs" style="margin-top:24px;">
|
||
<span class="cert-pill">Technical Management</span>
|
||
<span class="cert-pill">Crew Management</span>
|
||
<span class="cert-pill">QHSE Management</span>
|
||
<span class="cert-pill">Commercial Management</span>
|
||
<span class="cert-pill">24/7 Support</span>
|
||
</div>
|
||
</div>
|
||
<div class="about-image-wrap reveal" style="transition-delay:.12s;">
|
||
<img src="assets/img/ship-management-services-1.jpg" alt="Ship Management Services" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:48px;" class="reveal">
|
||
<img src="assets/img/ship-management-services-2.jpg" alt="Ship Management Operations" loading="lazy" style="width:100%; border-radius:12px; box-shadow:var(--shadow-lg); object-fit:cover; max-height:360px;">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Dredging Details -->
|
||
<section id="dredging" style="padding:96px 0; background:var(--off-white);">
|
||
<div class="container">
|
||
<div style="text-align:center; margin-bottom:56px;" class="reveal">
|
||
<p class="section-label">Dredging Services</p>
|
||
<h2 class="section-title">Pioneer in Dredger Management</h2>
|
||
<div class="divider-gold" style="margin:16px auto 0;"></div>
|
||
</div>
|
||
<div class="about-grid">
|
||
<div class="about-image-wrap reveal">
|
||
<img src="assets/img/dregers-1.jpg" alt="Dredging Operations" loading="lazy">
|
||
</div>
|
||
<div class="about-text reveal" style="transition-delay:.12s;">
|
||
<p class="section-label">Dredgers</p>
|
||
<h3 style="font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--navy); margin-bottom:12px;">ISM-Compliant Dredger Management</h3>
|
||
<div class="divider-gold"></div>
|
||
<p>Dredging is a highly skilled and specialised field. PMS is a <strong>pioneer in third-party dredger management</strong> in compliance with the ISM Code, providing total management services to dredger owners in India and abroad — including Dredging Corporation of India (DCI), a Government of India undertaking.</p>
|
||
<p>PMS manages unique self-propelled Cutter Suction Dredgers (CSD) and Trailer Suction Hopper Dredgers (TSHD) for DCI and other clients.</p>
|
||
<div style="margin-top:20px; display:flex; flex-direction:column; gap:10px;">
|
||
<div style="display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span><span style="font-size:.875rem; color:var(--muted);">Highly skilled floating staff on board at all times</span></div>
|
||
<div style="display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span><span style="font-size:.875rem; color:var(--muted);">Professional team network on site and at key locations</span></div>
|
||
<div style="display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span><span style="font-size:.875rem; color:var(--muted);">Proper inventory management of large number of spares on specialised vessels</span></div>
|
||
<div style="display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span><span style="font-size:.875rem; color:var(--muted);">Full HSEQ Management Systems compliance</span></div>
|
||
<div style="display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span><span style="font-size:.875rem; color:var(--muted);">Operating vessels with no or minimum downtime — understanding the capital-intensive nature of the dredging industry</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px;" class="reveal">
|
||
<img src="assets/img/dregers-2.jpg" alt="Cutter Suction Dredger" loading="lazy" style="width:100%; border-radius:8px; aspect-ratio:4/3; object-fit:cover;">
|
||
<img src="assets/img/dregers-3.jpg" alt="Hopper Dredger" loading="lazy" style="width:100%; border-radius:8px; aspect-ratio:4/3; object-fit:cover;">
|
||
</div>
|
||
|
||
<!-- Dredging Projects sub-section -->
|
||
<div id="dredging-projects" style="margin-top:80px; padding-top:64px; border-top:1px solid var(--border);" class="reveal">
|
||
<p class="section-label">Dredging Projects</p>
|
||
<h3 style="font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--navy); margin-bottom:12px;">Project Execution & Track Record</h3>
|
||
<div class="divider-gold"></div>
|
||
<p style="color:var(--muted); max-width:720px;">The company also undertakes dredging projects and has successfully executed trenching projects in <strong>Cuddalore (IL&FS)</strong> and <strong>Paradip (IOC)</strong>. Our project management capability spans the full lifecycle from preliminary investigations through completion.</p>
|
||
</div>
|
||
|
||
<!-- Inland Dredging sub-section -->
|
||
<div id="inland-dredging" style="margin-top:48px; background:var(--white); border-radius:12px; padding:36px; border:1px solid var(--border);" class="reveal">
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;">
|
||
<div>
|
||
<p class="section-label">Inland Dredging</p>
|
||
<h3 style="font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--navy); margin-bottom:12px;">River & Canal Dredging</h3>
|
||
<div class="divider-gold"></div>
|
||
<p style="color:var(--muted);">The inland waterways sector is expected to provide ample opportunities for river and canal deepening and dredging work in the next decade, with the private sector playing a major role. PMS is planning to procure new inland dredgers to capitalise on this growing opportunity.</p>
|
||
</div>
|
||
<div>
|
||
<p style="font-size:.875rem; font-weight:600; color:var(--navy); margin-bottom:12px;">Specialising In:</p>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
|
||
<div style="background:var(--off-white); border:1px solid var(--border); border-radius:8px; padding:14px; display:flex; gap:10px; align-items:center;"><span style="width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;"></span><span style="font-size:.84rem; color:var(--text);">River Dredging</span></div>
|
||
<div style="background:var(--off-white); border:1px solid var(--border); border-radius:8px; padding:14px; display:flex; gap:10px; align-items:center;"><span style="width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;"></span><span style="font-size:.84rem; color:var(--text);">Canal Dredging</span></div>
|
||
<div style="background:var(--off-white); border:1px solid var(--border); border-radius:8px; padding:14px; display:flex; gap:10px; align-items:center;"><span style="width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;"></span><span style="font-size:.84rem; color:var(--text);">Land Reclamation</span></div>
|
||
<div style="background:var(--off-white); border:1px solid var(--border); border-radius:8px; padding:14px; display:flex; gap:10px; align-items:center;"><span style="width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;"></span><span style="font-size:.84rem; color:var(--text);">River Flood Mitigation</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Fleet Strip -->
|
||
<section class="fleet-strip">
|
||
<div class="container">
|
||
<div class="fleet-strip-inner">
|
||
<div class="reveal">
|
||
<p class="section-label" style="color:var(--gold)">Fleet Types</p>
|
||
<h2 class="section-title">Vessels We Manage</h2>
|
||
<div class="divider-gold"></div>
|
||
<p class="section-lead">
|
||
Our experienced team has professionally handled a diverse range of vessel types across worldwide operations.
|
||
</p>
|
||
</div>
|
||
<div class="fleet-types reveal" style="transition-delay:.1s">
|
||
<div class="fleet-type"><span class="fleet-type-dot"></span><span>Bulk Carriers</span></div>
|
||
<div class="fleet-type"><span class="fleet-type-dot"></span><span>Crude Tankers</span></div>
|
||
<div class="fleet-type"><span class="fleet-type-dot"></span><span>Product Tankers</span></div>
|
||
<div class="fleet-type"><span class="fleet-type-dot"></span><span>Chemical Tankers</span></div>
|
||
<div class="fleet-type"><span class="fleet-type-dot"></span><span>Container Vessels</span></div>
|
||
<div class="fleet-type"><span class="fleet-type-dot"></span><span>OSV / PSV (DP1–DP3)</span></div>
|
||
<div class="fleet-type"><span class="fleet-type-dot"></span><span>Dredgers</span></div>
|
||
<div class="fleet-type"><span class="fleet-type-dot"></span><span>Self-Unloaders</span></div>
|
||
<div class="fleet-type"><span class="fleet-type-dot"></span><span>Trans-shippers</span></div>
|
||
<div class="fleet-type"><span class="fleet-type-dot"></span><span>Multi-utility Craft</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Main Fleet & Others -->
|
||
<section id="main-fleet" style="padding:96px 0; background:var(--off-white);">
|
||
<div class="container">
|
||
<div class="about-grid">
|
||
<div class="about-text reveal">
|
||
<p class="section-label">Main Fleet & Others</p>
|
||
<h2 class="section-title">Crew & Technical Management</h2>
|
||
<div class="divider-gold"></div>
|
||
<p>Pelagia Marine Services Pvt. Ltd. has its own recruitment cell capable of providing experienced and competent seafarers for all types of vessels — both for those with full technical management and for clients who wish to self-manage. Solutions are tailored to individual needs with quality as the first priority.</p>
|
||
<p>In 2016, PMS extended its scope from crew management to include <strong>full technical management and newbuilding supervision</strong>, offering complete ship management services. Rather than pursuing quick growth, the focus remains on sustainable, first-class care for vessels with clear-cut, transparent reporting on vessel performance and financial situation.</p>
|
||
<div style="margin-top:20px; display:flex; flex-direction:column; gap:8px;">
|
||
<div style="display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span><span style="font-size:.875rem; color:var(--muted);">Stringent recruitment checks ensuring first-rate seafarer performance</span></div>
|
||
<div style="display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span><span style="font-size:.875rem; color:var(--muted);">Fully MLC 2006 compliant crew management</span></div>
|
||
<div style="display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span><span style="font-size:.875rem; color:var(--muted);">Allocation based on seafarer availability and client requirements</span></div>
|
||
<div style="display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span><span style="font-size:.875rem; color:var(--muted);">Commercial team offering solutions on cost or lump-sum basis</span></div>
|
||
<div style="display:flex; gap:10px; align-items:flex-start;"><span style="color:var(--gold); font-size:1rem;">›</span><span style="font-size:.875rem; color:var(--muted);">Cost savings never compromise quality and safety standards</span></div>
|
||
</div>
|
||
<div class="about-certs" style="margin-top:24px;">
|
||
<span class="cert-pill">Bulk Carriers</span>
|
||
<span class="cert-pill">Reefers</span>
|
||
<span class="cert-pill">TSHDs / CSDs</span>
|
||
<span class="cert-pill">OSVs & Tugs</span>
|
||
<span class="cert-pill">DP Vessels</span>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="transition-delay:.12s;">
|
||
<img src="assets/img/main-fleet-1.jpg" alt="Main Fleet Management" loading="lazy" style="width:100%; border-radius:12px; box-shadow:var(--shadow-lg); object-fit:cover; margin-bottom:16px;">
|
||
<img src="assets/img/main-fleet-2.jpg" alt="Fleet Operations" loading="lazy" style="width:100%; border-radius:12px; box-shadow:var(--shadow-lg); object-fit:cover;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Project Management Consultancy -->
|
||
<section id="project-management" style="padding:96px 0; background:var(--white);">
|
||
<div class="container">
|
||
<div style="text-align:center; margin-bottom:56px;" class="reveal">
|
||
<p class="section-label">Consultancy</p>
|
||
<h2 class="section-title">Project Management Consultancy</h2>
|
||
<div class="divider-gold" style="margin:16px auto 0;"></div>
|
||
<p class="section-lead" style="margin:16px auto 0;">PMS supports dredger owners and charterers to preserve high-value assets and execute complex maritime projects efficiently and professionally.</p>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:32px;" class="reveal">
|
||
<div style="background:var(--off-white); border:1px solid var(--border); border-radius:12px; padding:32px;">
|
||
<div class="service-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 7h8M8 11h8M8 15h5"/></svg></div>
|
||
<h3 style="font-size:1.05rem; font-weight:600; color:var(--navy); margin-bottom:12px;">General Supervision</h3>
|
||
<ul style="list-style:none; display:flex; flex-direction:column; gap:7px;">
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Day-to-day project supervision with reference to contract agreement</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Project monitoring, quality control and achievement of targets</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Scrutinise dredging contractors' detailed work programme</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Supervision and monitoring of maintenance dredging work</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Prepare and monitor project network, bar chart, and monthly progress reports</li>
|
||
</ul>
|
||
</div>
|
||
<div style="background:var(--off-white); border:1px solid var(--border); border-radius:12px; padding:32px;">
|
||
<div class="service-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 17l2-8h14l2 8"/><path d="M3 17H21"/><path d="M12 9V5"/><path d="M9 5h6"/></svg></div>
|
||
<h3 style="font-size:1.05rem; font-weight:600; color:var(--navy); margin-bottom:12px;">Dredging Supervision</h3>
|
||
<ul style="list-style:none; display:flex; flex-direction:column; gap:7px;">
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Regular inspection of contractor's equipment, plant, and machinery</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Ensure compliance with tender stipulations and quantity calculations</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Provide detailed completion reports with photographs and calculations</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Deploy expert hydrographic survey supervision as required</li>
|
||
</ul>
|
||
</div>
|
||
<div style="background:var(--off-white); border:1px solid var(--border); border-radius:12px; padding:32px;">
|
||
<div class="service-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l3 3"/></svg></div>
|
||
<h3 style="font-size:1.05rem; font-weight:600; color:var(--navy); margin-bottom:12px;">Operations & Maintenance Manuals</h3>
|
||
<ul style="list-style:none; display:flex; flex-direction:column; gap:7px;">
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Preparation of manuals per Standard Operational Practices (SOP)</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Training of officers and staff on shore and on board dredgers</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Audits and mechanisms to ensure best practices are followed</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Optimise and improve production and performance of dredgers</li>
|
||
</ul>
|
||
</div>
|
||
<div style="background:var(--off-white); border:1px solid var(--border); border-radius:12px; padding:32px;">
|
||
<div class="service-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 20H5a2 2 0 01-2-2V7l3-4h12l3 4v11a2 2 0 01-2 2h-4"/><path d="M12 12v8M9 15l3 3 3-3"/></svg></div>
|
||
<h3 style="font-size:1.05rem; font-weight:600; color:var(--navy); margin-bottom:12px;">Production Estimates & New Projects</h3>
|
||
<ul style="list-style:none; display:flex; flex-direction:column; gap:7px;">
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Preliminary investigations including geo-technical and bathymetric survey analysis</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Feasibility studies and equipment evaluation & selection</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Production estimates and optimisation of dredging activities</li>
|
||
<li style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Technical solutions for challenges encountered during project execution</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Technical Consultancy -->
|
||
<section id="technical-consultancy" style="padding:80px 0; background:var(--navy);">
|
||
<div class="container">
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;" class="reveal">
|
||
<div>
|
||
<p class="section-label" style="color:var(--gold);">Technical Consultancy</p>
|
||
<h2 class="section-title" style="color:var(--white);">Expert Technical Advisory Services</h2>
|
||
<div class="divider-gold"></div>
|
||
<p style="color:rgba(255,255,255,.75); margin-bottom:20px;">Through its team of experienced and capable technical experts, PMS is equipped to provide professional technical consultancy services including but not limited to:</p>
|
||
<ul style="list-style:none; display:flex; flex-direction:column; gap:12px;">
|
||
<li style="display:flex; gap:12px; align-items:flex-start;">
|
||
<div style="width:32px; height:32px; border-radius:8px; background:rgba(196,154,30,.15); border:1px solid rgba(196,154,30,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0;"><svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="var(--gold)" stroke-width="1.6"><path d="M10 2C5.6 2 2 5.6 2 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path d="M7 10l2 2 4-4"/></svg></div>
|
||
<span style="font-size:.875rem; color:rgba(255,255,255,.8);">Technical inspection of vessels to assess the condition of on-board machinery</span>
|
||
</li>
|
||
<li style="display:flex; gap:12px; align-items:flex-start;">
|
||
<div style="width:32px; height:32px; border-radius:8px; background:rgba(196,154,30,.15); border:1px solid rgba(196,154,30,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0;"><svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="var(--gold)" stroke-width="1.6"><path d="M10 2C5.6 2 2 5.6 2 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path d="M7 10l2 2 4-4"/></svg></div>
|
||
<span style="font-size:.875rem; color:rgba(255,255,255,.8);">Periodical machinery performance checks — repairs/renewals requirements and improvement projections</span>
|
||
</li>
|
||
<li style="display:flex; gap:12px; align-items:flex-start;">
|
||
<div style="width:32px; height:32px; border-radius:8px; background:rgba(196,154,30,.15); border:1px solid rgba(196,154,30,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0;"><svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="var(--gold)" stroke-width="1.6"><path d="M10 2C5.6 2 2 5.6 2 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path d="M7 10l2 2 4-4"/></svg></div>
|
||
<span style="font-size:.875rem; color:rgba(255,255,255,.8);">Routine maintenance review with suggestions for improvement and supervised repair works with quality assurance</span>
|
||
</li>
|
||
<li style="display:flex; gap:12px; align-items:flex-start;">
|
||
<div style="width:32px; height:32px; border-radius:8px; background:rgba(196,154,30,.15); border:1px solid rgba(196,154,30,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0;"><svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="var(--gold)" stroke-width="1.6"><path d="M10 2C5.6 2 2 5.6 2 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path d="M7 10l2 2 4-4"/></svg></div>
|
||
<span style="font-size:.875rem; color:rgba(255,255,255,.8);">Identification of all spares, long lead supply items, and items required for statutory surveys</span>
|
||
</li>
|
||
<li style="display:flex; gap:12px; align-items:flex-start;">
|
||
<div style="width:32px; height:32px; border-radius:8px; background:rgba(196,154,30,.15); border:1px solid rgba(196,154,30,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0;"><svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="var(--gold)" stroke-width="1.6"><path d="M10 2C5.6 2 2 5.6 2 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path d="M7 10l2 2 4-4"/></svg></div>
|
||
<span style="font-size:.875rem; color:rgba(255,255,255,.8);">Consultancy during dry-docking</span>
|
||
</li>
|
||
<li style="display:flex; gap:12px; align-items:flex-start;">
|
||
<div style="width:32px; height:32px; border-radius:8px; background:rgba(196,154,30,.15); border:1px solid rgba(196,154,30,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0;"><svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="var(--gold)" stroke-width="1.6"><path d="M10 2C5.6 2 2 5.6 2 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path d="M7 10l2 2 4-4"/></svg></div>
|
||
<span style="font-size:.875rem; color:rgba(255,255,255,.8);">Pre-purchase inspection and evaluation of vessels</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div style="background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:36px;">
|
||
<p style="font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:20px;">Vessel Types We Inspect</p>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
|
||
<div style="background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:12px 16px; font-size:.84rem; color:rgba(255,255,255,.8);">Bulk Carriers</div>
|
||
<div style="background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:12px 16px; font-size:.84rem; color:rgba(255,255,255,.8);">Tankers</div>
|
||
<div style="background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:12px 16px; font-size:.84rem; color:rgba(255,255,255,.8);">Dredgers</div>
|
||
<div style="background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:12px 16px; font-size:.84rem; color:rgba(255,255,255,.8);">OSVs / PSVs</div>
|
||
<div style="background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:12px 16px; font-size:.84rem; color:rgba(255,255,255,.8);">Container Vessels</div>
|
||
<div style="background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:12px 16px; font-size:.84rem; color:rgba(255,255,255,.8);">Offshore Craft</div>
|
||
</div>
|
||
<a href="#contact" class="btn btn-primary" style="margin-top:28px; width:100%; justify-content:center;">Request Consultancy</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Vetting / CDI -->
|
||
<section id="vetting-cdi" style="padding:96px 0; background:var(--white);">
|
||
<div class="container">
|
||
<div class="about-grid">
|
||
<div class="about-text reveal">
|
||
<p class="section-label">Vetting & CDI</p>
|
||
<h2 class="section-title">Vetting / CDI Inspection Support</h2>
|
||
<div class="divider-gold"></div>
|
||
<p>In the modern tanker business, vetting/CDI inspection plays a vital role in the commercial availability of the vessel. One poor inspection result can severely dent the earning capability of any vessel, its owner and/or charterer.</p>
|
||
<p>Our team at Pelagia Marine Services Pvt. Ltd., having served as Masters and Chief Engineers on all types of tankers, understand the significance of a good vetting/CDI inspection result.</p>
|
||
<p style="margin-top:16px; font-weight:600; color:var(--navy);">We support our clients in the following manner:</p>
|
||
<div style="margin-top:16px; display:flex; flex-direction:column; gap:14px;">
|
||
<div style="display:flex; gap:14px; align-items:flex-start;">
|
||
<div style="width:28px; height:28px; border-radius:50%; background:var(--gold); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0;">1</div>
|
||
<p style="font-size:.875rem; color:var(--muted);">Prepare the vessel for forthcoming vetting inspection.</p>
|
||
</div>
|
||
<div style="display:flex; gap:14px; align-items:flex-start;">
|
||
<div style="width:28px; height:28px; border-radius:50%; background:var(--gold); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0;">2</div>
|
||
<p style="font-size:.875rem; color:var(--muted);">Carry out a pre-vetting inspection and help ship staff implement necessary corrective/preventive actions, effectively closing observations noted.</p>
|
||
</div>
|
||
<div style="display:flex; gap:14px; align-items:flex-start;">
|
||
<div style="width:28px; height:28px; border-radius:50%; background:var(--gold); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0;">3</div>
|
||
<p style="font-size:.875rem; color:var(--muted);">Advise ship owner to take necessary corrective and preventive action on vetting observations.</p>
|
||
</div>
|
||
<div style="display:flex; gap:14px; align-items:flex-start;">
|
||
<div style="width:28px; height:28px; border-radius:50%; background:var(--gold); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0;">4</div>
|
||
<p style="font-size:.875rem; color:var(--muted);">Assist ship owner to comment effectively on vetting observations so as to reduce the risk of failure.</p>
|
||
</div>
|
||
</div>
|
||
<div class="about-certs" style="margin-top:28px;">
|
||
<span class="cert-pill">SIRE Preparation</span>
|
||
<span class="cert-pill">CDI Inspection</span>
|
||
<span class="cert-pill">Internal Vetting</span>
|
||
<span class="cert-pill">Crude Tankers</span>
|
||
<span class="cert-pill">Chemical Carriers</span>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="transition-delay:.12s;">
|
||
<div style="background:var(--off-white); border:1px solid var(--border); border-radius:12px; padding:36px; height:100%;">
|
||
<p style="font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ocean); margin-bottom:20px;">Why Our Vetting Team</p>
|
||
<div style="display:flex; flex-direction:column; gap:20px;">
|
||
<div style="display:flex; gap:14px; align-items:flex-start;">
|
||
<div class="why-item-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M10 2l2 6h6l-5 3.5 2 6L10 14l-5 3.5 2-6L2 8h6z"/></svg></div>
|
||
<div><h4 style="font-size:.9rem; font-weight:600; color:var(--navy); margin-bottom:4px;">Ex-Mariner Inspectors</h4><p style="font-size:.84rem; color:var(--muted);">Team members have served as Masters and Chief Engineers on tankers and chemical carriers.</p></div>
|
||
</div>
|
||
<div style="display:flex; gap:14px; align-items:flex-start;">
|
||
<div class="why-item-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="3" width="14" height="14" rx="2"/><path d="M7 10h6M10 7v6"/></svg></div>
|
||
<div><h4 style="font-size:.9rem; font-weight:600; color:var(--navy); margin-bottom:4px;">Operational Expertise</h4><p style="font-size:.84rem; color:var(--muted);">Deep knowledge of tanker and chemical carrier operations translates into practical, effective vetting support.</p></div>
|
||
</div>
|
||
<div style="display:flex; gap:14px; align-items:flex-start;">
|
||
<div class="why-item-icon"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="10" cy="10" r="8"/><path d="M10 6v4l3 3"/></svg></div>
|
||
<div><h4 style="font-size:.9rem; font-weight:600; color:var(--navy); margin-bottom:4px;">Commercial Awareness</h4><p style="font-size:.84rem; color:var(--muted);">We understand the commercial impact of vetting results and work to protect the earning capability of your vessel.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Audits -->
|
||
<section id="audits" style="padding:96px 0; background:var(--off-white);">
|
||
<div class="container">
|
||
<div style="text-align:center; margin-bottom:56px;" class="reveal">
|
||
<p class="section-label">Audits</p>
|
||
<h2 class="section-title">Audits & Technical Consultancy</h2>
|
||
<div class="divider-gold" style="margin:16px auto 0;"></div>
|
||
<p class="section-lead" style="margin:16px auto 0;">PMS has a team of trained and certified auditors comprising Master Mariners and Chief Engineers with rich audit and TMSA review experience, ready to raise the bar in professional ship management.</p>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;" class="reveal">
|
||
<div>
|
||
<img src="assets/img/tmsa-audit-1.jpg" alt="Shipboard Audits" loading="lazy" style="width:100%; border-radius:12px; box-shadow:var(--shadow-lg); object-fit:cover; margin-bottom:24px;">
|
||
<div style="background:var(--white); border:1px solid var(--border); border-radius:12px; padding:28px;">
|
||
<h3 style="font-size:1rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin-bottom:16px;">Shipboard Audits</h3>
|
||
<div style="display:flex; flex-direction:column; gap:10px;">
|
||
<div style="display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--off-white); border-radius:6px; font-size:.875rem; color:var(--text);"><span style="width:6px; height:6px; border-radius:50%; background:var(--ocean); flex-shrink:0;"></span>ISM / ISPS</div>
|
||
<div style="display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--off-white); border-radius:6px; font-size:.875rem; color:var(--text);"><span style="width:6px; height:6px; border-radius:50%; background:var(--ocean); flex-shrink:0;"></span>ISO</div>
|
||
<div style="display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--off-white); border-radius:6px; font-size:.875rem; color:var(--text);"><span style="width:6px; height:6px; border-radius:50%; background:var(--ocean); flex-shrink:0;"></span>Navigation</div>
|
||
<div style="display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--off-white); border-radius:6px; font-size:.875rem; color:var(--text);"><span style="width:6px; height:6px; border-radius:50%; background:var(--ocean); flex-shrink:0;"></span>VDR Analysis</div>
|
||
<div style="display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--off-white); border-radius:6px; font-size:.875rem; color:var(--text);"><span style="width:6px; height:6px; border-radius:50%; background:var(--ocean); flex-shrink:0;"></span>MARPOL Compliance</div>
|
||
<div style="display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--off-white); border-radius:6px; font-size:.875rem; color:var(--text);"><span style="width:6px; height:6px; border-radius:50%; background:var(--ocean); flex-shrink:0;"></span>Safety</div>
|
||
<div style="display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--off-white); border-radius:6px; font-size:.875rem; color:var(--text);"><span style="width:6px; height:6px; border-radius:50%; background:var(--ocean); flex-shrink:0;"></span>USCG Preparation</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<img src="assets/img/tmsa-audit-2.jpg" alt="Office Audits" loading="lazy" style="width:100%; border-radius:12px; box-shadow:var(--shadow-lg); object-fit:cover; margin-bottom:24px;">
|
||
<div style="background:var(--white); border:1px solid var(--border); border-radius:12px; padding:28px;">
|
||
<h3 style="font-size:1rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin-bottom:16px;">Office Audits</h3>
|
||
<div style="display:flex; flex-direction:column; gap:10px;">
|
||
<div style="display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--off-white); border-radius:6px; font-size:.875rem; color:var(--text);"><span style="width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0;"></span>TMSA</div>
|
||
<div style="display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--off-white); border-radius:6px; font-size:.875rem; color:var(--text);"><span style="width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0;"></span>ISO Gap Analysis</div>
|
||
</div>
|
||
<div style="margin-top:24px; padding:20px; background:var(--off-white); border-radius:8px; border-left:4px solid var(--gold);">
|
||
<p style="font-size:.875rem; color:var(--muted); line-height:1.7;">Our experienced PMS team is willing to assist ship owners and operators to raise the bar in professional ship management through audits, self-assessments, and reviews. Auditors are trained and certified with rich TMSA review experience.</p>
|
||
</div>
|
||
<a href="#contact" class="btn btn-navy" style="margin-top:24px; width:100%; justify-content:center;">Request an Audit</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Career -->
|
||
<section id="career" style="padding:96px 0; background:var(--white);">
|
||
<div class="container">
|
||
<div style="text-align:center; margin-bottom:56px;" class="reveal">
|
||
<p class="section-label">Join Our Team</p>
|
||
<h2 class="section-title">Career Opportunities</h2>
|
||
<div class="divider-gold" style="margin:16px auto 0;"></div>
|
||
<p class="section-lead" style="margin:16px auto 0;">Pelagia Marine Services is always looking for dedicated, experienced maritime professionals to join our growing team — both at sea and ashore.</p>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:32px;" class="reveal">
|
||
<div id="floating-staff" style="background:var(--off-white); border:1px solid var(--border); border-radius:12px; padding:40px;">
|
||
<div class="service-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 17l2-8h14l2 8"/><path d="M3 17H21"/><path d="M12 9V5"/><path d="M9 5h6"/></svg>
|
||
</div>
|
||
<h3 style="font-size:1.2rem; font-weight:600; color:var(--navy); margin-bottom:12px;">Floating Staff</h3>
|
||
<div class="divider-gold"></div>
|
||
<p style="font-size:.875rem; color:var(--muted); line-height:1.7; margin-bottom:20px;">We are actively recruiting qualified and experienced seafarers for our managed fleet of Bulk Carriers, Tankers, Dredgers, OSVs, and more. All positions are MLC 2006 compliant with competitive remuneration.</p>
|
||
<div style="display:flex; flex-direction:column; gap:8px; margin-bottom:24px;">
|
||
<div style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Officers — Masters, Chief Officers, Chief Engineers, 2nd Engineers</div>
|
||
<div style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>DP Operators for OSV / PSV fleet (DP1, DP2, DP3)</div>
|
||
<div style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Specialist Dredger crew — CSD and TSHD operations</div>
|
||
<div style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Rating staff for all vessel types</div>
|
||
</div>
|
||
<a href="#contact" class="btn btn-navy" style="width:100%; justify-content:center;">Apply Now</a>
|
||
</div>
|
||
<div id="shore-staff" style="background:var(--off-white); border:1px solid var(--border); border-radius:12px; padding:40px;">
|
||
<div class="service-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 7h8M8 11h8M8 15h5"/></svg>
|
||
</div>
|
||
<h3 style="font-size:1.2rem; font-weight:600; color:var(--navy); margin-bottom:12px;">Shore Staff</h3>
|
||
<div class="divider-gold"></div>
|
||
<p style="font-size:.875rem; color:var(--muted); line-height:1.7; margin-bottom:20px;">Our shore team is the backbone of our operations. We seek professionals with a maritime background to join our offices in Panvel, Singapore, Surat, and Visakhapatnam.</p>
|
||
<div style="display:flex; flex-direction:column; gap:8px; margin-bottom:24px;">
|
||
<div style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Marine Superintendents (ex-Master Mariners / Chief Engineers)</div>
|
||
<div style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Marine Personnel Officers and Crew Managers</div>
|
||
<div style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Technical Officers and Purchase Officers</div>
|
||
<div style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>QHSE Officers and Auditors</div>
|
||
<div style="font-size:.84rem; color:var(--muted); display:flex; gap:8px;"><span style="color:var(--gold);">›</span>Accounts and Finance professionals</div>
|
||
</div>
|
||
<a href="#contact" class="btn btn-navy" style="width:100%; justify-content:center;">Apply Now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Clients -->
|
||
<section class="clients" id="clients">
|
||
<div class="container">
|
||
<div class="clients-header reveal">
|
||
<p class="section-label">Trusted By</p>
|
||
<h2 class="section-title">Our Clients</h2>
|
||
<div class="divider-gold"></div>
|
||
</div>
|
||
</div>
|
||
<div class="clients-ticker-wrap">
|
||
<div class="clients-ticker">
|
||
<!-- Original set -->
|
||
<div class="client-logo"><img src="assets/clients/1.jpg" alt="Client 1"></div>
|
||
<div class="client-logo"><img src="assets/clients/2.jpg" alt="Client 2"></div>
|
||
<div class="client-logo"><img src="assets/clients/3.jpg" alt="Client 3"></div>
|
||
<div class="client-logo"><img src="assets/clients/4.jpg" alt="Client 4"></div>
|
||
<div class="client-logo"><img src="assets/clients/5.jpg" alt="Client 5"></div>
|
||
<div class="client-logo"><img src="assets/clients/6.jpg" alt="Client 6"></div>
|
||
<div class="client-logo"><img src="assets/clients/7.jpg" alt="Client 7"></div>
|
||
<div class="client-logo"><img src="assets/clients/8.jpg" alt="Client 8"></div>
|
||
<div class="client-logo"><img src="assets/clients/9.jpg" alt="Client 9"></div>
|
||
<div class="client-logo"><img src="assets/clients/10.jpg" alt="Client 10"></div>
|
||
<!-- Duplicate for seamless loop -->
|
||
<div class="client-logo"><img src="assets/clients/1.jpg" alt="Client 1"></div>
|
||
<div class="client-logo"><img src="assets/clients/2.jpg" alt="Client 2"></div>
|
||
<div class="client-logo"><img src="assets/clients/3.jpg" alt="Client 3"></div>
|
||
<div class="client-logo"><img src="assets/clients/4.jpg" alt="Client 4"></div>
|
||
<div class="client-logo"><img src="assets/clients/5.jpg" alt="Client 5"></div>
|
||
<div class="client-logo"><img src="assets/clients/6.jpg" alt="Client 6"></div>
|
||
<div class="client-logo"><img src="assets/clients/7.jpg" alt="Client 7"></div>
|
||
<div class="client-logo"><img src="assets/clients/8.jpg" alt="Client 8"></div>
|
||
<div class="client-logo"><img src="assets/clients/9.jpg" alt="Client 9"></div>
|
||
<div class="client-logo"><img src="assets/clients/10.jpg" alt="Client 10"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Why Us -->
|
||
<section class="why-us">
|
||
<div class="container">
|
||
<div class="why-us-grid">
|
||
<div class="reveal">
|
||
<p class="section-label">Why Choose PMS</p>
|
||
<h2 class="section-title">Safety, Quality & Experience</h2>
|
||
<div class="divider-gold"></div>
|
||
<div class="why-list">
|
||
<div class="why-item">
|
||
<div class="why-item-icon">
|
||
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M10 2l2 6h6l-5 3.5 2 6L10 14l-5 3.5 2-6L2 8h6z"/></svg>
|
||
</div>
|
||
<div>
|
||
<h4>Founder-Led Expertise</h4>
|
||
<p>Led by Master Mariners with 25+ combined years at sea and 20+ years ashore managing vessels globally.</p>
|
||
</div>
|
||
</div>
|
||
<div class="why-item">
|
||
<div class="why-item-icon">
|
||
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="10" cy="10" r="8"/><path d="M10 6v4l3 3"/></svg>
|
||
</div>
|
||
<div>
|
||
<h4>24/7 Shore Support</h4>
|
||
<p>Dedicated round-the-clock support team including ex-mariners, technical officers, and crew management personnel.</p>
|
||
</div>
|
||
</div>
|
||
<div class="why-item">
|
||
<div class="why-item-icon">
|
||
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="3" width="14" height="14" rx="2"/><path d="M7 10h6M10 7v6"/></svg>
|
||
</div>
|
||
<div>
|
||
<h4>Modern IT Systems</h4>
|
||
<p>Web-based crew management, purchase management, and QHSE systems with bespoke planned maintenance solutions.</p>
|
||
</div>
|
||
</div>
|
||
<div class="why-item">
|
||
<div class="why-item-icon">
|
||
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M10 2C5.6 2 2 5.6 2 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path d="M7 10l2 2 4-4"/></svg>
|
||
</div>
|
||
<div>
|
||
<h4>Full Certification Stack</h4>
|
||
<p>RPSL, DOC, MLC 2006 compliant, ISO 9001:2008, ISO 14001:2004 & OHSAS 18001:2007 certified operations.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="why-image-grid reveal" style="transition-delay:.12s">
|
||
<img src="assets/img/ship-management-1.jpg" alt="Ship management operations" loading="lazy">
|
||
<img src="assets/img/ship-management-2.jpg" alt="Marine services" loading="lazy">
|
||
<img src="assets/img/home-ship.jpg" alt="Managed vessel" loading="lazy">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact -->
|
||
<section class="contact" id="contact">
|
||
<div class="container">
|
||
<div style="text-align:center; margin-bottom:56px;" class="reveal">
|
||
<p class="section-label">Get In Touch</p>
|
||
<h2 class="section-title">Contact Us</h2>
|
||
<div class="divider-gold" style="margin:16px auto 0;"></div>
|
||
</div>
|
||
<div class="contact-grid">
|
||
<div class="reveal">
|
||
<p class="section-lead" style="margin-bottom:0">
|
||
Reach out for ship management enquiries, crew placement, or consultancy projects. Our team responds within one business day.
|
||
</p>
|
||
<div class="contact-offices">
|
||
<div class="office-card">
|
||
<h4>Office Address</h4>
|
||
<p>ZION, 409-410, Sector 10, Kharghar,<br>Panvel, Maharashtra 410210, India</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-detail">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4l6 4 6-4"/><rect x="1" y="3" width="14" height="10" rx="2"/></svg>
|
||
<span><a href="mailto:info@pelagiamarine.com">info@pelagiamarine.com</a></span>
|
||
</div>
|
||
<div class="contact-detail">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2h3l1.5 3.5-2 1.2a9 9 0 004.8 4.8l1.2-2L15 11v3a1 1 0 01-1 1C6.3 15 1 9.7 1 3a1 1 0 011-1z"/></svg>
|
||
<span>022 4127 1333</span>
|
||
</div>
|
||
<div class="contact-detail">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M8 4v4l3 1.5"/></svg>
|
||
<span><a href="https://www.pelagiamarine.com" target="_blank" rel="noopener">www.pelagiamarine.com</a></span>
|
||
</div>
|
||
<div class="contact-detail" style="margin-top:8px">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1C5.2 1 3 3.2 3 6c0 4 5 9 5 9s5-5 5-9c0-2.8-2.2-5-5-5zm0 6.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"/></svg>
|
||
<span>Also present in Singapore, Surat & Visakhapatnam</span>
|
||
</div>
|
||
<div style="margin-top:24px; border-radius:8px; overflow:hidden; border:1px solid var(--border);">
|
||
<iframe
|
||
src="https://www.google.com/maps?q=ZION%2C%20409-410%2C%20Sector%2010%2C%20Kharghar%2C%20Panvel%2C%20Maharashtra%20410210&output=embed"
|
||
width="100%" height="200" style="border:0; display:block;" allowfullscreen="" loading="lazy"
|
||
title="Pelagia Marine Services office location — Kharghar, Panvel"></iframe>
|
||
</div>
|
||
</div>
|
||
<div class="contact-form-wrap reveal" style="transition-delay:.1s">
|
||
<h3>Send Us a Message</h3>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="cf-name">Full Name</label>
|
||
<input type="text" id="cf-name" placeholder="John Smith">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="cf-email">Email Address</label>
|
||
<input type="email" id="cf-email" placeholder="john@company.com">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="cf-phone">Phone Number</label>
|
||
<input type="tel" id="cf-phone" placeholder="+1 (000) 000-0000">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="cf-subject">Subject</label>
|
||
<select id="cf-subject">
|
||
<option value="">Select a topic…</option>
|
||
<option>Ship Management</option>
|
||
<option>Crew Manning</option>
|
||
<option>Dredging Operations</option>
|
||
<option>Vetting / CDI</option>
|
||
<option>Audits</option>
|
||
<option>Career Enquiry</option>
|
||
<option>Other</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="cf-message">Message</label>
|
||
<textarea id="cf-message" placeholder="Describe your requirements…"></textarea>
|
||
</div>
|
||
<button class="btn btn-navy" style="width:100%; justify-content:center;">
|
||
Send Enquiry
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="site-footer">
|
||
<div class="footer-main">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<img src="assets/img/logo.png" alt="Pelagia Marine Services">
|
||
<p>Pelagia Marine Services Pvt. Ltd. — providing total maritime management solutions to clients in India and globally since 2014.</p>
|
||
<div class="footer-social" style="margin-top:20px">
|
||
<a href="https://www.facebook.com/Pelagia-Marine-436758780042821/" target="_blank" rel="noopener" class="social-btn" aria-label="Facebook">
|
||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M9.5 3H11V1H9C7.3 1 6 2.3 6 4v1H4v2h2v8h2V7h2l.5-2H8V4c0-.6.4-1 .9-1H9.5z"/></svg>
|
||
</a>
|
||
<a href="https://twitter.com/PelagiaMarine" target="_blank" rel="noopener" class="social-btn" aria-label="Twitter/X">
|
||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M12.6 1h2.3L9.8 6.8 16 15h-4.6l-3.6-4.7L3.5 15H1.2l5.4-6.2L1 1h4.7l3.3 4.3L12.6 1zm-.8 12.6h1.3L4.3 2.3H3L11.8 13.6z"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-col">
|
||
<h4>Useful Links</h4>
|
||
<ul>
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#about">Our Company</a></li>
|
||
<li><a href="#services">Services</a></li>
|
||
<li><a href="#">Career</a></li>
|
||
<li><a href="#contact">Contact Us</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-col">
|
||
<h4>Services</h4>
|
||
<ul>
|
||
<li><a href="#services">Ship Management</a></li>
|
||
<li><a href="#services">Dredging</a></li>
|
||
<li><a href="#services">Main Fleet</a></li>
|
||
<li><a href="#services">Consultancy</a></li>
|
||
<li><a href="#services">Vetting / CDI</a></li>
|
||
<li><a href="#services">Audits</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-col">
|
||
<h4>Contact</h4>
|
||
<ul>
|
||
<li><a href="mailto:info@pelagiamarine.com">info@pelagiamarine.com</a></li>
|
||
<li><a href="tel:+912241271333">022 4127 1333</a></li>
|
||
</ul>
|
||
<div style="margin-top:20px">
|
||
<a href="https://pms.pelagiamarine.com" class="btn btn-primary" style="font-size:.78rem; padding:8px 18px;">Staff Portal Login</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-divider"></div>
|
||
<div class="container">
|
||
<div class="footer-bottom">
|
||
<p>© 2026 Pelagia Marine Services Private Limited. All rights reserved.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Scroll reveal
|
||
const revealEls = document.querySelectorAll('.reveal');
|
||
const observer = new IntersectionObserver(entries => {
|
||
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });
|
||
}, { threshold: 0.12 });
|
||
revealEls.forEach(el => observer.observe(el));
|
||
|
||
// Mobile nav
|
||
const hamburger = document.getElementById('hamburger');
|
||
const nav = document.getElementById('site-nav');
|
||
hamburger.addEventListener('click', () => {
|
||
nav.classList.toggle('nav-mobile-open');
|
||
});
|
||
|
||
// Mobile dropdown toggle — always attach, guard on width at time of click
|
||
document.querySelectorAll('.nav-links > li > a').forEach(link => {
|
||
link.addEventListener('click', e => {
|
||
if (link.nextElementSibling?.classList.contains('dropdown')) {
|
||
if (window.innerWidth <= 900) {
|
||
e.preventDefault();
|
||
const li = link.closest('li');
|
||
const wasOpen = li.classList.contains('open');
|
||
document.querySelectorAll('.nav-links > li').forEach(l => l.classList.remove('open'));
|
||
if (!wasOpen) li.classList.add('open');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// Close mobile nav when a leaf link (no dropdown) is clicked
|
||
document.querySelectorAll('.nav-links a').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
if (!link.nextElementSibling?.classList.contains('dropdown')) {
|
||
nav.classList.remove('nav-mobile-open');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Close mobile nav on outside click
|
||
document.addEventListener('click', e => {
|
||
if (!nav.contains(e.target)) nav.classList.remove('nav-mobile-open');
|
||
});
|
||
|
||
// Contact form submit (stub)
|
||
document.querySelector('.contact-form-wrap button').addEventListener('click', e => {
|
||
const name = document.getElementById('cf-name').value.trim();
|
||
const email = document.getElementById('cf-email').value.trim();
|
||
if (!name || !email) { alert('Please enter your name and email.'); return; }
|
||
alert('Thank you, ' + name + '! We will be in touch shortly.');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|