@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-BlackItalic.woff2') format('woff2'), url('../fonts/poppins/Poppins-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2'), url('../fonts/poppins/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Black.woff2') format('woff2'), url('../fonts/poppins/Poppins-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-BoldItalic.woff2') format('woff2'), url('../fonts/poppins/Poppins-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ExtraBold.woff2') format('woff2'), url('../fonts/poppins/Poppins-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ExtraLight.woff2') format('woff2'), url('../fonts/poppins/Poppins-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ExtraBoldItalic.woff2') format('woff2'), url('../fonts/poppins/Poppins-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ExtraLightItalic.woff2') format('woff2'), url('../fonts/poppins/Poppins-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Italic.woff2') format('woff2'), url('../fonts/poppins/Poppins-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Light.woff2') format('woff2'), url('../fonts/poppins/Poppins-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-LightItalic.woff2') format('woff2'), url('../fonts/poppins/Poppins-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2'), url('../fonts/poppins/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-MediumItalic.woff2') format('woff2'), url('../fonts/poppins/Poppins-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'), url('../fonts/poppins/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2'), url('../fonts/poppins/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-SemiBoldItalic.woff2') format('woff2'), url('../fonts/poppins/Poppins-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Thin.woff2') format('woff2'), url('../fonts/poppins/Poppins-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ThinItalic.woff2') format('woff2'), url('../fonts/poppins/Poppins-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}



:root {
    --color-primary: #F4A351;
    --plyr-color-main: #ffffff;
    --color-dark: #8f96af;
    --color-dark2: #343744;
    --color-light: #eff1f5;
    --color-light2: #e4e7ec;
    --color-bg: #18191a;
    --color-white: #ffffff;
    --color-black: #18191a;
    --color-whites: #ffffff;
    --color-blacks: #18191a;
}

::-moz-selection {
    /* Code for Firefox */
    color: var(--color-blacks);
    background: var(--color-primary);
}

::selection {
    color: var(--color-blacks);
    background: var(--color-primary);
}

.container {
    width: 1370px;
    max-width: 1370px;
}

body,
html {
    font-size: 16px;
    margin: 0 auto;
    line-height: 1.8em;
    padding: 0;
    background: var(--color-white);
    color: var(--color-black);
}

html,
body {
    overscroll-behavior: none;
}

.btn-dotline {
    background: #abb8c3;
    color: white;
    border-radius: 9999px;
    text-decoration: none;
    padding: calc(.667em + 2px) calc(1.333em + 2px);
    font-size: 1.125em;
    display: inline-block;
}

.fullweb {
    min-width: 1200px !important;
    max-width: 100% !important;
}

.navbar-toggler.collapsed {
    display: none;
}

header {
    padding: 0;
    z-index: 999;
    position: relative;
}

    header .logo {
        width: 250px;
        position: fixed;
        z-index: 9;
    }

        header .logo svg #logotype {
            transform: translateY(0);
            opacity: 1;
            transition: all 300ms ease-in-out;
        }

        header .logo:hover svg #logotype {
            transform: translateY(-30px);
            opacity: 0;
            transition: all 300ms ease-in-out;
        }

.logo svg path {
    mix-blend-mode: difference;
}

.logodet {
    position: absolute;
    right: 70px;
    top: 19px;
    width: 180px;
    display: block;
    z-index: -1;
    opacity: 0;
    transform: translateY(40px);
    transition: all 300ms ease-in-out;
}

header .logo:hover .logodet {
    transform: translateY(0);
    opacity: 1;
    transition: all 300ms ease-in-out;
}

header .logo svg path {
    fill: var(--color-black);
}

header .header_inner {
    display: flex;
    flex-wrap: nowrap;
    padding: 0 15px 0 0;
    margin: 0 auto;
}

.navbar-nav.headermenu {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: inherit;
    justify-content: end;
    position: fixed;
    left: 44px;
    width: auto;
}

    .navbar-nav.headermenu .left-nav {
        float: left;
        margin-top: -3px;
    }

    .navbar-nav.headermenu .nav-item {
        float: right;
    }

