/* ------------- HEADER INTRO ------------- */
#intro{
    height: auto;
    padding-top: 70px;
}

#intro-container{
    max-width: none;
    width: 100%;
    position: relative;
    min-height: 700px; /*700px*/
}

#intro-img-group{
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
}
#intro-img-group img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit:cover;
    filter: brightness(40%);
    transition: opacity 1s ease;
    opacity: 0;
}
#intro-img-group img:first-child{
    opacity: 1;
}



#intro-content-group{
    padding: 20px 0;
    z-index: 10;
    width: 90%;
    height: 100%;
    gap: 40px;
    color: var(--color1);

    flex-direction: column;
}

#intro-block-title{
    text-align: center;
    width: 100%;
    height: auto;

    flex-direction: column;
}
#intro-block-title-h1{
    font-size: calc(var(--font-size) * 2);
    color: var(--color4);
    flex-direction: column;
    gap: 20px;
}
#intro-block-title-span{
    font-size: calc(var(--font-size) * 1.5);
    font-weight: 500;
    color: var(--color1);

}


#intro-block-subtitle{
    width: 100%;
    text-align: center;
}
.intro-block-subtitle-text{
    font-size: calc(var(--font-size) * 1.1);
    font-weight: 500;
}


#intro-block-welcome{
    width: 100%;
    text-align: center;
    line-height: 1.5rem;
}
.intro-block-welcome-text{
    font-size: calc(var(--font-size) * 1);
    font-weight: 500;
}

@media screen and (max-width: 480px) {
}

/* ------------- MAIN CONTENT ------------- */
#content{
    /* align-items: flex-start; */
    flex-direction: column;
    margin-top: 100px;
}


/* SKILLL */
#skill{
    /* margin-top: 100px; */
    width: 100%;
    min-height: 250px;
    background-color: var(--color3);
}
#content-skill-container{

    display: grid;
    grid-template-areas: 
    'leta tuny metry km';
    place-items: center;
    gap: 30px;
    padding: 30px 0;
}
.skill-items:nth-child(1){
    grid-area: leta;
}
.skill-items:nth-child(2){
    grid-area: tuny;
}
.skill-items:nth-child(3){
    grid-area: metry;
}
.skill-items:nth-child(4){
    grid-area: km;
}

.skill-items{
    width: auto;
    min-height: 100px;  

    flex-direction: column;
    color: var(--color1);
    text-align: center;
}

.skill-number{
    font-size: calc(var(--font-size) * 2);
    font-weight: 500;
}
.skill-text{
    font-size: calc(var(--font-size) * 1.5);
    font-weight: 400;
}

@media screen and (max-width: 1200px) {
    #content-skill-container{
        grid-template-areas: 
        'leta km'
        'metry tuny';
    }    
}
@media screen and (max-width: 768px) {
    #content-skill-container{
        grid-template-areas: 
        'leta'
        'km'
        'metry'
        'tuny';
    }    
}


/* ABOUT */
#content-container{
    flex-direction: column;
    /* align-items: flex-start; */
    min-height: 600px;
    margin-top: 200px;
    max-width: 1200px;
}

#about{
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
}

#about-title-group{
    flex-direction: column;
    text-align: center;
}
#about-title-h2{
    font-size: calc(var(--font-size) * 2);
    font-weight: 500;
    margin-bottom: 15px;
}
#about-title-span{
    /* font-size: calc(var(--font-size) * 1.2);
    font-weight: 500; */
    color: var(--color4);
    font-size: calc(var(--font-size) * 1.5);
    font-family: "Patrick Hand SC"; 
}


#about-content-group{
    padding: 50px;
    margin-top: 50px;
    box-shadow: var(--box-shadow2);
    width: 80%; /*90%*/
    min-height: 600px;
    flex-direction: column;
    gap: 50px;
    border-radius: 12px;

}

.about-content-blocks{
    width: 100%;
    gap: 50px;    
}
.about-content-img{
    max-width: 400px;
    width: 100%;
    border-radius: 12px;
}

.about-content-text-blocks{
    width: 100%;
}


.about-content-h3{
    font-size: calc(var(--font-size) * 1.3);
    font-weight: 500;
    color: var(--color4);
    margin-bottom: 10px;
}
.about-content-text{
    font-size: calc(var(--font-size) * 1);
    font-weight: 400;
    line-height: 1.5rem;

}

@media screen and (max-width: 1200px) {
    #about-content-group{
        width: 100%;
    }
    
}
@media screen and (max-width: 950px) {
    .about-content-blocks{
        flex-direction: column-reverse;  
    }
    .about-content-blocks:nth-child(2){
        flex-direction: column;  
    }
}
@media screen and (max-width: 480px) {
    #about-content-group{
        padding: 30px;
    }
    .about-content-blocks{
        gap: 20px;
    }

}









/* SLUZBY */

#service{
    margin: 100px 0;
    width: 100%;
    text-align: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.70) 100%), url(./media/sluzby.JPG), lightgray 50% / cover no-repeat;
    /* background: url(./media/header/header5.jpeg) no-repeat center center; */
    background-size: cover;
    padding: 50px 0;
}
#content-service-container{
    flex-direction: column;
}

