/* --- ALYAINT GLOBAL STYLES --- */
:root {
    --primary-navy: #0B2545;    /* Deep Shipping Navy */
    --accent-orange: #FF6600;   /* Maersk/Safety Orange */
    --light-bg: #F4F7F6;        /* Clean Corporate Background */
    --text-dark: #333333;
    --text-light: #F8F9FA;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
    background-color: var(--light-bg);
    line-height: 1.6;
    padding-top: 70px; /* Space for fixed navbar */
}

a { text-decoration: none; }

/* --- NAVIGATION --- */
.navbar-custom {
    background-color: var(--primary-navy);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: 1px;
    color: white !important;
}

.nav-link {
    color: rgba(255,255,255,0.8) !important;
    font-weight: 500;
    margin-right: 15px;
    transition: color 0.3s;
}

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

.btn-quote {
    background-color: var(--accent-orange);
    color: white;
    font-weight: bold;
    border-radius: 4px;
    padding: 8px 20px;
    border: none;
    transition: all 0.3s ease;
}

.btn-quote:hover {
    background-color: #e65c00;
    color: white;
}

/* --- HERO SECTION --- */
.hero-wrap {
    background: linear-gradient(rgba(11, 37, 69, 0.7), rgba(11, 37, 69, 0.7)), 
                url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
    background-size: cover;
    background-position: center;
    height: 75vh;
    display: flex;
    align-items: center;
    color: white;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* --- TRACKING BAR --- */
.tracking-bar {
    background-color: var(--primary-navy);
    border-top: 5px solid var(--accent-orange);
    margin-top: -1px; /* seamless connection */
}

/* --- PAGE HEADERS (For sub-pages) --- */
.page-header {
    background-color: var(--primary-navy);
    color: white;
    padding: 60px 0;
    margin-bottom: 40px;
}

/* --- SERVICES --- */
.service-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    height: 100%;
    border-bottom: 4px solid transparent;
}

.service-card:hover {
    transform: translateY(-5px);
    border-bottom: 4px solid var(--accent-orange);
}

.service-icon {
    font-size: 3rem;
    color: var(--accent-orange);
    margin-bottom: 20px;
}

/* --- PARTNERS --- */
.partner-logo {
    opacity: 0.6;
    transition: opacity 0.3s;
    font-family: 'Arial Black', sans-serif; /* Thick font for logos */
    letter-spacing: -1px;
}
.partner-logo:hover { opacity: 1; color: var(--primary-navy) !important; }

/* --- CONTACT SECTION --- */
.contact-info-box {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* --- FOOTER --- */
footer {
    background-color: var(--primary-navy);
    color: rgba(255,255,255,0.7);
    padding: 50px 0 20px;
}

footer h5 { color: white; margin-bottom: 20px; }
footer ul { list-style: none; padding: 0; }
footer ul li { margin-bottom: 10px; }
footer a { color: rgba(255,255,255,0.7); }
footer a:hover { color: var(--accent-orange); }

/* --- WHATSAPP FLOATING BUTTON (UPDATED) --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    border-radius: 50%; /* Makes it round */
    box-shadow: 2px 2px 3px #999;
    z-index: 1000; /* High number ensures it sits on top of everything */
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}