:root {
    --tagcloud-transition-user-duration: 1250ms;
    --tagcloud-transition-user-ease: ease-in-out;
    --tagcloud-transition-duration: 250ms;
    --tagcloud-transition-ease: ease-out;
    --tagcloud-bg-color-rgb: 0, 0, 0;
    --tagcloud-animation-duration: 25s;
    --tagcloud-animation-direction: normal;
    --tagcloud-animation-play-state: running;
    --tagcloud-diameter: 32rem;
    --tagcloud-start-rotation: 54;
    --tagcloud-controls-diameter: 256rem;
    --tagcloud-control-bg-color: transparent;
    --tagcloud-control-bg-hover-color: transparent;
    --tagcloud-control-bg-checked-color: transparent;
    --tag-diameter: 5.5rem;
    --tag-font-color-rgb: 255, 255, 255;
    --tag-font-family: 'Open Sans', sans-serif;
    --tag-font-size: 1rem;
    --bg1: #f5f8f7;
    --blue: #3498db;
    --green: #2ecc71;
    --purple: #9b59b6;
    --gold: #f1c40f;
    --red: #e74c3c;
    --orange: #e67e22;
    --shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f;
    --shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url(../images/3px-tile.png);
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

/* ---------------- Light Theme Variables ---------------- */
.light-theme {
    --color-white-100: hsl(240, 5%, 3%);
    --color-white-200: hsl(240, 5%, 6%);
    --color-white-300: hsl(240, 5%, 9%);
    --color-white-400: hsl(240, 5%, 12%);
    --color-white-500: hsl(240, 5%, 15%);
    --color-black-100: hsl(220, 10%, 50%);
    --color-black-200: hsl(220, 10%, 65%);
    --color-black-300: hsl(220, 10%, 85%);
    --color-black-400: hsl(220, 10%, 95%);
    --color-black-500: hsl(220, 10%, 100%);
    --main-neon-color: #07d767;
    --main-green-color: #B3BC46;
    --main-yellow-color: #FFD55D;
    --main-pine-color: #FD8A49;
    --main-red-color: #FF4200;
    --main-brows-color: #7E4B1C;
    --main-light-green-color: #54FF1D;
    --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --body-bg: var(--color-black-500);
}
/* ---------------- Light Theme Variables ---------------- */
.dark-theme  {
    --color-white-100: hsl(220, 10%, 100%);
    --color-white-200: hsl(220, 10%, 95%);
    --color-white-300: hsl(220, 10%, 85%);
    --color-white-400: hsl(220, 10%, 65%);
    --color-white-500: hsl(220, 10%, 50%);
    --color-black-100: hsl(240, 5%, 15%);
    --color-black-200: hsl(240, 5%, 12%);
    --color-black-300: hsl(240, 5%, 9%);
    --color-black-400: hsl(240, 5%, 6%);
    --color-black-500: hsl(240, 5%, 3%);
    --main-neon-color: #15e776;
    --main-green-color: #B3BC46;
    --main-yellow-color: #FFD55D;
    --main-pine-color: #FD8A49;
    --main-red-color: #FF4200;
    --main-brows-color: #7E4B1C;
    --main-light-green-color: #54FF1D;
    --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --body-bg: var(--color-black-400);
}

/* ---------------- Light Mode Classes ---------------- */
.light-theme .color-white-100 { color: var(--color-white-100); }
.light-theme .color-white-200 { color: var(--color-white-200); }
.light-theme .color-white-300 { color: var(--color-white-300); }
.light-theme .color-white-400 { color: var(--color-white-400); }
.light-theme .color-white-500 { color: var(--color-white-500); }

.light-theme .color-black-100 { color: var(--color-black-100); }
.light-theme .color-black-200 { color: var(--color-black-200); }
.light-theme .color-black-300 { color: var(--color-black-300); }
.light-theme .color-black-400 { color: var(--color-black-400); }
.light-theme .color-black-500 { color: var(--color-black-500); }

.light-theme .color-main { color: var(--main-neon-color); }

.light-theme .bg-white-100 { background-color: var(--color-white-100); }
.light-theme .bg-white-200 { background-color: var(--color-white-200); }
.light-theme .bg-white-300 { background-color: var(--color-white-300); }
.light-theme .bg-white-400 { background-color: var(--color-white-400); }
.light-theme .bg-white-500 { background-color: var(--color-white-500); }

.light-theme .bg-black-100 { background-color: var(--color-black-100); }
.light-theme .bg-black-200 { background-color: var(--color-black-200); }
.light-theme .bg-black-300 { background-color: var(--color-black-300); }
.light-theme .bg-black-400 { background-color: var(--color-black-400); }
.light-theme .bg-black-500 { background-color: var(--color-black-500); }

.light-theme .bg-main { background-color: var(--main-neon-color); }

.light-theme .shadow-small { box-shadow: var(--shadow-small); }
.light-theme .shadow-medium { box-shadow: var(--shadow-medium); }
.light-theme .shadow-large { box-shadow: var(--shadow-large); }

/* ---------------- Dark Mode Classes ---------------- */
.dark-theme .color-white-100 { color: var(--color-white-100); }
.dark-theme .color-white-200 { color: var(--color-white-200); }
.dark-theme .color-white-300 { color: var(--color-white-300); }
.dark-theme .color-white-400 { color: var(--color-white-400); }
.dark-theme .color-white-500 { color: var(--color-white-500); }

.dark-theme .color-black-100 { color: var(--color-black-100); }
.dark-theme .color-black-200 { color: var(--color-black-200); }
.dark-theme .color-black-300 { color: var(--color-black-300); }
.dark-theme .color-black-400 { color: var(--color-black-400); }
.dark-theme .color-black-500 { color: var(--color-black-500); }

.dark-theme .color-main { color: var(--main-neon-color); }

.dark-theme .bg-white-100 { background-color: var(--color-white-100); }
.dark-theme .bg-white-200 { background-color: var(--color-white-200); }
.dark-theme .bg-white-300 { background-color: var(--color-white-300); }
.dark-theme .bg-white-400 { background-color: var(--color-white-400); }
.dark-theme .bg-white-500 { background-color: var(--color-white-500); }

.dark-theme .bg-black-100 { background-color: var(--color-black-100); }
.dark-theme .bg-black-200 { background-color: var(--color-black-200); }
.dark-theme .bg-black-300 { background-color: var(--color-black-300); }
.dark-theme .bg-black-400 { background-color: var(--color-black-400); }
.dark-theme .bg-black-500 { background-color: var(--color-black-500); }

.dark-theme .bg-main { background-color: var(--main-neon-color); }

.dark-theme .shadow-small { box-shadow: var(--shadow-small); }
.dark-theme .shadow-medium { box-shadow: var(--shadow-medium); }
.dark-theme .shadow-large { box-shadow: var(--shadow-large); }


.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
.font-17 { font-size: 17px; }
.font-18 { font-size: 18px; }
.font-19 { font-size: 19px; }
.font-20 { font-size: 20px; }
.font-21 { font-size: 21px; }
.font-22 { font-size: 22px; }
.font-23 { font-size: 23px; }
.font-24 { font-size: 24px; }
.font-25 { font-size: 25px; }
.font-26 { font-size: 26px; }
.font-27 { font-size: 27px; }
.font-28 { font-size: 28px; }
.font-29 { font-size: 29px; }
.font-30 { font-size: 30px; }
.font-31 { font-size: 31px; }
.font-32 { font-size: 32px; }
.font-33 { font-size: 33px; }
.font-34 { font-size: 34px; }
.font-35 { font-size: 35px; }
.font-36 { font-size: 36px; }
.font-37 { font-size: 37px; }
.font-38 { font-size: 38px; }
.font-39 { font-size: 39px; }
.font-40 { font-size: 40px; }
.font-41 { font-size: 41px; }
.font-42 { font-size: 42px; }
.font-43 { font-size: 43px; }
.font-44 { font-size: 44px; }
.font-45 { font-size: 45px; }
.font-46 { font-size: 46px; }
.font-47 { font-size: 47px; }
.font-48 { font-size: 48px; }
.font-49 { font-size: 49px; }
.font-50 { font-size: 50px; }
.font-51 { font-size: 51px; }
.font-52 { font-size: 52px; }
.font-53 { font-size: 53px; }
.font-54 { font-size: 54px; }
.font-55 { font-size: 55px; }
.font-56 { font-size: 56px; }
.font-57 { font-size: 57px; }
.font-58 { font-size: 58px; }
.font-59 { font-size: 59px; }
.font-60 { font-size: 60px; }
.font-61 { font-size: 61px; }
.font-62 { font-size: 62px; }
.font-63 { font-size: 63px; }
.font-64 { font-size: 64px; }
.font-65 { font-size: 65px; }
.font-66 { font-size: 66px; }
.font-67 { font-size: 67px; }
.font-68 { font-size: 68px; }
.font-69 { font-size: 69px; }
.font-70 { font-size: 70px; }
.font-71 { font-size: 71px; }
.font-72 { font-size: 72px; }
.font-73 { font-size: 73px; }
.font-74 { font-size: 74px; }
.font-75 { font-size: 75px; }
.font-76 { font-size: 76px; }
.font-77 { font-size: 77px; }
.font-78 { font-size: 78px; }
.font-79 { font-size: 79px; }
.font-80 { font-size: 80px; }


/* ==== Margin Utilities (12px - 80px) ==== */

/* Margin All */
.m-12 { margin: 12px; }
.m-13 { margin: 13px; }
.m-14 { margin: 14px; }
.m-15 { margin: 15px; }
.m-16 { margin: 16px; }
.m-17 { margin: 17px; }
.m-18 { margin: 18px; }
.m-19 { margin: 19px; }
.m-20 { margin: 20px; }
.m-21 { margin: 21px; }
.m-22 { margin: 22px; }
.m-23 { margin: 23px; }
.m-24 { margin: 24px; }
.m-25 { margin: 25px; }
.m-26 { margin: 26px; }
.m-27 { margin: 27px; }
.m-28 { margin: 28px; }
.m-29 { margin: 29px; }
.m-30 { margin: 30px; }
.m-31 { margin: 31px; }
.m-32 { margin: 32px; }
.m-33 { margin: 33px; }
.m-34 { margin: 34px; }
.m-35 { margin: 35px; }
.m-36 { margin: 36px; }
.m-37 { margin: 37px; }
.m-38 { margin: 38px; }
.m-39 { margin: 39px; }
.m-40 { margin: 40px; }
.m-41 { margin: 41px; }
.m-42 { margin: 42px; }
.m-43 { margin: 43px; }
.m-44 { margin: 44px; }
.m-45 { margin: 45px; }
.m-46 { margin: 46px; }
.m-47 { margin: 47px; }
.m-48 { margin: 48px; }
.m-49 { margin: 49px; }
.m-50 { margin: 50px; }
.m-51 { margin: 51px; }
.m-52 { margin: 52px; }
.m-53 { margin: 53px; }
.m-54 { margin: 54px; }
.m-55 { margin: 55px; }
.m-56 { margin: 56px; }
.m-57 { margin: 57px; }
.m-58 { margin: 58px; }
.m-59 { margin: 59px; }
.m-60 { margin: 60px; }
.m-61 { margin: 61px; }
.m-62 { margin: 62px; }
.m-63 { margin: 63px; }
.m-64 { margin: 64px; }
.m-65 { margin: 65px; }
.m-66 { margin: 66px; }
.m-67 { margin: 67px; }
.m-68 { margin: 68px; }
.m-69 { margin: 69px; }
.m-70 { margin: 70px; }
.m-71 { margin: 71px; }
.m-72 { margin: 72px; }
.m-73 { margin: 73px; }
.m-74 { margin: 74px; }
.m-75 { margin: 75px; }
.m-76 { margin: 76px; }
.m-77 { margin: 77px; }
.m-78 { margin: 78px; }
.m-79 { margin: 79px; }
.m-80 { margin: 80px; }

/* Margin Top */
.mt-12 { margin-top: 12px; }
.mt-13 { margin-top: 13px; }
.mt-14 { margin-top: 14px; }
.mt-15 { margin-top: 15px; }
.mt-16 { margin-top: 16px; }
.mt-17 { margin-top: 17px; }
.mt-18 { margin-top: 18px; }
.mt-19 { margin-top: 19px; }
.mt-20 { margin-top: 20px; }
.mt-21 { margin-top: 21px; }
.mt-22 { margin-top: 22px; }
.mt-23 { margin-top: 23px; }
.mt-24 { margin-top: 24px; }
.mt-25 { margin-top: 25px; }
.mt-26 { margin-top: 26px; }
.mt-27 { margin-top: 27px; }
.mt-28 { margin-top: 28px; }
.mt-29 { margin-top: 29px; }
.mt-30 { margin-top: 30px; }
.mt-31 { margin-top: 31px; }
.mt-32 { margin-top: 32px; }
.mt-33 { margin-top: 33px; }
.mt-34 { margin-top: 34px; }
.mt-35 { margin-top: 35px; }
.mt-36 { margin-top: 36px; }
.mt-37 { margin-top: 37px; }
.mt-38 { margin-top: 38px; }
.mt-39 { margin-top: 39px; }
.mt-40 { margin-top: 40px; }
.mt-41 { margin-top: 41px; }
.mt-42 { margin-top: 42px; }
.mt-43 { margin-top: 43px; }
.mt-44 { margin-top: 44px; }
.mt-45 { margin-top: 45px; }
.mt-46 { margin-top: 46px; }
.mt-47 { margin-top: 47px; }
.mt-48 { margin-top: 48px; }
.mt-49 { margin-top: 49px; }
.mt-50 { margin-top: 50px; }
.mt-51 { margin-top: 51px; }
.mt-52 { margin-top: 52px; }
.mt-53 { margin-top: 53px; }
.mt-54 { margin-top: 54px; }
.mt-55 { margin-top: 55px; }
.mt-56 { margin-top: 56px; }
.mt-57 { margin-top: 57px; }
.mt-58 { margin-top: 58px; }
.mt-59 { margin-top: 59px; }
.mt-60 { margin-top: 60px; }
.mt-61 { margin-top: 61px; }
.mt-62 { margin-top: 62px; }
.mt-63 { margin-top: 63px; }
.mt-64 { margin-top: 64px; }
.mt-65 { margin-top: 65px; }
.mt-66 { margin-top: 66px; }
.mt-67 { margin-top: 67px; }
.mt-68 { margin-top: 68px; }
.mt-69 { margin-top: 69px; }
.mt-70 { margin-top: 70px; }
.mt-71 { margin-top: 71px; }
.mt-72 { margin-top: 72px; }
.mt-73 { margin-top: 73px; }
.mt-74 { margin-top: 74px; }
.mt-75 { margin-top: 75px; }
.mt-76 { margin-top: 76px; }
.mt-77 { margin-top: 77px; }
.mt-78 { margin-top: 78px; }
.mt-79 { margin-top: 79px; }
.mt-80 { margin-top: 80px; }

/* Margin Bottom */
.mb-12 { margin-bottom: 12px; }
.mb-13 { margin-bottom: 13px; }
.mb-14 { margin-bottom: 14px; }
.mb-15 { margin-bottom: 15px; }
.mb-16 { margin-bottom: 16px; }
.mb-17 { margin-bottom: 17px; }
.mb-18 { margin-bottom: 18px; }
.mb-19 { margin-bottom: 19px; }
.mb-20 { margin-bottom: 20px; }
.mb-21 { margin-bottom: 21px; }
.mb-22 { margin-bottom: 22px; }
.mb-23 { margin-bottom: 23px; }
.mb-24 { margin-bottom: 24px; }
.mb-25 { margin-bottom: 25px; }
.mb-26 { margin-bottom: 26px; }
.mb-27 { margin-bottom: 27px; }
.mb-28 { margin-bottom: 28px; }
.mb-29 { margin-bottom: 29px; }
.mb-30 { margin-bottom: 30px; }
.mb-31 { margin-bottom: 31px; }
.mb-32 { margin-bottom: 32px; }
.mb-33 { margin-bottom: 33px; }
.mb-34 { margin-bottom: 34px; }
.mb-35 { margin-bottom: 35px; }
.mb-36 { margin-bottom: 36px; }
.mb-37 { margin-bottom: 37px; }
.mb-38 { margin-bottom: 38px; }
.mb-39 { margin-bottom: 39px; }
.mb-40 { margin-bottom: 40px; }
.mb-41 { margin-bottom: 41px; }
.mb-42 { margin-bottom: 42px; }
.mb-43 { margin-bottom: 43px; }
.mb-44 { margin-bottom: 44px; }
.mb-45 { margin-bottom: 45px; }
.mb-46 { margin-bottom: 46px; }
.mb-47 { margin-bottom: 47px; }
.mb-48 { margin-bottom: 48px; }
.mb-49 { margin-bottom: 49px; }
.mb-50 { margin-bottom: 50px; }
.mb-51 { margin-bottom: 51px; }
.mb-52 { margin-bottom: 52px; }
.mb-53 { margin-bottom: 53px; }
.mb-54 { margin-bottom: 54px; }
.mb-55 { margin-bottom: 55px; }
.mb-56 { margin-bottom: 56px; }
.mb-57 { margin-bottom: 57px; }
.mb-58 { margin-bottom: 58px; }
.mb-59 { margin-bottom: 59px; }
.mb-60 { margin-bottom: 60px; }
.mb-61 { margin-bottom: 61px; }
.mb-62 { margin-bottom: 62px; }
.mb-63 { margin-bottom: 63px; }
.mb-64 { margin-bottom: 64px; }
.mb-65 { margin-bottom: 65px; }
.mb-66 { margin-bottom: 66px; }
.mb-67 { margin-bottom: 67px; }
.mb-68 { margin-bottom: 68px; }
.mb-69 { margin-bottom: 69px; }
.mb-70 { margin-bottom: 70px; }
.mb-71 { margin-bottom: 71px; }
.mb-72 { margin-bottom: 72px; }
.mb-73 { margin-bottom: 73px; }
.mb-74 { margin-bottom: 74px; }
.mb-75 { margin-bottom: 75px; }
.mb-76 { margin-bottom: 76px; }
.mb-77 { margin-bottom: 77px; }
.mb-78 { margin-bottom: 78px; }
.mb-79 { margin-bottom: 79px; }
.mb-80 { margin-bottom: 80px; }

/* Margin Left */
.ml-12 { margin-left: 12px; }
.ml-13 { margin-left: 13px; }
.ml-14 { margin-left: 14px; }
.ml-15 { margin-left: 15px; }
.ml-16 { margin-left: 16px; }
.ml-17 { margin-left: 17px; }
.ml-18 { margin-left: 18px; }
.ml-19 { margin-left: 19px; }
.ml-20 { margin-left: 20px; }
.ml-21 { margin-left: 21px; }
.ml-22 { margin-left: 22px; }
.ml-23 { margin-left: 23px; }
.ml-24 { margin-left: 24px; }
.ml-25 { margin-left: 25px; }
.ml-26 { margin-left: 26px; }
.ml-27 { margin-left: 27px; }
.ml-28 { margin-left: 28px; }
.ml-29 { margin-left: 29px; }
.ml-30 { margin-left: 30px; }
.ml-31 { margin-left: 31px; }
.ml-32 { margin-left: 32px; }
.ml-33 { margin-left: 33px; }
.ml-34 { margin-left: 34px; }
.ml-35 { margin-left: 35px; }
.ml-36 { margin-left: 36px; }
.ml-37 { margin-left: 37px; }
.ml-38 { margin-left: 38px; }
.ml-39 { margin-left: 39px; }
.ml-40 { margin-left: 40px; }
.ml-41 { margin-left: 41px; }
.ml-42 { margin-left: 42px; }
.ml-43 { margin-left: 43px; }
.ml-44 { margin-left: 44px; }
.ml-45 { margin-left: 45px; }
.ml-46 { margin-left: 46px; }
.ml-47 { margin-left: 47px; }
.ml-48 { margin-left: 48px; }
.ml-49 { margin-left: 49px; }
.ml-50 { margin-left: 50px; }
.ml-51 { margin-left: 51px; }
.ml-52 { margin-left: 52px; }
.ml-53 { margin-left: 53px; }
.ml-54 { margin-left: 54px; }
.ml-55 { margin-left: 55px; }
.ml-56 { margin-left: 56px; }
.ml-57 { margin-left: 57px; }
.ml-58 { margin-left: 58px; }
.ml-59 { margin-left: 59px; }
.ml-60 { margin-left: 60px; }
.ml-61 { margin-left: 61px; }
.ml-62 { margin-left: 62px; }
.ml-63 { margin-left: 63px; }
.ml-64 { margin-left: 64px; }
.ml-65 { margin-left: 65px; }
.ml-66 { margin-left: 66px; }
.ml-67 { margin-left: 67px; }
.ml-68 { margin-left: 68px; }
.ml-69 { margin-left: 69px; }
.ml-70 { margin-left: 70px; }
.ml-71 { margin-left: 71px; }
.ml-72 { margin-left: 72px; }
.ml-73 { margin-left: 73px; }
.ml-74 { margin-left: 74px; }
.ml-75 { margin-left: 75px; }
.ml-76 { margin-left: 76px; }
.ml-77 { margin-left: 77px; }
.ml-78 { margin-left: 78px; }
.ml-79 { margin-left: 79px; }
.ml-80 { margin-left: 80px; }

/* Margin Right */
.mr-12 { margin-right: 12px; }
.mr-13 { margin-right: 13px; }
.mr-14 { margin-right: 14px; }
.mr-15 { margin-right: 15px; }
.mr-16 { margin-right: 16px; }
.mr-17 { margin-right: 17px; }
.mr-18 { margin-right: 18px; }
.mr-19 { margin-right: 19px; }
.mr-20 { margin-right: 20px; }
.mr-21 { margin-right: 21px; }
.mr-22 { margin-right: 22px; }
.mr-23 { margin-right: 23px; }
.mr-24 { margin-right: 24px; }
.mr-25 { margin-right: 25px; }
.mr-26 { margin-right: 26px; }
.mr-27 { margin-right: 27px; }
.mr-28 { margin-right: 28px; }
.mr-29 { margin-right: 29px; }
.mr-30 { margin-right: 30px; }
.mr-31 { margin-right: 31px; }
.mr-32 { margin-right: 32px; }
.mr-33 { margin-right: 33px; }
.mr-34 { margin-right: 34px; }
.mr-35 { margin-right: 35px; }
.mr-36 { margin-right: 36px; }
.mr-37 { margin-right: 37px; }
.mr-38 { margin-right: 38px; }
.mr-39 { margin-right: 39px; }
.mr-40 { margin-right: 40px; }
.mr-41 { margin-right: 41px; }
.mr-42 { margin-right: 42px; }
.mr-43 { margin-right: 43px; }
.mr-44 { margin-right: 44px; }
.mr-45 { margin-right: 45px; }
.mr-46 { margin-right: 46px; }
.mr-47 { margin-right: 47px; }
.mr-48 { margin-right: 48px; }
.mr-49 { margin-right: 49px; }
.mr-50 { margin-right: 50px; }
.mr-51 { margin-right: 51px; }
.mr-52 { margin-right: 52px; }
.mr-53 { margin-right: 53px; }
.mr-54 { margin-right: 54px; }
.mr-55 { margin-right: 55px; }
.mr-56 { margin-right: 56px; }
.mr-57 { margin-right: 57px; }
.mr-58 { margin-right: 58px; }
.mr-59 { margin-right: 59px; }
.mr-60 { margin-right: 60px; }
.mr-61 { margin-right: 61px; }
.mr-62 { margin-right: 62px; }
.mr-63 { margin-right: 63px; }
.mr-64 { margin-right: 64px; }
.mr-65 { margin-right: 65px; }
.mr-66 { margin-right: 66px; }
.mr-67 { margin-right: 67px; }
.mr-68 { margin-right: 68px; }
.mr-69 { margin-right: 69px; }
.mr-70 { margin-right: 70px; }
.mr-71 { margin-right: 71px; }
.mr-72 { margin-right: 72px; }
.mr-73 { margin-right: 73px; }
.mr-74 { margin-right: 74px; }
.mr-75 { margin-right: 75px; }
.mr-76 { margin-right: 76px; }
.mr-77 { margin-right: 77px; }
.mr-78 { margin-right: 78px; }
.mr-79 { margin-right: 79px; }
.mr-80 { margin-right: 80px; }

/* Margin X (Left + Right) */
.mx-12 { margin-left: 12px; margin-right: 12px; }
.mx-13 { margin-left: 13px; margin-right: 13px; }
.mx-14 { margin-left: 14px; margin-right: 14px; }
.mx-15 { margin-left: 15px; margin-right: 15px; }
.mx-16 { margin-left: 16px; margin-right: 16px; }
.mx-17 { margin-left: 17px; margin-right: 17px; }
.mx-18 { margin-left: 18px; margin-right: 18px; }
.mx-19 { margin-left: 19px; margin-right: 19px; }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mx-21 { margin-left: 21px; margin-right: 21px; }
.mx-22 { margin-left: 22px; margin-right: 22px; }
.mx-23 { margin-left: 23px; margin-right: 23px; }
.mx-24 { margin-left: 24px; margin-right: 24px; }
.mx-25 { margin-left: 25px; margin-right: 25px; }
.mx-26 { margin-left: 26px; margin-right: 26px; }
.mx-27 { margin-left: 27px; margin-right: 27px; }
.mx-28 { margin-left: 28px; margin-right: 28px; }
.mx-29 { margin-left: 29px; margin-right: 29px; }
.mx-30 { margin-left: 30px; margin-right: 30px; }
.mx-31 { margin-left: 31px; margin-right: 31px; }
.mx-32 { margin-left: 32px; margin-right: 32px; }
.mx-33 { margin-left: 33px; margin-right: 33px; }
.mx-34 { margin-left: 34px; margin-right: 34px; }
.mx-35 { margin-left: 35px; margin-right: 35px; }
.mx-36 { margin-left: 36px; margin-right: 36px; }
.mx-37 { margin-left: 37px; margin-right: 37px; }
.mx-38 { margin-left: 38px; margin-right: 38px; }
.mx-39 { margin-left: 39px; margin-right: 39px; }
.mx-40 { margin-left: 40px; margin-right: 40px; }
.mx-41 { margin-left: 41px; margin-right: 41px; }
.mx-42 { margin-left: 42px; margin-right: 42px; }
.mx-43 { margin-left: 43px; margin-right: 43px; }
.mx-44 { margin-left: 44px; margin-right: 44px; }
.mx-45 { margin-left: 45px; margin-right: 45px; }
.mx-46 { margin-left: 46px; margin-right: 46px; }
.mx-47 { margin-left: 47px; margin-right: 47px; }
.mx-48 { margin-left: 48px; margin-right: 48px; }
.mx-49 { margin-left: 49px; margin-right: 49px; }
.mx-50 { margin-left: 50px; margin-right: 50px; }
.mx-51 { margin-left: 51px; margin-right: 51px; }
.mx-52 { margin-left: 52px; margin-right: 52px; }
.mx-53 { margin-left: 53px; margin-right: 53px; }
.mx-54 { margin-left: 54px; margin-right: 54px; }
.mx-55 { margin-left: 55px; margin-right: 55px; }
.mx-56 { margin-left: 56px; margin-right: 56px; }
.mx-57 { margin-left: 57px; margin-right: 57px; }
.mx-58 { margin-left: 58px; margin-right: 58px; }
.mx-59 { margin-left: 59px; margin-right: 59px; }
.mx-60 { margin-left: 60px; margin-right: 60px; }
.mx-61 { margin-left: 61px; margin-right: 61px; }
.mx-62 { margin-left: 62px; margin-right: 62px; }
.mx-63 { margin-left: 63px; margin-right: 63px; }
.mx-64 { margin-left: 64px; margin-right: 64px; }
.mx-65 { margin-left: 65px; margin-right: 65px; }
.mx-66 { margin-left: 66px; margin-right: 66px; }
.mx-67 { margin-left: 67px; margin-right: 67px; }
.mx-68 { margin-left: 68px; margin-right: 68px; }
.mx-69 { margin-left: 69px; margin-right: 69px; }
.mx-70 { margin-left: 70px; margin-right: 70px; }
.mx-71 { margin-left: 71px; margin-right: 71px; }
.mx-72 { margin-left: 72px; margin-right: 72px; }
.mx-73 { margin-left: 73px; margin-right: 73px; }
.mx-74 { margin-left: 74px; margin-right: 74px; }
.mx-75 { margin-left: 75px; margin-right: 75px; }
.mx-76 { margin-left: 76px; margin-right: 76px; }
.mx-77 { margin-left: 77px; margin-right: 77px; }
.mx-78 { margin-left: 78px; margin-right: 78px; }
.mx-79 { margin-left: 79px; margin-right: 79px; }
.mx-80 { margin-left: 80px; margin-right: 80px; }

/* Margin Y (Top + Bottom) */
.my-12 { margin-top: 12px; margin-bottom: 12px; }
.my-13 { margin-top: 13px; margin-bottom: 13px; }
.my-14 { margin-top: 14px; margin-bottom: 14px; }
.my-15 { margin-top: 15px; margin-bottom: 15px; }
.my-16 { margin-top: 16px; margin-bottom: 16px; }
.my-17 { margin-top: 17px; margin-bottom: 17px; }
.my-18 { margin-top: 18px; margin-bottom: 18px; }
.my-19 { margin-top: 19px; margin-bottom: 19px; }
.my-20 { margin-top: 20px; margin-bottom: 20px; }
.my-21 { margin-top: 21px; margin-bottom: 21px; }
.my-22 { margin-top: 22px; margin-bottom: 22px; }
.my-23 { margin-top: 23px; margin-bottom: 23px; }
.my-24 { margin-top: 24px; margin-bottom: 24px; }
.my-25 { margin-top: 25px; margin-bottom: 25px; }
.my-26 { margin-top: 26px; margin-bottom: 26px; }
.my-27 { margin-top: 27px; margin-bottom: 27px; }
.my-28 { margin-top: 28px; margin-bottom: 28px; }
.my-29 { margin-top: 29px; margin-bottom: 29px; }
.my-30 { margin-top: 30px; margin-bottom: 30px; }
.my-31 { margin-top: 31px; margin-bottom: 31px; }
.my-32 { margin-top: 32px; margin-bottom: 32px; }
.my-33 { margin-top: 33px; margin-bottom: 33px; }
.my-34 { margin-top: 34px; margin-bottom: 34px; }
.my-35 { margin-top: 35px; margin-bottom: 35px; }
.my-36 { margin-top: 36px; margin-bottom: 36px; }
.my-37 { margin-top: 37px; margin-bottom: 37px; }
.my-38 { margin-top: 38px; margin-bottom: 38px; }
.my-39 { margin-top: 39px; margin-bottom: 39px; }
.my-40 { margin-top: 40px; margin-bottom: 40px; }
.my-41 { margin-top: 41px; margin-bottom: 41px; }
.my-42 { margin-top: 42px; margin-bottom: 42px; }
.my-43 { margin-top: 43px; margin-bottom: 43px; }
.my-44 { margin-top: 44px; margin-bottom: 44px; }
.my-45 { margin-top: 45px; margin-bottom: 45px; }
.my-46 { margin-top: 46px; margin-bottom: 46px; }
.my-47 { margin-top: 47px; margin-bottom: 47px; }
.my-48 { margin-top: 48px; margin-bottom: 48px; }
.my-49 { margin-top: 49px; margin-bottom: 49px; }
.my-50 { margin-top: 50px; margin-bottom: 50px; }
.my-51 { margin-top: 51px; margin-bottom: 51px; }
.my-52 { margin-top: 52px; margin-bottom: 52px; }
.my-53 { margin-top: 53px; margin-bottom: 53px; }
.my-54 { margin-top: 54px; margin-bottom: 54px; }
.my-55 { margin-top: 55px; margin-bottom: 55px; }
.my-56 { margin-top: 56px; margin-bottom: 56px; }
.my-57 { margin-top: 57px; margin-bottom: 57px; }
.my-58 { margin-top: 58px; margin-bottom: 58px; }
.my-59 { margin-top: 59px; margin-bottom: 59px; }
.my-60 { margin-top: 60px; margin-bottom: 60px; }
.my-61 { margin-top: 61px; margin-bottom: 61px; }
.my-62 { margin-top: 62px; margin-bottom: 62px; }
.my-63 { margin-top: 63px; margin-bottom: 63px; }
.my-64 { margin-top: 64px; margin-bottom: 64px; }
.my-65 { margin-top: 65px; margin-bottom: 65px; }
.my-66 { margin-top: 66px; margin-bottom: 66px; }
.my-67 { margin-top: 67px; margin-bottom: 67px; }
.my-68 { margin-top: 68px; margin-bottom: 68px; }
.my-69 { margin-top: 69px; margin-bottom: 69px; }
.my-70 { margin-top: 70px; margin-bottom: 70px; }
.my-71 { margin-top: 71px; margin-bottom: 71px; }
.my-72 { margin-top: 72px; margin-bottom: 72px; }
.my-73 { margin-top: 73px; margin-bottom: 73px; }
.my-74 { margin-top: 74px; margin-bottom: 74px; }
.my-75 { margin-top: 75px; margin-bottom: 75px; }
.my-76 { margin-top: 76px; margin-bottom: 76px; }
.my-77 { margin-top: 77px; margin-bottom: 77px; }
.my-78 { margin-top: 78px; margin-bottom: 78px; }
.my-79 { margin-top: 79px; margin-bottom: 79px; }
.my-80 { margin-top: 80px; margin-bottom: 80px; }

/* ---------------- Body Background ---------------- */
body {
    font-family: dana-regular, sans-serif;
    overflow-x: hidden;
    background-color: var(--body-bg);
    transition: all 0.3s ease;
}


.dana{
    font-family: dana-regular;
}
.section {
    margin-inline: auto;
    padding-block: 5rem 3rem;
}
.rtl{
    direction: rtl;
}
.ltr{
    direction: ltr;
}
.text-justify{
    text-align: justify;
}
.container {
    /*max-width: 75rem;
    height: auto;
    margin-inline: auto;
    padding-inline: 1.5rem;*/
}
.centered {
    text-align: center;
    vertical-align: middle;
}
.paragraph {
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    max-width: 55ch;
}
.heading {
    font-family: inherit;
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    font-weight: 700;
    line-height: 1.15;
    text-transform: capitalize;
}
.btn {
    display: inline-flex;
    font-family: inherit;
    font-size: 0.93rem;
    font-weight: 400;
    line-height: 1.5;
    align-items: center;
    justify-content: center;
    column-gap: 0.35rem;
    white-space: nowrap;
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    border-radius: 3rem;
    transition: all 0.3s ease;
}
.btn-darken {
    color: var(--color-white-100);
    background-color: var(--color-black-300);
    box-shadow: var(--shadow-medium);
}
.btn-neutral {
    color: var(--color-black-500);
    background-color: var(--color-white-100);
    box-shadow: var(--shadow-medium);
}
.header {
    position: fixed;
    top: 1.5rem;
    left: 0;
    right: 0;
    z-index: 99;
    width: 100%;
    height: auto;
    transition: transform 0.35s ease;
}
.header.is-sticky {
    top: 0;
    transform: translateY(-100%);
}
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    column-gap: 2rem;
    max-width: 90dvw;
    height: 4.25rem;
    border-radius: 3rem;
    background-color: var(--color-white-100);
    box-shadow: var(--shadow-medium);
}
.brand {
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: var(--color-black-500);
}
.brand img{
    width: 115px;
}
.menu{
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-block: 6rem 2rem;
    background-color: var(--color-black-500);
    box-shadow: var(--shadow-medium);
    transition: all 0.35s ease;
    z-index: 60;
}
.menu.is-active {
    right: 0;
}
.menu-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    row-gap: 0;
    column-gap: 1rem !important;
    margin: 0;
    flex-direction: row-reverse !important;
}
.menu-item {
    list-style: none;
}
.menu-link {
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--color-black-500);
    transition: all 0.3s ease;
    text-decoration: none;
    padding: 10px;
}
.menu-block {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
}
.menu-block .btn-darken .fa{
    position: relative;
    top: 2px;
}
.burger {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1rem;
    z-index: 99;
    visibility: visible;
    border: 0;
    background: rgba(0, 0, 0, 0);
}
.burger-line {
    position: absolute;
    right: 0;
    opacity: 1;
    width: 100%;
    height: 2px;
    line-height: 1.25;
    background-color: var(--color-black-500);
    transition: all 0.25s ease;
}
.burger-line:nth-child(1) {
    top: 0.25rem;
}
.burger-line:nth-child(2) {
    top: 0.75rem;
}
.burger.is-active .burger-line:nth-child(1) {
    top: 0.5rem;
    transform: rotate(135deg);
}
.burger.is-active .burger-line:nth-child(2) {
    top: 0.5rem;
    transform: rotate(-135deg);
}

