/*
Theme Name: قالب اختصاصی وایونا
Theme URI: http://vaiona.ir/
Author: تیم وایونا
Author URI: http://vaiona.ir/
Description: وب‌سایت اختصاصی استودیوی طراحی گرافیک وایونا برای معرفی نمونه‌کارها، خدمات و هویت بصری برند با طراحی مینیمال و مدرن.
Version: 0.1.0
Text Domain: vaiona
Tags: طراحی گرافیک، استودیو طراحی، نمونه‌کار، پورتفولیو، مینیمال، مدرن، ریسپانسیو، رابط کاربری، تجربه کاربری، برندینگ، هویت بصری، اختصاصی، حرفه‌ای
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

ul,
ol {
    list-style: none;
    padding-left: 0;
    margin: 0
}

::selection {
    background: color-mix(in srgb, var(--color-secondary) 25%, transparent)
}



body {
    overflow-y: scroll;
    max-width: 1280px;
    margin: auto;
    padding: 0 40px;
    font-family: "darbareh", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #7D7D7D;
    background-color: var(--gray-100);
}


@font-face {
    font-family: "darbareh";
    src: url("assets/fonts/darbareh/darbarehVFWebVF.woff2") format("woff2"),
        url("assets/fonts/darbareh/darbarehVFWebVF.woff") format("woff");
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
}


html {

    visibility: hidden;

}

html.fonts-loaded {

    visibility: visible;

}

a {
    text-decoration: none;
    color: ;
}

:root {
    --color-primary: #008303;

    --color-secondary: #7438C7;
    --gray-50: #FAFAFA;
    --gray-100: #F4F4F5;
    --gray-200: #EAEAEA;
    --gray-300: #D4D4D4;
    --gray-400: #BFBFBF;
    --gray-500: #8C8C8C;
    --gray-600: #666666;
    --gray-700: #4A4A4A;
    --gray-800: #2F2F2F;
    --gray-900: #1F1F1F;
    --gray-950: #111111;


    --font-size-10: 0.625rem;
    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-32: 2rem;
    --font-size-40: 2.5rem;
    --font-size-48: 3rem;
    --font-size-64: 4rem;
    --font-size-96: 6rem;




    --space-0: 0;
    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-56: 3.5rem;
    --space-64: 4rem;
    --space-80: 5rem;
    --space-96: 6rem;
    --space-96: 6rem;
    --space-128: 8rem;
    --space-192: 12rem;
    --space-224: 14rem;
    --space-288: 18rem;
    --space-320: 20rem;
    --space-448: 28rem;
    --space-576: 36rem;

}


::-webkit-scrollbar {
    width: var(--space-8)
}

::-webkit-scrollbar-track {
    background: var(--gray-300);
}

html[dir="rtl"] ::-webkit-scrollbar-track {
    border-left: 1px solid var(--gray-400);
    border-right: 0 solid var(--gray-100);
}

html[dir="ltr"] ::-webkit-scrollbar-track {
    border-left: 1px solid green;
    border-right: 1px solid green;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #b886ff, #7438C7);
}

/* 
.elementor-section-wrap>.elementor-element {
    margin-top: 60px !important;
}

.elementor>.elementor-element {
    margin-top: 60px !important;
} */


.header {
    margin-bottom: var(--space-40);
    margin-top: var(--space-40);
}

.hero,
.services,
.projects,
.director,
.portfolio-category,
.brand-banner,
.social-hero,
.testimonial,
.brand,
.portfolio-cta,
.links,
.pricing,
.capabilities,
.packaging___hero,
.services-content__container,
.blog-archive__articles,
.blog-archive__banner {

    margin-bottom: var(--space-128);
}

@media (max-width:640px) {

    :root {


        --font-size-10: 0.5rem;
        --font-size-12: 0.625rem;
        --font-size-14: 0.75rem;
        --font-size-16: 0.875rem;
        --font-size-20: 1rem;
        --font-size-24: 1.25rem;
        --font-size-32: 1.5rem;
        --font-size-40: 2rem;
        --font-size-48: 2.5rem;
        --font-size-64: 3rem;
        --font-size-96: 4rem;


    }

    .hero,
    .services,
    .projects,
    .director,
    .portfolio-category,
    .brand-banner,
    .social-hero,
    .testimonial,
    .brand,
    .portfolio-cta,
    .links,
    .pricing,
    .capabilities,
    .blog-archive__articles,
    .blog-archive__banner {
        margin-bottom: var(--space-64) !important;
    }

}

/* =========================================================
   Header
========================================================= */

.header {
    position: relative;
    width: 100%;
    margin-top: var(--space-40);
    margin-bottom: var(--space-40);
    z-index: 1000;
}


/* =========================================================
   Header Container
========================================================= */

.header__container {
    width: 100%;
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-40);
}


/* =========================================================
   Header Columns
========================================================= */

.header__right,
.header__center,
.header__left {
    display: flex;
    align-items: center;

    flex: 1 1 0;
}


.header__right {
    justify-content: flex-start;
}


.header__center {
    justify-content: center;
    min-width: 0;
}


.header__left {
    justify-content: flex-end;
}


/* =========================================================
   Logo
========================================================= */

.header__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    text-decoration: none;
}


.header__logo img {
    display: block;

    width: auto;
    height: var(--space-48);
}


/* =========================================================
   Navigation
========================================================= */

.header__nav {
    width: 100%;
    min-width: 0;
}


/* =========================================================
   WordPress Menu
========================================================= */

.header__menu {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: nowrap;

    gap: var(--space-48);

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   WordPress Menu Items
========================================================= */

.header__menu>li {
    position: relative;

    flex: 0 0 auto;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   WordPress Menu Links
========================================================= */

.header__menu>li>a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;

    text-decoration: none;

    font-size: var(--font-size-16);
    font-weight: 400;
    line-height: 1;

    color: var(--gray-500);

    transition:
        color .25s ease,
        opacity .25s ease;
}


/* =========================================================
   Hover
========================================================= */

.header__menu>li>a:hover {
    color: var(--gray-800);
}


/* =========================================================
   Active Menu Item
========================================================= */

.header__menu>li.current-menu-item>a,
.header__menu>li.current_page_item>a,
.header__menu>li.current-menu-ancestor>a,
.header__menu>li.current-menu-parent>a {
    color: var(--gray-800);

    font-weight: 600;
}


/* =========================================================
   Current Item Indicator
========================================================= */

.header__menu>li.current-menu-item>a::after,
.header__menu>li.current_page_item>a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -8px;
    left: 0;

    height: 2px;

    border-radius: 999px;

    background: var(--gray-800);

    transform: scaleX(1);
    transform-origin: center;

    transition: transform .25s ease;
}


/* =========================================================
   Normal Item Indicator
========================================================= */

.header__menu>li>a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -8px;
    left: 0;

    height: 2px;

    border-radius: 999px;

    background: var(--gray-800);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .25s ease;
}


.header__menu>li>a:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   Contact Button
========================================================= */

.header__contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-direction: row;

    gap: var(--space-8);

    min-width: var(--space-128);
    height: var(--space-48);

    padding-inline: 24px;

    border-radius: 999px;

    background: var(--color-primary);

    color: var(--gray-50);

    text-decoration: none;
    white-space: nowrap;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.header__contact:hover {
    background: var(--color-primary);

    color: var(--gray-50);

    transform: translateY(-2px);

    box-shadow:
        0 1rem 2rem color-mix(in srgb,
            var(--color-primary) 20%,
            transparent);
}


.header__contact:active {
    transform: translateY(0);
}


/* =========================================================
   Contact Text
========================================================= */

.header__contact-text {
    order: 1;

    font-size: var(--font-size-16);
    font-weight: 400;
    line-height: 1;
}


/* =========================================================
   Contact Icon
========================================================= */

.header__contact-icon {
    order: 2;

    font-size: var(--font-size-20);

    flex-shrink: 0;
}


/* =========================================================
   Prevent WordPress Default List Styles
========================================================= */

.header__menu,
.header__menu li,
.header__menu ul {
    list-style: none;
}


.header__menu li {
    margin: 0;
    padding: 0;
}


/* =========================================================
   WordPress Menu Focus
========================================================= */

.header__menu>li>a:focus {
    outline: none;
}


.header__menu>li>a:focus-visible {
    outline: 2px solid var(--color-primary);

    outline-offset: 6px;

    border-radius: 4px;
}


/* =========================================================
   Mobile
========================================================= */

.header__mobile,
.drawer,
.drawer-overlay {
    display: none;
}


@media (max-width:1200px) {
    body {

        padding: 0 20px;

    }



    .header__container {
        width: 100%;
        gap: 24px;
        min-height: unset !important;
    }

    .header__menu {
        gap: 28px;
    }

    .header__link {
        font-size: 15px;
    }

    .header__contact {
        min-width: 145px;
        padding-inline: 20px;
    }

    .header__logo img {
        height: 42px;
    }

}

@media (max-width: 991px) {
    .header {

        margin-top: var(--space-20);
        margin-bottom: var(--space-20);

    }

    .header__container {
        width: 100%;
        min-height: 86px;
    }

    .header__right,
    .header__center,
    .header__left {
        display: none;
    }

    .header__mobile {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header__search,
    .header__menu-toggle {


        border: none;


        cursor: pointer;

    }

    .header__menu-toggle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #0B930E;
        flex-direction: column;
        gap: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .3s;

    }

    .header__menu-toggle i {
        display: flex;
        font-size: 20px;
        fill: #fff;
        color: #fff;

    }




    .drawer-overlay {

        display: block;

        position: fixed;
        inset: 0;

        background: rgba(0, 0, 0, .45);

        opacity: 0;
        visibility: hidden;

        transition: .35s;

        z-index: 9998;

    }

    .drawer-overlay.is-active {

        opacity: 1;
        visibility: visible;

    }

    /* ========================================
       DRAWER
    ======================================== */

    .drawer {

        display: block;

        position: fixed;

        top: 88px;
        right: 20px;

        width: min(320px, calc(100vw - 40px));

        max-height: calc(100vh - 40px);

        background: #fff;

        border-radius: 24px 0px 24px 24px;

        overflow-y: auto;
        overflow-x: hidden;

        transform: translateX(calc(100% + 20px));

        opacity: 0;
        visibility: hidden;

        transition:
            transform .35s ease,
            opacity .35s ease,
            visibility .35s ease;

        z-index: 9999;

    }

    .drawer--open {

        transform: translateX(0);

        opacity: 1;
        visibility: visible;

    }

    /* ========================================
       CONTENT
    ======================================== */

    .drawer__inner {

        display: flex;
        flex-direction: column;

        padding: 12px;

    }

    /* ========================================
       CLOSE
    ======================================== */

    .drawer__header {

        display: flex;
        justify-content: flex-start;

        margin-bottom: 40px;

    }

    .drawer__close {

        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        font-size: 24px;
        cursor: pointer;
        position: absolute;
        color: #111;
        left: 12px;

    }

    /* ========================================
       MENU
    ======================================== */

    .drawer__nav {
        flex: 1;
    }

    .drawer__menu {

        display: flex;
        flex-direction: column;

        gap: 26px;

        margin: 0;
        padding: 0;

        list-style: none;

    }

    .drawer__item {
        padding: 4px 8px;
    }

    .drawer__link {

        display: inline-block;

        color: #111;

        text-decoration: none;

        white-space: nowrap;

        font-size: 20px;
        font-weight: 500;
        line-height: 1;

        transition: color .25s;

    }

    .drawer__link:hover,
    .drawer__link:focus-visible {
        color: #0B930E;
    }

    /* ========================================
       FOOTER
    ======================================== */

    .drawer__footer {

        margin-top: auto;

        padding-top: 32px;

    }

    .drawer__contact {

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 10px;

        width: 100%;
        height: 56px;

        border-radius: 999px;

        background: #0B930E;

        color: #fff;

        text-decoration: none;

        transition:
            background .25s,
            transform .25s;

    }

    .drawer__contact:hover {

        background: #087b0b;

        transform: translateY(-2px);

    }

    .drawer__contact-text {

        order: 1;

        font-size: 16px;
        font-weight: 500;

    }

    .drawer__contact-icon {

        order: 2;

        font-size: 20px;

    }

}





/* ======================== hero ========================*/
.hero {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    height: 550px;
    min-height: 500px;
    overflow: hidden;
    isolation: isolate;
}

.hero .container {
    position: relative;
    z-index: 20;
}

.hero__background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero__light {
    position: absolute;
    width: var(--space-224);
    height: var(--space-224);
    border-radius: 999;
    filter: blur(50px);
    opacity: .75;
    will-change: transform;
    animation: heroLight 12s ease-in-out infinite;
}

