:root {
    --gutter: 1rem;
    --space: calc(100vw / 12);
    --spaceX: calc(var(--space) * 1);
    --spaceXX: calc(var(--space) * 2);
    --spaceXXX: calc(var(--space) * 3);
    --spaceS: calc(var(--space) * 0.5);
    --spaceXS: calc(var(--space) / 8);
    --spacing-gutter: var(--gutter);
    --headerHeight: 7rem;
    --space3Y: 4rem;
    --space4Y: 6rem;
    --space5Y: 8rem;
    --space6Y: 10rem;
    --spaceHalf: 4.38rem;
    --black:#000;
    --white: #fff;
    --background: #000;
    --foreground: #fff;
    --border-color: #25262A;
    --rainy-grey: #A4A4A4;
    --very-light-gray: #8E8E8E;
    --light-gray: #686B76;
    --medium-gray: #474950;
    --medium-gray-350: #3E3F45;
    --gray: #25262A;
    --gray-two: #1E1E1E;
    --dark-gray: #16171B;
    --warm-yellow: #1E1A14;
    --dark-yellow: #946E00;
    --yellow: #F5B800;
    --medium-yellow: #FFD640;
    --light-medium-yellow: #FFDB43;
    --light-yellow: #FFF099;
    --radius-box: 1rem;
    --radius-btn: .5rem;
    --font-size: 15px;
    --font-rokh: 'RokhFaNum';
    --font-rokhII: 'RokhFaNum HairLine';
    --font-arame: 'Arame';
    --space-margin-x: 2rem;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --margin-bottom : 12rem;
    --margin-block: 7rem;
}
*, ::before, ::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
::-moz-selection{
    color: var(--black);
    background-color: var(--yellow);
}
::selection{
    color: var(--black);
    background-color: var(--yellow);
}
@media (max-width: 699px) {
    :root {
        --font-size: 15px;
        --font-size-ru: 14px
    }
}
@media (min-width: 700px) and (max-width: 1024px) {
    :root {
        --font-size: 15px;
        --font-size-ru: 14px
    }
}

@media (min-width: 1025px) and (max-width: 1199px) {
    :root {
        --font-size: 15px;
        --font-size-ru: 14px;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    :root {
        --font-size: 14px;
        --font-size-ru: 13px;
    }
}
@media (min-width: 1600px) and (max-width: 1999px) {
    :root {
        --font-size: 16px;
        --font-size-ru: 15px;
    }
}

@media (min-width: 2000px) and (max-width: 2399px) {
    :root {
        --font-size: 19px;
        --font-size-ru: 17px;
    }
}

@media (min-width: 2400px) {
    :root {
        --font-size: 21px;
        --font-size-ru: 19px;
    }
}
html {
    min-height: 100%;
    line-height: 1.3;
    color: var(--foreground);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: background-color .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    width: 100%;
    font-size: var(--font-size);
}

html,body,h1,h2,h3,h4,h5,h6,a,p,span,ul li,ol li,input,textarea,button{
    font-family: 'PeydaFaNumWeb', sans-serif;
}

html::-webkit-scrollbar {
    width: 6px;
}
html::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px var(--background);
    box-shadow: inset 0 0 6px var(--background);
}
html::-webkit-scrollbar-thumb {
    background-color: var(--yellow);
    outline: 1px solid var(--yellow);
    border-radius: 10px;
}
*:focus,*:focus-visible{
    outline: none !important;
}
a{
    color: inherit;
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
ul li {
    line-height: 1.6;
}
img,
video {
    max-width: 100%;
    height: auto;
    font-size: .8rem;
}
*,*:focus,*:focus-visible{
    outline: none;
    outline-color: transparent;
}
p{
    line-height: 1.5;
}
ol,ul {
    padding-left: 1rem;
}
.padding-x {
    padding-right: var(--spaceX);
    padding-left: var(--spaceX);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.padding-2x {
    padding-right: var(--spaceXX);
    padding-left: var(--spaceXX);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.item-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.yellow-font {
    color: var(--yellow);
}
.vh-100 {
    height: 100vh;
}
.spaceY {
    margin-block: var(--margin-block);
}
.sub-title-wrap {
    color: var(--yellow);
    margin-block: 2.125rem;
    display: block;
    font-family: var(--font-rokh), sans-serif;
    font-weight: 600;
}
.title-wrap {
    font-size: 3.25rem;
    margin: 0;
}
.main-title {
    font-size: 4rem;
    margin-top: 0;
    margin-bottom: 1.75rem;
}
.title-two-wrap p {
    margin: 0;
    font-size: 3rem;
    color: var(--gray);
    font-weight: 600;
    font-family: var(--font-rokh), sans-serif;
}
.otherWrapper {
    padding-top: calc(var(--headerHeight) + 2rem);
}
.first-name {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 0;
}

.first-name img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
/*==============BREADCRUMB===============*/
nav.breadcrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.6rem;
}
nav.breadcrumb ul li {
    position: relative;
}
nav.breadcrumb ul li::before {
    content: '/';
    position: absolute;
    left: -.95rem;
    line-height: normal;
    bottom: 0;
}
nav.breadcrumb ul li:last-child::before {
    opacity: 0;
}
/*==============BREADCRUMB===============*/
/*==============BUTTON===============*/
.btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 3rem;
    background-color: var(--gray-two);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-btn);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.btn [class^="icon-"] {
    color: var(--yellow);
    font-size: .875rem;
}
/*==============BUTTON===============*/
@media only screen and (max-width: 768px){
    :root {
        --headerHeight: 3.5rem;
    }
}
@media only screen and (min-width: 640px) and (max-width: 768px){}
@media only screen and (min-width: 769px) and (max-width: 1199px){}
@media only screen and (min-width: 1200px) and (max-width: 1399px){}
@media only screen and (min-width: 1400px) and (max-width: 1700px){}