/* toggle  */
.checkbox {
    opacity: 0;
    position: absolute;
}
.checkbox-label {
    background-color: #111;
    width: 50px;
    height: 26px;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fa-moon {
    color: #f1c40f;
}
.fa-sun {
    color: #f39c12;
}
.checkbox-label .ball {
    background-color: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.2s linear;
}
.checkbox:checked + .checkbox-label .ball {
    transform: translateX(24px);
}
/* end toggle*/

.stack {
    display: grid;
    grid-template-areas: "stack";
}
.stack > * {
    grid-area: stack;
}
/* page animation */
#wrapper {
    opacity: 0.6;
    width: 100%;
    width: 100vw;
    overflow: hidden;
}
#wrapper.active {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    z-index: -6;
}
.wrapper-column {
    display: grid;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 90dvh;
}
.wrapper-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 2rem;
    column-gap: 2rem;
    text-align: center;
}
.scroll {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    font-family: Roboto, sans-serif;
    letter-spacing: 0.2em;
    font-size: 11px;
}
.scroll span {
    display: block;
}
.scroll svg {
    margin-top: 10px;
    width: 18px;
    height: 18px;
    -webkit-animation: scroll 0.95s ease-in-out alternate infinite;
    animation: scroll 0.95s ease-in-out alternate infinite;
    fill: none;
    stroke: #000000;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 1;
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 40%;
    opacity: 0;
    margin: -19px auto;
    transition: transform 1s cubic-bezier(0.14, 0.15, 0.13, 0.99);
}
@-webkit-keyframes scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(10px);
    }
}
@keyframes scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(10px);
    }
}
/* end page animation */
#page-content{
    z-index: 10;
    isolation: isolate;
    /*position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100000;
    margin: auto;*/
}