.hero__light--green {
    top: 160px;
    left: 80px;
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.hero__light--purple {
    right: 100px;
    bottom: 100px;
    background: color-mix(in srgb, var(--color-secondary) 30%, transparent);
    animation-delay: -6s;
}


.hero__arc {
    position: absolute;
    transform-origin: center;
    will-change: transform;
}

.hero__arc svg {
    display: block;
    width: 100%;
    height: auto;
}

.hero__arc--left {
    width: 300px;
    left: 20px;
    bottom: 15px;
    opacity: 85%;
    animation: heroArcLeft 9s ease-in-out infinite;
}

.hero__arc--left path {
    fill: color-mix(in srgb, var(--color-secondary) 5%, transparent);
}

.hero__arc--right {
    width: 240px;
    right: 35px;
    bottom: 35px;
    opacity: .45;

    transform: scaleX(-1) rotate(-20deg);

    animation: heroArcRight 11s ease-in-out infinite;

}

.hero__arc--right path {
    fill: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.hero__shape {

    position: absolute;

    z-index: 5;

    pointer-events: auto;

    transform-origin: center;

    will-change: transform;

}

.hero__shape svg {
    display: block;
    width: 100%;
    height: auto;
}


.hero__shape--1 {
    width: 80px;
    top: 240px;
    left: 20px;
    animation: heroShapeOne 8s ease-in-out infinite;
}

.hero__shape--1 path {
    fill: color-mix(in srgb, var(--color-secondary) 75%, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__shape--2 {
    width: 100px;
    top: 320px;
    right: 90px;
    animation: heroShapeTwo 10s ease-in-out infinite;
}

.hero__shape--3 {
    width: 80px;
    top: 45px;
    left: 50%;
    margin-left: -26px;
    animation: heroShapeThree 9s ease-in-out infinite;
}

.hero__parallax {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

@keyframes heroLight {
    0% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(12px, -10px) scale(1.04);
    }

    50% {
        transform: translate(-10px, 12px) scale(.96);
    }

    75% {
        transform: translate(8px, -8px) scale(1.02);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes heroArcLeft {
    0% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(2deg) translateY(-10px);
    }

    100% {
        transform: rotate(0deg) translateY(0);
    }
}

@keyframes heroArcRight {
    0% {
        transform: scaleX(-1) rotate(-20deg) translateY(0);
    }

    50% {
        transform: scaleX(-1) rotate(-17deg) translateY(-8px);
    }

    100% {
        transform: scaleX(-1) rotate(-20deg) translateY(0);
    }
}

@keyframes heroShapeOne {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(5deg);
    }

    50% {
        transform: translateY(8px) rotate(-5deg);
    }

    75% {
        transform: translateY(-6px) rotate(8deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes heroShapeTwo {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(14px) rotate(10deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes heroShapeThree {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px) rotate(-8deg);
    }

    100% {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero__light,
    .hero__arc,
    .hero__shape {
        animation: none;
    }
}


.hero__heading {
    font-size: var(--font-size-64);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--gray-800);
    font-weight: 600;
}

.hero__heading h1 {
    font-size: var(--font-size-64);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--gray-800);
    font-weight: 600;
    white-space: nowrap;
}

.hero__description {
    font-size: var(--font-size-40);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--gray-600);
    font-weight: 400;
}

.hero__word__description {
    font-size: var(--font-size-48);
    white-space: nowrap;
}

.hero__line--1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-20);
}

.hero__line--2 {
    text-align: center;
    margin-top: 0;
}

.hero__word--brand {
    color: var(--color-secondary);
}

.hero__word--accent {
    color: var(--color-primary);
}


.hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    align-items: center;
    justify-content: center;

}

.hero__button {
    padding: var(--space-16);
    border-radius: 999px;
    color: var(--gray-800);
    border: 1px solid var(--gray-800);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: var(--space-8);
    transition: all 0.2s ease-in-out;

}

.hero__button:hover {
    background-color: var(--gray-200);
    transform: translateY(-2px);

}

.hero__button-icon {
    font-size: var(--font-size-24);
    width: var(--space-24);
    height: var(--space-24);
    line-height: 100% !important;
}

.hero__word--brand {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.hero__brand-background {
    position: absolute;
    inset: -12px -22px;
    z-index: -1;
    pointer-events: none;
}

.hero__brand-background svg {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__brand-text {
    position: relative;
    z-index: 2;
}

@media (max-width:960px) {


    .hero__line--1 {

        flex-direction: column;

        gap: var(--space-8);
    }

    .hero__brand-text {
        font-size: var(--font-size-56);
    }

    .hero__heading h1 {
        font-size: var(--font-size-48);

    }

    .hero__word__description {
        font-size: var(--font-size-32);
    }

    .hero__description {
        font-size: var(--font-size-24);
    }
}

@media (max-width:640px) {
    .hero {

        align-items: start;

        height: unset !important;
        min-height: unset !important;

    }

    .header {
        position: relative;
        width: 100%;
        margin-top: var(--space-40);
        margin-bottom: var(--space-40);
        z-index: 1000;
    }

    .hero__heading {
        font-size: var(--font-size-48);
    }

    .hero__content {
        padding: 20px;
        gap: var(--space-12);
    }

    .social-hero__description {
        font-size: var(--font-size-20);
    }

    .hero__brand-text {
        font-size: var(--font-size-48);
    }

    .hero__heading h1 {
        font-size: var(--font-size-32);

    }

    .hero__word__description {
        font-size: var(--font-size-24);
    }

    .hero__line--1 {
        gap: var(--space-8);
    }

    .hero__line--2 {

        margin-top: -4px;
    }

    .hero__light {
        width: var(--space-128);
        height: var(--space-128);

        filter: blur(20px);
        opacity: .50;

    }

    .hero__light--green {
        top: 40px;
        left: 40px;
    }

    .hero__light--purple {
        right: 100px;
        bottom: 30px;
    }



    .hero__arc--left {
        width: 200px;
        left: 5px;
        top: 30px;
        opacity: 85%;
    }


    .hero__arc--right {
        width: 200px;
        right: 5px;
        bottom: 20px;


    }

    .hero__arc--right path {
        fill: color-mix(in srgb, var(--color-primary) 10%, transparent);
    }

    .hero__shape {

        position: absolute;

        z-index: 5;

        pointer-events: auto;

        transform-origin: center;

        will-change: transform;

    }

    .hero__shape svg {
        display: block;
        width: 100%;
        height: auto;
    }


    .hero__shape--1 {
        width: 30px;
        top: 80px;
        left: 4px;
        right: unset !important;
    }

    .hero__shape--1 path {
        fill: color-mix(in srgb, var(--color-secondary) 75%, transparent);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .hero__shape--2 {

        width: 40px;
        top: 110px;
        left: unset;
        right: 20px;
    }

    .hero__shape--3 {
        width: 20px;
        top: 10px;
        left: 50%;
        margin-left: -26px;
        animation: heroShapeThree 9s ease-in-out infinite;
    }

    .hero__parallax {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
    }
}

/* ======================== services ========================*/

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

.services__container {
    width: min(100%, 800px);
    margin-inline: auto;
}

.services__header {
    margin-bottom: var(--space-24);
    text-align: center;
}

.services__title {
    color: var(--gray-800);
    font-size: var(--font-size-24);
    font-weight: 600;
    line-height: 1.5;
}


.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-20);

}


.service-card {
    min-width: 0;
}

.service-card__link {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-20);
    border-radius: var(--space-12);
    background: var(--gray-50);
    border: var(--gray-200) 1px solid;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.service-card__link:hover {
    border: 1px solid var(--color-primary);
}



.service-card__icon {
    width: var(--space-80);
    height: var(--space-80);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-8)
}

.service-card__icon img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.service-card__title {
    color: var(--gray-800);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}




@media (max-width:640px) {



    .services__grid {

        gap: var(--space-8);

    }


    .service-card__icon {

        width: var(--space-32);
        height: var(--space-32);
        margin-bottom: 20px;

    }

    .service-card__link {
        padding: var(--space-12);
    }

    .service-card__title {
        font-size: var(--font-size-14);
        font-weight: 500;
        white-space: nowrap;
    }
}














/* ======================== projeccts ========================*/


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

.projects__container {
    width: min(100%, 1200px);
    margin-inline: auto;
}

.projects__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-24);
}

.projects__title {
    color: var(--gray-800);
    font-size: var(--font-size-24);
    font-weight: 600;
    line-height: 1.25;
}

.projects__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--gray-600);
    text-decoration: none;
    font-size: var(--font-size-20);
    font-weight: 400;
    transition: .25s;
}

.projects__more:hover {
    color: var(--color-primary);
}

.projects__more-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    font-size: 20px;
}

.projects__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-20);
}

.project-card {
    min-width: 0;
}

.project-card__link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-12);
    border-radius: var(--space-20);
    border: var(--gray-200) 1px solid;
    background: var(--gray-50);
    color: inherit;
    text-decoration: none;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.project-card__image {
    overflow: hidden;
    border-radius: var(--space-12);
    height: var(--space-192);

    background: var(--gray-400);
}

.project-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .45s ease;
}

.project-card__link:hover .project-card__image img {
    transform: scale(1.05);
}

.project-card__content {
    padding-top: var(--space-16);
    text-align: start;
    white-space: nowrap;
    margin-right: var(--space-4);
}

.project-card__title {

    color: var(--gray-800);
    font-size: var(--font-size-16);
    font-weight: 700;
    line-height: 1.4;

}

.project-card__category {
    margin-top: var(--space-4);
    color: var(--gray-600);
    font-size: var(--font-size-14);
    font-weight: 400;
    line-height: 1.5;

}


.project-card__button {
    position: absolute;
    left: 48px;
    top: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-48);
    height: var(--space-48);
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-800);
    font-size: var(--font-size-20);
    border: 2px solid var(--gray-100);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, .10);
    transition:
        background .3s,
        color .3s,
        transform .3s;
}

.project-card__link:hover .project-card__button {
    background: var(--color-primary);
    color: var(--gray-100);
    border: 2px solid var(--gray-100);
    transform: translateX(-4px);
}

.project-card:nth-child(n + 4) {
    display: none;
}


@media (max-width:991px) {

    .projects__header {

        margin-bottom: 32px;

    }


    .projects__grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .project-card:nth-child(n + 4) {

        display: block;

    }
}

@media (max-width:640px) {

    .project-card__image {
        overflow: hidden;
        border-radius: var(--space-12);
        height: unset;
        aspect-ratio: 1 / 1;
        background: var(--gray-400);
    }

    .project-card__button {
        top: unset;
    }

    .projects__header {

        margin-bottom: 24px;

    }



    .projects__more {

        font-size: 15px;

    }

    .projects__grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: var(--space-8);

    }

    .project-card__link {

        padding: 8px;

        border-radius: 20px;

    }

    .project-card__image {

        border-radius: 14px;

    }

    .project-card__title {

        font-size: 16px;

    }

    .project-card__category {

        font-size: 12px;

    }

    .project-card__button {

        width: 42px;
        height: 42px;

        left: 20px;

        bottom: 46px;

        font-size: 18px;

    }

}



/* ======================== director ========================*/

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

.director__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-40);
}

.director__content {
    position: relative;
    z-index: 5;
}



.director__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-12);
    color: var(--gray-600);
    font-size: var(--font-size-24);
    font-weight: 400;
    line-height: 1.25;
}

.director__title {
    color: var(--gray-800);
    font-size: var(--font-size-32);
    font-weight: 600;
    line-height: 1.25;
}

.director__description {
    margin-top: var(--space-24);
    color: var(--gray-600);
    font-size: var(--font-size-24);
    font-weight: 400;
    line-height: 1.25;
}

.director__button {
    display: inline-flex;
    align-items: center;
    margin-top: var(--space-40);
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--gray-100);
    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
    padding: var(--space-16);
    justify-content: center;
    flex-direction: row;
    gap: var(--space-8);
    transition: all 0.2s ease-in-out;

}

.director__button:hover {
    transform: translateY(-3px);
}

.director__button-text {
    font-size: var(--font-size-16);
    font-weight: 400;
}

.director__button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-20);
}

.director__visual {
    position: relative;
    display: flex;
    justify-content: flex-start;
}

.director-card {
    position: relative;
    width: var(--space-576);
    height: var(--space-576);
}

.director-card__background {
    position: absolute;
    left: var(--space-40);
    bottom: 0;
    width: var(--space-448);
    height: var(--space-448);
    z-index: 1;
}

.director-card__background svg {
    display: block;
    width: 100%;
    height: 100%;
}

.director-card__figure {
    position: absolute;
    left: 0px;
    bottom: 0;
    width: var(--space-448);
    margin: 0;
    z-index: 3;
}

.director-card__image {
    display: block;
    width: 100%;
    height: auto;
}

.director-card__info {
    position: absolute;
    top: 200px;
    right: 80px;
    width: 200px;
    height: 122px;
    z-index: 20;
}

.director-card__info-background {
    position: absolute;
    inset: 0;
}

.director-card__info-background svg {
    display: block;
    width: 100%;
    height: 100%;

}

.director-card__info-content {
    position: absolute;
    inset: 0;
    margin-top: var(--space-12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: var(--space-24);
    color: var(--gray-100);
}

.director-card__name {
    margin: 0 0 var(--space-8);
    font-size: var(--font-size-20);
    font-weight: 600;
    line-height: 1.25;
}

.director-card__position {
    margin: 0;
    font-size: var(--font-size-16);
    font-weight: 400;
    line-height: 1.5;
}

.director-card__floating {
    position: absolute;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.director-card__floating img {
    display: block;
    width: 100%;
    height: auto;
}

.director-card__floating--branding {
    top: 80px;
    left: 10px;
    width: var(--space-96);
    animation: directorFloatingBranding 6s ease-in-out infinite;
}

.director-card__floating--ui {
    top: 16px;
    left: 140px;
    width: var(--space-48);
    animation: directorFloatingUI 7s ease-in-out infinite;
}

.director-card__floating--motion {
    top: 40px;
    right: 40px;
    width: var(--space-80);
    animation: directorFloatingMotion 6.5s ease-in-out infinite;
}


.director-card__image {
    transition: transform .45s ease;
}

.director-card:hover .director-card__image {
    transform: translateY(-6px);
}

.director-card__info {
    transition:
        transform .35s ease;
}

.director-card:hover .director-card__info {
    transform: translateY(-8px);
}

.director-card__floating {
    transition:
        transform .35s ease;
}

.director-card:hover .director-card__floating--branding {
    transform: translateY(-8px);
}

.director-card:hover .director-card__floating--ui {
    transform: translateY(6px);
}

.director-card:hover .director-card__floating--motion {
    transform: translateY(-10px);
}


@keyframes directorBackground {
    0% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(2deg) translateY(-12px);
    }

    100% {
        transform: rotate(0deg) translateY(0);
    }
}

@keyframes directorBadge {
    0% {
        transform: rotate(-8deg) translateY(0);
    }

    50% {
        transform: rotate(-5deg) translateY(-10px);
    }

    100% {
        transform: rotate(-8deg) translateY(0);
    }
}

@keyframes directorFloatingBranding {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(4deg);
    }

    50% {
        transform: translateY(8px) rotate(-5deg);
    }

    75% {
        transform: translateY(-5px) rotate(5deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes directorFloatingUI {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(14px) rotate(10deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes directorFloatingMotion {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px) rotate(-8deg);
    }

    100% {
        transform: translateY(0);
    }
}

.director-card__background {
    animation: directorBackground 10s ease-in-out infinite;
}

.director-card__info {
    animation: directorBadge 7s ease-in-out infinite;
}




@media (max-width:1200px) {





    .director-card__figure {

        width: 360px;

        left: 40px;

    }

    .director-card__background {

        width: 360px;
        height: 400px;

    }

    .director-card__info {

        right: 40px;
        top: 180px;

    }

}

@media (max-width:991px) {

    .director__container {

        flex-direction: column-reverse;
        gap: 20px;

    }


    .director__description {

        margin-inline: auto;
        font-size: var(--font-size-24);
    }

    .director__button {

        margin-inline: auto;
        margin-top: var(--space-24);

    }

    .director__visual {


        justify-content: center;

    }

}

@media (max-width:767px) {







    .director__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .director-card {

        width: 340px;
        height: 430px;

    }

    .director-card__figure {

        width: 270px;

        left: 28px;

    }

    .director-card__background {

        width: 260px;
        height: 300px;

        left: 24px;

    }

    .director-card__info {

        width: 140px;
        height: 90px;

        top: 200px;

    }

    .director-card__info-content {

        padding-inline: var(--space-20);

    }

    .director-card__name {

        font-size: 16px;

        margin-bottom: 4px;

    }

    .director__eyebrow {
        font-size: var(--font-size-20);
    }

    .director-card__position {

        font-size: 12px;

    }

    .director-card__floating--branding {

        left: 140px;
        top: 28px;

        width: 54px;

    }

    .director-card__floating--ui {

        left: 30px;
        top: 50px;

        width: 54px;

    }

    .director-card__floating--motion {

        top: 60px;
        width: 48px;

    }

}

/* ======================== Category ========================*/

.portfolio-category {
    position: relative;
    overflow: hidden;
}

.portfolio-category__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: var(--space-24);
}

.portfolio-category__title {
    color: var(--gray-800);
    font-size: var(--font-size-24);
    font-weight: 600;
    line-height: 1.25;
}

.portfolio-category__slider {
    position: relative;
}

.portfolio-category__slider .owl-nav,
.portfolio-category__slider .owl-dots {
    display: none;
}

.portfolio-category__slider .owl-item {
    height: 100%;
}

.portfolio-category-card {
    height: 100%;
}

.portfolio-category-card__link {
    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;

    padding: var(--space-12);

    background: var(--gray-50);

    border: 1px solid var(--gray-200);
    border-radius: var(--space-24);

    color: inherit;
    text-decoration: none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.portfolio-category-card__image {
    overflow: hidden;

    aspect-ratio: 1.42;

    border-radius: var(--space-16);

    background: var(--gray-100);
}

.portfolio-category-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .45s ease;
}

.portfolio-category-card__link:hover .portfolio-category-card__image img {
    transform: scale(1.06);
}

.portfolio-category-card__content {
    display: flex;
    align-items: center;

    min-height: var(--space-64);

    padding-top: var(--space-16);
}

.portfolio-category-card__title {
    color: var(--gray-900);
    font-size: var(--font-size-20);
    font-weight: 600;
    line-height: 1.25;
}

.portfolio-category-card__button {
    position: absolute;
    left: var(--space-12);
    bottom: var(--space-12);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-40);
    height: var(--space-40);
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--gray-50);
    font-size: var(--font-size-20);
    transition:
        transform .3s ease,
        background .3s ease;
}

.portfolio-category-card__link:hover .portfolio-category-card__button {
    transform: scale(1.1);
}



@media (max-width:767px) {

    .portfolio-category__header {
        margin-bottom: var(--space-24);
    }


    .portfolio-category-card__link {
        padding: var(--space-12);
        border-radius: var(--space-20);
    }

    .portfolio-category-card__image {
        border-radius: var(--space-12);
    }

    .portfolio-category-card__content {
        min-height: var(--space-48);
        padding-top: var(--space-12);
    }

    .portfolio-category-card__title {
        font-size: var(--font-size-16);
    }

    .portfolio-category-card__button {
        width: 2.375rem;
        height: 2.375rem;
        left: var(--space-12);
        bottom: var(--space-12);
        font-size: var(--font-size-16);
    }

}


