/* ==========================
   ULTIMATE STICKY HEADER FIX
========================== */
header {
    position: sticky;
    top: 0;
    z-index: 10000;
    background: #fff;
}



/* Main Navbar */

.main-nav {

display: flex;

justify-content: center; /* centers everything horizontally */

align-items: center;

background: #ffffff;

padding: 15px 50px;

box-shadow: 0 2px 10px rgba(0,0,0,0.05);

border-bottom: 3px solid #1a3a5c;

gap: 40px;
 /* spacing between logo and nav links */

}



.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 80px;
    width: auto;
    display: block;
}



/* Nav links */

.main-nav nav ul {

list-style: none;

display: flex;

gap: 30px;

margin: 0;

padding: 0;

}



/* Nav items */

.main-nav nav ul li a {

color: #1a3a5c;

text-decoration: none;

font-weight: 600;

font-size: 16px;

transition: color 0.3s, transform 0.2s;

}



.main-nav nav ul li a:hover {

color: #C7A76C;

transform: translateY(-2px);

}



/* Hamburger (for mobile) */

/* Hamburger (for mobile) */

.hamburger {

display: none;

font-size: 28px;

color: #1a3a5c;

cursor: pointer;

}

@media (max-width: 768px) {

.main-nav nav,

.category-nav ul {

display: none;

flex-direction: column;

width: 100%;

}



.hamburger,

.category-toggle {

display: block;

cursor: pointer;

}

}



/* Responsive */

@media (max-width: 768px) {

.main-nav {

justify-content: space-between;

gap: 0px;

padding: 15px 30px;

}

.logo img {

height: 70px;

}

.main-nav nav ul {

flex-direction: row;

gap: 15px;

}

}


/* CATEGORY NAVBAR */

.category-nav {

background: #fff;

border-top: 1px solid #ddd;

padding: 10px 30px;

display: flex;

align-items: center;

justify-content: center;

flex-wrap: wrap;

border-bottom: 3px solid #1a3a5c;


}



.category-toggle {

display: none; /* hidden on desktop */

cursor: pointer;

font-weight: 500;

color: #0A1A3C;

margin-bottom: 10px;

}



.category-nav ul {

list-style: none;

display: flex;

gap: 40px;

flex-wrap: wrap;

}



.category-nav ul li a {

color: #0A1A3C;

text-decoration: none;

font-weight: 700;


transition: 0.3s;

}



.category-nav ul li a:hover {

color: #C7A76C;

}



/* MOBILE */

@media (max-width: 768px) {

.category-toggle {

display: block;

}

.category-nav ul {

display: none;

flex-direction: column;

width: 100%;

gap: 10px;

}

.category-nav ul.show {

display: flex;

}

}

@media (max-width: 768px) {

.logo img {

height: 70px;

}

}



/* ==========================

RESPONSIVE

========================== */

@media (max-width: 768px) {

/* Main Navbar */

.main-nav nav {

display: none;

flex-direction: column;

width: 100%;

background: #fff;

}

.main-nav nav ul {

flex-direction: column;

gap: 10px;

}

.hamburger {

display: block;

}



/* Secondary Navbar */

.category-nav ul {

display: none;

flex-direction: column;

gap: 10px;

width: 100%;

}

.category-nav .category-toggle {

display: block;

}

}

/* Toggle classes */

.show {

display: flex !important;

}

 /* ==========================
   SHIPS GRID SECTION & WRAPPER
========================== */
.ships-section {
    padding: 60px 0; /* Changed from 0 to 60px to give top/bottom breathing room */
    background: #f9f9f9;
}

.ships-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Standardized side padding */
}

/* ==========================
   SHIPS GRID HEADER (Title + Search)
========================== */
.ships-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

/* Unified Title Style */
.ships-header-row h1 {
    flex: 1 1 auto;
    color: #0A1A3C;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    font-size: 32px;
    position: relative;
}

/* Search Form Container */
.ships-header-row .ship-search-form {
    flex: 0 1 300px; /* Slightly wider for better desktop look */
    display: flex;
    gap: 8px;
}