#service-group-title{
    flex-direction: column;
    gap: 20px;
    margin-bottom: 35px;
    color: var(--color1);
}
.service-title-h2{
    font-size: calc(var(--font-size) * 2);
    font-weight: 500;
    color: var(--color1);

}
.service-title-span{
    color: var(--color4);
    font-size: calc(var(--font-size) * 1.5);
    font-family: "Patrick Hand SC"; 
}
.service-title-text{
    max-width: 760px;
    color: var(--color1);
}

#service-group-content{
    flex-direction: column;
    gap: 10px;
    width: 100%;

}


.service-content-blocks{
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.service-content-blocks-item{
    border: 1px solid var(--color3);
    width: fit-content;
    min-height: 100px;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
    color: var(--color1);
}
.service-content-h3{
    font-weight: 700; 
    text-align: center;
}
.service-content-text{
    text-align: center;
}

.service-content-span{
    text-align: center;
    font-weight: 300; 
}

@media screen and (max-width: 900px) {

}
@media screen and (max-width: 768px) {
    .service-content-blocks{
        width: 100%;
        flex-direction: column;
    }
    .service-content-blocks-item{
        width: 100%;
    }
}




/* BEDNENI */

#bedneni{
    max-width: 900px;
    margin: 100px 0;
    flex-direction: column;
}

#bedneni-title-group{
    width: 100%;
    gap: 20px;
    margin-bottom: 50px;
    flex-direction: column;
}
#bedneni-title-h2{
    font-size: calc(var(--font-size) * 2);
    font-weight: 500;
    text-align: center;
}

#bedneni-title-text{
    width: 70%;
    font-weight: 400;
    text-align: center;
    line-height: 1.5rem;

    color: var(--color4);
    font-size: calc(var(--font-size) * 1.5);
    font-family: "Patrick Hand SC";
}




#bedneni-content-group{
    

    gap: 50px;
    padding: 20px;

    display: grid;
    grid-template-areas: 
        'one two'
        'three four'; 
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 250px);
    /* place-items: center; */
}
.bedneni-content-block-item:first-child{
    grid-area: one;
    place-self: center;
}
.bedneni-content-block-item:nth-child(2){
    grid-area: two;
    background: url(./media/header/header3.jpeg) no-repeat center center;
    background-size: cover;
}
.bedneni-content-block-item:nth-child(3){
    grid-area: three;
}
.bedneni-content-block-item:nth-child(4){
    grid-area: four;
}



.bedneni-content-block:first-child .bedneni-content-block-item:first-child{
    place-self: center;

}


.bedneni-content-h3{
    font-size: calc(var(--font-size) * 1.3);
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--color4);

    line-height: 1.5rem;
}
.bedneni-content-text{
    font-size: calc(var(--font-size) * 1);
    font-weight: 400;

    line-height: 1.5rem;

}

/* #bedneni-content-block-img{
    max-width: 400px;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 12px;
} */

@media screen and (max-width: 1000px) {
    #bedneni-content-group{
    

        gap: 50px;
        padding: 20px;
    
        display: grid;
        grid-template-areas: 
            'one'
            'two'
            'three'
            'four'; 
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, 1fr);
        
    }    
    #bedneni-title-group{
        margin-bottom: 0px;

    }
  
    
}
@media screen and (max-width: 768px) {
    #bedneni{
        width: 90%;
    }
    #bedneni-title-group{
        padding: 0 20px;
        margin-bottom: 0px;

    }
  
}



/* AKTUALNI */
#aktualni{
    width: 100%;
    margin-bottom: 200px;
    overflow-y: hidden;
}
#reference-alktualni{
    width: 100%;
    overflow-y: hidden;
    /* height: 800px; */
}



/* Delivery */

#delivery{
    width: 100%;
    color: var(--color1);
    min-height: 700px;
    padding: 100px 0;
    text-align: center;
    flex-direction: column;
    gap: 20px;
    background: url(./media/doprava.JPG);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

#delivery-container{
    flex-direction: column;
}

.delivery-group-content{
    flex-direction: column;
    gap: 20px;
}


.delivery-title-h2{
    font-size: calc(var(--font-size) * 2);
    font-weight: 500;
    color: var(--color1);
    margin-bottom: 20px;
}
.delivery-title-span{
    color: var(--color4);
    font-size: calc(var(--font-size) * 1.5);
    font-family: "Patrick Hand SC"; 
}



.delivery-content-blocks{
    margin-top: 50px;
    flex-direction: row;
    gap: 50px;
}
#delivery-content-under{
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}
/* item 1 */

/* item 2 */ 
.delivery-blocks-text{
    max-width: 350px;
    text-align: left;

}
/* item 3 */
.delivery-blocks-h3{
    text-align: left;
}
.delivery-blocks-list{
    text-align: left;
    gap: 25px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}
/* item 4 */
#delivery-content-button{
    max-width: 350px;
    width: 100%;
}
#delivery-item-list{
    /* max-width: 350px; */
    width: 100%;
}
.delivery-list-item{
    list-style: disc;
    margin-left: 20px;
}
.delivery-btn-link{
    border: 1px solid var(--color3);
    min-height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--color3);
}
/* only for blocks with headline */
.delivery-blocks-item-gap{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/*  */


@media screen and (max-width: 768px) {
    .delivery-content-blocks {
        flex-direction: column;
    }
    #delivery-content-under{
        justify-content: center;
        align-items: center;
    }
}