/* =========================================
   COLORS EVENTS — CLEAN MASTER CSS
========================================= */

:root {

    --black: #070707;
    --white: #f5f3ee;

    --blue: #61bce7;
    --pink: #c52b76;
    --yellow: #ffbd22;
    --teal: #58b8a7;
    --purple: #633c91;

}


* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background:
        var(--black);

    color:
        var(--white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x:
        hidden;

}


body.menu-is-open {

    overflow:
        hidden;

}


a {

    color: inherit;
    text-decoration: none;

}


button,
input,
select,
textarea {

    font: inherit;

}


/* =========================================
   HEADER
========================================= */

.luxury-header {

    position: fixed;

    top: 22px;
    left: 4vw;
    right: 4vw;

    height: 76px;

    padding:
        0 18px 0 20px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    z-index: 9999;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        22px;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    backdrop-filter:
        blur(25px);

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.25);

    overflow:
        visible;

}


.luxury-header::before {

    content: "";

    position: absolute;

    left: -30%;
    bottom: 0;

    width: 35%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            var(--pink),
            var(--yellow),
            transparent
        );

    animation:
        headerLight
        5s linear infinite;

}


@keyframes headerLight {

    from {
        left: -35%;
    }

    to {
        left: 100%;
    }

}


/* =========================================
   BRAND
========================================= */

.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex:
        0 0 auto;

    min-width:
        max-content;

}


.brand img {

    width:
        62px;

    height:
        62px;

    object-fit:
        contain;

    display:
        block;

    filter:
        drop-shadow(
            0 0 12px
            rgba(97,188,231,.08)
        );

    transition:
        transform .45s
        cubic-bezier(.16,1,.3,1),
        filter .45s ease;

}


.brand:hover img {

    transform:
        scale(1.08);

    filter:
        drop-shadow(
            0 0 22px
            rgba(97,188,231,.35)
        );

}


.brand-name {

    display:
        flex;

    flex-direction:
        column;

    color:
        #fff;

    font-size:
        13px;

    letter-spacing:
        4px;

    line-height:
        1;

}


.brand-name small {

    margin-top:
        5px;

    color:
        rgba(255,255,255,.38);

    font-size:
        6px;

    letter-spacing:
        3px;

}


/* =========================================
   TOP NAV
========================================= */

.luxury-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin-left:
        auto;

}


.nav-link {

    height:
        46px;

    padding:
        0 15px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    border-radius:
        13px;

    color:
        #aaa;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

    transition:
        .3s ease;

}


.nav-link span {

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        #444;

    flex:
        0 0 4px;

}


.nav-link:hover {

    color:
        #fff;

}


.nav-link:hover span {

    background:
        var(--yellow);

}


.contact-link {

    margin-left:
        5px;

    background:
        var(--yellow);

    color:
        #050505;

}


.contact-link span {

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

}


.contact-link b {

    font-size:
        16px;

    font-weight:
        400;

}


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

.menu-orb {

    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        0;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.035);

    color:
        #fff;

    cursor:
        pointer;

    position:
        relative;

    z-index:
        10001;

}


.menu-orb i {

    width:
        18px;

    height:
        1px;

    background:
        #fff;

    display:
        block;

    transition:
        .3s ease;

}


.menu-orb:hover {

    background:
        rgba(255,255,255,.08);

    border-color:
        rgba(255,255,255,.35);

}


.menu-orb.menu-open i:nth-child(1) {

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

}


.menu-orb.menu-open i:nth-child(2) {

    opacity:
        0;

}


.menu-orb.menu-open i:nth-child(3) {

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

}


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

.colors-mobile-menu {

    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(7,7,7,.94);

    backdrop-filter:
        blur(24px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.colors-mobile-menu.active {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


.mobile-menu-panel {

    width:
        min(
            1100px,
            92vw
        );

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

    overflow:
        auto;

    padding:
        34px 46px 28px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        26px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.45);

}


.mobile-menu-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding-bottom:
        20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

}


.menu-eyebrow {

    display:
        block;

    color:
        rgba(255,255,255,.3);

    font-size:
        8px;

    letter-spacing:
        3px;

}


.menu-title {

    display:
        block;

    margin-top:
        6px;

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        400;

    letter-spacing:
        3px;

}


.mobile-menu-close {

    width:
        44px;

    height:
        44px;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius:
        50%;

    background:
        transparent;

    color:
        #fff;

    font-size:
        25px;

    cursor:
        pointer;

}


.mobile-menu-links {

    display:
        flex;

    flex-direction:
        column;

    margin-top:
        38px;

}


.mobile-menu-links a {

    display:
        grid;

    grid-template-columns:
        40px minmax(0,1fr) 25px;

    align-items:
        center;

    gap:
        15px;

    min-height:
        68px;

    padding:
        14px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);

    color:
        #fff;

    transition:
        .25s ease;

}