/* ======================== banner ========================*/
/* ======================== Brand Banner ======================== */

.brand-banner {

    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    min-height: 400px;

    padding: var(--space-56);

    overflow: hidden;

    border-radius: var(--space-24);

    background:
        url("assets/img/brand-banner.webp") center / cover no-repeat;

    background-color: var(--gray-300);



}


/* ======================== Content ======================== */

.brand-banner__content {

    position: relative;
    z-index: 2;

    max-width: 40%;

    text-align: right;

}


.brand-banner__title {
    text-align: start;
    margin: 0;

    color: var(--gray-800);

    font-size: var(--font-size-40);

    font-weight: 600;

    line-height: 1.25;

}


.brand-banner__description {

    margin-top: var(--space-12);

    color: var(--gray-600);

    font-size: var(--font-size-24);

    font-weight: 400;

    line-height: 1.25;

}


/* ======================== Desktop Button ======================== */

.brand-banner__button {

    display: inline-flex;

    align-items: center;
    gap: var(--space-8);

    margin-top: var(--space-20);

    height: var(--space-56);

    padding-inline: var(--space-32);

    border-radius: 999px;

    background: var(--color-primary);

    color: var(--gray-100);

    text-decoration: none;

    transition:
        background .3s ease,
        transform .3s ease;

}


.brand-banner__button:hover {

    transform: translateY(-3px);

}


.brand-banner__button-text {

    font-size: var(--font-size-16);

    font-weight: 400;

}


.brand-banner__button-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: var(--font-size-20);

}


/* ======================== Mobile Button ======================== */

.brand-banner__mobile-button {

    display: none;

}


/* ======================== Responsive ======================== */

@media (max-width: 767px) {

    .brand-banner {

        min-height: var(--space-224);

        padding: 24px;

        background:
            url("assets/img/brand-banner-s.webp") center / cover no-repeat;

    }


    /* Desktop button hidden */

    .brand-banner__button {

        display: none;

    }


    /* Mobile button */

    .brand-banner__mobile-button {

        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--space-48);
        height: var(--space-48);
        border: 0;
        border-radius: 0 0 24px 0;
        background: var(--gray-100);
        color: var(--gray-100);
        text-decoration: none;

    }

    .brand-banner__mobile-button::after {

        content: "";

        position: absolute;

        width: 20px;

        height: 20px;

        top: 0;

        right: -20px;

        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0C8.95431 0 0 8.95431 0 20V0H20Z' fill='%23F4F4F5'/%3E%3C/svg%3E");

        background-repeat: no-repeat;

        background-size: 20px 20px;

        pointer-events: none;

    }

    .brand-banner__mobile-button::before {

        content: "";

        position: absolute;

        width: 20px;
        height: 20px;

        bottom: -20px;
        left: 0;

        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0C8.95431 0 0 8.95431 0 20V0H20Z' fill='%23F4F4F5'/%3E%3C/svg%3E");

        background-repeat: no-repeat;
        background-size: 20px 20px;

        pointer-events: none;

    }


    .brand-banner__mobile-button .ph {

        position: relative;

        z-index: 2;

        display: flex;

        align-items: center;
        justify-content: center;

        width: 48px;

        height: 48px;

        border-radius: 50%;

        background: var(--color-primary);

        color: var(--gray-50);

        font-size: 30px;


    }


    .brand-banner__content {

        max-width: 55%;

    }


    .brand-banner__title {

        font-size: var(--font-size-20);

    }


    .brand-banner__description {
        display: none;

    }


    .brand-banner__mobile-button>i {

        background: var(--color-primary);
        position: absolute;

        border-radius: 100%;
        width: 40px;
        left: 0px;
        top: 0;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;

    }
}




/* ======================================================
   SOCIAL HERO
====================================================== */

.social-hero {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 440px;

    overflow: hidden;
    isolation: isolate;

}

.social-hero .container {
    position: relative;
    z-index: 1;
}


.social-hero a {
    cursor: pointer;
}

/* ======================================================
   BACKGROUND
====================================================== */

.social-hero__background {
    position: absolute;
    inset: 0;

    pointer-events: none;
}


/* ======================================================
   LIGHTS
====================================================== */

.social-hero__light {
    position: absolute;

    width: var(--space-224);
    height: var(--space-224);

    border-radius: 50%;

    filter: blur(40px);

    opacity: .250;

    animation: socialLight 12s ease-in-out infinite;

    will-change: transform;
}

.social-hero__light--green {

    top: 150px;
    left: 40%;
    margin-left: -120px;

    background: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.social-hero__light--purple {

    bottom: 120px;
    left: 60%;

    margin-left: -40px;

    background: color-mix(in srgb, var(--color-secondary) 55%, transparent);

    animation-delay: -4s;
}

.social-hero__light--blue {

    top: 130px;
    right: 140px;

    background: rgba(0, 123, 255, 0.55);

    animation-delay: -8s;
}

.social-hero__light--red {

    top: 160px;
    left: 140px;

    background: rgba(255, 0, 0, 0.55);

    animation-delay: -2s;
}


/* ======================================================
   CONTENT
====================================================== */

.social-hero__content {

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    padding-top: var(--space-224);
    margin-bottom: -20px;
}

.social-hero__title {

    color: var(--gray-800);

    font-size: var(--font-size-32);

    font-weight: 600;

    line-height: 1.25;
}

.social-hero__description {

    margin-top: var(--space-16);

    color: var(--gray-600);

    font-size: var(--font-size-20);

    line-height: 1.25;
}

.social-hero__button {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-8);

    margin-top: var(--space-20);

    height: 52px;

    padding-inline: var(--space-24);

    border-radius: 999px;

    background: var(--color-primary);

    color: #fff;

    transition: .3s;
}

.social-hero__button:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(0, 131, 3, .25);
}

.social-hero__button-icon {

    font-size: var(--font-size-20);
}


/* ======================================================
   ICONS
====================================================== */

.social-hero__icon {

    position: absolute;

    z-index: 10;

    will-change: transform;

    animation: socialFloat 7s ease-in-out infinite;
}

.social-hero__icon img {

    display: block;

    width: 100%;
    height: auto;
}


/* Youtube */

.social-hero__icon--1 {

    width: 220px;

    top: 165px;
    left: 80px;

    animation-delay: -.5s;
}


/* Telegram */

.social-hero__icon--2 {

    width: 134px;

    top: 45px;
    left: 300px;

    animation-delay: -3s;
}



.social-hero__icon--3 {

    width: 224px;

    top: 10px;
    left: 46%;

    margin-left: -69px;

    animation-delay: -1s;
}


/* Instagram */

.social-hero__icon--4 {

    width: 128px;

    top: 30px;
    right: 315px;

    animation-delay: -4s;
}


/* Whatsapp */

.social-hero__icon--5 {

    width: 80px;

    top: 55px;
    right: 220px;

    animation-delay: -5s;
}


/* Linkedin */

.social-hero__icon--6 {

    width: 200px;

    top: 140px;
    right: 80px;

    animation-delay: -2s;
}


/* Dribbble */

.social-hero__icon--7 {

    width: 80px;

    top: 60px;
    left: 160px;

    animation-delay: -6s;
}


/* ======================================================
   ANIMATION
====================================================== */

@keyframes socialLight {

    0% {

        transform:
            translate(0, 0) scale(1);

    }

    25% {

        transform:
            translate(14px, -10px) scale(1.06);

    }

    50% {

        transform:
            translate(-12px, 12px) scale(.96);

    }

    75% {

        transform:
            translate(10px, -6px) scale(1.03);

    }

    100% {

        transform:
            translate(0, 0) scale(1);

    }

}


@keyframes socialFloat {

    0% {

        transform:
            translateY(0) rotate(0deg);

    }

    25% {

        transform:
            translateY(-8px) rotate(-2deg);

    }

    50% {

        transform:
            translateY(10px) rotate(2deg);

    }

    75% {

        transform:
            translateY(-5px) rotate(-1deg);

    }

    100% {

        transform:
            translateY(0) rotate(0deg);

    }

}


/* ======================================================
   RESPONSIVE
====================================================== */



@media (max-width:767px) {


    .social-hero__button {


        height: var(--space-40);

        padding-inline: var(--space-16);


    }

    .social-hero__button-text {
        font-size: var(--font-size-16);
    }


    .social-hero__content {

        margin-top: unset;

        padding-top: var(--space-128);
        margin-bottom: var(--space-16)
    }



    .social-hero__l2ight {

        width: 20px;
        height: 20px;

        filter: blur(10px);

    }

    .social-hero__icon--1 {
        width: 65px;
        left: 5%;
        top: 25%;

    }

    .social-hero__icon--2 {
        width: 35px;
        left: 25%;
        top: 10%;
    }

    .social-hero__icon--3 {
        width: 90px;
        right: 37%;
        top: 20px;
    }




    .contact-social-hero .social-hero__icon--3 {
        width: 90px !important;
        right: 37% !important;
        top: 20px !important;
    }



    .social-hero__icon--4 {
        width: 36px;
        right: 25%;
        top: 10%;
    }

    .social-hero__icon--5 {
        width: 35px;
        right: 10%;
        top: 10%;
    }

    .social-hero__icon--6 {
        width: 60px;
        right: 5%;
        top: 25%;
    }

    .social-hero__icon--7 {
        width: 45px;
        left: 10%;
        top: 10%;
    }




    .social-hero__light {
        position: absolute;

        width: var(--space-80);
        height: var(--space-80);

        border-radius: 50%;

        filter: blur(20px);

        opacity: .250;

        animation: socialLight 12s ease-in-out infinite;

        will-change: transform;
    }

    .social-hero__light--green {
        top: 10%;
        left: 40%;

        background: color-mix(in srgb, var(--color-primary) 70%, transparent);
    }

    .social-hero__light--purple {

        top: 10%;
        bottom: unset;
        bottom: 20%;

        background: color-mix(in srgb, var(--color-secondary) 70%, transparent);

        animation-delay: -4s;
    }

    .social-hero__light--blue {

        top: 20%;
        right: 15%;

        background: rgba(0, 123, 255, 0.70);

        animation-delay: -8s;
    }

    .social-hero__light--red {

        top: 20%;
        left: 10%;

        background: rgba(255, 0, 0, 0.70);

        animation-delay: -2s;
    }

}


/* ======================== Testimonial ======================== */

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

.testimonial__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: var(--space-24);
}

.testimonial__title {
    color: var(--gray-800);

    font-size: var(--font-size-24);
    font-weight: 600;

    line-height: 1.25;
}

.testimonial__navigation {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.testimonial__nav {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--space-48);
    height: var(--space-48);

    border: 1px solid var(--gray-200);
    border-radius: 50%;

    background: #fff;

    color: var(--gray-800);

    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.testimonial__nav:hover:not(.disabled) {

    background: var(--color-primary);

    border-color: var(--color-primary);

    color: #fff;

    transform: translateY(-2px);
}

.testimonial__nav.disabled {
    opacity: .35;
    cursor: default;
}

.testimonial__nav i {
    font-size: var(--font-size-20);
}


/* ======================== Slider ======================== */

.testimonial__slider .owl-nav,
.testimonial__slider .owl-dots {
    display: none;
}

.testimonial__slider .owl-stage {
    display: flex;
}

.testimonial__slider .owl-item {
    display: flex;
    height: auto;
}


/* ======================== Card ======================== */

.testimonial-card {
    width: 100%;
}

.testimonial-card {

    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;

    padding: var(--space-32);

    border-radius: var(--space-20);

    background: #fff;


    transition:
        transform .35s ease,
        box-shadow .35s ease;
}




/* ======================== Header ======================== */

.testimonial-card__header {

    display: flex;
    align-items: center;

    gap: var(--space-16);

    margin-bottom: var(--space-20);
}

.testimonial-card__avatar {

    flex-shrink: 0;

    width: 64px;
    height: 64px;

    border-radius: 50%;

    overflow: hidden;
}

.testimonial-card__name__jobtitle {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.testimonial-card__jobtitle {
    font-size: var(--font-size-16);
}

.testimonial-card__avatar img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.testimonial-card__name {

    color: var(--gray-900);

    font-size: var(--font-size-20);

    font-weight: 700;

    line-height: 1.5;
}


/* ======================== Content ======================== */

.testimonial-card__content {
    flex: 1;
}

.testimonial-card__text {

    color: var(--gray-600);

    font-size: var(--font-size-14);

    line-height: 1.5;

    text-align: justify;
}


/* ======================== Responsive ======================== */


@media (max-width:767px) {
    .testimonial__navigation {

        gap: var(--space-8);
    }

    .testimonial__nav {

        width: var(--space-40);
        height: var(--space-40);

    }

    .testimonial-card {

        padding: var(--space-24);

        border-radius: var(--space-24);
    }

    .testimonial-card__avatar {

        width: 56px;
        height: 56px;
    }


}





















/* ======================== Brand ======================== */

.brand {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.brand__header {
    display: flex;
    justify-content: center;

    margin-bottom: var(--space-40);
}

.brand__title {
    color: var(--gray-800);

    font-size: var(--font-size-24);
    font-weight: 600;

    line-height: 1.25;

    text-align: center;
}


/* ======================== Grid ======================== */

.brand__grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);
    width: 75%;
    gap: var(--space-24);
}


/* ======================== Card ======================== */

.brand-card {

    display: flex;
    align-items: center;
    justify-content: center;

    height: 92px;
    background: var(--gray-50);

    border: 1px solid var(--gray-200);
    border-radius: var(--space-16);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.brand-card:hover {

    transform: translateY(-4px);

    border-color: var(--gray-300);

    box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
}

.brand-card img {

    display: block;

    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    transition: transform .3s ease;
}

.brand-card:hover img {

    transform: scale(1.04);
}


/* ======================== Responsive ======================== */

@media (max-width:991px) {

    .brand__grid {

        grid-template-columns: repeat(4, 1fr);
    }

    .brand__title {

        font-size: var(--font-size-24);
    }

}

@media (max-width:767px) {

    .brand__grid {
        width: 100%;
        grid-template-columns: repeat(4, 1fr);

        gap: var(--space-12);
    }

    .brand-card {
        height: var(--space-64);

        padding: var(--space-8);

        border-radius: var(--space-12);
    }

    .brand-card img {

        max-width: 85%;
        max-height: 48px;
    }

}




/* ======================== Portfolio CTA ======================== */

.portfolio-cta {
    position: relative;
    overflow: hidden;
}

.portfolio-cta__background {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.portfolio-cta__wrapper {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-20);

    min-height: 500px;
}


/* ========================
   Lights
======================== */

.portfolio-cta__light {
    position: absolute;

    width: var(--space-192);
    height: var(--space-192);

    border-radius: 50%;

    filter: blur(40px);

    opacity: .55;

    animation: portfolioLight 12s ease-in-out infinite;

    will-change: transform;
}

.portfolio-cta__light--green {

    left: 80px;
    bottom: 60px;

    background:
        color-mix(in srgb, var(--color-primary) 42%, transparent);
}

.portfolio-cta__light--purple {

    left: 500px;
    top: 70px;

    background:
        color-mix(in srgb, var(--color-secondary) 35%, transparent);

    animation-delay: -5s;
}


/* ========================
   Visual
======================== */

.portfolio-cta__visual {

    position: relative;

    flex: 0 0 60%;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.portfolio-cta__image {

    display: block;

    width: 100%;
    height: auto;

    position: relative;
    z-index: 2;
}


/* ========================
   Content
======================== */

.portfolio-cta__content {

    flex: 0 0 45%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    text-align: right;
}

.portfolio-cta__title {

    color: var(--gray-800);

    font-size: var(--font-size-32);
    font-weight: 600;

    line-height: 1.25;
}



.portfolio-cta__button {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-8);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    border-radius: 999px;
    margin-top: var(--space-20);
    background: var(--color-primary);

    color: #fff;
    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.portfolio-cta__button:hover {

    transform: translateY(-3px);

    box-shadow: 0 14px 30px rgba(0, 131, 3, .22);
}

.portfolio-cta__button-icon {

    font-size: var(--font-size-20);
}

.portfolio-cta__button-text {
    line-height: 100% !important;
}

.portfolio-cta__button-icon {
    line-height: 100% !important;
    width: var(--space-20);
    height: var(--space-20);

}

/* ========================
   Animation
======================== */

@keyframes portfolioLight {

    0% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(18px, -10px) scale(1.05);
    }

    50% {
        transform: translate(-12px, 14px) scale(.96);
    }

    75% {
        transform: translate(10px, -8px) scale(1.03);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }

}


/* ========================
   Responsive
======================== */

@media (max-width:991px) {



    .portfolio-cta__wrapper {

        flex-direction: column;

        gap: var(--space-48);

        min-height: auto;
    }

    .portfolio-cta__content {

        order: 1;

        align-items: center;

        text-align: center;

        flex: unset;
    }

    .portfolio-cta__visual {

        order: 2;

        justify-content: center;

        flex: unset;
    }

    .portfolio-cta__title {

        font-size: var(--font-size-32);
    }





    .portfolio-cta__light {
        position: absolute;

        width: var(--space-192);
        height: var(--space-192);

        border-radius: 50%;

        filter: blur(15px);

        opacity: .55;

        animation: portfolioLight 12s ease-in-out infinite;

        will-change: transform;
    }

    .portfolio-cta__light--green {
        width: 100px;
        height: 100px;
        left: 20px;
        bottom: unset;
        top: 120px;
        background:
            color-mix(in srgb, var(--color-primary) 20%, transparent);
    }

    .portfolio-cta__light--purple {
        width: 100px;
        height: 100px;
        left: unset;
        right: 40px;
        top: 30px;

        background:
            color-mix(in srgb, var(--color-secondary) 32%, transparent);

        animation-delay: -5s;
    }


}

@media (max-width:767px) {
    .portfolio-cta__button {
        padding: var(--space-12);

    }

    .portfolio-cta__wrapper {

        gap: var(--space-32);
    }

    .portfolio-cta__title {

        font-size: var(--font-size-24);
    }

    .portfolio-cta__image {

        max-width: 100%;
    }






}

@media (prefers-reduced-motion:reduce) {

    .portfolio-cta__light {

        animation: none;
    }

}






































/* ======================== FAQ ======================== */

.faq {
    width: 75%;
    margin: auto;
}

.faq__header {
    margin-bottom: var(--space-40);
    text-align: center;
}

.faq__title {
    color: var(--gray-800);
    font-size: var(--font-size-24);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}

/* ======================== Item ======================== */

.faq-item {
    overflow: hidden;
}

.faq-item__button {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-24);

    padding: var(--space-20) var(--space-24);

    border: none;
    border-radius: var(--space-16);

    background: #fff;

    cursor: pointer;

    font: inherit;

    transition: .25s;
}

.faq-item__button:hover {
    transform: translateY(-2px);
}

.faq-item__question {
    flex: 1;

    color: var(--gray-800);

    font-size: var(--font-size-20);
    font-weight: 400;

    line-height: 1.25;

    text-align: right;
}

.faq-item__icon {
    width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--gray-900);

    flex-shrink: 0;

    transition: .35s;
}

