@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800&display=swap");

:root {
    --exec-bg: #0b1220;
    --exec-bg-soft: #10192b;
    --exec-surface: rgba(18, 27, 45, .82);
    --exec-surface-2: rgba(24, 36, 58, .88);
    --exec-surface-3: rgba(31, 45, 71, .96);

    --exec-card: #121d31;
    --exec-card-2: #17253d;
    --exec-card-3: #1d2d49;

    --exec-border: rgba(158, 177, 212, .16);
    --exec-border-strong: rgba(158, 177, 212, .28);

    --exec-text: #edf3ff;
    --exec-text-soft: #c6d3eb;
    --exec-text-muted: #98a7c4;

    --exec-primary: #74a6ff;
    --exec-primary-strong: #4a84f2;
    --exec-accent: #98b6ff;
    --exec-accent-2: #6ee7f9;
    --exec-success: #65d7a7;
    --exec-danger: #ff7d90;
    --exec-gold: #d2b06f;

    --exec-shadow:
        0 18px 40px rgba(0, 0, 0, .28);

    --exec-shadow-soft:
        0 10px 26px rgba(0, 0, 0, .18);

    --exec-ring:
        0 0 0 1px rgba(116, 166, 255, .22),
        0 10px 25px rgba(44, 76, 140, .24);

    --exec-radius: 26px;
    --exec-radius-small: 16px;
    --exec-gap: 24px;
}


html {
    background: var(--exec-bg);
}

body {
    position: relative;
    color: var(--exec-text);
    background: transparent;
    font-family: "Inter", sans-serif;
}

html[dir="rtl"] body {
    font-family: "Tajawal", "Inter", sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 14%, rgba(116, 166, 255, .12), transparent 22%),
        radial-gradient(circle at 85% 18%, rgba(110, 231, 249, .08), transparent 18%),
        radial-gradient(circle at 76% 76%, rgba(210, 176, 111, .05), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 42%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 92%);
}

a {
    color: var(--exec-accent);
    font-weight: 600;
    transition: color .18s ease,
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

a:hover {
    color: var(--exec-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
}


.rowraw {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
    padding: 0 !important;
}

.rowraw > * {
    min-width: 0;
    padding: 0 !important;
}


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

#header {
    padding: clamp(18px, 4vw, 48px);
    transition: min-height .32s ease,
        padding .32s ease,
        background .32s ease;
}

#header > .container {
    width: min(1220px, 100%);
    gap: 20px;
    padding: clamp(28px, 5vw, 58px);
    border: 1px solid var(--exec-border);
    border-radius: 34px;
    background: linear-gradient(
        145deg,
        rgba(18, 29, 49, .95),
        rgba(11, 19, 33, .92)
        );
    box-shadow: var(--exec-shadow),
        inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

#header > .container::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    inset-inline-end: -90px;
    top: -110px;
    background:
        radial-gradient(
            circle,
            rgba(116, 166, 255, .18),
            transparent 70%
        );
    pointer-events: none;
}

#header > .container::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 2px;
    inset-inline-start: 0;
    bottom: 0;
    background:
        linear-gradient(
            90deg,
            var(--exec-primary),
            rgba(110, 231, 249, .75),
            transparent
        );
    pointer-events: none;
}

html[dir="rtl"] #header > .container::after {
    inset-inline-start: auto;
    inset-inline-end: 0;
    background:
        linear-gradient(
            270deg,
            var(--exec-primary),
            rgba(110, 231, 249, .75),
            transparent
        );
}

#header h1 {
    position: relative;
    z-index: 2;
    font-size: clamp(42px, 7vw, 82px);
    line-height: .95;
    font-weight: 800;
    letter-spacing: -.04em;
}

#header h1 a,
#header h1 a:hover {
    display: inline-block;
    color: var(--exec-text);
}

#header h1 a::after {
    content: "";
    width: 100px;
    height: 4px;
    display: block;
    margin-top: 14px !important;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            var(--exec-primary),
            var(--exec-accent-2)
        );
    box-shadow:
        0 0 18px rgba(116,166,255,.24);
}

html[dir="rtl"] #header h1 a::after {
    background:
        linear-gradient(
            270deg,
            var(--exec-primary),
            var(--exec-accent-2)
        );
}

#header h2 {
    max-width: 860px;
    position: relative;
    z-index: 2;
    color: var(--exec-text-soft);
    font-size: clamp(18px, 2.3vw, 28px);
    line-height: 1.6;
    font-weight: 400;
}

#header h2 span {
    color: var(--exec-text);
    border-bottom: 2px solid rgba(116,166,255,.55);
    padding-bottom: 3px;
}

#header .social-links,
.contact .social-links {
    position: relative;
    z-index: 3;
    gap: 12px;
}

#header .social-links a,
.contact .social-links a {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid var(--exec-border-strong);
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        rgba(22, 35, 57, .95),
        rgba(12, 20, 36, .95)
        );
    color: var(--exec-text-soft);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

#header .social-links a:nth-child(3n/**/+2),
.contact .social-links a:nth-child(3n/**/+2) {
    color: var(--exec-primary);
}