/* slider */
.hero{
    min-height: 60vh;
    display: flex;
    align-items: center;
}
.slider{
    margin-top: 100px;
    line-height: 55px;
}
.slider .slogan{
    margin: 0;
    font-size: 80px;
}
.slider .title{
    margin: 0;
    font-size: 40px;
}
.slider .slider-content{
    margin: 0;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}
.slider .slider-content .colored{
    color: var(--main-blue-color);
}
/* end slider*/

/* card */
.svg-container {
    text-align: center;
    width: 100%;
    position: relative;
}
.svg-container strong{
    position: absolute;
    top: calc(50% - 65px);
    right: 0;
    left: 0;
    margin: auto;
}
.svg-container svg {
    display: inline-block;
    width: 570px;
    height: 465px;
    max-width: 100%;
}
.svg-container svg #circle,
.svg-container svg #quaters-circles,
.svg-container svg .one-line,
.svg-container svg .one-circle {
    opacity: 0;
}
/* card */


/* circle */


.time-line-container .slogan{
    font-size: 22px;
    margin: 20px 0;
    margin-bottom: 0;
    padding: 30px 15px;
    line-height: 55px;
    border-left: 0 !important;
    border-top: 0 !important;
}
.time-line-container .slogan span{
    position: relative;
    top: -55px;
    padding: 15px;
    border-radius: 8px;
}
body.light-theme .time-line-container .slogan{
    border: 1px solid rgb(21 231 118);
}
body.dark-theme .time-line-container .slogan{
    border: 1px solid rgb(21 231 118);
}