.faq-item__icon i {
    font-size: var(--font-size-16);
    line-height: 1;
}

/* ======================== Content ======================== */

.faq-item__content {

    max-height: 0;

    overflow: hidden;

    transition: max-height .35s ease;
}

.faq-item__answer {

    margin-top: var(--space-12);

    padding: var(--space-24);

    border-radius: var(--space-16);

    background: var(--gray-200);

    color: var(--gray-600);

    font-size: var(--font-size-20);

    line-height: 2;

    text-align: start;
}

/* ======================== Active ======================== */

.faq-item--active .faq-item__icon {
    transform: rotate(-180deg);
}

/* ======================== Responsive ======================== */

@media (max-width:991px) {

    .faq__title {
        font-size: var(--font-size-32);
    }

    .faq-item__button {
        padding: 20px 24px;
    }

    .faq-item__question {
        font-size: 20px;
    }

    .faq-item__answer {
        font-size: 18px;
    }

}

@media (max-width:767px) {
    .faq__header {
        margin-bottom: var(--space-20);

    }

    .faq {
        width: 100%;
    }

    .faq__title {
        font-size: var(--font-size-24);
    }

    .faq__list {
        gap: var(--space-12);
    }

    .faq-item__button {
        padding: var(--space-12);
        border-radius: var(--space-12);
    }

    .faq-item__question {
        font-size: var(--font-size-16);
        line-height: 1.8;
    }

    .faq-item__answer {
        padding: var(--space-12);
        border-radius: var(--space-12);

        font-size: var(--font-size-16);
    }

}




















































/* ======================== Footer ======================== */

.footer {
    position: relative;
    margin-top: var(--space-128);
}

.footer__container {

    position: relative;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: var(--space-64);

    padding: var(--space-48);

    background: var(--gray-50);

    border: 1px solid var(--gray-200);

    border-radius: 32px;

    overflow: visible;
    margin-bottom: var(--space-80);
}

/* ===== notch ===== */

.footer__container::before {

    content: "";

    position: absolute;

    top: -51.5px;
    left: 50%;

    width: 220px;
    height: 52px;

    transform: translateX(-50%);

    background: url("assets/img/1223.svg") center / cover no-repeat !important;


}

/* ===== scroll ===== */

.footer__scroll {

    position: absolute;

    left: 50%;
    top: -2px;

    transform: translate(-50%, -50%);

    width: var(--space-56);
    height: var(--space-56);
    border: none;

    border-radius: 50%;

    background: var(--color-primary);

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: .25s;

    z-index: 5;
}

.footer__scroll:hover {

    transform: translate(-50%, -54%);

    box-shadow: 0 16px 35px rgba(0, 131, 3, .25);

}

.footer__scroll i {

    font-size: 30px;

}

/* ===== brand ===== */

.footer__brand {

    flex: 0 0 36%;

    display: flex;
    flex-direction: column;

    text-align: right;

}

.footer__logo {

    display: inline-flex;

    margin-bottom: 28px;

}

.footer__logo img {

    width: 240px;
    height: auto;

}

.footer__title {

    color: var(--gray-800);

    font-size: var(--font-size-32);

    font-weight: 600;

    line-height: 1.25;

}

/* ===== links ===== */

.footer__links {

    flex: 1;

    display: flex;

    justify-content: flex-start;

    gap: 80px;

}

.footer__column {

    display: flex;

    flex-direction: column;

}

.footer__heading {

    margin-bottom: var(--space-20);

    color: var(--gray-800);

    font-size: var(--font-size-16);

    font-weight: 600;

}

.footer__menu,
.footer__contact-list {

    display: flex;

    flex-direction: column;

    gap: var(--space-20);

}

.footer__link {

    color: var(--gray-500);

    transition: .2s;

}

.footer__link:hover {

    color: var(--color-primary);

}

.footer__contact {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--gray-500);

}

.footer__contact:hover {

    color: var(--color-primary);

}

.footer__contact-icon {

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: var(--gray-200);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;

    transition: .2s;

}

.footer__contact:hover .footer__contact-icon {

    background: var(--color-primary);

    color: #fff;

}

/* ===== Responsive ===== */

@media(max-width:991px) {

    .footer__container {

        flex-direction: column;

        padding: var(--space-20);

        text-align: right;

    }

    .footer__menu,
    .footer__contact-list {


        gap: var(--space-12);

    }

    .footer__brand {

        align-items: center;

        text-align: center;

    }

    .footer__links {

        width: 100%;

        justify-content: space-between;

        gap: 32px;

        flex-wrap: wrap;

    }



    .footer__logo img {

        width: 180px;

    }

}

@media(max-width:640px) {
    .footer__container {
        gap: var(--space-20);
        padding-top: var(--space-40);
    }

    .footer__title {
        font-size: var(--font-size-24);
    }

    .footer__links {

        flex-direction: column;

        align-items: start;
        width: 100%;
        gap: 0px;

    }

    .footer__column {

        align-items: start;
        display: block;
        width: 100%;
        padding: var(--space-20) 0px;
    }

    .footer__links>* {
        border-bottom: 1px solid var(--gray-200);
    }

    .footer__links>*:last-child {
        border-bottom: none;
    }

    .footer__container {
        gap: var(--space-20);
        margin-bottom: var(--space-24);
    }





}





























.contact-social-hero {
    margin-bottom: 0px;
}






.contact-social-hero .social-hero__icon--3 {
    width: 284px;
    top: 70px;
    left: 43%;
}










.links {
    margin-top: -32px;
    margin-bottom: var(--space-192);
}

.links .container {
    max-width: 620px;
    margin: 0 auto;
}

.links__title {
    margin-bottom: var(--space-24);
    text-align: center;
    font-size: var(--space-24);
    font-weight: 600;
    color: var(--gray-800);
}

.links__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.link-card {

    display: flex;

    align-items: center;

    padding: var(--space-16);

    background: #fff;

    border-radius: var(--space-20);

    color: var(--gray-900);

    text-decoration: none;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .04);

    transition: .25s;

}

.link-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);

}

.link-card__icon {

    width: 46px;
    height: 46px;

    margin-left: 8px;

    border-radius: 50%;

    background: #f3f3f3;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;

    flex-shrink: 0;

}

.link-card__text {

    font-size: var(--font-size-16);

    font-weight: 500;

    white-space: nowrap;

}

.link-card__arrow {

    margin-right: auto;

    font-size: 22px;

}

.links__cta {

    margin-top: 36px;

    padding: var(--space-56) var(--space-32);

    border-radius: 24px;

    background: linear-gradient(90deg, #8BE68A 0%, #009900 100%);

    text-align: center;

}

.links__cta-title {

    margin-bottom: 28px;

    color: #fff;

    font-size: var(--font-size-24);

    font-weight: 700;

    line-height: 1.5;

}

.links__button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 28px;

    background: var(--gray-50);

    border-radius: 999px;

    color: var(--gray-800);
    font-size: var(--font-size-16);
    font-weight: 600;

    transition: .25s;

}

.links__button:hover {

    transform: translateY(-2px);

}










@media(max-width:640px) {
    .links {
        margin-top: -300px;
    }

    .links__cta-title {

        font-size: var(--font-size-20);


    }

    .link-card {


        padding: var(--space-12);

        border-radius: var(--space-16);

    }

    .links__cta {



        padding: var(--space-40) var(--space-20);



    }

    .links__list {

        gap: var(--space-8);
    }

}


























.capabilities {

    margin-top: 80px;

}

.capabilities__grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    grid-auto-rows: 170px;

    gap: 24px;

}

.capabilities__header {

    grid-column: span 2;

    display: flex;

    align-items: start;

    justify-content: flex-start;

}

.capabilities__title {

    margin: 0;

    font-size: var(--font-size-40);

    font-weight: 600;

    line-height: 1.25;

    text-align: right;

    color: var(--gray-800);

}

.capability-card {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: var(--space-12);

    padding: 24px;

    background: #fff;

    border-radius: 12px;

    text-decoration: none;

    color: var(--gray-900);

    box-shadow: 0 10px 35px rgba(0, 0, 0, .05);

    transition: .25s;

}

.capability-card:hover {

    transform: translateY(-4px);

}


.capability-card__icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 64px;

    height: 64px;

    flex-shrink: 0;

}

.capability-card__icon img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.capability-card__title {

    font-size: var(--font-size-20);

    line-height: 1.25;
    font-weight: 400;
    color: var(--gray-800);
    text-align: center;

}











@media (max-width:767px) {
    .capability-card__title {
        font-size: var(--font-size-20);
    }

    .capability-card {

        padding: var(--space-12);
    }

    .capability-card__icon {
        width: 48px;

        height: 48px;
    }

    .capabilities {

        margin-top: -40px;

    }

    .capabilities__grid {


        grid-template-columns: repeat(2, minmax(0, 1fr));



    }

    .capabilities__title {


        font-size: var(--font-size-24);


        text-align: center;


    }

    .capabilities__header {


        margin-top: 80px;


        align-items: center;
        justify-content: center;

    }

    .capabilities__grid {
        gap: var(--space-12);
    }

    .capabilities__grid {
        grid-auto-rows: 140px;
    }
}










































/* ======================== Pricing ======================== */

.pricing {


    margin: auto;

}

.pricing__header {

    margin-bottom: var(--space-32);
    text-align: center;

}

.pricing__subtitle {

    display: block;

    margin-bottom: 8px;

    color: var(--color-primary);

    font-size: var(--space-32);
    font-weight: 600;

}

.pricing__title {

    color: var(--gray-800);

    font-size: var(--space-32);

    font-weight: 700;

    line-height: 1.2;

}

.pricing__columns {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;

    align-items: start;

}