#header .social-links a:nth-child(3n/**/+3),
.contact .social-links a:nth-child(3n/**/+3) {
    color: var(--exec-accent-2);
}

#header .social-links a:hover,
.contact .social-links a:hover {
    color: var(--exec-text);
    transform: translateY(-3px);
    border-color: rgba(116,166,255,.42);
    box-shadow: var(--exec-ring);
}

#header .social-links a i {
    font-size: 1.35rem;
}

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

.nav-menu {
    position: relative;
    z-index: 100;
}

.nav-menu > ul {
    align-items: center;
    gap: 10px;
    position: relative;
    justify-content: flex-end;
}

.nav-menu > ul > li {
    flex: 0 0 auto;
}

.nav-menu > ul > li > a {
    min-height: 42px;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid var(--exec-border);
    border-radius: 999px;
    background: rgba(20, 32, 53, .84);
    color: var(--exec-text-soft);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
}

.nav-menu > ul > li > a::before {
    display: none;
}

.nav-menu > ul > li > a:hover,
.nav-menu > ul > li.active > a,
.nav-menu > ul > li.submenu-open > a {
    color: var(--exec-text);
    border-color: rgba(116,166,255,.4);
    background:
        linear-gradient(
            145deg,
            rgba(32, 49, 79, .95),
            rgba(18, 30, 50, .95)
        );
    box-shadow: var(--exec-ring);
}

.nav-menu > ul > li > ul.expendable {
    top: calc(100% + 12px);
    z-index: 2000;
    min-width: 220px;
    max-width: min(330px, 86vw);
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--exec-border-strong);
    border-radius: 20px;
    background: linear-gradient(
        145deg,
        rgba(18, 29, 49, .98),
        rgba(10, 18, 31, .98)
        );
    box-shadow: 0 16px 36px rgba(0,0,0,.38);
    backdrop-filter: blur(16px);
    transform: translateY(-8px);
}

.nav-menu > ul > li:hover > ul.expendable,
.nav-menu > ul > li.submenu-open > ul.expendable {
    transform: translateY(0);
}


.nav-menu .expendable > li > a {
    min-height: 41px;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--exec-text-soft);
    font-weight: 500;
    white-space: normal;
}

.nav-menu .expendable > li > a:hover {
    color: var(--exec-text);
    border-color: rgba(116,166,255,.22);
    background: rgba(116,166,255,.08);
}

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

#header.header-top {
    min-height: 88px;
    background: linear-gradient(
        180deg,
        rgba(8, 13, 24, .95),
        rgba(10, 17, 31, .95)
        );
    border-bottom: 1px solid var(--exec-border);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    backdrop-filter: blur(18px);
}

#header.header-top > .container {
    gap: 20px;
    overflow: visible;
    border-radius: 0;
    backdrop-filter: none;
}

#header.header-top > .container::before,
#header.header-top > .container::after,
#header.header-top h2,
#header.header-top .social-links {
    display: none;
}

#header.header-top h1 {
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1;
}

#header.header-top h1 a::after {
    display: none;
}


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

section {
    top: 130px;
    padding: 0 16px 75px;
    transition: top .3s ease,
        opacity .3s ease;
}

section.section-show {
    top: 108px;
    gap: 25px;
}

section > .container {
    position: relative;
    gap: var(--exec-gap);
    padding: clamp(20px, 3vw, 34px);
    overflow: hidden;
    border: 1px solid var(--exec-border);
    border-radius: var(--exec-radius);
    background: linear-gradient(
        145deg,
        rgba(17, 27, 45, .93),
        rgba(11, 19, 34, .95)
        );
    box-shadow: var(--exec-shadow),
        inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(16px);
}

section > .container::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    inset-inline-end: -170px;
    top: -170px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(116,166,255,.12),
            transparent 70%
        );
    pointer-events: none;
}

section .container .container {
    padding: clamp(14px, 2vw, 22px);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 22px;
    background: linear-gradient(
        145deg,
        rgba(22, 34, 56, .82),
        rgba(13, 22, 38, .84)
        );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

/* ========================================
   TITLES
======================================== */

.section-title {
    gap: 13px;
}

.section-title h2 {
    min-height: 34px;
    padding: 5px 14px;
    border: 1px solid rgba(116,166,255,.28);
    border-radius: 999px;
    background: rgba(116,166,255,.08);
    color: var(--exec-accent);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .18em;
}

.section-title h2::after {
    display: none;
}

.section-title p {
    color: var(--exec-text);
    font-size: clamp(28px, 5vw, 48px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.03em;
}

.section-title p::after {
    width: 88px;
    height: 4px;
    padding: 0;
    margin-top: 10px !important;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--exec-primary),
        transparent
        );
}

html[dir="rtl"] .section-title p::after {
    background:
        linear-gradient(
            270deg,
            var(--exec-primary),
            transparent
        );
}

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


.about-me img,
.img-article,
.modal_pic,
.gallery .icon-box,
.main-video,
.list-video {
    border: 1px solid var(--exec-border-strong);
    border-radius: 24px;
    box-shadow:
        0 16px 30px rgba(0,0,0,.26);
}