.nav-item.nav-icon {
    position: relative;
    height: 50px;
    width: 50px;
}

    .nav-item.nav-icon > a svg {
        width: 30px;
        height: 30px;
    }

.navbar-nav.headermenu .nav-icon svg path {
    fill: var(--color-black);
}

.nav-item.nav-icon .dropdown-toggle::after {
    display: none;
}

.sunico {
    display: none;
}

.moonico {
    display: block;
}

.navbar-nav {
    float: none;
}

    .navbar-nav.headermenu > * {
        margin: 0 10px;
    }

    .navbar-nav.headermenu .nav-item > a {
        color: var(--color-light2);
        padding: 10px;
        display: block;
        line-height: 27px;
        margin-top: 0;
        margin-bottom: 0;
    }

        .navbar-nav.headermenu .nav-item > a::after {
            margin: 0;
            top: 4px;
            position: relative;
            margin: 0 5px;
        }

        .navbar-nav.headermenu .nav-item > a:hover,
        .navbar-nav.headermenu .nav-item > a:focus {
            color: var(--color-black);
        }

        .navbar-nav.headermenu .nav-item > a.btn.btn-effect.button {
            padding: 0;
        }

.dropdown-menu {
    text-align: right;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 20px;
    border-radius: 10px;
    min-width: 200px;
    border: 0;
    padding: 15px;
    background: var(--color-white);
    border: 1px solid var(--color-dark);
}

    .dropdown-menu a.dropdown-item {
        color: var(--color-light);
        position: relative;
        display: block;
        padding: 10px 15px;
        border-radius: 10px;
        min-width: 150px;
        font-size: 16px;
    }

        .dropdown-menu a.dropdown-item.more-item {
            margin-top: 5px;
            text-align: left;
            font-size: 12px;
            padding: 7px 15px 7px 30px;
        }

        .dropdown-menu a.dropdown-item:hover {
            color: var(--color-black);
        }

.socials {
    display: flex;
    flex-wrap: wrap;
    padding: 25px;
}

    .socials a,
    .socials p {
        display: block;
        margin-left: 10px;
        padding: 5px;
        cursor: pointer;
    }

        .socials a img,
        .socials a svg {
            width: 40px;
            height: 40px;
        }

    .socials svg path {
        fill: var(--color-black);
    }

    .socials a:hover svg path {
        fill: var(--color-black);
    }

.sharebtn a img,
.sharebtn a svg {
    padding: 2px;
}

#urlinput {
    position: fixed !important;
    top: -1000px !important;
    right: -1000px !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 1px !important;
    height: 1px !important;
    font-size: 1px !important;
}


/*title*/

.title {
    padding: 40px 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.tiback > .backbtn {
    width: 60px;
    height: 60px;
    float: right;
    margin: 20px 0 0 5px;
}

.title h3,
.title h2,
.title h1 {
    float: right;
    white-space: nowrap;
    font-size: 35px;
    line-height: 60px;
    font-weight: bold;
    padding: 0;
    color: var(--color-black);
}

.title small,
.title small,
.title small {
    display: block;
    width: 100%;
    overflow: hidden;
    color: var(--color-dark);
    font-size: 14px;
}

a.more {
    position: relative;
    color: var(--color-black);
    float: left;
    display: block;
    padding: 18px;
    background: transparent;
    font-size: 16px;
    font-weight: bold;
}

    a.more.small {
        padding: 15px;
    }

    a.more:hover,
    a.more:focus {
        color: var(--color-black);
        background: transparent;
    }

.biglink,
.biglink:hover,
.biglink:focus {
    display: block;
    width: 100%;
    font-size: 30px;
    font-weight: bold;
    line-height: 40px;
    padding: 40px 0;
    text-align: left;
    color: var(--color-black) !important;
}

    .biglink svg path,
    .biglink:hover svg path,
    .biglink:focus svg path {
        stroke-width: 8;
        stroke: var(--color-black);
    }

    .biglink svg {
        height: 26px;
        margin: 0 15px;
        width: auto;
    }

    .biglink:hover svg path#wmore {
        width: 5vw;
    }

.section {
    padding: 35px;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    border-radius: 0;
}