.pricing__column {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

/* ======================== Item ======================== */

.pricing-item {

    overflow: hidden;

}

.pricing-item__button {

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    padding: var(--space-20) var(--space-24);
    border: none;
    border-radius: var(--space-16);
    background: #fff;
    cursor: pointer;
    font: inherit;
    transition: .25s;

}

.pricing-item__button:hover {

    transform: translateY(-2px);

}

.pricing-item__question {

    flex: 1;

    color: var(--gray-800);

    font-size: var(--font-size-16);

    line-height: 1.8;

    text-align: right;

}

.pricing-item__icon {

    width: var(--space-16);

    height: var(--space-16);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: .35s;

}

.pricing-item__icon i {

    font-size: var(--font-size-16);

}

/* ======================== Content ======================== */

.pricing-item__content {

    max-height: 0;

    overflow: hidden;

    transition: max-height .35s ease;

}

.pricing-item__answer {

    margin-top: 12px;

    padding: var(--space-16);
    border-radius: var(--space-12);

    background: var(--gray-200);

    color: var(--gray-600);

    font-size: var(--font-size-14);

    line-height: 2;

}

/* ======================== Active ======================== */

.pricing-item--active .pricing-item__icon {

    transform: rotate(-180deg);

}

/* ======================== Responsive ======================== */

@media (max-width:991px) {

    .pricing__columns {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .pricing__title {

        font-size: var(--space-24);

    }

    .pricing__subtitle {

        font-size: var(--space-24);

    }

    .pricing-item__button {
        padding: var(--space-12);
        border-radius: var(--space-12);

    }


    .pricing-item__answer {

        font-size: 16px;

    }

}














































/* ======================== Branding ======================== */

.branding {

    position: relative;
    overflow: hidden;

}

.branding__container {

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-64);

}

.branding__content {

    position: relative;
    z-index: 5;

}

.branding__title {

    margin: 0;
    color: var(--gray-800);
    font-size: var(--font-size-40);
    font-weight: 600;
    line-height: 1.2;

}

.branding__description {

    margin-top: var(--space-32);
    max-width: 560px;
    color: var(--gray-600);
    font-size: var(--font-size-20);
    line-height: 1.5;

}

/* ======================== Visual ======================== */

.branding__visual {

    display: flex;
    justify-content: flex-start;

}

.branding-card {

    position: relative;
    width: 640px;
    height: 560px;

}

/* ======================== Main Image ======================== */

.branding-card__figure {

    position: relative;
    inset: 0;
    margin: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.branding-card__image {

    display: block;
    width: 85%;
    height: auto;

}

/* ======================== Floating Labels ======================== */

.branding-card__label {

    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    border-radius: var(--space-12);
    white-space: nowrap;
    z-index: 20;

}

.branding-card__label-text {

    font-size: var(--font-size-16);
    font-weight: 400;
    line-height: 1.25;
    text-align: center;

}

.branding-card__label--identity {

    top: 140px;
    right: 8px;
    background: color-mix(in srgb, var(--gray-200) 75%, transparent);
    color: var(--color-primary)
}

.branding-card__label--growth {

    top: 220px;
    right: -40px;
    background: #7B43D6;
    color: #fff;

}

/* ======================== Decorative Lights ======================== */

.branding-card__light {

    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    z-index: 1;
    pointer-events: none;

}

.branding-card__light--purple {

    width: 120px;
    height: 120px;
    background: var(--color-secondary);

    left: 90px;
    bottom: 70px;

}

.branding-card__light--green {

    width: 240px;
    height: 240px;
    background: rgba(143, 255, 152, .45);

    right: 70px;
    top: 80px;

}

/* ======================== SVG Arcs ======================== */

.branding-card__arc {

    position: absolute;
    z-index: 2;

}

.branding-card__arc--top {

    left: 20px;
    top: 80px;

}

.branding-card__arc--bottom {

    right: 0px;
    bottom: 80px;

}

.branding-card__arc svg {

    display: block;
    width: 100%;
    height: auto;

}

/* ======================== Hover ======================== */

.branding-card__image {

    transition: transform .45s ease;

}

.branding-card:hover .branding-card__image {

    transform: translateY(-6px);

}

.branding-card__label {

    transition: transform .35s ease;

}

.branding-card:hover .branding-card__label--identity {

    transform: translateY(-8px);

}

.branding-card:hover .branding-card__label--growth {

    transform: translateY(8px);

}

/* ======================== Responsive ======================== */

@media (max-width:1200px) {

    .branding__container {

        gap: 48px;

    }

    .branding-card {

        width: 520px;
        height: 455px;

    }

    .branding__title {

        font-size: 42px;

    }

}

@media (max-width:991px) {

    .branding__container {

        flex-direction: column-reverse;


    }

    .branding__content {

        order: 2;
        text-align: center;

    }

    .branding__description {

        margin-inline: auto;

    }

    .branding__visual {

        order: 1;
        justify-content: center;

    }

}

@media (max-width:767px) {
    .branding-card__light {

        position: absolute;
        border-radius: 50%;
        filter: blur(15px);
        z-index: 1;
        pointer-events: none;

    }

    .branding-card__light--purple {

        width: 75px;
        height: 75px;
        background: var(--color-secondary);

        left: 90px;
        bottom: 70px;

    }

    .branding-card__light--green {

        width: 75px;
        height: 75px;
        background: rgba(143, 255, 152, .45);

        right: 70px;
        top: 80px;

    }

    .branding-card {

        width: 100%;
        max-width: 360px;
        height: 315px;

    }

    .branding__title {

        font-size: var(--font-size-24);
    }

    .branding__description {


        line-height: 1.9;

    }

    .branding-card__label {

        padding: var(--space-8);
        border-radius: var(--space-8);

    }

    .branding-card__label-text {

        font-size: var(--font-size-14)
    }

    .branding-card__label--identity {

        top: 52px;
        right: 36px;

    }

    .branding-card__label--growth {

        top: 120px;
        right: 8px;

    }

}

/* ======================== Animations ======================== */

.branding-card__light--purple {

    animation: brandingPurpleLight 10s ease-in-out infinite;

}

.branding-card__light--green {

    animation: brandingGreenLight 8s ease-in-out infinite;

}

.branding-card__arc--top {

    animation: brandingArcTop 9s ease-in-out infinite;

}

.branding-card__arc--bottom {

    animation: brandingArcBottom 11s ease-in-out infinite;

}

/* ======================== Keyframes ======================== */

@keyframes brandingPurpleLight {

    0% {

        transform: translate(0, 0) scale(1);

        opacity: .45;

    }

    50% {

        transform: translate(-20px, -12px) scale(1.08);

        opacity: .7;

    }

    100% {

        transform: translate(0, 0) scale(1);

        opacity: .45;

    }

}

@keyframes brandingGreenLight {

    0% {

        transform: translate(0, 0) scale(1);

        opacity: .45;

    }

    50% {

        transform: translate(20px, 16px) scale(1.12);

        opacity: .75;

    }

    100% {

        transform: translate(0, 0) scale(1);

        opacity: .45;

    }

}

@keyframes brandingArcTop {

    0% {

        transform: translateY(0) rotate(0deg);

    }

    50% {

        transform: translateY(-12px) rotate(-5deg);

    }

    100% {

        transform: translateY(0) rotate(0deg);

    }

}

@keyframes brandingArcBottom {

    0% {

        transform: translateY(0) rotate(0deg);

    }

    50% {

        transform: translateY(14px) rotate(6deg);

    }

    100% {

        transform: translateY(0) rotate(0deg);

    }

}













































/* ======================== Vision ======================== */

.vision {

    position: relative;
    overflow: hidden;

}


.vision__container {

    margin-top: var(--space-80);

    display: flex;
    flex-direction: column;
    align-items: center;

}


.vision__content {

    position: relative;
    z-index: 10;

    text-align: center;

}


.vision__title {

    margin: 0;

    color: var(--gray-900);

    font-size: var(--font-size-40);
    font-weight: 700;
    line-height: 1.2;

}


.vision__title-highlight {

    color: var(--color-secondary);

}


.vision__description {

    max-width: 800px;

    margin-top: var(--space-24);
    margin-inline: auto;

    color: var(--gray-600);

    font-size: var(--font-size-20);
    line-height: 2;

}


/* ======================== Visual ======================== */

.vision__visual {

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    margin-top: var(--space-40);

}


/* ======================== Vision Card ======================== */

.vision-card {

    position: relative;

    width: 100%;
    max-width: 700px;
    height: 500px;

    isolation: isolate;

    overflow: visible;

}


/* ======================== Main Image ======================== */

.vision-card__figure {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    margin: 0;

    pointer-events: none;

}


.vision-card__image {

    display: block;

    width: 100%;
    max-width: 620px;

    height: auto;

    object-fit: contain;

    transition: transform .45s ease;

}


.vision-card:hover .vision-card__image {

    transform: translateY(-8px);

}


/* ======================== Lights ======================== */

.vision-card__light {

    position: absolute;

    border-radius: 50%;

    filter: blur(30px);

    pointer-events: none;

    z-index: 1;

    will-change: transform;

}


.vision-card__light--purple {

    width: 200px;
    height: 200px;

    left: 100px;
    bottom: 150px;

    background: rgba(176, 113, 255, .50);

    animation:
        visionPurpleLight 9s ease-in-out infinite;

}


.vision-card__light--green {

    width: 200px;
    height: 200px;

    right: 100px;
    bottom: 60px;

    background: rgba(152, 255, 164, .50);

    animation:
        visionGreenLight 10s ease-in-out infinite;

}


/* ======================== Arcs ======================== */

.vision-card__arc {

    position: absolute;

    z-index: 2;

    pointer-events: none;

    will-change: transform;

}


.vision-card__arc--top {

    top: 120px;
    right: 120px;

    animation:
        visionArcTop 10s ease-in-out infinite;

}


.vision-card__arc--bottom {

    bottom: 40px;
    left: 120px;

    animation:
        visionArcBottom 12s ease-in-out infinite;

}


.vision-card__arc svg,
.vision-card__arc img {

    display: block;

    width: 100%;
    height: auto;

}


/* ======================== Hover ======================== */

.vision-card__light,
.vision-card__arc {

    transition:
        transform .35s ease;

}


.vision-card:hover .vision-card__arc--top {

    transform:
        translateY(-10px) rotate(-5deg);

}


.vision-card:hover .vision-card__arc--bottom {

    transform:
        translateY(10px) rotate(6deg);

}


.vision-card:hover .vision-card__light--purple {

    transform: scale(1.08);

}


.vision-card:hover .vision-card__light--green {

    transform: scale(1.08);

}


/* ======================== Animations ======================== */

@keyframes visionPurpleLight {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

        opacity: .45;

    }

    50% {

        transform:
            translate(-25px, -18px) scale(1.12);

        opacity: .7;

    }

}


@keyframes visionGreenLight {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

        opacity: .45;

    }

    50% {

        transform:
            translate(22px, 20px) scale(1.1);

        opacity: .75;

    }

}


@keyframes visionArcTop {

    0%,
    100% {

        transform:
            translateY(0) rotate(0);

    }

    50% {

        transform:
            translateY(-16px) rotate(-6deg);

    }

}


@keyframes visionArcBottom {

    0%,
    100% {

        transform:
            translateY(0) rotate(0);

    }

    50% {

        transform:
            translateY(14px) rotate(6deg);

    }

}


/* ======================== Responsive ======================== */

@media (max-width: 1200px) {

    .vision-card {

        max-width: 620px;
        height: 580px;

    }


    .vision__title {

        font-size: 44px;

    }

}


/* ======================== Tablet ======================== */

@media (max-width: 991px) {

    .vision-card {

        max-width: 520px;
        height: 500px;

    }


    .vision__title {

        font-size: 38px;

    }


    .vision__description {

        max-width: 680px;

    }

}


/* ======================== Mobile ======================== */

@media (max-width: 767px) {
    .vision-card__light {

        position: absolute;

        border-radius: 50%;

        filter: blur(10px);

        pointer-events: none;

        z-index: 1;

        will-change: transform;

    }


    .vision__container {

        margin-top: var(--space-48);

    }


    .vision__title {

        font-size: 30px;

    }


    .vision__description {

        margin-top: var(--space-20);

        padding-inline: var(--space-16);

        font-size: 16px;
        line-height: 1.9;

    }


    .vision__visual {

        margin-top: var(--space-32);

    }


    .vision-card {

        width: 100%;
        max-width: 360px;
        height: 300px;

    }


    .vision-card__image {

        width: 100%;
        max-width: 360px;

    }


    .vision-card__light--purple {

        width: 180px;
        height: 180px;

        left: 50px;
        bottom: 110px;
        background: rgba(176, 113, 255, .25);

    }


    .vision-card__light--green {

        width: 180px;
        height: 180px;

        right: 50px;
        bottom: 40px;
        background: rgba(152, 255, 164, .25);
    }





    .vision-card__arc--top {

        top: 80px;
        right: 40px;

    }


    .vision-card__arc--bottom {

        bottom: 30px;
        left: 40px;

    }

}















































.about {

    position: relative;

    overflow: hidden;

    padding: var(--space-64) 0 0 0;

}

.about__container {

    width: min(1200px, 92%);

    margin-inline: auto;

}

.about__intro {

    display: flex;

    flex-direction: column;

    gap: var(--space-20);

    margin-bottom: var(--space-80);

}

.about__heading {

    display: flex;

    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-12);

}

.about__eyebrow {


    font-size: var(--font-size-24);

    font-weight: 600;
    line-height: 1.25;

    color: var(--color-primary);

}

.about__title {

    margin: 0;

    font-size: var(--font-size-24);

    font-weight: 600;

    line-height: 1.25;

    color: var(--gray-800);

}

.about__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-24);

}

.about__text {

    margin: 0;
    font-weight: 400;

    font-size: var(--font-size-20);
    text-align: justify;
    line-height: 1.75;

    color: var(--gray-600);

}

.about__quote {

    display: flex;

    align-items: flex-start;

    gap: var(--space-16);

}

.about__quote-line {

    width: 3px;

    min-width: 3px;

    border-radius: 100px;

    background: #059A18;

    align-self: stretch;

}

.about__quote-text {


    font-weight: 400;

    font-size: var(--font-size-20);
    text-align: justify;
    line-height: 1.75;

    color: var(--gray-600);

}

.about__services {

    margin-bottom: var(--space-80);

}

.about__services-content {

    background: color-mix(in srgb, var(--gray-50) 75%, transparent);
    border: color-mix(in srgb, var(--gray-400) 20%, transparent) 1px solid;
    ;
    border-radius: var(--space-24);

    padding: var(--space-24);

    display: flex;

    flex-direction: row;

    gap: var(--space-32);


}

.about__services-header {
    flex: 0 0 15%;
    display: flex;

    align-items: start;
    flex-direction: column;

    gap: 20px;

}

.about__services-icon {

    width: 72px;

    height: 72px;

    object-fit: contain;

    flex-shrink: 0;

}

.about__services-eyebrow {

    display: block;

    margin-bottom: 10px;

    font-size: 16px;

    font-weight: 700;

    color: #6A39E4;

}

.about__services-title {

    margin: 0;

    font-size: var(--font-size-24);

    font-weight: 600;

    line-height: 1.5;

    color: var(--gray-800);

}

.about__tags {

    display: flex;
    gap: var(--space-24);
    flex-wrap: wrap;



}

.about__tag {

    position: relative;

    padding-right: 18px;

}

.about__tag::before {

    content: "";

    position: absolute;

    right: 0;

    top: 50%;

    width: 7px;

    height: 7px;

    background-color: #d1d1d1;

    border-radius: 50%;

    transform: translateY(-50%);

}

.about__tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;


    font-size: var(--font-size-16);

    font-weight: 400;


    text-decoration: none;


}



.about__story {

    display: flex;

    flex-direction: column;



}

.about__story-content {

    display: grid;


    gap: 48px;

    align-items: start;

}







.about__text+.about__text {

    margin-top: 24px;

}

.about__tag:focus-visible,

.about__contact:focus-visible {

    outline: 2px solid #059A18;

    outline-offset: 4px;

}

.about__tag,

.about__menu-link,

.about__contact {

    -webkit-tap-highlight-color: transparent;

}

.about__tag,

.about__contact {

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}

.about__tag:hover,

.about__contact:hover {

    transform: translateY(-2px);

    box-shadow: 0 14px 32px rgba(5, 154, 24, .16);

}



.about__heading,

.about__content,

.about__services-content,

.about__story {

    position: relative;

    z-index: 2;

}

.about * {

    box-sizing: border-box;

}

.about a {

    text-decoration: none;

    color: inherit;

}

.about img {

    display: block;
    height: 80%;
    width: 80%;


}

.about ul,

.about ol {

    margin: 0;

    padding: 0;

    list-style: none;

}

.about p,

.about h2,

.about h3,

.about span {

    margin: 0;

}

.about__intro>*,

.about__services>*,

.about__story>* {

    width: 100%;

}

.about__services-header>div {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.about__story-content>* {

    min-width: 0;

}

.about__tag {

    user-select: none;

    cursor: pointer;

}

.about__services-icon {

    pointer-events: none;

}

.about__quote-line {

    flex-shrink: 0;

}

.about__services-content {

    position: relative;

    overflow: hidden;

}

.about__services-content>* {

    position: relative;

    z-index: 2;

}

.about__services-content::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background: linear-gradient(135deg,
            rgba(255, 255, 255, .85),
            rgba(233, 233, 233, .6));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;

}

.about__tags-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.about__tag {



    font-family: inherit;


    line-height: 1;

}

.about__tag:active {

    transform: scale(.98);

}

.about__quote {

    max-width: 900px;

}