.about-me .content h3 {
    display: inline-flex;
    padding: 7px 14px;
    border: 1px solid rgba(116,166,255,.26);
    border-radius: 14px;
    background: rgba(116,166,255,.08);
    color: var(--exec-text);
    font-size: clamp(21px, 3vw, 28px);
    font-weight: 700;
}

.about-me .content ul {
    gap: 9px;
}

.about-me .content ul li {
    gap: 9px;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    color: var(--exec-text-soft);
}

.about-me .content ul li:hover {
    border-color: rgba(116,166,255,.16);
    background: rgba(116,166,255,.05);
}

.about-me .content ul i {
    color: var(--exec-primary);
    font-size: 19px;
}

/* ========================================
   VIDEO ICON
======================================== */


.video-container video {
    border-radius: 20px;
}

#playIcon,
#pauseIcon {
    color: var(--exec-text);
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

/* ========================================
   COMMON CARDS
======================================== */


.counts .count-box,
.interests .icon-box,
.services .icon-box,
.contact .info-box,
.blog .icon-box,
.skill-card,
.cd-timeline-content,
.containerVideo .main-video-container,
.containerVideo .video-list-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(24, 37, 61, .92),
            rgba(15, 24, 41, .95)
        );
    color: var(--exec-text);
    box-shadow:
        var(--exec-shadow-soft),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.counts .count-box::before,
.interests .icon-box::before,
.services .icon-box::before,
.contact .info-box::before,
.skill-card::before,
.cd-timeline-content::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    inset-inline-end: -25px;
    top: -25px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(116,166,255,.08),
            transparent 72%
        );
    pointer-events: none;
}

/* ========================================
   COUNTS
======================================== */

.counts .count-box {
    min-height: 140px;
}

.counts .count-box i {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(116,166,255,.28);
    border-radius: 16px;
    background: rgba(116,166,255,.08);
    color: var(--exec-primary);
}

.counts .count-box span {
    color: var(--exec-text);
    font-size: 34px;
    font-weight: 800;
}

.counts .count-box p {
    color: var(--exec-text-muted);
    font-size: 15px;
    font-weight: 500;
}

/* ========================================
   SKILLS
======================================== */


.skills .progress {
    gap: 8px;
}

.skills .progress .skill {
    color: var(--exec-text-soft);
    font-size: 14px;
    font-weight: 600;
}


.skills .progress-bar-wrap {
    height: 14px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;
    background: rgba(6, 12, 24, .7);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.2);
}

.skills .progress-bar,
.barper20,
.barper40,
.barper60,
.barper80,
.barper100,
.barper {
    position: relative;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--exec-primary-strong),
        var(--exec-accent-2)
        );
}

/* ========================================
   SKILLS GRID
======================================== */

.skills-area,
.skills-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 22px;
}

.skill-card,
.skills-grid .skill-card {
    flex: 1 1 190px;
    max-width: 240px;
    min-width: 180px;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.skill-card:hover,
.skills-grid .skill-card:hover {
    transform: translateY(-5px);
    border-color: rgba(116,166,255,.18);
    box-shadow:
        0 18px 38px rgba(0,0,0,.24);
}

.skills-grid .skill-card .box {
    justify-content: center;
    gap: 14px;
}

.skills-grid .skill-card .percent {
    flex: 0 0 170px;
    border: 1px solid rgba(255,255,255,.06);
    background: radial-gradient(
        circle,
        rgba(30, 47, 77, .95),
        rgba(11, 18, 31, .95)
        );
    box-shadow: inset 0 0 30px rgba(116,166,255,.05);
}

.skills-grid .skill-card .percent::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 0;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 50%;
    pointer-events: none;
}

.skills-grid .skill-card svg {
    overflow: visible;
}

.skills-grid .skill-card svg circle {
    stroke-linecap: round;
}

.skills-grid .skill-card svg circle:first-child {
    stroke: rgba(255,255,255,.08) !important;
}

.skills-grid .skill-card svg circle:nth-child(2) {
    stroke: var(--exec-primary) !important;
}

.skills-grid .skill-card .per20 svg circle:nth-child(2) {
    stroke: var(--exec-danger) !important;
}

.skills-grid .skill-card .per40 svg circle:nth-child(2) {
    stroke: var(--exec-gold) !important;
}

.skills-grid .skill-card .per60 svg circle:nth-child(2) {
    stroke: var(--exec-primary-strong) !important;
}

.skills-grid .skill-card .per80 svg circle:nth-child(2) {
    stroke: var(--exec-accent-2) !important;
}

.skills-grid .skill-card .per100 svg circle:nth-child(2),
.skills-grid .skill-card .per svg circle:nth-child(2) {
    stroke: var(--exec-success) !important;
}

.skills-grid .skill-card .number {
    width: 110px;
    height: 110px;
    gap: 5px;
    padding: 10px;
    border: 1px solid rgba(116,166,255,.18);
    background: linear-gradient(
        145deg,
        rgba(20, 33, 56, .98),
        rgba(10, 18, 31, .98)
        );
    text-align: center;
}

.skills-grid .skill-card .number h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    color: var(--exec-text);
    font-size: 30px;
    line-height: 1;
}