body.light-theme .time-line{
    border-left: 1px solid rgb(21 231 118);
    border-bottom: 1px solid rgb(21 231 118);
}
body.dark-theme .time-line{
    border-left: 1px solid rgb(21 231 118);
    border-bottom: 1px solid rgb(21 231 118);
}
body .time-line{
    margin: 0;
    max-width: 100vw !important;
    padding-bottom: 150px;
}
.item {
    margin: 1em 0;
}
.item__number {
    display: inline-block;
    padding: 6px;
    font-size: 34px;
    font-weight: 700;
    width: 45px;
    height: 45px;
    color: #fff;
    border-radius: 50%;
    margin-right: 10px;
    text-align: center;
    z-index: 2;
}
.item__topic {
    padding-left: 80px;
    position: relative;
}
.item__topic:before {
    content: "";
    position: absolute;
    width: 5px;
    height: calc(100% + 1em);
    top: 0;
    left: 35px;
}
.item__topic__title {
    font-weight: 700;
    font-size: 16px;
}
.item__topic__author {
    font-size: 14px;
    color: #999;
}

@media (min-width: 768px) {
    .time-line {
        display: grid;
        max-width: 100%;
        min-height: 150vh;
        padding-bottom: 5em;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: min-content minmax(100px, 0.8fr) repeat(2, 125px) 320px repeat(2, 125px);
    }
    h1 {
        font-size: 50px;
        grid-column: 1/-1;
    }
    .item {
        margin: 0;
    }
    .item:nth-of-type(1) {
        grid-column: 1;
        grid-row: 3;
    }
    .item:nth-of-type(2) {
        grid-column: 2;
        grid-row: 4;
    }
    .item:nth-of-type(3) {
        grid-column: 3;
        grid-row: 3;
    }
    .item:nth-of-type(4) {
        grid-column: 4;
        grid-row: 4;
    }
    .item:nth-of-type(5) {
        grid-column: 1;
        grid-row: 6;
    }
    .item:nth-of-type(5) .item__topic {
        width: 180%;
    }
    .item:nth-of-type(6) {
        grid-column: 2;
        grid-row: 7;
        margin-left: 30%;
    }
    .item:nth-of-type(6) .item__topic {
        width: 200%;
    }
    .item:nth-of-type(7) {
        grid-column: 3;
        grid-row: 6;
        margin-left: 30%;
    }
    .item {
        position: relative;
        text-align: center;
    }
    .item__number {
        font-size: 56px;
        line-height: 1.8;
        width: 95px;
        height: 95px;
        margin: auto;
    }
    .item__topic {
        position: absolute;
        text-align: left;
        width: 220% !important;
        left: 50%;
        margin-left: -35px;
        padding-left: 60px;
    }
    .item__topic__title {
        margin-bottom: 8px;
    }
    .item--top .item__topic {
        bottom: calc(100% + 1em);
    }
    .item--bottom .item__topic {
        top: 100%;
        padding-top: 10px;
    }
    .item--left .item__topic {
        text-align: right;
        right: 50%;
        left: auto;
        padding-right: 25px;
        width: 140%;
    }
    .item--left .item__topic:before {
        left: auto;
        right: 0;
    }
    .tagcloud-container {
        height: 360px;
    }
}
@media (min-width: 1240px) {
    .time-line {
        display: grid;
        margin: auto;
        max-width: 1150px;
        min-height: 100vh;
        grid-template-columns: repeat(4, 125px) 20px repeat(3, 125px) 1fr;
        grid-template-rows: min-content 25% repeat(2, min-content);
        grid-gap: 10px;
        justify-items: stretch;
        align-content: center;
    }

    .item:nth-of-type(1) {
        grid-column: 1;
        grid-row: 3;
    }
    .item:nth-of-type(1) .item__topic {
        padding-bottom: 5em;
    }
    .item:nth-of-type(2) {
        grid-column: 2;
        grid-row: 4;
    }
    .item:nth-of-type(2) .item__topic {
        padding-top: 6em;
    }
    .item:nth-of-type(3) {
        grid-column: 3;
        grid-row: 3;
    }
    .item:nth-of-type(3) .item__topic {
        padding-bottom: 11em;
    }
    .item:nth-of-type(4) {
        grid-column: 4;
        grid-row: 4;
        margin-left: 20%;
    }
    .item:nth-of-type(4) .item__topic {
        padding-top: 3em;
        width: 220%;
        margin-right: -16px;
    }
    .item:nth-of-type(5) {
        grid-column: 6;
        grid-row: 3;
    }
    .item:nth-of-type(5) .item__topic {
        padding-bottom: 2em;
    }
    .item:nth-of-type(6) {
        grid-column: 7;
        grid-row: 4;
        margin-left: 15%;
    }
    .item:nth-of-type(6) .item__topic {
        padding-top: 8em;
        left: calc(50% + 7px);
    }
    .item:nth-of-type(7) {
        grid-column: 8;
        grid-row: 3;
    }
    .item:nth-of-type(7) .item__topic {
        padding-bottom: 5em;
        width: 220%;
        left: 70%;
    }
}
.item:nth-of-type(1) .item__number {
    background: rgba(216, 27, 96, 0.6);
}
.item:nth-of-type(1) .item__topic:before {
    background: rgba(216, 27, 96, 0.6);
}
.item:nth-of-type(1) .item__topic__title {
    color: #d81b60;
}
.item:nth-of-type(2) .item__number {
    background: rgba(244, 81, 30, 0.6);
}
.item:nth-of-type(2) .item__topic:before {
    background: rgba(244, 81, 30, 0.6);
}
.item:nth-of-type(2) .item__topic__title {
    color: #f4511e;
}
.item:nth-of-type(3) .item__number {
    background: rgba(58, 61, 183, 0.6);
}
.item:nth-of-type(3) .item__topic:before {
    background: rgba(58, 61, 183, 0.6);
}
.item:nth-of-type(3) .item__topic__title {
    color: #3a3db7;
}
.item:nth-of-type(4) .item__number {
    background: rgba(249, 185, 27, 0.6);
}
.item:nth-of-type(4) .item__topic:before {
    background: rgba(249, 185, 27, 0.6);
}
.item:nth-of-type(4) .item__topic__title {
    color: #f9b91b;
}
.item:nth-of-type(5) .item__number {
    background: rgba(62, 62, 62, 0.6);
}
.item:nth-of-type(5) .item__topic:before {
    background: rgba(62, 62, 62, 0.6);
}
.item:nth-of-type(5) .item__topic__title {
    color: #c96c6c;
}
.item:nth-of-type(6) .item__number {
    background: rgba(103, 58, 101, 0.6);
}
.item:nth-of-type(6) .item__topic:before {
    background: rgba(103, 58, 101, 0.6);
}
.item:nth-of-type(6) .item__topic__title {
    color: #673a65;
}
.item:nth-of-type(7) .item__number {
    background: rgba(74, 189, 153, 0.6);
}
.item:nth-of-type(7) .item__topic:before {
    background: rgba(74, 189, 153, 0.6);
}
.item:nth-of-type(7) .item__topic__title {
    color: #4abd99;
}
@media (min-width: 1240px) {
    .item {
        overflow: visible;
    }
    .item:before, .item:after {
        content: "";
        position: absolute;
        transform: skew(45deg);
        z-index: -1;
        opacity: 0.3;
    }
    .item:nth-of-type(1):before {
        background: #d81b60;
        width: 120%;
        height: 30px;
        left: 0;
        margin-left: -68%;
        bottom: 25%;
    }
    .item:nth-of-type(1):after {
        background: #673a65;
        width: 40px;
        height: 120%;
        right: 0;
        top: 50%;
    }
    .item:nth-of-type(2):before {
        background: #f4511e;
        width: 35px;
        height: 80%;
        transform: none;
        left: 20%;
        bottom: 38%;
    }
    .item:nth-of-type(2):after {
        background: #f4511e;
        transform: skew(-55deg);
        opacity: 0.5;
        width: 35px;
        height: 25px;
        bottom: 118%;
        left: 35%;
    }
    .item:nth-of-type(3):before {
        background: #3a3db7;
        width: 35px;
        height: 45px;
        transform: none;
        left: -59%;
        bottom: 30%;
    }
    .item:nth-of-type(3):after {
        background: #3a3db7;
        opacity: 0.5;
        width: 108%;
        height: 34px;
        bottom: 40%;
        left: -46%;
    }
    .item:nth-of-type(4):before {
        background: #f9b91b;
        width: 40px;
        height: 120%;
        left: -65%;
        bottom: 55%;
    }
    .item:nth-of-type(4):after {
        background: #4abd99;
        width: 105%;
        height: 30px;
        top: 20%;
        left: -5%;
    }
    .item:nth-of-type(5):before {
        background: #3e3e3e;
        width: 35px;
        transform: none;
        height: 107%;
        left: -49%;
        bottom: -52%;
    }
    .item:nth-of-type(5):after {
        background: #3e3e3e;
        opacity: 0.6;
        width: 72%;
        height: 35px;
        top: 45%;
        left: -35%;
    }
    .item:nth-of-type(6):before {
        background: #673a65;
        width: 40px;
        height: 120%;
        left: -49%;
        top: -63%;
    }
    .item:nth-of-type(6):after {
        background: #4abd99;
        transform: none;
        width: 170%;
        height: 40px;
        bottom: 43%;
        left: 22%;
    }
    .item:nth-of-type(7):before {
        transform: scaleX(-1);
        opacity: 0.5;
        border-left: 35px solid #4abd99;
        border-bottom: 40px solid transparent;
        height: 120px;
        width: 0;
        bottom: -65%;
        left: 18%;
    }
    .item:nth-of-type(7):after {
        top: 37%;
        left: 17%;
        transform: scaleX(-1);
        border-top: 35px solid #3a3db7;
        border-right: 35px solid transparent;
        height: 0;
        width: 295%;
    }
}
/* end circle */


