/*------------------------------------

    Theme Name  : Teachestan
    Theme URI   : http://teachestan.com/
    Description : Teachestan 
    Author Name : @kourosh-http://afracode.comneyestani
    Author URI  :
    Version     : 1.0

------------------------------------*/
/*------------------------------------

    STYLESHEET INDEXING
    |
    |
    |___ Default Styles
    |	|
    |   |___ variables
    |   |___ mixins
    |   |___ reset
    |   |___ typography
    |   |___ extend
    |   |___ animations
    |   |___ spacing
    |   |___ Helpers
    |
    |
    |___ Structure Styles
    |	|
    |   |___ Header
    |   |___ Footer
    |   |___ Wrapper
    |   |___ Sidenav
    |   |___ Sidebar
    |   |___ Content
    |   |___ Container
    |
    |
    |___ Elements Styles
    |	|
    |   |___ Box
    |   |___ Icon
    |   |___ List
    |   |___ Card
    |   |___ Tabs
    |   |___ Form
    |   |___ Title
    |   |___ Skill
    |   |___ Block
    |   |___ Button
    |   |___ Resume
    |   |___ Widget
    |   |___ Divider
    |   |___ Accordion
    |   |___ Pagination
    |   |___ Breadcrumb
    |   |___ Blockquote
    |   |___ Common Elements
    |
    |
    |___ Sections Styles
    |	|
    |   |___ Hero
    |   |___ About
    |   |___ Posts
    |   |___ Users
    |   |___ Quotes
    |   |___ Search
    |   |___ Contact
    |   |___ Features
    |   |___ Services
    |   |___ Comments
    |   |___ Portfolio
    |   |___ Testimonials
    |   |___ Call To Action
    |   |___ Pricing Tables
    |   |___ Common Sections
    |
 	|
    |___ Other Styles
    |   |
    |   |___ Demo Options
    |   |___ Theme Preview
    |
    |
    END STYLESHEET INDEXING

------------------------------------*/
/*------------------------------------
    Default Styles
------------------------------------*/
@import "../css/bootstrap.min.css";

@font-face {
    font-family: "Noto Naskh Arabic";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/noto/NotoNaskhArabic-Regular.eot");
    src: url("../fonts/noto/NotoNaskhArabic-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/noto/NotoNaskhArabic-Regular.woff2") format("woff2"), url("../fonts/noto/NotoNaskhArabic-Regular.woff") format("woff"), url("../fonts/noto/NotoNaskhArabic-Regular.ttf") format("truetype");
}

/*------------------------------------
    Variables
------------------------------------*/
:root {
    --gray: #eee;
    --white: #fff;
    --black: #000;
    --base: #f6f6f6;
    --base-0: #fff;
    --base-1: #151812;
    --base-2: "";
    --base-3: "";
    --primary: #941cb9;
    --primary: #239df0;
    --primary: #f6931c;
    --primary: darkslateblue;
    --primary: #5b70f9;
    --primary-1: #384cce;
    --primary-3: #0e0b2b;
    --secondary: #f64f1c;
    --secondary: #ff66a6;
    --secondary: #00c9b7;
    --secondary-1: rgb(18, 172, 159);
    --text-color: #717f94;
    --color-1: #70b6fe;
    --color-2: #c670fe;
    --color-3: #fec070;
    --color-4: #dc3545;
    --color-5: #28a745;
    --color-5-2: #0e8129;
    --color-6: darkblue;
    --default: rgb(252, 255, 235);
}

/*------------------------------------
    Mixins
------------------------------------*/
/*------------------------------------
    Reset Styels
------------------------------------*/
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:root.skin-1 {
    --base-0: #fff;
    --base-1: #000;
    --primary: orange;
    --primary-1: #ff8800;
}

:root.skin-2 {
    --base-0: #f6afba;
    --base-1: #151515;
    --primary: #de5881;
    --primary-1: rgb(252, 90, 171);
}

:root.skin-3 {
    --base-0: #050607;
    --base-1: #f1f1f1;
    --primary: #0b7554;
    --primary-1: #339266;
}

:root.skin-4 {
    --base-0: #0e262b;
    --base-1: #f1f1f1;
    --primary: #7b1f29;
    --primary-1: darkred;
}

:root.skin-5 {
    --base-0: #373a36;
    --base-1: #ffffff;
    --primary: tomato;
    --primary-1: tomato;
}

:root.skin-5 {
    --base-0: #1e464a;
    --base-1: #fff;
    --primary: #00b7b8;
    --primary-1: #339266;
}

:root.skin-6 {
    --base-0: #fff;
    --base-1: #000;
    --primary: #33b5e5;
    --primary-1: rgb(158, 221, 241);
}

:root.skin-7 {
    --base-0: #212121;
    --base-1: #fff;
    --primary: #0b7554;
    --primary-1: #0b7554;
}

:root.skin-8 {
    --base-0: #272933;
    --base-1: #fff;
    --primary: #00b7b8;
    --primary-1: #00b7b8;
}

:root.skin-9 {
    --base-0: #000;
    --base-1: #fff;
    --primary: #00bcd4;
    --primary-1: #00bcd4;
}

:root.skin-10 {
    --base-0: #0a0a0a;
    --base-1: #ffffff;
    --primary: #1d32f2;
    --primary-1: #1d32f2;
}

:root.skin-11 {
    --base-0: #121212;
    --base-1: #e6e2dd;
    --primary: #845ec2;
    --primary-1: #845ec2;
}

:root.skin-12 {
    --base-0: #0e262b;
    --base-1: #ffffff;
    --primary: #7b1f29;
    --primary-1: darkred;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}

body {
    width: 100%;
    color: var(--base-1);
    margin: 0;
    background-color: var(--base-0);
}

body.state-menu {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    height: 100vh !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}