.skills-grid .skill-card .number h2 i {
    font-size: inherit;
}

.skills-grid .skill-card .number p {
    color: var(--exec-text-muted);
    font-size: 12px;
    line-height: 1.05;
    font-weight: 600;
}

.skills-grid .skill-card .skill-percentage {
    min-width: 72px;
    min-height: 34px;
    border: 1px solid rgba(116,166,255,.2);
    border-radius: 999px;
    background: rgba(116,166,255,.08);
    color: var(--exec-text);
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
}

/* ========================================
   INTERESTS / SERVICES / CONTACT
======================================== */

.interests .icon-box,
.services .icon-box,
.contact .info-box {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.interests .icon-box:hover,
.services .icon-box:hover,
.contact .info-box:hover {
    transform: translateY(-5px);
    border-color: rgba(116,166,255,.18);
    background:
        linear-gradient(
            145deg,
            rgba(28, 42, 68, .96),
            rgba(16, 26, 44, .97)
        );
    box-shadow:
        0 18px 38px rgba(0,0,0,.24);
}


.interests .icon-box i {
    color: var(--exec-primary);
    font-size: 28px;
}

.interests .icon-box h3 {
    color: var(--exec-text);
}


.services .icon-box .icon {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border: 1px solid rgba(116,166,255,.18);
    border-radius: 22px;
    background: rgba(116,166,255,.08);
}


.services .icon-box .icon i {
    color: var(--exec-primary);
    font-size: 28px;
}

.services .icon-box h4,
.services .icon-box h5,
.contact .info-box h3 {
    color: var(--exec-text);
}

.services .icon-box p,
.contact .info-box p {
    color: var(--exec-text-muted);
}

/* ========================================
   CAROUSEL
======================================== */


.wrapper .carousel {
    align-items: stretch;
    gap: 16px;
    scroll-behavior: smooth;
    padding: 8px;
}


.wrapper .carousel .card {
    flex: 0 0 calc((100% - 32px) / 3);
    min-width: 0;
    min-height: 342px;
    gap: 13px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 24px;
    background: linear-gradient(
        145deg,
        rgba(22, 35, 56, .96),
        rgba(13, 22, 38, .98)
        );
    box-shadow: var(--exec-shadow-soft);
}

.wrapper .carousel .card .img {
    width: 148px;
    height: 148px;
    flex: 0 0 148px;
    border: 1px solid rgba(116,166,255,.18);
    background: radial-gradient(
        circle,
        rgba(36, 56, 90, .92),
        rgba(13, 22, 38, .98)
        );
}

.wrapper .carousel .card .img img {
    width: 138px;
    height: 138px;
    border: 0;
}

.wrapper .carousel .card h4,
.wrapper .carousel .card span {
    width: 100%;
    overflow: hidden;
    color: var(--exec-text);
    text-overflow: ellipsis;
}

.wrapper > i {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(116,166,255,.24);
    background: linear-gradient(
        145deg,
        rgba(20, 32, 52, .98),
        rgba(10, 17, 30, .98)
        );
    color: var(--exec-text);
    box-shadow: var(--exec-shadow-soft);
}

.wrapper > i:first-child {
    inset-inline-start: -12px;
}

.wrapper > i:last-child {
    inset-inline-end: -12px;
}

/* ========================================
   BLOCKQUOTE
======================================== */

blockquote {
    padding: 20px;
    border: 1px solid rgba(116,166,255,.16);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(23, 35, 57, .98),
            rgba(15, 25, 42, .98)
        );
    color: var(--exec-text-soft);
    box-shadow:
        var(--exec-shadow-soft);
}

/* ========================================
   BLOG
======================================== */

.blog .icon-box {
    min-height: 280px;
}

.blog .icon-box::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(
            180deg,
            rgba(7, 12, 22, .06),
            rgba(8, 14, 25, .92)
        );
}


.blog .icon-box:hover::after {
    background:
        linear-gradient(
            180deg,
            rgba(15, 24, 42, .2),
            rgba(9, 17, 31, .95)
        );
}

.blog .icon-box h5 {
    color: var(--exec-text);
}

.blog .icon-box p,
.blog .icon-box .capital {
    color: var(--exec-text-soft);
}

.blog .icon-box hr {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(116,166,255,.6),
        transparent
        );
    opacity: 1;
}

.h4-two-lines,
.h4-two-lines2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

.p-one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.capital {
    flex-wrap: wrap;
    gap: 6px;
    text-transform: uppercase;
}

.md5 {
    display: inline-flex;
}

/* ========================================
   GALLERY
======================================== */

.gallery {
    gap: 16px;
}

.gallery .image-box {
    padding: 0 !important;
}

.gallery_box {
    transition: transform .18s ease,
        filter .18s ease;
}

.gallery_box:hover {
    transform: translateY(-4px);
}

.gallery .icon-box {
    width: 100%;
    min-height: 220px;
    overflow: hidden;
}

.gallery_box:hover::after {
    inset: 8px;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: linear-gradient(
        180deg,
        transparent 24%,
        rgba(7, 13, 23, .94)
        );
    color: var(--exec-text);
    font-size: 17px;
    font-weight: 700;
    text-align: start;
}