.navbar-toggler {
    display: block !important;
}

.navbar-toggler {
    display: block !important;
    margin: 0;
    padding: 0;
    float: left !important;
    width: auto !important;
}

    .navbar-toggler span {
        background: var(--color-black);
        width: 30px;
        height: 4px;
        display: block;
        border-radius: 5px;
    }

    .navbar-toggler.hd-menu:hover,
    .navbar-toggler.hd-menu:focus {
        background: transparent;
        border-color: transparent;
    }

    .navbar-toggler .navbar-toggler-icon {
        width: 30px;
        height: 30px;
        position: relative;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        margin-right: 10px;
    }

        .navbar-toggler .navbar-toggler-icon span {
            display: block;
            position: absolute;
            width: 100%;
            background: var(--color-black);
            border-radius: 9px;
            opacity: 1;
            left: 0;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: 0.25s ease-in-out;
            -moz-transition: 0.25s ease-in-out;
            -o-transition: 0.25s ease-in-out;
            transition: 0.25s ease-in-out;
        }

            .navbar-toggler .navbar-toggler-icon span:nth-child(1) {
                top: 15px;
                -webkit-transform: rotate(135deg);
                -moz-transform: rotate(135deg);
                -o-transform: rotate(135deg);
                transform: rotate(135deg);
            }

            .navbar-toggler .navbar-toggler-icon span:nth-child(2) {
                top: 15px;
                -webkit-transform: rotate(-135deg);
                -moz-transform: rotate(-135deg);
                -o-transform: rotate(-135deg);
                transform: rotate(-135deg);
            }

    .navbar-toggler.collapsed .navbar-toggler-icon span:nth-child(1) {
        top: 5px;
        transform: none;
    }

    .navbar-toggler.collapsed .navbar-toggler-icon span:nth-child(2) {
        top: 22px;
        transform: none;
    }

.topmenu {
    padding: 35px;
    top: 0;
    right: 0;
    left: 0;
    z-index: 991;
}


/*footer*/

footer {
    padding: 35px;
}

    footer .footer_inner {
        margin: 0 auto;
        padding: 0;
    }

    footer .copyright {
        width: calc(100% - 300px);
    }

.copyright {
    position: relative;
    padding-right: 100px;
}

    .copyright .sfool {
        position: absolute;
        right: 0;
        top: 0;
        width: 80px;
        margin: 7px 0;
    }

        .copyright .sfool > svg path {
            fill: var(--color-black);
        }

        .copyright .sfool:hover > svg path {
            fill: var(--color-black);
        }

footer .frow {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0;
}

    footer .frow aside {
        width: 100%;
    }

        footer .frow aside.footerlinks {
            width: 100%;
        }

.footerlinks {
    margin-bottom: 15px;
}

    .footerlinks ul {
        list-style: none;
        margin: 0;
        padding: 0 25px;
    }

        .footerlinks ul li {
            display: inline-block;
            margin: 5px;
            width: auto;
        }

            .footerlinks ul li a {
                display: block;
                padding: 10px 15px;
                border-radius: 25px;
                font-size: 16px;
                font-weight: bold;
                color: var(--color-black);
                border: 2px solid var(--color-black);
            }

                .footerlinks ul li a:hover,
                .footerlinks ul li a:focus {
                    background: var(--color-black);
                    color: var(--color-white);
                    border: 2px solid var(--color-black);
                }

footer .frow aside > p {
    display: block;
    color: var(--color-black);
    line-height: 1.9em;
    font-size: 16px;
    margin-bottom: 0px;
}

    footer .frow aside > p > a {
        color: var(--color-black);
        font-weight: bold;
        border-bottom: 2px solid transparent;
    }

        footer .frow aside > p > a:hover {
            color: var(--color-black);
            border-bottom: 2px solid var(--color-black);
        }