.mobile-menu-links a:hover {

    color:
        var(--yellow);

    padding-left:
        8px;

}


.mobile-menu-links small {

    color:
        rgba(255,255,255,.28);

    font-size:
        8px;

    letter-spacing:
        2px;

}


.mobile-menu-links span {

    min-width:
        0;

    color:
        #fff;

    font-size:
        clamp(
            22px,
            3.3vw,
            42px
        );

    line-height:
        1.3;

    font-weight:
        400;

    white-space:
        normal;

    overflow-wrap:
        break-word;

}


.mobile-menu-links b {

    font-size:
        16px;

    font-weight:
        400;

}


/* =========================================
   LANGUAGE
========================================= */

.menu-bottom {

    margin-top:
        30px;

}


.language-label {

    margin-bottom:
        12px;

    color:
        rgba(255,255,255,.32);

    font-size:
        8px;

    letter-spacing:
        3px;

}


.language-switch {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.language-button {

    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        10px 15px;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius:
        999px;

    background:
        transparent;

    color:
        rgba(255,255,255,.6);

    font-size:
        10px;

    cursor:
        pointer;

}


.language-button.active {

    background:
        #fff;

    color:
        #080808;

    border-color:
        #fff;

}


.menu-footer {

    margin-top:
        23px;

    color:
        rgba(255,255,255,.18);

    font-size:
        8px;

    letter-spacing:
        3px;

}


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

.hero {

    min-height:
        100vh;

    padding:
        150px 8vw 80px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    position:
        relative;

    overflow:
        hidden;

}


.hero::after {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    left:
        45%;

    top:
        30%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(99,60,145,.09),
            transparent 70%
        );

    filter:
        blur(35px);

    pointer-events:
        none;

}


.hero-text {

    position:
        relative;

    z-index:
        2;

}


.hero-text > p {

    font-size:
        10px;

    letter-spacing:
        4px;

    color:
        #888;

}


h1 {

    margin:
        30px 0 40px;

    font-size:
        clamp(
            58px,
            8vw,
            125px
        );

    line-height:
        .9;

    letter-spacing:
        -6px;

    font-weight:
        400;

}


.hero-line-normal {

    display:
        block;

}


.hero-gradient,
.gradient-text {

    display:
        block;

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--pink),
            var(--yellow),
            var(--teal),
            var(--purple)
        );

    background-size:
        300%;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    animation:
        colors 8s linear infinite;

}


@keyframes colors {

    to {
        background-position:
            300%;
    }

}


.button {

    display:
        inline-block;

    padding:
        17px 25px;

    background:
        var(--yellow);

    color:
        #000;

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

}


.hero-image {

    min-height:
        520px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.hero-image img {

    width:
        min(
            46vw,
            650px
        );

    max-width:
        100%;

    max-height:
        650px;

    object-fit:
        contain;

}


.visual-label {

    position:
        absolute;

    right:
        8vw;

    bottom:
        35px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        5px;

    color:
        rgba(255,255,255,.4);

    font-size:
        8px;

    letter-spacing:
        3px;

}


/* =========================================
   GENERAL SECTIONS
========================================= */

.section {

    padding:
        145px 8vw;

    border-top:
        1px solid
        rgba(255,255,255,.08);

}


.section-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding-bottom:
        20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

}


.section-top p {

    color:
        var(--yellow);

    font-size:
        9px;

    letter-spacing:
        3px;

}


.section-top > span {

    color:
        rgba(255,255,255,.32);

    font-size:
        8px;

    letter-spacing:
        3px;

}


/* =========================================
   ABOUT
========================================= */

.about-main {

    display:
        grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:
        90px;

    margin-top:
        80px;

}