/* ========================================
   DIVIDERS
======================================== */

.span-line,
.hr-line {
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(116,166,255,.8),
        transparent
        );
}

/* ========================================
   VIDEOS
======================================== */


.containerVideo .main-video-container {
    min-width: 0;
}

.containerVideo .video-list-container {
    flex: 1 1 300px;
    min-width: 0;
    max-height: 520px;
    overflow-y: auto;
}


.containerVideo .main-vid-title h3,
.containerVideo .list-title h3 {
    color: var(--exec-text);
}

.containerVideo .main-vid-title span,
.containerVideo .list-title span {
    color: var(--exec-text-muted);
}

.containerVideo .video-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.containerVideo .video-list-container .list {
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 16px;
    background: rgba(255,255,255,.02);
    transition: transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.containerVideo .video-list-container .list:hover {
    transform: translateX(4px);
    border-color: rgba(116,166,255,.16);
    background: rgba(116,166,255,.06);
}

html[dir="rtl"] .containerVideo .video-list-container .list:hover {
    transform: translateX(-4px);
}

.containerVideo .video-list-container .list.active {
    border-color: rgba(116,166,255,.22);
    background: rgba(116,166,255,.08);
}


/* ========================================
   TIMELINE
======================================== */

#cd-timeline {
    gap: 24px;
}

#cd-timeline::before {
    inset-inline-start: 34px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgba(116,166,255,.75),
        rgba(110,231,249,.35)
        );
}

.cd-timeline-block {
    padding-inline-start: 4px;
}

.cd-timeline-img {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 68px;
    border: 1px solid rgba(116,166,255,.22);
    background: linear-gradient(
        145deg,
        rgba(31, 47, 78, .98),
        rgba(13, 22, 38, .98)
        );
    box-shadow: 0 8px 16px rgba(0,0,0,.18);
}

.cd-timeline-img .img,
.cd-timeline-img img {
    width: 100%;
    height: 100%;
}


.cd-timeline-content h2 {
    color: var(--exec-text);
    font-size: clamp(21px, 3vw, 28px);
}

.cd-timeline-content h3 {
    color: var(--exec-primary);
    font-weight: 600;
}

.cd-timeline-content p,
.cd-timeline-content .cd-date,
.cd-timeline-content .work_ex {
    color: var(--exec-text-soft);
}


.cd-timeline-content li,
.article li,
.sources li {
    position: relative;
    padding: 9px 11px;
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
}

.icon-background {
    color: var(--exec-primary);
    opacity: .08;
}

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

.contact .info-box {
    min-height: 150px;
}

.contact .info-box > i {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(116,166,255,.18);
    border-radius: 18px;
    background: rgba(116,166,255,.08);
    color: var(--exec-primary);
}


/* ========================================
   FORM
======================================== */

.php-email-form {
    gap: 15px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 24px;
    background: linear-gradient(
        145deg,
        rgba(20, 32, 53, .95),
        rgba(12, 21, 37, .97)
        );
    box-shadow: var(--exec-shadow-soft);
}


.php-email-form input,
.php-email-form textarea,
.form-control {
    min-height: 49px;
    padding: 12px 15px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 15px;
    background: rgba(7, 13, 24, .72);
    color: var(--exec-text);
    font-weight: 500;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.14);
}

.php-email-form input::placeholder,
.php-email-form textarea::placeholder {
    color: var(--exec-text-muted);
}

.php-email-form textarea {
    min-height: 150px;
}

.php-email-form input:focus,
.php-email-form textarea:focus,
.form-control:focus {
    border-color: rgba(116,166,255,.34);
    background: rgba(10, 18, 31, .9);
    box-shadow:
        0 0 0 1px rgba(116,166,255,.22);
}

.php-email-form .loading,
.php-email-form .error-message,
.php-email-form .sent-message {
    display: none;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(7, 13, 24, .8);
    text-align: center;
}

.php-email-form .loading {
    color: var(--exec-primary);
}


.php-email-form .error-message {
    color: var(--exec-danger);
    border-color: rgba(255,125,144,.22);
}


.php-email-form .sent-message {
    color: var(--exec-success);
    border-color: rgba(101,215,167,.2);
}


/* ========================================
   BUTTONS
======================================== */

button,
.btn,
.php-email-form button[type="submit"],
.services button,
.blog button {
    min-height: 45px;
    padding: 9px 21px;
    border: 1px solid rgba(116,166,255,.24);
    border-radius: 999px;
    background: linear-gradient(
        145deg,
        rgba(42, 68, 116, .95),
        rgba(28, 48, 86, .95)
        );
    color: var(--exec-text);
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(16,28,52,.28);
    transition: transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        border-color .18s ease;
}

button:hover,
.btn:hover,
.php-email-form button[type="submit"]:hover,
.services button:hover,
.blog button:hover {
    color: var(--exec-text);
    transform: translateY(-2px);
    border-color: rgba(116,166,255,.36);
    background:
        linear-gradient(
            145deg,
            rgba(52, 82, 138, .96),
            rgba(34, 57, 99, .96)
        );
    box-shadow:
        0 14px 26px rgba(16,28,52,.34);
}

button:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   ARTICLE
======================================== */

.section-title p.article_size {
    color: var(--exec-text-muted);
}


.article {
    padding: 20px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 22px;
    background: linear-gradient(
        145deg,
        rgba(19, 30, 50, .96),
        rgba(13, 21, 36, .98)
        );
    color: var(--exec-text-soft);
}


/* ========================================
   3D
======================================== */


.card-3d {
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 34, 56, .94),
            rgba(12, 20, 35, .96)
        );
}

.object-3d {
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 20px;
    background:
        radial-gradient(
            circle,
            rgba(31, 46, 75, .85),
            rgba(13, 21, 36, .96)
        );
}

/* ========================================
   PAGINATION
======================================== */


#pagination button,
#pagination a {
    width: 44px;
    min-width: 44px;
    height: 44px;
}

#pagination .active,
#pagination button:hover,
#pagination a:hover {
    color: var(--exec-text);
    border-color: rgba(116,166,255,.3);
    background: rgba(116,166,255,.1);
}

/* ========================================
   MODAL
======================================== */

.modal-content {
    padding: 20px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    background: linear-gradient(
        145deg,
        rgba(17, 27, 45, .98),
        rgba(10, 18, 31, .99)
        );
    color: var(--exec-text);
    box-shadow: 0 25px 70px rgba(0,0,0,.52);
}


.modal-backdrop {
    background: #050a14;
}

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

.mobile-nav-toggle {
    width: 52px;
    height: 52px;
    top: 14px;
    inset-inline-end: 14px;
    border: 1px solid rgba(116,166,255,.24);
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        rgba(20, 32, 53, .98),
        rgba(10, 17, 30, .98)
        );
    color: var(--exec-text);
    box-shadow: 0 8px 18px rgba(0,0,0,.26);
}

.mobile-nav-toggle i {
    color: var(--exec-text);
    font-size: 23px;
}

.mobile-nav {
    inset-inline: 14px;
    max-height: calc(100svh - 94px);
    padding: 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    background: linear-gradient(
        145deg,
        rgba(18, 29, 49, .98),
        rgba(10, 18, 31, .99)
        );
    box-shadow: 0 24px 60px rgba(0,0,0,.48);
    backdrop-filter: blur(24px);
    transition: opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}

.mobile-nav > ul {
    gap: 8px;
}


.mobile-nav a {
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 13px;
    background: rgba(255,255,255,.02);
    color: var(--exec-text-soft);
    font-weight: 600;
}

.mobile-nav li.active > a,
.mobile-nav a:hover,
.mobile-nav li.submenu-open > a {
    color: var(--exec-text);
    border-color: rgba(116,166,255,.16);
    background: rgba(116,166,255,.08);
}

.mobile-nav ul.expendable {
    background: transparent;
}


.mobile-nav-overly {
    width: 100%;
    height: 100%;
    background: rgba(3, 8, 16, .78);
    backdrop-filter: blur(6px);
}


.about-img-cont::before {
    width: 80px;
    left: -5%;
    top: -5%;
    background: url(../img/about/normal-1.webp) center bottom / contain no-repeat;
    aspect-ratio: 500 / 514;
}

.about-img-cont::after {
    content: "";
    position: absolute;
    width: 100px;
    right: -3%;
    bottom: -6%;
    background: url(../img/about/normal-2.webp) center bottom / contain no-repeat;
    pointer-events: none;
    z-index: 2;
    aspect-ratio: 980 / 500;
}

/* ========================================
   CREDITS
======================================== */

.credits {
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;
    background: rgba(10, 17, 30, .88);
    color: var(--exec-text-muted);
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,.24);
    backdrop-filter: blur(12px);
}

.credits a {
    color: var(--exec-accent);
}


/* ========================================
   SCROLLBAR
======================================== */

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: #0a1120;
}

::-webkit-scrollbar-thumb {
    border: 2px solid #0a1120;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            rgba(116,166,255,.92),
            rgba(64,110,201,.92)
        );
}

::selection {
    background: rgba(116,166,255,.28);
    color: var(--exec-text);
}

/* ========================================
   LARGE
======================================== */

@media (min-width: 992px) {
    .nav-menu,
    .d-log {
        display: flex !important;
    }

    .col-lg-2 {
        flex: 1 1 calc((100% - 100px) / 6);
        max-width: calc((100% - 100px) / 6);
    }

    .col-lg-3 {
        flex: 1 1 calc((100% - 60px) / 4);
        max-width: calc((100% - 60px) / 4);
    }

    .col-lg-4 {
        flex: 1 1 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }

    .col-lg-6 {
        flex: 1 1 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }

    .col-lg-8 {
        flex: 1 1 calc(66.666% - 8px);
        max-width: calc(66.666% - 8px);
    }

    .col-lg-9 {
        flex: 1 1 calc(75% - 5px);
        max-width: calc(75% - 5px);
    }
}

/* ========================================
   TABLET
======================================== */