.footerMenu {
    width: 300px;
    border-right:2px solid black;
}

    .footerMenu ul {
        list-style: none;
        padding-right:20px;
        margin:0px;
    }

        .footerMenu a{
            color:black;
        }
        /*slideshow*/
        .swp,
        .slideshow {
            position: relative;
        }

    .slideshow .swiper-slide-next,
    .slideshow .swiper-slide-prev {
        opacity: 0.2;
    }

    .slideshow .swp-nav.swiper-button-prev {
        right: 0;
    }

    .slideshow .swp-nav.swiper-button-next {
        left: auto;
        right: calc(70% - 15px);
    }

.swiper-button-next,
.swiper-button-prev {
    background-image: none !important;
    background-color: var(--color-primary);
    width: 40px !important;
    height: 50px !important;
    padding: 7px;
}

    .swiper-button-next svg {
        width: 25px;
        height: 25px;
        position: absolute;
        left: 0;
        bottom: 0;
        margin: 5px;
    }

    .swiper-button-prev svg {
        width: 25px;
        height: 25px;
        position: absolute;
        right: 0;
        top: 0;
        margin: 5px;
    }

.overflow {
    border-radius: 15px;
    overflow: hidden;
    margin: 15px;
}

.swiper-pagination {
    bottom: 0 !important;
    position: relative !important;
}

.slideshow .swiper-pagination {
    position: absolute !important;
    width: auto !important;
    left: 0 !important;
    bottom: 0 !important;
}

.swiper-pagination-bullet {
    opacity: 1;
    background: var(--color-dark) !important;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-primary) !important;
}

.slideshow .swiper-slide > a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.slideshow .swiper-slide .overflow {
    min-width: 70%;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    opacity: 0 !important;
}


/*headermar*/

.headermar {
    display: flex;
    color: var(--color-white);
    background: var(--color-black);
    position: relative;
    padding: 10px;
    overflow: hidden;
    width: 100vw;
    flex-wrap: nowrap;
}

.headmar_inner {
    width: auto;
    align-items: center;
    display: flex;
    position: relative;
    animation: marqueeh 30s linear infinite;
    will-change: transform;
    min-width: 100%;
    width: fit-content;
}

    .headmar_inner span {
        margin: 0 50px;
        width: auto;
        font-size: 16px;
        display: inline-block;
        font-family: "Poppins", "Bakh";
    }