.about-main h2 {

    margin:
        0;

    font-size:
        clamp(
            50px,
            7vw,
            105px
        );

    line-height:
        .92;

    letter-spacing:
        -5px;

    font-weight:
        400;

}


.normal-text {

    display:
        inline;

}


.about-copy {

    align-self:
        end;

}


.about-copy p {

    max-width:
        470px;

    color:
        rgba(255,255,255,.48);

    font-size:
        14px;

    line-height:
        1.8;

}


.about-link {

    display:
        inline-block;

    margin-top:
        28px;

    padding-bottom:
        10px;

    border-bottom:
        1px solid
        var(--yellow);

    font-size:
        11px;

    letter-spacing:
        2px;

}


.about-line {

    display:
        grid;

    grid-template-columns:
        30px 1fr auto;

    gap:
        20px;

    align-items:
        center;

    margin-top:
        85px;

    color:
        rgba(255,255,255,.25);

    font-size:
        8px;

    letter-spacing:
        2px;

}


.about-line div {

    height:
        1px;

    background:
        rgba(255,255,255,.10);

}


/* =========================================
   SERVICES
========================================= */

.services-heading {

    margin-bottom:
        55px;

}


.services-heading p {

    color:
        var(--yellow);

    font-size:
        9px;

    letter-spacing:
        3px;

    margin-bottom:
        18px;

}


.services-heading h2 {

    margin:
        0;

    font-size:
        clamp(
            55px,
            8vw,
            110px
        );

    line-height:
        .9;

    letter-spacing:
        -6px;

    font-weight:
        400;

}


.services-intro {

    display:
        block;

    margin-top:
        20px;

    color:
        rgba(255,255,255,.45);

    font-size:
        12px;

}


.services-grid {

    display:
        grid;

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

    gap:
        18px;

}


.service-card {

    position:
        relative;

    min-height:
        520px;

    overflow:
        hidden;

    background:
        #0d0d0d;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        4px;

}


.service-image {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

}


.service-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform .8s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


.service-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.92),
            rgba(0,0,0,.35) 45%,
            rgba(0,0,0,.05)
        );

}


.service-card:hover
.service-image img {

    transform:
        scale(1.05);

}


.service-view {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

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

    padding:
        12px 18px;

    border:
        1px solid
        rgba(255,255,255,.6);

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

    color:
        #fff;

    font-size:
        8px;

    letter-spacing:
        3px;

    opacity:
        0;

    z-index:
        3;

}


.service-card:hover
.service-view {

    opacity:
        1;

}


.service-content {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

}


.service-number {

    position:
        absolute;

    top:
        24px;

    left:
        24px;

    color:
        rgba(255,255,255,.7);

    font-size:
        9px;

    letter-spacing:
        2px;

}


.service-info {

    padding-right:
        65px;

}


.service-info h3 {

    color:
        #fff;

    font-size:
        clamp(
            27px,
            3vw,
            45px
        );

    font-weight:
        400;

    line-height:
        1;

}


.service-info p {

    margin-top:
        10px;

    color:
        rgba(255,255,255,.65);

    font-size:
        13px;

    line-height:
        1.65;

}


.service-arrow {

    position:
        absolute;

    right:
        28px;

    bottom:
        28px;

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius:
        50%;

    color:
        #fff;

}


/* =========================================
   WORK
========================================= */

.work-heading p {

    color:
        var(--yellow);

    font-size:
        9px;

    letter-spacing:
        3px;

}


.work-heading h2 {

    margin:
        28px 0;

    font-size:
        clamp(
            50px,
            7vw,
            105px
        );

    line-height:
        .9;

    letter-spacing:
        -5px;

    font-weight:
        400;

}


.work-intro {

    max-width:
        500px;

    color:
        rgba(255,255,255,.45);

    font-size:
        13px;

    line-height:
        1.8;

}


.work-grid {

    margin-top:
        55px;

    display:
        grid;

    grid-template-columns:
        1.3fr .85fr .85fr;

    gap:
        18px;

}


.work-image {

    position:
        relative;

    height:
        560px;

    overflow:
        hidden;

    background:
        #111;

}


.work-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform .7s ease;

}


.work-card:hover
.work-image img {

    transform:
        scale(1.04);

}


.work-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.9),
            rgba(0,0,0,.05)
        );

}