/* tagcloud */
.tagcloud-container {
    display: flex;
    justify-content: space-evenly;
    height: 525px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
    align-items: flex-end;
    flex-direction: row-reverse;
}
.tagcloud-wrapper {
    --_control-diamater: var(--tagcloud-controls-diameter);
    --_control-radius: calc(var(--_control-diamater) / 2);
    --_diameter: var(--tagcloud-diameter);
    --_radius: calc(calc(var(--_diameter) / 2) - calc(var(--tag-diameter) / 2));
    width: var(--control-diameter);
    aspect-ratio: 1 / 1;
    font-family: var(--tag-font-family);
    font-size: var(--tag-font-size);
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
}

@media only screen and (max-width: 48rem) {
    .tagcloud-wrapper {
        --_control-diamater: calc(var(--tagcloud-controls-diameter) * 0.5);
        --_diameter: calc(var(--tagcloud-diameter) * 0.88);
    }
}
@media only screen and (max-width: 32rem) {
    .tagcloud-wrapper {
        --_diameter: calc(var(--tagcloud-diameter) * 0.75);
    }
}

.tagcloud-wrapper:has(.tagcloud-rotation:hover)  {
    --tagcloud-animation-play-state: paused;
}

.tagcloud-wrapper .tagcloud-tags {
    position: absolute;
    width: var(--_diameter);
    aspect-ratio: 1 / 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    list-style-type: none;
    position: relative;
    transform-style: inherit;
    animation: tagcloud-rotation var(--tagcloud-animation-duration) var(--tagcloud-animation-direction)
    linear infinite var(--tagcloud-animation-play-state);
}