.headermar:hover .headmar_inner {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes marqueeh {
    100% {
        transform: translate3d(100%, 0, 0);
    }
}

.headmar_inner span svg {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 2px;
}

    .headmar_inner span svg path {
        fill: var(--color-black);
    }


/*hi*/

.intro {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999999;
}

.intro_inner {
    width: 100vw;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 15px;
}

.intro .counter {
    text-align: center;
}

    .intro .counter h1 {
        color: var(--color-black);
        font-size: 40px;
    }

    .intro .counter hr {
        background: var(--color-black);
        border: none;
        height: 4px;
        margin: 0;
        border-radius: 5px;
    }


/*grid items*/

.main-grid {
    display: -ms-grid;
    display: grid;
    grid-auto-columns: 1fr;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
    grid-row-gap: 16px;
    grid-column-gap: 16px;
}

.works_grid {
    margin-bottom: 0;
    grid-auto-flow: row;
    grid-column-gap: 2.5em;
    grid-row-gap: 2.5em;
    grid-template-areas: ".";
    -ms-grid-columns: 1fr 2.5em 1fr 2.5em 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: minmax(0px, 1fr) 2.5em auto;
    grid-template-rows: minmax(0px, 1fr) auto;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.work_grid {
    background-color: var(--color-light2);
    text-align: center;
    -ms-grid-row: span 1;
    grid-row-start: span 1;
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
    -ms-grid-column: span 1;
    grid-column-start: span 1;
    -ms-grid-column-span: 1;
    grid-column-end: span 1;
    aspect-ratio: 1;
}

.work_grid {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-radius: 25px;
    transition: all 400ms ease-in-out;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

    .sw_thumb,
    .postcover,
    .work_grid > a.fullcover {
        height: 100%;
        width: 100%;
    }

        .postcover > img {
            transition: all 500ms ease-in-out;
            transform: scale(1);
            object-fit: cover;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 9;
        }

        .sw_thumb .postcover > img {
            height: auto;
            width: auto;
            object-fit: contain;
        }

        .postcover:hover > img {
            transition: all 500ms ease-in-out;
            transform: scale(1.05);
        }

.fullcover > svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 4vw;
    margin: 15px;
    z-index: 91;
}

.fullcover h2 {
    position: absolute;
    bottom: 20%;
    transition: all ease-in-out 0.7s;
    width: 100%;
    padding-inline: 5%;
    text-align: center;
    z-index: 10;
    background: #02020273;
    color: white;
    padding-block: 10px;
    margin-bottom: 0px;
    backdrop-filter: blur(15px) saturate(135%);
    font-size: 100%;
    opacity: 0;
}

.fullcover:hover h2 {
    /*    transform: translateY(-50%);
    top: 50%;*/
    /*    transform: translateY(-85%);
    top: 85%;*/
    opacity: 1;
}

.fullcover:hover .postcover {
    /*filter: blur(6px) saturate(150%);*/
}

.fullcover:hover .postdet {
    bottom: -80px;
}

.postdet {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 91;
    padding: 25px 40px;
    transition: all ease-in-out 0.7s;
}

    .postdet h2 {
        font-size: 20px;
        color: var(--color-whites);
    }

    .postdet > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
    }

        .postdet > ul > li > label {
            font-size: 16px;
            color: var(--color-whites);
            padding: 0;
            margin-left: 20px;
        }

        .postdet > ul > li.brandet {
            float: left;
        }

            .postdet > ul > li.brandet label {
                border: 1px solid var(--color-whites);
            }

.brandpost {
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    padding: 0;
    margin: 0 25px;
    height: 6.5vw;
    width: auto;
    z-index: 99;
    transition: all 200ms ease-in-out;
    overflow: hidden;
}

    .brandpost svg,
    .brandpost img {
        width: auto;
        overflow: hidden;
        display: block;
        height: 100%;
        filter: brightness(0) invert(1);
    }

        .brandpost svg path {
            fill: var(--color-whites);
        }

.bigdet {
    display: block;
    padding: 50px;
    max-width: 70vw;
    margin: 25px auto 0;
    font-size: 25px;
    line-height: 60px;
    text-align: justify;
}

    .bigdet strong,
    .bigdet b {
        position: relative;
        z-index: 9;
        display: inline-block;
        margin: 0 1px;
    }

        .bigdet strong::before,
        .bigdet b::before {
            content: "";
            height: 5px;
            bottom: 0;
            right: 0;
            left: 0;
            border-radius: 5px;
            background: var(--color-primary);
            z-index: -1;
            position: absolute;
        }


/*brands*/

.brands {
    display: flex;
    flex-wrap: wrap;
    max-width: 70vw;
    margin: 0 auto;
    justify-content: left;
}

    .brands > aside {
        width: 20%;
        padding: 3vw;
    }

        .brands > aside > a {
            display: block;
            transform: scale(1);
            transition: all 200ms ease-in-out;
        }

    .brands:hover > aside > a {
        transform: scale(.9);
        opacity: .5;
        transition: all 200ms ease-in-out;
    }

    .brands > aside > a svg path {
        fill: var(--color-black);
    }

    .brands img {
        filter: brightness(0);
    }

    .brands:hover > aside:hover > a {
        transform: scale(1.2);
        opacity: 1;
        z-index: 9;
        transition: all 200ms ease-in-out;
    }

.swp:hover {
    cursor: e-resize;
}

.swiper-pagination.swiper-sw_thumb-pagination {
    position: absolute !important;
    bottom: auto;
    left: 31px;
    bottom: 34px !important;
    right: auto;
    width: 24px;
}

    .swiper-pagination.swiper-sw_thumb-pagination > span {
        display: block;
        border-radius: 10px;
        background: var(--color-whites) !important;
        margin: 8px !important;
        opacity: .6;
        transition: all 200ms ease-in-out;
        mix-blend-mode: difference;
    }

        .swiper-pagination.swiper-sw_thumb-pagination > span.swiper-pagination-bullet-active {
            background: var(--color-whites) !important;
            height: 20px;
            opacity: 1;
            border-radius: 10px;
            transition: all 200ms ease-in-out;
            mix-blend-mode: difference;
        }


/*pages*/

.postpage .title > h1,
.postpage .title > h2,
.postpage .title > h3 {
    text-align: center;
    float: none;
    display: block;
    width: 100%;
    font-weight: bold;
    font-size: 35px;
    margin: 0 auto;
    padding: 0;
}

.postpage .innercontent > * {
    max-width: 70%;
    margin: 20px auto;
    font-size: 16px;
    line-height: 1.9em;
    text-align: justify;
}

.productpage .innercontent > *,
.postpage .innercontent > .imgpost {
    width: 100%;
    max-width: 100%;
    margin: 30px auto;
}

.postpage .innercontent > blockquote {
    border-right: 7px solid var(--color-black);
    font-size: 16px;
    padding: 30px;
    color: var(--color-primary);
    margin: 20px auto;
    font-weight: bold;
    max-width: 70%;
}


/*loading*/

#ctis-loading {
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}

