:root {
    --1Color: #FEFEFE;
    --2Color: #E2E8F0;
    --3Color: #F7FAFB;
    --4Color: #CBD5DF;
    --5Color: #1A202C;
    --6Color: #f4b95f;
    --7Color: #FFCD24;
    --8Color: #2e5266;
    --shadow: #ffffff;
    --blue: #049cdb;
    --input: #CBD5DF;
    --trans: rgba(0, 0, 0, .2);
    --fato: #4682B4;
    --TextSh: rgba(0, 0, 0, 0.71);
    --button: #F7FAFB;
    --button2: #1A202C;
}


[data-theme="dark"] {
    --1Color: #1A202C;
    --2Color: #2D3848;
    --3Color: #3A4556;
    --4Color: #4A5568;
    --5Color: #FEFEFE;
    /* TEXT */
    --6Color: #FFCD24;
    /*Gold/Blak*/
    --7Color: #81E5D9;
    /*Gold/Blue*/
    --8Color: #2e5266;
    /*Logo*/
    --shadow: #4d4d4d;
    /*Black/white*/
    --blue: #81E5D9;
    --input: #5d6e89;
    --trans: rgba(255, 255, 255, .2);
    --fato: #b3b3b3;
    --TextSh: rgba(255, 255, 255, 0.71);
    --button: #b3b3b3;
    --button2: #808080;
}

html[data-theme='dark'] .dark {
    filter: invert(30%);
}

html[data-theme='dark'] .dark1 {
    filter: invert(80%);
}
html[data-theme='dark'] .black {
    filter: invert(100%);
}
.darktext{
    color: var(--1Color);
}

.GoldColor {
    color: gold;
    text-shadow: 10px 10px 10px 10px solid black;
}

.DarkColor {
    color: darkgray;
}

.WhiteColor {
    color: snow;
}

.BlueColor {
    color: var(--blue);
}

/* *********** Small Screen ******** */
@media only screen and (max-width: 550px) {

    bigScreen {
        display: none;
    }
}

/* *********** BigScreen ******** */
@media only screen and (min-width: 551px) {
    smallScreen {
        display: none;
    }
}

@font-face {
    font-family: 'amiriregular';
    src: url('amiri-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AraESNawar';
    src: url('AraESNawar-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'tajawalregular';
    src: url('tajawal-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
.Titel {
    font-size: 3em;
    font-family: 'AraESNawar';
    color: var(--6Color);
    text-shadow: 1px 1px 0px var(--5Color), -1px -1px 0px rgba(0, 0, 0, 0.15);
}

.Titel1 {
    font-family: 'AraESNawar';
    color: var(--6Color);
    text-shadow: 1px 1px 0px var(--5Color), -1px -1px 0px rgba(0, 0, 0, 0.15);
    text-overflow: scale;
    font-size: 1.7em;
}

h1 {
    font-size: 1.7em;
    font-family: 'amiriregular';
    display: block;
    font-weight: 500;
    margin: 0;
}

h2 {
    font-size: 1.3em;
    font-family: 'tajawalregular';
    display: block;
    font-weight: 600;
    margin: 0;
}

h3 {
    font-size: 1em;
    font-weight: 400;
    font-family: 'tajawalregular';
    display: block;
    margin: 0;
}

h4 {
    font-size: .9em;
    font-weight: 400;
    font-family: 'tajawalregular';
    display: block;
    margin: 0;
}

h5 {
    font-size: .75em;
    font-weight: 400;
    font-family: 'tajawalregular';
    display: block;
    margin: 0;
}

/* ****** Header ******* */

.headerSmall {
    padding: 5px;
    background-color: #2e5266;
    width: 100%;
    display: grid;
    grid-template-columns: 20% 80%;
    grid-gap: 2px;
}

.headerBig {
    background-color: #2e5266;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

header {
    position: sticky;
    top: -16px;
    z-index: 9999;
    -webkit-backface-visibility: hidden;
    background-color: #2e5266;
}

header::before,
header::after {
    content: '';
    display: block;
    height: 16px;
    position: sticky;
}

header::before {
    top: 60px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

header::after {
    background: #2e5266;
    top: 0;
    z-index: 2;
}

header > div {
    text-align: center;
    width: 100%;
    background: #2e5266;
    height: 54px;
    padding: 10px;
    position: sticky;
    top: 0px;
    margin-top: -16px;
    z-index: 3;
}

.ServiceTotal {
    color: var(--5Color);
    width: 100%;
    background-color: var(--2Color);
}

.ServicTopic {
    color: var(--6Color);
    text-align: center;
    text-shadow: 1px 1px 0px var(--TextSh), 0px 0px 5px var(--TextSh);
    font-weight: 500;
}



.SmallTextColor {
    text-align: center;
    padding: 5px;
    color: var(--blue);
}

.TextColor {
    color: var(--5Color);
}

.TextColor2 {
    color: var(--button);
}

.TextColor3 {
    color: var(--button2);
}

.MainGrid {
    display: grid;
    width: 100%;
}

.shadow1 {
    text-shadow: 2px 3px 5px var(--trans);
}

.boxshadow {
    box-shadow: 1px 1px 3px var(--trans);
}


.shadow4 {
    text-shadow: 0px 3px 0px #b2a98f,
        0px 7px 5px rgba(0, 0, 0, 0.15),
        0px 9px 2px rgba(0, 0, 0, 0.1),
        0px 12px 15px rgba(0, 0, 0, 0.1);
}