.ships-header-row .ship-search-form input {
    padding: 10px 15px;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.ships-header-row .ship-search-form input:focus {
    border-color: #C7A76C;
}

.ships-header-row .ship-search-form button {
    padding: 10px 20px;
    background: #0A1A3C;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
}

.ships-header-row .ship-search-form button:hover {
    background: #C7A76C;
    color: #0A1A3C;
}
/* ==========================
   MOBILE RESPONSIVE (Up to 768px)
========================== */
@media (max-width: 768px) {
    .ships-header-row {
        flex-direction: column; /* Stack Title over Search */
        text-align: center;
        gap: 15px;
        margin-bottom: 25px;
    }

    .ships-header-row h1 {
        font-size: 24px;
        white-space: normal; /* Allow wrapping to prevent horizontal scroll */
        width: 100%;
    }

    .ships-header-row .ship-search-form {
        width: 100%;
        max-width: 100%; /* Fill mobile width */
        flex: 1 1 auto;
    }

    .ships-header-row .ship-search-form input {
        height: 45px; /* Taller touch target for mobile */
    }

    .ships-header-row .ship-search-form button {
        height: 45px;
    }
    
    .ships-grid {
        margin-top: 20px;
    }
}
/* GRID */
.ships-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ONLY 4 ships */
    gap: 25px;
    max-width: 1200px;   /* LEFT & RIGHT WHITE SPACE */
    margin: 0 auto;      /* CENTER GRID */
}

/* Ship Card */
.ship-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ship-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Ship Image */
.ship-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.ship-card:hover img {
    transform: scale(1.05);
}

/* Ship Title */
.ship-card h4 {
    color: #0A1A3C;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
}

.ship-card h4 a {
    color: inherit;
    text-decoration: none;
}

.ship-card h4 a:hover {
    color: #C7A76C;
}

/* Ship Text */
.ship-card p {
    margin: 5px 0;
    color: #333;
    font-size: 14px;
}