.work-number {

    position:
        absolute;

    top:
        24px;

    left:
        24px;

    color:
        rgba(255,255,255,.65);

    font-size:
        8px;

    letter-spacing:
        2px;

}


.work-arrow {

    position:
        absolute;

    top:
        24px;

    right:
        24px;

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius:
        50%;

}


.work-info {

    position:
        absolute;

    left:
        24px;

    right:
        24px;

    bottom:
        24px;

}


.work-info span {

    color:
        rgba(255,255,255,.45);

    font-size:
        8px;

    letter-spacing:
        3px;

}


.work-info h3 {

    margin-top:
        8px;

    font-size:
        clamp(
            24px,
            3vw,
            38px
        );

    font-weight:
        400;

}


.work-bottom {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        22px;

    color:
        rgba(255,255,255,.24);

    font-size:
        8px;

    letter-spacing:
        3px;

}


/* =========================================
   START PROJECT
========================================= */

.start-project-section {

    padding:
        140px 8vw;

    border-top:
        1px solid
        rgba(255,255,255,.08);

}


.start-project-main {

    margin-top:
        80px;

    display:
        grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:
        90px;

}


.start-project-intro h2 {

    margin:
        0;

    font-size:
        clamp(
            52px,
            7vw,
            100px
        );

    line-height:
        .9;

    letter-spacing:
        -5px;

    font-weight:
        400;

}


.start-project-intro p {

    max-width:
        390px;

    margin-top:
        28px;

    color:
        rgba(255,255,255,.45);

    font-size:
        13px;

    line-height:
        1.8;

}


.start-project-form {

    width:
        100%;

}


.form-field {

    margin-bottom:
        26px;

}


.form-field label {

    display:
        block;

    margin-bottom:
        10px;

    color:
        rgba(255,255,255,.4);

    font-size:
        8px;

    letter-spacing:
        3px;

}


.form-field input,
.form-field select,
.form-field textarea {

    width:
        100%;

    padding:
        15px 0;

    border:
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,.18);

    outline:
        none;

    background:
        transparent;

    color:
        #fff;

    font-size:
        14px;

}


.form-field textarea {

    min-height:
        150px;

    resize:
        vertical;

}


.form-field input::placeholder,
.form-field textarea::placeholder {

    color:
        rgba(255,255,255,.25);

}


.form-field select option {

    background:
        #111;

    color:
        #fff;

}


.start-project-submit {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        16px;

    padding:
        16px 24px;

    border:
        1px solid
        rgba(255,255,255,.3);

    background:
        transparent;

    color:
        #fff;

    font-size:
        9px;

    letter-spacing:
        3px;

    cursor:
        pointer;

}


.start-project-submit:hover {

    background:
        #fff;

    color:
        #080808;

}


.start-project-submit b {

    font-size:
        15px;

}


.hidden-field {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    overflow:
        hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

}


/* =========================================
   CONTACT
========================================= */

.contact {

    padding:
        140px 8vw;

    border-top:
        1px solid
        rgba(255,255,255,.08);

}


.contact-main {

    margin-top:
        80px;

    display:
        grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:
        90px;

}


.contact-main h2 {

    margin:
        0;

    font-size:
        clamp(
            50px,
            7vw,
            105px
        );

    line-height:
        .9;

    letter-spacing:
        -5px;

    font-weight:
        400;

}


.contact-action {

    align-self:
        end;

}


.contact-action p {

    color:
        rgba(255,255,255,.45);

    font-size:
        13px;

    line-height:
        1.8;

}


.contact-email {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        16px;

    margin-top:
        28px;

    padding-bottom:
        10px;

    border-bottom:
        1px solid
        var(--yellow);

    font-size:
        18px;

}


.contact-bottom {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        80px;

    color:
        rgba(255,255,255,.24);

    font-size:
        8px;

    letter-spacing:
        3px;

}


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

footer {

    padding:
        28px 8vw;

    border-top:
        1px solid
        rgba(255,255,255,.1);

    color:
        #555;

    font-size:
        10px;

    letter-spacing:
        2px;

}


/* =========================================
   PRELOADER
========================================= */