@media (max-width: 768px) {
    .skills-content {
        flex-direction: column;
    }

    .fifties {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .col-md-3 {
        flex: 1 1 calc((100% - 60px) / 4);
        max-width: calc((100% - 60px) / 4);
    }

    .col-md-4 {
        flex: 1 1 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }

    .col-md-6 {
        flex: 1 1 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }

    .col-md-8 {
        flex: 1 1 calc(66.666% - 8px);
        max-width: calc(66.666% - 8px);
    }
}

/* ========================================
   TABLET + MOBILE
======================================== */

@media screen and (max-width: 992px) {
    .about-img-cont::after,
    .about-img-cont::before {
        content: none !important;
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    #header {
        padding: 14px;
    }

    #header > .container {
        width: 100%;
        padding: 25px;
        border-radius: 28px;
    }

    #header.header-top {
        min-height: 76px;
        padding: 8px 76px 8px 14px;
    }

    html[dir="rtl"] #header.header-top {
        padding: 8px 14px 8px 76px;
    }

    #header.header-top > .container {
        min-height: 56px;
    }

    #header.header-top h1 {
        font-size: 27px;
    }

    #header.header-top .nav-menu {
        display: none !important;
    }

    .mobile-nav-toggle {
        display: inline-flex !important;
    }

    section,
    section.section-show {
        top: 88px;
        padding: 0 10px 58px;
    }

    section > .container {
        padding: 20px;
        border-radius: 24px;
    }

    .wrapper .carousel .card {
        flex-basis: calc((100% - 16px) / 2);
    }

    .credits {
        display: none;
    }
}

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

@media (max-width: 767.98px) {
    .row,
    .form-row,
    .rowraw {
        gap: 16px;
    }

    .row > [class*="col-"],
    .form-row > [class*="col-"] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    #header h1 {
        font-size: clamp(38px, 12vw, 58px);
    }

    #header h2 {
        font-size: 18px;
        line-height: 1.7;
    }

    .section-title p {
        font-size: clamp(27px, 9vw, 38px);
    }

    .section-title h2 {
        font-size: 11px;
    }

    .about-me .content .row {
        gap: 10px;
    }

    .containerVideo {
        flex-direction: column;
    }

    .containerVideo .main-video-container,
    .containerVideo .video-list-container {
        width: 100%;
        flex: 1 1 auto;
    }

    .containerVideo .video-list-container {
        max-height: none;
    }

    #cd-timeline::before {
        inset-inline-start: 27px;
    }

    .cd-timeline-img {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .cd-timeline-block {
        gap: 13px;
    }

    .wrapper .carousel .card {
        flex-basis: 100%;
    }

    .wrapper > i {
        display: none;
    }

    .gallery .icon-box {
        min-height: 260px;
    }

    .skills-grid {
        gap: 16px;
    }

    .skills-grid .skill-card {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
        min-width: 145px;
        padding: 14px;
    }

    .skills-grid .skill-card .percent {
        width: 150px;
        height: 150px;
        flex-basis: 150px;
    }

    .skills-grid .skill-card svg {
        width: 132px;
        height: 132px;
    }

    .skills-grid .skill-card .number {
        width: 94px;
        height: 94px;
    }

    .skills-grid .skill-card .number h2 {
        font-size: 27px;
    }

    .skills-grid .skill-card .number p {
        font-size: 11px;
    }
}

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

@media (max-width: 479.98px) {
    #header {
        padding: 10px;
    }

    #header > .container {
        gap: 14px;
        padding: 20px;
    }

    #header h1 {
        font-size: 37px;
    }

    #header .social-links,
    .contact .social-links {
        gap: 9px;
    }

    #header .social-links a,
    .contact .social-links a {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    #header.header-top h1 {
        font-size: 23px;
    }

    section > .container {
        padding: 15px;
    }

    section .container .container {
        padding: 13px;
    }

    .section-title {
        gap: 10px;
    }

    .section-title p {
        font-size: 28px;
    }

    .counts .count-box,
    .interests .icon-box,
    .services .icon-box,
    .contact .info-box,
    .blog .icon-box,
    .skill-card,
    .cd-timeline-content {
        padding: 16px;
    }

    .containerVideo .video-list-container .list {
        flex-direction: column;
        align-items: stretch;
    }

    .containerVideo .video-list-container .list-video {
        width: 100%;
        flex-basis: auto;
    }

    .php-email-form {
        padding: 14px;
    }

    .mobile-nav {
        top: 72px;
        inset-inline: 9px;
        max-height: calc(100svh - 82px);
        padding: 10px;
        border-radius: 19px;
    }

    .mobile-nav-toggle {
        width: 48px;
        height: 48px;
        top: 11px;
        inset-inline-end: 11px;
    }

    .article {
        padding: 14px;
    }

    .img-article {
        max-height: 360px;
    }

    .skills-grid .skill-card {
        flex: 1 1 100%;
        max-width: 250px;
    }
}