@keyframes tagcloud-rotation {
    from {transform: translate(-50%, -50%) rotateX(0deg);}
    to {transform: translate(-50%, -50%) rotateX(360deg);}
}

.tagcloud-wrapper .tagcloud-tags:has(.tagcloud-tag div a:hover) .tagcloud-tag:not(:has(div a:hover)) {
    opacity: 0.25;
}

.tagcloud-wrapper .tagcloud-tag {
    --_phi: acos(calc(-1 + (2 * var(--index)) / var(--num-elements)));
    --_theta: calc(sqrt(calc(var(--num-elements) * 3.141592653589793)) * var(--_phi));
    --_x: calc(cos(var(--_theta)) * sin(var(--_phi)));
    --_y: calc(sin(var(--_theta)) * sin(var(--_phi)));
    --_z: calc(cos(var(--_phi)));
    --_vector-length: sqrt(var(--_x) * var(--_x) + var(--_y) * var(--_y) + var(--_z) * var(--_z));
    --_normalized-x: calc(var(--_x) / var(--_vector-length));
    --_normalized-y: calc(var(--_y) / var(--_vector-length));
    --_normalized-z: calc(var(--_z) / var(--_vector-length));
    --_scaled-x: calc(var(--_normalized-x) * var(--_radius));
    --_scaled-y: calc(var(--_normalized-y) * var(--_radius));
    --_scaled-z: calc(var(--_normalized-z) * var(--_radius));
    --_final-x: calc(var(--_scaled-x) + var(--_radius));
    --_final-y: calc(var(--_scaled-y) + var(--_radius));
    --_final-z: var(--_scaled-z);
    pointer-events: none;
    width: var(--tag-diameter);
    height: var(--tag-diameter);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transition: opacity var(--tagcloud-transition-duration) var(--tagcloud-transition-ease);
    transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z));
    animation: tagcloud-tag-rotation var(--tagcloud-animation-duration) var(--tagcloud-animation-direction) linear infinite var(--tagcloud-animation-play-state);
}