.colors-preloader {

    position:
        fixed;

    inset:
        0;

    z-index:
        999999;

    background:
        #050505;

    color:
        #fff;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}


.colors-preloader.preloader-hidden {

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

}


.preloader-center {

    width:
        min(
            520px,
            80vw
        );

    text-align:
        center;

}


.preloader-logo {

    font-size:
        clamp(
            42px,
            7vw,
            82px
        );

    font-weight:
        300;

    letter-spacing:
        .42em;

    padding-left:
        .42em;

}


.preloader-tagline {

    margin-top:
        16px;

    font-size:
        9px;

    letter-spacing:
        .48em;

    padding-left:
        .48em;

    color:
        rgba(255,255,255,.5);

}


.preloader-progress {

    margin-top:
        40px;

    height:
        1px;

    background:
        rgba(255,255,255,.12);

    overflow:
        hidden;

}


.preloader-progress span {

    display:
        block;

    width:
        0;

    height:
        100%;

    background:
        #fff;

}


.preloader-count {

    margin-top:
        12px;

    color:
        rgba(255,255,255,.5);

    font-size:
        10px;

    letter-spacing:
        3px;

}


.preloader-corner {

    position:
        absolute;

    color:
        rgba(255,255,255,.25);

    font-size:
        8px;

    letter-spacing:
        3px;

}


.preloader-corner.top-left {

    top:
        28px;

    left:
        32px;

}


.preloader-corner.bottom-right {

    right:
        32px;

    bottom:
        28px;

}


/* =========================================
   RTL
========================================= */

html[dir="rtl"] body {

    font-family:
        Arial,
        Tahoma,
        sans-serif;

}


html[dir="rtl"] .luxury-nav {

    flex-direction:
        row-reverse;

}


html[dir="rtl"] .brand {

    flex-direction:
        row-reverse;

}


html[dir="rtl"] .hero-text,
html[dir="rtl"] .about-main,
html[dir="rtl"] .services-section,
html[dir="rtl"] .work-section,
html[dir="rtl"] .start-project-section,
html[dir="rtl"] .contact {

    text-align:
        right;

}


html[dir="rtl"] .service-number {

    left:
        auto;

    right:
        24px;

}


html[dir="rtl"] .service-info {

    padding-right:
        0;

    padding-left:
        65px;

}


html[dir="rtl"] .service-arrow {

    right:
        auto;

    left:
        28px;

}


html[dir="rtl"] .about-line {

    direction:
        rtl;

}


html[dir="rtl"] .work-number {

    left:
        auto;

    right:
        24px;

}


html[dir="rtl"] .work-arrow {

    right:
        auto;

    left:
        24px;

}


html[dir="rtl"] .work-info {

    left:
        24px;

    right:
        24px;

}


html[dir="rtl"] .contact-bottom,
html[dir="rtl"] .work-bottom {

    direction:
        rtl;

}


html[dir="rtl"] .mobile-menu-links {

    direction:
        rtl;

}


html[dir="rtl"] .mobile-menu-links a {

    grid-template-columns:
        25px minmax(0,1fr) 40px;

}


html[dir="rtl"] .mobile-menu-links small {

    text-align:
        left;

}


html[dir="rtl"] .mobile-menu-links b {

    text-align:
        right;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {


    .luxury-header {

        top:
            10px;

        left:
            10px;

        right:
            10px;

        height:
            64px;

        min-height:
            64px;

        padding:
            0 10px 0 12px;

        gap:
            10px;

        border-radius:
            17px;

        overflow:
            visible;

    }


    .brand {

        gap:
            8px;

    }


    .brand img {

        width:
            48px;

        height:
            48px;

    }


    .brand-name {

        font-size:
            10px;

        letter-spacing:
            3px;

    }


    .brand-name small {

        font-size:
            5px;

        margin-top:
            4px;

    }


    .luxury-nav {

        display:
            none;

    }


    .menu-orb {

        width:
            42px;

        height:
            42px;

        flex:
            0 0 42px;

    }


    .hero {

        grid-template-columns:
            1fr;

        padding:
            118px 6vw 65px;

    }


    .hero-text {

        text-align:
            left;

    }


    html[dir="rtl"] .hero-text {

        text-align:
            right;

    }


    h1 {

        font-size:
            58px;

        letter-spacing:
            -4px;

    }


    .hero-image {

        min-height:
            320px;

        margin-top:
            15px;

    }


    .hero-image img {

        width:
            88vw;

        max-height:
            360px;

    }


    .visual-label {

        right:
            6vw;

        bottom:
            20px;

    }


    .section,
    .start-project-section,
    .contact {

        padding:
            90px 6vw;

    }


    .section-top {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;

    }


    .about-main,
    .start-project-main,
    .contact-main {

        grid-template-columns:
            1fr;

        gap:
            50px;

        margin-top:
            60px;

    }


    .about-main h2,
    .start-project-intro h2,
    .contact-main h2 {

        font-size:
            56px;

        letter-spacing:
            -4px;

    }


    .about-line {

        grid-template-columns:
            25px 1fr;

        margin-top:
            60px;

    }


    .about-line span:last-child {

        display:
            none;

    }


    .services-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;

        margin-top:
            35px;

    }


    .service-card {

        min-height:
            390px;

    }


    .service-info h3 {

        font-size:
            27px;

    }


    .service-info p {

        font-size:
            12px;

        max-width:
            100%;

    }


    .service-info {

        padding-right:
            55px;

    }


    html[dir="rtl"]
    .service-info {

        padding-right:
            0;

        padding-left:
            55px;

    }


    .work-grid {

        grid-template-columns:
            1fr;

    }


    .work-image {

        height:
            410px;

    }


    .work-bottom,
    .contact-bottom {

        flex-direction:
            column;

        gap:
            12px;

    }


    .mobile-menu-panel {

        width:
            100%;

        max-height:
            100vh;

        height:
            100vh;

        padding:
            24px 20px;

        border:
            0;

        border-radius:
            0;

        background:
            #080808;

    }


    .mobile-menu-links {

        margin-top:
            30px;

    }


    .mobile-menu-links a {

        min-height:
            70px;

        grid-template-columns:
            32px minmax(0,1fr) 20px;

        gap:
            10px;

        padding:
            16px 0;

    }


    .mobile-menu-links span {

        font-size:
            24px;

        line-height:
            1.35;

    }


    html[dir="rtl"]
    .mobile-menu-links a {

        grid-template-columns:
            20px minmax(0,1fr) 32px;

    }


    html[dir="rtl"]
    .mobile-menu-links span {

        font-size:
            22px;

        line-height:
            1.55;

    }


    .menu-bottom {

        margin-top:
            24px;

        padding-bottom:
            5px;

    }


    .language-switch {

        gap:
            7px;

    }


    .language-button {

        min-height:
            42px;

        padding:
            9px 13px;

    }


    .menu-footer {

        margin-top:
            18px;

        font-size:
            7px;

    }


}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 430px) {


    .brand-name {

        display:
            none;

    }


    .brand img {

        width:
            46px;

        height:
            46px;

    }


    h1 {

        font-size:
            52px;

    }


    .mobile-menu-links a {

        min-height:
            66px;

    }


    .mobile-menu-links span {

        font-size:
            22px;

    }


    html[dir="rtl"]
    .mobile-menu-links span {

        font-size:
            21px;

    }

}/* =========================================
   FINAL MOBILE HEADER — SINGLE ROW
========================================= */

