/* ------------------------------------------------------------ *\
 * CSS VARIABLES
\* ------------------------------------------------------------ */

:root {
    /**
     * COLORS
     */

    /* Primary */
    --main-color: #510A66;
    --success-color: #31e443;
    --warning-color: #e4cc31;
    --error-color: #e43131;

    /* Neutral */
    --bg-color: #ffffff;
    --text-color: #000000;
    --second-color: #6a6a6a;
    --second-bg-color: #f4f3ee;
    --border-color: #e9e9e9;

    /**
     * TYPOGRAPHY
     */

    /* Font Size */
    --fs-h1: 40px;
    --fs-h2: 30px;
    --fs-h3: 20px;
    --fs-h4: 18px;
    --fs-h5: 16px;
    --fs-h6: 15px;
    --fs-p: 14px;
    --fs-small: 12px;

    /* Font Weight */
    --fw-bold: 500;
    --fw-semi-bold: 500;
    --fw-medium: 500;
    --fw-regular: 400;

    /* Line Height */
    --lh-h1: 50px;
    --lh-h2: 36px;
    --lh-h3: 28px;
    --lh-h4: 26px;
    --lh-h5: 24px;
    --lh-h6: 22px;
    --lh-p: 22px;
    --lh-small: 20px;

    /**
     * BORDER RADIUS
     */
    --rounded-0: 0;
    --rounded-2: 2px;
    --rounded-4: 4px;
    --rounded-8: 8px;
    --rounded-10: 10px;
    --rounded-12: 12px;
    --rounded-16: 16px;
    --rounded-24: 24px;
    --rounded-40: 40px;
    --rounded-full: 9999px;
}

/* ------------------------------------------------------------ *\
 * RESET
\* ------------------------------------------------------------ */

*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

ul,
ol,
menu {
    padding: 0 !important;
    margin: 0 !important;
}

li {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

a,
img,
span,
label,
input,
select,
button,
textarea { display: inline-block; }

a {
    font-family: var(--font-family) !important;
    color: var(--text-color) !important;
    text-decoration: none !important;
}

img { height: auto; }

label {
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

input,
select,
button,
textarea {
    font-family: var(--font-family) !important;
    box-shadow: 0 0 0 transparent !important;
    color: var(--text-color) !important;
    background: none;
    border: none;
}

input,
select,
textarea,
[contenteditable="true"] {
    outline: none !important;
    width: 100%;
}

input::placeholder { color: var(--second-color) !important; }

textarea::placeholder { color: var(--second-color) !important; }

select { color: var(--second-color) !important; }

select[selected] { color: var(--main-color) !important; }

textarea { resize: none !important; }

button { cursor: pointer; }

button:disabled { pointer-events: none; }

form { width: 100%; }

html {
    scroll-behavior: smooth;
    font-size: 62.5%;
}

body {
    font-family: var(--font-family) !important;
    background-color: var(--bg-color);
    color: var(--text-color) !important;
    font-size: normal;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-block-end: 70px;
}

body.load { overflow-y: visible; }

body[lang="en"] { --font-family: "Kumbh Sans", sans-serif; }

body[lang="ar"] { --font-family: "Rubik", sans-serif; }

html,
body {
    width: 100%;
    min-height: 100%;
}

::selection {
  background-color: var(--main-color);
  color: var(--text-color);
}

/* ------------------------------------------------------------ *\
 * REUSED STYLE
\* ------------------------------------------------------------ */

.section { padding-block-end: 80px; }

.container {
    padding-inline: 16px !important;
    margin-inline: auto;
}

.img-cover {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.main {
    padding-block: 130px 70px;
    min-height: 100dvh;
}

.title-section { margin-block-end: 44px; }

.title-section .title {
    font-size: var(--fs-h2) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-h2) !important;
}

.custom-scrollbar-hidden::-webkit-scrollbar { display: none; }

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    border-radius: var(--rounded-full);
}

.custom-scrollbar::-webkit-scrollbar-track {
    background-color: var(--border-color);
    border-radius: var(--rounded-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--text-color);
    border-radius: var(--rounded-full);
}

:has(> .state-layer) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}

.state-layer {
  position: absolute;
  inset: 0;
  background-color: var(--state-layer-bg);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: all 0.4s;
}

:has(> .state-layer):hover > .state-layer { opacity: 0.12; }