.style-modal-backdrop {
    background:
        radial-gradient(
            circle at 18% 14%,
            rgba(116, 166, 255, .1),
            transparent 24%
        ),
        radial-gradient(
            circle at 85% 18%,
            rgba(110, 231, 249, .07),
            transparent 20%
        ),
        rgba(5, 9, 17, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.style-modal-dialog {
    border: 1px solid var(--exec-border-strong);
    border-radius: var(--exec-radius);
    background:
        linear-gradient(
            145deg,
            rgba(18, 29, 49, .98),
            rgba(11, 19, 33, .98)
        );
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.style-modal-close {
    border: 1px solid var(--exec-border-strong);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            rgba(31, 45, 71, .96),
            rgba(17, 28, 47, .96)
        );
    color: var(--exec-text-soft);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

.style-modal-close:hover {
    color: var(--exec-text);
    border-color: rgba(116, 166, 255, .42);
    background:
        linear-gradient(
            145deg,
            rgba(38, 55, 88, .98),
            rgba(21, 34, 57, .98)
        );
    box-shadow: var(--exec-ring);
    transform: rotate(90deg);
}

.style-modal-preview {
    border-inline-end: 1px solid var(--exec-border);
    background: radial-gradient(
        circle at 50% 38%,
        rgba(116, 166, 255, .12),
        transparent 38%
        ),
        radial-gradient(
        circle at 50% 72%,
        rgba(110, 231, 249, .05),
        transparent 42%
        ),
        linear-gradient(
        145deg,
        rgba(22, 34, 56, .92),
        rgba(13, 22, 38, .95)
        );
}

.style-modal-preview::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: 48%;
    left: 50%;
    border: 1px solid rgba(116, 166, 255, .1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.style-modal-preview::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 2px;
    bottom: 105px;
    left: 50%;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--exec-primary),
            var(--exec-accent-2),
            transparent
        );
    transform: translateX(-50%);
    opacity: .55;
    pointer-events: none;
}

.style-modal-animated {
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .22));
}


.style-modal-preview-info h3 {
    color: var(--exec-text);
    font-family: "Inter", sans-serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.style-modal-change {
    border: 1px solid rgba(116, 166, 255, .28);
    border-radius: 999px;
    background:
        linear-gradient(
            145deg,
            rgba(32, 49, 79, .96),
            rgba(18, 30, 50, .96)
        );
    color: var(--exec-text);
    font-family: "Inter", sans-serif;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

.style-modal-change:hover {
    color: var(--exec-text);
    border-color: rgba(116, 166, 255, .48);
    background:
        linear-gradient(
            145deg,
            rgba(38, 58, 94, .98),
            rgba(22, 36, 60, .98)
        );
    box-shadow: var(--exec-ring);
    transform: translateY(-2px);
}

.style-modal-selector {
    background:
        linear-gradient(
            145deg,
            rgba(17, 27, 45, .95),
            rgba(11, 19, 34, .97)
        );
}

.style-modal-header {
    color: var(--exec-text);
}

.style-modal-header > i {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(116, 166, 255, .22);
    border-radius: 15px;
    background: rgba(116, 166, 255, .08);
    color: var(--exec-primary);
}

.style-modal-header h2 {
    color: var(--exec-text);
    font-family: "Inter", sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
}

.style-modal-item {
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--exec-radius-small);
    background:
        linear-gradient(
            145deg,
            rgba(24, 37, 61, .92),
            rgba(15, 24, 41, .95)
        );
    color: var(--exec-text);
    box-shadow:
        var(--exec-shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, .03);
}

.style-modal-item:hover {
    border-color: rgba(116, 166, 255, .2);
    background:
        linear-gradient(
            145deg,
            rgba(29, 45, 73, .96),
            rgba(17, 28, 47, .97)
        );
    box-shadow:
        0 16px 34px rgba(0, 0, 0, .24);
    transform: translateY(-3px);
}

.style-modal-item.active {
    border-color: rgba(116, 166, 255, .38);
    box-shadow: var(--exec-ring);
}

.style-modal-image {
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    background:
        radial-gradient(
            circle,
            rgba(36, 56, 90, .9),
            rgba(13, 22, 38, .98)
        );
}

.style-modal-info {
    padding: 13px 15px;
}

.style-modal-name {
    color: var(--exec-text-soft);
    font-family: "Inter", sans-serif;
    font-weight: 600;
}

.style-modal-item.active .style-modal-name {
    color: var(--exec-text);
}

.style-modal-selected {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid rgba(116, 166, 255, .3);
    border-radius: 50%;
    background: rgba(116, 166, 255, .1);
    color: var(--exec-primary);
    transform: scale(.7);
    transition: opacity .18s ease,
        transform .18s ease;
}

.style-modal-item.active .style-modal-selected {
    transform: scale(1);
}

html[dir="rtl"] .style-modal-preview-info h3,
html[dir="rtl"] .style-modal-change,
html[dir="rtl"] .style-modal-header h2,
html[dir="rtl"] .style-modal-name {
    font-family: "Tajawal", "Inter", sans-serif;
}

@media (max-width: 800px) {
    .style-modal-preview {
        border-inline-end: 0;
        border-bottom: 1px solid var(--exec-border);
    }

    .style-modal-preview::before {
        width: 250px;
        height: 250px;
    }

    .style-modal-preview::after {
        width: 170px;
    }
}