.about__services-header {


    max-width: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about__services-title {

    letter-spacing: -.03em;

}

.about__title {

    letter-spacing: -.04em;

}

.about__story {


    margin-inline: auto;

}

.about__story-content {

    align-items: stretch;

}

.about__story-content>.about__text {

    display: flex;

    align-items: flex-start;

}

.about__services {

    position: relative;

}



.about__heading--center .about__eyebrow {

    order: 2;

}

.about__heading--center .about__title {

    order: 1;

}

.about__heading--center {

    gap: 18px;

}

.about__story .about__text {

    text-wrap: pretty;

}

.about__text {

    text-wrap: pretty;

}

.about__services-title {

    text-wrap: balance;

}

.about__title {

    text-wrap: balance;

}

@media (max-width: 767px) {


    .about {

        position: relative;

        overflow: hidden;

        padding: var(--space-40) 0 0 0;

    }

    .about__services-content {


        flex-direction: column;




    }

    .about__services-content {
        gap: 0;
    }

    .about__services-header {
        width: 30%;
    }

    .about__services {

        margin-bottom: var(--space-20);

    }

    .about__intro {


        margin-bottom: var(--space-20);

    }

}




















/* پست تایپ نمونه کار ها */

/* =========================================================
   Portfolio Archive
========================================================= */

.portfolio-archive {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   Hero
========================================================= */

.portfolio-hero {
    position: relative;
    padding-top: var(--space-40);
    overflow: hidden;
}


.portfolio-hero__container {
    position: relative;
    display: flex;
    align-items: center;


    min-height: 480px;

}


/* =========================================================
   Hero Visual
========================================================= */

.portfolio-hero__visual {
    position: absolute;

    width: 100%;
    height: 520px;

    order: 1;
}


.portfolio-hero__content {
    position: absolute;
    bottom: 40px;
    z-index: 10;
    display: flex;
    align-items: center;
    flex-direction: column;
    order: 2;

    text-align: right;

    padding-inline-start: var(--space-24);
}


.portfolio-hero__title {
    margin: 0;
    max-width: 70%;
    color: var(--gray-900);

    font-size: var(--font-size-40);

    font-weight: 700;

    line-height: 1.5;

    text-align: center;
}


.portfolio-hero__title-accent {
    font-weight: 700;
}


.portfolio-hero__title-accent--green {
    color: #009900;
}


.portfolio-hero__title-accent--purple {
    color: #7438c7;
}


.portfolio-hero__description {

    margin-top: var(--space-12);


    color: var(--gray-600);

    font-size: var(--font-size-16);

    font-weight: 400;

    line-height: 2;

    text-align: center;
}


/* =========================================================
   Hero Circles
========================================================= */

.portfolio-hero__circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;
}


.portfolio-hero__circle--outer {
    width: 680px;
    height: 680px;

    top: 10px;
    left: 50%;

    transform: translateX(-50%);

    border: 1px solid rgba(0, 0, 0, .035);

    box-shadow:
        0 0 0 32px rgba(0, 0, 0, .015),
        0 0 80px rgba(0, 0, 0, .035);

    animation:
        portfolioHeroCircleOuter 10s ease-in-out infinite;
}


.portfolio-hero__circle--inner {
    width: 580px;
    height: 580px;

    top: 45px;
    left: 50%;

    transform: translateX(-50%);

    border: 1px solid rgba(0, 0, 0, .035);

    animation:
        portfolioHeroCircleInner 8s ease-in-out infinite;
}


/* =========================================================
   Hero Images
========================================================= */

.portfolio-hero__image {
    position: absolute;

    z-index: 5;

    margin: 0;

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .08);
}


.portfolio-hero__image img {
    display: block;

    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}


/* Center */

.portfolio-hero__image--center {
    width: 180px;
    height: 240px;
    padding: 10px;
    top: 20px;
    left: 50%;
    border: 1px solid var(--gray-200);

    transform: translateX(-50%);

    z-index: 8;
    background: color-mix(in srgb, var(--gray-300) 25%, transparent);

    animation:
        portfolioHeroCenter 7s ease-in-out infinite;
}


/* Left */

.portfolio-hero__image--left {
    width: 150px;
    padding: 10px;
    height: 170px;
    border: 1px solid var(--gray-200);
    top: 64px;
    left: calc(50% - 300px);
    background: color-mix(in srgb, var(--gray-300) 25%, transparent) top: 64px;

    transform:
        rotate(-25deg);

    animation:
        portfolioHeroLeft 8s ease-in-out infinite;
}


/* Right */

.portfolio-hero__image--right {
    width: 150px;
    height: 170px;

    padding: 10px;

    border: 1px solid var(--gray-200);
    top: 64px;

    background: color-mix(in srgb, var(--gray-300) 25%, transparent);
    right: calc(50% - 300px);

    transform:
        rotate(25deg);

    animation:
        portfolioHeroRight 9s ease-in-out infinite;
}


/* =========================================================
   Category Filter
========================================================= */

.portfolio-filter {
    position: relative;

    z-index: 30;

    width: min(calc(100% - 48px),
            1120px);

    margin: -15px auto 0;
}


.portfolio-filter__track {
    display: flex;

    align-items: center;

    gap: var(--space-8);

    width: 100%;

    padding: 8px;

    overflow-x: auto;
    overflow-y: hidden;

    border-radius: 999px;

    background: #fff;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .06);

    scrollbar-width: none;

    direction: rtl;

    scroll-behavior: smooth;
}


.portfolio-filter__track::-webkit-scrollbar {
    display: none;
}


.portfolio-filter__item {
    flex: 0 0 auto;

    border: 0;

    padding:
        var(--space-12) var(--space-20);

    border-radius: 999px;

    background: transparent;

    color: var(--gray-600);

    font-family: inherit;

    font-size: var(--font-size-14);

    font-weight: 400;

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


.portfolio-filter__item:hover {
    color: var(--gray-900);
}


.portfolio-filter__item--active {
    background: var(--color-primary);

    color: var(--gray-100);

    box-shadow:
        0 8px 18px rgba(0, 153, 0, .25);
}


.portfolio-filter__item--active:hover {
    color: var(--gray-100);
}


/* =========================================================
   Showcase
========================================================= */

.portfolio-showcase {
    position: relative;

    padding-top: var(--space-96);

    padding-bottom: var(--space-96);
}


.portfolio-showcase__container {
    width: min(calc(100% - 48px),
            1120px);

    margin-inline: auto;
}


.portfolio-showcase__header {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    margin-bottom: var(--space-32);
}


.portfolio-showcase__title {
    margin: 0;

    color: var(--gray-900);

    font-size: var(--font-size-28);

    font-weight: 700;

    line-height: 1.3;

    text-align: right;
}


/* =========================================================
   Grid
========================================================= */

.portfolio-showcase__grid {
    display: grid;

    grid-template-columns:
        repeat(3,
            minmax(0, 1fr));

    gap: var(--space-20);
}


/* =========================================================
   Card
========================================================= */

.portfolio-showcase__item {
    min-width: 0;
}


.portfolio-showcase__card {
    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

    padding: var(--space-12);

    overflow: hidden;

    border:
        1px solid var(--gray-200);

    border-radius: var(--space-20);

    background: var(--gray-50);

    color: inherit;

    text-decoration: none;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.portfolio-showcase__card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .08);
}


/* =========================================================
   Card Image
========================================================= */

.portfolio-showcase__image {
    position: relative;

    width: 100%;

    height: 230px;

    overflow: hidden;

    border-radius: var(--space-12);

    background: var(--gray-200);
}


.portfolio-showcase__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .55s ease;
}


.portfolio-showcase__card:hover .portfolio-showcase__image img {
    transform: scale(1.05);
}


/* =========================================================
   Card Content
========================================================= */

.portfolio-showcase__content {
    padding:
        var(--space-16) var(--space-4) var(--space-8);

    text-align: right;
}


.portfolio-showcase__item-title {
    margin: 0;

    color: var(--gray-900);

    font-size: var(--font-size-20);

    font-weight: 700;

    line-height: 1.4;

    text-align: right;
}


.portfolio-showcase__category {
    margin-top: var(--space-4);

    color: var(--gray-600);

    font-size: var(--font-size-14);

    font-weight: 400;

    line-height: 1.5;

    text-align: right;
}


/* =========================================================
   Arrow
========================================================= */

.portfolio-showcase__arrow {
    position: absolute;

    left: 44px;
    top: 210px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: var(--space-48);
    height: var(--space-48);

    border:
        2px solid var(--gray-100);

    border-radius: 999px;

    background: var(--gray-100);

    color: var(--gray-800);

    font-size: var(--font-size-20);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .12);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.portfolio-showcase__card:hover .portfolio-showcase__arrow {
    background: var(--color-primary);

    color: var(--gray-100);

    transform: translateX(-5px);
}


/* =========================================================
   More Button
========================================================= */

.portfolio-showcase__more {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: var(--space-8);

    margin:
        var(--space-40) auto 0;

    padding:
        var(--space-12) var(--space-24);

    border: 0;

    border-radius: 999px;

    background: var(--color-primary);

    color: var(--gray-100);

    font-family: inherit;

    font-size: var(--font-size-14);

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.portfolio-showcase__more:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0, 153, 0, .2);
}


.portfolio-showcase__more[hidden] {
    display: none;
}


/* =========================================================
   Loading
========================================================= */

.portfolio-showcase__loading {
    display: none;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: var(--space-24);
}


.portfolio-showcase__loading--active {
    display: flex;
}


.portfolio-showcase__loading span {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--color-primary);

    animation:
        portfolioLoading 1s ease-in-out infinite;
}


.portfolio-showcase__loading span:nth-child(2) {
    animation-delay: .15s;
}


.portfolio-showcase__loading span:nth-child(3) {
    animation-delay: .3s;
}


/* =========================================================
   Empty
========================================================= */

.portfolio-showcase__empty {
    grid-column: 1 / -1;

    padding: var(--space-64);

    border-radius: var(--space-20);

    background: var(--gray-100);

    color: var(--gray-600);

    text-align: center;

    font-size: var(--font-size-16);
}


/* =========================================================
   Hero Keyframes
========================================================= */

@keyframes portfolioHeroCenter {

    0% {
        transform:
            translateX(-50%) translateY(0);
    }

    50% {
        transform:
            translateX(-50%) translateY(-10px);
    }

    100% {
        transform:
            translateX(-50%) translateY(0);
    }

}


@keyframes portfolioHeroLeft {

    0% {
        transform:
            rotate(-25deg) translateY(0);
    }

    50% {
        transform:
            rotate(-20deg) translateY(-12px);
    }

    100% {
        transform:
            rotate(-25deg) translateY(0);
    }

}


@keyframes portfolioHeroRight {

    0% {
        transform:
            rotate(25deg) translateY(0);
    }

    50% {
        transform:
            rotate(20deg) translateY(-10px);
    }

    100% {
        transform:
            rotate(25deg) translateY(0);
    }

}


@keyframes portfolioHeroCircleOuter {

    0% {
        transform:
            translateX(-50%) scale(1);
    }

    50% {
        transform:
            translateX(-50%) scale(1.025);
    }

    100% {
        transform:
            translateX(-50%) scale(1);
    }

}


@keyframes portfolioHeroCircleInner {

    0% {
        transform:
            translateX(-50%) translateY(0);
    }

    50% {
        transform:
            translateX(-50%) translateY(8px);
    }

    100% {
        transform:
            translateX(-50%) translateY(0);
    }

}


@keyframes portfolioLoading {

    0%,
    100% {
        transform: translateY(0);
        opacity: .35;
    }

    50% {
        transform: translateY(-5px);
        opacity: 1;
    }

}


/* =========================================================
   Responsive
========================================================= */


@media (max-width: 767px) {

    .portfolio-hero {
        padding-top: var(--space-24);
    }


    .portfolio-hero__container {
        width: 100%;
    }


    .portfolio-hero__visual {
        height: 330px;
    }

    .portfolio-hero__container {

        min-height: 360px;
    }

    .portfolio-hero__circle--outer {
        width: 310px;
        height: 310px;

        box-shadow:
            0 0 0 16px rgba(0, 0, 0, .015),
            0 0 80px rgba(0, 0, 0, .035);

        animation:
            portfolioHeroCircleOuter 10s ease-in-out infinite;
    }


    .portfolio-hero__circle--inner {
        width: 265px;
        height: 265px;
    }


    .portfolio-hero__image--center {
        width: 135px;
        height: 175px;

        top: 20px;
    }


    .portfolio-hero__image--left {
        width: 100px;
        height: 115px;

        top: 55px;

        left: calc(50% - 135px);
    }


    .portfolio-hero__image--right {
        width: 100px;
        height: 115px;

        top: 55px;

        right: calc(50% - 135px);
    }


    .portfolio-hero__title {
        font-size: var(--font-size-24);
        width: 100%;
        line-height: 1.6;
    }

    .portfolio-hero__content {

        padding-inline-start: unset;
    }

    .portfolio-hero__description {
        margin-top: var(--space-16);

        font-size: var(--font-size-14);

        line-height: 1.9;
    }


    .portfolio-filter {
        width: calc(100% - 24px);

        margin-top: var(--space-20);
    }


    .portfolio-filter__track {
        padding: 6px;

        gap: 4px;
    }


    .portfolio-filter__item {
        padding:
            11px 16px;

        font-size: 13px;
    }


    .portfolio-showcase {
        padding-top: var(--space-48);
        padding-bottom: var(--space-64);
    }


    .portfolio-showcase__container {
        width: 90%;
    }


    .portfolio-showcase__header {
        margin-bottom: var(--space-20);
    }


    .portfolio-showcase__title {
        font-size: 24px;
    }


    .portfolio-showcase__grid {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));

        gap: 12px;
    }


    .portfolio-showcase__card {
        padding: 8px;

        border-radius: 18px;
    }


    .portfolio-showcase__image {
        height: 145px;

        border-radius: 12px;
    }


    .portfolio-showcase__content {
        padding:
            12px 3px 6px;
    }


    .portfolio-showcase__item-title {
        font-size: 15px;
    }


    .portfolio-showcase__category {
        margin-top: 3px;

        font-size: 11px;

        line-height: 1.6;
    }


    .portfolio-showcase__arrow {
        top: 125px;
        left: 12px;

        width: 38px;
        height: 38px;

        font-size: 16px;
    }


    .portfolio-showcase__more {
        margin-top: var(--space-32);
    }

    .portfolio-hero__title {
        max-width: 100%;
        width: 100%;
    }

    .portfolio-hero__content {
        background: linear-gradient(to bottom,
                transparent 0%,
                var(--gray-100) 50%,
                var(--gray-100) 100%);
        top: 220px;
        bottom: unset;
    }

}


@media (max-width: 420px) {

    .portfolio-hero__visual {
        height: 290px;
    }


    .portfolio-hero__image--center {
        width: 120px;
        height: 155px;
    }


    .portfolio-hero__image--left {
        width: 88px;
        height: 100px;

        left: calc(50% - 120px);
    }


    .portfolio-hero__image--right {
        width: 88px;
        height: 100px;

        right: calc(50% - 120px);
    }


    .portfolio-showcase__grid {
        gap: 10px;
    }


    .portfolio-showcase__image {
        height: 125px;
    }


    .portfolio-showcase__arrow {
        top: 106px;

        width: 34px;
        height: 34px;
    }

}



















/* توضیحات تیم */




/* =========================================================
   Team Member Page
========================================================= */

.vaiona-team-member-page {


    min-height: 100vh;


}


.vaiona-team-member-page *,
.vaiona-team-member-page *::before,
.vaiona-team-member-page *::after {

    box-sizing: border-box;

}


/* =========================================================
   Main Page
========================================================= */

.team-member-page {

    position: relative;

    min-height: 100vh;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    direction: rtl;

    padding-top: 94px;
    padding-bottom: 80px;


}


/* =========================================================
   Background
========================================================= */

.team-member-page__background {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    overflow: hidden;

}


.team-member-page__background-light {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;

}


.team-member-page__background-light--purple {

    width: 200px;
    height: 200px;

    left: 200px;
    bottom: 200px;

    background:
        rgba(213, 184, 255, .40);

    animation:
        teamBackgroundPurple 11s ease-in-out infinite;

}


.team-member-page__background-light--green {

    width: 150px;
    height: 150px;

    right: 200px;
    top: 200px;

    background:
        rgba(191, 255, 200, .40);

    animation:
        teamBackgroundGreen 13s ease-in-out infinite;

}


/* =========================================================
   Main Container
========================================================= */

.team-member-page__container {

    position: relative;

    z-index: 10;

    width: 520px;
    max-width: calc(100% - 32px);

    margin-inline: auto;

}


/* =========================================================
   Top Bar
========================================================= */

.team-member-page__top {

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;

    direction: ltr;

}


/* =========================================================
   Logo
========================================================= */

.team-member-page__logo {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 102px;
    height: 35px;

    padding: 6px 11px;

    border-radius: 9px;

    background: rgba(255, 255, 255, .97);

    text-decoration: none;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, .035);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.team-member-page__logo:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .08);

}


.team-member-page__logo img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

}


/* =========================================================
   Share Button
========================================================= */

