@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);
}
a{
    color: initial;
}
figure,figcaption{all:unset;}
.reference-hero-section{
    height: 50vh;
}
h2{
    font-family: "Montserrat Regular";
    font-style: italic;
}
h3{margin-top: 0;}
.klijenti{
    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;

}
.klijenti h3{
    color: var(--secondary);
    padding-top: 2rem;
    font-weight: 500;
}
.ref-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
}
.ref-card{
    object-fit: cover;  
    margin-bottom: 2rem;
    width: 90%;
}
.ref-card figcaption{
    color: white;
    font-family: "Montserrat Regular";
    font-size: var(--font-size-md);
}
.ref-card img{
    padding-bottom: .75rem;
    height: 20rem;
}

.text-reference{
    background-color: var(--secondary);
    text-align: center;
    padding-bottom: 3rem;
}
.text-reference ul{
    text-align: left;
}
.text-reference h3{
    padding-top: 2rem;
    
}
.klijenti-container{
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.klijenti-container ul{
    margin-bottom: 3rem;
    margin-left: auto;
    margin-right: auto;
}
.ref-contact-btn{
    all: unset;
    background-color: var(--primary);
    color: var(--secondary);
    border-radius: .5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: var(--font-size-base);
    width: fit-content;
    cursor: pointer;
}
.ref-contact-btn:hover{
    background-color: #393939;
}
.ref-contact-btn:visited{
    color: var(--secondary);
    
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;
  }
  .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

@media screen and (min-width: 768px){
    
    .ref-container{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 3rem;
    }
    .ref-card{
        object-fit: cover;  
        margin-bottom: 2rem;
        width: 40%;
    }
    .klijenti-container{
        flex-direction: row;
    }
    .klijenti-container ul{
        margin-bottom: 3rem;
        margin-right: 3rem;
    }
    .quote{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 10rem;
        width: fit-content;
        align-items: center;
        width: 25rem;
        font-family: "Montserrat Regular";
    }
}
@media screen  and (min-width:1024px){
    
    .ref-card{
        object-fit: cover;  
        margin-bottom: 2rem;
        width: 30%;
        
    }
    .klijenti-container{
        gap: 10rem;
    }
    .klijenti-container ul{
        margin-bottom: 3rem;
        margin-right: 3rem;
        margin-left:0 ;
    }
}
 @media (hover: none) and (orientation:landscape){
    header{
        height: fit-content!important;
    }
    header h2{
        margin-bottom: 0;
        padding-bottom: 3rem;
    }
 }
@media screen and (min-width:1600px) {
    .ref-container{
        padding-left: 10rem;
        padding-right:10rem;
    }
}