@import url(../css/general.css);

html {
    scroll-behavior: smooth;
}


/* Hero section*/
#hero{
    background: linear-gradient(180deg, rgba(17, 15, 16, 0.20) 4.69%, rgba(17, 15, 16, 0.72) 60.45%, #110F10 100%), url(../resources/images/IMG_9769.jpg) lightgray 50% / cover no-repeat;

}


#texthero{
    display: flex;
    min-height: 100vh;
    padding-top: 26vh;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}





/* Tracks section*/

#tracks{
    background-color: var(--color-light-black);
    padding-bottom: 80px;
}

#tracks .textcontainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 33px;
}

.cards-and-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 33px;
    align-self: stretch;
}




/* Cards section*/
#id1 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url(../resources/images/javornik.jpg) lightgray 50% / cover no-repeat;
}
#id2 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url(../resources/images/radhost.jpg) lightgray 50% / cover no-repeat;
}

#id3 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url(../resources/images/velkalhota.jpg) lightgray 50% / cover no-repeat;
}
#id4 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url(../resources/images/solan.jpg) lightgray 50% / cover no-repeat;
}



/* About Beskydy*/


.container-with-lines{
    display: flex;
    padding: 80px 0px 0px 0px;
    flex-direction: column;
    align-items: center;
    gap: 66px;
}

.container-with-lines h2{
    color: var(--color-black);
}

.container-with-lines p{
    color: var(--color-black);
}

.container-about-beskydy{
    display: flex;
    align-items: center;
    gap: 10vw;
    padding: 0px 80px 0px 80px;
}

.container-with-lines hr {
    height: 2px;
    background-color: #CDCDCD;
    border: none;
    width: 100%;
}
















/* Nature*/


#with-respect-to-nature {
    padding-top: 72px;
    padding-bottom: 72px;
}

.container-nature {
    display: flex;
    align-items: center;
    gap: 80px;
    flex-wrap: wrap; 
}

#forestpicture {
    flex: 1 1 300px; /* Flexibilní šířka s minimální šířkou obrázku */
}

#forestpicture img {
    width: 100%;
    height: 845px; /* Nastavení pevné výšky obrázku */
    object-fit: cover; /* Udržuje správné ořezání obrázku, aby vyplnil prostor */
    border-radius: 12px;
}

.container-nature-text {
    flex: 1 1 300px;
    max-width: 800px; /* Maximální šířka textového bloku */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 64px;
}

.container-nature h2 {
    color: var(--color-black);
    margin: 0;
}

.container-nature p {
    color: var(--color-black);
    margin: 0;
}

.nature-items {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Zmenšená mezera mezi ikonami *//* Ikony zůstanou v jedné řadě */
    align-self: stretch;
    flex-wrap: wrap;
}

.nature-item {
    display: flex;
    width: 120px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px; /* Menší mezera mezi ikonou a textem */
}










/*  .relative-graphic{
    position: relative;
    bottom: 750px;
    left: -500px;



    
}
*/















/* Media queries pro responzivitu */
@media (max-width: 768px) {
    
    
    
    
    
    .container-about-beskydy {
        flex-direction: column; /* Při menších obrazovkách se změní rozložení na sloupec */
        align-items: center; /* Texty budou vycentrovány */
        gap: 20px; /* Zmenšení mezery mezi texty */
        padding: 0px 20px; /* Menší padding */
    }
    
    
    
    
    
    .container-nature {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    #forestpicture {
        flex: none;
    }
    #forestpicture img {
        height: auto; /* Zachování proporcí obrázku */
        max-height: 400px;
    }

    .container-nature-text {
        max-width: 100%; /* Textový blok se roztáhne na celou šířku */
    }

    .nature-items {
        flex-wrap: wrap; /* Přizpůsobení ikon na menších obrazovkách */
    }
}