@media (max-width: 800px) {

    .luxury-header {
        position: fixed !important;

        top: 10px !important;
        left: 8px !important;
        right: 8px !important;

        width: auto !important;
        height: 58px !important;
        min-height: 58px !important;

        padding: 0 7px 0 10px !important;

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

        gap: 7px !important;

        border-radius: 16px !important;

        overflow: hidden !important;

        z-index: 99999 !important;
    }


    /* =========================================
       LOGO
    ========================================== */

    .brand {
        display: flex !important;

        align-items: center !important;

        gap: 5px !important;

        flex: 0 0 auto !important;

        min-width: auto !important;
    }

    .brand img {
        width: 34px !important;
        height: 34px !important;

        flex: 0 0 34px !important;
    }

    .brand-name {
        display: flex !important;

        flex-direction: column !important;

        font-size: 7px !important;

        letter-spacing: 1.8px !important;

        line-height: 1 !important;
    }

    .brand-name small {
        display: block !important;

        margin-top: 3px !important;

        font-size: 4px !important;

        letter-spacing: 1.4px !important;
    }


    /* =========================================
       NAVIGATION — SAME ROW
    ========================================== */

    .luxury-nav {
        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        gap: 2px !important;

        margin: 0 !important;

        min-width: 0 !important;

        flex: 1 1 auto !important;

        overflow: hidden !important;

        white-space: nowrap !important;
    }

    .luxury-nav .nav-link {
        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex: 0 0 auto !important;

        height: 32px !important;

        padding: 0 5px !important;

        gap: 3px !important;

        border-radius: 7px !important;

        font-size: 5.8px !important;

        letter-spacing: .55px !important;

        white-space: nowrap !important;

        text-transform: uppercase !important;
    }

    .luxury-nav .nav-link span {
        display: none !important;
    }

    .luxury-nav .contact-link {
        margin-left: 1px !important;

        padding: 0 7px !important;

        border-radius: 8px !important;
    }

    .luxury-nav .contact-link b {
        font-size: 9px !important;

        margin-left: 2px !important;
    }


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

    .menu-orb {
        display: flex !important;

        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;

        flex: 0 0 34px !important;

        gap: 4px !important;

        border-radius: 10px !important;

        margin: 0 !important;

        padding: 0 !important;
    }

    .menu-orb i {
        width: 13px !important;
        height: 1px !important;
    }


    /* =========================================
       ARABIC
    ========================================== */

    html[dir="rtl"] .luxury-header {
        direction: rtl !important;
    }

    html[dir="rtl"] .luxury-nav {
        direction: rtl !important;
    }

    html[dir="rtl"] .luxury-nav .nav-link {
        font-size: 6px !important;
        letter-spacing: 0 !important;
        padding: 0 5px !important;
    }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 390px) {

    .luxury-header {
        left: 5px !important;
        right: 5px !important;

        padding:
            0 5px 0 7px !important;

        gap: 4px !important;
    }

    .brand img {
        width: 30px !important;
        height: 30px !important;
    }

    .brand-name {
        font-size: 6px !important;
        letter-spacing: 1.4px !important;
    }

    .brand-name small {
        font-size: 3.5px !important;
    }

    .luxury-nav {
        gap: 1px !important;
    }

    .luxury-nav .nav-link {
        padding: 0 4px !important;
        font-size: 5.2px !important;
        letter-spacing: .35px !important;
    }

    html[dir="rtl"] .luxury-nav .nav-link {
        font-size: 5.5px !important;
        letter-spacing: 0 !important;
    }

    .menu-orb {
        width: 31px !important;
        height: 31px !important;

        min-width: 31px !important;
        min-height: 31px !important;

        flex-basis: 31px !important;
    }

    .menu-orb i {
        width: 12px !important;
    }
}/* =========================================
   COLORS — FINAL BILINGUAL TYPOGRAPHY
========================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');


/* =========================================
   ENGLISH — RESET
========================================= */