#ctis-loading {
    -ms-grid-row: span 2;
    grid-row-start: span 2;
    -ms-grid-row-span: 2;
    grid-row-end: span 2;
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
}

    #ctis-loading img {
        display: block;
        margin: 0 auto;
        max-width: 50px;
        animation: loading 400ms ease-in-out infinite;
    }

@keyframes loading {
    100% {
        transform: rotate(360deg);
    }
}

.errorpage {
    max-width: 25vw;
    margin: 40px auto;
    text-align: center;
}

.erroricon svg {
    width: 100%;
    margin-bottom: 40px;
}

    .erroricon svg path {
        stroke-width: 2px;
        stroke: var(--color-black);
    }

.errorpage h2 {
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: var(--color-black);
}

.errorpage p {
    text-align: center;
    font-size: 16px;
    color: var(--color-black);
}

.errorpage.error_inner {
    text-align: right;
    margin: 15px;
}

    .errorpage.error_inner h1 {
        font-size: 40px;
        font-weight: bold;
        color: var(--color-light2);
    }

    .errorpage.error_inner h2,
    .errorpage.error_inner p {
        text-align: right;
    }


/*load img*/

.placeholder {
    overflow: hidden;
    position: relative;
}

    .placeholder:before {
        content: "";
        position: absolute;
        left: -45%;
        height: 100%;
        width: 55%;
        background-image: linear-gradient(0, var(--color-light2) 10%, var(--color-dark) 50%, var(--color-light2) 100%);
        background-image: -moz-linear-gradient(0, var(--color-light2) 10%, var(--color-dark) 50%, var(--color-light2) 100%);
        background-image: -webkit-linear-gradient(0, var(--color-light2) 10%, var(--color-dark) 50%, var(--color-light2) 100%);
        animation: loading 1s infinite;
        z-index: 1;
        opacity: .5;
    }

@keyframes loading {
    0% {
        left: -45%;
    }

    100% {
        left: 175%;
    }
}


/*contact*/