/* Scrollable Ship Description */
.ship-desc {
    max-height: 80px;       /* fixed height for uniformity */
    overflow-y: auto;       /* scroll if content is longer */
    padding: 10px;
    background: #f3f6fb;
    border-left: 4px solid #C7A76C;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* Optional: style scrollbar for modern browsers */
.ship-desc::-webkit-scrollbar {
    width: 6px;
}
.ship-desc::-webkit-scrollbar-thumb {
    background-color: #C7A76C;
    border-radius: 3px;
}
.ship-desc::-webkit-scrollbar-track {
    background: #f3f6fb;
}

/* Inquiry Button */
.btn-inquiry {
    display: inline-block;
    background: #0A1A3C;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    margin-top: 12px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-inquiry:hover {
    background: #C7A76C;
    color: #0A1A3C;
    transform: translateY(-2px);
}
/* ==============================
   Description Section
============================== */
/* ==========================
   APS PREMIUM SECTION (FIXED)
========================== */
/* GLOBAL FIX: This must be present to clear the browser warning */
section h1, article h1, aside h1, nav h1 {
    font-size: 2em !important; 
}
/* This rule specifically kills the H1 warning */
section h1, .aps-main-title {
    font-size: 36px !important;
    color: #0A1A3C;
    font-weight: 800;
    margin-bottom: 15px;
}

.aps-premium-layout {
    background-color: #f9f9f9;
    padding: 40px 20px;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

.aps-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.aps-hero {
    position: relative;
    z-index: 1;
    padding: 20px 0;
    text-align: center;
}

.aps-intro-text {
    font-size: 18px;
    color: #1a3a5c;
    max-width: 900px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

/* Equal Height Card Grid */
.aps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    align-items: stretch;
}

.aps-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.aps-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
/* About Box */
.about-box p {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 15px;
}

/* Grid for Ships & Services */
.aps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* Sub Titles */
.aps-sub-title {
    font-size: 22px;
    color: #0A1A3C;
    margin-bottom: 15px;
 
    padding-left: 12px;
}

/* Lists */
.aps-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aps-list li {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.aps-list .icon {
    margin-right: 8px;
}

.highlight-section .aps-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns always on desktop */
    gap: 15px;
    margin-top: 20px;
}

.feature {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid #eee;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.feature span {
    font-size: 20px;
}

/* Process Flow */
.aps-process-flow {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #f8fbfd;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
}

.num {
    background: #0A1A3C;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

/* Commitment Section */
.aps-commitment {
    background: #0A1A3C;
    color: #fff;
    padding: 40px 25px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 30px;
}

.aps-commitment h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.aps-commitment p {
    font-size: 16px;
    line-height: 1.7;
}

/* CTA Section */
.aps-cta {
    text-align: center;
    background: #fff;
    border: 2px dashed #C7A76C;
    padding: 40px 25px;
    border-radius: 12px;
}

.aps-cta h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #0A1A3C;
}

.aps-cta p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
}
.aps-btn {
    background: #C7A76C;   /* gold */
    color: #0A1A3C;        /* navy (FIX) */
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.aps-btn:hover {
    background: #0A1A3C;   /* navy */
    color: #ffffff;
}

.aps-sub-title.center {
    text-align: center; 
}

/* ==========================
   RESPONSIVE
========================== */
@media (max-width: 992px) {
    .aps-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .highlight-section .aps-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .aps-main-title {
        font-size: 28px;
    }

    .aps-intro-text {
        font-size: 16px;
    }

    .aps-sub-title {
        font-size: 20px;
    }

    .feature {
        font-size: 13px;
    }

    .step p {
        font-size: 14px;
    }

    .aps-cta h3 {
        font-size: 20px;
    }

    .aps-cta p {
        font-size: 15px;
    }

    .aps-btn {
        padding: 12px 25px;
    }
}

@media (max-width: 480px) {
    .aps-main-title {
        font-size: 24px;
    }

    .aps-intro-text {
        font-size: 14px;
    }

    .feature {
        font-size: 12px;
    }

    .step p {
        font-size: 13px;
    }

    .aps-cta h3 {
        font-size: 18px;
    }

    .aps-cta p {
        font-size: 14px;
    }

    .aps-btn {
        padding: 10px 20px;
    }
}

/* =========================
   RESPONSIVE BREAKPOINTS
========================= */

/* Laptop */
@media (max-width: 1200px) {
    .ships-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet */
@media (max-width: 768px) {
    .ships-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .ships-grid {
        grid-template-columns: 1fr;
    }

    .ship-card img {
        height: 140px;
    }
}///till this i want to copy paste,,,,,,,,,first u say any errors for sticky any values ,,,mainly focus on aps desc
/* Pagination */
.pagination {
    text-align: center;
    margin-top: 30px;
}

.pagination a {
    display: inline-block;
    margin: 0 ;
    padding: 8px 12px;
    color: #0A1A3C;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.pagination a:hover,
.pagination a.active {
    background: #0A1A3C;
    color: #fff;
    border-color: #0A1A3C;
}

/* Responsive */

/* ==========================
   FOOTER STYLES
========================== */
/* ================= FOOTER ================= */
footer {
    background: #0A1A3C;
    color: #fff;
    padding: 20px 0; 
    font-family: 'Poppins', sans-serif;
    width: 100%;
    position: relative;  /* relative for stacking */
    margin-top: auto;    /* push footer to bottom if content is short */
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 170px;

    max-width: 1200px;   /* same as your ships grid max-width */
    margin: 0 auto;       /* center horizontally */
    padding: 0 30px;      /* optional side padding */
}

.footer-container div {
    flex: 1 1 250px;
}

.footer-container h3, .footer-container h4 {
    color: #C7A76C;
    margin-bottom: 15px;
}

.footer-container p, .footer-container li {
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
}

.footer-container ul {
    list-style: none;
    padding: 0;
}

.footer-container ul li a {
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.footer-container ul li a:hover {
    color: #C7A76C;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    border-top: 1px solid #444;
    padding-top: 10px;
    color: #ccc;

    max-width: 1200px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        gap: 10px;
        padding: 0 20px; /* less side padding on mobile */
    }

    .footer-bottom {
        padding: 0 20px;
    }
}

/* ================= BODY FLEX ================= */
/* ensures footer sticks to bottom on short pages */
body {
    
   margin: 0;
    font-family: 'Poppins', sans-serif;
}
/* ==========================
   CONTACT SECTION
========================== */
.contact-section {
    padding: 60px 30px;
    background: #f7f7f7;
}

.contact-container {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.contact-text h2 {
    font-size: 32px;
    color: #0A1A3C;
}

.contact-text p {
    margin-top: 10px;
    color: #444;
    font-size: 16px;
}

.contact-email a {
    color: #001f3f;          /* Navy text */
    text-decoration: none;   /* Remove underline */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    cursor: pointer;         /* Show pointer on hover */
}

.contact-email a:hover {
    text-decoration: underline; /* Optional: underline on hover */
}

.mail-icon {
    fill: #001f3f;           /* Icon same color as text */
}
.contact-phone a {
    color: #001f3f;          /* Same navy color */
    text-decoration: none;   /* No underline */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    cursor: pointer;
}

.contact-phone a:hover {
    text-decoration: underline;
}

.phone-icon {
    fill: #001f3f;           /* Icon color same as text */
}
.contact-whatsapp a {
    color: #001f3f;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    cursor: pointer;
}

.contact-whatsapp a:hover {
    text-decoration: underline;
}

.whatsapp-icon {
    fill: #25D366; /* WhatsApp green */
}



/* Form Styling */
.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.contact-form label {
    margin-bottom: 5px;
    color: #0A1A3C;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 6px;
    font-size: 15px;
}

.contact-form textarea {
    height: 150px;
    resize: none;
}

.btn-submit {
    background: #0A1A3C;
    color: #fff;
    padding: 12px;
    border-radius: 6px;
    border: none;
    width: 100%;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-submit:hover {
    background: #C7A76C;
    color: #0A1A3C;
}

/* Responsive */
@media(max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}

/* ==========================
   PAGE HERO (Used for all pages)
========================== */

/* PAGE HERO */
.page-hero {
    position: relative;
    width: 100%;
    height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

/* Background Image */
.page-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: brightness(60%);
}

/* Text Content */
.page-hero-overlay {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #ffffff;
    animation: fadeIn 1s ease-in-out;
}

.page-hero-overlay h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.page-hero-overlay p {
    font-size: 18px;
    opacity: 0.9;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 576px) {
    .page-hero-overlay h1 { font-size: 28px; }
    .page-hero-overlay p { font-size: 14px; }
}


/* ==========================
   ABOUT SECTION
========================== */
.about-section-professional {
    background: #fff;
    color: #0A1A3C;
    padding: 60px 20px 80px; /* top, side, bottom padding */
}

.about-container-professional {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
    line-height: 1.8;
    padding: 0 20px; /* ensures spacing on mobile */
}

.about-container-professional h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    color: #0A1A3C;
}

.about-container-professional h3 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 12px;
    color: #333;
}

.about-container-professional p {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

.about-btn-wrapper {
    text-align: center;
    margin-top: 30px;
}

.btn-contact-professional {
    display: inline-block;
    background: #0A1A3C;
    color: #fff;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-contact-professional:hover {
    background: #C7A76C;
    color: #0A1A3C;
    transform: translateY(-2px);
}

/* ===============================
   MOBILE RESPONSIVE FIXES
=============================== */
@media (max-width: 1024px) {
    .about-section-professional { padding: 50px 20px 70px; }
    .about-container-professional h2 { font-size: 32px; }
    .about-container-professional h3 { font-size: 20px; }
    .about-container-professional p { font-size: 15px; }
    .btn-contact-professional { padding: 10px 25px; font-size: 14px; }
}

@media (max-width: 768px) {
    .about-section-professional { padding: 50px 15px 60px; }
    .about-container-professional { padding: 0 15px; }
    .about-container-professional h2 { font-size: 28px; }
    .about-container-professional h3 { font-size: 18px; }
    .about-container-professional p { font-size: 14px; }
    .btn-contact-professional { display: block; width: 70%; margin: 20px auto 0; padding: 12px 0; text-align: center; }
}

@media (max-width: 480px) {
    .about-section-professional { padding: 40px 10px 50px; }
    .about-container-professional { padding: 0 10px; }
    .about-container-professional h2 { font-size: 24px; }
    .about-container-professional h3 { font-size: 16px; }
    .about-container-professional p { font-size: 13px; }
    .btn-contact-professional { width: 90%; margin: 15px auto 0; padding: 12px 0; font-size: 14px; }
}

/* ===== GLOBAL FIX TO REMOVE HORIZONTAL SCROLL ===== */
html {
    overflow-x: hidden;
}

/* ================= SERVICES SECTION ================= */
/* ================= SERVICES CARDS ================= */
/* ================= GENERAL STYLES ================= */
body {
    font-family: 'Poppins', sans-serif;
    color: #0A1A3C;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
}

.container {
    max-width: 1400px;  /* Increased width for more spacing */
    margin: 0 auto;
    padding: 0 40px;    /* Added left/right padding */
}

/* ================= SERVICES CARDS ================= */
.services-section {
    padding: 100px 40px;  /* Increased top/bottom padding */
    background: #fafafa;
}

.services-section h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 70px;
    color: #0A1A3C;
    font-weight: 800;
}

.services-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* bigger cards */
    gap: 40px;
    justify-content: center; /* center grid in container */
}

.service-box {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}
.service-box i {
    font-size: 3rem;              /* smaller, nicer size */
    color: #0A1A3C;
    margin-bottom: 20px;          /* space below icon */
     padding: 100px 40px;         /* space from right edge */
    display: block;               /* center with padding works properly */
    text-align: center;           /* ensure icon stays centered inside padding */
    transition: transform 0.3s, color 0.3s;
}

.service-box i:hover {
    transform: scale(1.2);
    color: #C7A76C;
}

.service-box h3 {
    font-size: 1.8rem;  /* bigger titles */
    margin-bottom: 20px;
    font-weight: 700;
}

.service-box p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}

.service-box:hover {
    transform: translateY(-12px);
    background: #0A1A3C;
    color: #fff;
}

.service-box:hover i {
    transform: scale(1.4) rotate(10deg);
    color: #C7A76C;
}

.service-box:hover h3,
.service-box:hover p {
    color: #fff;
}

/* ================= SERVICES DESCRIPTION ================= */
.services-description {
    padding: 100px 40px;
    background: #fff;
    max-width: 1200px;
    margin: 0 auto;
}

.services-description h2 {
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 60px;
    color: #0A1A3C;
    font-weight: 800;
}

.services-description h3 {
    font-size: 2.2rem;
    margin-top: 50px;
    margin-bottom: 30px;
    color: #0A1A3C;
    font-weight: 700;
    border-bottom: 4px solid #C7A76C;
    display: inline-block;
    padding-bottom: 8px;
}

.services-description h3 {
    font-size: 1.6rem;
    color: #0A1A3C;
    margin-bottom: 15px;
    font-weight: 600;
}

.services-description p {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.7;
}

.services-description ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.services-description ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #555;
    line-height: 1.7;
}

.services-description ul li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #C7A76C;
    font-weight: bold;
}

