@font-face {
    font-family: "Futura Md BT Medium";
    src: url("../Assets/FuturaMdBTMedium.woff2") format('woff2');
}

@font-face {
    font-family: "Montserrat Regular";
    src: url("../Assets/MontserratRegular.woff2") format('woff2');
}
@font-face {
    font-family: "Montserrat Thin";
    src: url("../Assets/MontserratThin.woff2") format('woff2');
}


:root{
    --primary:#323232;
    --secondary:#EDEDED;
    --third:#685B5B;
    /* Velicina fontova */
    --font-size-sm: clamp(0.4rem, 0.17vw + 0.76rem, 0.89rem);
    --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
    --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
    --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
    --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
    --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
    --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
}

figure,figcaption{all:unset;}


.proizvodi-hero-section{
    height: fit-content;
    padding-bottom: 5rem;
    background-image: linear-gradient(rgba(237, 237, 237, .75), rgba(237, 237, 237, .75)) ,url("../Assets/Slike za pozadine i slicno/IMG_20210213_163333.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modeli{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'	width='100%25' height='100%25' style='background: rgba(50, 50, 50, 1); min-height: 100vh;'%3E%3Cdefs%3E%3Cpattern id='hexagons' width='50' height='43.4' patternUnits='userSpaceOnUse' patternTransform='scale(6) translate(2) rotate(45)'%3E%3Cpolygon points='24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2' id='hex' style='fill: rgba(50, 50, 50, 1); stroke-width: .7; stroke: rgb(56, 56, 56);'/%3E%3Cuse xlink:href='%23hex' x='25' /%3E%3Cuse xlink:href='%23hex' x='-25' /%3E%3Cuse xlink:href='%23hex' x='12.5' y='-21.7' /%3E%3Cuse xlink:href='%23hex' x='-12.5' y='-21.7' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23hexagons)' /%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
}
h3{
    margin-top: 0!important;
    padding-top: 3rem!important;
    color:var(--secondary);
    font-weight: 500;
    font-size: var(--font-size-xl);
    
}
.modeli-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 3rem;
    position: relative;
    align-items:center;
    gap: 3rem;
}
.model-card{
    width: 80%;
    height: fit-content;
    object-fit: cover; 
    position: relative;
    margin-bottom: 2rem;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: var(--secondary);
    outline: 2px solid #323232;
    outline-offset: -1rem;
  }
  .text{
    color: var(--primary);
    position: absolute;
    width: 10ch;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    margin: 0;
    padding: 0;
  }
  .model-card:hover .overlay  {
    opacity: .8;
  }
  
  
 @media screen and (min-width: 768px){
    
    .modeli-container{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 3rem;
    }
    .model-card{
        object-fit: cover;  
        margin-bottom: 2rem;
        width: 40%;
    }
    

}
@media screen and (max-width:1024px){
    .model-card:nth-last-of-type(-n+4){
        display: none;
    }
}

@media screen  and (min-width:1024px){
    
    .model-card{
        object-fit: cover;  
        margin-bottom: 2rem;
        width: 15%;
    }
    .modeli-container::after{
        content: '';
        width: 15%;
      }
    
}