@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

/*
 * Base styles for the Technologia i Styl website. These definitions set up
 * the colour palette, typography and layout for the different sections of
 * the site. The palette draws on dark blues and golds to create a modern
 * industrial feel, while flexible layouts ensure the site looks good on
 * both desktop and mobile devices.
 */

:root {
    --dark-blue: #0a103f;
    --mid-blue: #02071c;
    --gold: #d4af37;
    --light-gold: #e6c981;
    --white: #ffffff;
    --max-width: 1200px;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--mid-blue);
    color: var(--white);
}

header {
    background-color: var(--dark-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 10px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header nav {
    margin-top: 10px;
}

header .language-switch {
    margin-top: 5px;
}

nav a {
    color: var(--gold);
    text-decoration: none;
    margin-left: 20px;
    font-weight: 700;
}

nav a:hover {
    color: var(--light-gold);
}

.language-switch {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.language-switch .flag {
    margin-right: 5px;
    font-size: 1.2em;
}

.section {
    padding: 60px 20px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.section h2 {
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--light-gold);
    font-weight: 700;
}

.section h3 {
    margin-top: 20px;
    color: var(--light-gold);
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
}

.section p {
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 500;
}

/* Card layout for capabilities and other lists */
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: stretch;
}

.card {
    background-color: var(--dark-blue);
    border: 1px solid var(--gold);
    padding: 20px;
    border-radius: 4px;
    flex: 1 1 calc(33.333% - 20px);
    min-width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card h3 {
    margin-top: 0;
    color: var(--light-gold);
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
}

.card p {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
}

/* Gallery slider styles */
.slider {
    overflow: hidden;
    white-space: nowrap;
    margin-top: 40px;
}

.slide-track {
    display: flex;
    animation: scroll 60s linear infinite;
}

.slide-track:hover {
    animation-play-state: paused;
}

/*
 * Each slide in the gallery carousel. A larger width ensures that the
 * photographs are clearly visible and not reduced to small thumbnails.
 * The margin controls the spacing between images as they scroll.
 */
/*
 * Increase the size of each image in the scrolling gallery to ensure
 * they are clearly visible. Setting a wider width prevents the
 * photographs from appearing as tiny thumbnails on larger screens.
 */

/*
 * The gallery carousel uses relatively large thumbnails so that each image is
 * clearly visible on desktop displays. Increase the slide width to 600px
 * and maintain generous spacing. A wider slide prevents the photographs
 * appearing as small thumbnails and makes the gallery feel more immersive.
 */
.slide {
    flex: 0 0 auto;
    width: 600px;
    margin-right: 40px;
}

.slide img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    /*
     * Updated scroll distance: slide width (600px) + margin (40px) = 640px.
     * Multiply by the number of slides (14 original + 14 duplicate = 28)
     * to ensure a seamless infinite scroll effect. 640 × 28 = 17920px.
     */
    100% { transform: translateX(calc(-640px * 28)); }
}

/*
 * Gallery grid layout. This grid replaces the previous horizontal slider for
 * the gallery section. It displays photographs in a responsive, multi‑column
 * layout so that each image occupies approximately one third of the
 * container width on larger screens. On smaller screens the images will
 * automatically wrap to the next line. The container itself is constrained
 * to three quarters of the maximum page width (900px relative to the
 * `--max-width` of 1200px) and centered within the page.
 */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 900px;
    margin: 40px auto 0;
}

.gallery-grid img {
    width: calc(33.333% - 20px);
    height: auto;
    border-radius: 4px;
}

/* Metrics section */
.metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    margin-top: 40px;
}

.metric {
    text-align: center;
    flex: 1 1 200px;
}

.metric h3 {
    color: var(--gold);
    font-size: 32px;
    margin: 0;
}

.metric p {
    margin: 5px 0 0;
    font-size: 14px;
    color: var(--light-gold);
}

/* Contact section */
.contact {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

.contact-details,
.contact-form {
    flex: 1 1 300px;
}

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

.contact-form label {
    margin-bottom: 5px;
    font-size: 14px;
}

.contact-form input,
.contact-form textarea {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--gold);
    border-radius: 4px;
    background-color: var(--mid-blue);
    color: var(--white);
    font-family: inherit;
}

.contact-form button {
    padding: 12px;
    border: 2px solid var(--gold);
    background-color: transparent;
    color: var(--gold);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.contact-form button:hover {
    background-color: var(--gold);
    color: var(--dark-blue);
}

/* Certificates */
.certificates {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

.certificates img {
    /* Allow certificates to appear larger so that details (especially for
     * portrait-oriented documents) remain legible. */
    max-width: 300px;
    height: auto;
    margin: 10px;
    border: 1px solid var(--gold);
    border-radius: 4px;
}

/* FAQ section */
.faq-item {
    margin-bottom: 20px;
}

.faq-item h3 {
    color: var(--light-gold);
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 18px;
}

.faq-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Responsive layout */
@media (max-width: 768px) {
    .cards,
    .metrics,
    .contact {
        flex-direction: column;
    }
}