html,
button,
input,
select,
textarea {
    font-family: "Poppins", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus {
    outline: inherit;
}

a:active,
a:hover {
    color: inherit;
    outline: 0;
}

a:hover {
    text-decoration: underline;
}

address {
    font-style: italic;
    margin: 0 0 24px;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

p {
    margin: 0 0 24px;
    font-weight: 300;
    color: #595959;
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 14px;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

pre {
    background: #f5f5f5;
    color: #666;
    font-family: monospace;
    font-size: 14px;
    margin: 20px 0;
    overflow: auto;
    padding: 20px;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

blockquote,
q {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

blockquote {
    font-size: 18px;
    font-style: italic;
    font-weight: 300;
    margin: 24px 40px;
}

blockquote blockquote {
    margin-right: 0;
}

blockquote cite,
blockquote small {
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
}

blockquote em,
blockquote i {
    font-style: normal;
    font-weight: 300;
}

blockquote strong,
blockquote b {
    font-weight: 400;
}

small {
    font-size: smaller;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

dl {
    margin: 0 20px;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 0 20px;
}

menu,
ol,
ul {
    margin: 16px 0;
    padding: 0 0 0 40px;
}

ul {
    list-style-type: square;
}

li {
    outline: inherit;
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

li > ul,
li > ol {
    margin: 0;
}

img {
    -ms-interpolation-mode: bicubic;
    border: 0;
    vertical-align: middle;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

form {
    margin: 0;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    min-width: inherit;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
    white-space: normal;
}

button,
input,
select,
textarea {
    font-size: 100%;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
}

button,
input {
    line-height: normal;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    cursor: pointer;
}

button[disabled],
input[disabled] {
    cursor: default;
}

input[type=checkbox],
input[type=radio] {
    padding: 0;
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    appearance: textfield;
    padding-right: 2px;
    width: 270px;
}

input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-bottom: 1px solid #ededed;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    line-height: 2;
    margin: 0 0 20px;
    width: 100%;
}

caption,
th,
td {
    font-weight: normal;
    text-align: left;
}

caption {
    font-size: 16px;
    margin: 20px 0;
}

th {
    font-weight: bold;
    text-transform: uppercase;
}

td {
    border-top: 1px solid #ededed;
    padding: 6px 10px 6px 0;
}

del {
    color: #333;
}

ins {
    background: #fff9c0;
    text-decoration: none;
}

hr {
    background-size: 4px 4px;
    border: 0;
    height: 1px;
    margin: 0 0 24px;
}

input,
button,
select,
textarea {
    border: inherit;
    outline: inherit;
    background: transparent;
    -webkit-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}

input:focus, input:active,
button:focus,
button:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
    outline: none;
}

.button:not(:disabled):not(.disabled) {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
}

.skin-5 .button,
.skin-5 .el-tabs .el-tabs-links li.active {
    color: #fff !important;
}

hr {
    width: 100%;
    height: 10px;
    display: block;
    position: relative;
    border-bottom: 1px solid var(--gray);
}

@media (min-width: 992px) {
    .h-lg-100 {
        height: 100%;
    }
}

/*------------------------------------
    Fonts
------------------------------------*/
/*------------------------------------
    Typography
------------------------------------*/
body {
    font-size: 14px;
    font-family: "Poppins", sans-serif;
}

p {
    font-size: 14px;
    line-height: 1.7;
    font-family: "Poppins", sans-serif;
    letter-spacing: -0.3px;
}

p a {
    color: var(--primary-1);
}

p a:hover {
    color: var(--primary-1);
    text-decoration: underline;
}

a {
    -webkit-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

a:hover,
a:focus,
a:active {
    color: inherit;
    text-decoration: none;
    outline: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ol,
ul,
hr,
pre,
menu,
table,
caption,
address,
blockquote {
    margin: 0;
    margin-bottom: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--base-1);
    font-family: "Poppins", sans-serif;
}

h1,
.h1 {
    line-height: 1.2;
    font-size: 60px;
}

h2,
.h2 {
    font-size: 54px;
}

h3,
.h3 {
    font-size: 24px;
}

h4,
.h4 {
    font-size: 20px;
}

h5,
.h5 {
    font-size: 18px;
}

h6,
.h6 {
    font-size: 16px;
}

h1,
.h1 {
    font-weight: 700;
}

h2,
.h2,
h3,
.h3 {
    font-weight: 600;
}

h4,
.h4,
h5,
.h5 {
    font-weight: 600;
}

h6,
.h6 {
    font-weight: 500;
}

::-webkit-input-placeholder {
    color: var(--base-1);
}

:-ms-input-placeholder {
    color: var(--base-1);
}

::-ms-input-placeholder {
    color: var(--base-1);
}

::placeholder {
    color: var(--base-1);
}

@media (max-width: 768px) {
    p {
        font-size: 12px;
    }
}

/*------------------------------------
    Animations
------------------------------------*/
@-webkit-keyframes drift {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    from {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes drift {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    from {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes zoom {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(1.11, 1.11);
        transform: scale(1.11, 1.11);
    }
}

@keyframes zoom {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(1.11, 1.11);
        transform: scale(1.11, 1.11);
    }
}

@-webkit-keyframes music {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    25% {
        opacity: 0.3;
        -webkit-transform: scale(1.11, 1.11);
        transform: scale(1.11, 1.11);
    }
    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

@keyframes music {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    25% {
        opacity: 0.3;
        -webkit-transform: scale(1.11, 1.11);
        transform: scale(1.11, 1.11);
    }
    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

@-webkit-keyframes home-4 {
    0% {
        opacity: 0.1;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        opacity: 0.3;
        border-radius: 50%;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    100% {
        opacity: 0.1;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@keyframes home-4 {
    0% {
        opacity: 0.1;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        opacity: 0.3;
        border-radius: 50%;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    100% {
        opacity: 0.1;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@-webkit-keyframes noise {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
    }
    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

@keyframes noise {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
    }
    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translate(1, 1);
        transform: translate(1, 1);
    }
    90% {
        -webkit-transform: translate(0, 12px);
        transform: translate(0, 12px);
    }
    100% {
        -webkit-transform: translate(1, 1);
        transform: translate(1, 1);
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translate(1, 1);
        transform: translate(1, 1);
    }
    90% {
        -webkit-transform: translate(0, 12px);
        transform: translate(0, 12px);
    }
    100% {
        -webkit-transform: translate(1, 1);
        transform: translate(1, 1);
    }
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0;
    }
    to {
        background-position: 0 0;
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0;
    }
    to {
        background-position: 0 0;
    }
}

@-webkit-keyframes MoveUpDown {
    0% {
        top: -2px;
    }
    50% {
        top: 0;
    }
    100% {
        top: 3px;
    }
}

@keyframes MoveUpDown {
    0% {
        top: -2px;
    }
    50% {
        top: 0;
    }
    100% {
        top: 3px;
    }
}

@-webkit-keyframes blinking-cursor {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes blinking-cursor {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes circleCarousel {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes circleCarousel {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes bounce-out {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    30% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes bounce-out {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    30% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@-webkit-keyframes preloader-6 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes preloader-6 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*------------------------------------
    Spacing
------------------------------------*/
.mb-0 {
    margin-bottom: 0;
}

.mt-15 {
    margin-top: 15px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb--15 {
    margin-bottom: -15px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb--30 {
    margin-bottom: -30px !important;
}

.mb--45 {
    margin-bottom: -45px;
}

.pl-0 {
    padding-left: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pt-15 {
    padding-top: 15px;
}

.pt-30 {
    padding-top: 30px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-30 {
    padding-left: 30px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-30 {
    padding-right: 30px;
}

.pr-45 {
    padding-right: 45px !important;
}

.mt-spacing {
    margin-top: 100px;
}

.mb-spacing {
    margin-bottom: 100px;
}

.row-xs {
    margin-left: -6px !important;
    margin-right: -6px !important;
}

.row-xs > * {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.row-sm {
    margin-left: -12px !important;
    margin-right: -11px !important;
}

.row-sm > * {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.row-md {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.row-md > * {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/*------------------------------------
    Helpers
------------------------------------*/
.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.lowercase {
    text-transform: lowercase;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.text-italic {
    font-style: italic;
}

.text-normal {
    font-style: normal;
}

.text-underline {
    font-style: underline;
}

/*
* Text Colors
*/
.text-dark {
    color: var(--black) !important;
}

.text-dark-1 {
    color: #333333;
}

.text-dark-2 {
    color: #666666;
}

.text-dark-3 {
    color: #999999;
}

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

.text-light-1 {
    color: #eeeeee;
}

.text-light-2 {
    color: #cccccc;
}

.text-light-3 {
    color: #aaaaaa;
}

.text-base-0 {
    color: var(--base-0);
}

.text-base-1 {
    color: var(--base-1);
}

.text-base-1 {
    color: var(--base-2);
}

.text-danger {
    color: #f56c6c;
}

.text-success {
    color: green;
}

.text-warning {
    color: orange;
}

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.text-gradient {
    background-image: -webkit-gradient(linear, right top, left top, from(var(--primary)), to(var(--secondary)));
    background-image: linear-gradient(to left, var(--primary), var(--secondary));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}

.div-center {
    float: none !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.inline-block {
    float: none;
    display: inline-block;
}

.clearfix::after {
    clear: both;
    content: "";
    display: table;
}

.display-wrap {
    position: relative;
}

.display-block {
    display: block;
}

.display-center {
    top: 50%;
    left: 50%;
    width: 100%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.display-table {
    width: 100%;
    height: 100%;
    display: table;
}

.display-content {
    display: table-cell;
    vertical-align: middle;
}

.display-spacing {
    padding-top: 100px;
    padding-bottom: 100px;
}

.display-spacing-plus {
    padding-top: 130px;
    padding-bottom: 30px;
}

.display-spacing-double {
    padding-top: 150px;
    padding-bottom: 100px;
}

.display-screen, .overlay-gradient .bg-gradient {
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: 100px;
}

.display-fit-screen {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    overflow: hidden;
}

.display-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    position: relative;
}

.max-w-576 {
    max-width: 576px;
}

.max-w-768 {
    max-width: 768px;
}

.max-w-992 {
    max-width: 992px;
}

.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}

.overlay-color {
    position: relative;
}

.overlay-color .bg-color {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay-image {
    position: relative;
    background: no-repeat center center/cover;
}

.overlay-pattern {
    position: relative;
}

.overlay-pattern .bg-pattern {
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay-pattern .bg-pattern-1 {
    position: absolute;
    background: repeat url("/assets/images/common/pattern-1.png") center center/9px;
}

.overlay-pattern .bg-pattern-2 {
    position: absolute;
    background: repeat url("/assets/images/common/pattern-2.png") center center/9px;
}

.overlay-pattern .bg-pattern-3 {
    position: absolute;
    background: repeat url("/assets/images/common/pattern-3.png") center center/5px;
}

.overlay-pattern .bg-patline-1 {
    opacity: 0.6;
    position: absolute;
    background: repeat-x url("/assets/images/common/patline-1.png") top center;
}

.overlay-pattern .bg-pattern-a {
    opacity: 0.6;
    z-index: 1;
    position: absolute;
    -webkit-animation: noise 60ms infinite;
    animation: noise 60ms infinite;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuNCI+PC9yZWN0Pgo8L3N2Zz4=");
}

.overlay-gradient {
    position: relative;
}

.bg-danger {
    background-color: #f56c6c !important;
}

.bg-success {
    background-color: green !important;
}

.bg-warning {
    background-color: bisque !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-gradient-side {
    background-image: -webkit-gradient(linear, right top, left top, from(var(--primary)), color-stop(70%, transparent));
    background-image: linear-gradient(270deg, var(--primary) 0%, transparent 70%);
}

.bg-dark-side {
    background-image: -webkit-gradient(linear, right top, left top, from(transparent), color-stop(81%, rgba(83, 83, 102, 0.6)));
    background-image: linear-gradient(270deg, transparent 0%, rgba(83, 83, 102, 0.6) 81%);
}

.bg-animation-1 {
    background: linear-gradient(-45deg, #000, #151515, var(--secondary), var(--primary), #000);
    background-size: 400% 400%;
    -webkit-animation: Gradient 9s ease infinite;
    animation: Gradient 9s ease infinite;
}

.bg-animation-2, .el-cta:after, .section-testimonial:after {
    background: linear-gradient(-45deg, #fff, var(--primary), var(--secondary), var(--primary), #fff);
    background-size: 400% 400%;
    -webkit-animation: Gradient 9s ease infinite;
    animation: Gradient 9s ease infinite;
}

.bg-dark-10 {
    background-color: rgba(0, 0, 0, 0.1);
}

.bg-dark-20 {
    background-color: rgba(0, 0, 0, 0.2);
}

.bg-dark-30 {
    background-color: rgba(0, 0, 0, 0.3);
}

.bg-dark-40 {
    background-color: rgba(0, 0, 0, 0.4);
}

.bg-dark-50 {
    background-color: rgba(0, 0, 0, 0.5);
}

.bg-dark-60 {
    background-color: rgba(0, 0, 0, 0.6);
}

.bg-dark-70 {
    background-color: rgba(0, 0, 0, 0.7);
}

.bg-dark-80 {
    background-color: rgba(0, 0, 0, 0.8);
}

.bg-dark-90 {
    background-color: rgba(0, 0, 0, 0.9);
}

.bg-dark-1000 {
    background-color: black;
}

.bg-light-10 {
    background-color: rgba(255, 255, 255, 0.1);
}

.bg-light-20 {
    background-color: rgba(255, 255, 255, 0.2);
}

.bg-light-30 {
    background-color: rgba(255, 255, 255, 0.3);
}

.bg-light-40 {
    background-color: rgba(255, 255, 255, 0.4);
}

.bg-light-50 {
    background-color: rgba(255, 255, 255, 0.5);
}

.bg-light-60 {
    background-color: rgba(255, 255, 255, 0.6);
}

.bg-light-70 {
    background-color: rgba(255, 255, 255, 0.7);
}

.bg-light-80 {
    background-color: rgba(255, 255, 255, 0.8);
}

.bg-light-90 {
    background-color: rgba(255, 255, 255, 0.9);
}

.bg-light-1000 {
    background-color: white;
}

.bg-gradient-0 {
    background-image: -webkit-gradient(linear, left bottom, left top, from(var(--primary)), to(var(--secondary)));
    background-image: linear-gradient(0deg, var(--primary) 0%, var(--secondary) 100%);
}

.bg-gradient-45 {
    background-image: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
}

.bg-gradient-90 {
    background-image: -webkit-gradient(linear, left top, right top, from(var(--primary)), to(var(--secondary)));
    background-image: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

.bg-gradient-135 {
    background-image: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.bg-gradient-180 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--primary)), to(var(--secondary)));
    background-image: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
}

.bg-gradient-225 {
    background-image: linear-gradient(225deg, var(--primary) 0%, var(--secondary) 100%);
}

.bg-gradient-270 {
    background-image: -webkit-gradient(linear, right top, left top, from(var(--primary)), to(var(--secondary)));
    background-image: linear-gradient(270deg, var(--primary) 0%, var(--secondary) 100%);
}

.bg-gradient-315 {
    background-image: linear-gradient(315deg, var(--primary) 0%, var(--secondary) 100%);
}

.bg-gradient-360 {
    background-image: -webkit-gradient(linear, left bottom, left top, from(var(--primary)), to(var(--secondary)));
    background-image: linear-gradient(360deg, var(--primary) 0%, var(--secondary) 100%);
}

.react-rotating-text-cursor {
    -webkit-animation: blinking-cursor 0.8s cubic-bezier(0.68, 0.01, 0.01, 0.99) 0s infinite;
    animation: blinking-cursor 0.8s cubic-bezier(0.68, 0.01, 0.01, 0.99) 0s infinite;
}

.row-0 {
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 1200px) {
    .row-xl-5 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .row-lg-5 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.overlay-color .bg-dark {
    z-index: 1;
    opacity: 0.6 !important;
    background-color: var(--primary-3);
}

.app-wrapper {
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(45, 21, 130, 0.06)));
    background-image: linear-gradient(90deg, transparent, rgba(45, 21, 130, 0.06));
}

.app-wrapper:before {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    opacity: 0.1;
    position: fixed;
    background-repeat: repeat-x;
}

.select2-container--default .select2-search--inline .select2-search__field::-webkit-input-placeholder {
    color: var(--text-color);
    font-weight: bold;
}

.select2-container--default .select2-search--inline .select2-search__field:-moz-placeholder {
    color: var(--text-color);
    font-weight: bold;
}

.select2-container--default .select2-search--inline .select2-search__field::-moz-placeholder {
    color: var(--text-color);
    font-weight: bold;
}

.select2-container--default .select2-search--inline .select2-search__field:-ms-input-placeholder {
    color: var(--text-color);
    font-weight: bold;
}

@media (max-width: 768px) {
    .display-spacing-plus {
        padding-top: 90px;
    }
}

.container {
    direction: ltr;
}

/*------------------------------------
    Structure Styles
------------------------------------*/
/*------------------------------------
    Header
------------------------------------*/
.app-header {
    top: 0;
    right: 0;
    width: 100%;
    z-index: 99;
    font-size: 15px;
    font-weight: 700;
    position: fixed;
    -webkit-transition: 450ms all;
    transition: 450ms all;
}

.app-header .header-wrap {
    height: 80px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.app-header .header-wrap .header-logo .secondary-logo {
    top: 72px;
    right: 0;
    left: 0;
    width: 99px;
    position: absolute;
    margin: 0 auto;
    -webkit-transition: all 600ms;
    transition: all 600ms;
}

.app-header .header-wrap .header-menu {
    width: 100%;
}

.app-header .header-wrap .header-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-header .header-wrap .header-menu ul li {
    display: inline-block;
    margin-right: 20px;
    margin-top: 10px;
}

.app-header .header-wrap .header-menu ul li > div {
    height: 80px;
    padding-top: 20px;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10+ and Edge */
    -moz-user-select: none;
    user-select: none;
    /* Standard syntax */
}

.app-header .header-wrap .header-menu ul li > div .icon {
    display: none !important;
}

.app-header .header-wrap .header-menu ul li > a {
    display: block;
}


.app-header .header-wrap .header-menu ul li > a .icon {
    display: none !important;
}

.app-header .header-wrap .header-menu ul li.active a {
    color: var(--primary);
}

.app-header .header-wrap .header-links {
    width: 39%;
    text-align: right;
    position: relative;
}

.app-header .header-wrap .header-links .button {
    min-width: 90px;
}

.app-header .mega-menu {
    top: 60px;
    left: 0;
    width: 100%;
    height: 150px;
    opacity: 0;
    z-index: 12;
    visibility: hidden;
    position: absolute;
    -webkit-transition: all 450ms;
    transition: all 450ms;
}

.app-header .mega-menu .megamenu-info {
    position: relative;
}

.app-header .mega-menu .megamenu-info .button {
    top: -9px;
    right: -6px;
    position: absolute;
}

.app-header .mega-menu .mega-menu-inner {
    top: 0;
    left: 0;
    width: auto;
    min-width: 240px;
    opacity: 0;
    padding: 30px;
    position: absolute;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 10px 10px 0, inset 0 127px 12px -127px rgba(0, 0, 0, 0.15);
    box-shadow: rgba(0, 0, 0, 0.1) 0 10px 10px 0, inset 0 127px 12px -127px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 5px 5px;
    border-top: 6px solid var(--primary);
    background-color: var(--base-0);
    -webkit-transition: all 450ms;
    transition: all 450ms;
}

.app-header .mega-menu .mega-menu-inner div {
    z-index: 9;
    position: relative;
}

.app-header .mega-menu .mega-menu-inner div .espard-menu p {
    color: var(--base-1);
}

.app-header .mega-menu .mega-menu-inner div .espard-menu ul {
    list-style: none;
    padding: 0;
}

.app-header .mega-menu .mega-menu-inner div .espard-menu ul li {
    color: var(--text-color);
    display: block;
    font-size: 0.9em;
    position: relative;
    padding-left: 9px;
    margin-bottom: 6px;
}

.app-header .mega-menu .mega-menu-inner div .espard-menu ul li a {
    display: block;
}

.app-header .mega-menu .mega-menu-inner div .espard-menu ul li a:hover {
    color: var(--primary);
}

.app-header .mega-menu .mega-menu-inner div .espard-menu ul li:before {
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    color: #ccc;
    content: ".";
    position: absolute;
}

.app-header .mega-menu .mega-menu-inner div .espard-menu ul:not(:last-child) {
    margin: 0 0 20px;
}

.app-header .mega-menu .mega-menu-inner:after {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    content: "";
    position: absolute;
    background-color: var(--base-0);
}

.app-header .mega-menu .mega-menu-inner:before {
    top: -7px;
    left: 33px;
    width: 30px;
    height: 30px;
    z-index: 3;
    content: "";
    position: absolute;
    background-color: var(--primary);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.app-header .mega-menu.active {
    opacity: 1;
    display: block;
    visibility: visible;
}

.app-header .mega-menu.active .mega-menu-inner {
    top: 30px;
    opacity: 1;
}

.app-header .mega-menu.mega-menu-2 .mega-menu-inner:before {
    left: 10px;
}

.app-header .button-menu {
    top: 9px;
    right: 0;
    width: 33px;
    height: 50px;
    z-index: 99;
    display: none;
    padding: 0;
    position: absolute;
    padding-top: 12px;
}

.app-header .button-menu span, .app-header .button-menu span:before, .app-header .button-menu span:after {
    width: 33px;
    height: 3px;
    float: left;
    display: block;
    position: relative;
    background-color: var(--base-1);
}

.app-header .button-menu span:before {
    top: -10px;
    content: "";
}

.app-header .button-menu span:after {
    bottom: -8px;
    content: "";
}


.mega-menu-overlay {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 93;
    visibility: hidden;
    display: block;
    position: fixed;
    background-color: var(--base-1);
    -webkit-transition: all 450ms;
    transition: all 450ms;
}

.mega-menu-overlay.active {
    opacity: 0.3;
    visibility: visible;
}

@media (max-width: 992px) {
    .app-header.sticky .header-wrap .header-logo .main-logo {
        top: 12px !important;
        right: inherit !important;
        left: 0 !important;
        width: 45px !important;
        display: block !important;
    }

    .app-header.sticky .header-wrap .header-logo .secondary-logo {
        left: 54px !important;
        display: block !important;
    }
}

@media (max-width: 1200px) {
    .app-header .mega-menu .mega-menu-inner {
        width: 930px !important;
    }
}

@media (max-width: 992px) {
    .app-header .container {
        max-width: 100% !important;
    }

    .app-header .header-wrap {
        height: 60px !important;
    }

    .app-header .header-wrap .mega-menu,
    .app-header .header-wrap .header-menu ul,
    .app-header .header-wrap .header-links {
        display: none;
    }

    .app-header .header-wrap .header-logo .primary-logo {
        text-align: left;
    }

    .app-header .header-wrap .header-logo .primary-logo .text-2 {
        right: inherit;
        left: 0;
    }

    .app-header .header-wrap .header-logo img.main-logo {
        display: none;
    }

    .app-header .header-wrap .header-logo img.secondary-logo {
        top: 15px !important;
    }

    .app-header .header-wrap .button-menu {
        top: 0;
        right: 0;
        display: block !important;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .app-header .custom-hide {
        display: none !important;
    }
}

.menu-logo {
    width: 250px;
}

.header-logo a {
    display: block;
}

/*------------------------------------
    Header-Search
------------------------------------*/
.app-header-search {
    top: 80px;
    right: 0;
    width: 100%;
    height: 80px;
    color: var(--base-0);
    z-index: 96;
    position: absolute;
    background-color: var(--primary);
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}

.app-header-search .header-wrap {
    position: relative;
}

.app-header-search .header-wrap .header-form {
    width: calc(100% - 75px);
    height: 80px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

.app-header-search .header-wrap .header-form .header-option {
    width: 33%;
    height: 42px;
    position: relative;
}

.app-header-search .header-wrap .header-form .header-option.option-select {
    margin-right: 25px;
}

.app-header-search .header-wrap .header-form .header-option.option-switch {
    border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
}

.app-header-search .header-wrap .header-form .header-option.option-switch .label {
    top: 10px;
    left: 1px;
    color: var(--base-0);
    position: absolute;
}

.app-header-search .header-wrap .header-form .header-option.option-switch .form-switch {
    top: 7px;
    right: 1px;
    position: absolute;
}

.app-header-search .header-wrap .header-button {
    top: 17px;
    right: 1px;
    position: absolute;
}

.app-header-search .header-wrap .header-button .button:hover {
    background-color: var(--secondary);
}

.app-header.light .header-menu li a {
    color: var(--base-0);
}

.app-header-default {
    height: 90px;
    padding-top: 15px;
}

@media (max-width: 992px) {
    .app-header-default {
        height: 60px;
        padding-top: 3px !important;
        padding-left: 0 !important;
    }
}

/*------------------------------------
    Dashboard Header
------------------------------------*/
.app-header-2 .header-wrap {
    height: 80px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.app-header-2 .header-wrap .header-logo {
    right: inherit;
    left: 0;
    width: 100px;
    height: 80px;
    text-align: inherit !important;
    margin: 0 !important;
}

.app-header-2 .header-wrap .header-logo .main-logo {
    top: -9px;
    right: 0;
    left: 0;
    width: 84px;
    position: absolute;
    margin: 0 auto;
    -webkit-transition: all 900ms;
    transition: all 900ms;
}

.app-header-2 .header-wrap .header-logo .secondary-logo {
    top: 72px;
    right: 0;
    left: 0;
    width: 99px;
    position: absolute;
    margin: 0 auto;
    -webkit-transition: all 600ms;
    transition: all 600ms;
}

.app-header-2 .header-wrap .header-menu {
    padding-left: 150px;
}

.app-header.glass {
    background-color: rgba(255, 255, 255, 0.75);
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}

.app-header.glass a {
    -webkit-transition: none !important;
    transition: none !important;
}

.app-header.empty {
    color: var(--base-0);
}

.app-header.empty a {
    -webkit-transition: none !important;
    transition: none !important;
}

.app-header.empty .button-menu span, .app-header.empty .button-menu span:before, .app-header.empty .button-menu span:after {
    background-color: var(--base-0);
}

.app-header.sticky {
    color: var(--base-1);
    background-color: var(--base-0);
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}

.app-header.sticky .main-logo {
    top: -150px !important;
}

.app-header.sticky .secondary-logo {
    top: 9px !important;
}

.app-header.sticky .button-menu span, .app-header.sticky .button-menu span:before, .app-header.sticky .button-menu span:after {
    background-color: var(--base-1);
}

.app-header.boxed {
    background: var(--base-0);
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}

.app-header.boxed .button-menu span, .app-header.boxed .button-menu span:before, .app-header.boxed .button-menu span:after {
    background-color: var(--base-1);
}

.app-header.boxed .header-wrap .header-logo .main-logo {
    top: -150px !important;
}

.app-header.boxed .header-wrap .header-logo .secondary-logo {
    top: 9px !important;
}

.app-header.header-shadow {
    color: var(--base-1);
    background-color: var(--base-0);
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}

/*------------------------------------
    Footer
------------------------------------*/
.app-footer {
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app-footer p {
    font-family: "Poppins", sans-serif;
}

.app-footer a {
    color: var(--text-color);
    display: block;
}

.app-footer a:hover {
    color: var(--primary);
}

.app-footer.app-footer-1 {
    padding: 45px 0;
}

.app-footer.app-footer-1 .footer-content {
    z-index: 3;
    position: relative;
    margin-bottom: 45px;
}

.app-footer.app-footer-1 .footer-widgets {
    z-index: 3;
    position: relative;
    padding: 30px 0;
}

.app-footer.app-footer-1 .footer-widgets .widget {
    padding-left: 36px;
}

.app-footer.app-footer-1 .footer-widgets .widget .widget-title {
    height: 80px;
    overflow: hidden;
    position: relative;
}

.app-footer.app-footer-1 .footer-widgets .widget .widget-title h4 {
    top: 15px;
    color: var(--primary);
    color: #32335a;
    font-size: 16px;
    position: relative;
    padding-top: 15px;
}

.app-footer.app-footer-1 .footer-widgets .widget.widget-logo {
    padding: 0;
}

.app-footer.app-footer-1 .footer-widgets .widget.widget-logo .footer-logo {
    display: block;
    margin-bottom: 30px;
}

.app-footer.app-footer-1 .footer-widgets .widget.widget-links {
    font-size: 12px;
}

.app-footer.app-footer-1 .footer-widgets .widget.widget-links ul {
    padding: 0;
    list-style: none;
}

.app-footer.app-footer-1 .footer-widgets .widget.widget-links ul li {
    color: var(--text-color);
    display: block;
    font-size: 12px;
    white-space: nowrap;
    margin-bottom: 8px;
}

.app-footer.app-footer-1 .footer-widgets .widget.widget-links ul li .icon {
    color: var(--primary);
    font-size: 9px;
    display: inline-block;
    margin-right: 3px;
}

.app-footer.app-footer-1 .footer-copyright {
    top: 30px;
    z-index: 3;
    position: relative;
    padding: 10px 0;
}

.app-footer.app-footer-1 .footer-copyright p {
    margin: 0;
}

.app-footer.app-footer-1 .footer-copyright .footer-icon {
    top: -66px;
}

.app-footer.app-footer-1 .footer-copyright .footer-icon img {
    width: 80px;
}

.app-footer.app-footer-1 .footer-copyright .footer-icon.footer-icon-1 {
    right: 0;
    position: absolute;
}

.app-footer.app-footer-1 .footer-copyright .footer-icon.footer-icon-2 {
    right: 96px;
    position: absolute;
}

.app-footer.app-footer-1 .footer-copyright .footer-icon.footer-icon-3 {
    right: 195px;
    position: absolute;
}

.app-footer.app-footer-1 .section-shape.shape-1 {
    top: -27%;
    right: -0.75%;
    width: 400px;
    opacity: 0.75;
    position: absolute;
}

.app-footer.app-footer-1 .section-shape.shape-2 {
    top: -30%;
    left: 0;
    width: 400px;
    position: absolute;
    opacity: 0.3;
}

.app-footer.app-footer-1:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    position: absolute;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(45, 21, 130, 0.075)));
    background-image: linear-gradient(90deg, transparent, rgba(45, 21, 130, 0.075));
    background-repeat: repeat-x;
}

.app-footer.app-footer-2 {
    padding: 45px 0;
    background-color: var(--base-0) !important;
}

.app-footer.app-footer-2 .footer-widgets {
    z-index: 3;
    position: relative;
    padding: 30px 0;
}

.app-footer.app-footer-2 .footer-widgets .widget {
    position: relative;
}

.app-footer.app-footer-2 .footer-widgets .widget .widget-title {
    overflow: hidden;
    position: relative;
}

.app-footer.app-footer-2 .footer-widgets .widget .widget-title h4 {
    color: var(--primary);
    font-size: 16px;
    position: relative;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-info p {
    text-align: justify;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-info .footer-logo {
    color: var(--base-1);
    margin-bottom: 15px;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-info .footer-logo span {
    font-size: 24px;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-info .footer-logo .primary-logo {
    top: 7px;
    width: 60px;
    position: relative;
    margin-bottom: 30px;
    margin-right: 12px;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-info .footer-logo .secondary-logo {
    width: 99px;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-links {
    margin-bottom: 30px;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-links ul {
    padding: 0;
    list-style: none;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-links ul li {
    color: var(--text-color);
    display: block;
    font-size: 12px;
    white-space: nowrap;
    margin-bottom: 9px;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-links ul li .icon {
    color: var(--primary);
    font-size: 9px;
    display: inline-block;
    margin-right: 3px;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-symbols {
    height: 100%;
    text-align: center;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-symbols .footer-symbol {
    text-align: center;
    display: inline-block;
    margin-left: 20px;
}

.app-footer.app-footer-2 .footer-widgets .widget.widget-symbols .footer-symbol img {
    width: 75px;
}

.app-footer.app-footer-2 .footer-widgets .footer-widgets-links {
    padding-top: 60px;
    padding-bottom: 30px;
}

.app-footer.app-footer-2 .footer-copyright p {
    padding-top: 15px;
    margin-bottom: 6px;
}

.app-footer.app-footer-2 .footer-copyright p.address {
    color: #999;
    font-size: 11px;
}

.app-footer.app-footer-2 .footer-copyright .footer-line {
    width: 100%;
    height: 2px;
    display: block;
    margin-bottom: 15px;
    background-color: #e6e6e6;
}

.app-footer.app-footer-2 .footer-copyright .el-social-links {
    text-align: right;
    padding-top: 9px;
}

.app-footer.app-footer-2:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    position: absolute;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(45, 21, 130, 0.075)));
    background-image: linear-gradient(90deg, transparent, rgba(45, 21, 130, 0.075));
    background-repeat: repeat-x;
}

.app-footer .el-social-links {
    text-align: right;
}

@media (max-width: 992px) {
    .app-footer {
        border-top: 1px solid var(--gray);
    }

    .app-footer p {
        font-size: 12px;
    }

    .app-footer .widget .widget-title h4 {
        text-align: center;
    }

    .app-footer .widget.widget-links {
        text-align: center;
    }

    .app-footer.app-footer-1 .footer-widgets .widget.widget.widget-logo p {
        margin-bottom: 20px;
    }

    .app-footer.app-footer-1 .footer-widgets .widget.widget.widget-logo .footer-logo {
        text-align: center;
        margin-bottom: 45px;
    }

    .app-footer.app-footer-1 .footer-widgets .el-social-links {
        text-align: center;
        padding-bottom: 45px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--gray);
    }

    .app-footer.app-footer-1 .footer-copyright {
        top: 30px;
        height: 75px;
        padding: 10px 0;
        background: red;
    }

    .app-footer.app-footer-1 .footer-copyright .footer-icon {
        top: -24px;
    }

    .app-footer.app-footer-1 .footer-copyright .footer-icon img {
        width: 60px;
    }

    .app-footer.app-footer-2 .footer-widgets .widget-symbols .footer-symbol img {
        width: 60px !important;
    }

    .app-footer.app-footer-2 .footer-widgets .widget-symbols .display-center {
        top: 0;
        right: 0;
        width: 100%;
        padding-top: 20px;
        position: relative;
        -webkit-transform: inherit !important;
        transform: inherit !important;
    }
}

@media (max-width: 768px) {
    .app-footer .footer-widgets .widget .widget-title h4 {
        font-size: 14px !important;
    }

    .app-footer .footer-widgets .widget.widget-links li .text {
        font-size: 12px;
    }

    .app-footer.app-footer-1 .footer-content .footer-cta p {
        margin-bottom: 20px;
    }

    .app-footer.app-footer-1 .footer-content .footer-cta .button {
        bottom: 0;
        position: relative;
    }

    .app-footer.app-footer-1 .footer-copyright {
        top: 30px;
        height: 120px;
        padding: 10px 0;
        text-align: center;
    }

    .app-footer.app-footer-1 .footer-copyright p {
        margin-bottom: 20px;
    }

    .app-footer.app-footer-1 .footer-copyright ul {
        text-align: center;
    }

    .app-footer.app-footer-1 .footer-copyright .footer-icon {
        top: 0;
    }

    .app-footer.app-footer-1 .footer-copyright .footer-icon img {
        width: 45px;
    }

    .app-footer.app-footer-1 .footer-copyright .footer-icon.footer-icon-1 {
        right: 15%;
    }

    .app-footer.app-footer-1 .footer-copyright .footer-icon.footer-icon-2 {
        right: 0;
        left: 0;
        margin: auto;
    }

    .app-footer.app-footer-1 .footer-copyright .footer-icon.footer-icon-3 {
        right: inherit;
        left: 15%;
    }

    .app-footer.app-footer-2 .footer-widgets .row {
        margin: 0 -6px !important;
    }

    .app-footer.app-footer-2 .footer-widgets .row > * {
        padding: 0 6px !important;
    }

    .app-footer.app-footer-2 .footer-widgets .widget-symbols .footer-symbol {
        margin-bottom: 15px;
    }

    .app-footer.app-footer-2 .footer-widgets .widget-symbols .footer-symbol img {
        width: 51px !important;
    }

    .app-footer.app-footer-2 .footer-widgets .widget-symbols .display-center {
        padding-top: 60px;
    }

    .app-footer.app-footer-2 .footer-copyright p {
        text-align: center;
    }

    .app-footer.app-footer-2 .footer-copyright .footer-line {
        margin-bottom: 30px;
    }

    .app-footer.app-footer-2 .footer-copyright .el-social-links {
        text-align: center;
        padding-top: 9px;
    }
}

/*------------------------------------
    Wrapper
------------------------------------*/
.route-wrapper {
    position: relative;
}

.route-wrapper > div {
    position: absolute;
}

.switch-wrapper {
    height: 100%;
    position: relative;
}

.switch-wrapper > div {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

/*------------------------------------
    Sidenav
------------------------------------*/
.app-sidenav {
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10000;
    position: fixed;
    visibility: hidden;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
}

.app-sidenav .sidenav-menu {
    left: -100%;
    width: 300px;
    height: 100%;
    min-height: 100%;
    z-index: 10001;
    max-width: 90%;
    position: fixed;
    overflow: hidden;
    overflow-y: scroll;
    background-color: var(--base-0);
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
}

.app-sidenav .sidenav-menu .sidenav-head {
    height: 150px;
    position: relative;
    overflow: hidden;
    background-color: #ffd3a7;
}

.app-sidenav .sidenav-menu .sidenav-head .button-close-sidenav {
    top: 20px;
    right: 15px;
    width: 30px;
    height: 30px;
    z-index: 999;
    display: block;
    cursor: pointer;
    position: absolute;
    border-radius: 50%;
    border: 0 !important;
}

.app-sidenav .sidenav-menu .sidenav-head .button-close-sidenav:before, .app-sidenav .sidenav-menu .sidenav-head .button-close-sidenav:after {
    top: 50%;
    left: 50%;
    width: 100%;
    height: 3px;
    content: "";
    position: absolute;
    background-color: var(--primary);
}

.app-sidenav .sidenav-menu .sidenav-head .button-close-sidenav:before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.app-sidenav .sidenav-menu .sidenav-head .button-close-sidenav:after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.app-sidenav .sidenav-menu .sidenav-body {
    position: relative;
    padding: 20px;
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner .sidenav-links {
    margin-bottom: 30px;
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner .sidenav-links .button {
    text-align: center !important;
    margin-bottom: 9px !important;
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner > ul li {
    position: relative;
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner > ul li > a {
    height: 45px;
    color: #6a6b6c;
    cursor: pointer;
    z-index: 12;
    display: block;
    font-size: 12px;
    font-weight: bold;
    padding: 0 15px;
    position: relative;
    line-height: 45px;
    border-radius: 6px;
    margin-bottom: 9px;
    background-color: #e6e6e6;
    -webkit-transition: all 0s;
    transition: all 0s;
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner > ul li > a .icon {
    top: 15px;
    right: 15px;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner > ul li.show > a {
    color: var(--base-0);
    background-color: var(--primary);
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner > ul li.show > a .icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner > ul li.show .mega-menu {
    display: block !important;
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner > ul li.active > a {
    color: var(--base-0);
    background-color: var(--primary);
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner .sidenav-menu-ul li {
    color: var(--text-color) !important;
    display: block;
    height: 36px;
    font-size: 12px;
    line-height: 39px;
    border-bottom: 1px solid var(--gray);
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner .sidenav-menu-ul li a {
    font-size: 12px !important;
}

.app-sidenav .sidenav-menu .sidenav-body .sidenav-body-inner .sidenav-menu-ul li a b {
    color: var(--base-1);
    font-weight: bolder;
}

.app-sidenav .sidenav-menu .sidenav-body .mega-menu {
    top: -12px;
    min-height: 130px;
    display: none;
    overflow: hidden;
    overflow-y: scroll;
    position: relative;
    border: 2px solid var(--primary);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: #e6e6e6;
}

.app-sidenav .sidenav-menu .sidenav-body .mega-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-sidenav .sidenav-menu .sidenav-body .mega-menu ul li.el-flag {
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--gray);
}

.app-sidenav .sidenav-menu .sidenav-body .mega-menu ul li.el-flag .inner {
    height: 45px;
    position: relative;
}

.app-sidenav .sidenav-menu .sidenav-body .mega-menu ul li.el-flag .inner img {
    top: 9px;
    right: 15px;
    width: 27px;
    height: 27px;
    float: right;
    display: block;
    position: absolute;
    border-radius: 50%;
}

.app-sidenav .sidenav-menu .sidenav-body .mega-menu ul li.el-flag .inner h3 {
    top: 0;
    right: 0;
    width: 100%;
    font-size: 11px;
    padding-top: 15px;
    padding-left: 51px;
    position: absolute;
    white-space: nowrap;
}

.app-sidenav .sidenav-menu .sidenav-body .mega-menu .title {
    height: 36px;
    color: var(--primary);
    font-weight: 700;
    padding-top: 12px;
    padding-left: 15px;
    margin-bottom: 0;
}

.app-sidenav .sidenav-nav {
    top: 50%;
    left: 30px;
    padding: 0;
    z-index: 99;
    position: absolute;
    list-style: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.app-sidenav .sidenav-nav li {
    height: 40px;
    color: var(--base-1);
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 15px;
}

.app-sidenav .sidenav-nav li a {
    color: #fff;
    display: block;
}

.app-sidenav .sidenav-nav li span {
    top: 10px;
    left: 18px;
    opacity: 0.75;
    font-size: 36px;
    position: absolute;
    white-space: nowrap;
}

.app-sidenav .sidenav-nav li:before {
    top: 32px;
    left: -4px;
    width: 10px;
    height: 10px;
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--base-1);
}

.app-sidenav .sidenav-nav li:hover a:not(.active) span {
    opacity: 1;
}

.app-sidenav .sidenav-nav li:hover .count {
    display: none;
}

.app-sidenav .sidenav-nav li:hover .anchor {
    display: block;
}

.app-sidenav .sidenav-nav li .active {
    color: var(--base-1);
    opacity: 1;
}

.app-sidenav .sidenav-nav li .active span {
    text-decoration: none;
}

.app-sidenav .sidenav-close {
    top: 0;
    left: 0;
    width: 100%;
    height: 300%;
    opacity: 0.81;
    position: fixed;
    background: var(--base-1);
}

.app-sidenav.active {
    left: 0;
    opacity: 1;
    visibility: visible;
}

.app-sidenav.active .sidenav-menu {
    left: 0;
}

@media (max-width: 768px) {
    .app-sidenav .sidenav-nav li {
        margin-bottom: 5px;
    }

    .app-sidenav .sidenav-nav li span {
        font-size: 24px;
    }

    .app-sidenav .sidenav-nav li:before {
        top: 23px;
    }
}

@media (max-width: 575px) {
    .app-sidenav .sidenav-menu .mega-menu a {
        font-size: 14px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (min-width: 992px) {
    .app-sidenav {
        opacity: 0;
        visibility: hidden;
    }
}

/*------------------------------------
    Container
------------------------------------*/
.row-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.row-0 > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.row-xs {
    margin-left: -6px !important;
    margin-right: -6px !important;
}

.row-xs > * {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.row-sm {
    margin-left: -9px !important;
    margin-right: -9px !important;
}

.row-sm > * {
    padding-left: 9px !important;
    padding-right: 9px !important;
}

.row-md {
    margin-left: -15px;
    margin-right: -15px;
}

.row-md > * {
    padding-left: 15px;
    padding-right: 15px;
}

.row-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

/*------------------------------------
    Elements Styles
------------------------------------*/
/*------------------------------------
    Element: Forms
------------------------------------*/
/*------------------------------------
Reset
------------------------------------*/
input[type=number] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*------------------------------------
Forms
------------------------------------*/
.form select,
.form textarea,
.form input[type=tel],
.form input[type=text],
.form input[type=date],
.form input[type=email],
.form input[type=number],
.form input[type=search],
.form input[type=password] {
    width: 100%;
    display: block;
    font-size: 14px;
    line-height: 1.5;
}

.form textarea,
.form select[multiple] {
    min-height: 180px;
}

/*
* Form - Style 1
*/
/*
* Form - Style 2
*/
.form-2 {
    overflow: hidden;
    position: relative;
}

.form-2 .form-item {
    min-height: 45px;
    position: relative;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.form-2 .form-item .input-label {
    top: 12px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: bold;
    position: relative;
}

.form-2 .form-item .input-switch {
    top: 8px;
    right: 0;
    position: absolute;
}

.form-2 .input-switch {
    width: 50px;
    height: 27px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    border-radius: 27px;
    border: 1px solid #ccc;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.form-2 .input-switch div {
    top: 0;
    left: 0px;
    width: 25px;
    height: 25px;
    position: absolute;
    border-radius: 25px;
    background-color: #ccc;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.form-2 .input-switch input {
    display: none;
}

.form-2 .input-switch input:checked + div {
    background-color: var(--primary);
    left: calc(100% - 25px);
}

.form-2 .input-switch.checked {
    background-color: #edf8ff;
    -webkit-box-shadow: inset 0px 0px 0px 1px var(--primary);
    box-shadow: inset 0px 0px 0px 1px var(--primary);
}

/*
* Form - Style 3
*/
.form-3 {
    font-size: 12px;
    font-weight: bold;
}

.form-3 .form-item {
    position: relative;
    padding-top: 10px;
    margin-bottom: 15px;
}

.form-3 .form-item select,
.form-3 .form-item textarea,
.form-3 .form-item .input-select,
.form-3 .form-item input[type=tel],
.form-3 .form-item input[type=text],
.form-3 .form-item input[type=date],
.form-3 .form-item input[type=email],
.form-3 .form-item input[type=number],
.form-3 .form-item input[type=search],
.form-3 .form-item input[type=password] {
    width: 100%;
    display: block;
    min-height: 45px;
    padding: 9px 25px;
    border-radius: 6px;
    border: 1px solid #e3e3e3;
    border-bottom: 3px solid #e3e3e3;
}

.form-3 .form-item select:focus,
.form-3 .form-item textarea:focus,
.form-3 .form-item .input-select:focus,
.form-3 .form-item input[type=tel]:focus,
.form-3 .form-item input[type=text]:focus,
.form-3 .form-item input[type=date]:focus,
.form-3 .form-item input[type=email]:focus,
.form-3 .form-item input[type=number]:focus,
.form-3 .form-item input[type=search]:focus,
.form-3 .form-item input[type=password]:focus {
    border-color: var(--primary);
}

.form-3 .form-item .input-select {
    padding: 0 !important;
}

.form-3 .form-item .input-select .select2-container .select2-selection--single {
    height: 45px;
}

.form-3 .form-item .input-select .select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 21px;
    right: 20px !important;
    left: inherit !important;
}

.form-3 .form-item .input-select .select2-container--default .select2-selection--single .select2-selection__rendered,
.form-3 .form-item .input-select .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--black);
    font-size: 12px !important;
    padding-left: 20px !important;
}

.form-3 .form-item .input-select-multiple {
    overflow: hidden;
    height: 45px !important;
}

.form-3 .form-item .input-select-multiple input {
    height: 0 !important;
    opacity: 0 !important;
    min-height: inherit !important;
}

.form-3 .form-item .input-select-multiple .select2-selection__rendered {
    top: 15px !important;
    position: relative !important;
    margin: 0 !important;
}

.form-3 .form-item .input-checkbox .checkbox-wrap {
    height: 21px;
    cursor: pointer;
    display: block;
    position: relative;
    padding-top: 2px;
    padding-left: 33px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form-3 .form-item .input-checkbox .checkbox-wrap:hover input ~ .checkbox-mark {
    background-color: #ccc;
}

.form-3 .form-item .input-checkbox .checkbox-wrap input {
    opacity: 0;
    cursor: pointer;
    position: absolute;
}

.form-3 .form-item .input-checkbox .checkbox-wrap input:checked ~ .checkbox-mark {
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
}

.form-3 .form-item .input-checkbox .checkbox-wrap input:checked ~ .checkbox-mark:after {
    display: block;
}

.form-3 .form-item .input-checkbox .checkbox-wrap .checkbox-mark {
    top: 0;
    left: 4px;
    width: 21px;
    height: 21px;
    border-radius: 2px;
    position: absolute;
    border: 1px solid #e1e1e1;
    border-bottom: 3px solid #e1e1e1;
    background-color: #fff;
}

.form-3 .form-item .input-checkbox .checkbox-wrap .checkbox-mark:after {
    top: 2px;
    right: 7px;
    width: 7px;
    height: 12px;
    content: "";
    display: none;
    position: absolute;
    border: solid var(--white);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.form-3 .form-item .input-checkbox .checkbox-wrap .checkbox-label {
    color: #333;
}

.form-3 .form-item .form-label {
    top: 0;
    left: 15px;
    z-index: 9;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    padding: 0 9px;
    background-color: var(--base-0);
}

.form-3 .form-item .form-input-q {
    margin-bottom: 9px;
}

.form-3 .form-item .form-error {
    left: 20px;
    bottom: -4px;
    color: #f56c6c;
    display: inline-block;
    position: absolute;
    background-color: var(--base-0);
}

.form-3 .form-input-divider {
    width: 100%;
    height: 30px;
    display: block;
    overflow: hidden;
    position: relative;
    margin: 6px 0;
}

.form-3 .form-input-divider .or {
    top: 6px;
    right: 6px;
    left: 6px;
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    text-align: center;
    margin: auto;
    z-index: 3;
}

.form-3 .form-input-divider:before, .form-3 .form-input-divider:after {
    top: 14px;
    width: 50%;
    height: 1px;
    content: "";
    position: absolute;
    background-color: var(--gray);
}

.form-3 .form-input-divider:before {
    left: -15px;
}

.form-3 .form-input-divider:after {
    right: -15px;
}

.form-3 .input-fp {
    top: 2px;
    color: var(--primary);
    font-size: 12px;
    position: relative;
}

.quantity {
    position: relative;
}

.quantity input {
    text-align: left;
    padding: 0;
    margin: 0;
}

.quantity .quantity-button {
    width: 30px;
    height: 30px;
    color: var(--base-0);
    cursor: pointer;
    font-size: 18px;
    line-height: 31px;
    overflow: hidden;
    text-align: center;
    position: relative;
    border-radius: 50%;
    background-color: var(--primary);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.quantity .quantity-button.quantity-up {
    top: 7px;
    right: 39px;
    position: absolute;
}

.quantity .quantity-button.quantity-down {
    top: 7px;
    right: 7px;
    position: absolute;
}

#form-details-of-classrooms {
    position: relative;
    padding-top: 30px;
    padding-left: 30px;
    border-left: 1px solid var(--gray);
}

#form-details-of-classrooms h4 {
    color: var(--primary);
    font-size: 16px;
    position: relative;
    padding-left: 15px;
}

#form-details-of-classrooms h4:before {
    top: 11px;
    left: -30px;
    width: 30px;
    height: 1px;
    content: "";
    position: absolute;
    background-color: var(--gray);
}

#form-details-of-classrooms h4:after {
    top: 6px;
    left: -6px;
    width: 12px;
    height: 12px;
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: var(--primary);
}

#form-details-of-classrooms ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#form-details-of-classrooms ul li {
    display: block;
}

#form-details-of-classrooms ul li:not(:last-child) {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--gray);
}

/*------------------------------------
    Element: Button
------------------------------------*/
.button {
    font-weight: bold;
    font-family: "Poppins", sans-serif;
    position: relative;
    white-space: nowrap;
    display: inline-block;
    margin-right: 2px;
    border-radius: 6px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.button.button-block {
    width: 100%;
    float: inherit;
    display: block;
}

.button-xs {
    height: 24px;
    font-size: 11px;
    padding: 0 12px;
    margin-bottom: 0;
}

.button-sm {
    height: 36px;
    font-size: 12px;
    padding: 9px 18px;
}

.button-circle-sm {
    width: 36px;
    height: 36px;
    font-size: 12px;
    line-height: 36px;
}

.button-md {
    height: 45px;
    font-size: 14px;
    padding: 12px 30px;
}

.button-circle-md {
    width: 45px;
    height: 45px;
    font-size: 14px;
    line-height: 45px;
}

.button-lg {
    height: 45px;
    font-size: 14px;
    padding: 12px 27px;
}

.button-circle-lg {
    width: 55px;
    height: 55px;
    font-size: 18px;
    line-height: 55px;
}

.button-xl {
    height: 62px;
    font-size: 16px;
    padding: 16px 42px;
}

.button-circle-xl {
    width: 62px;
    height: 62px;
    font-size: 20px;
    line-height: 62px;
}

.button-dark {
    color: #fff;
    background-color: #242424;
}

.button-dark:hover {
    color: #fff;
    background-color: #111;
}

.button-light {
    color: #333;
    background-color: #fff;
}

.button-light:hover {
    color: #000;
    background-color: #eee;
}

.button-default {
    color: var(--base-1);
    background-color: var(--default);
}

.button-default:hover {
    color: var(--base-1);
    -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.button-primary {
    color: var(--base-0);
    -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    background-color: var(--primary);
}

.button-primary:hover {
    color: var(--base-0);
    background-color: var(--primary-1);
}

.button-success {
    color: var(--base-0);
    -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    background-color: var(--color-5);
}

.button-success:hover {
    color: var(--base-0);
    background-color: var(--color-5-2);
}

.button-secondary {
    color: var(--base-0);
    -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    background-color: var(--secondary);
}

.button-secondary:hover {
    color: var(--base-0);
    background-color: var(--secondary-1);
}

.button-gradient {
    color: #fff;
    -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.button-gradient:hover {
    color: #fff;
    -webkit-box-shadow: 0 3px 12px var(--primary);
    box-shadow: 0 3px 12px var(--primary);
}

.button-line-light {
    color: var(--base-0);
    border: 1px solid var(--base-0);
}

.button-line-dark {
    color: var(--base-1);
    border: 1px solid var(--base-1);
}

.button-line-primary {
    color: var(--primary);
    border: 1px solid var(--primary);
}

.button-line-secondary {
    color: var(--secondary);
    border: 1px solid var(--secondary);
}

.button-flat {
    border-radius: 0;
}

.button-circle {
    border-radius: 50%;
    border-radius: 50%;
}

.button-circle i {
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.button-radius {
    border-radius: 24px;
}

.button-icon-md {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
}

.button-icon-lg {
    width: 60px;
    height: 60px;
    font-size: 18px;
    line-height: 60px;
    text-align: center;
}

.button-icon-xl {
    width: 60px;
    height: 60px;
    font-size: 18px;
    line-height: 64px;
    text-align: center;
}

.button .icon {
    z-index: 3;
    position: relative;
}

.button .hover-wave {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
}

.button .hover-wave:before, .button .hover-wave:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    background-color: var(--gray);
    border-radius: 50%;
}

.button .hover-wave:before {
    opacity: 0.3;
}

.button .hover-wave:after {
    opacity: 0.15;
}

.button:hover .hover-wave {
    opacity: 1;
}

.button:hover .hover-wave:before {
    -webkit-animation: wave-animate 1200ms infinite;
    animation: wave-animate 1200ms infinite;
}

.button:hover .hover-wave:after {
    -webkit-animation: wave-animate 1500ms infinite;
    animation: wave-animate 1500ms infinite;
}

.button-alt:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0.15;
    position: absolute;
}

.button-alt.button-alt-primary {
    color: var(--primary);
}

.button-alt.button-alt-primary:before {
    background-color: var(--primary-1);
}

.button-alt.button-alt-secondary {
    color: var(--secondary);
}

.button-alt.button-alt-secondary:before {
    background-color: var(--secondary-1);
}

.button-alt.button-circle:before {
    border-radius: 50%;
}

.button {
    overflow: hidden;
    position: relative;
}

.button .text {
    z-index: 1;
    position: relative;
}

.button .wave {
    top: 0;
    left: 50%;
    width: 500px;
    height: 500px;
    opacity: 1;
    position: absolute;
    margin-top: -480px;
    margin-left: -250px;
    border-radius: 43%;
    -webkit-transform-origin: 50% 49%;
    transform-origin: 50% 49%;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
    -webkit-animation: drift 8000ms infinite linear;
    animation: drift 8000ms infinite linear;
}

.button .wave-hover {
    top: 0;
    left: 50%;
    width: 500px;
    height: 500px;
    opacity: 0;
    position: absolute;
    margin-top: -480px;
    margin-left: -250px;
    border-radius: 43%;
    -webkit-transform-origin: 50% 49%;
    transform-origin: 50% 49%;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
    -webkit-animation: drift 8000ms infinite linear;
    animation: drift 8000ms infinite linear;
}

.button:hover .wave-hover {
    opacity: 1;
}

.button-gmail {
    background-color: #d44638;
}

.button-gmail img {
    width: 21px;
}

.button-gmail:hover {
    background-color: #b23121;
}

.button-arrow .icon-arrow {
    top: 6px;
    width: 45px;
    height: 2px;
    display: block;
    position: relative;
    background-color: var(--primary);
}

.button-arrow .icon-arrow:before, .button-arrow .icon-arrow:after {
    right: 0;
    width: 10px;
    height: 2px;
    content: "";
    position: absolute;
    background-color: var(--primary);
}

.button-arrow .icon-arrow:before {
    top: -4px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.button-arrow .icon-arrow:after {
    bottom: -4px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*------------------------------------
    Element: List
------------------------------------*/
.el-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.el-list li {
    color: var(--text-color);
    display: block;
    font-weight: 500;
    margin-bottom: 10px;
}

.el-list li .fa {
    top: 1px;
    color: var(--primary);
    position: relative;
    margin-right: 6px;
}

.el-list-icon {
    direction: ltr;
    list-style: none;
    padding: 0;
    margin: 0;
}

.el-list-icon li {
    color: var(--text-color);
    display: block;
    font-size: 15px;
    font-weight: 500;
}

.el-list-icon li .fa {
    top: 4px;
    font-size: 18px;
    position: relative;
    margin-right: 9px;
}

.el-list-icon li:not(:last-child) {
    margin-bottom: 18px;
}

.el-list-icon li.active {
    color: var(--primary);
}

/*------------------------------------
    Element: Tabs
------------------------------------*/
.el-tabs {
    overflow: hidden;
    position: relative;
}

.el-tabs ul {
    list-style: none;
    padding: 0;
}

.el-tabs ul.el-tabs-links {
    padding: 0;
    text-align: center;
    margin-bottom: 30px;
}

.el-tabs ul.el-tabs-links li {
    color: red;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    padding: 7px 15px;
    border-radius: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.el-tabs ul.el-tabs-links li.active {
    color: var(--base-1);
    background-color: var(--primary);
}

.el-tabs ul.el-tabs-items {
    text-align: center;
}

.el-tabs ul.el-tabs-items li {
    overflow: hidden;
}

.el-tabs ul.el-tabs-items li.hide {
    display: none;
}

@media (max-width: 768px) {
    .el-tabs .el-tabs-links {
        white-space: nowrap;
    }

    .el-tabs .el-tabs-links li {
        letter-spacing: 0.03em;
        font-size: 10px;
        padding: 6px 7px;
        margin: 0;
    }

    .el-tabs .el-tabs-links li:after {
        margin: 0;
    }
}

/*------------------------------------
    Element: Tags
------------------------------------*/
.el-tags {
    list-style: none;
    padding: 0;
    margin: 0 0 15px;
}

.el-tags li {
    color: var(--base-1);
    font-size: 10px;
    font-weight: 500;
    display: inline-block;
    padding: 6px 9px;
    margin-bottom: 3px;
    border-radius: 12px;
    background-color: var(--gray);
}

/*------------------------------------
    Element: Table
------------------------------------*/
.el-table {
    color: #666;
    direction: rtl;
}

.el-table th {
    color: var(--base-1);
}

.el-table td {
    font-size: 12px;
}

.el-table table.dataTable {
    margin-bottom: 15px;
}

.el-table .dataTables_wrapper {
    direction: rtl !important;
}

.el-table .dataTables_wrapper .dataTables_info {
    color: var(--base-1);
    padding: 9px 24px;
    border-radius: 24px;
    background-color: var(--gray);
}

.el-table .dataTables_wrapper .dataTables_length {
    color: var(--base-1);
    padding: 9px 24px;
    border-radius: 24px;
    background-color: var(--gray);
}

.el-table .dataTables_wrapper .dataTables_length select {
    color: var(--primary);
}

.el-table .dataTables_wrapper .dataTables_length select option {
    width: 100%;
    display: block;
    color: var(--base-1);
}

.el-table .dataTables_wrapper .dataTables_filter {
    width: 50%;
    display: block;
    color: var(--base-1);
    font-weight: 700;
    padding: 9px 15px;
    position: relative;
    border-radius: 24px;
    margin-bottom: 15px;
}

.el-table .dataTables_wrapper .dataTables_filter input {
    top: 0;
    left: -15px;
    height: 36px;
    padding-left: 66px;
    margin-left: 15px;
    position: absolute;
    border-radius: 24px;
    border: 1px solid #999;
}

.el-table .date {
    direction: ltr;
}

.el-table .name {
    font-weight: 700;
}

.el-table .status {
    top: 6px;
    position: relative;
}

.el-table .teacher {
    font-weight: 700;
}

.el-table .teacher img {
    width: 33px;
    height: 33px;
    margin-right: 6px;
    border-radius: 50%;
}

.el-table .btn {
    display: block;
    font-size: 12px;
    white-space: nowrap;
}

.el-table .btn i {
    top: 1px;
    width: 12px;
    font-size: 10px;
    position: relative;
    display: inline-block;
    margin-right: 3px;
}

.el-table .btn i.fa-times {
    left: 1px;
}

@media (max-width: 768px) {
    .el-table .custom-hide {
        display: none;
    }
}

@media (max-width: 640px) {
    .el-table .dataTables_wrapper .dataTables_filter {
        width: 100%;
    }

    .el-table .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }
}

/*------------------------------------
    Element: Alert
------------------------------------*/
.el-alert {
    width: 100%;
    border-radius: 9px;
    margin-bottom: 30px;
    border-radius: 6px;
    border: 1px solid transparent;
}

.el-alert .alert-flex .alert-icon {
    width: 90px;
}

.el-alert .alert-flex .alert-icon .icon {
    width: 45px;
    height: 45px;
    display: block;
    color: var(--primary);
    font-size: 18px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
}

.el-alert .alert-flex .alert-links {
    width: 180px;
}

.el-alert .alert-flex .alert-links .button {
    color: var(--primary);
    background-color: rgba(255, 255, 255, 0.3);
}

.el-alert .alert-flex .alert-links .button.button-sm {
    top: 3px;
    position: relative;
}

.el-alert .alert-flex .alert-links .button.button-md {
    top: 3px;
    position: relative;
}

.el-alert .alert-flex .alert-content {
    width: 100%;
    min-height: 80px;
    padding-top: 27px;
}

.el-alert.alert-info {
    border-color: #d6d8db;
    background-color: #e2e3e5;
}

.el-alert.alert-info .alert-icon .icon {
    color: #383d41;
}

.el-alert.alert-info .alert-content p {
    color: #383d41;
}

.el-alert.alert-info .alert-links {
    width: 180px;
}

.el-alert.alert-info .alert-links .button {
    color: #383d41;
    background-color: rgba(255, 255, 255, 0.3);
}

.el-alert.alert-danger {
    background-color: #ffe9e9;
}

.el-alert.alert-danger .alert-icon .icon {
    color: #f56c6c;
}

.el-alert.alert-danger .alert-content p {
    color: #f56c6c;
}

.el-alert.alert-danger .alert-links {
    width: 180px;
}

.el-alert.alert-danger .alert-links .button {
    color: #f56c6c;
    background-color: rgba(255, 255, 255, 0.3);
}

.el-alert.alert-warning {
    background-color: #fdf0de;
}

.el-alert.alert-warning .alert-icon .icon {
    color: orange;
}

.el-alert.alert-warning .alert-content p {
    color: orange;
}

.el-alert.alert-warning .alert-links {
    width: 180px;
}

.el-alert.alert-warning .alert-links .button {
    color: orange;
    background-color: rgba(255, 255, 255, 0.3);
}

.el-alert.alert-success {
    background-color: #ebf3e8;
}

.el-alert.alert-success .alert-icon .icon {
    color: green;
}

.el-alert.alert-success .alert-content p {
    color: green;
}

.el-alert.alert-success .alert-links {
    width: 180px;
}

.el-alert.alert-success .alert-links .button {
    color: green;
    background-color: rgba(255, 255, 255, 0.3);
}

.el-alert.alert-default {
    border-radius: 6px;
    border: 1px solid #ccc;
}

@media (max-width: 992px) {
    .el-alert .alert-flex {
        display: block !important;
        position: relative;
        padding: 9px 12px 15px;
    }

    .el-alert .alert-flex .alert-icon {
        top: 25px;
        left: 15px;
        position: absolute;
    }

    .el-alert .alert-flex .alert-links {
        width: 100%;
        display: block;
    }

    .el-alert .alert-flex .alert-links .button {
        display: block;
        text-align: center;
        font-size: 12px;
        padding-right: 6px;
        padding-left: 6px;
        margin-bottom: 12px;
    }

    .el-alert .alert-flex .alert-content {
        width: 100%;
        display: block;
        padding-left: 75px;
    }

    .el-alert .alert-flex .alert-content p {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .el-alert .alert-flex .alert-icon {
        display: none;
    }

    .el-alert .alert-flex .alert-content {
        padding-right: 0;
        padding-left: 0;
    }
}

/*------------------------------------
    Element: Accordion
------------------------------------*/
.el-accordion {
    width: 992px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
    -webkit-box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
    box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
    border-radius: 9px;
    background-color: var(--base-0);
    -webkit-transition: all 0.45s;
    transition: all 0.45s;
}

.el-accordion .el-accordion-head {
    height: 84px;
    color: var(--text-color);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.el-accordion .el-accordion-head .accordion-image {
    width: 84px;
    height: 84px;
}

.el-accordion .el-accordion-head .accordion-image img {
    top: 18px;
    width: 30px;
    position: relative;
}

.el-accordion .el-accordion-head .accordion-title {
    width: 90%;
    padding: 0 15px;
    margin: 0 auto;
    text-align: left;
}

.el-accordion .el-accordion-head .accordion-title h3,
.el-accordion .el-accordion-head .accordion-title h4 {
    color: var(--text-color);
    font-size: 14px;
    margin: 0;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

.el-accordion .el-accordion-head .accordion-arrow {
    width: 84px;
    height: 84px;
    position: relative;
    text-align: center;
}

.el-accordion .el-accordion-head .accordion-arrow span {
    font-size: 18px;
    font-weight: bold;
    -webkit-transition: all 450ms;
    transition: all 450ms;
}

.el-accordion .el-accordion-head .accordion-arrow.active span {
    color: var(--primary);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.el-accordion .el-accordion-body {
    display: none;
    overflow: hidden;
    position: relative;
    padding: 30px 45px;
    border-top: 1px solid var(--gray);
    background-color: #f7f7f7;
}

.el-accordion .el-accordion-body p {
    font-size: 12px;
    margin: 0;
}

.el-accordion .el-accordion-body.active {
    display: block;
}

.el-accordion:hover {
    -webkit-box-shadow: 0 3px 1px 0 var(--primary);
    box-shadow: 0 3px 1px 0 var(--primary);
}

.el-accordion:hover .el-accordion-head .accordion-title h4 {
    color: var(--primary);
}

.el-accordion.active .el-accordion-head .accordion-title h4 {
    color: var(--primary);
}

@media (max-width: 992px) {
    .el-accordion .el-accordion-head .accordion-title h4 {
        font-size: 14px;
    }

    .el-accordion .el-accordion-body {
        padding: 20px 30px;
    }

    .el-accordion .el-accordion-body p {
        font-size: 12px;
        text-align: justify;
    }
}

/*------------------------------------
    Element: Comments
------------------------------------*/
.el-comments .comments-form .form-item {
    margin-bottom: 0;
}

.el-comments .comments-form .form-item textarea {
    min-height: 90px;
    margin-bottom: 7px;
}

.el-comments .comments-list .comments-body .comments-ul {
    list-style: none;
    padding: 0;
}

.el-comments .comments-list .comments-body .comments-ul li .comment {
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-head {
    position: relative;
    text-align: left;
    padding-left: 54px;
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-head .date {
    right: 0;
    bottom: 15px;
    position: absolute;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 400;
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-head .author {
    top: 1px;
    font-size: 14px;
    position: relative;
    margin: 0 0 3px;
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-head .avatar {
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    overflow: hidden;
    position: absolute;
    border-radius: 50%;
    margin: 0 !important;
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-head .opacity {
    color: var(--text-color);
    font-size: 12px;
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-head .score {
    top: 0;
    right: 0;
    display: none;
    position: absolute;
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-head .score .el-stars li {
    color: var(--text-color);
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-head .score .title {
    color: #333;
    display: block;
    font-size: 0.9em;
    font-weight: 700;
    margin-bottom: 6px;
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-body {
    margin-bottom: 25px;
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-body p {
    color: var(--text-color);
    font-size: 12px;
    text-align: justify;
    margin: 0;
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-body .reply {
    display: block;
    font-size: 12px;
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-body .reply .fa {
    top: 1px;
    font-size: 11px;
    position: relative;
}

.el-comments .comments-list .comments-body .comments-ul li .comment .comment-body .reply:hover {
    color: var(--primary);
}

.el-comments .comments-list .comments-body .comments-ul li:hover .el-stars li {
    color: orange !important;
}

.el-comments .comments-list .comments-body .el-pagination {
    float: inherit !important;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
}

/*------------------------------------
    Element: CTA (Call To Action)
------------------------------------*/
.el-cta {
    overflow: hidden;
    position: relative;
}

.el-cta p {
    color: var(--base-0);
    font-size: 18px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 20px;
}

.el-cta .display-center {
    z-index: 3;
    text-align: center;
}

.el-cta .parallax-window {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
}

.el-cta:after {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    content: "";
    position: absolute;
    border-radius: 6px;
    background-color: var(--primary);
}

.el-cta-1 {
    height: 450px;
}

.el-cta-1 .heading {
    max-width: 600px;
    margin: auto;
}

.el-cta-1 .heading p {
    margin-bottom: 25px;
}

.el-cta-1 .heading h2 {
    color: var(--base-0);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    margin: auto;
    margin-bottom: 20px;
}

.el-cta-1 .heading h2 span {
    z-index: 1;
    position: relative;
}

.el-cta-1 .heading h2 .text-border {
    z-index: 1;
    display: inline-block;
    position: relative;
    padding-right: 6px;
    padding-left: 6px;
}

.el-cta-1 .heading h2 .text-border:after {
    right: 6px;
    left: 6px;
    bottom: 9px;
    height: 12px;
    content: "";
    z-index: 0;
    opacity: 0.3;
    position: absolute;
    background-color: orange;
}

.el-cta-1 .bg-color {
    height: 6000px !important;
    top: -900px !important;
    opacity: 0.75;
}

.el-cta-4 {
    padding: 30px 0 15px;
}

.el-cta-4 p {
    color: var(--text-color);
    text-align: left;
}

.el-cta-4 .button {
    right: 0;
    bottom: 45px;
    position: absolute;
}

@media (max-width: 992px) {
    .el-cta-1 .heading p {
        font-size: 0.9em;
        padding-right: 15px;
        padding-left: 1px;
    }

    .el-cta-1 .heading h2 {
        font-size: 21px;
    }

    .el-cta-4 {
        text-align: center;
    }

    .el-cta-4 p {
        font-size: 14px;
        text-align: center;
        margin-bottom: 20px;
    }

    .el-cta-4 h3 {
        font-size: 16px;
    }

    .el-cta-4 .button {
        bottom: 0;
        position: relative;
    }
}

/*------------------------------------
    Element: Tag
------------------------------------*/
.el-tag {
    height: 30px;
    color: var(--text-color);
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.el-tag .el-tag-icon {
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    float: left;
    overflow: hidden;
    margin-right: 6px;
    border-radius: 50%;
}

.el-tag .el-tag-label {
    float: left;
    font-size: 12px;
    padding-top: 2px;
}

/*------------------------------------
    Element: Stars
------------------------------------*/
.el-stars {
    margin: 0;
    padding: 0;
    list-style: none;
}

.el-stars li {
    color: orange;
    display: inline-block;
    margin-right: 0;
}

/*------------------------------------
    Element: Card
------------------------------------*/
.el-card, .el-panel, .section-features.section-features-1 .item {
    width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin: 0 1px 6px;
    border-radius: 9px;
    background-color: var(--base-0);
    -webkit-box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25) !important;
    box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25) !important;
    -webkit-transition: all 0.45s;
    transition: all 0.45s;
}

.el-card p, .el-panel p, .section-features.section-features-1 .item p {
    font-size: 12px;
    font-family: "Poppins", sans-serif;
}

.el-card .avatar, .el-panel .avatar, .section-features.section-features-1 .item .avatar {
    width: 105px;
    height: 105px;
    position: relative;
    border-radius: 50%;
    margin: 30px auto 25px;
    background-color: var(--gray);
}

.el-card .avatar > img, .el-panel .avatar > img, .section-features.section-features-1 .item .avatar > img {
    border-radius: 50%;
}

.el-card .avatar .is-experienced, .el-panel .avatar .is-experienced, .section-features.section-features-1 .item .avatar .is-experienced {
    top: -1px;
    right: -1px;
    width: 33px;
    position: absolute;
}

.el-card .other, .el-panel .other, .section-features.section-features-1 .item .other {
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 40px;
    padding-top: 9px;
    text-align: left;
}

.el-card .other .price, .el-panel .other .price, .section-features.section-features-1 .item .other .price {
    font-size: 12px;
    position: relative;
}

.el-card .other .price .text-color, .el-panel .other .price .text-color, .section-features.section-features-1 .item .other .price .text-color {
    float: right;
    font-size: 0.99em;
    font-weight: 700;
    position: relative;
}

.el-card .other .price .text-color.old-price, .el-panel .other .price .text-color.old-price, .section-features.section-features-1 .item .other .price .text-color.old-price {
    color: #f56c6c;
    padding-right: 3px;
    padding-left: 3px;
    text-decoration: line-through;
}

.el-card .other .price .text-color.new-price, .el-panel .other .price .text-color.new-price, .section-features.section-features-1 .item .other .price .text-color.new-price {
    position: relative;
    bottom: 0;
}

.el-card .icons, .el-panel .icons, .section-features.section-features-1 .item .icons {
    list-style: none;
    padding: 0;
    margin: 0;
}

.el-card .icons li, .el-panel .icons li, .section-features.section-features-1 .item .icons li {
    display: block;
    margin-bottom: 6px;
}

.el-card .icons li .icon-off, .el-panel .icons li .icon-off, .section-features.section-features-1 .item .icons li .icon-off {
    width: 30px;
    height: 30px;
    color: var(--base-0);
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background-color: var(--primary);
}

.el-card .icons li .icon-lang, .el-panel .icons li .icon-lang, .section-features.section-features-1 .item .icons li .icon-lang {
    width: 30px;
    height: 30px;
    font-size: 12px;
    text-align: center;
    overflow: hidden;
    border-radius: 50%;
}

.el-card .icons li .icon-status, .el-panel .icons li .icon-status, .section-features.section-features-1 .item .icons li .icon-status {
    color: var(--base-0);
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 4px;
    background-color: var(--primary);
}

.el-card .icons.icons-right, .el-panel .icons.icons-right, .section-features.section-features-1 .item .icons.icons-right {
    top: 0;
    right: 0;
    width: 120px;
    height: 90px;
    position: absolute;
    text-align: right;
    padding-top: 12px;
    padding-right: 12px;
}

.el-card .icons.icons-left, .el-panel .icons.icons-left, .section-features.section-features-1 .item .icons.icons-left {
    top: 0;
    left: 0;
    width: 120px;
    height: 90px;
    position: absolute;
    padding-top: 12px;
    padding-left: 12px;
}

.el-card .icons.icons-center, .el-panel .icons.icons-center, .section-features.section-features-1 .item .icons.icons-center {
    text-align: center;
}

.el-card .icons.icons-center li, .el-panel .icons.icons-center li, .section-features.section-features-1 .item .icons.icons-center li {
    display: inline-block;
}

.el-card .text-color, .el-panel .text-color, .section-features.section-features-1 .item .text-color {
    padding-right: 4px;
    padding-left: 6px;
}

.el-card:hover, .el-panel:hover, .section-features.section-features-1 .item:hover {
    border-bottom-color: transparent;
    -webkit-box-shadow: 0 1px 3px 0 var(--primary) !important;
    box-shadow: 0 1px 3px 0 var(--primary) !important;
}

/*------------------------------------
    Element: Panel
------------------------------------*/
.el-panel {
    text-align: left !important;
    margin-bottom: 30px;
}

.el-panel .icons {
    z-index: 15;
}

.el-panel .icons.icons-right {
    right: -15px;
}

.el-panel .icons.icons-left {
    left: -15px;
}

.el-panel .el-panel-body {
    padding: 30px;
    position: relative;
}

.el-panel .el-panel-body p {
    font-size: 14px;
}

.el-panel .el-panel-body .el-panel-title {
    position: relative;
    margin-bottom: 6px;
}

.el-panel .el-panel-body .el-panel-title h1,
.el-panel .el-panel-body .el-panel-title h2,
.el-panel .el-panel-body .el-panel-title h3 {
    z-index: 1;
    color: var(--base-1);
    font-size: 21px;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding-right: 15px;
    background-color: var(--base-0);
}

.el-panel .el-panel-body .el-panel-title:before {
    top: 11px;
    right: 0;
    width: 100%;
    height: 7px;
    content: "";
    position: absolute;
    background-color: var(--gray);
}

.el-panel .el-panel-body .el-panel-line {
    position: relative;
    padding: 0 0 18px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--gray);
}

.el-panel .el-panel-body .el-panel-line p {
    text-align: left;
    margin: 0;
}

.el-panel .el-panel-body .el-panel-line .label {
    font-weight: 700;
}

.el-panel .el-panel-body .el-panel-line .title,
.el-panel .el-panel-body .el-panel-line .subtitle {
    color: var(--text-color);
    font-size: 0.9em;
}

.el-panel .el-panel-body .el-panel-line .reserved {
    padding: 20px 15px 0;
    list-style: none;
}

.el-panel .el-panel-body .el-panel-line .reserved li {
    display: block;
    margin-bottom: 9px;
}

.el-panel .el-panel-body .el-panel-line .reserved li .fa {
    color: var(--primary);
}

.el-panel .el-panel-body .el-panel-line .reserved li .date {
    color: var(--secondary);
    margin-left: 6px;
}

.el-panel .el-panel-body .el-panel-line .reserved li .name {
    display: none;
}

.el-panel .el-panel-body .el-panel-line .reserved li .button {
    display: inline-block;
}

.el-panel .el-panel-body .el-panel-image {
    overflow: hidden;
    position: relative;
    padding-top: 57%;
    margin-bottom: 25px;
}

.el-panel .el-panel-body .el-panel-image img {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    position: absolute;
}

.el-panel.el-panel-calendar .item {
    font-size: 12px;
    -webkit-box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
    box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
    border: 1px solid var(--gray);
    border-radius: 9px;
    position: relative;
    padding: 30px 15px;
    padding-left: 36px;
    margin-bottom: 12px;
}

.el-panel.el-panel-calendar .item .week {
    color: var(--primary);
}

.el-panel.el-panel-calendar .item .date {
    color: var(--text-color);
}

.el-panel.el-panel-calendar .item .hour {
    float: right;
    color: var(--secondary);
    font-weight: bold;
}

.el-panel.el-panel-calendar .item:before {
    top: 36px;
    left: 20px;
    width: 6px;
    height: 6px;
    content: "";
    display: block;
    position: absolute;
    border-radius: 50%;
    margin-top: -1px;
    background-color: var(--primary);
}

.el-panel.el-panel-financial p {
    text-align: center !important;
}

.el-panel.el-panel-financial p.price {
    color: var(--base-0);
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 30px;
}

.el-panel.el-panel-financial p.price .value {
    top: 3px;
    position: relative;
}

.el-panel.el-panel-financial p.price .currency {
    font-weight: 500;
}

.el-panel.el-panel-financial .button {
    text-align: center;
    margin: 0 auto !important;
}

.el-panel.el-panel-course-widget .teacher {
    position: relative;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--gray);
}

.el-panel.el-panel-course-widget .teacher .title {
    color: var(--base-1);
    font-size: 18px !important;
    line-height: 1.5 !important;
    text-align: center;
    margin-bottom: 10px;
}

.el-panel.el-panel-course-widget .teacher .excerpt {
    color: var(--text-color);
    overflow: hidden;
    max-height: 42px;
    font-size: 0.9em;
    text-align: center;
    line-height: 1.8;
    margin: 0 0 15px;
}

.el-panel.el-panel-course-widget .teacher .avatar {
    width: 102px;
    height: 102px;
    position: relative;
    border-radius: 50%;
    margin: 0 auto 20px;
}

.el-panel.el-panel-course-widget .teacher .avatar img {
    border-radius: 50%;
}

.el-panel.el-panel-course-widget .teacher .avatar .icons {
    position: absolute;
}

.el-panel.el-panel-teacher-widget .teacher {
    height: 129px;
    position: relative;
    text-align: left;
    padding-top: 18px;
    padding-left: 120px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--gray);
}

.el-panel.el-panel-teacher-widget .teacher .title {
    line-height: 1;
    font-size: 16px;
    margin-bottom: 15px;
}

.el-panel.el-panel-teacher-widget .teacher .excerpt {
    color: var(--text-color);
    overflow: hidden;
    max-height: 42px;
    font-size: 12px;
    text-align: left;
    line-height: 1.8;
    margin: 0;
}

.el-panel.el-panel-teacher-widget .teacher .avatar {
    top: 9px;
    left: 0;
    width: 102px;
    height: 102px;
    position: absolute;
    margin: 0 !important;
    border-radius: 50%;
    background-color: var(--gray);
}

.el-panel.el-panel-teacher-widget .teacher .avatar img {
    top: 0;
    right: 0;
    width: 100%;
    position: absolute;
    border-radius: 50%;
}

.el-panel.el-panel-teacher-widget .teacher .icons.icons-right {
    top: -20px;
    right: -20px;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .section-teacher .col-lg-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 36%;
        flex: 0 0 36%;
        max-width: 36%;
    }

    .section-teacher .col-lg-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 64%;
        flex: 0 0 64%;
        max-width: 64%;
    }

    .section-teacher .reserved {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

@media (max-width: 992px) {
    .el-panel .el-panel-body {
        padding: 20px;
    }

    .el-panel .el-panel-body p {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .el-panel .el-panel-body {
        padding: 30px 15px;
    }

    .el-panel .el-panel-body .el-panel-title h2 {
        font-size: 16px;
    }
}

/*------------------------------------
    Element: Progress
------------------------------------*/
.el-progress {
    position: relative;
    margin-bottom: 60px;
}

.el-progress span {
    color: var(--text-color);
    font-weight: 500;
    display: inline-block;
    margin-bottom: 15px;
}

.el-progress .el-icon {
    margin-bottom: 25px;
}

.el-progress .el-progress-count {
    top: 12px;
    left: 0;
    position: absolute;
}

.el-progress div {
    height: 12px;
    border-radius: 3px;
    background-color: #eee;
}

.el-progress div .el-progress-bar {
    width: 0;
    background-size: 1rem 1rem;
    background-color: var(--primary);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
}

/*------------------------------------
    Element: Divider
------------------------------------*/
.divider {
    width: 63px;
    height: 4px;
    display: inline-block;
    position: relative;
    margin-right: 9px;
    margin-left: 9px;
    background-color: var(--primary);
}

.divider.divider-1 {
    width: 63px;
    height: 4px;
    position: relative;
    margin-bottom: 15px;
    background: var(--primary);
}

.divider.divider-1-1 {
    margin-left: 12px !important;
}

.divider.divider-1-2:before {
    right: -9px;
    width: 5px;
    height: 5px;
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: var(--primary);
}

.divider.divider-1-2:after {
    right: -17px;
    width: 5px;
    height: 5px;
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: var(--primary);
}

.divider.divider-1-2.divider-single {
    right: 12px;
}

/*------------------------------------
    Element: Headline
------------------------------------*/
.el-headline {
    width: 100%;
    position: relative;
    margin-bottom: 50px;
}

.el-headline .el-headline-title {
    font-size: 36px;
}

.el-headline .el-headline-label {
    position: relative;
}

.el-headline .el-headline-label span {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.el-headline .el-headline-label:before {
    right: 0;
    left: 0;
    bottom: 10px;
    width: 36px;
    height: 36px;
    opacity: 0.75;
    content: "";
    position: absolute;
    border-radius: 50%;
    margin: auto;
    background-color: var(--primary);
}

.el-headline.center {
    max-width: 576px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 768px) {
    .el-headline p {
        font-size: 14px;
    }

    .el-headline .el-headline-title {
        font-size: 21px;
    }
}

/*------------------------------------
    Element: Heading
------------------------------------*/
.el-heading {
    z-index: 12;
    position: relative;
    margin-bottom: 50px;
}

.el-heading p {
    margin: 0;
    font-size: 18px;
    font-weight: 300;
}

.el-heading h2 {
    color: var(--primary);
    color: #151515;
    font-size: 30px;
    letter-spacing: -1.2px;
    margin-bottom: 12px;
}

.el-heading h2 .text-color {
    color: var(--primary);
}

.el-heading h3 {
    color: var(--text-color);
    font-size: 17px;
    font-weight: 300;
    font-family: "Poppins", sans-serif;
    margin: 0;
}

.el-heading .divider {
    margin-top: 25px;
}

.el-heading.light p {
    color: var(--base-0);
}

.el-heading.light h2 {
    color: var(--base-0);
}

.el-heading.light h3 {
    color: var(--base-0);
}

.el-heading.light .divider-line {
    background-color: var(--base-0);
}

.el-heading.center {
    text-align: center;
}

.el-line-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin-bottom: 6px;
}

.el-line-title h3 {
    color: var(--base-1);
    font-size: 21px;
    line-height: 1.5;
    white-space: nowrap;
    padding-right: 15px;
}

.el-line-title .line {
    top: 12px;
    width: 100%;
    height: 7px;
    content: "";
    position: relative;
    background-color: var(--gray);
}

@media (max-width: 768px) {
    .el-heading p {
        font-size: 14px;
    }

    .el-heading h2 {
        font-size: 20px;
    }

    .el-heading h3 {
        font-size: 14px;
    }
}

/*------------------------------------
    Element: Slider
------------------------------------*/
.el-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.el-slider .el-slide {
    width: 100%;
    height: 100%;
}

.el-slider .swiper-container {
    width: 100%;
    height: 100%;
    padding-top: 6px;
    padding-bottom: 6px;
}

.el-slider .swiper-container .swiper-wrapper .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.el-slider .swiper-container .swiper-pagination {
    bottom: 0;
}

.el-slider .swiper-container .swiper-button-prev,
.el-slider .swiper-container .swiper-button-next {
    width: 36px;
    height: 36px;
    color: var(--base-0);
    opacity: 0;
    z-index: 999999;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--primary);
}

.el-slider .swiper-container .swiper-button-prev:after,
.el-slider .swiper-container .swiper-button-next:after {
    font-size: 16px;
    font-weight: 900;
}

.el-slider .swiper-container:hover .swiper-button-prev,
.el-slider .swiper-container:hover .swiper-button-next {
    opacity: 1;
    opacity: 1;
    -webkit-animation: bounce-out 0.8s linear normal;
    animation: bounce-out 0.8s linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.el-slider .el-slider-arrows .el-slider-prev,
.el-slider .el-slider-arrows .el-slider-next {
    top: 0;
    width: 36px;
    height: 36px;
    color: var(--base-0);
    cursor: pointer;
    z-index: 12;
    line-height: 36px;
    text-align: center;
    position: absolute;
    background-color: var(--primary);
}

.el-slider .el-slider-arrows .el-slider-prev.el-slider-prev,
.el-slider .el-slider-arrows .el-slider-next.el-slider-prev {
    right: 0;
}

.el-slider .el-slider-arrows .el-slider-prev.el-slider-next,
.el-slider .el-slider-arrows .el-slider-next.el-slider-next {
    left: 0;
}

.el-slider.el-slider-dots .swiper-container {
    padding-bottom: 60px !important;
    margin-bottom: -45px !important;
}

/*------------------------------------
    Element: Scroll
------------------------------------*/
.el-scroll {
    right: 0;
    left: 0;
    bottom: 66px;
    width: 30px;
    height: 45px;
    z-index: 18;
    position: absolute;
    margin: auto;
    border-radius: 25px;
    border: 1px solid #fff;
}

.el-scroll:before {
    right: 0;
    left: 0;
    margin: auto;
    position: absolute;
    top: 9px;
    width: 2px;
    height: 9px;
    display: block;
    background: #fff;
    border-radius: 3px;
    content: "";
    -webkit-animation-name: scroll;
    animation-name: scroll;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
    animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.el-scroll-line {
    right: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 50px;
    display: block;
    content: "";
    width: 1px;
    height: 50px;
    margin: auto;
    position: absolute;
    background-color: #fff;
}

/*------------------------------------
    Element: Blockquote
------------------------------------*/
.el-blockquote {
    overflow: hidden;
    position: relative;
    font-size: 16px;
    font-style: inherit;
    margin-top: 30px;
    padding: 15px 30px 15px 81px;
}

.el-blockquote p {
    font-weight: 100;
    text-align: right;
    margin-bottom: 15px;
}

.el-blockquote .el-blockquote-icon {
    top: 12px;
    right: 0;
    width: 60px;
    height: 60px;
    color: var(--base-1);
    display: block;
    font-size: 18px;
    line-height: 60px;
    text-align: center;
    padding-top: 4px;
    border-radius: 50%;
    position: absolute;
    background: var(--primary);
}

.el-blockquote .el-blockquote-author {
    color: var(--primary);
    font-size: 14px;
}

/*------------------------------------
    Element: Circle-Side
------------------------------------*/
.el-circle-side {
    top: 0;
    width: 100vh;
    height: 100vh;
    opacity: 0.3;
    padding-top: 50%;
    padding-right: 50%;
    position: absolute;
    border-radius: 50%;
    background-color: var(--base-0);
}

.el-circle-side.right {
    right: 7;
}

.el-circle-side.left {
    left: 7%;
}

@media (max-width: 768px) {
    .el-circle-side {
        display: none;
    }
}

/*------------------------------------
    Element: List
------------------------------------*/
.el-list-check {
    list-style: none;
    padding: 0;
    margin: 0 15px 20px;
}

.el-list-check li {
    display: block;
    font-weight: 500;
    margin-bottom: 9px;
}

.el-list-check li .text {
    padding-left: 9px;
}

.el-list-check li .icon {
    top: 1px;
    color: green;
    position: relative;
    margin-left: 9px;
}

/*------------------------------------
    Element: Go Back
------------------------------------*/
.el-go-back {
    display: block;
    position: relative;
    color: var(--base-1);
}

.el-go-back .icon {
    top: 2px;
    right: -3px;
    position: relative;
    margin-left: 6px;
}

/*------------------------------------
    Element: Icon
------------------------------------*/
.el-icon {
    display: block;
    position: relative;
    margin-bottom: 30px;
}

.el-icon .el-icon-icon {
    top: 10px;
    right: 10px;
    z-index: 3;
    font-size: 30px;
    line-height: 36px;
    position: relative;
}

.el-icon .el-icon-label,
.el-icon .el-icon-title,
.el-icon .el-icon-subtitle {
    display: block;
    padding-top: 9px;
    padding-right: 15px;
}

.el-icon .el-icon-label {
    top: -1px;
    font-size: 14px;
    position: relative;
    margin-bottom: 3px;
}

.el-icon .el-icon-title {
    top: -2px;
    font-size: 16px;
    position: relative;
    margin-bottom: 3px;
}

.el-icon .el-icon-small {
    font-size: 80%;
}

.el-icon .el-icon-subtitle {
    font-size: 12px;
}

.el-icon .el-icon-circle {
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    display: block;
    text-align: center;
    position: absolute;
}

.el-icon .el-icon-circle .el-icon-inner {
    top: 9px;
    right: 9px;
    font-size: 30px;
    position: absolute;
}

.el-icon .el-icon-circle:before {
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: var(--primary);
}

.el-icon.el-icon-dark .el-icon-title,
.el-icon.el-icon-dark .el-icon-subtitle {
    color: var(--black);
}

.el-icon.el-icon-light .el-icon-title,
.el-icon.el-icon-light .el-icon-subtitle {
    color: var(--white);
}

.el-icon:before {
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--primary);
}

/*------------------------------------
    Element: Read-More
------------------------------------*/
.el-read-more {
    padding-top: 100px;
}

.el-read-more .button span {
    top: 2px;
    position: relative;
}

.el-read-more .button.button-default {
    border: 1px solid #eee;
}

/*------------------------------------
    Element: Social
------------------------------------*/
.el-social-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.el-social-links li {
    width: 36px;
    height: 36px;
    line-height: 39px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    background-color: var(--primary);
}

.el-social-links li a {
    color: #333;
    color: var(--base-0);
}

.el-social-links li:hover {
    background-color: var(--primary-1);
}

.el-social-links li:hover a {
    color: var(--base-0) !important;
}

/*------------------------------------
    Element: Pagination
------------------------------------*/
.el-pagination {
    float: right;
    padding: 0;
    direction: ltr;
    list-style: none;
    text-align: right;
    margin-bottom: 0;
}

.el-pagination li {
    height: 33px;
    min-width: 33px;
    line-height: 33px;
    color: #999;
    cursor: pointer;
    font-size: 0.9em;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    border-radius: 50%;
}

.el-pagination li a {
    display: block;
}

.el-pagination li .fa {
    top: 1px;
    padding-left: 12px;
    position: relative;
    display: inline-block;
}

.el-pagination li:hover {
    color: var(--base-0);
    background-color: var(--primary);
}

.el-pagination li.active {
    color: var(--base-0);
    background-color: var(--primary);
}

/*------------------------------------
    Element: Sortination
------------------------------------*/
.el-sortination {
    white-space: nowrap;
}

.el-sortination ul {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.el-sortination ul li {
    cursor: pointer;
    font-size: 0.9em;
    color: var(--text-color);
    display: inline-block;
    padding: 8px 14px;
    border-bottom: 3px solid transparent;
}

.el-sortination ul li:hover,
.el-sortination ul li.active {
    color: var(--base-1);
    border-bottom-color: #5b70f9;
}

.el-sortination p {
    color: var(--text-color);
    font-size: 0.9em;
    display: inline-block;
    margin-right: 12px;
}

.el-sortination p .fa {
    top: -1px;
    font-size: 11px;
    position: relative;
    margin-right: 3px;
}

.el-sortination p .title {
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 1200px) {
    .el-sortination ul li {
        font-size: 12px;
        padding-right: 9px;
        padding-left: 9px;
    }
}

/*------------------------------------
    Element: Banner
------------------------------------*/
.el-banner {
    text-align: center;
    overflow: hidden;
    position: relative;
    padding: 60px 0;
}

.el-banner .el-banner-content {
    z-index: 12;
    padding: 30px;
    margin: 0 auto 30px;
    position: relative;
}

.el-banner .el-banner-content p {
    color: var(--base-0);
    opacity: 0.6;
    max-width: 600px;
    font-size: 14px;
    text-align: center;
    margin: 0 auto 30px;
}

.el-banner .el-banner-content h2 {
    color: var(--base-0);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.5;
    margin: auto;
    margin-bottom: 20px;
}

/*------------------------------------
    Element: Excerpt Posts
------------------------------------*/
.el-excerpt-posts ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.el-excerpt-posts ul li {
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--gray);
}

.el-excerpt-posts ul li .item {
    padding: 9px;
}

.el-excerpt-posts ul li .item p {
    font-size: 12px;
    margin-bottom: 20px;
}

.el-excerpt-posts ul li .item h4 {
    font-size: 16px;
}

.el-excerpt-posts ul li .item .button {
    color: var(--text-color);
    border: 1px solid var(--gray);
    background-color: var(--gray);
}

.el-excerpt-posts ul li .item a:hover {
    color: var(--primary);
}

/*------------------------------------
    Element: Featured Posts
------------------------------------*/
.el-featured-posts {
    z-index: 18;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}

.el-featured-posts .post {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    margin-bottom: 12px;
    background-color: var(--base-1);
    -webkit-box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25) !important;
    box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25) !important;
}

.el-featured-posts .post .post-image {
    overflow: hidden;
    position: relative;
    padding-top: 60%;
    -webkit-transition: all 0.45s;
    transition: all 0.45s;
}

.el-featured-posts .post .post-image img {
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    position: absolute;
}

.el-featured-posts .post .post-image:after {
    top: 39%;
    right: 0;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(75%, black));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 75%);
}

.el-featured-posts .post .post-details {
    left: 0;
    bottom: -60px;
    padding: 15px 30px;
    position: absolute;
    -webkit-transition: all 0.45s;
    transition: all 0.45s;
}

.el-featured-posts .post .post-details h1,
.el-featured-posts .post .post-details h2 {
    color: var(--base-0);
    font-size: 21px;
    padding-top: 15px;
}

.el-featured-posts .post .post-details .button {
    padding-left: 0;
}

.el-featured-posts .post .post-details .post-details-footer {
    padding-top: 30px;
    -webkit-transition: all 0.45s;
    transition: all 0.45s;
}

.el-featured-posts .post .post-details .post-details-footer .author {
    float: left;
    color: var(--base-0);
    opacity: 0.75;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    padding-top: 8px;
    padding-left: 45px;
    margin-right: 15px;
}

.el-featured-posts .post .post-details .post-details-footer .author img {
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--primary);
}

.el-featured-posts .post:hover .post-image {
    opacity: 0.6;
}

.el-featured-posts .post:hover .post-details {
    bottom: 0;
}

.el-featured-posts .post:hover .post-details h1,
.el-featured-posts .post:hover .post-details h2 {
    color: var(--primary);
}

.el-featured-posts .post:hover .post-details .post-details-footer {
    padding-top: 0;
}

@media (min-width: 768px) and (max-width: 992px) {
    .el-featured-posts .post.post-side .post-details h2 {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .el-featured-posts .post .post-details p {
        display: none !important;
    }

    .el-featured-posts .post .post-details h1,
    .el-featured-posts .post .post-details h2 {
        font-size: 18px !important;
    }
}

/*------------------------------------
    Element: Flag
------------------------------------*/
.el-flag {
    overflow: hidden;
    position: relative;
}

.el-flag .inner {
    height: 45px;
    position: relative;
}

.el-flag .inner img {
    top: 12px;
    left: 15px;
    width: 27px;
    height: 27px;
    float: left;
    display: block;
    position: absolute;
    border-radius: 50%;
}

.el-flag .inner .title {
    top: 0;
    left: 0;
    width: 100%;
    font-size: 0.9em;
    padding-top: 15px;
    padding-left: 51px;
    position: absolute;
    white-space: nowrap;
}

/*------------------------------------
    Element: Calendar
------------------------------------*/
.el-calendar {
    position: relative;
}

.el-calendar .el-calendar-tabs {
    padding: 15px 20px;
    border-radius: 24px;
}

.el-calendar .el-calendar-tabs ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.el-calendar .el-calendar-tabs ul.week-days {
    padding: 3px 15px 15px;
    border-radius: 24px;
    border-bottom: 4px solid var(--gray);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.el-calendar .el-calendar-tabs ul.week-days li {
    cursor: pointer;
    font-size: 12px;
    padding: 0 15px;
    position: relative;
}

.el-calendar .el-calendar-tabs ul.week-days li p {
    text-align: center;
    margin-bottom: 0;
}

.el-calendar .el-calendar-tabs ul.week-days li p .week-day-name {
    color: var(--black);
}

.el-calendar .el-calendar-tabs ul.week-days li.active p,
.el-calendar .el-calendar-tabs ul.week-days li.active .week-day-name {
    color: var(--primary);
}

.el-calendar .el-calendar-tabs ul.week-days li.deactive p,
.el-calendar .el-calendar-tabs ul.week-days li.deactive .week-day-name {
    color: #ccc;
    cursor: no-drop;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.el-calendar .el-calendar-tabs ul.day-hours {
    padding: 30px 0 15px;
    background-color: var(--base-0);
}

.el-calendar .el-calendar-tabs ul.day-hours li {
    color: var(--secondary);
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding: 9px 24px;
    margin-right: 2px;
    margin-bottom: 10px;
    border-radius: 4px;
    border-radius: 24px;
    border: 2px solid var(--secondary);
}

.el-calendar .el-calendar-tabs ul.day-hours li .day-cell {
    font-size: 11px;
    font-weight: bold;
    margin: 0;
}

.el-calendar .el-calendar-tabs ul.day-hours li.clicked {
    color: var(--primary);
    border-color: var(--primary);
    background-color: #fff0e0;
}

.el-calendar .el-calendar-tabs ul.day-hours li.selected {
    color: var(--primary);
    border-color: var(--primary);
}

.el-calendar .el-calendar-tabs ul.day-hours li.inactive {
    color: #999;
    border-color: var(--gray) !important;
    background-color: var(--gray);
}

.el-calendar .el-calendar-tabs ul.day-hours li.inactive:after {
    top: -3px;
    right: -6px;
    left: -6px;
    height: 100%;
    height: 100%;
    color: #f56c6c;
    font-size: 9px;
    content: "Inactive";
    position: absolute;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.45);
}

.el-calendar .el-calendar-tabs ul.day-hours li.reserved {
    color: #999;
    border-color: var(--gray) !important;
    background-color: var(--gray);
}

.el-calendar .el-calendar-tabs ul.day-hours li.reserved:after {
    top: -3px;
    right: -6px;
    left: -6px;
    height: 100%;
    color: #f56c6c;
    font-size: 9px;
    content: "Reserved";
    position: absolute;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.45);
}

.el-calendar .el-calendar-tabs ul.day-hours:not(.active) {
    display: none;
}

.el-calendar .el-calendar-tabs ul.day-items {
    padding: 30px 0 0;
    background-color: var(--base-0);
}

.el-calendar .el-calendar-tabs ul.day-items li {
    padding: 30px 0;
}

.el-calendar.el-calendar-week {
    top: -30px;
    padding: 0 30px;
    position: relative;
}

.el-calendar-slider {
    position: relative;
}

.el-calendar-slider .el-calendar-slider-prev,
.el-calendar-slider .el-calendar-slider-next {
    top: 24px;
    width: 36px;
    height: 36px;
    color: var(--primary);
    cursor: pointer;
    z-index: 15;
    display: block;
    line-height: 40px;
    text-align: center;
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--primary);
}

.el-calendar-slider .el-calendar-slider-prev span,
.el-calendar-slider .el-calendar-slider-next span {
    font-size: 18px;
    font-weight: bold;
}

.el-calendar-slider .el-calendar-slider-prev.inactive,
.el-calendar-slider .el-calendar-slider-next.inactive {
    color: #ccc;
    border-color: #e1e1e1;
}

.el-calendar-slider .el-calendar-slider-prev.disabled,
.el-calendar-slider .el-calendar-slider-next.disabled {
    cursor: no-drop;
    opacity: 0.3;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.el-calendar-slider .el-calendar-slider-prev.el-calendar-slider-prev,
.el-calendar-slider .el-calendar-slider-next.el-calendar-slider-prev {
    left: -15px;
}

.el-calendar-slider .el-calendar-slider-prev.el-calendar-slider-next,
.el-calendar-slider .el-calendar-slider-next.el-calendar-slider-next {
    right: -15px;
}

.el-calendar-slider .el-calendar-slider-wrapper {
    position: relative;
}

.el-calendar-slider .el-calendar-slider-wrapper .el-calendar-slider-item {
    top: 0;
    left: 100%;
    right: -100%;
    opacity: 0;
    display: none;
    position: absolute;
    visibility: hidden;
    -webkit-transition: all 270ms;
    transition: all 270ms;
}

.el-calendar-slider .el-calendar-slider-wrapper .el-calendar-slider-item.active {
    right: 0 !important;
    left: 0 !important;
    opacity: 1 !important;
    display: block !important;
    position: relative !important;
    visibility: visible !important;
}

@media (max-width: 1200px) {
    .el-calendar .el-calendar-tabs ul.week-days {
        padding: 3px 15px 15px;
    }

    .el-calendar .el-calendar-tabs ul.week-days li {
        font-size: 11px;
        padding: 0 9px;
    }

    .el-calendar .el-calendar-tabs ul.day-hours {
        padding: 30px 0 15px;
    }

    .el-calendar .el-calendar-tabs ul.day-hours li {
        padding: 6px 12px;
        margin-right: 2px;
        margin-bottom: 10px;
        border: 1px solid var(--secondary);
    }

    .el-calendar .el-calendar-tabs ul.day-hours li .day-cell {
        font-size: 10px;
    }
}

@media (max-width: 768px) {
    .el-calendar .el-calendar-tabs {
        padding: 0;
    }

    .el-calendar .el-calendar-tabs ul.week-days {
        padding: 3px 15px 15px;
    }

    .el-calendar .el-calendar-tabs ul.week-days li {
        padding: 0;
    }

    .el-calendar .el-calendar-tabs ul.week-days li .week-day-name,
    .el-calendar .el-calendar-tabs ul.week-days li .week-day-date {
        font-size: 10px;
    }

    .el-calendar .el-calendar-tabs ul.day-hours {
        padding: 30px 0 15px;
    }

    .el-calendar .el-calendar-tabs ul.day-hours li {
        padding: 6px 9px;
        margin-right: 0;
        margin-bottom: 6px;
        border: 1px solid var(--secondary);
    }

    .el-calendar .el-calendar-tabs ul.day-hours li .day-cell {
        font-size: 10px;
        font-weight: bold;
    }

    .el-calendar.el-calendar-week {
        padding: 0 9px;
    }

    .el-calendar-slider .el-calendar-slider-prev,
    .el-calendar-slider .el-calendar-slider-next {
        top: 60px;
    }

    .el-calendar-slider .el-calendar-slider-prev.el-calendar-slider-prev,
    .el-calendar-slider .el-calendar-slider-next.el-calendar-slider-prev {
        left: -9px !important;
    }

    .el-calendar-slider .el-calendar-slider-prev.el-calendar-slider-next,
    .el-calendar-slider .el-calendar-slider-next.el-calendar-slider-next {
        right: -9px !important;
    }
}

/*------------------------------------
Popover
------------------------------------*/
.el-popover {
    display: block;
    position: relative;
    text-align: center;
}

.el-popover p {
    font-family: "Poppins", sans-serif;
}

.el-popover .button {
    z-index: 12;
    position: relative;
    text-align: center !important;
    margin-bottom: 9px !important;
}

.el-popover .el-popover-title {
    top: 75%;
    right: 0;
    left: 0;
    max-width: 144px;
    margin: auto;
    opacity: 0;
    display: inline-block;
    position: absolute;
    -webkit-transition: all 0.45s;
    transition: all 0.45s;
    -webkit-box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
    box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
}

.el-popover .el-popover-title span {
    min-height: 45px;
    z-index: 1;
    display: block;
    color: var(--base-0);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    position: relative;
    padding: 12px 3px;
    border-radius: 6px;
    background-color: #0a1032;
}

.el-popover .el-popover-title:before {
    top: 0;
    right: 0;
    left: 0;
    width: 30px;
    height: 30px;
    content: "";
    position: absolute;
    margin: auto;
    background-color: #0a1032;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.el-popover.active .el-popover-title {
    top: 100%;
    opacity: 1;
}

/*------------------------------------
Deadline
------------------------------------*/
.el-deadline {
    overflow: hidden;
    position: relative;
    padding-left: 30px;
    border-left: 1px solid #ccc;
}

/*------------------------------------
Date Picker
------------------------------------*/
.el-datepicker .bd-hide {
    display: none;
}

.el-datepicker .bd-main {
    background-color: #fff;
    border: 1px solid #000;
    padding: 5px;
    z-index: 9999;
    width: auto !important;
    margin: 0;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.el-datepicker .bd-calendar {
    width: 210px;
    padding: 0;
    margin: 0;
}

.el-datepicker .bd-calendar table {
    border: none;
    width: 210px;
}

.el-datepicker .bd-title {
    width: 210px;
    padding: 0;
    margin: 0;
}

.el-datepicker .bd-dropdown {
    display: inline-block;
    float: left;
    width: 75px;
}

.el-datepicker .bd-dropdown select {
    width: 100%;
    height: 30px;
    border: none;
    cursor: pointer;
}

.el-datepicker .bd-next,
.el-datepicker .bd-prev {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #fff;
    height: 30px;
    width: 30px;
    margin: 0;
    padding: 0;
    border: none;
    display: inline-block;
    float: left;
}

.el-datepicker .bd-table thead {
    background-color: #555555;
    color: #fff;
}

.el-datepicker .bd-table thead tr {
    height: 30px;
    cursor: context-menu;
}

.el-datepicker .bd-table thead tr th {
    text-align: center;
}

.el-datepicker .bd-table tbody tr td {
    border: none;
}

.el-datepicker .bd-empty-cell {
    width: 30px;
    height: 30px;
}

.el-datepicker .bd-table-days button {
    width: 30px;
    height: 30px;
    background-color: #f8f8f8;
    border: 0;
}

.el-datepicker .bd-table-days button:hover:enabled {
    color: red;
    font-weight: bold;
    background-color: #e7e7e7;
    cursor: pointer;
}

.el-datepicker .bd-table-days button:disabled {
    background-color: #eee;
}

.el-datepicker .bd-today {
    background-color: #dff0d8 !important;
    color: green;
}

.el-datepicker .bd-holiday {
    background-color: #fde8e8 !important;
}

.el-datepicker .bd-selected-day {
    color: red;
    font-weight: bold;
}

.el-datepicker .bd-goto-today {
    width: 210px;
    height: 30px;
    color: #fff;
    background-color: #555555;
    padding-top: 5px;
    cursor: pointer;
    text-align: center;
}

/*------------------------------------
Preloader
------------------------------------*/
.preloader {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    position: fixed;
    background: var(--base-0);
}

.preloader .preloader-inner {
    top: 50%;
    right: 50%;
    width: 100%;
    text-align: center;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/*
* Preloader - Style 1
*/
.preloader-1 {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.preloader-1:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 32px solid var(--primary);
    border-color: var(--primary) transparent var(--primary) transparent;
    -webkit-animation: preloader-1 1.2s infinite;
    animation: preloader-1 1.2s infinite;
}

/*
* Preloader - Style 2
*/
.preloader-2 {
    display: inline-block;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
}

.preloader-2 > div {
    display: inline-block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    background: var(--primary);
    -webkit-animation: preloader-2 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    animation: preloader-2 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

/*
* Preloader - Style 3
*/
.preloader-3 {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.preloader-3 div {
    -webkit-transform-origin: 40px 40px;
    transform-origin: 40px 40px;
    -webkit-animation: preloader-3 1.2s linear infinite;
    animation: preloader-3 1.2s linear infinite;
}

.preloader-3 div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    right: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: var(--primary);
}

.preloader-3 div:nth-child(1) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.preloader-3 div:nth-child(2) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.preloader-3 div:nth-child(3) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.preloader-3 div:nth-child(4) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.preloader-3 div:nth-child(5) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.preloader-3 div:nth-child(6) {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.preloader-3 div:nth-child(7) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.preloader-3 div:nth-child(8) {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.preloader-3 div:nth-child(9) {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.preloader-3 div:nth-child(10) {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.preloader-3 div:nth-child(11) {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

.preloader-3 div:nth-child(12) {
    -webkit-transform: rotate(330deg);
    transform: rotate(330deg);
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

/*
* Preloader - Style 4
*/
.preloader-4 {
    display: inline-block;
    width: 80px;
    height: 80px;
}

.preloader-4:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid var(--primary);
    border-color: var(--primary) transparent var(--primary) transparent;
    -webkit-animation: preloader-4 1.2s linear infinite;
    animation: preloader-4 1.2s linear infinite;
}

/*
* Preloader - Style 5
*/
.preloader-5 {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.preloader-5 div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid var(--primary);
    border-radius: 50%;
    -webkit-animation: preloader-5 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation: preloader-5 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--primary) transparent transparent transparent;
}

.preloader-5 div:nth-child(1) {
    -webkit-animation-delay: -0.45s;
    animation-delay: -0.45s;
}

.preloader-5 div:nth-child(2) {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.preloader-5 div:nth-child(3) {
    -webkit-animation-delay: -0.15s;
    animation-delay: -0.15s;
}

/*
* Preloader - Style 6
*/
.preloader-6 {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.preloader-6 div {
    -webkit-animation: preloader-6 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation: preloader-6 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    -webkit-transform-origin: 40px 40px;
    transform-origin: 40px 40px;
}

.preloader-6 div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    margin: -4px 0 0 -4px;
}

.preloader-6 div:nth-child(1) {
    -webkit-animation-delay: -0.036s;
    animation-delay: -0.036s;
}

.preloader-6 div:nth-child(1):after {
    top: 63px;
    right: 63px;
}

.preloader-6 div:nth-child(2) {
    -webkit-animation-delay: -0.072s;
    animation-delay: -0.072s;
}

.preloader-6 div:nth-child(2):after {
    top: 68px;
    right: 56px;
}

.preloader-6 div:nth-child(3) {
    -webkit-animation-delay: -0.108s;
    animation-delay: -0.108s;
}

.preloader-6 div:nth-child(3):after {
    top: 71px;
    right: 48px;
}

.preloader-6 div:nth-child(4) {
    -webkit-animation-delay: -0.144s;
    animation-delay: -0.144s;
}

.preloader-6 div:nth-child(4):after {
    top: 72px;
    right: 40px;
}

.preloader-6 div:nth-child(5) {
    -webkit-animation-delay: -0.18s;
    animation-delay: -0.18s;
}

.preloader-6 div:nth-child(5):after {
    top: 71px;
    right: 32px;
}

.preloader-6 div:nth-child(6) {
    -webkit-animation-delay: -0.216s;
    animation-delay: -0.216s;
}

.preloader-6 div:nth-child(6):after {
    top: 68px;
    right: 24px;
}

.preloader-6 div:nth-child(7) {
    -webkit-animation-delay: -0.252s;
    animation-delay: -0.252s;
}

.preloader-6 div:nth-child(7):after {
    top: 63px;
    right: 17px;
}

.preloader-6 div:nth-child(8) {
    -webkit-animation-delay: -0.288s;
    animation-delay: -0.288s;
}

.preloader-6 div:nth-child(8):after {
    top: 56px;
    right: 12px;
}

#form-calendar-time input {
    width: 100%;
    display: block;
    margin: 3px 9px;
    background-color: beige;
    border: 1px solid red;
}

/*------------------------------------
Custom Input Radio
------------------------------------*/
.el-radio-option {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}

.el-radio-option li {
    max-width: 100%;
    color: #7e8c9a;
    cursor: pointer;
    display: block;
    overflow: hidden;
    text-align: left;
    position: relative;
    margin: 0 auto 9px;
}

.el-radio-option li input {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    z-index: 1;
    position: absolute;
}

.el-radio-option li input:checked ~ label {
    color: var(--white);
    background-color: var(--secondary);
}

.el-radio-option.el-radio-option-text li {
    width: 300px;
    max-width: 100%;
    min-height: 54px;
}

.el-radio-option.el-radio-option-text li label {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 17px 24px;
    border-radius: 4px;
    border: 1px solid #d4deee;
}

.el-radio-option.el-radio-option-icon {
    width: 630px;
    margin: auto;
    max-width: 100%;
}

.el-radio-option.el-radio-option-icon li {
    width: 90px;
    height: 90px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    padding-top: 12px;
    border-radius: 4px;
    margin-right: 4px;
    margin-left: 4px;
    background-color: var(--base-0);
    border: 1px solid #d4deee;
}

.el-radio-option.el-radio-option-icon li .icon {
    width: 36px;
    height: 36px;
    z-index: 12;
    overflow: hidden;
    position: relative;
    text-align: center;
    border-radius: 50%;
    margin: auto;
}

.el-radio-option.el-radio-option-icon li label {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    position: absolute;
    padding-top: 60px;
}

.old-price {
    color: #f56c6c !important;
    text-decoration: line-through;
}

.new-price {
    padding-right: 6px;
    padding-left: 6px;
}

/*------------------------------------
Element: Wave
------------------------------------*/
.el-bg-wave {
    top: 0;
    left: 50%;
    width: 500px;
    height: 500px;
    opacity: 1;
    position: absolute;
    margin-top: -480px;
    margin-left: -250px;
    border-radius: 43%;
    -webkit-transform-origin: 50% 49%;
    transform-origin: 50% 49%;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
    -webkit-animation: drift 8000ms infinite linear;
    animation: drift 8000ms infinite linear;
}

/*------------------------------------
Element: Responsive Video
------------------------------------*/
.el-responsive-video {
    height: 0;
    overflow: hidden;
    position: relative;
    padding-top: 56.25%;
}

.el-responsive-video iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}

/*------------------------------------
    Sections Styles
------------------------------------*/
/*------------------------------------
    Hero
------------------------------------*/
.section-hero {
    width: 100%;
    height: 100vh;
    position: relative;
}

.section-hero + .section-features-1 {
    top: -60px;
    margin-bottom: -60px;
}

.section-hero .el-floating-shapes .shape {
    width: 99px;
    z-index: 9;
    padding-top: 100%;
    position: absolute;
}

.section-hero .el-floating-shapes .shape img {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
}

.section-hero .el-floating-shapes .shape.shape-1 {
    top: 20%;
    left: 15%;
}

.section-hero .el-floating-shapes .shape.shape-2 {
    top: 60%;
    left: 9%;
}

.section-hero .el-floating-shapes .shape.shape-3 {
    top: 30%;
    right: 15%;
}

.section-hero .el-floating-shapes .shape.shape-4 {
    top: 75%;
    right: 6%;
}

.section-hero .display-center {
    z-index: 15;
}

.section-hero .hero-content p {
    color: var(--text-color);
    font-size: 18px;
    margin-bottom: 30px;
}

.section-hero .hero-content h1 {
    font-size: 45px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
}

.section-hero .hero-content h1 span {
    z-index: 1;
    position: relative;
}

.section-hero .hero-content h1 .text-border {
    z-index: 1;
    display: inline-block;
    position: relative;
    padding-left: 6px;
    padding-right: 6px;
}

.section-hero .hero-content h1 .text-border:after {
    left: 6px;
    right: 6px;
    bottom: 12px;
    height: 12px;
    content: "";
    z-index: 0;
    opacity: 0.3;
    position: absolute;
    background-color: var(--primary);
}

.section-hero.section-hero-1 .hero-image {
    z-index: 3;
    position: relative;
}

.section-hero.section-hero-1 .hero-image.hero-image-1 {
    top: 27%;
    right: 11%;
    position: absolute;
}

.section-hero.section-hero-1 .hero-image.hero-image-1 img {
    width: 500px;
}

.section-hero.section-hero-4 {
    height: 100vh;
}

.section-hero.section-hero-4 .hero-content {
    padding-top: 80px;
}

.section-hero.section-hero-5 {
    background-color: var(--primary);
}

.section-hero.section-hero-5 .hero-content {
    text-align: center;
}

.section-hero.section-hero-5 .hero-content h1 {
    color: var(--base-0);
}

.section-hero .section-shape.shape-1 {
    top: -21% !important;
    left: -1%;
    width: 400px;
    position: absolute;
}

.section-hero .section-shape.shape-2 {
    top: -30%;
    right: 0;
    opacity: 0.3;
    width: 400px;
    position: absolute;
}

@media (min-width: 1300px) {
    .section-hero.section-hero-2 {
        min-height: 690px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1300px) {
    .section-hero.section-hero-2 {
        min-height: 570px !important;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .section-hero.section-hero-2 {
        min-height: 570px !important;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .section-hero.section-hero-2 {
        min-height: 510px;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .section-hero.section-hero-2 {
        min-height: 630px !important;
    }
}

@media (max-width: 1300px) {
    .section-hero.section-hero-2 .hero-image img {
        height: 190px;
    }
}

@media (max-width: 992px) {
    .section-hero .hero-content {
        padding-top: 60px;
    }

    .section-hero .hero-content p {
        font-size: 14px;
    }

    .section-hero .hero-content h1 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .section-hero .hero-content h2 {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .section-hero.section-hero-1 .hero-image {
        opacity: 0.6;
    }

    .section-hero.section-hero-1 .hero-image img {
        width: 390px !important;
    }

    .section-hero.section-hero-4.overlay-color .bg-color {
        opacity: 0.6 !important;
        background-color: var(--base-1) !important;
    }

    .section-hero.section-hero-4.overlay-image {
        background-position: top center !important;
    }

    .section-hero .el-floating-shapes {
        opacity: 0.45;
    }
}

@media (max-width: 768px) {
    .section-hero.section-hero-1 .hero-image {
        opacity: 0.15;
    }

    .section-hero.section-hero-1 .hero-image img {
        width: 390px !important;
        max-width: 90% !important;
    }

    .section-hero.section-hero-2 .hero-image img {
        bottom: 45px;
        width: 90%;
        height: auto;
    }

    .section-hero.section-hero-2 .display-spacing .hero-content {
        padding-top: 30px;
    }

    .section-hero.section-hero-2 .display-spacing .hero-content .button {
        width: 48%;
        margin-bottom: 7px;
    }

    .section-hero.section-hero-2 .display-spacing .hero-content .button.button-primary {
        width: 100%;
        display: block;
    }
}

.section-about-1 .about-image {
    height: 100%;
    position: relative;
}

.section-about-1 .about-image .image {
    top: 0;
    left: 15px;
    right: 15px;
    height: 100%;
    position: absolute;
}

.section-resume-1 ul {
    padding: 0;
    list-style: none;
}

.section-resume-1 ul li {
    display: block;
    position: relative;
}

.section-resume-1 ul li:after {
    top: -18px;
    left: 0;
    width: 1px;
    height: 100%;
    content: "";
    position: absolute;
    background-color: var(--base-1);
}

.section-resume-1 .resume-title {
    z-index: 3;
    line-height: 1;
    position: relative;
    padding-left: 35px;
}

.section-resume-1 .resume-title:before {
    top: 5px;
    left: -7px;
    width: 15px;
    height: 15px;
    display: block;
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: var(--primary);
}

.section-resume-1 .resume-item {
    position: relative;
}

.section-resume-1 .resume-item p {
    font-size: 12px;
    font-weight: 500;
    padding-left: 10px;
    margin-bottom: 0;
}

.section-resume-1 .resume-item .resume-body {
    padding: 20px 36px;
}

.section-resume-1 .resume-item .resume-head {
    position: relative;
    padding-top: 30px;
    padding-left: 90px;
    margin-bottom: 10px;
}

.section-resume-1 .resume-item .resume-head h5 {
    color: var(--base-1);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}

.section-resume-1 .resume-item .resume-head h6 {
    color: var(--base-1);
    font-size: 12px;
}

.section-resume-1 .resume-item .resume-head .el-icon {
    top: 26px;
    left: 24px;
    position: absolute;
}

.section-resume-1 .resume-item:before {
    top: 43px;
    left: 0;
    width: 25px;
    height: 1px;
    content: "";
    position: absolute;
    background-color: var(--base-1);
}

/*------------------------------------
    Section: Posts/Blog
------------------------------------*/
.section-blog .el-card, .section-blog .el-panel, .section-blog .section-features.section-features-1 .item, .section-features.section-features-1 .section-blog .item {
    text-align: left;
    padding: 30px 30px 20px;
    margin-bottom: 30px;
    background: #f8f8f8;
}

.section-blog .el-card .card-image, .section-blog .el-panel .card-image, .section-blog .section-features.section-features-1 .item .card-image, .section-features.section-features-1 .section-blog .item .card-image {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-top: 57%;
    margin-bottom: 25px;
    background-color: var(--primary);
}

.section-blog .el-card .card-image img, .section-blog .el-panel .card-image img, .section-blog .section-features.section-features-1 .item .card-image img, .section-features.section-features-1 .section-blog .item .card-image img {
    top: 0;
    right: 0;
    width: 100%;
    position: absolute;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

.section-blog .el-card .card-image:hover img, .section-blog .el-panel .card-image:hover img, .section-blog .section-features.section-features-1 .item .card-image:hover img, .section-features.section-features-1 .section-blog .item .card-image:hover img {
    opacity: 0.75;
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.section-blog .el-card .card-details, .section-blog .el-panel .card-details, .section-blog .section-features.section-features-1 .item .card-details, .section-features.section-features-1 .section-blog .item .card-details {
    position: relative;
}

.section-blog .el-card .card-details p, .section-blog .el-panel .card-details p, .section-blog .section-features.section-features-1 .item .card-details p, .section-features.section-features-1 .section-blog .item .card-details p {
    font-size: 12px;
    margin-bottom: 20px;
}

.section-blog .el-card .card-details h3, .section-blog .el-panel .card-details h3, .section-blog .section-features.section-features-1 .item .card-details h3, .section-features.section-features-1 .section-blog .item .card-details h3,
.section-blog .el-card .card-details h4,
.section-blog .el-panel .card-details h4,
.section-blog .section-features.section-features-1 .item .card-details h4,
.section-features.section-features-1 .section-blog .item .card-details h4 {
    font-size: 18px;
}

.section-blog .el-card .card-details h3 a, .section-blog .el-panel .card-details h3 a, .section-blog .section-features.section-features-1 .item .card-details h3 a, .section-features.section-features-1 .section-blog .item .card-details h3 a,
.section-blog .el-card .card-details h4 a,
.section-blog .el-panel .card-details h4 a,
.section-blog .section-features.section-features-1 .item .card-details h4 a,
.section-features.section-features-1 .section-blog .item .card-details h4 a {
    display: block;
}

.section-blog .el-card .card-details h3:hover, .section-blog .el-panel .card-details h3:hover, .section-blog .section-features.section-features-1 .item .card-details h3:hover, .section-features.section-features-1 .section-blog .item .card-details h3:hover,
.section-blog .el-card .card-details h4:hover,
.section-blog .el-panel .card-details h4:hover,
.section-blog .section-features.section-features-1 .item .card-details h4:hover,
.section-features.section-features-1 .section-blog .item .card-details h4:hover {
    color: var(--primary);
}

.section-blog .el-card .card-details .button, .section-blog .el-panel .card-details .button, .section-blog .section-features.section-features-1 .item .card-details .button, .section-features.section-features-1 .section-blog .item .card-details .button {
    height: 18px;
    padding: 0;
}

.section-blog .el-card .card-details .post-meta, .section-blog .el-panel .card-details .post-meta, .section-blog .section-features.section-features-1 .item .card-details .post-meta, .section-features.section-features-1 .section-blog .item .card-details .post-meta {
    right: 0;
    bottom: 3px;
    color: var(--text-color);
    position: absolute;
}

.section-blog .el-card .card-details .post-meta .fa, .section-blog .el-panel .card-details .post-meta .fa, .section-blog .section-features.section-features-1 .item .card-details .post-meta .fa, .section-features.section-features-1 .section-blog .item .card-details .post-meta .fa {
    padding-left: 3px;
}

.section-single-post .single-post .post-image {
    overflow: hidden;
    position: relative;
    padding-top: 54%;
    margin-bottom: 45px;
    border-radius: 9px;
    -webkit-box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
    box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
}

.section-single-post .single-post .post-image img {
    top: 0;
    right: 0;
    width: 100%;
    position: absolute;
}

.section-single-post .single-post .post-details .post-head {
    min-height: 90px;
    position: relative;
    padding-left: 90px;
    margin-bottom: 45px;
}

.section-single-post .single-post .post-details .post-head h1 {
    font-size: 27px;
}

.section-single-post .single-post .post-details .post-head .post-info {
    color: #333;
    font-size: 14px;
    margin-bottom: 12px;
}

.section-single-post .single-post .post-details .post-head .post-info .post-date {
    color: var(--secondary);
}

.section-single-post .single-post .post-details .post-head .post-info .post-author {
    color: var(--secondary);
}

.section-single-post .single-post .post-details .post-head .post-info .post-author:hover {
    color: var(--primary);
}

.section-single-post .single-post .post-details .post-head .post-author-image {
    top: 0;
    left: 0;
    width: 75px;
    height: 75px;
    position: absolute;
}

.section-single-post .single-post .post-details .post-head .post-author-image img {
    left: 0;
    bottom: 0;
    width: 75px;
    height: 75px;
    overflow: hidden;
    position: absolute;
    border-radius: 50%;
}

.section-single-post .single-post .post-details .post-body p {
    color: #333;
    font-size: 15px;
}

.section-single-post .single-post .post-details .post-body p a {
    color: var(--primary);
}

.section-single-post .single-post .post-details .post-body .post-tags {
    display: block;
    color: var(--text-color);
    padding: 30px 0 30px;
}

.section-single-post .single-post .post-details .post-body .post-tags > span {
    color: var(--black);
}

.section-single-post .single-post .post-details .post-body .post-tags ul {
    list-style: none;
    display: inline-block;
    padding: 0 0 0 15px;
}

.section-single-post .single-post .post-details .post-body .post-tags ul li {
    color: var(--secondary);
    display: inline-block;
    font-size: 14px;
    position: relative;
    margin-left: 6px;
    margin-bottom: 3px;
}

.section-single-post .single-post .post-details .post-body .post-tags ul li a {
    display: block;
    padding-left: 12px;
}

.section-single-post .single-post .post-details .post-body .post-tags ul li:before {
    top: 2px;
    left: 1px;
    content: "#";
    font-size: 12px;
    position: absolute;
}

.section-single-post .single-post .post-details .post-body .post-tags ul li:hover {
    color: var(--primary);
}

@media (max-width: 992px) {
    .page-blog .el-pagination {
        float: inherit;
        margin: 15px auto 45px;
        text-align: center !important;
    }

    .section-blog .el-card .card-details h3, .section-blog .el-panel .card-details h3, .section-blog .section-features.section-features-1 .item .card-details h3, .section-features.section-features-1 .section-blog .item .card-details h3,
    .section-blog .el-card .card-details h4,
    .section-blog .el-panel .card-details h4,
    .section-blog .section-features.section-features-1 .item .card-details h4,
    .section-features.section-features-1 .section-blog .item .card-details h4 {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .section-single-post .single-post .post-details .post-head {
        padding-left: 69px;
    }

    .section-single-post .single-post .post-details .post-head h1 {
        font-size: 16px;
    }

    .section-single-post .single-post .post-details .post-head .post-info {
        font-size: 12px;
    }

    .section-single-post .single-post .post-details .post-head .post-info .post-date {
        display: block;
    }

    .section-single-post .single-post .post-details .post-head .post-author-image {
        width: 60px;
    }

    .section-single-post .single-post .post-details .post-head .post-author-image img {
        bottom: 6px;
        width: 57px;
        height: 57px;
    }

    .section-single-post .single-post .post-details .post-body p {
        font-size: 0.9em;
    }

    .section-single-post .single-post .post-details .post-body .post-tags {
        font-size: 12px;
    }

    .section-single-post .single-post .post-details .post-body .post-tags ul li {
        font-size: 12px;
    }
}

/*------------------------------------
testimonial
------------------------------------*/
/*
* testimonial
*/
.section-testimonial .slick-dots {
    top: 0;
    right: 15px;
    bottom: inherit;
    position: absolute;
    text-align: right;
    display: inline-block;
}

.section-testimonial .testimonial-item {
    font-size: 16px;
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding: 30px;
    margin: 0 15px 30px;
    border: 1px solid var(--base-1);
    background-color: var(--base-0);
}

.section-testimonial .testimonial-item p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.section-testimonial .testimonial-item .type {
    font-size: 16px;
    font-weight: 700;
    position: relative;
    display: inline-block;
    margin: 0 15px 30px;
}

.section-testimonial .testimonial-item .type span {
    z-index: 6;
    position: relative;
}

.section-testimonial .testimonial-item .type:after {
    left: -16px;
    bottom: -6px;
    width: 36px;
    height: 36px;
    opacity: 0.75;
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: var(--primary);
}

.section-testimonial .testimonial-item .author {
    height: 50px;
    position: relative;
    padding-left: 65px;
}

.section-testimonial .testimonial-item .author h4 {
    font-size: 14px;
    margin-bottom: 6px;
}

.section-testimonial .testimonial-item .author h5 {
    color: var(--base-1);
    font-size: 12px;
    margin-bottom: 0;
}

.section-testimonial .testimonial-item .author img {
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
}

.section-testimonial.section-testimonial-2 .item .author h4 {
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--base-1) !important;
}

.section-testimonial.section-testimonial-2 .item .author h5 {
    color: var(--text-color) !important;
}

.section-testimonial .lets-work {
    text-align: center;
    padding-top: 90px;
    position: relative;
}

.section-testimonial .lets-work .button {
    top: 0px;
}

@media (max-width: 992px) {
    .section-testimonial-1 .shape-2 {
        display: none;
    }
}

@media (max-width: 768px) {
    .section-testimonial-1 .testimonial-item {
        padding: 20px;
    }

    .section-testimonial-1 .testimonial-item p {
        font-size: 12px;
    }
}

/*------------------------------------
    Section
------------------------------------*/
.section {
    display: block;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.section .display-cente {
    z-index: 12;
}

.section .display-spacing {
    z-index: 12;
    position: relative;
}

.section .section-shape {
    z-index: 1;
}

.section .section-shape.shape-1 {
    top: -6%;
    left: -1%;
    width: 400px;
    position: absolute;
}

.section .section-shape.shape-2 {
    top: -30%;
    right: 0;
    width: 400px;
    opacity: 0.3;
    position: absolute;
}

.section .section-shape.shape-3 {
    top: 0;
    left: 0;
    width: 50%;
    position: absolute;
}

.section.section-wave.section-wave-1:after {
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 20%;
    content: "";
    position: absolute;
    background: no-repeat url("../images/shapes/wave-1.png") bottom center/cover;
}

.section.section-wave.section-wave-2:after {
    right: 0;
    bottom: -90px;
    width: 100%;
    height: 20%;
    content: "";
    position: absolute;
    background: no-repeat url("../images/shapes/wave-2.png") bottom center/cover;
}

.section.section-wave.section-wave-3:after {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 300px;
    content: "";
    position: absolute;
    background: no-repeat url("../images/shapes/wave-3.png") bottom center/cover;
}

.section.section-wave.section-wave-6:after {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    content: "";
    position: absolute;
    background: repeat-x url("../images/shapes/wave-6.png") bottom center/contain;
}

.section .section-row {
    margin-right: -30px;
    margin-left: -30px;
}

.section .section-row > * {
    padding-right: 30px;
    padding-left: 30px;
}

.section .section-row .section-sidebar {
    overflow: hidden;
    position: relative;
}

.section .section-row .section-sidebar .sidebar-inner {
    padding: 30px;
    text-align: left !important;
    background-color: var(--base-0);
}

.section .section-row .section-sidebar .sidenav-filter-close,
.section .section-row .section-sidebar .sidenav-sorting-close {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
}

.section .section-row .section-content {
    border-left: 1px solid #eee;
}

.section .section-row .section-content .section-navbar {
    margin-bottom: 9px;
}

.section .section-row .section-content .section-navbar-mobile {
    display: none;
    margin-bottom: 15px;
}

.section .section-row .section-content .section-navbar-mobile .button .fa {
    top: 2px;
    right: -6px;
    position: relative;
}

.section .section-row .section-content .section-navbar-sidebar {
    display: none;
}

.section .section-row .section-content .section-navbar-sidebar .inner {
    width: 0;
    height: 0;
    -webkit-transition: all 450ms;
    transition: all 450ms;
}

.section .section-row .section-content .section-navbar-sidebar .inner .el-pagination li:not(.next) {
    background-color: var(--gray);
}

.section .section-row .section-content .section-navbar-sidebar .inner .el-pagination li.next {
    color: var(--primary);
}

.section .section-row .section-content .section-navbar-sidebar .inner .el-pagination li.active {
    background-color: var(--primary);
}

.section .section-row .section-content .section-navbar-sidebar .inner .el-sortination {
    padding-bottom: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--gray);
}

.section .section-row .section-content .section-navbar-sidebar .inner .el-sortination p {
    color: var(--primary);
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

.section .section-row .section-content .section-navbar-sidebar .inner .el-sortination li {
    font-size: 10px;
}

.section .section-row .section-content .section-navbar-sidebar .sidenav-mobile-close {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
}

.section .section-fluid {
    padding-right: 45px;
    padding-left: 45px;
}

@media (max-width: 1400px) {
    .section .section-row {
        margin-right: -15px;
        margin-left: -15px;
    }

    .section .section-row > * {
        padding-right: 15px;
        padding-left: 15px;
    }

    .section .section-row .section-sidebar {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 24% !important;
        flex: 0 0 24% !important;
        max-width: 24% !important;
    }

    .section .section-row .section-content {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 76% !important;
        flex: 0 0 76% !important;
        max-width: 76% !important;
    }

    .section .section-fluid {
        padding-right: 30px;
        padding-left: 30px;
    }
}

@media (max-width: 1300px) {
    .section .section-row {
        margin-right: -15px;
        margin-left: -15px;
    }

    .section .section-row > * {
        padding-right: 15px;
        padding-left: 15px;
    }

    .section .section-row .section-sidebar .sidebar-inner {
        padding: 30px 25px;
    }
}

@media (max-width: 1200px) {
    .section .section-row .section-sidebar .sidebar-inner {
        padding: 30px 25px;
    }

    .section .section-fluid {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (max-width: 992px) {
    .section .section-row .section-sidebar {
        bottom: -100%;
        opacity: 0;
        position: absolute;
        visibility: hidden;
        -webkit-transition: all 0.45s;
        transition: all 0.45s;
    }

    .section .section-row .section-sidebar .sidenav-filter-close,
    .section .section-row .section-sidebar .sidenav-sorting-close {
        display: block;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .section .section-row .section-sidebar.active {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 60%;
        opacity: 1;
        visibility: visible;
        display: block;
        z-index: 99999999;
        position: fixed;
        overflow-y: scroll;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .section .section-row .section-sidebar.active .button-primary {
        right: 0;
        bottom: 0;
        width: 100%;
        height: 51px !important;
        position: fixed;
        border-radius: 0 !important;
    }

    .section .section-row .section-sidebar .sidebar-inner {
        padding: 30px 25px;
    }

    .section .section-row .section-content {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .section .section-row .section-content .section-navbar {
        display: none !important;
    }

    .section .section-row .section-content .section-navbar-mobile {
        display: block !important;
    }

    .section .section-row .section-content .section-navbar-sidebar.active {
        display: block;
    }

    .section .section-row .section-content .section-navbar-sidebar.active .inner {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 60%;
        opacity: 1;
        visibility: visible;
        display: block;
        z-index: 9999;
        position: fixed;
        padding: 30px;
        overflow-y: scroll;
        margin: 0 !important;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        -webkit-transition: all 0.45s;
        transition: all 0.45s;
    }

    .section .section-fluid {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (max-width: 992px) {
    .section .section-navbar p {
        text-align: center !important;
    }

    .section .section-navbar .el-pagination {
        float: inherit !important;
        text-align: center !important;
        margin: auto;
    }

    .section .section-navbar .el-sortination {
        text-align: center !important;
        margin-bottom: 20px;
    }
}

/*------------------------------------
    Section: Courses
------------------------------------*/
.section-courses .cards {
    margin-bottom: -3px;
}

.section-courses .cards .el-card, .section-courses .cards .el-panel, .section-courses .cards .section-features.section-features-1 .item, .section-features.section-features-1 .section-courses .cards .item {
    margin: auto;
    padding: 30px;
    text-align: left;
    border-radius: 12px !important;
    -webkit-box-shadow: 0 3px 6px 0 rgba(231, 234, 243, 0.6) !important;
    box-shadow: 0 3px 6px 0 rgba(231, 234, 243, 0.6) !important;
}

.section-courses .cards .el-card .card-image, .section-courses .cards .el-panel .card-image, .section-courses .cards .section-features.section-features-1 .item .card-image, .section-features.section-features-1 .section-courses .cards .item .card-image {
    width: 150px;
}

.section-courses .cards .el-card .card-image img, .section-courses .cards .el-panel .card-image img, .section-courses .cards .section-features.section-features-1 .item .card-image img, .section-features.section-features-1 .section-courses .cards .item .card-image img {
    width: 60px;
}

.section-courses .cards .el-card .card-links, .section-courses .cards .el-panel .card-links, .section-courses .cards .section-features.section-features-1 .item .card-links, .section-features.section-features-1 .section-courses .cards .item .card-links {
    width: 240px;
    text-align: right;
}

.section-courses .cards .el-card .card-title, .section-courses .cards .el-panel .card-title, .section-courses .cards .section-features.section-features-1 .item .card-title, .section-features.section-features-1 .section-courses .cards .item .card-title {
    width: 300px;
    text-align: left;
}

.section-courses .cards .el-card .card-title h3, .section-courses .cards .el-panel .card-title h3, .section-courses .cards .section-features.section-features-1 .item .card-title h3, .section-features.section-features-1 .section-courses .cards .item .card-title h3,
.section-courses .cards .el-card .card-title h4,
.section-courses .cards .el-panel .card-title h4,
.section-courses .cards .section-features.section-features-1 .item .card-title h4,
.section-features.section-features-1 .section-courses .cards .item .card-title h4 {
    margin: 0;
    font-size: 16px;
    padding-top: 3px;
}

.section-courses .cards .el-card .card-title h3 .subtitle, .section-courses .cards .el-panel .card-title h3 .subtitle, .section-courses .cards .section-features.section-features-1 .item .card-title h3 .subtitle, .section-features.section-features-1 .section-courses .cards .item .card-title h3 .subtitle,
.section-courses .cards .el-card .card-title h4 .subtitle,
.section-courses .cards .el-panel .card-title h4 .subtitle,
.section-courses .cards .section-features.section-features-1 .item .card-title h4 .subtitle,
.section-features.section-features-1 .section-courses .cards .item .card-title h4 .subtitle {
    color: var(--text-color);
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding-top: 9px;
}

.section-courses .cards .el-card .card-body p, .section-courses .cards .el-panel .card-body p, .section-courses .cards .section-features.section-features-1 .item .card-body p, .section-features.section-features-1 .section-courses .cards .item .card-body p {
    margin: 0;
}

.section-courses .cards .el-card:not(:last-child), .section-courses .cards .el-panel:not(:last-child), .section-courses .cards .section-features.section-features-1 .item:not(:last-child), .section-features.section-features-1 .section-courses .cards .item:not(:last-child) {
    margin-bottom: 3px;
    border-bottom: 6px solid rgba(231, 234, 243, 0.6);
}

.section-courses .cards .el-card:hover, .section-courses .cards .el-panel:hover, .section-courses .cards .section-features.section-features-1 .item:hover, .section-features.section-features-1 .section-courses .cards .item:hover {
    -webkit-box-shadow: 0 3px 1px 0 var(--primary) !important;
    box-shadow: 0 3px 1px 0 var(--primary) !important;
    border-bottom-color: transparent;
}

.section-courses .cards .el-card:hover .button:not(.disable), .section-courses .cards .el-panel:hover .button:not(.disable), .section-courses .cards .section-features.section-features-1 .item:hover .button:not(.disable), .section-features.section-features-1 .section-courses .cards .item:hover .button:not(.disable) {
    color: var(--base-0);
    background-color: var(--primary);
}

.section-courses-list .el-card, .section-courses-list .el-panel, .section-courses-list .section-features.section-features-1 .item, .section-features.section-features-1 .section-courses-list .item {
    max-width: 100% !important;
}

.section-course .course {
    margin-bottom: 18px;
    border-bottom: 1px solid var(--gray);
}

.section-course .course h1 {
    font-size: 21px;
}

.section-course .course-image {
    overflow: hidden;
    position: relative;
    padding-top: 56%;
    background-color: var(--primary);
}

.section-course .course-image img {
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    position: absolute;
}

@media (max-width: 992px) {
    .section-courses .cards .el-card, .section-courses .cards .el-panel, .section-courses .cards .section-features.section-features-1 .item, .section-features.section-features-1 .section-courses .cards .item {
        padding-right: 30px;
        padding-left: 30px;
    }

    .section-courses .cards .el-card .card-body, .section-courses .cards .el-panel .card-body, .section-courses .cards .section-features.section-features-1 .item .card-body, .section-features.section-features-1 .section-courses .cards .item .card-body {
        display: none !important;
    }

    .section-courses .cards .el-card .card-title, .section-courses .cards .el-panel .card-title, .section-courses .cards .section-features.section-features-1 .item .card-title, .section-features.section-features-1 .section-courses .cards .item .card-title {
        width: 100%;
    }

    .section-courses .cards .el-card .card-title h4,
    .section-courses .cards .el-panel .card-title h4,
    .section-courses .cards .section-features.section-features-1 .item .card-title h4,
    .section-features.section-features-1 .section-courses .cards .item .card-title h4 {
        font-size: 18px;
    }

    .section-courses .cards .el-card .card-links, .section-courses .cards .el-panel .card-links, .section-courses .cards .section-features.section-features-1 .item .card-links, .section-features.section-features-1 .section-courses .cards .item .card-links {
        width: 150px;
    }
}

@media (max-width: 768px) {
    .section-courses .cards .el-card, .section-courses .cards .el-panel, .section-courses .cards .section-features.section-features-1 .item, .section-features.section-features-1 .section-courses .cards .item {
        padding-right: 6px;
        padding-left: 15px;
    }

    .section-courses .cards .el-card .card-title h4,
    .section-courses .cards .el-panel .card-title h4,
    .section-courses .cards .section-features.section-features-1 .item .card-title h4,
    .section-features.section-features-1 .section-courses .cards .item .card-title h4 {
        font-size: 16px;
    }

    .section-courses .cards .el-card .card-image, .section-courses .cards .el-panel .card-image, .section-courses .cards .section-features.section-features-1 .item .card-image, .section-features.section-features-1 .section-courses .cards .item .card-image {
        display: none !important;
    }

    .section-courses .cards .el-card .card-links, .section-courses .cards .el-panel .card-links, .section-courses .cards .section-features.section-features-1 .item .card-links, .section-features.section-features-1 .section-courses .cards .item .card-links {
        width: 120px;
    }

    .section-courses .cards .el-card .card-links .button, .section-courses .cards .el-panel .card-links .button, .section-courses .cards .section-features.section-features-1 .item .card-links .button, .section-features.section-features-1 .section-courses .cards .item .card-links .button {
        height: 36px;
        font-size: 12px;
        padding: 9px 18px;
    }
}

/*------------------------------------
    Section: Services
------------------------------------*/
.section-services {
    color: var(--text-color);
}

.section-services h3,
.section-services h4 {
    height: 30px;
    color: var(--base-1);
    font-size: 16px;
    margin-bottom: 30px;
}

.section-services .item {
    margin-bottom: 30px;
}

.section-services .item .name {
    font-size: 12px;
}

.section-services .item .name:not(.name-en) {
    display: none;
}

.section-services .item .image img {
    width: 30px;
    margin-right: 15px;
    border-radius: 3px;
}

.section-services.section-services-2 {
    color: var(--base-0);
}

.section-services.section-services-2 h3,
.section-services.section-services-2 h4 {
    color: var(--base-0);
}

/*------------------------------------
    Section: Teachers
------------------------------------*/
.section-teachers .card {
    margin-bottom: 0 !important;
}

.section-teachers .card .inner .details {
    padding: 0 20px;
}

.section-teachers .card .inner .details h3 {
    line-height: 1;
    font-size: 16px;
    margin-bottom: 15px;
}

.section-teacher .teacher-video {
    border: 0 !important;
    padding: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.section-teacher .teacher-stats {
    padding-top: 45px;
    margin-top: 45px;
    border-top: 1px solid var(--gray);
}

.section-teacher .teacher-stats .item {
    padding-left: 45px;
    margin-bottom: 45px;
}

.section-teacher .teacher-stats .item .title {
    font-size: 14px;
    margin-bottom: 9px;
}

.section-teacher .teacher-stats .item .subtitle {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 300;
}

.section-teacher .teacher-stats .item .stats-icon {
    width: 36px;
    margin-bottom: 12px;
}

.section-teacher .teacher-stats.teacher-stats-2 {
    overflow: 0 !important;
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}

.section-teacher .teacher-stats.teacher-stats-2 .item {
    padding-right: 0;
}

.section-teacher .teacher-profile {
    position: relative;
    margin: 45px 0;
}

.section-teacher .teacher-profile .avatar {
    top: 0;
    left: 0;
    width: 120px;
    width: 120px;
    overflow: hidden;
    position: absolute;
    border-radius: 50%;
}

.section-teacher .teacher-profile .summary {
    position: relative;
    padding-left: 180px;
}

.section-teacher .teacher-profile .summary h1 {
    color: #32335a;
    font-size: 21px;
    font-weight: 700;
    padding-top: 20px;
    margin-bottom: 20px;
}

.section-teacher .teacher-profile .summary .el-tag {
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .section-teacher .teacher-stats .item .title {
        font-size: 12px;
    }

    .section-teacher .teacher-stats .item .subtitle {
        font-size: 12px;
    }
}

/*------------------------------------
    Section: Teachers-List
------------------------------------*/
.section-teachers-list.section-teachers-list-1 .el-card, .section-teachers-list.section-teachers-list-1 .el-panel, .section-teachers-list.section-teachers-list-1 .section-features.section-features-1 .item, .section-features.section-features-1 .section-teachers-list.section-teachers-list-1 .item {
    margin-bottom: 15px !important;
}

.section-teachers-list.section-teachers-list-2 .container {
    padding-left: 90px;
}

/*------------------------------------
    Section: Testimonial
------------------------------------*/
.section-testimonial {
    background: top center url("../images/patterns/1.jpg")/cover;
}

.section-testimonial .item .content {
    padding: 30px;
    position: relative;
    border-radius: 15px;
    background-color: var(--base-0);
}

.section-testimonial .item .content p {
    text-align: left;
    margin: 0;
}

.section-testimonial .item .content:after {
    left: 20px;
    bottom: -3px;
    width: 30px;
    height: 30px;
    content: "";
    display: block;
    position: absolute;
    background-color: var(--base-0);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.section-testimonial .item .author {
    top: 30px;
    left: 15px;
    height: 75px;
    position: relative;
}

.section-testimonial .item .author h4,
.section-testimonial .item .author h5 {
    left: 60px;
    color: var(--base-0);
    opacity: 0.87;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    position: absolute;
}

.section-testimonial .item .author h4 {
    top: 4px;
    font-size: 14px;
    margin-bottom: 12px;
}

.section-testimonial .item .author h5 {
    top: 27px;
    opacity: 0.6;
    font-size: 12px;
}

.section-testimonial .item .author .avatar {
    width: 45px;
    height: 45px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid var(--base-0);
}

.section-testimonial .bg-color {
    opacity: 0.9;
}

.section-testimonial .swiper-pagination-bullet {
    background-color: var(--gray);
}

.section-testimonial:after {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    content: "";
    position: absolute;
    border-radius: 6px;
    background-color: var(--primary);
}

/*------------------------------------
    Section: Departements
------------------------------------*/
/*------------------------------------
    Section: Auth
------------------------------------*/
.section-auth {
    min-height: 100vh;
    position: relative;
}

.section-auth .auth-form {
    width: 504px;
    max-width: 100%;
    min-height: 100vh;
    z-index: 15;
    position: relative;
    background-color: var(--base-0);
}

.section-auth .auth-form .form-3 {
    padding: 0 30px;
    margin: auto;
}

.section-auth .auth-image {
    top: 0;
    right: 0;
    width: 67%;
    height: 100vh;
    position: absolute;
}

@media (max-width: 992px) {
    .page-auth .el-heading {
        margin-bottom: 45px;
    }

    .page-auth .display-spacing-plus {
        padding-top: 75px !important;
    }

    .section-auth .auth-form {
        width: 100%;
        margin: auto;
    }

    .section-auth .auth-form .form-3 {
        padding: 0 0px;
    }

    .section-auth .auth-image {
        display: none;
    }
}

.section-blog .posts {
    z-index: 1;
    position: relative;
}

.section-blog .posts .row {
    z-index: 15;
    position: relative;
}

.select2 {
    width: 100% !important;
}

/*------------------------------------
    Section: Stepper
------------------------------------*/
.section-stepper .el-stepper .steps {
    display: none;
}

.section-stepper .el-stepper .actions {
    padding-top: 60px;
}

.section-stepper .el-stepper .actions ul {
    right: 0;
    left: 0;
    bottom: 15px;
    text-align: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.section-stepper .el-stepper .actions ul li a {
    width: 190px;
    height: 54px;
    color: var(--base-0);
    line-height: 54px;
    text-align: center;
    display: inline-block;
    padding-right: 45px;
    padding-left: 45px;
    border-radius: 36px;
    background-color: var(--primary);
}

.section-stepper .el-stepper .actions ul li:first-child {
    display: none;
}

.section-stepper .el-stepper .content .stepper-head {
    display: none;
}

.section-stepper .el-stepper .content .stepper-body {
    text-align: center;
}

.section-stepper .el-stepper .content .stepper-body h3 {
    margin: 60px 0 75px;
}

.section-stepper .el-stepper .content .stepper-body h3 small {
    color: var(--text-color);
}

.section-stepper .el-stepper .content .stepper-body .form-item {
    width: 330px;
    max-width: 100%;
    margin: auto;
}

.section-stepper .el-stepper .el-stepper-error {
    color: red;
    height: 24px;
    display: block;
    font-weight: bold;
    text-align: center;
    padding-top: 30px;
}

@media (max-width: 992px) {
    .section-stepper .el-stepper .content .stepper-body h3 {
        top: -15px;
        font-size: 16px;
        position: relative;
    }
}

/*------------------------------------
    Pages
------------------------------------*/
.page .default-content {
    margin-bottom: 30px;
}

.page .default-content h1 {
    font-size: 33px;
}

.page .default-content h2 {
    font-size: 27px;
}

.page .default-content p {
    color: #333;
    font-size: 15px;
}

.page .default-content img {
    display: block;
    margin: 0 auto 15px;
}

.page-blog .el-pagination {
    margin-bottom: 15px !important;
}

.page-content {
    max-width: 992px;
    margin: auto;
}

.page-content ul {
    padding: 0;
    list-style: none;
}

.page-teachers .display-spacing {
    padding-bottom: 0 !important;
}

@media (max-width: 768px) {
    .page .default-content p {
        color: #333;
        font-size: 12px;
    }
}

/*------------------------------------
    How It Works
------------------------------------*/
.section-how-it-works {
    border-top: 1px solid var(--gray);
}

/*------------------------------------
    Dashboard
------------------------------------*/
.section-dashboard {
    min-height: 100vh;
}

.section-dashboard .el-avatar {
    top: 12px;
    left: 0;
    width: 102px;
    height: 102px;
    position: relative;
    border-radius: 50%;
    background-color: var(--gray);
}

.section-dashboard .el-avatar .avatar-upload {
    width: 100%;
    height: 100%;
    position: relative;
}

.section-dashboard .el-avatar .avatar-upload .avatar-edit {
    top: -3px;
    left: -3px;
    z-index: 1;
    position: absolute;
}

.section-dashboard .el-avatar .avatar-upload .avatar-edit input {
    display: none;
}

.section-dashboard .el-avatar .avatar-upload .avatar-edit input + label {
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: inline-block;
    font-weight: normal;
    margin-bottom: 0;
    border-radius: 100%;
    border: 1px solid #eee;
    background: var(--base-0);
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.section-dashboard .el-avatar .avatar-upload .avatar-edit input + label:hover {
    border-color: var(--primary);
}

.section-dashboard .el-avatar .avatar-upload .avatar-edit input + label:hover:after {
    color: var(--base-1);
}

.section-dashboard .el-avatar .avatar-upload .avatar-edit input + label:after {
    top: 10px;
    right: 0;
    left: 0;
    color: var(--text-color);
    content: "\f040";
    text-align: center;
    font-family: "FontAwesome";
    position: absolute;
    margin: auto;
}

.section-dashboard .el-avatar .avatar-upload .avatar-preview {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 100%;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.section-dashboard .el-avatar .avatar-upload .avatar-preview > div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.section-dashboard .admin-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.section-dashboard .admin-row .admin-sidebar {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 18%;
    flex: 0 0 18%;
    height: 100vh;
    max-width: 18%;
    padding-top: 90px;
    background-color: #000031;
}

.section-dashboard .admin-row .admin-sidebar .panel {
    padding: 0 30px;
}

.section-dashboard .admin-row .admin-sidebar .panel .panel-body .el-list-icon li {
    color: #999;
}

.section-dashboard .admin-row .admin-sidebar .panel .panel-body .el-list-icon li.active {
    color: var(--primary);
}

.section-dashboard .admin-row .admin-content {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 82%;
    flex: 0 0 82%;
    max-width: 82%;
    padding-top: 82px;
}

@media (max-width: 992px) {
    .section-dashboard .el-avatar {
        margin: auto;
        margin-bottom: 30px;
    }
}

/*------------------------------------
    Demo
------------------------------------*/
.section-demo-hero .hero-image img {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

@media (min-width: 1200px) {
    .section-demo-hero .hero-image img {
        width: 600px !important;
    }
}

/*------------------------------------
    Section: Contact
------------------------------------*/
.section-contact-1 .contact-image {
    height: 100%;
    position: relative;
}

.section-contact-1 .contact-image .image {
    top: 0;
    left: 15px;
    right: 15px;
    height: 100%;
    position: absolute;
}

/*------------------------------------
    Section: Features
------------------------------------*/
.section-features.section-features-1 .item {
    text-align: center;
    position: relative;
    padding: 33px 0;
    margin-bottom: 9px;
}

.section-features.section-features-1 .item h3 {
    color: var(--text-color);
    font-size: 14px;
}

.section-features.section-features-1 .item img {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.section-features.section-features-2 .item {
    text-align: center;
    position: relative;
    margin-bottom: 60px;
}

.section-features.section-features-2 .item p {
    font-size: 12px;
    max-width: 270px;
    text-align: center;
    margin: 0 auto 15px;
}

.section-features.section-features-2 .item h3,
.section-features.section-features-2 .item h4 {
    font-size: 16px;
    margin-bottom: 15px;
}

.section-features.section-features-2 .item img {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
}

@media (max-width: 992px) {
    .section-features.section-features-1 {
        padding-top: 30px !important;
    }
}

/*------------------------------------
    Section: Service
------------------------------------*/
.section-service .service-wrap {
    position: relative;
    padding-top: 100%;
}

.section-service .service-wrap .service-item {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 30px;
    border: 1px solid #000;
}

.section-service .service-wrap .service-item p {
    font-size: 12px;
}

.section-service .service-wrap .service-item h3 {
    display: block;
    font-size: 14px;
    font-weight: 700;
    padding-top: 55px;
    margin-bottom: 20px;
}

.section-service .service-wrap .service-item .el-icon-icon {
    top: 30px;
    left: 30px;
    width: 36px;
    height: 36px;
    font-size: 30px;
    position: absolute;
    text-align: center;
}

.section-service .service-wrap .service-item:hover {
    background-color: var(--primary);
}

.section-service-3 .service-wrap .service-item {
    background-color: var(--primary);
}

@media (max-width: 768px) {
    .section-service .service-wrap .service-item {
        padding: 10px 20px 0;
    }

    .section-service .service-wrap .service-item h3 {
        margin-bottom: 10px;
    }

    .section-service .service-wrap .service-item .el-icon-icon {
        top: 15px;
        left: 15px;
    }
}

@media (max-width: 576px) {
    .section-service .service-wrap {
        padding-top: 220px;
    }

    .section-service .service-wrap .service-item {
        padding: 30px 30px 0;
    }

    .section-service .service-wrap .service-item h3 {
        margin-bottom: 10px;
    }

    .section-service .service-wrap .service-item .el-icon-icon {
        top: 30px;
        left: 30px;
    }
}

/*------------------------------------
    Section: Portfolio
------------------------------------*/
.section-portfolio-1 {
    background-color: var(--base-0);
}

.section-portfolio-1 .portfolio-item {
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}

.section-portfolio-1 .portfolio-item .portfolio-card {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-top: 100%;
}

.section-portfolio-1 .portfolio-item .portfolio-card .image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all 600ms;
    transition: all 600ms;
}

.section-portfolio-1 .portfolio-item .portfolio-card .content {
    top: 60%;
    left: 50%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    text-align: center;
    -webkit-transition: all 450ms;
    transition: all 450ms;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.section-portfolio-1 .portfolio-item .portfolio-card .content h3 {
    color: var(--base-1);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
}

.section-portfolio-1 .portfolio-item .portfolio-card .content span {
    color: var(--base-1);
    display: block;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.section-portfolio-1 .portfolio-item .portfolio-card .content .button {
    opacity: 0;
    margin-bottom: 30px;
    -webkit-transform: translate(0, -60px);
    transform: translate(0, -60px);
    -webkit-transition: all 450ms;
    transition: all 450ms;
}

.section-portfolio-1 .portfolio-item .portfolio-card .content .button span {
    top: 4px;
    left: 1px;
    font-size: 14px;
    position: relative;
}

.section-portfolio-1 .portfolio-item:hover .image {
    opacity: 0;
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}

.section-portfolio-1 .portfolio-item:hover .content {
    top: 50%;
    opacity: 1;
    visibility: visible;
}

.section-portfolio-1 .portfolio-item:hover .content .button {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

@media (max-width: 768px) {
    .section-portfolio-1 .el-tabs-links li {
        font-size: 10px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .section-portfolio-1 .row-center {
        margin-left: -6px !important;
        margin-right: -6px !important;
        margin-bottom: -12px !important;
    }

    .section-portfolio-1 .row-center > * {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .section-portfolio-1 .portfolio-item {
        margin-bottom: 12px;
    }

    .section-portfolio-1 .portfolio-item p {
        font-size: 12px;
    }

    .section-portfolio-1 .portfolio-item h4 {
        font-size: 14px;
    }
}

/*------------------------------------
    Other Styles
------------------------------------*/
/*------------------------------------
    Page
------------------------------------*/
.page-double-header {
    padding-top: 150px;
}

.arama-kutusu {
    display: flex;
    background-color: #fff;
    padding: 8px 20px;
    border-radius: 8px;
}

.arama-kutusu ::placeholder {
    color: #a8a8a8;
}

@media (min-width: 992px) {
    .tartisma-baslik-wrapper {
        display: flex;
    }
}

.tartisma-baslik-wrapper:not(:last-child) {
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.tartisma-baslik-img {
    width: 60px;
    height: 60px;
    border-radius: 50px;
    overflow: hidden;
    border: 2px solid #00aeef;
    display: inline-flex;
    flex-shrink: 0;
    flex-grow: 0;
}

.tartisma-baslik-img img {
    width: 60px;
    height: 60px;
}

@media (max-width: 991px) {
    .tartisma-baslik-img {
        display: none;
    }
}

.tartisma-baslik-balon {
    width: 60px;
    height: 60px;
    background-image: url(../images/speech-bubble.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #666;
    float: right;
}

.tartisma-baslik-icerik h3 {
    font-size: 18px;
    color: #424242;
    margin-bottom: 0;
}

.tartisma-detaylari {
    color: #7C899C;
}

.tartisma-detaylari {
    display: flex;
    align-items: center;
    font-weight: 300;
    flex-wrap: wrap;
}

.tartisma-detaylari__yukari-asagi {
    font-size: 36px;
}

.tartisma-detaylari__sahip {
    color: #97411B;
}

.tartisma-detaylari__grup {
    color: #000;
}

.tartisma-detaylari__sayi {
    font-weight: 600;
}

.tartisma-detaylari__link {
    text-transform: uppercase;
    font-size: 12px;
    margin-right: 15px;
}

.tartisma-detaylari__coins {
    font-size: 10px;
}

.tartisma-detaylari__coins img {
    height: 15px;
}

select.custom-select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    color: #555;
    position: relative;
}

.custom-select-wrapper {
    position: relative;
    padding-right: 30px;
    border-bottom: 1px solid #efefef;
}

.custom-select-wrapper::after {
    font-family: "FontAwesome";
    content: "\f107";
    color: #000;
    font-weight: normal;
    font-style: normal;
    position: absolute;
    right: 10px;
    font-size: 20px;
    display: inline-block;
}

.breadcrumb, .breadcrumb a, .breadcrumb i {
    color: #8693A3;
    font-weight: 700;
}

.breadcrumb {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb span {
    font-weight: 300;
}

.user-baslik-wrapper {
    display: flex;
}

.user-baslik-wrapper h1 {
    font-size: 18px;
    color: #424242;
    margin-bottom: 0;
}

.post-author-image {
    width: 60px;
    height: 60px;
    border-radius: 50px;
    overflow: hidden;
    border: 2px solid #dfdfdf;
    display: inline-flex;
    flex-shrink: 0;
    flex-grow: 0;
    margin-right: 15px;
}

@media (max-width: 991px) {
    .post-author-image {
        display: none;
    }
}

.user-name {
    color: #27d1c2;
}

.bayrak-yorum {
    padding: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
}

.bayrak-yorum li {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-bottom: 0;
    margin-right: 10px;
}

.bayrak-yorum li img {
    width: 16px;
    margin-right: 4px;
}

.bayrak-yorum li span {
    font-weight: 600;
    color: #a3a3a3;
}

.yorum-body {
    display: flex;
}

.yorum-metin {
    border-bottom: 1px solid #ebebeb;
}

.alt-yorum {
    padding: 15px 0;
}

.alt-yorum:nth-child(-n+3) {
    padding-left: 70px;
}

.alt-yorum:not(:last-child) .yorum-metin {
    border: none;
}

.tabs.v1 {
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.tabs.v1 .t-btn-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.tabs.v1 .t-btn-container .t-btn {
    padding: 10px;
    margin-bottom: 0;
    color: #575757;
    font-weight: 400;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    padding-left: 10px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid transparent;
}

.tabs.v1 .t-btn-container .t-btn:first-child {
    border-top-left-radius: 8px;
}

.tabs.v1 .t-btn-container .t-btn:last-child {
    border-top-right-radius: 8px;
}

.tabs.v1 .t-btn-container .t-btn.active {
    color: var(--primary);
    background-color: #fff;
    border-color: #e1e1e1;
    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.1);
}

.tabs.v1 .t-panel-container .t-panel {
    color: #262626;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    height: auto;
}

.tabs.v1 .t-panel-container .t-panel.active {
    opacity: 1;
}

.tabs.v1 .t-panel-container .t-panel:not(.active) {
    display: none;
}

.tabs.tab-border-bottom1,
.tabs.tab-border-bottom2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 300px;
}

.tabs.tab-border-bottom1 .t-btn-container,
.tabs.tab-border-bottom2 .t-btn-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}

.tabs.tab-border-bottom1 .t-btn-container .t-btn,
.tabs.tab-border-bottom2 .t-btn-container .t-btn {
    padding: 5px 10px;
    color: #bdbdbd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid #c8c8c8;
    margin: 0;
    flex-grow: 1;
    flex-basis: 0;
}

.tabs.tab-border-bottom1 .t-btn-container .t-btn.active,
.tabs.tab-border-bottom2 .t-btn-container .t-btn.active {
    color: #5b70f9;
    border-color: #5b70f9;
}

.tabs.tab-border-bottom1 .t-panel-container,
.tabs.tab-border-bottom2 .t-panel-container {
    padding: 20px 0;
}

.tabs.tab-border-bottom1 .t-panel-container .t-panel,
.tabs.tab-border-bottom2 .t-panel-container .t-panel {
    color: #262626;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    height: auto;
    max-height: 0px;
    overflow: hidden;
}

.tabs.tab-border-bottom1 .t-panel-container .t-panel.active,
.tabs.tab-border-bottom2 .t-panel-container .t-panel.active {
    opacity: 1;
    height: auto;
    max-height: 500px;
}

.sozluk-arama-kutusu {
    display: flex;
    color: #939393;
    align-items: center;
    height: 68px;
    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.1);
    font-size: 22px;
    background-color: #fff;
    border-radius: 8px;
}

.sozluk-arama-kutusu.tr-os {
    border-top-left-radius: 0;
}

.sozluk-arama-kutusu.os-tr {
    border-top-right-radius: 0;
}

.buyutec,
.klavye {
    flex: 0 0 40px;
}

.buyutec {
    padding-left: 15px;
}

.klavye {
    padding-right: 15px;
}

.klavye button {
    color: #a7a7a7;
}

.arama-kutusu__input {
    flex-grow: 1;
}

.arama-kutusu__input input {
    width: 100%;
    color: #555;
    font-weight: 300;
}

.arama-kutusu__input input::placeholder {
    font-weight: 300;
    color: #d2d1d1;
}

.arama-not {
    color: #909090;
    font-weight: 300;
    font-size: 16px;
    padding-top: 20px;
    text-align: center;
    display: block;
}

/*!
 *
 *   simple-keyboard v2.29.36
 *   https://github.com/hodgef/simple-keyboard
 *
 *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
 *
 *   This source code is licensed under the MIT license found in the
 *   LICENSE file in the root directory of this source tree.
 *
 */
.hg-theme-default {
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    overflow: hidden;
    touch-action: manipulation;
}

.hg-theme-default .hg-button span {
    pointer-events: none;
}

.hg-theme-default button.hg-button {
    border-width: 0;
    outline: 0;
    font-size: inherit;
}

.hg-theme-default {
    font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    background-color: #ececec;
    padding: 5px;
    border-radius: 5px;
}

.hg-theme-default .hg-button {
    display: inline-block;
    flex-grow: 1;
}

.hg-theme-default .hg-row {
    display: flex;
}

.hg-theme-default .hg-row:not(:last-child) {
    margin-bottom: 5px;
}

.hg-theme-default .hg-row .hg-button-container, .hg-theme-default .hg-row .hg-button:not(:last-child) {
    margin-right: 5px;
}

.hg-theme-default .hg-row > div:last-child {
    margin-right: 0;
}

.hg-theme-default .hg-row .hg-button-container {
    display: flex;
}

.hg-theme-default .hg-button {
    box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.3);
    height: 40px;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
    background: #fff;
    border-bottom: 1px solid #b5b5b5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.hg-theme-default .hg-button.hg-activeButton {
    background: #efefef;
}

.hg-theme-default.hg-layout-numeric .hg-button {
    width: 33.3%;
    height: 60px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.hg-theme-default .hg-button.hg-button-numpadadd, .hg-theme-default .hg-button.hg-button-numpadenter {
    height: 85px;
}

.hg-theme-default .hg-button.hg-button-numpad0 {
    width: 105px;
}

.hg-theme-default .hg-button.hg-button-com {
    max-width: 85px;
}

.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
    max-width: 45px;
}

.hg-theme-default .hg-button.hg-selectedButton {
    background: rgba(5, 25, 70, 0.53);
    color: #fff;
}

.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
    max-width: 82px;
}

.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
    max-width: 60px;
}

.simple-keyboard {
    position: absolute;
    left: 0;
    top: 60px;
    z-index: 100;
    display: none;
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.2);
}

.alfabe {
    margin-top: 50px;
    min-height: 50px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #dedede;
}

.alfabe .el-pagination {
    display: flex;
    float: none;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.rtl {
    direction: rtl;
}

.ar {
    font-family: "Noto Naskh Arabic";
    font-size: 1.5em;
}

.sozluk-kelimeler {
    display: flex;
    flex-wrap: wrap;
}

.sozluk-kelimeler .sozluk-kelime {
    border: 2px solid #a7a7a7;
    border-radius: 5px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: auto 1 1;
    text-align: center;
    margin: 15px;
}

.sozluk-kelimeler .sozluk-kelime:hover {
    border-color: #5b70f9;
}

.sozluk-kelimeler .sozluk-kelime.turkce .alt-kelime {
    font-family: "Noto Naskh Arabic";
    direction: rtl;
    font-size: 1.3em;
}

.sozluk-kelimeler .sozluk-kelime.osmanlica .ust-kelime {
    font-family: "Noto Naskh Arabic";
    direction: rtl;
    font-size: 1.3em;
}

.ust-kelime {
    color: #5b70f9;
    font-weight: 500;
    margin-bottom: 5px;
}

.alt-kelime {
    margin-bottom: 0;
    color: #a7a7a7;
}

.sayfalama {
    padding: 20px 0 40px;
}

.sayfalama .el-pagination {
    float: none;
    text-align: center;
}

.kart-baslik {
    display: flex;
    align-items: baseline;
}

.kart-baslik .kart-baslik__birincil {
    color: #5b70f9;
    font-size: 30px;
    font-weight: 400;
    margin-right: 10px;
}

.kart-baslik .kart-baslik__ikincil {
    color: #828282;
    font-size: 30px;
    font-weight: 300;
}

.border-bottom {
    border-bottom: 2px solid #e1e1e1;
}

.tag-baslik {
    color: #a7a7a7;
    font-weight: 300;
    font-size: 18px;
    margin-bottom: 20px;
}

.badge {
    background-color: #00c9b7;
    border-radius: 4px;
    color: #fff;
    padding: 4px 8px;
    margin-right: 10px;
    font-size: 14px;
    font-weight: 600;
}

.el-panel-body p.body-text {
    font-size: 18px;
    color: #858585;
    line-height: 1.6;
}

.el-panel-footer {
    border-top: 1px solid #efefef;
    padding: 15px;
    text-align: center;
    font-size: 22px;
    color: #989897;
    font-weight: 300;
}

.mavi {
    color: #5b70f9;
}

a.hover-blue {
    padding-top: 7px;
    padding-bottom: 7px;
    min-width: 150px;
}

a.hover-blue:hover {
    background-color: #5b70f9;
    color: #fff;
}

.input-group input {
    width: 100%;
}

i.fa.fa-angle-up.active,
i.fa.fa-angle-down.active {
    color: #2746fa;
}

.edit-linkler {
    padding: 0;
    list-style: none;
    display: flex;
    font-size: 12px;
}

.edit-linkler li:not(:last-child) {
    margin-right: 10px;
}

.expand {
    cursor: pointer;
}

.expandable {
    display: none;
}

.button-go-back .arrow-right {
    transform: rotate(180deg);
}

.alert {
    border-radius: 9px;
    padding: 15px;
    display: flex;
    align-items: center;
    background-color: #e2e3e5;
    border: 1px solid #d6d8db;
    margin-bottom: 35px;
}

@media (max-width: 991px) {
    .alert {
        flex-direction: column;
        text-align: center;
    }
}

.soru-isareti {
    background-color: #ebebed;
    color: #000;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

a.active span.text {
    color: #5b70f9;
}

.sag-menu {
    display: flex;
    justify-content: flex-end;
}

.sag-linkler {
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}

ul.dd-menu {
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}

ul.dd-menu > li {
    display: inline-block;
    position: relative;
    line-height: 21px;
    text-align: left;
}

ul.dd-menu > li > a {
    display: flex;
    color: #333;
    text-decoration: none;
}

ul.dd-menu > li > a:hover {
    background: transparent;
}

ul.dd-menu > li > ul.dd-dropdown {
    width: 220px;
    background: #fff;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
    padding-left: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-top: 6px solid #5b70f9;
}

ul.dd-menu > li > ul.dd-dropdown.dd-right {
    right: 0;
    left: unset;
}

ul.dd-menu > li > ul.dd-dropdown a {
    color: #666;
}

ul.dd-menu > li > ul.dd-dropdown a:hover {
    color: #8c8c8c;
}

ul.dd-menu li:hover ul.dd-dropdown {
    display: block;
}

ul.dd-menu li ul.dd-dropdown li {
    display: block;
}

ul.dd-dropdown > li > a {
    display: block;
}

ul.dd-dropdown > li:not(:last-child) > a {
    margin-bottom: 1rem;
}

.dd-item {
    margin-top: 0 !important;
}

.dd-icon {
    position: relative;
    margin-right: 5px;
    font-size: 1.5em;
}

.dd-icon .dd-badge {
    position: absolute;
    background-color: #5b70f9;
    color: #fff;
    padding: 0 3px;
    font-size: 0.4em;
    font-weight: bold;
    border-radius: 10px;
    line-height: 1.6;
    top: -5px;
    right: -3px;
    vertical-align: middle;
    min-height: 1px;
}

.dd-menu span.text-bundle {
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.dd-menu span.text-bundle .welcome {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1em;
}

.dd-menu span.text-bundle .user-name {
    font-size: 0.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90px;
    white-space: nowrap;
}

.dd-link {
    display: flex;
    align-items: baseline;
}

.dd-link .dd-link__text {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8em;
    color: #d7d7d7;
}

.dd-dropdown_body,
.dd-dropdown_footer,
.dd-dropdown_header {
    padding: 15px 25px;
    list-style: none !important;
}

.dd-dropdown_body p,
.dd-dropdown_footer p,
.dd-dropdown_header p {
    margin-bottom: 0;
    line-height: 1;
}

.dd-dropdown_footer {
    background-color: white;
}

.dd-dropdown_header {
    background-color: white;
}

.user-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.bayrak {
    height: 27px;
    border-radius: 50%;
}

.panel-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 40px;
}

.panel-baslik.panel-baslik__h1 h1 {
    font-size: 17px !important;
    font-weight: inherit;
}

.text-muted {
    color: #acacac;
}

.ders-agaci__row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.ders-kutu {
    width: 144px;
    height: 144px;
    border-radius: 10px;
    border: 2px solid #cfcfcf;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    position: relative;
    color: #5b6777;
    font-size: 12px;
    text-align: center;
    flex-shrink: 0;
    flex-grow: 0;
}

@media (max-width: 600px) {
    .ders-kutu {
        width: 100px;
        height: 100px;
        padding: 5px;
    }
}

.ders-kutu:not(:last-child) {
    margin-right: 15px;
}

.ders-kutu.active {
    border-color: #5b70f9;
}

.ders-kutu.gradient {
    border-color: rgba(0, 0, 0, 0);
    background: linear-gradient(180deg, #5b70f9 0%, #a2aeff 100%);
    color: #fff;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.2;
}

.fill-bar {
    position: relative;
    width: 85px;
    height: 4px;
}

.fill-bar .fill-bar__base {
    position: absolute;
    background-color: #e5e8f3;
    height: 2px;
    width: 100%;
    border-radius: 1px;
    top: 1px;
    left: 0;
}

.fill-bar .fill-bar__rating {
    position: absolute;
    background-color: #5b70f9;
    height: 4px;
    border-radius: 2px;
    top: 0;
    left: 0;
}

.ders-agaci-baslik {
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 17px;
    color: #7f7f7f;
    border-radius: 8px;
    padding: 10px 30px;
}

@media (max-width: 600px) {
    .ders-agaci-baslik {
        font-size: 13px;
    }
}

.ders-agaci-baslik.ders-agaci-baslik__gri {
    background-color: #c7c7c7;
}

.ders-agaci-baslik.ders-agaci-baslik__yesil {
    background-color: #34b900;
    color: #fff;
}

.rounded {
    border-radius: 8px;
}

.bg-white {
    background-color: #fff !important;
}

.seviye-tablosu {
    width: 100%;
    height: 135px;
    background-image: url(../images/puan-tablosu.png);
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 38px;
}

.seviye-tablosu .seviye-puan {
    text-align: center;
    color: #fc9835;
    font-size: 40px;
}

.puan-tablosu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px 12px;
    grid-template-areas: ". ." ". .";
}

.puan-tablosu .puan-tablosu__hucre {
    display: flex;
    align-items: center;
    justify-content: center;
}

.puan-tablosu .puan-tablosu__hucre img {
    margin-right: 8px;
}

.puan-tablosu .puan-tablosu__hucre p {
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
}

.puan-tablosu .puan-tablosu__hucre p span {
    color: #8f8f8f;
    font-weight: 300;
}

.madalya-tablosu {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: ". . . ." ". . . .";
}

.aside-text-gri {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 300;
}

.aside-baslik {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.aside-baslik h4 {
    font-weight: 400;
    color: #565657;
}

.kalan-tarih {
    color: #a2a2a2;
    font-weight: 700;
}

.kalan-tarih .tarih-val {
    color: #c1c1c1;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.taht-kavgasi-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.swiper-sag-ok,
.swiper-sol-ok {
    width: 16px;
    height: 16px;
    background-color: #5b70f9;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 45%;
    z-index: 10;
    cursor: pointer;
}

.swiper-sag-ok img,
.swiper-sol-ok img {
    width: 5px;
    height: 7px;
}

.swiper-sag-ok {
    right: 5px;
}

.swiper-sag-ok img {
    transform: rotate(180deg);
}

.swiper-sol-ok {
    left: 5px;
}

aside .title {
    font-weight: 400;
    color: #565657;
}

.siralama-tablo-kurum .siralama-tablo__satir .sira-avatar img {
    border-radius: 4px;
}

.siralama-tablo__satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.siralama-tablo__satir .sira-no {
    flex-basis: 20px;
    flex-shrink: 0;
}

.siralama-tablo__satir .sira-avatar {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 44px;
    margin-right: 10px;
}

.siralama-tablo__satir .sira-avatar img {
    border-radius: 50%;
}

.siralama-tablo__satir .sira-isim {
    flex-grow: 1;
    color: #5b70f9;
    display: flex;
    justify-content: space-between;
}

.siralama-tablo__satir .sira-isim .isim {
    display: inline-block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.siralama-tablo__satir .sira-altin {
    color: #e6b600;
    flex-basis: 50px;
}

.siralama-tablo__satir .sira-puan {
    flex-basis: 55px;
    text-align: right;
    flex-shrink: 0;
    color: #a1a1a1;
}

scrollbar, [scrollbar], [data-scrollbar] {
    display: block;
    position: relative;
    overflow: scroll;
}

scrollbar .scroll-content, [scrollbar] .scroll-content, [data-scrollbar] .scroll-content {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

scrollbar.scrolling .scroll-content, [scrollbar].scrolling .scroll-content, [data-scrollbar].scrolling .scroll-content {
    pointer-events: none;
}

scrollbar.scrolling .scroll-content .scroll-content, [scrollbar].scrolling .scroll-content .scroll-content, [data-scrollbar].scrolling .scroll-content .scroll-content {
    pointer-events: auto;
}

scrollbar .scrollbar-track, [scrollbar] .scrollbar-track, [data-scrollbar] .scrollbar-track {
    position: absolute;
    background-color: #dfdfdf;
    opacity: 1;
    z-index: 1;
    -webkit-transition: opacity 0.5s 1s ease-out, background 0.5s ease-out;
    transition: opacity 0.5s 1s ease-out, background 0.5s ease-out;
}

scrollbar .scrollbar-track.show, [scrollbar] .scrollbar-track.show, [data-scrollbar] .scrollbar-track.show, scrollbar .scrollbar-track:hover, [scrollbar] .scrollbar-track:hover, [data-scrollbar] .scrollbar-track:hover {
    opacity: 1;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

scrollbar .scrollbar-track:hover, [scrollbar] .scrollbar-track:hover, [data-scrollbar] .scrollbar-track:hover {
    background: #dedede52;
}

scrollbar .scrollbar-track-x, [scrollbar] .scrollbar-track-x, [data-scrollbar] .scrollbar-track-x {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
}

scrollbar .scrollbar-track-y, [scrollbar] .scrollbar-track-y, [data-scrollbar] .scrollbar-track-y {
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
}

scrollbar .scrollbar-thumb, [scrollbar] .scrollbar-thumb, [data-scrollbar] .scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 8px;
    background: #a0a0a0;
    border-radius: 0;
}

.custom-scroll {
    height: 300px;
    padding-right: 15px;
}

.btn {
    text-align: center;
    padding: 6px 15px;
    border-radius: 6px;
    color: #a5a4a4;
}

.btn.btn-outline {
    border: 2px solid #dedede;
}

.btn.btn-block {
    display: block;
}

.el-social-links.sidebar-social li {
    line-height: 39px;
    text-align: center;
    display: inline-block;
    border-radius: 6px;
    background-color: var(--primary);
    margin-right: 10px;
}

#mobil-footer {
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f1f1f1;
    z-index: 99;
}

@media (min-width: 601px) {
    #mobil-footer {
        display: none;
    }
}

.mobil-footer__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
}

.mobil-footer__btn:not(:last-child) {
    margin-right: 20px;
}

.mobil-footer__btn i {
    font-size: 20px;
}

.mobil-footer__btn p {
    font-size: 10px;
    text-align: center;
    margin-bottom: 0;
}

.mobil-hesap-avatar {
    width: 30px;
    margin-right: 10px;
}

.mobil-hesabim-menu {
    background-color: #5b70f9 !important;
    color: #fff !important;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=submit]:focus,
textarea:focus,
button:focus {
    outline: none;
    box-shadow: none;
}

.sozluk-search-wrapper {
    border-radius: 8px;
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
}

.sozluk-search-wrapper ::placeholder {
    font-weight: 300;
    font-size: 16px;
    color: #c9c9c9;
}

.sozluk-search-wrapper input {
    border-color: #fff;
}

.sozluk-search-wrapper input:active, .sozluk-search-wrapper input:focus {
    border-color: #fff;
}

.sozluk-search-wrapper .input-group-prepend.show button {
    color: #5b70f9;
    background-color: #fff;
    border-color: #fff;
}

.sozluk-search-wrapper .input-group-prepend button {
    background-color: #fff;
    border-right: none;
    border-color: #fff;
}

.sozluk-search-wrapper .input-group-prepend button:hover {
    color: #000;
}

.sozluk-search-wrapper .input-group-prepend button:active {
    color: #5b70f9 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

.sozluk-search-wrapper .input-group-prepend button:active:hover {
    color: #5b70f9;
    background-color: #fff;
}

.sozluk-search-wrapper .input-group-prepend button:focus {
    outline: none;
    box-shadow: none !important;
}

.sozluk-search-wrapper .input-group-append button {
    background-color: #fff;
    border-color: #fff;
    border-left: none;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.sozluk-search-wrapper .input-group-append button:focus {
    box-shadow: none;
}

.sozluk-search-wrapper .input-group-append button:hover {
    color: #5b70f9;
}

.sozluk-search-wrapper .input-group-append button i {
    font-size: 30px;
    height: 30px !important;
}

.el-panel-teacher-widget li a:hover {
    color: #5b70f9;
}

.abone-card {
    height: 100%;
}

.abone-card .details h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 48px;
}

/*
----------------------------------------
--------------- DERSLER ----------------
----------------------------------------
*/
.h1-fluid {
    font-size: clamp(1.6rem, 2vw + 10px, 4rem);
}

.h2-fluid {
    font-size: clamp(1.5rem, 1.3vw + 10px, 3rem);
}

.dersler {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fcfcfc;
}

.dersler.bg-kirmizi {
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(45, 21, 130, 0.06)));
    background-image: linear-gradient(90deg, transparent, rgba(45, 21, 130, 0.06));
}

.dersler main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    flex-direction: column;
}

.ders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ders-breadcrumb {
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    font-weight: 300;
    display: flex;
}

.ders-breadcrumb li {
    list-style: none;
    font-size: 1.2rem;
}

@media (max-width: 600px) {
    .ders-breadcrumb li {
        font-size: 0.9rem;
    }
}

.ders-breadcrumb li:not(:last-child)::after {
    content: "\f105";
    font-family: "FontAwesome";
    color: inherit;
    font-size: inherit;
    display: inline-block;
    margin: 0 7px;
}

.ders-breadcrumb li:first-child {
    font-weight: 700;
}

.ders-sag-link a {
    font-weight: 300;
    font-size: 1.2rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    text-align: right;
    justify-content: flex-end;
}

.beyaz-kart {
    background-color: #fff;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.img-94px {
    width: 94px;
    height: 94px;
    -webkit-filter: drop-shadow(0px 5px 5px #bbbbbb);
    filter: drop-shadow(0px 5px 5px #bbbbbb);
}

@media (max-height: 740px) {
    .img-94px {
        width: 60px;
        height: 60px;
    }
}

.buton {
    font-size: 1.2rem;
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 10px;
    transition: all ease-in-out 0.2s;
}

.buton:hover {
    filter: brightness(90%);
}

.buton.buton-sari {
    background-color: #fadb33;
    color: #e49800;
}

.buton.buton-kirmizi {
    background-color: #cf3030;
    color: #fff;
    width: 8em !important;
}

.buton.buton-kilitli {
    background-color: #b2b2b2;
    color: #fff;
    pointer-events: none;
}

.buton.buton-kilitli:hover {
    cursor: not-allowed !important;
}

@media (max-height: 740px) {
    .buton {
        font-size: 1rem;
    }
}

.kart-yazi {
    text-align: center;
    color: #878787;
    font-size: large;
    line-height: 1.2;
}

.kart-kilitli img {
    filter: grayscale(100%);
}

@media (max-height: 740px) {
    .kus-icon {
        max-width: 100px;
    }
}

.sayfalama {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .sayfalama {
        flex-wrap: wrap;
    }
}

.sayfalama a {
    color: #000;
    background-color: #fff;
    flex-shrink: 0;
    flex-grow: 0;
    display: grid;
    place-items: center;
    font-weight: 300;
    text-align: center;
    font-size: 1.5rem;
    opacity: 0.5;
    transition: all ease-in-out 0.2s;
    width: 50px;
    height: 50px;
    margin-inline: 5px;
    border-radius: 50%;
}

@media (max-width: 767px) {
    .sayfalama a {
        font-size: 1.2rem;
        width: 30px;
        height: 30px;
    }
}

@media (max-height: 740px) {
    .sayfalama a {
        font-size: 1rem;
        width: 30px;
        height: 30px;
    }
}

.sayfalama a:hover, .sayfalama a.active {
    opacity: 1;
}

.sayfalama a.disabled {
    pointer-events: none;
}

.sayfalama a.disabled:hover {
    cursor: not-allowed;
}

#ceviriTextArea {
    height: 30vh;
}

.header-kutu {
    display: flex;
    width: 100%;
    align-items: center;
    flex-basis: 60%;
    padding: 30px 50px;
    border: 5px solid #e1e1e1;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top: none;
    background-color: #fff;
}

@media (max-width: 767px) {
    .header-kutu {
        border: none;
        padding: 0;
    }
}

@media (max-height: 740px) {
    .header-kutu {
        padding-block: 15px;
    }
}

.ilerleme {
    display: flex;
    flex-grow: 1;
}

.ilerleme .ilerleme__base {
    position: relative;
    background-color: #e1e1e1;
    height: 10px;
    width: 100%;
    border-radius: 5px;
    z-index: 1;
}

@media (max-width: 767px) {
    .ilerleme .ilerleme__base {
        height: 4px;
    }
}

.ilerleme .ilerleme__base .ilerleme__cubuk {
    position: absolute;
    z-index: 2;
    background-color: #5b70f9;
    height: 10px;
    left: 0;
    top: 0px;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .ilerleme .ilerleme__base .ilerleme__cubuk {
        height: 6px;
        top: -1px;
    }
}

.header-kutu-addon__text {
    color: #5b70f9;
    font-size: 300;
    font-size: 1.3rem;
    width: 110px;
    text-align: right;
}

@media (max-width: 600px) {
    .header-kutu-addon__text {
        width: 90px;
        margin-left: 15px;
    }
}

.custom-modal .modal-dialog {
    max-width: 900px;
}

.custom-modal .modal-content {
    border: 4px solid #d7d7d7;
    padding: 10%;
    border-radius: 2vw;
}

@media (max-height: 740px) {
    .custom-modal .modal-content {
        padding: 5%;
    }
}

.buton-xl {
    font-size: 20px;
    background-color: #fff;
    border: 2px solid #fff;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 300;
    display: block;
    text-align: center;
}

.buton-xl:hover {
    color: currentColor;
    filter: brightness(90%);
}

.buton-outline {
    border-color: #d7d7d7;
    color: #9c9fb2;
}

.buton-mavi {
    background-color: #5b70f9;
    color: #fff;
    border-color: #5b70f9;
}

.container-0-mobile {
    padding-inline: 0;
}

@media (min-width: 768px) {
    .container-0-mobile {
        max-width: 900px;
        padding-inline: 15px;
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .px-0-mobile {
        padding-inline: 0;
    }
}

.beceri-ogren-slide__frame {
    background-color: #2de22d;
    color: #fff;
    border-radius: 30px;
    overflow: hidden;
}

.swiper-slide-prev .beceri-ogren-slide__frame {
    background-color: #fdb353;
}

.swiper-slide-next .beceri-ogren-slide__frame {
    background-color: #95a5a6;
}

.beceri-ogren-slide__baslik {
    font-size: 2rem;
}

.beceri-ogren-slide__tercume {
    font-size: 40px;
    padding-bottom: 15px;
}

.coverflow {
    position: relative;
}

.coverflow-nav-btn {
    border: 2px solid #fff;
    border-radius: 5px;
    background-color: #00000020;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    position: absolute;
    top: 50%;
    z-index: 2000;
    text-align: center;
    padding: 5px 10px;
}

.coverflow-geri {
    left: 0;
}

@media (min-width: 768px) {
    .coverflow-geri {
        left: -30px;
    }
}

.coverflow-ileri {
    right: 0;
}

@media (min-width: 768px) {
    .coverflow-ileri {
        right: -30px;
    }
}

.kalpler {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.kalpler .icn-heart {
    color: #cdcdcd;
    font-size: 20px;
}

@media (min-width: 992px) {
    .kalpler .icn-heart {
        font-size: 30px;
    }
}

.kalpler .icn-heart.active {
    color: #f00;
}

.dersler-footer {
    padding-block: 2rem;
    border-top: 3px solid #e1e1e1;
}

.dersler-footer a {
    color: currentColor;
}

@media (max-width: 1399px) {
    .dersler-footer {
        padding-block: 1rem;
    }
}

@media (max-height: 740px) {
    .dersler-footer {
        padding-block: 0.75rem;
    }
}

.dersler-footer.yesil {
    background-color: #cfffa9;
    color: #58a700;
    border: none;
}

.dersler-footer.yesil a {
    color: currentColor;
}

.dersler-footer.kirmizi {
    background-color: #ffd2d3;
    border: none;
    color: #ec0b1b;
}

.dersler-footer.kirmizi a {
    color: currentColor;
}

.footer-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    height: 100px;
    width: 100px;
    background-color: #fff;
    border-radius: 50%;
}

@media (max-height: 740px) {
    .footer-icon {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }
}

.footer-title {
    font-size: 1rem;
    font-weight: 600;
}

@media (min-width: 992px) {
    .footer-title {
        font-size: 2rem;
    }
}

@media (max-height: 740px) {
    .footer-title {
        font-size: 1.2rem;
        line-height: 1.3;
    }
}

.footer-subtitle {
    font-size: 0.8rem;
    font-weight: 300;
}

@media (min-width: 992px) {
    .footer-subtitle {
        font-size: 1rem;
    }
}

@media (max-height: 740px) {
    .footer-subtitle {
        font-size: 0.9rem;
        line-height: 1;
    }
}

.footer-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-actions a {
    font-size: 1.2rem;
}

.footer-actions a span {
    text-transform: uppercase;
    font-family: "Poppins", sans-serif;
}

@media (max-height: 740px) {
    .footer-actions a {
        font-size: 1rem;
        line-height: 1;
    }
}

.ders-ana-baslik {
    text-align: center;
    font-size: 3rem;
}

@media (max-width: 1399px) {
    .ders-ana-baslik {
        font-size: 2rem;
    }
}

@media (max-width: 991px) {
    .ders-ana-baslik {
        font-size: 1.6rem;
    }
}

.ders-turkce-baslik {
    font-weight: 300;
    text-align: center;
    font-size: 2rem;
    color: #515151;
}

@media (max-width: 991px) {
    .ders-turkce-baslik {
        font-size: 1.2rem;
    }
}

.ders-osmanlica-baslik {
    font-weight: 300;
    text-align: center;
    direction: rtl;
    font-size: 3rem;
    line-height: 1;
    color: #515151;
}

@media (max-width: 1199px) {
    .ders-osmanlica-baslik {
        font-size: 2.2rem;
    }
}

@media (max-width: 991px) {
    .ders-osmanlica-baslik {
        font-size: 1.9rem;
    }
}

.ders-textarea {
    border-radius: 10px;
    border: none;
    box-shadow: 0 5px 10px #00000025;
    padding: 2vw;
    width: 100%;
    font-size: 1.2rem;
    resize: none;
}

.ders-textarea::placeholder {
    color: #b8b8b8;
    font-weight: 300;
    font-style: italic;
}

.ders-footer-button {
    font-size: 1.2rem;
    color: #acacac;
    background-color: #fff;
    border: 3px solid #e1e1e1;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 10px;
    opacity: 1;
    transition: all ease-in-out 0.2s;
}

@media (max-width: 767px) {
    .ders-footer-button {
        padding: 5px 10px;
        font-size: 1rem;
    }
}

@media (max-height: 740px) {
    .ders-footer-button {
        padding: 3px 10px;
        font-size: 0.9rem;
        border-radius: 6px;
    }
}

.ders-footer-button:hover {
    opacity: 0.8;
}

.ders-footer-button.ders-footer-button-gri {
    background-color: #acacac;
    border-color: #acacac;
    color: #fff;
}

.ders-footer-button.ders-footer-button-gri-outline {
    background-color: transparent;
    border-color: #e4e4e4;
    color: #b7b7b7;
}

.ders-footer-button.ders-footer-button-yesil {
    background-color: #58cc02;
    border-color: #58cc02;
    color: #fff;
}

.ders-footer-button.ders-footer-button-kirmizi {
    background-color: #ec0b1b;
    border-color: #ec0b1b;
    color: #fff;
}

.ders-footer-button.ders-footer-button-mavi {
    background-color: #5b70f9;
    border-color: #5b70f9;
    color: #fff;
}

.custom-radio {
    display: block;
    width: 100%;
}

.custom-radio > input {
    /* HIDE RADIO */
    visibility: hidden;
    /* Makes input not-clickable */
    position: absolute;
    /* Remove input from document flow */
}

.custom-radio > input + div {
    /* DIV STYLES */
    cursor: pointer;
    border: 3px solid #c4c4c4;
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
}

.custom-radio > input + div img {
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 15px;
}

@media (max-height: 740px) {
    .custom-radio > input + div img {
        height: auto;
    }
}

.custom-radio > input + div p {
    font-size: 20px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.custom-radio > input + div span.radio {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid transparent;
    background-color: transparent;
    outline: 3px solid #c4c4c4;
    margin-right: 10px;
}

.custom-radio > input + div.sunu-cevir {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 992px) {
    .custom-radio > input + div.sunu-cevir {
        height: 240px;
    }
}

@media (max-height: 740px) {
    .custom-radio > input + div.sunu-cevir {
        height: 150px;
    }
}

.custom-radio > input + div.sunu-cevir p {
    font-size: 30px;
}

.custom-radio > input:checked + div {
    /* (RADIO CHECKED) DIV STYLES */
    background-color: #f4f7fe;
    border-color: #5b70f9;
}

.custom-radio > input:checked + div span.radio {
    background-color: #5b70f9;
    border-color: #fff;
    outline: 3px solid #5b70f9;
}

.osmanlica {
    direction: rtl;
}

.drop-target {
    border-top: 2px solid #e1e1e1;
    border-bottom: 2px solid #e1e1e1;
    height: 80px;
    padding: 10px 0;
    display: flex;
    gap: 5px;
    align-items: center;
}

.drop-target-alt-cizgi {
    border-top: none;
    padding-top: 0;
    height: 60px;
}

.drop-kelimeler {
    display: flex;
    justify-content: center;
    gap: 20px;
}

@media (max-width: 767px) {
    .drop-kelimeler {
        gap: 10px;
    }
}

.drop-kelime {
    text-align: center;
    font-size: 30px;
    border: 2px solid #e1e1e1;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px 20px;
    font-weight: 300;
    cursor: pointer;
}

@media (max-width: 1399px) {
    .drop-kelime {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .drop-kelime {
        font-size: 16px;
    }
}

.drop-kelime.active {
    border-color: #5b70f9;
}

.drop-kelime.empty {
    background-color: #d7d7d7;
}

.dogru-cevap {
    color: #f00;
    font-weight: 600;
}

.surukle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.surukle .surukle-item {
    font-weight: 300;
    border: 2px solid #b7b7b7;
    border-radius: 8px;
    text-align: center;
    padding: 10px 20px;
    color: #7b7b7b;
    margin-bottom: 12px;
    font-size: 15px;
    background-color: #fff;
    width: 100%;
}

.surukle .surukle-item.empty {
    background-color: #d7d7d7;
    min-height: 46.5px;
}

@media (min-width: 768px) {
    .surukle .surukle-item.empty {
        min-height: 63px;
    }
}

@media (min-width: 768px) {
    .surukle .surukle-item {
        width: 280px;
        font-size: 22px;
        line-height: 1;
    }
}

.birak {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.birak .birak-item {
    font-weight: 300;
    border: 2px dashed #b7b7b7;
    text-align: center;
    padding: 10px 20px;
    color: #7b7b7b;
    margin-bottom: 12px;
    font-size: 15px;
    width: 100%;
}

@media (min-width: 768px) {
    .birak .birak-item {
        width: 280px;
        font-size: 22px;
        line-height: 1;
    }
}

.birak .birak-item.fill {
    background-color: #0000ff;
    border-color: #0000ff;
    color: #fff;
}

.btn-dogru {
    background-color: #4db400;
    border: 2px solid #4db400;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 400;
    opacity: 0.8;
    transition: all ease-in-out 0.2s;
    display: flex;
    align-items: center;
    text-align: center;
}

.btn-dogru:hover {
    opacity: 1;
}

.btn-dogru i {
    background-color: #fff;
    color: #4db400;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

@media (max-width: 767px) {
    .btn-dogru i {
        font-size: 16px;
        padding: 5px 10px;
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 767px) {
    .btn-dogru {
        font-size: 20px;
        padding: 5px 10px;
        width: 100%;
    }
}

.btn-yanlis {
    background-color: #fff;
    border: 2px solid #e00010;
    color: #e00010;
    font-size: 30px;
    font-weight: 300;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 400;
    opacity: 0.8;
    transition: all ease-in-out 0.2s;
    text-align: center;
}

.btn-yanlis:hover {
    opacity: 1;
}

.btn-yanlis i {
    background-color: #ffa0a7;
    color: #e00010;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

@media (max-width: 767px) {
    .btn-yanlis i {
        font-size: 16px;
        padding: 5px 10px;
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 767px) {
    .btn-yanlis {
        font-size: 20px;
        padding: 5px 10px;
        width: 100%;
    }
}

.dinle-butonlar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
}

.dinle-butonlar button {
    color: #fff;
    background-color: #5b70f9;
    border-radius: 10px;
    border-bottom: 5px solid #4757c0;
    display: grid;
    place-items: center;
}

.dinle-butonlar button:active {
    border-width: 0;
}

.btn-speaker {
    width: 140px;
    height: 140px;
    font-size: 70px;
}

@media (max-width: 767px) {
    .btn-speaker {
        font-size: 40px;
        width: 100px;
        height: 100px;
    }
}

@media (max-height: 740px) {
    .btn-speaker {
        font-size: 40px;
        width: 80px;
        height: 80px;
    }
}

.btn-turtle {
    width: 80px;
    height: 80px;
    font-size: 30px;
}

@media (max-width: 767px) {
    .btn-turtle {
        font-size: 20px;
        width: 50px;
        height: 50px;
    }
}

@media (max-height: 740px) {
    .btn-turtle {
        font-size: 20px;
        width: 60px;
        height: 60px;
    }
}

.top-image {
    width: 150px;
    margin-bottom: 35px;
    position: relative;
}

.top-image.drop-shadow {
    position: relative;
}

.top-image.drop-shadow.kilit {
    transform: translateX(18px);
}

.top-image.drop-shadow.kilit::after {
    margin-left: 0;
}

.top-image.drop-shadow::after {
    content: "";
    position: absolute;
    bottom: -20px;
    display: block;
    background-color: #e2e2e2;
    width: 110px;
    height: 12px;
    border-radius: 50%;
    margin-left: 20px;
}

.bitis-highlight {
    color: #fad231;
    font-weight: 600;
}

.bitis-mavi {
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background: url(../images/mavi-bg.png) no-repeat top center, linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
    background-size: cover;
}

.bitis-mavi main {
    color: #fff;
}

.bitis-mavi footer {
    padding-bottom: 4vh;
}

.bitis-mavi h1 {
    font-size: clamp(26px, 4vw, 3rem);
}

.bitis-mavi p {
    font-size: clamp(16px, 2vw, 1.8rem);
    max-width: 720px;
}

.bitis-mavi .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    background-color: #fff;
    opacity: 0.42;
}

.bitis-mavi .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}

.img-tac {
    width: 150px;
    margin-bottom: 30px;
}

.bitis-slider {
    overflow-y: visible;
    position: relative;
}

.bitis-slider .swiper-slide {
    flex-direction: column;
}

.bitis-slider .swiper-slide h1, .bitis-slider .swiper-slide p {
    word-wrap: break-word;
}

.bitis-slider-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    position: static;
    gap: 10px;
    padding-top: 20px;
}

.bitis-buton {
    background-color: #fff;
    text-transform: uppercase;
    color: #20aace;
    border: 2px solid #fff;
    border-radius: 10px;
    font-size: 1.5rem;
    padding: 8px 4vw;
    display: inline-block;
}

.bitis-buton:hover {
    color: #20aace;
    opacity: 0.7;
}

.bitis-buton:not(:last-child) {
    margin-right: 24px;
}

@media (max-width: 575px) {
    .bitis-buton:not(:last-child) {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

.bitis-buton.bitis-buton-outline {
    background-color: transparent;
    color: #fff;
}

@media (max-width: 575px) {
    .bitis-buton {
        display: block;
        font-size: 1rem;
    }
}

.tur {
    background-image: url("../images/tur-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

@media (max-width: 767px) {
    .tur {
        padding-top: 60px;
    }
}

@media (min-width: 768px) {
    .tur {
        padding-top: 80px;
    }
}

.tur-wrapper {
    height: 100%;
    display: grid;
    place-items: center;
}

.tur-baslik {
    font-size: clamp(22px, 4vw, 2.2rem);
    color: #000;
    text-align: center;
}

.tur-baslik span {
    color: #9b9b9b;
}

.tur-card {
    border-radius: 8px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: #6d7a8d;
    display: grid;
    place-items: center;
}

@media (min-width: 992px) {
    .tur-card {
        min-height: 200px;
    }
}

.custom-radio > input + .tur-card {
    border-color: transparent;
}

.custom-radio > input + .tur-card img.tur-bayrak {
    width: 56px;
    height: 56px;
}

.custom-radio > input:checked + .tur-card {
    border-color: #5b70f9;
}

.custom-radio > input:checked + .tur-card {
    color: #5b70f9;
}

.tur-bayrak-title {
    font-weight: 600;
    font-size: 18px;
}

.tur-bayrak-detay {
    font-weight: 300;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .gutter-5px-mobile {
        margin-inline: -5px;
        justify-content: center;
    }

    .gutter-5px-mobile > .col, .gutter-5px-mobile > div[class*=col-] {
        padding-inline: 5px;
    }
}

.custom-radio > input + .neden-dil {
    border-color: #d4deee;
    border-width: 2px;
    color: #7e8c9a;
}

.custom-radio > input:checked + .neden-dil {
    border-color: #5b70f9;
}

.sosyal-medya-profil {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sosyal-medya-profil .sosyal-medya-kayit {
    color: #fff;
    font-weight: 600;
    font-size: 24px;
    border-radius: 8px;
    text-align: center;
    padding: 8px;
}

.sosyal-medya-profil .sosyal-medya-kayit:hover {
    opacity: 0.8;
}

.sosyal-medya-profil .sosyal-medya-kayit.eposta {
    background-color: #5b70f9;
}

.sosyal-medya-profil .sosyal-medya-kayit.gmail {
    background-color: #d44638;
}

.sosyal-medya-profil .sosyal-medya-kayit.facebook {
    background-color: #3b5998;
}

.yolunu-sec-kart {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    align-items: center;
    flex-direction: column;
    padding: 30px;
}

.yolunu-sec-kart img {
    width: 100px;
    margin-bottom: 35px;
}

@media (max-width: 767px) {
    .yolunu-sec-kart img {
        width: 60px;
        margin-bottom: 10px;
    }
}

@media (min-width: 992px) {
    .yolunu-sec-kart:hover {
        transform: scale(1.05);
    }
}

.yolunu-sec-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.yolunu-sec-detay {
    color: #7e8c9a;
}

.header-kutu {
    align-items: center;
    background-color: #fff;
    border: 5px solid #e1e1e1;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top: none;
    display: flex;
    flex-basis: 60%;
    padding: 20px 50px !important;
    width: 100%;
}

/*# sourceMappingURL=style.css.map */