html[dir="ltr"] body,
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] p,
html[dir="ltr"] a,
html[dir="ltr"] button,
html[dir="ltr"] input,
html[dir="ltr"] select,
html[dir="ltr"] textarea,
html[dir="ltr"] label {

    letter-spacing: revert-layer;

}


/* =========================================
   ARABIC — ONE FONT EVERYWHERE
========================================= */

html[dir="rtl"] body,
html[dir="rtl"] body * {

    font-family:
        "IBM Plex Sans Arabic",
        Arial,
        sans-serif !important;

}


/* =========================================
   ARABIC — REMOVE ENGLISH SPACING
========================================= */

html[dir="rtl"] body * {

    letter-spacing: 0 !important;

}


/* =========================================
   ARABIC — NORMAL FONT WEIGHTS
========================================= */

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {

    font-weight:
        500 !important;

}


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

html[dir="rtl"] .hero-text h1 {

    font-family:
        "IBM Plex Sans Arabic",
        Arial,
        sans-serif !important;

    font-size:
        clamp(
            48px,
            7vw,
            105px
        ) !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

}


html[dir="rtl"] .hero-gradient {

    font-family:
        "IBM Plex Sans Arabic",
        Arial,
        sans-serif !important;

    font-style:
        normal !important;

    white-space:
        normal !important;

}


/* =========================================
   ABOUT
========================================= */

html[dir="rtl"] .about-main h2 {

    font-size:
        clamp(
            44px,
            6vw,
            95px
        ) !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

}


html[dir="rtl"] .gradient-text {

    font-family:
        "IBM Plex Sans Arabic",
        Arial,
        sans-serif !important;

    font-style:
        normal !important;

}


/* =========================================
   SERVICES
========================================= */

