@font-face {
    font-family: ResotYg;
    src: url("../pisave/ResotYg.woff") format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Unbounded-Black';
    src: url("../pisave/Unbounded-Black.ttf") format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi-Black';
    src: url("../pisave/Satoshi-Black.otf") format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi-Regular';
    src: url("../pisave/Satoshi-Regular.otf") format('truetype');
    font-weight: 400;
    font-style: normal;
}
body{
    font-family:Montserrat,sans-serif;
    font-weight:500;
    background-color:#f3f0eb;
    color:#090909;
    margin:0;
    padding:0;
    padding-top:20px
}
.container{
    max-width:1200px!important
}
.bordered-box{
    border:3px solid #090909;
    box-shadow:5px 5px 0 #090909;
    border-radius:30px;
    padding:32px
}
.carousel-image{
    max-height:700px;
    object-fit:cover;
    border-radius:30px;
    width:100%;
    display:block
}
.resot{
    font-family:ResotYg,sans-serif;
    text-transform:uppercase;
    word-wrap:break-word;
    overflow-wrap:break-word
}
.typography-wrapper{
    display:flex;
    justify-content:center;
    width:100%
}
.font-section{
    max-width:900px;
    width:100%
}
.font-section .font-label{
    font-weight:600;
    font-size:16px;
    color:#090909
}
.font-section .font-name{
    font-size:28.8px;
    margin-bottom:4px;
    color:#090909
}
.font-sample{
    font-size:28.8px;
    line-height:1.6;
    color:#090909;
    margin-bottom:0;
    word-break:break-word
}
.poppins-extrabold{
    font-family:Poppins,sans-serif;
    font-weight:800
}
.poppins-medium{
    font-family:Poppins,sans-serif;
    font-weight:400
}
.rubik-medium{
    font-family:Rubik,sans-serif;
    font-weight:400
}
.unbounded{
    font-family:Unbounded-Black,sans-serif;
    word-wrap:break-word;
    overflow-wrap:break-word
}
.satoshi-b{
    font-family:Satoshi-Black,sans-serif;
    word-wrap:break-word;
    overflow-wrap:break-word
}
.satoshi-r{
    font-family:Satoshi-Regular,sans-serif;
    word-wrap:break-word;
    overflow-wrap:break-word
}
.custom-btn,.custom-btn-y{
    border:3px solid #090909;
    color:#090909;
    padding:10px 25px;
    font-weight:700;
    border-radius:30px;
    box-shadow:5px 5px 0 #090909;
    transition:all .2s ease;
    text-decoration:none
}
.custom-btn{
    background-color:#56b8c1
}
.custom-btn-y{
    background-color:#f8ce4a
}
.custom-btn-y:hover,.custom-btn:hover{
    transform:translate(-2px,-2px);
    box-shadow:7px 7px 0 #090909;
    color:#090909;
    border:3px solid #090909
}
.custom-btn:hover{
    background-color:#f8ce4a
}
.custom-btn-y:hover{
    background-color:#56b8c1
}
.custom-btn-y:active{
    background-color:#56b8c1!important;
    box-shadow:7px 7px 0 #090909!important;
    color:#090909;
    border:3px solid #090909
}
.custom-btn:active{
    background-color:#f8ce4a!important;
    box-shadow:7px 7px 0 #090909!important;
    color:#090909;
    border:3px solid #090909
}
.navbar{
    position:static;
    z-index:100;
    background-color:#f3f0eb;
    border:3px solid #090909;
    border-radius:30px;
    box-shadow:5px 5px 0 #090909;
    width:100%;
    max-width:1200px;
    margin:0 auto
}
.navbar .container{
    max-width:1200px;
    margin:0 auto;
    position:relative
}
.navbar-nav{
    position:relative;
    gap:32px
}
.nav-link{
    font-weight:600;
    color:#090909;
    position:relative
}
.nav-link:hover{
    color:#56b8c1;
    transform:scale(1.05)
}
.card{
    background-color:transparent;
    border:none;
    box-shadow:none;
    margin-bottom:48px
}
.container-fluid>.row{
    max-width:1200px;
    margin:0 auto;
    justify-content:center
}
.valko-title{
    margin-top:-10px
}
.design-preview img.img-fluid{
    transition:transform .3s ease
}
.design-preview:hover img.img-fluid{
    transform:scale(1.02)
}
.gumb{
    border:3px solid #090909;
    color:#090909;
    padding:10px 25px;
    font-weight:600;
    border-radius:30px;
    box-shadow:5px 5px 0 #090909;
    text-decoration:none;
    word-wrap:break-word;
    overflow-wrap:break-word
}
.button-row{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:flex-start
}
.valko-description{
    margin-top:24px;
    font-size:16px
}
.color-palette{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:16px 0;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0
}
.color-wrapper{
    flex:0 0 33.3333%;
    padding:0 8px;
    box-sizing:border-box
}
.color-wrapper2{
    flex: 0 0 16.6666%; 
    padding: 0 8px;
    box-sizing: border-box;
}
.color-wrapper4 {
    flex: 1 1 25%;
    min-width: 0;
    padding: 0 8px;
}
.color-box{
    width:100%;
    height:50px;
    border:3px solid #090909;
    border-radius:30px;
    box-shadow:5px 5px 0 #090909;
    background-clip:padding-box
}
.color-label{
    margin-top:8px;
    font-weight:600;
    font-size:15.2px;
    color:#090909;
    text-align:center;
    width:100%
}
.project-subtitle{
    font-size:20px;
    font-weight:600;
    margin-top:16px
}
img.first-image{
    border:2px solid #090909;
    box-shadow:5px 5px 0 #090909;
    border-radius:30px;
    transition:all .3s ease
}
img.first-image:hover{
    transform:none
}
.footer{
    background-color:#f3f0eb;
    border:3px solid #090909;
    box-shadow:5px 5px 0 #090909;
    border-radius:30px;
    padding:32px;
    max-width:1200px;
    margin:0 auto
}
.footer-line{
    display:block;
    width:100%;
    height:2.5px;
    background-color:#090909;
    max-width:1200px;
    margin:0 auto
}
.social-icons i{
    font-size:28.8px;
    color:#000;
    transition:color .3s ease
}
.social-link:hover i{
    color:#f8ce4a;
    transform:scale(1.1)
}
.social-link{
    display:inline-block;
    transition:transform .3s ease
}
h2{
    font-size:80px
}
@media (max-width:990px){
    .navbar-collapse{
        align-items:center
    }
    .navbar-nav{
        text-align:center
    }
}
@media (max-width:768px){
    .my-5 .d-flex{
        flex-direction:column;
        align-items:flex-start
    }
    .resot{
        font-size:32px
    }
    img.first-image{
        margin-bottom:32px
    }
  
}
.cv-year{
    color:#56b8c1
}
.masonry-gallery{
    column-count:2;
    column-gap:16px
}
.masonry-gallery a{
    display:inline-block;
    width:100%
}
.masonry-gallery img{
    width:100%;
    height:auto;
    border-radius:30px;
    break-inside:avoid;
    border:3px solid #090909;
    box-shadow:5px 5px 0 #090909
}
.bordered-image{
    border:3px solid #090909;
    box-shadow:5px 5px 0 #090909;
    border-radius:30px
}
.bordered-input{
    border:3px solid #090909;
    border-radius:30px;
    box-shadow:5px 5px 0 #090909;
    padding:10px 20px;
    background-color:#f3f0eb;
    color:#090909;
    font-family:Montserrat,sans-serif;
    font-weight:500
}
.bordered-input:focus{
    outline:0;
    box-shadow:7px 7px 0 #090909;
    border-color:#090909;
    background-color:#f3f0eb
}
@media (max-width:768px){
    .masonry-gallery{
        column-count:1
    }
}