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

:root {
    /**
     * COLORS
     */
    
    /* Primary */
    --soft-green-color: #B8EACB;
    --green-yellow-color: #E3FD8F;
    --green-color: #21A598;
    --blue-color: #1ba9df;
    --blue-dark-color: #0c506f;
    --purple-color: #5446F5;
    
    /* Dark */
    --dark-bg-color: #080f19;
    --dark-white-color: #ffffff;
    --dark-text-color: #ffffff;
    --dark-second-bg-color: #000914;
    --dark-second-color: #FFFFFFB2;
    --dark-third-color: #5f636c;
    --dark-border-color: #303643;

    /* Light */
    --light-bg-color: #f8f8f8;
    --light-white-color: #ffffff;
    --light-text-color: #010B38;
    --light-second-bg-color: #f3f3f3;
    --light-second-color: #010B3899;
    --light-third-color: #00000066;
    --light-border-color: #E6E6E6;

    /**
     * TYPOGRAPHY
     */

    /* Font Size */
    --fs-h1: 42px;
    --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: 600;
    --fw-semi-bold: 600;
    --fw-medium: 600;
    --fw-regular: 600;

    /* Line Height */
    --lh-h1: 66px;
    --lh-h2: 45px;
    --lh-h3: 35px;
    --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-full: 9999px;
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg-color: var(--dark-bg-color);
    --white-color: var(--dark-white-color);
    --text-color: var(--dark-text-color);
    --second-bg-color: var(--dark-second-bg-color);
    --second-color: var(--dark-second-color);
    --third-color: var(--dark-third-color);
    --border-color: var(--dark-border-color);

    .theme-light { display: none; }    
    
    .theme-dark { display: block; }
}

[data-theme="light"] {
    color-scheme: light;

    --bg-color: var(--light-bg-color);
    --white-color: var(--light-white-color);
    --text-color: var(--light-text-color);
    --second-bg-color: var(--light-second-bg-color);
    --second-color: var(--light-second-color);
    --third-color: var(--light-third-color);
    --border-color: var(--light-border-color);

    .theme-light { display: block; }    
    
    .theme-dark { display: none; }
}

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

*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
    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(--second-color) !important;
    background: none;
    border: none;
}

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

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

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

select { color: var(--third-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 {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    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;
}

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

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

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

::selection {
  background-color: var(--blue-color);
  color: var(--bg-color);
}

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

.section { padding-block: 80px; }

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

.container.container-lg { max-width: 1200px !important; }

.container.container-xl { max-width: 1440px !important; }

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

.main { 
    min-height: 100vh; 
    padding-block-start: 72px;
    overflow: hidden;
    position: relative;
}

.title-section { 
    display: flex;
    align-items: start;
    gap: 20px;
    margin-block-end: 30px;
}

.title-section .design {
    background-color: var(--green-color);
    border-radius: 13.43px 0 13.43px 0;
    min-width: 39px;
    max-width: 39px;
    min-height: 49px;
    max-height: 49px;
}

.title-section h1 { font-weight: 700 !important; }

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

.custom-scrollbar::-webkit-scrollbar {}

.custom-scrollbar::-webkit-scrollbar-track {}

.custom-scrollbar::-webkit-scrollbar-thumb {}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {}

.custom-scrollbar::-webkit-scrollbar-thumb:active {}

: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.08; }

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

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

.card-icon {
    background-color: var(--blue-color);
    color: white;
    display: grid;
    place-items: center;
    border-radius: 12px;
    width: 60px;
    height: 60px;
}

.card-icon svg {
    width: 30px;
    height: 30px;
}

/* ------------------------------------------------------------ *\
 * 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-medium) !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-soft-green-color { color: var(--soft-green-color) !important; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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