/*
Theme Name: Apadana Kavaosh
Author: Dokmeh Agency
Description: Apadana Kavaosh theme
Version: 1.0.0
Text Domain: dokmeh
*/
: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;
    --dark-charcoal: #333;
    --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-title : 'Big Shoulders';
    --font-body: 'Manrope';
    --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;
        --font-ch:14px;
    }
}

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

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

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

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

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

@media (min-width: 2400px) {
    :root {
        --font-size: 21px;
        --font-size-ru: 19px;
        --font-ch:19px;
    }
}

html {
    min-height: 100%;
    line-height: 1.3;
    -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%;
}
html[lang="en-US"],
html[lang="en"]{
    font-size: var(--font-size);
}
html[lang="ru-RU"],
html[lang="ru"] {
    font-size: var(--font-size-ru);
}
html[lang="zh-CN"] {
    font-size: var(--font-ch);
}
body {
    color: var(--foreground);
    background-color: var(--background);
    -webkit-transition: color 0.1s linear,background-color 0.1s linear;
    transition: color 0.1s linear,background-color 0.1s linear;
}

body.day-background {
    --background: var(--white);
    --foreground: #1c1917;
    --gray: #AAACB4;
    --light-gray: #E6E7EB;
    --border-color: var(--gray);
    --gray-two: #E6E7EB;
    --rainy-grey: #2e2e2e;
    --gray-300: #787B84;
    --dark-gray: #333;
    --medium-gray: #D2D2D2;
    --dark-charcoal: #ddd;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
ul li,
ol li,
input,
textarea,
button {
    font-family: var(--font-body), 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;
}
.blur-up {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    transition: filter 0.4s, -webkit-filter 0.4s;
}
.blur-up.lazyloaded {
    -webkit-filter: blur(0);
    filter: blur(0);
}
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.8;
}

ol,
ul {
    padding-left: 1rem;
}
.loadItem {
    opacity: 0;
    -webkit-transform: scaleY(0.8);
        -ms-transform: scaleY(0.8);
            transform: scaleY(0.8);
    -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
            transform-origin: top center;
}
.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-arame), sans-serif;
    font-weight: 600;
}

.title-wrap {
    font-size: 3.25rem;
    margin: 0;
    font-family: var(--font-title), sans-serif;
}

.main-title {
    font-size: 4rem;
    margin-top: 0;
    margin-bottom: 1.75rem;
    font-family: var(--font-title), sans-serif;
}

.title-two-wrap p {
    margin: 0;
    font-size: 3rem;
    color: var(--gray);
    font-weight: 600;
    font-family: var(--font-arame), 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;
    right: -.95rem;
    bottom: 3px;
    line-height: normal;
}

nav.breadcrumb ul li:last-child::before {
    opacity: 0;
}
nav.breadcrumb {
    font-size: .75rem;
}
/*==============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: #1E1E1E;
    padding: 1rem;
    color: var(--white);
    border-radius: var(--radius-btn);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-transition: background-color 0.2s ease-in;
    transition: background-color 0.2s ease-in;
}
.btn:hover {
    background-color: var(--yellow);
}
.btn [class^="icon-"] {
    color: var(--yellow);
    font-size: .875rem;
    -webkit-transition: color 0.2s ease-in;
    transition: color 0.2s ease-in;
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
}
.btn:hover [class^="icon-"],.btn:hover span { 
   color: var(--black);
}
.btn.yellow {
    gap: 1rem;
    width: 100%;
}

.btn.yellow span {
    color: var(--yellow);
    -webkit-transition: color 0.2s ease-in;
    transition: color 0.2s ease-in;
}
.btn.yellow:hover {
    background-color: var(--yellow);
}

.btn.yellow:hover span {
    color: var(--background);
}
/*==============BUTTON===============*/
@media only screen and (max-width: 768px) {
    :root {
        --headerHeight: 3.5rem;
        --spaceX: 20px;
        --spaceXX: 20px;
        --spaceXXX: 20px;
        --margin-block: 3rem;
        --margin-bottom: 6rem;
    }

    .main-title {
        font-size: 2.125rem;
    }

    .title-wrap {
        font-size: 1.975rem;
        line-height: 3rem;
    }

    .title-two-wrap p {
        font-size: .75rem;
    }

    .btn {
        padding: 1rem;
        font-size: .875rem;
    }
}

@media only screen and (min-width: 640px) and (max-width: 768px) {
    :root {
        --headerHeight: 5.5rem;
        --margin-block: 4rem;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1199px) {
    :root {
        --spaceX: calc(var(--space) * 0.5);
        --spaceXX: calc(var(--space) * 0.5);
        --spaceXS: calc(var(--space) / 5);
        --margin-block: 5rem;
        --margin-bottom: 7rem;
    }

    .title-two-wrap p {
        font-size: 1.65rem;
    }

    .sub-title-wrap {
        font-size: .875rem;
    }

    .title-wrap {
        font-size: 2.5rem;
    }

    .main-title {
        font-size: 3rem;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    :root {
        --headerHeight: 5rem;
        --margin-block: 5rem;
        --margin-bottom: 8rem;
    }

    .sub-title-wrap {
        font-size: .875rem;
    }

    .title-wrap {
        font-size: 2.75rem;
    }

    .title-two-wrap p {
        font-size: 2.125rem;
    }

    .main-title {
        font-size: 2.785rem;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1700px) {
    :root {
        --headerHeight: 6rem;
        --margin-block: 6rem;
        --margin-bottom: 10rem;
    }

    .title-wrap {
        font-size: 2.75rem;
    }

    .sub-title-wrap {
        font-size: .875rem;
    }

    .title-two-wrap p {
        font-size: 2.5rem;
    }

    .main-title {
        font-size: 3rem;
    }
}