:has(> .state-layer):is(:focus, :focus-visible, :focus-within) > .state-layer { opacity: 0.14; }

:has(> .state-layer):active > .state-layer { opacity: 0.18; }

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-h5) !important;
    font-weight: 600 !important;
    line-height: var(--lh-h5) !important;
    border-bottom: 2px solid var(--text-color) !important;
    max-width: max-content;
    text-decoration: none;
    transition: all 0.4s;
}

.btn-link:hover {
    color: var(--main-color) !important;
    border-bottom: 2px solid var(--main-color) !important;
}

html[dir="rtl"] .arrow-dir { transform: rotateY(180deg); }

.icon-active.active svg { fill: var(--text-color); }

.hover { transition: color 0.4s; }

.hover:hover { color: var(--main-color) !important; }

.hover.active { color: var(--main-color) !important; }

.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.product-color {
  border: 1.8px solid transparent !important;
  background-color: var(--bg-product-color) !important;
  color: var(--bg-product-color) !important;
  overflow: hidden;
  border-radius: var(--rounded-full) !important;
  min-width: 18px;
  max-width: 18px;
  min-height: 18px;
  max-height: 18px;
  opacity: 1 !important;
  margin: 0 !important;
  transition: all 0.4s;
}

.product-color.active { border-color: var(--text-color) !important; }

/* ------------------------------------------------------------ *\
 * UTILITIES - TYPOGRAPHY
\* ------------------------------------------------------------ */

h1,
.h1 {
    font-size: var(--fs-h1) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-h1) !important;
    padding: 0 !important;
    margin: 0 !important;
}

h2,
.h2 {
    font-size: var(--fs-h2) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-h2) !important;
    padding: 0 !important;
    margin: 0 !important;
}

h3,
.h3 {
    font-size: var(--fs-h3) !important;
    font-weight: var(--fw-semi-bold) !important;
    line-height: var(--lh-h3) !important;
    padding: 0 !important;
    margin: 0 !important;
}

h4,
.h4 {
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semi-bold) !important;
    line-height: var(--lh-h4) !important;
    padding: 0 !important;
    margin: 0 !important;
}

h5,
.h5 {
    font-size: var(--fs-h5) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-h5) !important;
    padding: 0 !important;
    margin: 0 !important;
}

h6,
.h6 {
    font-size: var(--fs-h6) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-h6) !important;
    padding: 0 !important;
    margin: 0 !important;
}

p,
.p {
    font-size: var(--fs-p) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-p) !important;
    padding: 0 !important;
    margin: 0 !important;
}

small,
.small {
    font-size: var(--fs-small) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-small) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ------------------------------------------------------------ *\
 * UTILITIES - COLORS
\* ------------------------------------------------------------ */

/**
 * TEXT
 */
.text-main-color { color: var(--main-color) !important; }

.text-success-color { color: var(--success-color) !important; }

.text-warning-color { color: var(--warning-color) !important; }

.text-error-color { color: var(--error-color) !important; }

.text-bg-color { color: var(--bg-color) !important; }

.text-color { color: var(--text-color) !important; }

.text-second-color { color: var(--second-color) !important; }

.text-second-bg-color { color: var(--second-bg-color) !important; }

.text-border-color { color: var(--border-color) !important; }

/**
 * BG
 */
.bg-main-color { background-color: var(--main-color) !important; }

.bg-success-color { background-color: var(--success-color) !important; }

.bg-warning-color { background-color: var(--warning-color) !important; }

.bg-error-color { background-color: var(--error-color) !important; }

.bg-color { background-color: var(--bg-color) !important; }

.bg-text-color { background-color: var(--text-color) !important; }

.bg-second-color { background-color: var(--second-color) !important; }

.bg-second-bg-color { background-color: var(--second-bg-color) !important; }

.bg-border-color { background-color: var(--border-color) !important; }

/**
 * BORDER
 */
.border-main-color { border-color: var(--main-color) !important; }

.border-success-color { border-color: var(--success-color) !important; }

.border-warning-color { border-color: var(--warning-color) !important; }

.border-error-color { border-color: var(--error-color) !important; }

.border-color { border-color: var(--bg-color) !important; }

.border-text-color { border-color: var(--text-color) !important; }

.border-second-color { border-color: var(--second-color) !important; }

.border-second-bg-color { border-color: var(--second-bg-color) !important; }

.border-color { border-color: var(--border-color) !important; }