.contactlist {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--color-black);
}

    .contactlist li {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

        .contactlist li p {
            font-size: 16px;
            color: var(--color-black);
            text-align: justify;
        }

        .contactlist li b {
            float: right;
            font-weight: normal;
        }

        .contactlist li svg {
            width: 42px;
            min-width: 42px;
            height: 42px;
            margin: 12px 0 12px 20px;
            padding: 0;
        }

            .contactlist li svg path {
                fill: var(--color-black);
            }

        .contactlist li label {
            display: block;
            margin: 7px 0;
            width: 100%;
            font-size: 16px;
            overflow: hidden;
            font-family: "Poppins", "Bakh";
            color: var(--color-black);
            font-weight: bold;
        }


/*faces*/

.faces {
    display: flex;
    flex-wrap: wrap;
    max-width: 70vw;
    margin: 0 auto;
}

    .faces > aside {
        width: 33%;
        padding: 1vw;
    }

        .faces > aside > .fullface {
            display: block;
            border-radius: 25px;
            overflow: hidden;
            transform: scale(1);
            transition: all 200ms ease-in-out;
        }

    .faces:hover > aside > .fullface {
        transform: scale(.95);
        transition: all 200ms ease-in-out;
    }

    .faces:hover > aside:hover > .fullface {
        transform: scale(1.05);
        opacity: 1;
        z-index: 9;
        transition: all 200ms ease-in-out;
    }

.facecover {
    height: 25vw;
    width: 100%;
    background: var(--color-light2);
}

    .facecover > img {
        transition: all 500ms ease-in-out;
        transform: scale(1);
        object-fit: cover;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 9;
    }

    .facecover:hover > img {
        transition: all 700ms ease-in-out;
        transform: scale(1.1);
    }

.facedet {
    position: relative;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9;
    padding: 20px;
    color: var(--color-black);
    background: var(--color-light2);
}

    .facedet h2 {
        font-size: 20px;
        font-weight: bold;
    }

.fullface .socials {
    position: absolute;
    left: 0;
    top: 0;
    padding: 25px 15px;
    z-index: 9;
}

    .fullface .socials a svg {
        width: 30px;
        height: 30px;
    }

        .fullface .socials a svg path {
            fill: var(--color-whites);
        }

.title.partitle {
    max-width: 70vw;
    margin: 25px auto;
    border-bottom: 6px solid var(--color-primary);
    text-align: right;
    padding: 15px;
}

    .title.partitle h2 {
        text-align: right;
        color: var(--color-primary);
        font-size: 30px;
        padding: 0 20px;
    }


/*fix bar*/

.fixlinebox {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 auto;
}

#sidebar {
    max-width: 30vw;
    min-width: 30vw;
    width: 30vw;
}

#mainbar {
    max-width: 63vw;
    width: 63vw;
}

.fitbt {
    height: 30px;
    width: 100%;
    overflow: hidden;
}


/*brand*/

.tooltip {
    font-family: "Bakh";
    font-size: 16px;
}

.tooltip-inner {
    border-radius: 20px;
}

.backbtn {
    width: 42px;
    height: 42px;
    display: block;
    padding: 10px;
}

    .backbtn svg {
        width: 100%;
    }

        .backbtn svg path {
            fill: var(--color-black);
        }

.brandpage {
    margin: 50px auto 0;
}

.brandline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 25px;
    border-left: 1px solid var(--color-light2);
    margin-left: 25px;
    position: relative;
}

    .brandline .brandlogo {
        max-width: 9vw;
        margin: 0;
        padding: 0;
        margin: 0;
    }

.brandlogo svg path {
    fill: var(--color-black);
}

.brandcount {
    display: flex;
    margin-top: 10px;
    margin-bottom: 25px;
    padding: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-light2);
}

    .brandcount aside {
        padding: 0;
        text-align: right;
        width: 100%;
        font-size: 14px;
        min-width: 33%;
    }

        .brandcount aside b {
            font-size: 25px;
            font-weight: bold;
            line-height: 30px;
            display: block;
        }

.branddes {
    width: 100%;
}

    .branddes > p {
        display: block;
        font-size: 16px;
        padding: 5px;
        width: 100%;
        overflow: hidden;
        text-align: justify;
        margin: 0;
    }

    .branddes > h1 {
        padding: 0;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }

.brandline > h1 > svg {
    width: 52px;
    height: 52px;
    padding: 0;
}

.title h3 svg {
    width: 50px;
    height: 50px;
}

    .title h3 svg path,
    .brandline > h1 > svg > path {
        fill: var(--color-primary);
    }

#mainbar .works_grid {
    grid-template-columns: 1fr 1fr;
}

.tags {
    width: 100%;
    overflow: hidden;
    margin: 25px auto;
}

    .tags > a {
        display: inline-block;
        margin: 2px;
        padding: 5px;
        font-size: 15px;
        color: var(--color-black);
        font-weight: bold;
        border-bottom: 3px solid transparent;
    }

        .tags > a:hover,
        .tags > a:focus {
            color: var(--color-black);
            border-bottom: 3px solid var(--color-black);
        }

            .tags > a:hover > svg path,
            .tags > a:focus > svg path {
                fill: var(--color-black);
            }

        .tags > a > svg {
            float: right;
            margin: 3px 0;
            width: 23px;
            height: 23px;
        }

            .tags > a > svg path {
                fill: var(--color-black);
            }


