:root {
    --primary: #1E60AA;
    --secondary: #FF4917;
    --light: #EDF1FC;
    --dark: #17224D;
}


.light-conteiner{
    position: relative;
    padding: 8rem 0 12rem 0;
    background-color: var(--light);
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-foto{
    padding: 0 0 0 0!important;
}

.big-font{
    font-size: 20px;
    font-weight: bold;
}

.big-font-services{
    color: var(--dark);
    font-size: 22px;
    font-weight: bold;
}

/* Stylowanie tabeli */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    color: #ffffff;
}

/* Stylowanie nagłówków tabeli */
table th {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: left;
}

/* Stylowanie komórek tabeli */
table td {
    padding: 5px;
    border: 1px solid #ddd;
}

/* Stylowanie dla parzystych wierszy tabeli */
table tr:nth-child(even) {
    border: 1px solid #ddd;
}


/* Kontener popupu */

.popup {
    display: none; /* Ukryty domyślnie */
    position: fixed; /* Pozostaje w tym samym miejscu podczas przewijania */
    z-index: 9999; /* Nad innymi elementami */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Czarny z przezroczystością */
    justify-content: center;
    align-items: center;
    overflow: auto; /* Włącza przewijanie w popupie, jeśli potrzebne */
    padding: 20px;
}

/* Pokazuje popup i aktywuje Flexboxa */
.popup-show {
    display: flex;
}

/* Zawartość popupu */
.popup-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    position: relative;
    border-radius: 10px;
    box-sizing: border-box;
}

/* Przycisk zamknięcia */
.close {
    color: #aaaaaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

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


/*footer */

.footer-content{
    color: #fff!important;
}

.footer-content:hover{
    color: #2eb0ec!important;
}


/* Services space */

.service-block {
    display: flex;
    flex-wrap: wrap;
}

.service-item {
    flex: 0 0 30%;
    max-width: 30%;
    margin-bottom: 20px;
    margin-right: 1.5%;
    box-sizing: border-box;
}

.service-item:nth-child(3n) {
    margin-right: 0;
}

/* Responsywność */
@media (max-width: 992px) {
    .service-item {
        flex: 0 0 45%;
        max-width: 45%;
    }
    .service-item:nth-child(3n) {
        margin-right: 1.5%;
    }
    .service-item:nth-child(2n) {
        margin-right: 0;
    }
}

@media (max-width: 576px) {
    .service-item {
        flex: 0 0 100%;
        max-width: 100%;
        margin-right: 0;
    }
}


/* POSTY */

/* Kontener postu */
.post {
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}

/* Animacja wysokości dynamicznej treści */
.dynamic-content {
    max-height: 200px; /* Ustaw początkową maksymalną wysokość */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

/* Gdy treść jest rozwinięta */
.dynamic-content.expanded {
    max-height: 1000px; /* Ustaw dużą wartość, aby pomieścić pełną treść */
}

/* Ukrywanie dodatkowej treści */
.dynamic-content .more-text {
    display: none;
}

/* Pokazywanie dodatkowej treści, gdy jest rozwinięta */
.dynamic-content.expanded .more-text {
    display: inline;
}

/* Ukrywanie wielokropka, gdy jest rozwinięta */
.dynamic-content.expanded .ellipsis {
    display: none;
}

/* Styl dla przycisku */
.read-more {
    padding: 0;
    border: none;
    background: none;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}

/* Ukrycie innych postów tylko na dużych ekranach */
@media (min-width: 768px) {
    /* Gdy post jest rozszerzony */
    .post.expanded {
        flex-basis: 100%;
        max-width: 100%;
    }

    /* Ukrywanie innych postów z użyciem opacity i transform */
    .posts-container.expanded .post:not(.expanded) {
        opacity: 0;
        transform: scale(0.95);
        pointer-events: none;
        max-height: 0;
        margin: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }
}

/* Opcjonalne style dodatkowe */
.alert {
    margin-top: 20px;
}

textarea {
    resize: vertical;
}


/* Buttony */

.contact-button{
    background-color: var(--light);
    border: 3px solid var(--light);
    width: 150px;
    padding: 10px;
    margin: 10px 20px;
}

.contact-button:hover{
    background-color: var(--dark);
    color: var(--light);
    border: 3px solid var(--light);
}
  
.popup-trigger:hover{
    background-color: var(--dark)!important;
    color: #fff!important;
}

.red-button:hover{
    color: var(--light)!important;
}

.header-link a:hover{
    color: var(--secondary)!important;
}

.read-more{
    color: var(--dark);
    background-color: var(--light);
    border: none;
}

.read-more:hover{
    color: var(--secondary);
}


.img-header{
    margin: auto;
    width: 100%;
    max-height: 1080px;
}

@media screen and (max-width: 920px){
    .img-header{
        width: auto;
    }

    .container-header{
        overflow: hidden;
    }
    
}