@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);
    --swiper-navigation-top-offset: 60%;
}
body{
    overflow-x: hidden !important;
}
header{
    background: none;
    background-color: var(--secondary)!important;
    height: fit-content;
    padding-bottom: 3rem;
}
.hero-model{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
figure img{
    border: 10px solid var(--primary);
    max-width: 400px;
}
figcaption{
    font-family: "Futura Md BT Medium";
    font-size: var(--font-size-lg)!important;
}
.info a{
    cursor: pointer;
    transform: scale(0.9) !important;
    transition: transform 0.3s ease;
}
.info a:hover{
    transform: scale(1.2) !important;
}

.galerija{
    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(7) 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;
    margin-top: 0;
    overflow: hidden !important;
    
}

.swiper-container{
    height: fit-content;
}
.swiper-slide {
    min-width: 100%!important;
    object-fit: cover !important;

}
.swiper-slide img{
    object-fit: cover !important;
    width: 100%;
    display:block;
    height: 300px;
}

.quote{
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
    text-align: center;

}
h3{
    color: var(--secondary);
    font-size: var(--font-size-lg);
    padding-top: 2rem;
    padding-bottom: 1rem;

}
@media screen and (min-width:768px){
.hero-model{
    flex-direction: row;
    padding-top: 3rem;
    justify-content: space-around;
    align-items: flex-start;
}
.swiper-slide img{
    height: 25rem !important;
}
.quote{
    font-size: var(--font-size-base);
    padding-top: 3rem;
}
}
@media  screen and (min-width:1024px){
    :root{
        --swiper-navigation-top-offset: 55%;
    }
    .swiper-container{
        min-height: 40rem!important;
        padding-left: 5rem;
        padding-right: 5rem;
    }
    .swiper-slide img{
        height: 35rem !important;
    }
    
       
}
@media screen and (min-width:1600px){
    :root{
        --swiper-navigation-top-offset: 56%;
    }
    .hero-model{
       justify-content: center !important;
       gap: 15rem;
    }
    .info{
        margin-left: 5rem;
    }
    .model{
        margin-left: -10rem;
    }
    h3{
        color: var(--secondary);
        font-size: var(--font-size-lg);
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
   
}