/*portfolios*/
.portfo img {
    border-radius: 25px;
    padding: 5px;
}

.portfo video {
    max-height: 800px;
    margin: 0px auto;
    display: block;
    border-radius: 25px;
}

.portfo audio {
    width: 100%;
}

.brandline > h1 {
    line-height: 54px;
    margin: 0;
    width: 100%;
    margin-bottom: 20px;
}

.categories {
    margin-bottom: 25px;
}

    .categories a.active {
        /*float: right;*/
    }

    .categories a {
        display: inline-block;
        margin: 5px;
        border: 1px solid var(--color-light2);
        border-radius: 25px;
        padding: 10px 20px;
        color: var(--color-dark);
    }

        .categories a:hover,
        .categories a:focus {
            border: 1px solid var(--color-black);
            background: var(--color-black);
            color: var(--color-white);
        }

        .categories a.active {
            background: var(--color-primary);
            border: 1px solid var(--color-primary);
            color: var(--color-blacks);
        }


/*single*/

.postinfo {
    margin: 15px 0;
    width: 100%;
    font-size: 15px;
}

    .postinfo aside {
        width: 100%;
        overflow: hidden;
        padding: 5px 0;
        color: var(--color-dark);
    }

        .postinfo aside a {
            color: var(--color-black);
        }

            .postinfo aside a:hover,
            .postinfo aside a:focus {
                color: var(--color-primary);
            }

        .postinfo aside svg {
            width: 22px;
            height: 22px;
            float: right;
            margin: 2px 0 0 10px;
        }

            .postinfo aside svg path {
                fill: var(--color-black);
            }

        .postinfo aside a {
            color: var(--color-black);
            display: inline-block;
            margin-left: 5px;
            position: relative;
        }

            .postinfo aside a::after {
                color: var(--color-primary);
                content: "،";
                float: left;
                margin: 0 5px;
                font-size: 20px;
                line-height: 27px;
                font-weight: bold;
            }

            .postinfo aside a:last-child::after {
                display: none;
            }

.postshare {
    width: 100%;
}

    .postshare .socials {
        padding: 25px 0;
        justify-content: center;
        width: 100%;
    }


/*gallery*/

.postimg {
    width: 100%;
    overflow: hidden;
    border-radius: 30px;
    display: block;
    margin-bottom: 25px;
}

.sw_single {
    overflow: hidden;
    margin-left: 0;
    border-radius: 30px;
}

    .sw_single .postimg {
        margin: 0;
    }

.swiper-pagination.swiper-sw_single-pagination {
    position: relative !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 5px auto;
}

    .swiper-pagination.swiper-sw_single-pagination > span {
        display: inline-block;
        border-radius: 10px;
        background: var(--color-black) !important;
        margin: 8px;
        width: 9px;
        height: 9px;
        opacity: .2;
        transition: all 200ms ease-in-out;
        mix-blend-mode: difference;
    }

        .swiper-pagination.swiper-sw_single-pagination > span.swiper-pagination-bullet-active {
            background: var(--color-black) !important;
            width: 25px;
            opacity: 1;
            border-radius: 10px;
            transition: all 200ms ease-in-out;
            mix-blend-mode: difference;
        }

.dotplyr,
.plyr__controls,
.plyr__controls * {
    direction: ltr;
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded="true"] {
    background: transparent !important;
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
    display: none !important;
}


/*pages*/

#ctis-loading {
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}

    #ctis-loading img {
        display: block;
        margin: 0 auto;
        animation: loadingpage 400ms ease-in-out infinite;
    }

@keyframes loadingpage {
    100% {
        transform: rotate(360deg);
    }
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
    border-radius: 25px;
}

.ShowInMobile {
    display: none;
}

.portfoliosPage #sidebar {
    display: none;
}

.portfoliosPage #mainbar {
    width: 100%;
    max-width: 100%;
}

    .portfoliosPage #mainbar .works_grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }