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

/* Hero section background */
#herotips {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%), url(../resources/images/tips.jpg) lightgray 50% / cover no-repeat;
}

/* Hero text styling */
.texthero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.texthero p {
    max-width: 700px;
}

/* Text container styling */
.textcontainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20vh;
    padding-top: 8px;
    padding-bottom: 30vh;
}

/* Background images for different sections */
#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;
}
#id5 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url(../resources/images/zasova.jpg) lightgray 50% / cover no-repeat;
}
#id6 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url(../resources/images/bila.jpg) lightgray 50% / cover no-repeat;
}
#id7 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url(../resources/images/zubri.jpg) lightgray 50% / cover no-repeat;
}
#id8 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url(../resources/images/zasova.jpg) lightgray 50% / cover no-repeat;
}

/* Card container padding */
.card-container {
    padding-top: 48px;
}

/* Text with button styling */
.text-with-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 120px 0px 120px 0px;
}

.text-with-button h2 {
    color: var(--color-black);
    text-align: center;
}