/* ================= RESPONSIVE ================= */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }

    .services-section h2,
    .services-description h2 {
        font-size: 2.5rem;
    }

    .services-description h3 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .services-section h2,
    .services-description h2 {
        font-size: 2.2rem;
    }

    .services-description h3 {
        font-size: 1.8rem;
    }

    .service-box i {
        font-size: 3.5rem;
    }

    .service-box h3 {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 480px) {
    .services-section h2,
    .services-description h2 {
        font-size: 1.8rem;
    }

    .services-description h3 {
        font-size: 1.5rem;
    }

    .service-box i {
        font-size: 3rem;
    }

    .service-box h3 {
        font-size: 1.4rem;
    }
}

/* ================= RESPONSIVE ================= */
@media(max-width: 900px) {
    .about-container {
        flex-direction: column;
        text-align: center;
    }

    .about-image img {
        width: 100%;
    }
}
/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
    .about-container {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
    }

    .services-container {
        padding: 0 20px;
    }

    .about-image img {
        width: 100%;
    }
}.page-content {
    padding: 60px 20px;           /* top-bottom padding */
    background: #fafafa;          /* subtle background */
}

.content-box {
    max-width: 900px;
    margin: 0 auto;               /* center the box */
    background: #fff;
    padding: 40px 30px;           /* inner spacing */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.content-box h2 {
    color: #0A1A3C;               /* Navy blue headings */
    font-size: 28px;
    margin-bottom: 15px;
    text-align: center;           /* center heading */
    border-left: 5px solid #C7A76C;
    padding-left: 12px;
}

.content-box p {
    color: #333;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: justify;           /* nice readable paragraph */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .content-box {
        padding: 30px 20px;
    }

    .content-box h2 {
        font-size: 24px;
    }

    .content-box p {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .content-box {
        padding: 20px 15px;
    }

    .content-box h2 {
        font-size: 20px;
    }

    .content-box p {
        font-size: 14px;
    }
}


.ship-details {
    padding: 60px 20px;
}

.ship-details-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ship-image-box img {
    width: 100%;
    max-width: 520px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.ship-info-box {
    flex: 1;
    min-width: 320px;
}

.ship-info-box h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}

.ship-description {
    margin-bottom: 20px;
    line-height: 1.7;
}

.ship-specs p {
    margin: 6px 0;
    font-size: 16px;
}

.ship-btn {
    margin-top: 25px;
    display: inline-block;
}
.category-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.category-content {
    display: flex;
    gap: 30px;
}
/* =========================
   CATEGORY PAGE STYLES
========================= */

.category-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Flex container: left ships, right sidebar */
.category-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* -------------------------
   Left: Ships Grid
------------------------- */
.ships-left {
    flex: 3;
}

/* Ships Grid */
.ships-left .ships-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* Individual Ship Card */
.ships-left .ship-card {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.ships-left .ship-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Ship Image */
.ships-left .ship-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
}
.ships-left .ship-card:hover img {
    transform: scale(1.05);
}

/* Ship Title */
.ships-left .ship-card h3 {
    margin: 10px 0;
    color: #002147;
    font-size: 18px;
    font-weight: 600;
}
.ships-left .ship-card h3 a {
    text-decoration: none;
    color: inherit;
}
.ships-left .ship-card h3 a:hover {
    color: #d4af37;
}

/* Ship Details Text */
.ships-left .ship-card p {
    margin: 4px 0;
    font-size: 14px;
    color: #333;
}

/* Scrollable Description */
.ships-left .ship-card .ship-desc {
    max-height: 80px;
    overflow-y: auto;
    padding: 8px;
    background: #f3f6fb;
    border-left: 4px solid #d4af37;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 13px;
}

/* Inquiry Button */
.ships-left .ship-card .btn-inquiry {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 12px;
    background: #d4af37;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s;
}
.ships-left .ship-card .btn-inquiry:hover {
    background: #b7950b;
    color: #fff;
}

/* -------------------------
   Right: Subcategories Sidebar
------------------------- */
.subcat-right {
    flex: 1;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    height: fit-content;
    position: sticky;
    top: 20px; /* keeps sidebar visible while scrolling */
}
.subcat-right h3 {
    margin-top: 0;
    color: #002147;
    font-size: 18px;
    font-weight: 600;
}
.subcat-right ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}
.subcat-right ul li {
    margin-bottom: 10px;
}
.subcat-right ul li a {
    text-decoration: none;
    color: #002147;
    font-weight: 500;
    transition: color 0.3s;
}
.subcat-right ul li a:hover {
    color: #d4af37;
}

/* -------------------------
   Pagination (Scoped)
------------------------- */
.category-page-container .pagination {
    text-align: center;
    margin-top: 30px;
}
.category-page-container .pagination a {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 12px;
    color: #002147;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}
.category-page-container .pagination a:hover,
.category-page-container .pagination a.active {
    background: #002147;
    color: #fff;
    border-color: #002147;
}

/* -------------------------
   Responsive
------------------------- */
@media (max-width: 991px) {
    .category-content {
        flex-direction: column;
    }
    .subcat-right {
        position: static;
        margin-top: 25px;
    }
    .ships-left .ships-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 480px) {
    .ships-left .ships-grid {
        grid-template-columns: 1fr;
    }
    .ships-left .ship-card img {
        height: 140px;
    }
}
@media (max-width: 768px) {
    .subcat-top {
        display: block;  /* show on mobile */
    }
    .subcat-side {
        display: none;   /* hide on mobile */
    }

    /* Ships grid becomes 1 column on mobile */
    .ships-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 15px !important;
    }
}
.email-link {
    color: #ffffff; /* white color */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* space between icon and text */
}

.email-link:hover {
    text-decoration: underline;
}

.mail-icon {
    fill: currentColor; /* inherits white color */
}*