:root {
    --primary-color: #e67e22;
    --secondary-color: #34495e;
    --bg-light: #f9f9f9;
    --border-radius: 8px;
}

/* ---------------------------------- */
/* 2. Content Blocks (Alternating Grid) */
/* ---------------------------------- */

.about-content {
    padding: 60px 5vw;
    background-color: var(--bg-light);
}

.content-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 80px;
    padding: 30px 0;
}

.content-block.reverse {
    direction: rtl;
}

.content-block.reverse .text-content {
    direction: ltr;
    text-align: left;
}

.text-content {
    padding: 20px;
}

.text-content h2 {
    font-size: 2.5em;
    color: var(--primary-color);
    margin-top: 0;
}

.text-content h2 span {
    display: block;
    font-size: 0.5em;
    color: #888;
    font-weight: 300;
}

.image-content {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.image-content img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease-out;
}

.image-content img:hover {
    transform: scale(1.05);
}

.cta-button {
    display: inline-block;
    padding: 10px 25px;
    margin-top: 20px;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

.cta-button:hover {
    background-color: #d35400;
    transform: translateY(-2px);
}

/* ---------------------------------- */
/* 3. Animation & Transition (Scroll Reveal) */
/* ---------------------------------- */

/* Initial state (hidden) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Final state (visible) */
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---------------------------------- */
/* 4. Responsive Design */
/* ---------------------------------- */

@media (max-width: 768px) {
    .content-block {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        gap: 20px;
    }

    .content-block.reverse {
        direction: ltr;
        /* Remove direction swap on mobile */
    }

    .content-block.reverse .text-content {
        text-align: left;
    }

    .image-content {
        order: -1;
        /* Move image above text on mobile for better flow */
    }

    .image-content img {
        max-height: 250px;
        object-fit: cover;
    }

    .hero h1 {
        font-size: 2em;
    }
}


/* Header & Logo Section */
.overview-header {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
}

.overview-header h2 {
    font-size: 2.5em;
    color: var(--secondary-color);
    display: inline-block;
    padding-bottom: 10px;
}

.logo-box {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.logo-box img {
    height: 40px;
    transition: transform 0.3s;
}

.logo-box:hover img {
    transform: scale(1.1);
    /* Logo Pulse Effect */
}

.tagline {
    color: var(--secondary-color);
    font-weight: 600;
    font-style: italic;
}

/* -------------------- */
/* ACCORDION/TAB STYLES */
/* -------------------- */
.content-tab {
    background-color: var(--bg-light);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.content-tab:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.tab-title {
    background-color: var(--secondary-color);
    color: white;
    padding: 20px 30px;
    margin: 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4em;
    transition: background-color 0.3s ease;
}

.tab-title:hover {
    background-color: #2c3e50;
    /* Darker secondary on hover */
}

.indicator {
    font-size: 2em;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.4s ease;
}

.content-tab.active .indicator {
    transform: rotate(45deg);
    /* Plus sign rotates to form X */
}

.tab-body {
    max-height: 0;
    padding: 0 30px;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    overflow: hidden;
}

.content-tab.active .tab-body {
    max-height: 800px;
    /* Adjust this value as needed for content height */
    padding: 30px;
}

/* Service Grid (Tab 1 Content) */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.service-card {
    background-color: white;
    padding: 25px;
    border-radius: var(--border-radius);
    border-left: 5px solid var(--primary-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.service-card:hover {
    transform: translateY(-5px);
    /* Lift Effect */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.service-card h4 {
    color: var(--primary-color);
    margin-top: 0;
}

/* Map Content (Tab 2 Content) */
.map-container img {
    width: 100%;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
}

.map-container .caption {
    font-style: italic;
    color: #666;
    text-align: center;
}

/* Achievement Content (Tab 3 Content) */
.achievement-box h4 {
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 20px;
    animation: pulse 2s infinite;
    /* Attention-grabbing animation */
}

.achievement-box img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* -------------------- */
/* ANIMATION CLASSES */
/* -------------------- */

/* Scroll Reveal (from previous example) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Content Stagger Reveal (for service cards) */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.visible .reveal-up {
    opacity: 1;
    transform: translateY(0);
}

/* This needs JS to apply staggered delays */

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

/* -------------------- */
/* RESPONSIVE DESIGN */
/* -------------------- */
@media (max-width: 600px) {
    .overview-header h2 {
        font-size: 1.8em;
    }

    .tab-title {
        font-size: 1.1em;
        padding: 15px 20px;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------- */
/* 1. Section & Title Styling */
/* ---------------------------------- */

.licence-section {
    padding: 60px 20px;
    background-color: var(--bg-light);
    text-align: center;
}

.licence-title {
    font-size: 2.2em;
    color: var(--secondary-color);
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

/* Subtle underline animation/design */
.licence-title::after {
    content: '';
    display: block;
    width: 60%;
    height: 4px;
    background-color: var(--primary-color);
    margin: 8px auto 0;
    border-radius: 2px;
}

/* ---------------------------------- */
/* 2. Grid Layout & Equal Height FIX */
/* ---------------------------------- */

.licence-layout {
    /* Use CSS Grid for the 4-column structure */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 equal columns on large screens */
    gap: 25px;
    /* Spacing between cards */
    max-width: 1200px;
    margin: 0 auto;

    /* FIX: The default behavior of grid items is to stretch the row,
       ensuring all cards have the same height. */
    align-items: stretch;
}

/* ---------------------------------- */
/* 3. Card Styling & Animation */
/* ---------------------------------- */

.licence-card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;

    /* Use Flexbox INSIDE the card to manage content alignment */
    display: flex;
    flex-direction: column;
}

/* Card Hover Animation (Professional Lift Effect) */
.licence-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.licence-subtitle {
    font-size: 1.1em;
    color: var(--primary-color);
    margin: 10px 0 20px;
    padding-bottom: 5px;
    border-bottom: 2px solid #eee;
}

.licence-card img {
    /* Ensure the image takes up available space but maintains aspect ratio */
    width: 100%;
    height: auto;
    max-height: 350px;
    /* Optional: Sets a max height for visual uniformity */
    object-fit: contain;
    /* Ensures the certificate image is not stretched/cropped */
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: auto;
    /* Pushes the image down if needed, but flex takes care of it */
    transition: transform 0.3s ease;
}

/* Optional: Subtle image zoom on hover */
.licence-card:hover img {
    transform: scale(1.02);
}

/* ---------------------------------- */
/* 4. Responsive Design */
/* ---------------------------------- */

@media (max-width: 1200px) {

    /* Large Tablets/Small Desktops: Drop to 3 columns */
    .licence-layout {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    /* Tablets: Drop to 2 columns */
    .licence-layout {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 500px) {

    /* Small Phones: Stack vertically (1 column) */
    .licence-layout {
        grid-template-columns: 1fr;
    }

    .licence-card {
        padding: 15px;
    }
}


/* ---------------------------------- */
/* 1. Timeline Section Setup */
/* ---------------------------------- */

.process-timeline-section {
    padding: 80px 0;
    background-color: white;
}

.timeline-header {
    text-align: center;
    margin-bottom: 70px;
}

.timeline-header h2 {
    font-size: 2.8em;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.timeline-header .subtitle {
    font-size: 1.1em;
    color: #666;
}

/* ---------------------------------- */
/* 2. Timeline Core Structure & Line */
/* ---------------------------------- */

.timeline-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}

/* Vertical Line in the Center */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 3px;
    background-color: var(--line-color);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;
}

/* ---------------------------------- */
/* 3. Timeline Item (Steps) */
/* ---------------------------------- */

.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
    box-sizing: border-box;
}

/* Left/Right Positioning */
.timeline-item.left-side {
    left: 0;
    padding-right: 60px;
}

.timeline-item.right-side {
    left: 50%;
    padding-left: 60px;
}

/* The Circle Icon on the Line */
.timeline-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: white;
    border: 5px solid white;
    border-radius: 50%;
    z-index: 10;
    line-height: 40px;
    /* Center content vertically */
    text-align: center;
    font-size: 1.5em;
    box-shadow: 0 0 0 5px var(--bg-light);
}

.timeline-item.left-side .timeline-icon {
    right: -25px;
}

.timeline-item.right-side .timeline-icon {
    left: -25px;
}

/* Content Card */
.timeline-content {
    background-color: var(--bg-light);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.timeline-content h3 {
    color: var(--secondary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
    margin-top: 0;
}

/* --- Nested Content Styles --- */

/* Step 1: Service Grid */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.detail-card {
    background: white;
    padding: 15px;
    border-radius: 5px;
    border-left: 3px solid var(--primary-color);
}

.detail-card h4 {
    font-size: 1em;
    margin: 0 0 5px 0;
    color: var(--primary-color);
}

.detail-card p {
    font-size: 0.9em;
    margin: 0;
}

/* Step 2/3/5: Images */
.process-image {
    width: 100%;
    border-radius: var(--border-radius);
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Step 4: Tracking Details */
.tracking-details {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.tracking-sample {
    width: 50%;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* ---------------------------------- */
/* 5. Continuous Bouncing Animation (New) */
/* ---------------------------------- */

/* 1. Define the Bouncing Keyframes */
@keyframes bounce-left {

    0%,
    100% {
        transform: translateX(0);
        /* Start and end position (center) */
    }

    50% {
        transform: translateX(-50px);
        /* Move 15px to the left */
    }
}

@keyframes bounce-right {

    0%,
    100% {
        transform: translateX(0);
        /* Start and end position (center) */
    }

    50% {
        transform: translateX(50px);
        /* Move 5px to the right */
    }
}

/* 2. Apply the Animation to Timeline Items */

/* Ensure the initial position is reset from the fade-in animation (if still used) */
.timeline-item {
    /* Keep existing fade-in styles (opacity, transition) if you still want them */

    /* Overwrite the transform for continuous movement */
    transform: none !important;

    /* Apply animation only when the item is visible on screen (Optional: depends on JS) */
    /* For continuous movement, we apply it to the content box for better effect */
}


/* Apply animation to the content card itself */
.timeline-item.left-side .timeline-content {
    animation: bounce-left 2s ease-in-out infinite;
    /* 4 seconds duration, smooth easing, repeats forever */
}

.timeline-item.right-side .timeline-content {
    animation: bounce-right 2s ease-in-out infinite;
    /* 4 seconds duration, smooth easing, repeats forever */
}

/* ---------------------------------- */
/* 4. Animation (Scroll Reveal) */
/* ---------------------------------- */

/* Initial state (hidden) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Final state (visible - Handled by JS) */
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-up {
    /* Used for staggering inside content */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* ---------------------------------- */
/* 5. Responsive Design */
/* ---------------------------------- */

@media (max-width: 768px) {

    /* Collapse the timeline to a single column for mobile */
    .timeline-container::after {
        left: 30px;
        /* Move the line to the left side */
    }

    .timeline-item {
        width: 100%;
        padding-left: 60px;
        /* Create space for the icon */
        padding-right: 5px;
    }

    .timeline-item.right-side,
    .timeline-item.left-side {
        left: 0;
        padding-left: 60px;
        padding-right: 5px;
    }

    /* Reposition icon to the left line */
    .timeline-icon {
        left: 5px !important;
        right: auto !important;
    }

    .detail-grid,
    .tracking-details {
        grid-template-columns: 1fr;
        /* Stack service cards and tracking images */
    }

    .timeline-header h2 {
        font-size: 2em;
    }
}

/* ---------------------------------- */
/* HUB SECTION STYLING (No change to main structure) */
/* ---------------------------------- */
.hub-section {
    padding: 80px 20px;
    background-color: white;
}

.hub-title {
    font-size: 2.5em;
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 50px;
}

.hub-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

/* ---------------------------------- */
/* FIX: 4-IMAGE GALLERY INSIDE HUB-MAP */
/* ---------------------------------- */

.hub-map {
    /* Main Grid for the 4 images */
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 columns, 2 rows */
    grid-template-rows: auto auto;
    gap: 15px;

    background-color: transparent;
    padding: 15px;
    border: 2px solid var(--bg-light);
    border-radius: var(--border-radius);
}

/* IMPORTANT FIX for Images */
.hub-map img {
    /* Ensure the image takes up 100% of its grid cell width */
    width: 100%;

    /* Set a consistent height or ratio to ensure all 4 cells are the same size */
    /* If images have different aspect ratios, a fixed ratio is best */
    aspect-ratio: 16/9;

    /* object-fit: contain; is the key to ensuring the ENTIRE image is visible,
       even if it doesn't perfectly fill the aspect-ratio box. */
    object-fit: contain;

    /* Center the image within its box if 'contain' is used */
    margin: auto;

    /* Decoration and Animation */
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* Ensure all images are displayed (overriding previous hidden logic) */
    display: block !important;
}

/* Animation on hover for gallery images */
.hub-map img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------- */
/* Right Column: Process Steps (Flow) - Minimal styles for cleanliness */
/* ---------------------------------- */

.hub-steps {
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 10px 0;
}

.hub-step {
    background-color: white;
    padding: 15px;
    margin: 5px 0;
    border-radius: 8px;
    font-size: 1.1em;
    color: var(--secondary-color);
    border: 1px solid #ddd;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    text-align: left;
    transition: all 0.3s ease;
}

.hub-arrow {
    font-size: 1.2em;
    color: var(--primary-color);
    text-align: center;
    height: 20px;
}

/* ---------------------------------- */
/* RESPONSIVE DESIGN */
/* ---------------------------------- */
@media (max-width: 900px) {
    .hub-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 550px) {

    /* Mobile: Stack the 4-image gallery into a 1-column layout */
    .hub-map {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hub-map img {
        aspect-ratio: 4/3;
        /* Adjust ratio for better single-column viewing */
    }
}

/* Custom CSS for Org Chart section */
.org-chart-section {
    padding: 80px 0;
    background-color: #f9f9f9;
    text-align: center;
}

.org-chart-section h2 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 20px;
}

.org-chart-section p.subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 40px;
}

.org-chart-container {
    max-width: 1000px;
    /* Adjust as needed */
    margin: 0 auto;
    padding: 20px;
    border-radius: 8px;
}

.org-chart-image-wrapper {
    margin-bottom: 30px;
}

.org-chart-image-wrapper a {
    display: inline-block;
    cursor: zoom-in;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.org-chart-image-wrapper a:hover {
    transform: scale(1.01);
    /* Slight zoom on hover */
}

.org-chart-image-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Remove extra space below image */
}

/* --- Textual Summary for Accessibility and SEO --- */
.org-chart-text-summary {
    text-align: left;
    margin-top: 40px;
}

.org-chart-text-summary h3 {
    font-size: 1.8em;
    color: #007bff;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}

.org-chart-text-summary ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.org-chart-text-summary ul li {
    margin-bottom: 5px;
    font-size: 1em;
    color: #444;
}

.org-chart-text-summary ul li strong {
    color: #222;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .org-chart-section h2 {
        font-size: 2em;
    }

    .org-chart-text-summary h3 {
        font-size: 1.5em;
    }
}

/* --- General Section Styling (if not in main-style.css) --- */
.prohibited-cargo-section {
    padding: 80px 0;
    text-align: center;
}

.cargo-header {
    margin-bottom: 50px;
}

.cargo-header h2 {
    font-size: 2.5em;
    color: #cc5500;
    /* Your brand's orange/red color */
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.cargo-header .subtitle {
    color: #666;
    font-size: 1.1em;
    margin-top: 10px;
}

/* --- Grid Layout for Flip Cards --- */
.prohibited-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Responsive columns */
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------------------------------- */
/* 3D Flip Card Structure */
/* ---------------------------------- */

/* 1. Main Container (Defines the 3D space for each card) */
.cargo-item-container {
    perspective: 1000px;
    /* Depth of the 3D effect */
    height: 250px;
    /* Fixed height for consistency */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Initial shadow */
    transition: box-shadow 0.3s ease;
    /* Smooth shadow transition */
}

.cargo-item-container:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* Lifted shadow on hover */
}

/* 2. The Flipper (The actual element that rotates) */
.cargo-item-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    /* Rotation Speed */
    transform-style: preserve-3d;
    /* KEY: Enables 3D space for children */
    border-radius: 8px;
}

/* 3. Flip on Hover */
.cargo-item-container:hover .cargo-item-flipper {
    transform: rotateY(180deg);
}

/* 4. Front and Back Sides (The actual content) */
.cargo-front,
.cargo-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* KEY: Hide the back of the card when facing away */
    border-radius: 8px;
    padding: 25px;
    box-sizing: border-box;
    background: white;

    /* Center content vertically and horizontally */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ---------------------------------- */
/* FRONT SIDE STYLES */
/* ---------------------------------- */
.cargo-front {
    transform: rotateY(0deg);
    /* Default state for front */
    border-left: 5px solid #00acac;
    /* Teal brand line */
}

.cargo-icon {
    margin-bottom: 10px;
    font-size: 2.5em;
    color: #cc5500;
    /* Orange/Red icon color */
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fcece3;
    /* Light background for the icon */
}

.cargo-content {
    text-align: center;
}

.cargo-content h3 {
    margin-top: 5px;
    font-size: 1.3em;
    color: #333;
}

.cargo-content p {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 0;
}

/* ---------------------------------- */
/* BACK SIDE STYLES */
/* ---------------------------------- */
.cargo-back {
    transform: rotateY(180deg);
    /* Rotated for back side */
    background-color: #00acac;
    /* Teal background for back */
    color: white;
    text-align: center;
    border: 5px solid #cc5500;
    /* Orange border for back */
}

.cargo-back h3 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
    color: white;
    /* Ensure text is visible on dark background */
}

.cargo-back p {
    font-size: 0.9em;
    margin-bottom: 0;
}

.cargo-back strong {
    font-weight: bold;
}

.cargo-back .small-text {
    font-size: 0.8em;
    margin-top: 15px;
    opacity: 0.8;
}


/* --- Warning Callout --- */
.warning-callout {
    max-width: 900px;
    margin: 50px auto 0;
    padding: 20px;
    background-color: #fff3cd;
    /* Yellow warning background */
    color: #856404;
    /* Dark yellow text */
    border: 1px solid #ffeeba;
    border-radius: 6px;
    display: flex;
    align-items: center;
    text-align: left;
    /* Ensure text aligns left inside callout */
}

.warning-callout i {
    flex-shrink: 0;
    /* Prevent icon from shrinking */
    font-size: 2em;
    margin-right: 15px;
    color: #cc5500;
    /* Orange/Red warning icon */
}

/* --- Optional: Fade-in Animation (for animate-on-scroll class) --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    /* This class is added by JavaScript */
    opacity: 1;
    transform: translateY(0);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .prohibited-list-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        /* Tablet: 2 columns */
    }

    .cargo-item-container {
        height: 280px;
        /* Tablet မှာ အနည်းငယ်ပိုမြင့်အောင် */
    }

    .cargo-front,
    .cargo-back {
        padding: 20px;
    }

    .cargo-icon {
        font-size: 2em;
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 600px) {
    .prohibited-list-grid {
        grid-template-columns: 1fr;
        /* Mobile: Single column */
    }

    .cargo-item-container {
        height: auto;
        /* Mobile မှာ height ကို Auto ပြန်ပေးပြီး content အလိုက် နေရာယူစေပါ */
        min-height: 250px;
        /* အနည်းဆုံး အမြင့်တစ်ခု သတ်မှတ်ပေးပါ */
    }

    .cargo-front,
    .cargo-back {
        padding: 20px;
    }

    /* Mobile မှာ Flip Effect ကို ပိတ်ချင်ရင် ဒါတွေကို ဖွင့်ပေးပါ */
    /*
            .cargo-item-container:hover .cargo-item-flipper {
                transform: none;
            }
            .cargo-item-flipper {
                transform-style: flat;
            }
            .cargo-front, .cargo-back {
                position: relative;
                backface-visibility: visible;
                transform: none;
            }
            .cargo-back {
                display: block; // Flip မရှိတော့ရင် back ကို မြင်ရအောင်
                background-color: #008c8c; // နောက်ဘက် background ပြောင်း
                margin-top: 10px;
            }
            */
    .warning-callout {
        flex-direction: column;
        text-align: center;
    }

    .warning-callout i {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* Modal Container Style */
.form-modal {
    display: none;
    /* Default Hidden */
    position: fixed;
    z-index: 1000;
    /* Always on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content Style */
.form-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 450px;
    border-radius: 5px;
    position: relative;
}

/* Close Button Style */
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Simple form styling (optional) */
.form-content input[type=text],
.form-content input[type=email],
.form-content input[type=tel],
.form-content textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0 15px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    /* Important for padding/border calculation */
}

.form-content button[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

.track-btn {
    background-color: var(--primary-color);
    color: white;
    padding: 8px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.track-desktop-btn {
    background-color: var(--primary-color);
    padding: 4px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}