.team-member-page__share {

    width: 35px;
    height: 35px;

    padding: 0;

    border: 0;

    border-radius: 9px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    color: #111;

    background: rgba(255, 255, 255, .97);

    box-shadow:
        0 4px 15px rgba(0, 0, 0, .035);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.team-member-page__share:hover {

    transform: translateY(-2px);

    background: #fff;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .09);

}


.team-member-page__share:active {

    transform: translateY(0);

}


.team-member-page__share svg {

    display: block;

    width: 19px;
    height: 19px;

}


/* =========================================================
   Profile Card
========================================================= */

.team-member-page__profile {

    position: relative;

    width: 100%;

    min-height: 322px;

    padding-top: 32px;
    padding-right: 38px;
    padding-left: 38px;
    padding-bottom: 31px;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow: hidden;

    border-radius: 23px;

    background: rgba(255, 255, 255, .98);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .035);

}


/* =========================================================
   Profile Image
========================================================= */

.team-member-page__image-wrap {

    position: relative;

    z-index: 10;

    width: 110px;
    height: 110px;

    margin: 0 0 22px;

    overflow: hidden;

    border-radius: 23px;

    background: #ededed;

}


.team-member-page__image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

}


/* =========================================================
   Name
========================================================= */

.team-member-page__name {

    position: relative;

    z-index: 10;

    margin: 0;

    color: #111;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.35;

    text-align: center;

}


/* =========================================================
   Role
========================================================= */

.team-member-page__role {

    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    margin-top: 7px;

    padding:
        5px 18px;

    border:
        1px solid rgba(0, 0, 0, .12);

    border-radius: 999px;

    color: #333;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.5;

    text-align: center;

}


/* =========================================================
   Description
========================================================= */

.team-member-page__description {

    position: relative;

    z-index: 10;

    max-width: 310px;

    margin: 10px 0 0;

    color: #333;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.85;

    text-align: center;

}


/* =========================================================
   Decorative Arcs
========================================================= */

.team-member-page__arc {

    position: absolute;

    z-index: 2;

    pointer-events: none;

}


.team-member-page__arc svg {

    display: block;

    width: 100%;
    height: auto;

}


.team-member-page__arc--purple {

    width: 430px;

    left: -315px;
    top: 133px;

    opacity: .76;

    transform: rotate(4deg);

    animation:
        teamArcPurple 9s ease-in-out infinite;

}


.team-member-page__arc--green {

    width: 410px;

    right: -330px;
    top: 14px;

    opacity: .75;

    transform: rotate(-7deg);

    animation:
        teamArcGreen 10s ease-in-out infinite;

}


/* =========================================================
   Socials
========================================================= */

.team-member-page__socials {

    position: relative;

    z-index: 10;

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 11px;

    margin-top: 24px;

}


/* =========================================================
   Social Item
========================================================= */

.team-member-page__social {

    position: relative;

    width: 100%;
    min-height: 63px;

    display: flex;

    align-items: center;

    direction: ltr;

    padding:
        9px 14px 9px 13px;

    border-radius: 17px;

    background: rgba(255, 255, 255, .98);

    color: #111;

    text-decoration: none;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .025);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.team-member-page__social:hover {

    transform: translateY(-2px);

    background: #fff;

    box-shadow:
        0 11px 27px rgba(0, 0, 0, .08);

}


.team-member-page__social:active {

    transform: translateY(0);

}


/* =========================================================
   Social Arrow
========================================================= */

.team-member-page__social-arrow {

    width: 29px;
    height: 29px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #171717;

}


.team-member-page__social-arrow svg {

    display: block;

    width: 19px;
    height: 19px;

}


/* =========================================================
   Social Title
========================================================= */

.team-member-page__social-title {

    flex: 1 1 auto;

    direction: rtl;

    text-align: right;

    padding-right: 9px;

    color: #151515;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.4;

    white-space: nowrap;

}


.team-member-page__social-subtitle {

    font-size: 13px;

    font-weight: 400;

}


/* =========================================================
   Social Icon
========================================================= */

.team-member-page__social-icon {

    width: 36px;
    height: 36px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;

    background: #ededed;

}


.team-member-page__social-icon img {

    display: block;

    width: 21px;
    height: 21px;

    object-fit: contain;

}


/* =========================================================
   Copy Toast
========================================================= */

.team-member-page__copy-toast {

    position: fixed;

    z-index: 9999;

    left: 50%;

    bottom: 30px;

    transform:
        translate(-50%, 20px);

    min-width: 135px;

    padding:
        12px 22px;

    border-radius: 999px;

    background: rgba(20, 20, 20, .94);

    color: #fff;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.5;

    text-align: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .16);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

}


.team-member-page__copy-toast.is-visible {

    opacity: 1;

    visibility: visible;

    transform:
        translate(-50%, 0);

}


/* =========================================================
   Animations
========================================================= */

@keyframes teamBackgroundPurple {

    0% {

        transform:
            translate3d(0, 0, 0) scale(1);

        opacity: .65;

    }

    50% {

        transform:
            translate3d(35px, -25px, 0) scale(1.1);

        opacity: .9;

    }

    100% {

        transform:
            translate3d(0, 0, 0) scale(1);

        opacity: .65;

    }

}


@keyframes teamBackgroundGreen {

    0% {

        transform:
            translate3d(0, 0, 0) scale(1);

        opacity: .6;

    }

    50% {

        transform:
            translate3d(-30px, 25px, 0) scale(1.08);

        opacity: .85;

    }

    100% {

        transform:
            translate3d(0, 0, 0) scale(1);

        opacity: .6;

    }

}


@keyframes teamArcPurple {

    0% {

        transform:
            translate3d(0, 0, 0) rotate(4deg);

    }

    50% {

        transform:
            translate3d(10px, -12px, 0) rotate(1deg);

    }

    100% {

        transform:
            translate3d(0, 0, 0) rotate(4deg);

    }

}


@keyframes teamArcGreen {

    0% {

        transform:
            translate3d(0, 0, 0) rotate(-7deg);

    }

    50% {

        transform:
            translate3d(-10px, 12px, 0) rotate(-3deg);

    }

    100% {

        transform:
            translate3d(0, 0, 0) rotate(-7deg);

    }

}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 767px) {

    .team-member-page {

        padding-top: 45px;
        padding-bottom: 45px;

    }


    .team-member-page__container {

        width: 100%;

        max-width:
            calc(100% - 28px);

    }


    .team-member-page__top {

        margin-bottom: 18px;

    }


    .team-member-page__logo {

        width: 94px;
        height: 33px;

        border-radius: 8px;

    }


    .team-member-page__share {

        width: 33px;
        height: 33px;

        border-radius: 8px;

    }


    .team-member-page__profile {

        min-height: 0;

        padding-top: 28px;
        padding-right: 24px;
        padding-left: 24px;
        padding-bottom: 27px;

        border-radius: 20px;

    }


    .team-member-page__image-wrap {

        width: 105px;
        height: 105px;

        margin-bottom: 19px;

        border-radius: 21px;

    }


    .team-member-page__name {

        font-size: 25px;

    }


    .team-member-page__role {

        font-size: 11px;

    }


    .team-member-page__description {

        max-width: 290px;

        font-size: 11px;

        line-height: 1.9;

    }


    .team-member-page__arc--purple {

        left: -350px;

        top: 135px;

    }


    .team-member-page__arc--green {

        right: -355px;

        top: 18px;

    }


    .team-member-page__socials {

        gap: 9px;

        margin-top: 16px;

    }


    .team-member-page__social {

        min-height: 59px;

        border-radius: 15px;

    }


    .team-member-page__social-title {

        font-size: 12px;

    }


    .team-member-page__social-subtitle {

        font-size: 12px;

    }


    .team-member-page__social-icon {

        width: 34px;
        height: 34px;

    }


    .team-member-page__social-icon img {

        width: 20px;
        height: 20px;

    }

}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 400px) {

    .team-member-page {

        padding-top: 25px;
        padding-bottom: 30px;

    }


    .team-member-page__container {

        max-width:
            calc(100% - 20px);

    }


    .team-member-page__profile {

        padding-right: 18px;
        padding-left: 18px;

    }


    .team-member-page__name {

        font-size: 23px;

    }


    .team-member-page__social {

        min-height: 56px;

        padding-left: 9px;
        padding-right: 9px;

    }


    .team-member-page__social-title {

        padding-right: 5px;

        font-size: 11px;

    }


    .team-member-page__social-subtitle {

        font-size: 11px;

    }


    .team-member-page__social-icon {

        width: 32px;
        height: 32px;

    }


    .team-member-page__social-arrow {

        width: 25px;

    }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .team-member-page__background-light--purple,
    .team-member-page__background-light--green,
    .team-member-page__arc--purple,
    .team-member-page__arc--green {

        animation: none;

    }


    .team-member-page__social,
    .team-member-page__logo,
    .team-member-page__share,
    .team-member-page__copy-toast {

        transition: none;

    }

}

/* مقالات */
/* ============================================================
   Blog Archive
============================================================ */

.blog-archive {
    width: 100%;
    margin-bottom: var(--space-128);
}

.blog-archive__container {
    width: 100%;
}


/* ============================================================
   Blog Banner
============================================================ */

.blog-archive__banner {
    position: relative;
    width: 100%;
    min-height: 380px;
    overflow: hidden;
    border-radius: var(--space-20);
    background: #eeeeee;
}


/* ============================================================
   Top Banner
============================================================ */

.blog-archive__banner--top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background:
        url("assets/img/banner/blog-main.webp") center / cover no-repeat;
}


/*
 * Content
 */

.blog-archive__banner--top .brand-banner__content {
    position: relative;
    z-index: 5;
    width: 55%;
    margin-left: auto;
    padding: var(--space-48);
}


/*
 * Title
 */

.blog-archive__banner--top .brand-banner__title {
    margin: 0;
    color: var(--gray-800);
    font-size: var(--font-size-32);
    font-weight: 700;
    line-height: 1.35;
}


/*
 * Description
 */

.blog-archive__banner--top .brand-banner__description {
    margin-top: var(--space-20);
    color: var(--gray-600);
    font-size: var(--font-size-16);
    line-height: 1.8;
}


/*
 * Button
 */

.blog-archive__banner--top .brand-banner__button {
    margin-top: var(--space-24);
}


/* ============================================================
   Articles
============================================================ */

.blog-archive__articles {
    width: 100%;
}


/* ============================================================
   Articles Grid
============================================================ */

.blog-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-20);
}


/* ============================================================
   Article Card
============================================================ */

.blog-archive__card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .04);
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, .04);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.blog-archive__card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, .08);
}


/* ============================================================
   Card Image
============================================================ */

.blog-archive__card-image-link {
    display: block;
    text-decoration: none;
}


.blog-archive__card-image-wrap {
    position: relative;

    aspect-ratio: 1.42 / 1;
    margin: 16px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--gray-100);
}


.blog-archive__card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}


.blog-archive__card:hover .blog-archive__card-image {
    transform: scale(1.035);
}


/* ============================================================
   Card Content
============================================================ */

.blog-archive__card-content {
    display: flex;
    flex-direction: column;
    padding:
        var(--space-20) var(--space-20) var(--space-20);
    height: 220px;
}


/* ============================================================
   Card Title
============================================================ */

.blog-archive__card-title {
    margin: 0;
}


.blog-archive__card-title-link {
    display: block;
    color: var(--gray-800);
    font-size: var(--font-size-20);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: color .25s ease;
}


.blog-archive__card-title-link:hover {
    color: var(--color-primary);
}


/* ============================================================
   Card Excerpt
============================================================ */

.blog-archive__card-excerpt {
    display: -webkit-box;
    margin:
        var(--space-8) 0 var(--space-16);
    overflow: hidden;
    color: var(--gray-500);
    font-size: var(--font-size-14);
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* ============================================================
   Card Button
============================================================ */

.blog-archive__card-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: auto;
    border-radius: 999px;
    background: #008f08;
    color: #ffffff;
    font-size: var(--font-size-14);
    font-weight: 400;
    text-decoration: none;
    transition:
        background .25s ease,
        transform .25s ease;
}


.blog-archive__card-button:hover {
    background: #007707;
    color: #ffffff;
    transform: translateY(-1px);
}


/* ============================================================
   Load More
============================================================ */

.blog-archive__load-more-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-40);
    margin-bottom: var(--space-80);
}


.blog-archive__load-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 52px;
    padding-inline: var(--space-32);
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: #ffffff;
    font-family: inherit;
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition:
        background .25s ease,
        transform .25s ease,
        opacity .25s ease;
}


.blog-archive__load-more:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
}


.blog-archive__load-more:active {
    transform: translateY(0);
}


.blog-archive__load-more:disabled {
    cursor: wait;
    opacity: .6;
}


/*
 * Loading
 */

.blog-archive__load-more-loading {
    display: none;
}


.blog-archive__load-more[data-loading="true"] .blog-archive__load-more-text {
    display: none;
}


.blog-archive__load-more[data-loading="true"] .blog-archive__load-more-loading {
    display: inline;
}


/* ============================================================
   Empty State
============================================================ */

.blog-archive__empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: var(--space-40);
    border-radius: var(--space-20);
    background: var(--gray-100);
}


.blog-archive__empty-text {
    margin: 0;
    color: var(--gray-500);
    font-size: var(--font-size-16);
}


/* ============================================================
   Bottom Banner
============================================================ */

.blog-archive__banner--bottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 300px;
    margin-top: var(--space-80);
    margin-bottom: 0;

    background:
        url("../img/blog/blog-social-banner.webp") center center / cover no-repeat;
}


.blog-archive__banner--bottom .brand-banner__content {
    position: relative;
    z-index: 5;
    width: 55%;
    margin-left: auto;
    padding: var(--space-48);
}


.blog-archive__banner--bottom .brand-banner__title {
    margin: 0;
    color: var(--gray-800);
    font-size: var(--font-size-32);
    font-weight: 700;
    line-height: 1.4;
}


.blog-archive__banner--bottom .brand-banner__button {
    margin-top: var(--space-24);
}


/* ============================================================
   Load More Sentinel
============================================================ */

.blog-archive__load-more-sentinel {
    width: 100%;
    height: 1px;
}


/* ============================================================
   Responsive
============================================================ */




@media (max-width: 991px) {
    .blog-archive__banner--top {

        background:
            url("assets/img/banner/blog-main-Phone.webp") center / cover no-repeat;
    }

    .blog-archive__banner {
        min-height: 340px;
    }


    .blog-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .blog-archive__banner--top .brand-banner__content {
        width: 55%;
        padding: 0px;
    }


    .blog-archive__banner--bottom .brand-banner__content {
        width: 55%;
        padding: var(--space-32);
    }


    .blog-archive__banner--top .brand-banner__title {
        font-size: var(--font-size-20);
    }


    .blog-archive__banner--bottom .brand-banner__title {
        font-size: var(--font-size-16);
    }

}


@media (max-width: 767px) {

    .blog-archive {
        margin-bottom: var(--space-80);
    }


    /*
     * Banners
     */

    .blog-archive__banner {
        min-height: 460px;
        border-radius: var(--space-16);
    }


    .blog-archive__banner--top {
        background-position: 58% center;
    }


    .blog-archive__banner--top .brand-banner__content {
        width: 55%;
        padding: 0px;
        text-align: center;
    }



    .blog-archive__banner--top .brand-banner__description {
        font-size: var(--font-size-14);
        line-height: 1.9;
    }


    .blog-archive__banner--top .brand-banner__button {
        margin-inline: auto;
    }


    /*
     * Grid
     */

    .blog-archive__grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }


    /*
     * Card
     */

    .blog-archive__card {
        border-radius: var(--space-16);
    }


    .blog-archive__card-image-wrap {
        aspect-ratio: 1.45 / 1;
    }


    .blog-archive__card-content {}



    /*
     * Load More
     */

    .blog-archive__load-more-wrap {
        margin-top: var(--space-32);
        margin-bottom: var(--space-48);
    }


    /*
     * Bottom Banner
     */

    .blog-archive__banner--bottom {
        min-height: 360px;
        align-items: flex-end;
        background-position: 42% center;
    }


    .blog-archive__banner--bottom .brand-banner__content {
        width: 55%;
        padding:
            var(--space-24) var(--space-20);
        text-align: center;
    }


    .blog-archive__banner--bottom .brand-banner__title {
        font-size: 26px;
        line-height: 1.55;
    }


    .blog-archive__banner--bottom .brand-banner__button {
        margin-inline: auto;
    }

}


