/* --- Base Styles (Mobile First) --- */
:root {
    --navy-blue: #0a1a3f;
    --golden-yellow: #FFD700;
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --text-color: #343a40;
    --border-color: #dee2e6;
}

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    color: var(--text-color);
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--navy-blue);
}

h2 { font-size: 1.2rem; margin-top: 0; margin-bottom: 1em; padding-bottom: 0.5em; position: relative; }
h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background-color: var(--golden-yellow); }
h3 { font-size: 1rem; }
p, li { font-size: 0.8rem; line-height: 1.6; }

/* --- Flipbook --- */
.flipbook-viewport { position: relative; }
.flipbook-container { width: 100vw; height: 100vh; }
.flipbook .page { background-color: var(--white); box-shadow: 0 0 20px rgba(0,0,0,0.2); }
.page-content { padding: 1.5rem; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }

/* --- Cover & Back Pages --- */
.cover-page { background-size: cover; background-position: center; }
.cover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 26, 63, 0.7); }
.cover-content { position: relative; z-index: 1; color: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; }
.cover-logo { max-width: 120px; margin-bottom: 1em; }
.cover-page h1 { font-size: 1.5rem; color: var(--white); margin: 0; }
.cover-page p { font-size: 0.9rem; color: var(--golden-yellow); }

.contact-page { background-color: var(--navy-blue); color: var(--white); text-align: center; }
.contact-page h2, .contact-page p {
    color: var(--golden-yellow);
}

.contact-page .footer-contact-info .contact-detail { font-weight: 600; }
.contact-page .footer-contact-info i { margin-right: 10px; }
.contact-page .qr-code img { margin-top: 1em; background: white; padding: 5px; border-radius: 5px; width: 80px; height: 80px; }

/* --- Content Pages --- */
.image-page { background-size: cover; background-position: center; padding: 0; position: relative; }
.image-caption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1em; background: linear-gradient(to top, rgba(10, 26, 63, 0.8), transparent); color: var(--white); }
.image-caption h3 { color: var(--white); margin: 0; font-size: 1rem; }

.service-grid-catalog { display: flex; flex-direction: column; gap: 1em; }
.service-card-catalog { display: flex; align-items: center; }
.service-card-catalog .service-icon { font-size: 1.5rem; color: var(--golden-yellow); margin-right: 15px; width: 30px; }

.workflow-steps { display: flex; flex-direction: column; gap: 1em; }
.workflow-step { display: flex; align-items: center; }
.workflow-step span { background-color: var(--golden-yellow); color: var(--navy-blue); font-weight: 700; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; justify-content: center; align-items: center; margin-right: 15px; flex-shrink: 0; }

.fleet-showcase-right { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.fleet-image-small { flex: 1; background-size: cover; background-position: center; border-radius: 5px; position: relative; }

.map-container { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.map-container svg { width: 100%; height: 100%; object-fit: contain; fill: var(--light-gray); }

.text-page ul { list-style: none; padding: 0; }
.text-page ul li { display: flex; align-items: center; margin-bottom: 1em; }
.text-page ul i { color: var(--golden-yellow); margin-right: 10px; }

/* --- Controls --- */
.flipbook-controls { display: none; } /* Hidden on mobile */

/* --- Desktop and Tablet Styles --- */
@media (min-width: 768px) {
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.2rem; }
    p, li { font-size: 1rem; }

    .flipbook-container { width: 90vw; height: 90vh; max-width: 1200px; max-height: 800px; }
    .page-content { padding: 2.5rem; }
    .cover-logo { max-width: 180px; }
    .cover-page h1 { font-size: 2.2rem; }
    .cover-page p { font-size: 1rem; }
    .contact-page .qr-code img { width: 100px; height: 100px; }

    .service-grid-catalog { display: grid; grid-template-rows: repeat(3, 1fr); }

    .flipbook-controls {
        position: absolute; top: 50%; left: -2vw; right: -2vw; transform: translateY(-50%);
        display: flex; justify-content: space-between; z-index: 100; pointer-events: none;
    }
    .flipbook-controls button {
        background: rgba(0,0,0,0.5); border: none; color: white; font-size: 1.5rem;
        width: 40px; height: 40px; border-radius: 50%; cursor: pointer; pointer-events: all;
    }
    .flipbook-controls button:hover { background: rgba(0,0,0,0.8); }
}