@font-face { font-family: Satoshi-Light; src: url('../fonts/Satoshi-Light.otf'); } 
@font-face { font-family: Satoshi-Regular; src: url('../fonts/Satoshi-Regular.otf'); } 
@font-face { font-family: Satoshi-Medium; src: url('../fonts/Satoshi-Medium.otf'); } 
@font-face { font-family: Satoshi-Bold; src: url('../fonts/Satoshi-Bold.otf'); } 
@font-face { font-family: Satoshi-Black; src: url('../fonts/Satoshi-Black.otf'); }


html {
    position: relative;
    height: 100%;
    scroll-behavior: smooth;
}
body{
    font-family: "Satoshi-Regular", sans-serif;
    overflow-x: hidden;
    padding: 0px;
    margin: 0px;
    background-color: #624f90;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    position: relative;
}
body::after{
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(../img/body-dots.svg);
    position: absolute;
    top: 0;
    left: 0;
}
a, a:hover{
    color: inherit;
    text-decoration: none;
}
.page-max-width{
    padding-left: 70px;
    padding-right: 70px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px){
.page-max-width{
    max-width: 1920px;
}
}


/*Header*/
.header {
    background: transparent;
    z-index: 9;
    width: 100%;
    transition: all 0.3s ease-in-out;
/*    position: fixed;*/
    top: 0px;
    left: 0px;
    padding: 45px 0;
}
.sticky-bar{
    background-color: #624f90;
}
.brand-name{
    width: 135px;
}
.logo{
    width: 56px;
}


/*Hero Section*/
.hero-sec{
    width: 100%;
        min-height: calc(100vh - 147px);
    position: relative;
    overflow: hidden;
}
.shoe-bg{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hero-content-box{
    height: calc(100vh - 197px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ft-16{
    font-size: 16px;
}
.social-sec{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.social-box .instagram path, 
.social-box .linkedin{
    transition: all 0.3s ease-in-out;
}
.social-box:hover .instagram path, 
.social-box:hover .linkedin{
    fill: #020203;
}
.hcr-bottom{
    color: #ffffffbf;
    font-family: "Satoshi-Light", sans-serif;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: right;
    font-size: 14px;
}
.text-link{
    transition: all 0.3s ease-in-out;
}
.text-link:hover{
    color: #020203;
}
.hero-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 50px 0;
}
.hc-left{
    max-width: 269px;
}
.hc-right{
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding-right: 30px;
    max-width: 150px;
/*    margin-top: 450px;*/
}
.hc-center{
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-right: 150px;
}
.hcc-box{
    display: flex;
    align-items: center;
    gap: 50px;
}
.hcc-left{
    white-space: nowrap;
    font-size: 16px;
    font-family: "Satoshi-Medium", sans-serif;
    min-width: 316px;
    text-align: right;
}
.hcc-right{
    font-family: "Satoshi-Light", sans-serif;
    font-size: 16px;
}


/*Gallery Page*/
.gallery-sec{
    padding: 50px 0 50px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
}
.masonry-gallery{
    column-count:4;
    column-gap:25px;
}
.masonry-gallery .item{
    break-inside:avoid;
    margin-bottom:25px;
}
.masonry-gallery .item img{
    width:100%;
    display:block;
}

.gallery-sec .hc-right{
    min-width: 150px;
/*    margin-top: 100px;*/
    
}
.pos-stick{
    position: sticky;
    top: 147px;
}




.z-1{
    position: relative;
    z-index: 1;
}
.font-light{
    font-family: "Satoshi-Light", sans-serif;
}
.font-medium{
    font-family: "Satoshi-Medium", sans-serif;
}
.font-bold{
    font-family: "Satoshi-Bold", sans-serif;
}
.font-black{
    font-family: "Satoshi-Black", sans-serif;
}