html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    padding: 0;
    margin-bottom: 60px;
    background-image: url('/css/electronics-schematic-background2.jpg');
    background-size: cover;
    background-attachment: fixed;
    color: white;
    font-family: 'behatrice', sans-serif;
    box-sizing: border-box;
}

.navbar {
    background-color: rgba(0, 0, 50, 0.9);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    color: #030d3d;
}

    .navbar a {
        text-decoration: none;
        font-weight: bold;
        font-size: 1rem;
        transition: color 0.3s ease-in-out;
        color: #030d3d;
    }



.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #030d3d;
}

    .navbar-brand img {
        max-height: 50px;
        object-fit: contain;
        color:#030d3d;
    }

.content {
    margin-top: 100px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column; 
        padding: 1rem 1rem;
    }

        .navbar a {
            font-size: 0.9rem;
            margin: 0.5rem 0;
        }

    .navbar-brand img {
        max-height: 40px;
    }

    .content-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .content {
        width: 90%;
        margin: 1rem auto;
    }

    form {
        margin-top: 2rem;
    }

    .cta button {
        display: inline-block;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

@font-face {
    font-family: behatrice;
    src: url(/css/BEHATRICE.ttf);
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@media (max-width: 768px) {
    .content-container {
        flex-direction: column; 
        align-items: center;
        text-align: center;
    }

    .text-container {
        flex: unset;
        margin-bottom: 1.5rem;
    }

    .images-container {
        flex: unset;
        flex-direction: row; 
        flex-wrap: wrap; 
        gap: 1rem;
    }

        .images-container img {
            max-height: 100px; 
        }
}
    @media (max-width: 768px) {
        .content-container {
            padding: 1.5rem;
        }

        .text-container h2 {
            font-size: 2rem;
        }

        .images-container img {
            width: 140px;
            height: 140px;
        }
    }
@media (max-width: 768px) {
    .content-container {
        flex-direction: column; 
        align-items: center;
        text-align: center;
    }

    .text-container {
        font-size: 0.5rem; 
        padding: 1rem;
    }

    .images-container, .images-container-right {
        justify-content: center;
        width: 100%;
    }

        .images-container img, .images-container-right img {
            width: 50%; 
            height: auto;
        }
}

/* Układ bazowy (desktop) – dla kontekstu */
.section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .section > * {
        min-width: 0;
    }
/* ważne: zapobiega obcinaniu tekstu w flexie */
.image {
    flex: 0 0 40%;
}

.content {
    flex: 1 1 60%;
}

/* MOBILE */
/* MOBILE FIX */
/* MOBILE: h nad p */
@media (max-width: 768px) {
    .content {
        display: flex;
        flex-direction: column;
        min-height: 0; /* klucz przy flex */
    }

        .content h1, .content h2, .content h3 {
            order: 1;
            margin: 0 0 .5rem;
        }

        .content p {
            order: 2;
            max-height: 50vh; /* ogranicz wysokość */
            overflow-y: auto; /* włącz przewijanie */
            -webkit-overflow-scrolling: touch;
            line-height: 1.5;
            font-size: clamp(0.95rem, 2.8vw, 1.05rem);
            white-space: normal;
            overflow-wrap: anywhere;
            
            column-width: auto !important;
            text-align:left;

        }
            .content p br {
                display: none;
            }
}




@media (max-width: 768px) {
    /* slider bez sztywnej wysokości */
    .swiper,
    .swiper-wrapper,
    .swiper-slide {
        height: auto !important;
    }

    /* centrowanie zawartości slajdu */
    .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px; /* trochę marginesu, opcjonalnie */
        box-sizing: border-box;
    }

        /* klucz: obraz dopasowany do szerokości, bez obcinania */
        .swiper-slide img {
            display: block;
            width: 100%; /* wypełnij szerokość slajdu */
            max-width: 100%; /* nie wychodź poza */
            height: auto; /* zachowaj proporcje */
            object-fit: contain; /* nigdy nie przytnij */
        }
}
/* Baza: nie pozwól elementom wychodzić poza flex-kontener */
.section, .content-container, .top-content, .text-container {
    box-sizing: border-box;
}

    .section > *, .content-container > *, .top-content > *, .text-container > * {
        min-width: 0;
    }

/* Desktop: tekst + obraz w jednym rzędzie */
@media (min-width: 769px) {
    .text-container {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        flex-wrap: nowrap;
    }

    .text-content {
        flex: 1 1 60%;
    }

    .text-container > img {
        flex: 0 0 40%;
        max-width: 40%;
        height: auto;
        object-fit: contain;
    }
}

/* Mobile: kolumna, h nad p, nic się nie ucina */
@media (max-width: 768px) {
    .text-container {
        display: flex;
        flex-direction: column; /* jeden pod drugim */
        align-items: stretch;
        gap: 1rem;
        width: 100%;
    }

    .text-content {
        order: 1;
    }

        .text-content h2 {
            margin: 0 0 .5rem;
            line-height: 1.2;
        }

        .text-content p {
            margin: 0 0 .75rem;
            line-height: 1.5;
        }

        .text-content ul {
            margin: 0;
            padding-left: 1.1rem;
        }

        .text-content, .text-content p, .text-content ul {
            column-count: 1 !important; /* wyłącz wielokolumnowość */
            column-width: auto !important;
            overflow-wrap: anywhere;
            word-break: normal;
            white-space: normal;
            font-size: clamp(.95rem, 2.8vw, 1.05rem);
        }

    .text-container > img {
        order: 2;
        width: 100%;
        height: auto; /* pełna szerokość, proporcje zachowane */
        object-fit: contain;
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .diagonal-container p {
        text-align: left !important;
    }
}