@charset "UTF-8";

/*
Theme Name: Indigo Shipping Services
Theme URI: https://indigoshippingdxb.com
Author: Farzath Faiz (Mooiwebs.com)
Description: Custom WordPress theme for Indigo Shipping Services LLC. Built with Tailwind CSS.
Version: 1.0
Text Domain: indigo-shipping
*/
.bg-indigoBrand-dark{
background: #014E9C;
background: linear-gradient(90189360deg, rgba(1, 78, 156, 1) 50%, rgba(149, 44, 100, 1) 100%);
}
.ft-icon{
  width:64px;
  text-align: center;
}

:root {
    --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    font-family: var(--font-primary) !important;
    font-size: 1rem;
    font-weight: 400; /* Manrope 400 */
    line-height: 1.6;
    color: #334155;
    background-color: #ffffff;
    text-transform: none !important; /* Prevent all-caps on body text */
}

/* Paragraphs and general text styling */
p, li, span, a {
    font-family: var(--font-primary) !important;
    text-transform: none; /* Avoid all-caps paragraphs */
}

p {
    font-weight: 400; /* Manrope 400 */
}

.fw-medium {
    font-weight: 500 !important; /* Manrope 500 */
}

/* Headings Typography -> Manrope 600/700 */
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.display-3,
.display-6,
.fw-bold {
    font-family: var(--font-primary) !important;
    letter-spacing: -0.02em;
}

h1, h2, .display-3, .display-6 {
    font-weight: 700 !important; /* Manrope 700 */
}

h3, h4, h5, h6, .fw-bold {
    font-weight: 600 !important; /* Manrope 600 */
}

/* Navigation Links (Kept clean and readable without excessive styling) */
.navbar-nav .nav-link {
    font-family: var(--font-primary) !important;
    font-weight: 500 !important; /* Manrope 500 */
    font-size: 0.95rem;
    text-transform: none; /* Removed heavy all-caps */
}

/* Buttons */
.btn {
    font-family: var(--font-primary) !important;
    font-weight: 600 !important; /* Manrope 600 */
    text-transform: none;
}

@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: inline-flex;
    animation: marquee 30s linear infinite;
}
.animate-marquee:hover {
    animation-play-state: paused;
}