/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {
    /**
     * Colors
     */

    /* Primary */
    --orange-color: #ff9801;
    --yellow-color: #fedc00;
    --blue-color: #0465a1;
    --blue-dark-color: #064e7e;

    /* NEUTRAL */
    --bg-color: #ffffff;
    --second-bg-color: #fbfbfb;
    --third-bg-color: #d3d3d3;
    --fourd-bg-color: #1f2831;
    --text-color: #0b0b0b;
    --second-color: #777777;
    --border-color: #f1f1f1;
}

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

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

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

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

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

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

img { height: auto; }

input,
select,
button,
textarea {
    font-family: var(--font-family) !important;
    background: none;
    border: none;
}

input,
select,
textarea {
    box-shadow: 0 0 0 transparent !important;
    outline: none;
    width: 100%;
}

textarea { resize: none !important; }

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

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

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

button { cursor: pointer; }

form { width: 100%; }

div { width: auto; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-family) !important;
    background-color: var(--bg-color);
    font-size: 15px;
    font-weight: normal;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 { 
    padding: 0 !important;
    margin: 0 !important;
    font-weight: bolder;
}

p {
    padding: 0 !important;
    margin: 0 !important;
}

/*-----------------------------------*\
  #DUBLICATE ITEMS
\*-----------------------------------*/

.section { padding-block: 50px; }

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

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

.img-holder {
    background-color: var(--second-bg-color) !important;
    overflow: hidden;
}

.main { 
    min-height: 100vh; 
    padding-block-start: 130px;
}

.title-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-block-end: 35px;
}

.box {
    background-color: var(--bg-color) !important;
    color: var(--blue-dark-color) !important;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.4s;
}

.box:hover {
    background-color: var(--orange-color) !important;
    color: var(--text-color) !important;
}

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

.box.orange:hover { opacity: 0.7; }

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

.box.blue:hover {
    background-color: var(--orange-color) !important;
    color: var(--text-color) !important;
}

.box.blue-fixed {
    background-color: var(--blue-color) !important;
    color: var(--bg-color) !important;
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    max-height: 40px;
}

html .arrow-dir { transform: rotate(180deg) !important; }

html[dir="rtl"] .arrow-dir { transform: rotate(0) !important; }

.btn-play { animation: play_iframe 1.5s 500ms forwards infinite; }

@keyframes play_iframe {
    0% { box-shadow: 0 0 0 0 #0465a180; }
    100% { box-shadow: 0 0 0 20px #0465a100; }
}