@keyframes tagcloud-tag-rotation {
    from {transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z)) rotateX(360deg);}
    to {transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z)) rotateX(0deg);}
}

.tagcloud-wrapper .tagcloud-tag div {
    transform: rotateZ(calc(var(--_current-rotation) * -1deg));
    transition: transform var(--tagcloud-transition-user-duration) var(--tagcloud-transition-user-ease);
    font-size: 12px;
}

.tagcloud-wrapper .tagcloud-tag div a {
    pointer-events: initial;
    color: rgb(var(--tag-font-color-rgb));
    text-decoration: none;
    text-shadow: 1px  1px 1px rgb(var(--tagcloud-bg-color-rgb)),
    1px -1px 1px rgb(var(--tagcloud-bg-color-rgb)),
    -1px  1px 1px rgb(var(--tagcloud-bg-color-rgb)),
    -1px -1px 1px rgb(var(--tagcloud-bg-color-rgb)),
    0 0 1rem rgb(var(--tagcloud-bg-color-rgb));
}

.tagcloud-wrapper .tagcloud-controls {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    --_current-rotation: var(--tagcloud-start-rotation);
    transform-style: inherit;
    background-color: rgba(0, 0, 0, 0);
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button {
    --_width: var(--_control-radius);
    --_height: calc(var(--_control-diamater) * 3.141592653589793 / var(--num-elements) + 1px);
    --_theta-start: 0;
    --_theta-length: calc(2 * 3.141592653589793);
    --_segment: calc(var(--_theta-start) + var(--index) / var(--num-elements) * var(--_theta-length));
    --_x: calc(var(--_control-radius) * cos(var(--_segment)));
    --_y: calc(var(--_control-radius) * sin(var(--_segment)) + var(--_control-radius) - var(--_height) / 2);
    --_rotation: calc(var(--index) / var(--num-elements) * 360deg);
    position: absolute;
    left: var(--_x);
    top: var(--_y);
    width: var(--_width);
    height: var(--_height);
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    transform-origin: right center;
    transform: rotate(var(--_rotation));
    transition: background-color var(--tagcloud-transition-duration) var(--tagcloud-transition-ease);
    background-color: var(--tagcloud-control-bg-color);
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button input {
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) {
    background-color: var(--tagcloud-control-bg-checked-color);
}
.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:hover) {
    background-color: var(--tagcloud-control-bg-hover-color);
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(1) input:checked) {
    --_current-rotation: 108;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(2) input:checked) {
    --_current-rotation: 126;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(3) input:checked) {
    --_current-rotation: 144;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(4) input:checked) {
    --_current-rotation: 162;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(5) input:checked) {
    --_current-rotation: 180;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(6) input:checked) {
    --_current-rotation: 198;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(7) input:checked) {
    --_current-rotation: 216;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(8) input:checked) {
    --_current-rotation: 234;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(9) input:checked) {
    --_current-rotation: 252;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(10) input:checked) {
    --_current-rotation: 270;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(11) input:checked) {
    --_current-rotation: 288;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(12) input:checked) {
    --_current-rotation: 306;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(13) input:checked) {
    --_current-rotation: 324;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(14) input:checked) {
    --_current-rotation: 342;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(15) input:checked) {
    --_current-rotation: 0;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(16) input:checked) {
    --_current-rotation: 18;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(17) input:checked) {
    --_current-rotation: 36;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(18) input:checked) {
    --_current-rotation: 54;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(19) input:checked) {
    --_current-rotation: 72;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(20) input:checked) {
    --_current-rotation: 90;
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) ~ .tagcloud-rotation {
    transform: translate(-50%, -50%) rotate(calc(var(--_current-rotation) * 1deg));
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) ~ .tagcloud-rotation .tagcloud-tags .tagcloud-tag div {
    transform: rotateZ(calc(var(--_current-rotation) * -1deg));
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-rotation {
    position: absolute;
    width: 100%;
    aspect-ratio: 1 / 1;
    perspective: calc(var(--_diameter) * 2);
    transform-style: preserve-3d;
    left: 50%;
    background-color: rgba(0, 0, 0, 0);
    top: 50%;
    /*background: radial-gradient(rgba(var(--tagcloud-bg-color-rgb), 0.75) 15%, rgba(var(--tagcloud-bg-color-rgb), 0) calc(75% - var(--tag-diameter)));*/
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(calc(var(--_current-rotation) * 1deg));
    transition: transform var(--tagcloud-transition-user-duration) var(--tagcloud-transition-user-ease);
}

.tag-content{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    line-height: 45px;
}
/*  end tagcloud */


/* features */
.card {
    border: none;
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

.card-title {
    font-weight: 600;
    font-size: 1.25rem;
}

.card-text {
    color: #6c757d;
}

.btn-custom {
    background-color: #0d6efd;
    color: #fff;
    transition: background-color 0.3s ease;
}

.btn-custom:hover {
    background-color: #0b5ed7;
}
/* end features */


/* steps */

ul.infoGraphic {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
}
ul.infoGraphic li:nth-child(1){
    position: relative;
    top: 0;
}
ul.infoGraphic li:nth-child(2){
    position: relative;
    top: 45px;
}
ul.infoGraphic li:nth-child(3){
    position: relative;
    top: 20px;
}
ul.infoGraphic li:nth-child(4){
    position: relative;
    top: 40px;
}
ul.infoGraphic li {
    position: relative;
    width: 100%;
    max-width: 19em;
    border-radius: 0.5em;
    padding: 0.5em;
    z-index: 1;
    transition: all 0.2s;
    cursor: pointer;
}
ul.infoGraphic li .numberWrap {
    position: absolute;
    overflow: hidden;
}
ul.infoGraphic li .number {
    font-size: 13em;
    font-weight: 900;
    width: 0.9em;
    text-align: center;
}
ul.infoGraphic li .number.fontColor1 {
    color: var(--blue);
}
ul.infoGraphic li .number.fontColor2 {
    color: var(--green);
}
ul.infoGraphic li .number.fontColor3 {
    color: var(--purple);
}
ul.infoGraphic li .number.fontColor4 {
    color: var(--gold);
}
ul.infoGraphic li .number.fontColor5 {
    color: var(--red);
}
ul.infoGraphic li .number.fontColor6 {
    color: var(--orange);
}
ul.infoGraphic li .coverWrap {
    transform: rotate(130deg);
    position: absolute;
    width: 18em;
    height: 15em;
    left: -3em;
    top: -1em;
}
ul.infoGraphic li .coverWrap .numberCover {
    position: absolute;
    width: 18em;
    height: 6em;
    border-radius: 50% 50% 0 0;
    transition: all 0.4s;
}
ul.infoGraphic li .coverWrap .numberCover::before {
    position: absolute;
    content: "";
    bottom: 5px;
    left: 4em;
    right: 4em;
    top: 5em;
    border-radius: 100px/10px;
    z-index: -1;
}
ul.infoGraphic li .coverWrap .numberCover::after {
    position: absolute;
    bottom: 0;
    content: "";
    left: -10%;
    width: 120%;
    height: 150%;
    z-index: 1;
}
ul.infoGraphic li .content {
    margin: 8em 2em 2em 9em;
    position: relative;
}
ul.infoGraphic li .content h2 {
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
}
ul.infoGraphic li .content p {
    line-height: 1.5em;
}

ul.infoGraphic li:hover .coverWrap .numberCover {
    border-radius: 100%;
}

/* end steps */

/* contact us */

.cta-card {
    position: relative;
    width: 100%;
    border-radius: 2rem;
    padding: 8.5rem;
    text-align: center;
}
.cta-card::before {
    content: "";
    position: absolute;
    top: -2.5rem;
    left: -2.5rem;
    z-index: -10;
    display: block;
    width: calc(100% + 5rem);
    height: calc(100% + 5rem);
    border-radius: 2rem;
}
@media only screen and (max-width: 56.25em) {
    .cta-card::before {
        display: none;
    }
}
.cta-card__container {
    max-width: 46rem;
    margin: 0 auto;
}
@media only screen and (max-width: 56.25em) {
    .cta-card__container {
        max-width: 80%;
    }
}
.cta-card__title {
    margin-bottom: 1rem;
    font-size: 2.6rem;
    font-weight: 700;
    color: #fff;
}
.cta-card__description {
    max-width: 75%;
    margin: 0 auto;
    margin-bottom: 3rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: #fff;
}
.cta-card__input-box {
    position: relative;
}
.cta-card__input {
    width: 100%;
    padding: 2.2rem 2.5rem;
    display: inline-block;
    outline: none;
    border: 2px solid rgba(243, 248, 254, 0.3);
    border-radius: 10rem;
    font-size: 2rem;
    color: #fff;
    background-color: rgb(243 248 254 / 0%);
}
.cta-card__input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
.cta-card__input:focus {
    outline: 4px solid rgba(218, 70, 218, 0.4);
    border: 2px solid transparent;
}
.cta-card__button {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    width: 5.1rem;
    height: 5.1rem;
    transform: translateY(-50%);
    outline: none;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #15e575;
    color: #fff;
}
.cta-card__button path {
    transition: all 0.3s ease;
    color: #fff;
}
.cta-card__button:hover path {
    stroke: #da46da;
}
.cta-card__button:active {
    transform: translate(0.3rem, -50%);
}
@media only screen and (max-width: 37.5em) {
    .cta-card__button:active {
        transform: none;
    }
}
@media only screen and (max-width: 37.5em) {
    .cta-card__button {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        width: 100%;
        height: auto;
        border-radius: 100rem;
        margin-top: 1.2rem;
        padding: 1.6rem;
        transform: none;
    }
}
.cta-card__img-box {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    transform: translate(-50%, 50%);
}
@media only screen and (max-width: 56.25em) {
    .cta-card__img-box {
        gap: 0;
    }
}
.cta-card__img {
    width: 9.4rem;
    height: 9.4rem;
    border: 0.8rem solid #fff;
    border-radius: 50%;
    box-shadow: 0 1.4rem 2.5rem -1.5rem rgba(82, 113, 224, 0.5);
    transition: filter 0.3s ease;
}
.cta-card__img:hover {
    filter: grayscale(1);
}
@media only screen and (max-width: 56.25em) {
    .cta-card__img:hover {
        filter: none;
    }
}
@media only screen and (max-width: 37.5em) {
    .cta-card__img:hover {
        transform: none;
    }
}
@media only screen and (max-width: 56.25em) {
    .cta-card__img {
        margin-right: -2.4rem;
    }
}
@media only screen and (max-width: 37.5em) {
    .cta-card__img {
        width: 8.4rem;
        height: 8.4rem;
        border: 0.4rem solid #fff;
    }
}
@media only screen and (max-width: 67.5em) {
    .cta-card {
        width: 90%;
    }
}
@media only screen and (max-width: 56.25em) {
    .cta-card {
        padding: 6rem 0 8.5rem;
    }
}
/* end contact us */


/* footer */
.footer-section ul {
    margin: 0;
    padding: 0;
}
.footer-section {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    direction: rtl;
    width: 100%;
}
.footer-cta {
    border-bottom: 1px solid #373636;
    direction: rtl;
}
.single-cta{
    display: flex
;
}
.single-cta i {
    color: #ff5e14;
    font-size: 30px;
    float: left;
    margin-top: 8px;
}
.cta-text {
    padding-right: 15px;
    display: inline-block;
}
.cta-text h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 2px;
}
.cta-text span {
    color: #fff;
    font-size: 15px;
}
.footer-content {
    position: relative;
    z-index: 2;
}
.footer-pattern img {
    position: absolute;
    top: 0;
    right: 0;
    height: 330px;
    background-size: cover;
    background-position: 100% 100%;
}
.footer-logo {
    margin-bottom: 30px;
}
.footer-logo img {
    max-width: 200px;
}
.footer-text p {
    margin-bottom: 14px;
    font-size: 14px;
    color: #fff;
    line-height: 28px;
}
.footer-social-icon span {
    color: #fff;
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 20px;
}
.footer-social-icon a {
    color: #fff;
    font-size: 16px;
    margin-left: 15px;
}
.footer-social-icon i {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
}
.facebook-bg{
    background: #3B5998;
}
.twitter-bg{
    background: #55ACEE;
}
.google-bg{
    background: #DD4B39;
}
.footer-widget-heading h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 40px;
    position: relative;
}
.footer-widget-heading h3::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: -15px;
    height: 2px;
    width: 50px;
    background: #ff5e14;
}
.footer-widget ul li {
    display: inline-block;
    float: left;
    width: 50%;
    margin-bottom: 12px;
}
.footer-widget ul li a:hover{
    color: #ff5e14;
}
.footer-widget ul li a {
    color: #ffffff;
    text-transform: capitalize;
    text-decoration: none;
}
.subscribe-form {
    position: relative;
    overflow: hidden;
}
.subscribe-form input {
    width: 100%;
    padding: 14px 28px;
    background: #2E2E2E;
    border: 1px solid #2E2E2E;
    color: #fff;
}
.subscribe-form button {
    position: absolute;
    left: 0;
    background: #ff5e14;
    padding: 13px 20px;
    border: 1px solid #ff5e14;
    top: 0;
}
.subscribe-form button i {
    color: #fff;
    font-size: 22px;
    transform: rotate(-6deg);
}
.copyright-area{
    padding: 25px 0;
}
.footer-menu ul {
    margin: 0 !important;
}
.copyright-text p {
    margin: 0;
    font-size: 14px;
    color: #878787;
}
.copyright-text p a{
    color: #ff5e14;
}
.footer-menu li {
    display: inline-block;
    margin-left: 20px;
}
.footer-menu li:hover a{
    color: #ff5e14;
}
.footer-menu li a {
    font-size: 14px;
    color: #878787;
    text-decoration: none;
}
/* end footer */