html[dir="rtl"] .services-heading h2 {

    font-size:
        clamp(
            46px,
            7vw,
            100px
        ) !important;

    line-height:
        1.2 !important;

}


html[dir="rtl"] .service-info h3 {

    font-size:
        clamp(
            25px,
            3vw,
            42px
        ) !important;

    line-height:
        1.35 !important;

}


html[dir="rtl"] .service-info p {

    line-height:
        1.8 !important;

}


/* =========================================
   WORK
========================================= */

html[dir="rtl"] .work-heading h2 {

    font-size:
        clamp(
            45px,
            7vw,
            100px
        ) !important;

    line-height:
        1.2 !important;

}


html[dir="rtl"] .work-info h3 {

    line-height:
        1.35 !important;

}


/* =========================================
   START PROJECT
========================================= */

html[dir="rtl"] .start-project-intro h2 {

    font-size:
        clamp(
            46px,
            7vw,
            95px
        ) !important;

    line-height:
        1.2 !important;

}


html[dir="rtl"] .start-project-intro p {

    line-height:
        1.9 !important;

}


html[dir="rtl"] .form-field input,
html[dir="rtl"] .form-field select,
html[dir="rtl"] .form-field textarea {

    font-size:
        14px !important;

    line-height:
        1.8 !important;

}


/* =========================================
   CONTACT
========================================= */

html[dir="rtl"] .contact-main h2 {

    font-size:
        clamp(
            44px,
            7vw,
            100px
        ) !important;

    line-height:
        1.2 !important;

}


html[dir="rtl"] .contact-action p {

    line-height:
        1.9 !important;

}


/* =========================================
   HEADER
========================================= */

html[dir="rtl"] .nav-link {

    font-size:
        9px !important;

    line-height:
        1.5 !important;

}


html[dir="rtl"] .brand-name {

    letter-spacing:
        2px !important;

}


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

html[dir="rtl"] .mobile-menu-links a {

    min-height:
        72px !important;

}


html[dir="rtl"] .mobile-menu-links span {

    font-size:
        clamp(
            20px,
            4vw,
            38px
        ) !important;

    line-height:
        1.5 !important;

    white-space:
        normal !important;

    overflow-wrap:
        break-word !important;

}


html[dir="rtl"] .language-button {

    font-size:
        11px !important;

}


/* =========================================
   PRELOADER
========================================= */

html[dir="rtl"] .preloader-logo,
html[dir="rtl"] .preloader-tagline,
html[dir="rtl"] .preloader-corner,
html[dir="rtl"] .preloader-count {

    letter-spacing:
        0 !important;

}


/* =========================================
   MOBILE — ARABIC
========================================= */

@media (max-width: 800px) {

    html[dir="rtl"] .hero-text h1 {

        font-size:
            44px !important;

        line-height:
            1.25 !important;

    }


    html[dir="rtl"] .about-main h2,
    html[dir="rtl"] .services-heading h2,
    html[dir="rtl"] .work-heading h2,
    html[dir="rtl"] .start-project-intro h2,
    html[dir="rtl"] .contact-main h2 {

        font-size:
            46px !important;

        line-height:
            1.3 !important;

        letter-spacing:
            0 !important;

    }


    html[dir="rtl"] .service-info h3 {

        font-size:
            25px !important;

        line-height:
            1.4 !important;

    }


    html[dir="rtl"] .service-info p {

        font-size:
            12px !important;

        line-height:
            1.9 !important;

    }


    html[dir="rtl"] .mobile-menu-links a {

        min-height:
            68px !important;

    }


    html[dir="rtl"] .mobile-menu-links span {

        font-size:
            21px !important;

        line-height:
            1.6 !important;

    }


    html[dir="rtl"] .start-project-intro p,
    html[dir="rtl"] .contact-action p {

        font-size:
            13px !important;

        line-height:
            1.9 !important;

    }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 390px) {

    html[dir="rtl"] .hero-text h1 {

        font-size:
            40px !important;

    }


    html[dir="rtl"] .about-main h2,
    html[dir="rtl"] .services-heading h2,
    html[dir="rtl"] .work-heading h2,
    html[dir="rtl"] .start-project-intro h2,
    html[dir="rtl"] .contact-main h2 {

        font-size:
            40px !important;

    }


    html[dir="rtl"] .mobile-menu-links span {

        font-size:
            20px !important;

    }

}