@font-face
{
    font-family: 'alte-din-1451-mittelschrift.regular';
    src: url('alte-din-1451-mittelschrift.regular.ttf');
}

html, body {
    margin: 0;
    height:100%;
    width:100%;
    padding:0;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    background-color: #25598a;
    font-family: "alte-din-1451-mittelschrift.regular";
    color: white;
}

section{
    scroll-snap-align: center;
}


#welcome {
    display: flex;
    height:100vh;
    width:100%;
    padding: 60px;
    justify-content: center;
    align-items: center;
    box-sizing:border-box;

}

#aboutus {
    position: relative;
    display: flex;
    height:100vh;
    width:100%;
    padding: 60px;
    box-sizing:border-box;
}

#services {
    position: relative;
    display: flex;
    height:100vh;
    width:100%;
    padding: 60px;
    box-sizing:border-box;
    min-height: 100vh; /* Nastavi minimalno višino sekcije */
    overflow-y: auto; /* Omogoči vertikalno pomikanje znotraj sekcije */
}


#metalworking {
    position: relative;
    display: flex;
    height:100vh;
    width:100%;
    padding: 60px;
    box-sizing:border-box;
}

#metalworking2 {
    position: relative;
    display: flex;
    height:100vh;
    width:100%;
    padding: 60px;
    box-sizing:border-box;
}

#metalworking3 {
    position: relative;
    display: flex;
    height:100vh;
    width:100%;
    padding: 60px;
    box-sizing:border-box;
}


#woodworking{
    position: relative;
    display: flex;
    height:100vh;
    width:100%;
    padding: 60px;
    box-sizing:border-box;
}

#Measurements{
    position: relative;
    display: flex;
    height:100vh;
    width:100%;
    padding: 60px;
    box-sizing:border-box;
}

#contact{
    position: relative;
    display: flex;
    height:100vh;
    width:100%;
    padding: 60px;
    box-sizing:border-box;
}

/* .pulsate {
    position: absolute;
    bottom: 20px;
    right: 20%;
    animation: scroll-down 1s ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 1s;
} */

.pulsate {
    position: absolute;
    bottom: 20px;
    right: 20%;
    animation: blinker 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

@keyframes blinker {  
    from { opacity: 1; }
    to { opacity: 0; }
  }

@media only screen and (max-width: 768px) {
    .slika {
        max-width: 40%;
    }
  }

.pulsate i {
    cursor: pointer;
}

.timelinearea{
    margin: auto;
    max-width: 360px;
    padding: 0 20px 0 30px;
}

.timeline{
    padding: 10px 25px;
    border: 1px solid black;
    line-height: 1.7;
    position: relative;
    max-height: 210px;
    margin-bottom: 20px;
}

/* @keyframes scroll-down {
    0%{
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        top: 90%;
    }
} */