@media (max-width: 480px) {

    .blog-archive__banner--top {
        min-height: 200px;
    }


    .blog-archive__banner--top .brand-banner__title {
        font-size: var(--font-size-16);
    }





}




/* =========================================================
   Services Page
========================================================= */

.services-page {
    width: 100%;
}


/* =========================================================
   Services Content
========================================================= */

.services-content {
    position: relative;
    width: 100%;
}


.services-content__container {
    width: 100%;
    max-width: 75%;
    margin-inline: auto;
}


/* =========================================================
   Content Section
========================================================= */

.services-content__section {
    position: relative;
    margin-bottom: var(--space-48);
}


.services-content__section:last-child {
    margin-bottom: 0;
}


/* =========================================================
   Section Title
========================================================= */

.services-content__title {
    position: relative;

    margin: 0 0 var(--space-16);

    padding-right: var(--space-16);

    color: var(--gray-900);

    font-size: var(--font-size-20);
    font-weight: 700;

    line-height: 1.6;
}


.services-content__title::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 3px;
    height: 100%;

    border-radius: 999px;

    background: var(--color-secondary);
}


.services-content__section--services .services-content__title::before {
    background: var(--color-primary);
}


.services-content__section--conclusion .services-content__title::before {
    background: var(--color-secondary);
}


/* =========================================================
   Text
========================================================= */

.services-content__text {
    margin: 0;

    color: var(--gray-600);

    font-size: var(--font-size-14);
    font-weight: 400;

    line-height: 2.1;

    text-align: justify;
}


/* =========================================================
   Features
========================================================= */

.services-content__features {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-8) var(--space-24);

    margin: var(--space-16) 0 0;
    padding: 0;

    list-style: none;
}


.services-content__features li {
    position: relative;

    padding-right: var(--space-16);

    color: var(--gray-600);

    font-size: var(--font-size-14);
    line-height: 1.8;
}


.services-content__features li::before {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 6px;
    height: 6px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--color-primary);
}


/* =========================================================
   Services Items
========================================================= */

.services-content__items {
    display: flex;
    flex-direction: column;
}


.services-content__item {
    position: relative;

    padding-block: var(--space-20);

    border-bottom: 1px solid var(--gray-200);
}


.services-content__item:first-child {
    padding-top: var(--space-8);
}


.services-content__item:last-child {
    border-bottom: 0;
}


.services-content__item-title {
    position: relative;

    margin: 0 0 var(--space-8);

    padding-right: var(--space-12);

    color: var(--gray-800);

    font-size: var(--font-size-16);
    font-weight: 700;

    line-height: 1.7;
}


.services-content__item-title::before {
    content: "";

    position: absolute;

    top: 2px;
    right: 0;

    width: 3px;
    height: calc(100% - 4px);

    border-radius: 999px;

    background: var(--color-secondary);
}


.services-content__item:nth-child(even) .services-content__item-title::before {
    background: var(--color-primary);
}


.services-content__item-text {
    margin: 0;

    color: var(--gray-600);

    font-size: var(--font-size-14);
    line-height: 2;

    text-align: justify;
}


/* =========================================================
   Conclusion
========================================================= */

.services-content__section--conclusion {
    margin-top: var(--space-40);
    margin-bottom: var(--space-80);
}


.services-content__section--conclusion .services-content__text {
    line-height: 2.15;
}


/* =========================================================
   Projects Spacing
========================================================= */

.services-page .projects {
    margin-bottom: var(--space-128);
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 991px) {

    .services-content__container {
        max-width: calc(100% - var(--space-64));
    }

}


@media (max-width: 767px) {

    .services-content__container {
        max-width: calc(100% - var(--space-32));
    }


    .services-content__section {
        margin-bottom: var(--space-40);
    }


    .services-content__title {
        font-size: var(--font-size-16);
    }


    .services-content__text {
        font-size: var(--font-size-14);
        line-height: 2;
    }


    .services-content__features {
        flex-direction: column;

        gap: var(--space-4);
    }


    .services-content__item {
        padding-block: var(--space-16);
    }


    .services-content__item-title {
        font-size: var(--font-size-14);
    }


    .services-content__item-text {
        font-size: var(--font-size-12);
        line-height: 2;
    }


    .services-content__section--conclusion {
        margin-top: var(--space-24);
        margin-bottom: var(--space-64);
    }

}





.packaging___hero {
    align-items: center;
}


.packaging___hero .hero__heading {
    margin-top: var(--space-80);
    width: 75%;
    padding: var(--space-40);
    background: color-mix(in srgb, var(--gray-200) 25%, transparent);
    border: 1px solid var(--gray-200);
    border-radius: var(--space-24);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    align-items: center;
    font-size: unset;
    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);
}

.packaging___hero .hero__line--1 h1 {
    display: unset;
    font-size: var(--font-size-32);
}


.packaging___hero .hero__line--2 {
    margin-top: var(--space-12);
}

.packaging___hero .hero__line--2 span {
    display: unset;
    font-weight: 400;
    font-size: var(--font-size-24);
}

.packaging___hero .hero__heading__img {
    width: var(--space-128);
    height: var(--space-128);
    ;
}

.packaging___hero .hero__arc--left {
    bottom: unset;
    top: 200px;
}

.packaging___hero .hero__arc--right {
    bottom: unset;
    top: 3500px;
}

.packaging___hero .hero__light--purple {
    bottom: unset;
    top: 300px;
}


.visual-identity-banner {
    background:
        url("assets/img/banner/Visual-identity.webp") center / cover no-repeat;
}

.motion-graphics-banner {
    background:
        url("assets/img/banner/Motion.webp") center / cover no-repeat;
}

.Packaging-banner {
    background:
        url("assets/img/banner/Packaging.webp") center / cover no-repeat;
}

.Catalog-banner {
    background:
        url("assets/img/banner/Catalog.webp") center / cover no-repeat;
}

.advertising-graphics-banner {
    background:
        url("assets/img/banner/Artwork-Ads.webp") center / cover no-repeat;
}

.website-banner {
    background:
        url("assets/img/banner/website.webp") center / cover no-repeat;
}

.page-brand-strategy-banner {
    background:
        url("assets/img/banner/Brand-identity-strategy.webp") center / cover no-repeat;
}

.brand-book-banner {
    background:
        url("assets/img/banner/brand-book.webp") center / cover no-repeat;
}

.brand-consulting-banner {
    background:
        url("assets/img/banner/Brand-Consulting.webp") center / cover no-repeat;
}

.social-media-banner {
    background:
        url("assets/img/banner/Social.webp") center / cover no-repeat;
}

@media (max-width: 767px) {
    .packaging___hero {
        margin-bottom: var(--space-80);
    }

    .packaging___hero .hero__heading {
        margin-top: var(--space-48);
        width: 100%;
    }

    .visual-identity-banner {
        background:
            url("assets/img/banner/Visual-identity-Phone.webp") center / cover no-repeat;
    }



    .motion-graphics-banner {
        background:
            url("assets/img/banner/Motion-Phone.webp") center / cover no-repeat;
    }

    .Packaging-banner {
        background:
            url("assets/img/banner/Packaging-Phone.webp") center / cover no-repeat;
    }

    .Catalog-banner {
        background:
            url("assets/img/banner/Catalog-Phone.webp") center / cover no-repeat;
    }

    .advertising-graphics-banner {
        background:
            url("assets/img/banner/Artwork-Ads-Phone.webp") center / cover no-repeat;
    }

    .website-banner {
        background:
            url("assets/img/banner/website-Phone.webp") center / cover no-repeat;
    }

    .page-brand-strategy-banner {
        background:
            url("assets/img/banner/Brand-identity-strategy-Phone.webp") center / cover no-repeat;
    }

    .brand-book-banner {
        background:
            url("assets/img/banner/brand-book-Phone.webp") center / cover no-repeat;
    }

    .brand-consulting-banner {
        background:
            url("assets/img/banner/Brand-Consulting-Phone.webp") center / cover no-repeat;
    }

    .social-media-banner {
        background:
            url("assets/img/banner/Social-Phone.webp") center / cover no-repeat;
    }
}


































/*    مقالات     /*

/* =========================================================
   Single Article
========================================================= */

.article-single {
    width: 100%;
    margin-bottom: var(--space-128);
}

.article-single__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-64);
}


/* =========================================================
   Article Banner
========================================================= */

.article-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--space-320);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--gray-200);
    border-radius: var(--space-24);
    background-color: var(--gray-100);
}

.article-banner__picture {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
}

.article-banner__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.article-banner__content {
    width: 100%;
    max-width: var(--space-576);
    padding: var(--space-40);
    text-align: right;
}

.article-banner__title {
    margin: 0;
    color: var(--gray-950);
    font-size: var(--font-size-32);
    font-weight: 700;
    line-height: 1.5;
}

.article-banner__description {
    margin: var(--space-12) 0 0;
    color: var(--gray-700);
    font-size: var(--font-size-16);
    font-weight: 400;
    line-height: 1.9;
}

.article-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-height: var(--space-40);
    margin-top: var(--space-24);
    padding-inline: var(--space-20);
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--gray-50);
    text-decoration: none;
    transition:
        transform .25s ease,
        background-color .25s ease;
}

.article-banner__button:hover {
    transform: translateY(-2px);
    background-color: var(--color-secondary);
    color: var(--gray-50);
}

.article-banner__button-text {
    font-size: var(--font-size-12);
    font-weight: 500;
}

.article-banner__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-16);
}


/* =========================================================
   Article Body
========================================================= */

.article-single__article {
    width: 100%;
    min-width: 0;
}

.article-single__body {
    width: 100%;
    color: var(--gray-700);
    font-size: var(--font-size-14);
    line-height: 2.1;
    overflow-wrap: anywhere;
}

.article-single__body>* {
    max-width: 100%;
}

.article-single__body p {
    margin-block: 0 var(--space-20);
    color: var(--gray-700);
    font-size: var(--font-size-14);
    line-height: 2.1;
    text-align: justify;
}

.article-single__body strong,
.article-single__body b {
    color: var(--gray-900);
    font-size: var(--font-size-16);
    font-weight: 700;
}

.article-single__body em,
.article-single__body i {
    color: var(--gray-800);
}

.article-single__body a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color .2s ease;
}

.article-single__body a:hover {
    color: var(--color-primary);
}

.article-single__body h2 {
    position: relative;
    margin: var(--space-40) 0 var(--space-16);
    padding-right: var(--space-20);
    color: var(--gray-900);
    font-size: var(--font-size-24);
    font-weight: 700;
    line-height: 1.7;
}

.article-single__body h2::before {
    content: "";
    position: absolute;
    top: .65em;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.article-single__body h3 {
    position: relative;
    margin: var(--space-32) 0 var(--space-12);
    padding-right: var(--space-16);
    color: var(--gray-800);
    font-size: var(--font-size-20);
    font-weight: 700;
    line-height: 1.8;
}

.article-single__body h3::before {
    content: "";
    position: absolute;
    top: .65em;
    right: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-secondary);
}

.article-single__body h4 {
    margin: var(--space-24) 0 var(--space-12);
    color: var(--gray-800);
    font-size: var(--font-size-16);
    font-weight: 700;
    line-height: 1.8;
}

.article-single__body ul,
.article-single__body ol {
    margin: 0 0 var(--space-24);
    padding: 0;
    list-style: none;
}

.article-single__body ul>li,
.article-single__body ol>li {
    position: relative;
    margin-bottom: var(--space-8);
    padding-right: var(--space-24);
    color: var(--gray-700);
    font-size: var(--font-size-14);
    line-height: 2;
}

.article-single__body ul>li::before {
    content: "✦";
    position: absolute;
    top: 0;
    right: 0;
    color: var(--color-secondary);
    font-size: var(--font-size-12);
}

.article-single__body ol {
    counter-reset: article-list;
}

.article-single__body ol>li {
    counter-increment: article-list;
}

.article-single__body ol>li::before {
    content: counter(article-list, persian);
    position: absolute;
    top: 0;
    right: 0;
    color: var(--color-primary);
    font-weight: 700;
}

.article-single__body blockquote {
    margin: var(--space-32) 0;
    padding: var(--space-20) var(--space-24);
    border-right: 3px solid var(--color-secondary);
    border-radius: var(--space-8);
    background: var(--gray-100);
    color: var(--gray-800);
}

.article-single__body blockquote p:last-child {
    margin-bottom: 0;
}

.article-single__body figure {
    max-width: 100%;
    margin: var(--space-32) 0;
}

.article-single__body figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: var(--space-16);
}

.article-single__body figcaption {
    margin-top: var(--space-8);
    color: var(--gray-500);
    font-size: var(--font-size-12);
    text-align: center;
}

.article-single__body hr {
    height: 1px;
    margin-block: var(--space-40);
    border: 0;
    background: var(--gray-200);
}

.article-single__body table {
    width: 100%;
    margin-block: var(--space-24);
    border-collapse: collapse;
}

.article-single__body th,
.article-single__body td {
    padding: var(--space-12);
    border: 1px solid var(--gray-200);
    text-align: right;
}

.article-single__body th {
    background: var(--gray-100);
    color: var(--gray-900);
    font-weight: 700;
}

.article-single__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-32);
}


/* =========================================================
   Latest Articles
========================================================= */

.article-single__latest {
    width: 100%;
}

.article-single__latest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    margin-bottom: var(--space-24);
}

.article-single__latest-title {
    position: relative;
    margin: 0;
    padding-right: var(--space-20);
    color: var(--gray-900);
    font-size: var(--font-size-24);
    font-weight: 700;
    line-height: 1.7;
}

.article-single__latest-title::before {
    content: "";
    position: absolute;
    top: .65em;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.article-single__latest-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    flex-shrink: 0;
    color: var(--gray-700);
    font-size: var(--font-size-14);
    text-decoration: none;
    transition: color .2s ease;
}

.article-single__latest-more:hover {
    color: var(--color-primary);
}

.article-single__latest-more i {
    font-size: var(--font-size-16);
}

.article-single__latest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-20);
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 991px) {

    .article-single__container {
        gap: var(--space-48);
    }

    .article-banner {
        min-height: var(--space-288);
    }

    .article-banner__content {
        max-width: 70%;
        padding: var(--space-32);
    }

    .article-banner__title {
        font-size: var(--font-size-24);
    }

    .article-single__latest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 767px) {

    .article-single {
        margin-bottom: var(--space-64);
    }

    .article-single__container {
        gap: var(--space-32);
    }

    .article-banner {
        min-height: 0;
        aspect-ratio: 1 / 1;
        align-items: flex-end;
        border-radius: var(--space-16);
    }

    .article-banner__image {
        object-position: center;
    }

    .article-banner__content {
        max-width: 100%;
        padding: var(--space-24);
    }

    .article-banner__title {
        font-size: var(--font-size-24);
        line-height: 1.5;
    }

    .article-banner__description {
        margin-top: var(--space-8);
        font-size: var(--font-size-14);
        line-height: 1.9;
    }

    .article-banner__button {
        min-height: var(--space-40);
        margin-top: var(--space-16);
        padding-inline: var(--space-16);
    }

    .article-single__body {
        font-size: var(--font-size-14);
        line-height: 2;
    }

    .article-single__body p {
        margin-bottom: var(--space-16);
        font-size: var(--font-size-14);
        line-height: 2;
    }

    .article-single__body h2 {
        margin-top: var(--space-32);
        font-size: var(--font-size-20);
    }

    .article-single__body h3 {
        margin-top: var(--space-24);
        font-size: var(--font-size-16);
    }

    .article-single__body h4 {
        font-size: var(--font-size-14);
    }

    .article-single__body ul>li,
    .article-single__body ol>li {
        font-size: var(--font-size-14);
    }

    .article-single__latest-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-8);
    }

    .article-single__latest-title {
        font-size: var(--font-size-20);
    }

    .article-single__latest-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-16);
    }

}