/* ================================================== */


/*
/*

@charset "utf-8";

Table of content:

* body
* header
  * subheader
* navigation
* content
* section
* footer
* sidebar
* contact
* elements
  * border
  * breadcrumb
  * button and link
  * columns
  * counter
  * divider
  * dropcap
  * heading
  * list
  * map
  * page heading
  * pagination
  * preloader
  * progress bar
  * social icons
  * spacer
  * tabs
  * testimonial
* plugins
* media query
*/

/* ================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* ================================================== */


/* import fonts icon */


/* ================================================== */

@import url("../fonts/fontawesome4/css/font-awesome.css");
@import url("../fonts/fontawesome6/css/fontawesome.css");
@import url("../fonts/fontawesome6/css/brands.css");
@import url("../fonts/fontawesome6/css/solid.css");
@import url("../fonts/elegant_font/HTML_CSS/style.css");
@import url("../fonts/et-line-font/style.css");
@import url("../fonts/icofont/icofont.min.css");

* {
  /* body font */
  --body-font: "DM Sans", Helvetica, Arial, sans-serif;
  --body-font-size: 16px;
  --body-font-color: rgba(0, 0, 0, .6);
  --body-font-color-dark: rgba(255, 255, 255, .6);
  --body-font-weight: 400;
  /* heading font */
  --heading-font: "Jost", Helvetica, Arial, sans-serif;  
  --heading-font-weight: 400;
  --heading-font-color: #000000;
  --heading-text-transform: none;
  /* h1 */
  --h1-font-size: 60px;
  --h1-font-weight: var(--heading-font-weight);
  --h1-letter-spacing: -0.02em;
  --h1-line-height: 1.15em;
  --h1-margin-bottom: 20px;
  /* h2 */
  --h2-font: var(--heading-font);
  --h2-font-size: 48px;
  --h2-font-weight: var(--heading-font-weight);
  --h2-letter-spacing: -0.015em;
  --h2-line-height: 1.2em;
  --h2-margin-bottom: 25px;
  /* h3 */
  --h3-font-size: 26px;
  --h3-font-weight: var(--heading-font-weight);
  --h3-letter-spacing: 0;
  --h3-line-height: 1.5em;
  --h3-margin-bottom: 10px;
  /* h4 */
  --h4-font-size: 20px;
  --h4-font-weight: var(--heading-font-weight);
  --h4-letter-spacing: 0;
  --h4-line-height: 1.6em;
  --h4-margin-bottom: 10px;
  /* h5 */
  --h5-font-size: 18px;
  --h5-font-weight: var(--heading-font-weight);
  --h5-letter-spacing: 0;
  --h5-line-height: 1.6em;
  --h5-margin-bottom: 10px;
  /* h6 */
  --h6-font-size: 16px;
  --h6-font-weight: var(--heading-font-weight);
  --h6-letter-spacing: 0;
  --h6-line-height: 1.6em;
  --h6-margin-bottom: 10px;
  /* mainmenu */
  --mainmenu-font: var(--title-font);
  --mainmenu-font-size: 16px;
  --mainmenu-font-weight: 600;
  --mainmenu-letter-spacing: 0;
  --mainmenu-text-transform: none;
  /* header logo */
  --logo-width: 180px;
  --logo-footer-width: 150px;
  /* misc */
  --border-default: solid 1px rgba(30, 30, 30, 1);
  --bg-color-even: #E8E8E8;
  --bg-color-odd: #F4F4F4;
  --bg-light: #F8F9FA;
  --bg-dark-1: #103C3B;
  --bg-dark-2: #1E4645;
  --bg-dark-3: #0c3130;  
  --bg-dark-1-rgb: 16, 60, 59;
  --bg-grey: #eeeeee;
  --bg-gradient-1: 0deg, rgba(var(--primary-color-rgb), .1) 0%, rgba(var(--secondary-color-rgb), .2) 100%;
  --swiper-theme-color: var(--secondary-color);
  --rounded-1: 10px;
  --border-color:#bbbbbb;
  --container-max-width:1240px;
  /* button */
  --btn-color: #fff;
  --btn-hover-bg: var(--bg-dark-1);
  --btn-font-family: var(--body-font);
  --btn-font-size: 12px;
  --btn-font-weight: bold;
  --btn-letter-spacing: 2px;
  --btn-padding: 4px 20px;
  --btn-rounded: 6px;
  --btn-text-decoration: none;
  --btn-text-transform: uppercase;
}

/* base background color */
.bg-light{background: var(--bg-light) !important}
/* base color */
.id-color{color:var(--primary-color)}

/* ================================================== */


/* body */


/* ================================================== */

html {
  position: relative;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

body {
  overflow: hidden;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);;
  color: var(--body-font-color);
  padding: 0;
  line-height: 1.8em;
  word-spacing: 0;
}

body.dark-scheme {
  color: var(--body-font-color-dark);
  background: var(--bg-dark-1);
}

a,
a:hover {
  color:var(--body-font-color);
  text-decoration: none;
  outline: none;
}

.dark-scheme a,
.dark-scheme a:hover,
.text-light a,
.text-light a:hover {
  color:var(--body-font-color-dark);
  text-decoration: none;
  outline: none;
}


/* ================================================== */


/*  header  */


/* ================================================== */

header {
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1001;
  background: var(--bg-dark-1);
  margin: 0;
}

header.transparent {
  background: none;
}

header.autoshow {
  top: -120px;
  height: 70px !important;
}

header div#logo {
  color: white;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

header .logo {
  font-family: var(--body-font);
  color: #fff;
  font-size: 40px;
  font-weight: 300;
}

header nav a {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

header nav a:hover {
  color: #555;
}

header.smaller #mainmenu ul ul {
  top: 0px;
}


.scroll-down {
    margin-top: -90px;
}

header.smaller div#logo {}


header.smaller {
  background: rgba(34, 34, 34, .05);
}

.logo-smaller div#logo {
  width: 150px;
  height: 30px;
  line-height: 65px;
  font-size: 30px;
}

.logo-smaller div#logo img {
  font-size: 30px;
}

div#logo img{
  max-width: var(--logo-width);
}

/* left col header */

/* middle col header */
header {
  float: right;
}
/* subheader */


.text-light a{
  color:rgba(255, 255, 255, 1.0);
}

.rtl {
  text-align: right;
}


/* ================================================== */


/* navigation */


/* ================================================== */

#mainmenu {
  font-size: 13px;
  margin: 0 auto;
  padding: 0;
  float: none;
  counter-reset: my-awesome-counter;
}

#mainmenu ul {
  margin: 0px 0px;
  padding: 0px;
  height: 30px;
  background: #ffffff;
  color: var(--body-font-color);
}

#mainmenu ul:not(.mega) {
  border: solid 1px #dddddd;
}

.dark-scheme #mainmenu ul {
  background: var(--bg-dark-1);
  border: solid 1px rgba(255, 255, 255, .1);
}

#mainmenu li {
  margin: 0px 0px;
  padding: 0px 0px;
  float: left;
  display: inline;
  list-style: none;
  position: relative;
}

#mainmenu>li {
  margin-right: 30px;
}

#mainmenu>li:last-child{
  margin-right: 0;
}

#mainmenu>li {
  counter-increment: my-awesome-counter;
}

#mainmenu li a.new:before{
  content:"NEW";
  font-size: 12px;
  padding: 1px 4px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  margin-right: 5px;
  color:#ffffff;
  background: var(--primary-color);
}
/*
#mainmenu>li::before {
  content: counter(my-awesome-counter) ' —';
  right: 8px;
  top: 5px;
  color:var(--secondary-color);
  margin-right: 5px;
  font-weight: 500;
  font-family: var(--heading-font);
}
*/

header.smaller #mainmenu>li::before{
  transform: scale(0);
}

#mainmenu>li.has-child:after {
  font-family: FontAwesome;
  content: "\f078";
  padding-left: 5px;
  font-size: 8px;
  position: relative;
  top: -2px;
  color:rgba(255, 255, 255, .75);
}

.rtl #mainmenu li.has-child:after {
  padding-left: 15px;
}

#mainmenu >li>a {  
  padding-right: 6px;  
  font-size: var(--mainmenu-font-size);
  font-weight: var(--mainmenu-font-weight);
  text-transform: var(--mainmenu-text-transform);
  letter-spacing: var(--mainmenu-letter-spacing);
}

#mainmenu li.has-child>a {
  padding-right: 0px;
}

#mainmenu a {
  position: relative;
  display: inline-block;
  padding-top: 25px;
  padding-bottom: 25px;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
  outline: none;
}

#mainmenu p {
  line-height: 1.8em;
  margin-bottom: 0;
}

#mainmenu a span:not(.badge) {
  position: relative;
  width: 0%;
  color: #ffffff;
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 14px;
  border-bottom: solid 2px #ffffff;
}

#mainmenu li:hover a span:not(.badge) {
  width: 100%;
}

#mainmenu li li a span:not(.badge) {
  float: right;
  margin-top: 5px;
}

#mainmenu a.active span:not(.badge) {
  width: 100%;
  margin-left: 0%;
}

#mainmenu li li {
  font-family: var(--body-font);
  font-size: 14px;
}

#mainmenu li li:last-child {
  border-bottom: none;
}

#mainmenu li li a {
  padding: 5px 15px;
  border-top: none;
  color: #606060;
  width: 100%;
  border-left: none;
  text-align: left;
  font-weight: normal;
  border-bottom: solid 1px rgba(255, 255, 255, .1);
  letter-spacing: 0;
}

#mainmenu li:last-child>a {
  border-bottom: none;
}

.dark-scheme #mainmenu li li a {
  color: #ffffff;
}

.rtl #mainmenu li li a {
  text-align: right;
}

#mainmenu li li a:hover {
  color: #111;
}

#mainmenu li li a:after {
  content: none;
}

#mainmenu li li a:hover,
#mainmenu ul li:hover>a {
  color: #fff;
}

#mainmenu li a.active{
  color:var(--primary-color) !important;
}

#mainmenu li ul {
  width: 190px;
  height: auto;
  position: absolute;
  left: 0px;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  border-radius: 3px;
}

#mainmenu ul li b {
  background: #333;
  color: #ffffff;
  padding: 0 3px;
  padding-bottom: 3px;
  font-size: 10px;
  margin-right: 3px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

#mainmenu li li {
  font-size: 14px;
  display: block;
  float: none;
  text-transform: none;
}

#mainmenu li:hover>ul {
  visibility: visible;
  opacity: 1;
  margin-top: 0px;
}

#mainmenu li ul ul:not(.ul-list) {
  top: 0px;
  margin-left: 188px;
}

#mainmenu select {
  padding: 10px;
  height: 36px;
  font-size: 14px;
  border: none;
  background: #ff4200;
  color: #eceff3;
}

#mainmenu select option {
  padding: 10px;
}

/* menu toggle for mobile */

#menu-btn {
  line-height: 1.5em;
  display: none;
  float: right;
  width: 32px;
  height: 32px;
  padding: 4px;
  text-align: center;
  cursor: poInter;
  color: #fff;
  margin-top: 0px;
  margin-left: 20px;
}

#menu-btn:before {
  font-family: FontAwesome;
  content: "\f0c9";
  font-size: 20px;
}

#menu-btn.menu-open:before{
  content: "\f068";
}

.rtl #menu-btn {
  float: left;
}


#btn-extra{
  position: relative;
  margin-left: 20px;
  width: 24px;
  height: 12px;
  cursor: pointer;
}

#btn-extra span{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  border-bottom: solid 2px #ffffff;
}


#btn-extra span:nth-child(2){
  top:auto;
  bottom: 0;
  right: 0;
}

#btn-extra:hover span{
  width: 70%;
}

#extra-content{
  padding: 50px;
  color:#ffffff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -17px;
  overflow-y: scroll;
}

#btn-close{
  top: 50px;
  right: 50px;
  position: absolute;
  z-index: 1001;
  width: 26px;
  height: 26px;
  cursor: pointer;
}

#btn-close span{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #ffffff;
  transform: rotate(45deg);
}

#btn-close span:nth-child(2){
  transform: rotate(-45deg);
}

/* ================================================== */


/* content */


/* ================================================== */

#content {
  width: 100%;
  background: #ffffff;
  padding: 90px 0 90px 0;
  z-index: 100;
}

.dark-scheme #content {
  background: var(--bg-dark-1);
}

.dark-scheme #content {
  background: var(--bg-dark-1);
}

/* ================================================== */


/* section */


/* ================================================== */

section {
  padding: 100px 0 100px 0;
}

section:not(.relative) {}


.dark-scheme section {
  background: var(--bg-dark-1);
}


/* ================================================== */


/* footer */


/* ================================================== */

footer {
  color: var(--body-font-color-dark);
  background: var(--bg-dark-1);
  padding: 40px 0 0 0;
}

footer p {
  line-height: 1.8em;
}

.dark-scheme footer a {
  color: var(--body-font-color-dark);
}

footer h5 {
  color: #fff;
  font-size: 18px;
  text-transform: none;
}

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

.subfooter {
  margin-top: 16px;
  border-top: solid 1px rgba(255, 255, 255, .1);
  padding: 20px 0 20px 0;
}

header.header-mobile {
  position: fixed !important;
  top: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

header.header-mobile .container {
  max-width: 100% !important;
  padding-left: 20px;
  padding-right: 20px;
}

.dark-scheme header.header-mobile {
  background: var(--bg-dark-1);
}

header.header-mobile nav {
  float: none;
}

header.header-mobile .logo {
  display: none;
}

header.header-mobile #mainmenu ul {
  padding: 0;
}

/* topbar start here */


#topbar a {
  text-decoration: none;
}

#topbar.text-light a {
  color: #ffffff;
}

/* topbar left content */

.menu_side_area .btn-line{
  display: inline-block;
}

/* topbar widget */

/* topbar end here */

/* ================================================== */


/* blog */


/* ================================================== */

/* blog list */

/* de-bloglist-type-1 */


/* de-post-type-1 */

#blog-carousel .item.item {
  width: 100%;
}

/* blog comment */

.blog-carousel ul,
.blog-carousel li {
  margin: 0;
  list-style: none;
}

.blog-carousel h4 {
  margin-bottom: 0px;
}

.blog-carousel p {
  margin-bottom: 10px;
}

/* blog comment form */

/* ================================================== */

/* ratings */


/* ================================================== */

/* ================================================== */


/* contact form */


/* ================================================== */

.error {
  display: none;
  margin-top: 30px;
  color: #e7505a;
  clear: both;
  padding-top: 20px;
  padding: 20px;
  background: rgba(231, 80, 90, .1);
  border: solid 1px #e7505a;
}

.success {
  display: none;
  position: relative;
  color: #ffffff;
  background: var(--bg-dark-2);
  clear: both;
  padding: 30px;
  padding-left: 90px;
  border-radius:var(--rounded-1);
  -moz-border-radius:var(--rounded-1);
  -webkit-border-radius:var(--rounded-1);
}

.success:before{
  font-size: 40px;
  position: absolute;
  font-family: "FontAwesome";
  content: "\f00c";
  margin-right: 15px;
  left: 30px;
  top:40px;
}

.error img {
  vertical-align: top;
}

.form-control {
  padding: 10px;
  border: solid 1px rgba(0,0,0,0.05);
  background: rgba(0,0,0,.025);
  border-radius:6px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
}

.text-light .form-control{
  color: #ffffff;
  border: solid 1px rgba(255,255,255,0.2);
  background: rgba(255,255,255,.025);
}

.text-light select.form-control option{
  color: var(--heading-font-color);
}

.text-light ::placeholder {
  color: #ffffff;
  opacity: 1; /* Firefox */
}

.text-light::-ms-input-placeholder { /* Edge 12 -18 */
  color: #ffffff;
}

.arrow-up,
.arrow-down {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid #fff;
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: poInter;
  z-index: 101;
}

.arrow-down {
  border-top: 40px solid #fff;
  border-bottom: none;
  position: fixed;
  z-index: 102;
  top: -40px;
}

.arrow-up:before {
  font-family: "FontAwesome";
  font-size: 20px;
  content: "\f067";
  color: #222;
  position: relative;
  top: 12px;
  margin: 0 0 0 -8px;
}

.arrow-down:before {
  font-family: "FontAwesome";
  font-size: 20px;
  content: "\f068";
  color: #222;
  position: relative;
  top: -35px;
  margin: 0 0 0 -8px;
}

/* ================================================== */


/* elements */


/* ================================================== */


/* border */


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

/* breadcrumb */


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

/* button and link */


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

a {
  text-decoration: none;
}

a.btn,
.btn {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

a.btn:before {
  content: "";
  background: rgba(0, 0, 0, 0);
  width: 0;
  height: 100%;
  position: absolute;
  z-index: -1;
}

a.btn-main:hover,
.btn-main:hover,
a.btn-main.btn-line:hover {
  color: #fff;
  background: var(--btn-hover-bg);
}

a.btn-main,
a.btn-main:active,
a.btn-main:focus,
a.btn-main:visited,
.btn-main,
input[type=button].btn-main,
a.btn-line {
  background: var(--primary-color);
  color: var(--btn-color);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  padding: var(--btn-padding); 
  text-decoration: var(--btn-text-decoration);
  text-transform: var(--btn-text-transform);
  border-radius: var(--btn-rounded);
  -moz-border-radius: var(--btn-rounded);
  -webkit-border-radius: var(--btn-rounded);
  border: none;
  position: relative;
  display: inline-block;
  text-align: center;
  outline: 0;
}

a.btn-main.fx-slide{
  overflow: hidden;
}

a.btn-main.fx-slide span{
  display: block;
  position: relative;
  transition: all .3s ease-in-out;
}

a.btn-main.fx-slide:hover span{
  transform: translate(0, 40px);
  opacity: 0;
}

a.btn-main.fx-slide:hover:before {
  opacity: 1;
  transform: translate(0, 0);
}

a.btn-main.fx-slide:before {
  content: attr(data-hover);
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translate(0, -100%);
  transition: all 0.3s ease-in-out;
}

a.btn-line,
a.btn-line:hover {
  background: none;
  color: #35404e;
  border: solid 1px rgba(255, 255, 255, .5);
}

a.btn-line:hover {
  border: solid 1px rgba(255, 255, 255, 0);
}

.text-light .btn-line{
  color:#ffffff;
}


a.btn-line:hover {
  color: #ffffff;
}

header:not(.header-light) a.btn-line,
.dark-scheme a.btn-line {
  color: #ffffff;
}

hr {
  display: block;
  clear: both;
  border-top: solid 1px #ddd;
  margin: 40px 0 40px 0;
}

/* dropcap */


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

/* form */


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

.dark-scheme ::-webkit-calendar-picker-indicator {
  filter: invert(1);
}


/* heading */


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

h1,
h2,
h4,
h3,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: 0;
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-font-color);
  text-transform: var(--heading-text-transform);
}

.dark-scheme h1,
.dark-scheme h2,
.dark-scheme h4,
.dark-scheme h3,
.dark-scheme h5,
.dark-scheme h6,
.dark-scheme .h1,
.dark-scheme .h2,
.dark-scheme .h3,
.dark-scheme .h4,
.dark-scheme .h5,
.dark-scheme .h6 {
  color: #ffffff;
}

footer h1,
footer h2,
footer h4,
footer h4,
footer h5,
footer h6 {
  color: #fff;
}

h2.text-light,
footer h4,
footer h4,
footer h5,
footer h6 {
  color: #fff;
}

h1{
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);  
  letter-spacing: var(--h1-letter-spacing);
  line-height: var(--h1-line-height);
  margin-bottom: var(--h1-margin-bottom);
}

h2{
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);  
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
  margin-bottom: var(--h2-margin-bottom);
}

h3{
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight); 
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
  margin-bottom: var(--h3-margin-bottom);
}

h4{
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight); 
  letter-spacing: var(--h4-letter-spacing);
  line-height: var(--h4-line-height);
  margin-bottom: var(--h4-margin-bottom);
}

h5{
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight); 
  letter-spacing: var(--h5-letter-spacing);
  line-height: var(--h5-line-height);
  margin-bottom: var(--h5-margin-bottom);
}


h6{
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight); 
  letter-spacing: var(--h6-letter-spacing);
  line-height: var(--h6-line-height);
  margin-bottom: var(--h6-margin-bottom);
}

h1.title {
  font-size: 64px;
  letter-spacing: 10px;
}

h1.title strong {
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
}


h5.new:before{
  content:"NEW";
  font-size: 12px;
  padding: 1px 6px 2px 6px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  margin-right: 5px;
  color:#ffffff;
  background: var(--primary-color);
}

h5 span.label {
  display: inline-block;
  margin-right: 10px;
  background: #222222;
  color: #ffffff;
  padding: 0 5px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.text-light, .text-light p {
  color: var(--body-font-color-dark);
}

.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6 {
  color: #fff;
}

/* list */

/* pagination */

@-webkit-keyframes sk-bouncedelay {

  0%,
  80%,
  100% {
    -webkit-transform: scale(0)
  }

  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bouncedelay {

  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/* ================================================== */

/* preloader */

/* ================================================== */

#de-loader {
  position: fixed;
  z-index: 20000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark-scheme #de-loader{
  background: var(--bg-dark-1);
}

.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}

.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-color);
  margin: -2px 0 0 -2px;
}

.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}

.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}

.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}

.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}

.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}

.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}

.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}

.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}

@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* progress bar */


/* ================================================== */

.de-progress {
  width: 100%;
  height: 8px;
  background: #ddd;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  overflow: hidden;
}

.de-progress .progress-bar {
  background: #333;
  height: 8px;
  box-shadow: none;
}

.de-progress {
  background: #ffffff;
}


/* social-icons */


/* ================================================== */

.social-icons {
  display: inline-block;
}

.social-icons i {
  text-shadow: none;
  padding: 10px 5px;
  width: 36px;
  height: 36px;
  text-align: center;
  font-size: 16px;
  margin: 0 3px 0 3px;
  border-radius:6px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
}

.dark-scheme .social-icons i {
  background: rgba(255, 255, 255, .1);
}

.social-icons i:hover {
  background: #fff;
  border-color: #eceff3;
  color: #333;
}

#topbar .social-icons i{
  font-size: 16px;
  background: none;
  margin-bottom: 0;
  margin-right: 1px;
  padding: 15px 5px;
  height: 30px;
  width: 30px;
  margin-top: 5px;
  color:#ffffff;
}

.social-icons.s1 i {
  border: none;
  font-size: 16px;
  margin: 3px;
}

.social-icons.s1:hover i {
  background: none;
}

.social-icons.s1 {
  line-height: 0.5;
  text-align: center;
}

.social-icons.s1 .inner {
  display: inline-block;
  position: relative;
}

.social-icons.s1 .inner:before,
.social-icons.s1 .inner:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  top: 0;
  width: 100%;
}

.social-icons.s1 .inner:before {
  right: 100%;
  margin-right: 15px;
  margin-top: 20px;
}

.social-icons.s1 .inner:after {
  left: 100%;
  margin-left: 15px;
  margin-top: 20px;
}

/* ================================================== */

/* accordion

/* ================================================== */


.accordion-section-title {
  color: #35404e;
  width: 100%;
  padding: 15px 0;
  cursor: poInter;
  font-family: var(--body-font);
  width: 100%;
  display: inline-block;
  font-size: 17px;
  transition: all linear 0.5s;
  text-decoration: none;
  font-weight: 600;
  overflow: none;
  border-bottom: solid 1px #dddddd;
}

.dark-scheme .accordion-section-title,
.text-light .accordion-section-title {
  color:#ffffff;
  border-bottom: solid 1px rgba(255, 255, 255,.4) !important;
}

.accordion-section-title:before {
  font-family: "FontAwesome";
  content: "\f107";
  float: right;
  color: var(--bg-dark-1);
  text-align: center;
  padding: 0 8px 0 8px;
  font-size: 15px;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  width: 30px;
}

.dark-scheme .accordion-section-title:before,
.text-light .accordion-section-title:before{
  color: #ffffff;
}

.rtl .accordion-section-title:before {
  float: left;
}

.accordion-section-title.active:before {
  content: "\f106";
}

.accordion-section-title.active {
  margin-bottom: 0px;
  text-decoration: none;
}

.accordion-section-title:hover {
  text-decoration: none;
}

.accordion-section-content {
  padding-top: 15px;
  padding-bottom: 5px;
  display: none;
  margin-bottom: 10px;
}


/* bs */
.de_tab .de_nav {
  overflow: hidden;
  padding-left: 0;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.de_tab .de_nav li {
  float: left;
  list-style: none;
  margin-right: 10px;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
}

.rtl .de_tab .de_nav li {
  float: right;
  margin-right: 0;
  margin-left: 0;
}

.de_tab .de_nav li span {
  border: solid 1px rgba(0, 0, 0, .2);
  display: block;
  text-decoration: none;
  color: #646464;
  font-size: 15px;
  cursor: poInter;
}

.dark-scheme .de_tab .de_nav li span {
  color: rgba(255, 255, 255, .3);
  background: #292F45;
}

.de_tab .de_nav li span {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.de_tab .de_tab_content {
  padding-top: 30px;
}

.de_tab .de_nav li.active span {
  background: #FFF;
  color: #222;
}

.de_tab .de_nav li.active span .v-border {
  display: none;
}

.de_tab .de_nav li.active span {
  background: #27282b;
}

/* new added */



/* tab de_light */

/* tab de_light */

.de_tab h3{
  font-size: 18px;
  margin-bottom: 10px;
}

.de_tab h3 span{
  font-size:40px ;
}

.de_tab p{
  margin-bottom: 0;
}

.de_nav h3{
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1em;
  margin-bottom: 0;
}


/* tab de_light */

/* testimonial
    /* ================================================== */

/*
.de_testi blockquote:before {
  font-family: FontAwesome;
  content: "\f10d";
  padding-bottom: 10px;
  font-size: 20px;
  display: inline-block;
  padding: 10px 20px 10px 20px;
  font-style: normal;
  background: #000;
  position: absolute;
  left: 15px;
  font-weight: normal;
}
*/

/* new timeline */

/* close new timeline */



/* css attributes */

.overflow-hidden {
  overflow: hidden;
}

/* ================================================== */


/* anim */


/* ================================================== */

header,
header *,
.hover,
.hover *,
.de_tab .de_nav li span,
a.btn-line:after,
.social-icons a i,
.mfp-close,
.mfp-close:hover,
.text-rotate-wrap,
.text-rotate-wrap .text-item,
.owl-slider-nav .next,
.owl-slider-nav .prev,
#back-to-top.show,
#back-to-top.hide,
.de_tab .de_nav li span,
#popup-box.popup-show,
#popup-box.popup-hide,
.btn-main,
#mainmenu *,
#mainmenu a span,
#mainmenu a.active span,
.dropdown *,
.d-carousel *,
#slider-carousel *,
.d_demo_img *,
.show-on-scroll,
#mainmenu>li::before,
#topbar,
#extra-wrap,
#btn-extra,
#btn-extra *,
.de-tab *{
  -o-transition: .5s cubic-bezier(0.6, 0.03, 0.28, 0.98);
  -ms-transition: .5s cubic-bezier(0.6, 0.03, 0.28, 0.98);
  -moz-transition: .5s cubic-bezier(0.6, 0.03, 0.28, 0.98);
  -webkit-transition: .5s cubic-bezier(0.6, 0.03, 0.28, 0.98);
  transition: .5s cubic-bezier(0.6, 0.03, 0.28, 0.98);
  outline: none;
}


#mainmenu li,
#mainmenu li ul,
.owl-prev,
.owl-next {
  -o-transition: .2s ease;
  -ms-transition: .2s ease;
  -moz-transition: .2s ease;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  outline: none;
}

header.header-mobile #mainmenu>li>span {
  -o-transition: none;
  -ms-transition: none;
  -moz-transition: none;
  -webkit-transition: none;
  transition: none;
  outline: none;
}

@-webkit-keyframes scaleIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.scaleIn {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn;
}

@-webkit-keyframes scaleInFade {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes scaleInFade {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes scaleOutFade {
  from {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1, 1);
    transform: scale(1, 1, 1);
  }
}

@keyframes scaleOutFade {
  from {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1, 1);
    transform: scale(1, 1, 1);
  }
}

@-webkit-keyframes widthInFade {
  from {
    opacity: 0;
    width: 1px;
  }

  100% {
    opacity: 1;
    width: 100px;
  }
}

@keyframes widthInFade {
  from {
    opacity: 0;
    width: 1px;
  }

  100% {
    opacity: 1;
    width: 100px;
  }
}

/* ================================================== */


/* video */


/* ================================================== */

video,
object {
  display: inline-block;
  vertical-align: baseline;
  min-width: 100%;
  min-height: 100%;
}

.de-video-container {
  top: 0%;
  left: 0%;
  height: 500px;
  width: 100%;
  overflow: hidden;
}

/* youtube, vimeo */

.de-video-container .btn-line:hover:after,
.de-video-container a.btn-line:hover:after,
.de-video-container a.btn-line.hover:after {
  color: #eceff3;
}

/* ================================================== */


/* map */


/* ================================================== */


/* --------------- map --------------- */

#map {
  width: 100%;
  height: 500px;
}

.map iframe {
  width: 100%;
  border: solid 1px #ccc;
  padding: 2px;
  background: #fff;
}

.map-container {
  width: 100%;
  height: 380px;
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    opacity: 0.0;
  }

  50% {
    opacity: 1.0;
  }

  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}

/* ================================================== */


/* overide bootstrap */


/* ================================================== */

.container-fluid {
  padding: 0px;
  margin: 0px;
}

p{
  margin-top: 0;
}

p.small{
  line-height: 1.8em;
}

.dark-scheme strong{
  color:#ffffff;
}

.progress {
  background: #27282B;
}

/* Vertical line */

/* ================================================== */


/* widget */


/* ================================================== */

.widget {
  margin-bottom: 30px;
  padding-bottom: 30px;
}

footer .widget{
  margin-bottom: 0;
}


.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget ul li {
  margin: 3px 0;
}


footer .widget {
  border: none;
  margin-bottom: 0;
}

footer .widget h5 {
  margin-bottom: 20px;
}

#cookit {
  position: fixed;
  width: 100%;
  bottom: 0;
  padding: 1rem 2rem;
  display: flex;
  z-index: 1022;
  background: rgba(20, 20, 20, 1) !important;
}

.dark-scheme #cookit {
  border-top: solid 1px rgba(255, 255, 255, .15);
}

#cookit.hidden {
  display: none;
}

#cookit #cookit-container {
  margin: auto;
  width: 1300px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#cookit #cookit-container>* {
  margin: .4rem;
}

#cookit #cookit-container p {
  line-height: 1.4rem;
}

#cookit #cookit-container a {
  text-decoration: none;
}

#cookit #cookit-container a:hover {
  opacity: .9;
}

#cookit #cookit-container #cookit-button {
  color: #ffffff !important;
  font-size: 14px;
  font-weight: bold;
  padding: .25rem 2rem;
  margin-left: auto;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
}

/* marquee */


.d-flex {
  display: flex;
  white-space: nowrap;
}

.de-marquee-list {
  display: flex;
  align-items: top;
  -webkit-animation: loop 40s infinite linear;
  animation: loop 40s infinite linear;
}

/* marquee */

.bg-blur {
  background: rgba(0, 0, 0, .15);
  -webkit-backdrop-filter: blur(10px);
  -o-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* marquee plugin close */

.gradient-edge-top {
  z-index: 1;
  position: absolute;
  top: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(180deg, rgba(var(--bg-dark-1-rgb), 1) 0%, rgba(var(--bg-dark-1-rgb), 0) 100%);
}

.gradient-edge-top.light {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.show-on-scroll{
  opacity: 0;
}

.show-on-scroll.show{
  opacity: 1;
}

.show-on-scroll.hide{
  opacity: 0;
}

/* select2 begin */

.select2-dropdown {
  border-radius: 0;
  box-shadow: #444 0px 3px 5px;
  border: 0;
}

/* select2 end */

/* ================================================== */

/* declass */

/* ================================================== */

/* background */
.bg-white{ background:#ffffff; }

/* width (percent) */
.w-80{width: 80%;}
.w-100{width: 100%;}

/* width (px) */

/* height (percent) */
.h-100{height: 100%;}

/* height (px) */

/* top (percent) */

/* top (px) */

/* bottom (percent) */
.bottom-10{bottom: 10%;}

/* bottom (px) */

/* top negative (px) */

/* bottom negative (px) */

/* left pos (percent) */

/* left pos (px) */

/* right  pos (percent) */

/* right  pos (px) */

/* margin-left (percent) */


/* margin-left (px) */


/* margin top (px) */

/* margin top negative (px) */

/* margin bottom (px) */

/* margin bottom negative (px) */

/* margin left negative (px) */

/* margin top negative (px) */

/* font-size (px) */
.fs-18{font-size: 18px;}
.fs-20{font-size: 20px;}
.fs-60{font-size: 60px;}


/* font-weight */

/* margin left (px) */

/* padding (px) */

/* padding bottom (px) */

/* padding top (px) */

/* padding left (px) */

/* border white */

/* border bottom white with transparency */

/* border bottom grey */

/* border bottom dark */

/* border bottom dark */

/* hover effects */
.hover:hover .hover-scale-1-1{transform: scale(1.1);}

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

.infinite{ animation-iteration-count: infinite;}

/* opacity */
.op-5{ opacity:.5; }
.op-6{ opacity:.6; }


/* line height em */
.lh-1{line-height: 1em;}

/* min height (px) */
.mh-600{min-height:600px;}

/* max height (px) */

/* background dark */

/* overlay-black */

/* overlay-black */

/* overlay-white */

/* positions */
.absolute,.abs { position: absolute;}
.relative { position: relative; }

/* z-index */
.z-2{ z-index:2 }

/* declass end */

/* custom tabs */
.de-tab .d-tab-nav {
  padding: 0;
  list-style: none;
  position: relative;
}
.de-tab .d-tab-nav .active-tab {
  border-bottom: none;
  font-weight: 500;
  position: relative;
  color: #ffffff;
  background: var(--primary-color);
}
.de-tab .d-tab-nav li {
  display: block;
  cursor: pointer;
  padding: 10px;
}
.de-tab .d-tab-content {
  padding: 0;
  margin: 0;
  list-style: none;
}
.de-tab .d-tab-content > li {
  display: none;
}

.de-tab .d-tab-nav li{
  display: inline-block;
  padding: 8px 20px;
}

.de-tab.pill .d-tab-nav{
  background: rgba(var(--primary-color-rgb),.2);
}

.text-light .de-tab.pill .d-tab-nav{
  background: rgba(255,255,255,.05);
}

.de-tab.pill .d-tab-nav{  
  display: flex;
  justify-content: space-around;
  border: none;
  border-radius:30px;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
  overflow: hidden;
}
.de-tab.pill .d-tab-nav li{
  font-weight: 500;
  text-align: center;
  flex-grow:1;
  opacity: .5;
}
.de-tab.pill .d-tab-nav li:not(.active-tab):hover{
  opacity: 1;
}
.de-tab.pill .d-tab-nav .active-tab{
  background: var(--primary-color);
  color:#ffffff;
  border:none;
  opacity: 1;
}

.de-tab.plain .d-tab-nav li{
  font-weight: 500;
  color:#000000;
  text-align: center;
  padding: 0;
  margin: 0;
  opacity: .4;
}
.de-tab.plain .d-tab-nav .active-tab{
  background: none;
  font-weight: bold;
  opacity: 1;
}


@media only screen and (max-width: 767px) {
  .d-tab-nav,
  .d-tab-nav li{
    display: block !important;
  }
}

/* custom tabs end */

/* de-dot */


@keyframes dot-pulse {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2.2);
        opacity: 0;
    }
}

/* de-vertical-nav begin */

/* de-vertical-nav end */


/* timeline begin */

@keyframes pulsing {
  from {
    box-shadow: 0 0 0 0 rgba(var(--secondary-color-rgb),1);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(var(--secondary-color-rgb),0);
  }
  to {
    box-shadow: 0 0 0 0 rgba(var(--secondary-color-rgb),0);
  }
}

/* de-timeline end */

/* timeline-s2 begin */

@keyframes pulsing {
  from {
    box-shadow: 0 0 0 0 rgba(var(--secondary-color-rgb),1);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(var(--secondary-color-rgb),0);
  }
  to {
    box-shadow: 0 0 0 0 rgba(var(--secondary-color-rgb),0);
  }
}

/* de-timeline end */


/* swiperjs */

.swiper{
  background: var(--bg-dark-1);  
}

.swiper,
.sw-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top: 0;
}

.swiper-slide{
    position: relative;
    background: var(--bg-dark-1);
} 

.sw-overlay{
  background: -webkit-linear-gradient(0deg,rgba(var(--bg-dark-1-rgb), .8) 0%, rgba(var(--bg-dark-1-rgb), .8) 50%);
  background: -moz-linear-gradient(0deg,rgba(var(--bg-dark-1-rgb), .8) 0%, rgba(var(--bg-dark-1-rgb), .8) 50%);
  background: linear-gradient(0deg,rgba(var(--bg-dark-1-rgb), .8) 0%, rgba(var(--bg-dark-1-rgb), .8) 50%);
}

.swiper-pagination{
  width: 100px;
  font-size: 20px;
  text-align: right;
  position: absolute;
  left: auto;
  right: 40px;
  bottom: 40px;
  font-weight: 400;
}

.swiper-button-next, .swiper-button-prev{
  color:#ffffff;
}

.swiper-button-next:after, .swiper-button-prev:after{
  font-size:24px;
}

.swiper-button-next{
  right: 20px;
}

.swiper-button-prev{
  left: 20px;
}


/* swiper end */


/* swiper #2 begin */
.swiper-slide .description,
.swiper-slide .title {
  display: block;
  opacity: 0;
  transition: 0.5s ease 0.5s;
}
.swiper-slide-active .description,
.swiper-slide-active .title {
  opacity: 1;
}
.swiper-slide-active .title {
  margin-bottom: 0.5rem;
  font-size: 24px;
  color: #000;
  transition: opacity 0.5s ease 0.5s;
}
.swiper-slide-active .description {
  font-size: 16px;
  color: #777;
  transition: opacity 0.5s ease 0.75s;
}

/* swiper #2 end */


.player {
  margin: 0 auto;
  background: none;
  width: 120px;
  height: 120px;
  border: solid 2px #fff;
  position: relative; 
  text-indent:-9999px;
}

.player span {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 20px solid #ffffff;
  border-bottom: 15px solid transparent;
  position:absolute;
  top:37.5%;
  left:45%; 
}

.player:hover{
  background:var(--primary-color);
  cursor:pointer;
  border:none;
  box-shadow:none;
}

.player:hover span{
  transform: scale(.8);
}

.player.invert span{
  border-left: 20px solid #000;
}


.player.invert:hover span{
  border-left: 20px solid #fff;
}

.de-flex #mainmenu{
  margin: 0;
}

.col-start, .col-end {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-grow: 1;
  flex-basis: 0;
}

.col-end{
  justify-content: end;
}

.col-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-center img{
  width: 160px;
}

@keyframes blinkingText{
  0%    { background: var(--primary-color);}
  50%   { background: rgba(var(--primary-color-rgb), 0); }
  100%    { background: var(--primary-color);}
}

.scrollbar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 4px;
  transition: all linear 0.1s;
  min-width: 0%;
  z-index:1000;
}

.scrollbar-v {
  background: var(--secondary-color);
  position: fixed;
  top: calc(50% + 60px);
  left: 43px;
  width: 2px;
  transition: all linear 0.1s;
  min-height: 0%;
  z-index:1000;
}

.scrollbar-v:before{
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  min-height: 100px;
  background: rgba(0, 0, 0, .15);
}


.scrollbar-v.dark:before{
  background: rgba(255, 255, 255, .2);
}

.float-text {
    font-family: var(--heading-font);
    width: 20px;
    position: fixed;
    z-index: 1002;
    margin-left: 30px;
    text-align: center;
    font-size: 12.5px;
    top: 50%;
    left: 16px;
    transform: translate(-50%, -50%);
    font-weight: 500;
}

.float-text a{
    color: #000000;
}

.float-text.dark a{
  color:#ffffff;
}

.float-text span{
    margin-left: -5px;
    margin-top: 20px;
    writing-mode: vertical-rl;
    letter-spacing: .75px;
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    color: #222;
}


.dark-scheme .float-text span{
    color: #ffffff;
}

/* de-number begin */

    .de-number{
      margin-top: 8px;
    }

    .d-minus, .d-plus{
      margin-top: -6px;
      cursor: pointer;
      color: #ffffff;
      font-size: 24px;
      width:36px;
      height:36px;
      padding:3px 5px 3px 5px;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */
      background: var(--primary-color);
    }
    .d-minus:active, .d-plus:active{
      background: #ffffff;
      color: #000;
    }
    .de-number input{
      width: 40px;
      text-align: center;
      font-size: 20px;
      border:none;
      padding: 3px !important;
      background: none;
      color:#ffffff;
      border:solid 1px var(--primary-color);
      }
/* de-number close */

.carousel-indicators [data-mdb-target]{
  background: none !important;
  margin: 0 10px;
}
.carousel-indicators [data-mdb-target] img {
    margin-top: 20px;
}

.d_demo_img {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 5px;
  margin-bottom: 15px;
  border-radius:var(--rounded-1);
  -moz-border-radius:var(--rounded-1);
  -webkit-border-radius:var(--rounded-1);

  box-shadow: 5px 20px 40px 5px rgba(0,0,0,.1);
  -webkit-box-shadow: 5px 20px 40px 5px rgba(0,0,0,.1);
  -moz-box-shadow: 5px 20px 40px 5px rgba(0,0,0,.1);
}

.d_demo_img:hover{
  border-color:rgba(var(--primary-color-rgb),1);
}

.d_demo_img:hover img {
  transform: scale(1.1);
}

.rtl .owl-carousel {
  direction: ltr;
}

.rtl .owl-carousel .owl-item {
  direction: rtl;
}

#item-carousel-big {
  padding: 0 25px;
}

.de-flex {
  display: flex;
  justify-content: space-between;
}

#loadmore {
  display: inline-block;
  margin-top: 10px;
}

.d-item {
  display: none;
}


.filter__r {
  font-family: var(--heading-font);
}

.filter__r {
  float: right;
  cursor: pointer;
}

/*Cookie Consent Begin*/
#cookieConsent {
  background-color: rgba(255, 255, 255, 0.8);
  min-height: 26px;
  font-size: 14px;
  line-height: 26px;
  font-weight: 500;
  padding: 10px 30px 10px 30px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 9999;
}

#cookieConsent a {
  text-decoration: none;
}

#closeCookieConsent {
  float: right;
  display: inline-block;
  cursor: poInter;
  height: 20px;
  width: 20px;
  margin: -15px 0 0 0;
  font-weight: bold;
}

#closeCookieConsent:hover {
  color: #FFF;
}

#cookieConsent a.cookieConsentOK {
  color: #fff;
  display: inline-block;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 0 20px;
  cursor: poInter;
}

#cookieConsent a.cookieConsentOK:hover {
  opacity: .8;
}

/*Cookie Consent End*/


#buy-now {
  position: fixed;
  bottom: 60px;
  left: 40px;
  z-index: 10000;

}

#buy-now a {
  color: #ffffff;
  z-index: 1;
  position: absolute;
  background: #333333;
  display: block;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 15px;
  text-align: center;
  width: 150px;
  line-height: 1em;
  text-decoration: none;
  animation: shadow-pulse 1s infinite;
  border-radius:30px;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
}

#buy-now a img{
  width: 64px;
  margin-left: 3px;
}

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(120, 169, 56, 0.2);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(120, 169, 56, 0);
  }
}

.opt-1 {
  display: inline-block;
}

.opt-2 {
  display: none;
}

.border {
  border-color: #EFEFEF !important;
}

.text-light .border {
  border-color: rgba(255, 255, 255, .1) !important;
}

.owl-carousel {
  position: relative;
  margin-top: -5px;
  bottom: -5px;
  margin-bottom: -15px;
}

.owl-thumbs img {
  padding: 3px;
}

#slider-carousel .owl-thumbs {
  padding: 3px;
  margin-bottom: 30px;
  width: auto;
}

#slider-carousel .owl-thumbs button {
  opacity: 1;
  border: none !important;
  padding: 0;
  margin-right: 15px;
  margin-bottom: 20px;
  opacity: 1;
  overflow: hidden;
  opacity: .5;
}

#slider-carousel .owl-thumb-item.active {
  opacity: 1;
}

#slider-carousel button.owl-thumb-item.active {
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.5);
}

#slider-carousel .owl-thumb-item img {
  background: #fff;
  padding: 0;
  width: 120px;
}

strong {
  font-weight: bold;
}

.text-light strong {
  color: #fff;
}

.bg-white {
  background: #ffffff;
}

#navigation {
  position: fixed;
  width: 100%;
  height: 60px;
  top: 0;
  right: 20px;
  text-align: center;
  margin-bottom: 60px;
  z-index: 1000;
}

.no-bottom {
  margin-bottom: 0;
  padding-bottom: 0;
}

p {
  margin-bottom: 20px;
}

.no-bottom {
  padding-bottom: 0 !important;
}

.no-top {
  padding-top: 0 !important;
}

#filters i {
  margin-right: 10px;
}

.form-control:focus {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.d-carousel {
  position: relative;
  display: flex;
  align-items: center;
}

.d-arrow-left,
.d-arrow-right {
  display: none;
  cursor: pointer;
  position: absolute;
  margin-top: -10px;
  z-index: 100;
  width: 30px;
  height: 60px;
  background-color: rgba(255, 255, 255, 1.0);
}

.d-arrow-left {
  left: 0px;
  border-top-right-radius: 110px;
  border-bottom-right-radius: 110px;
}

.d-arrow-right {
  right: 0px;
  border-top-left-radius: 110px;
  border-bottom-left-radius: 110px;
}

.d-arrow-left i,
.d-arrow-right i {
  position: absolute;
  z-index: 1000;
  top: 20px;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
}

.d-arrow-left i {
  left: 8px;
}

.d-arrow-right i {
  right: 8px;
}

.owl-nav {
  display: flex;
}

.owl-prev,
.owl-next {
  cursor: pointer;
  position: absolute;
  top: 27.5%;
  z-index: 100;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 1.0);
  border: solid 1px #ccc;
}

.dark-scheme .owl-prev,
.dark-scheme .owl-next {
  background: var(--bg-color-even);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .1);
}

.owl-prev:hover,
.owl-next:hover {
  transform: scale(1.1);
  -webkit-box-shadow: 5px 5px 30px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 5px 5px 30px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 5px 30px 0px rgba(0, 0, 0, 0.2);
}

.owl-prev {
  left: -12px;
  border-radius: 60px;
  padding-left: 4px;
}

.owl-next {
  right: -12px;
  border-radius: 60px;
  padding-right: 4px;
}

.owl-next i {
  top: 12px;
  left: 16px;
}

/* new owl */

.owl-dots button {
  border: none;
  outline: none;
  padding: 0;
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border-radius: 30px;
  background: rgba(0, 0, 0, .15);
}

/* new owl close */

.text-item i {
  font-size: 60px;
  margin-top: 5px;
}

.text-rotate-wrap {
  display: inline-block;
}

.text-rotate-wrap .text-item {
  display: none;
}

.wow {
  visibility: hidden;
}

#back-to-top {
  background: var(--primary-color);
  position: fixed;
  bottom: -40px;
  right: 20px;
  z-index: 1020;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 30px;
  cursor: poInter;
  padding-top: 3px;
  border: 0;
  text-decoration: none;
  transition: opacity 0.2s ease-out;
  outline: none;
  opacity: 0;
  border-radius:30px;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
}

#back-to-top:hover {
  transform: scale(1.1);
}

#back-to-top.show {
  bottom: 20px;
  opacity: 1;
}

#back-to-top.hide {
  bottom: -40px;
}

#back-to-top:before {
  font-family: "FontAwesome";
  font-size: 18px;
  content: "\f106";
  color: #fff !important;
  position: relative;
}

/* mouse scroll icon begin */

.mouse {
  position: absolute;
  width: 22px;
  height: 42px;
  bottom: 40px;
  left: 50%;
  margin-left: -12px;
  border-radius: 15px;
  border: 2px solid #fff;
  -webkit-animation: intro 1s;
  animation: intro 1s;
}

.scroll {
  display: block;
  width: 3px;
  height: 3px;
  margin: 6px auto;
  border-radius: 4px;
  background: #fff;
  -webkit-animation: finger 1s infinite;
  animation: finger 1s infinite;
}

@-webkit-keyframes intro {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes intro {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes finger {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes finger {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

/* mouse scroll icon close */

@-moz-keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@-webkit-keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}


/* owl */
.owl-custom-nav .btn-prev:before,
.owl-custom-nav .btn-next:before{
display: block;
font-family:"FontAwesome";
content:"\f105";
color:#ffffff;
padding:10px 0;
font-size:20px;
width: 40px;
height: 50px;
background: var(--primary-color);
text-align: center;
}
.owl-custom-nav .btn-prev:before{
content:"\f104";
border-radius:0 30px 30px 0;
-moz-border-radius:0 30px 30px 0;
-webkit-border-radius:0 30px 30px 0;
}
.owl-custom-nav .btn-next:before{
border-radius:30px 0 0 30px;
-moz-border-radius:30px 0 0 30px;
-webkit-border-radius:30px 0 0 30px;
}

.owl-custom-nav.dark .btn-prev:before,
.owl-custom-nav.dark .btn-next:before{
  color:#000000;
}

.owl-custom-nav a{
  text-decoration:none;
}

.owl-prev,.owl-next{
  display: none;
}

#custom-owl-slider {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  background: #fff;
}

#custom-owl-slider .items {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 20;
  visibility: inherit;
  opacity: 1;
}

#custom-owl-slider .item img {
  display: block;
  width: 100%;
  height: 100%;
}

.owl-slider-nav {
  position: absolute;
  width: 100%;
}

.owl-slider-nav,
.owl-slider-nav div {
  position: absolute;
  z-index: 10;
  cursor: poInter;
}

.owl-slider-nav .next {
  right: -50px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 50px solid transparent;
}

.owl-slider-nav .prev {
  left: -50px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
}

.owl-slider-nav .next:before {
  font-family: "FontAwesome";
  font-size: 24px;
  content: "\f0da";
  color: #fff;
  position: absolute;
  right: -40px;
  top: -13px;
}

.owl-slider-nav .prev:before {
  font-family: "FontAwesome";
  font-size: 24px;
  content: "\f0d9";
  color: #fff;
  position: absolute;
  left: -40px;
  top: -13px;
}

.owl-dots {
  text-align: center;
}

.owl-dot {
  background: #ccc;
  border: none;
  margin: 5px;
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}

.dark-scheme .owl-dot,
.text-light .owl-dot {
  background: rgba(255, 255, 255, .2);
}

.owl-stage {
  overflow: none;
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.5s infinite;
  -moz-animation: blink 0.5s infinite;
  animation: blink 0.5s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.list {
  margin: 0;
  padding: 0;
}

.list li {
  list-style: none;
}

.rtl .list.s1 li:after,
.list.s1 li:before {
  font-family: FontAwesome;
  content: "\f00c";
  margin-right: 10px;
}

.rtl .list.s1 li:after {
  margin-right: 0;
  margin-left: 10px;
}

.rtl .list.s1 li:before {
  display: none;
}

.dark-scheme .switch {
  background: rgba(255, 255, 255, .1);
}

.switch {
  margin-bottom: -5px;
  -webkit-appearance: none;
  height: 22px;
  width: 42px;
  background-color: #F4F4F4;
  border-radius: 60px;
  position: relative;
  cursor: poInter;
  border: none;
}

.switch::after {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  position: absolute;
  border-radius: 100%;
  transition: .5s;
  margin: 2px 0 0 2px;
}

.switch-with-title h5 {
  float: left;
}

.switch:checked::after {
  transform: translateX(20px);
}

.switch:focus {
  outline-color: transparent;
}

.menu_side_area {
  display: flex;
  align-items: center;
}

.rtl .menu_side_area {
  margin-left: 0;
}

.de_countdown {
  text-align: right;
  z-index: 100;
  padding: 0 0 10px 0;
}

.dark-scheme .de_countdown {
  color: #fff;
  background: none;
}

.countdown-section {
  font-size: 28px;
  margin-left: 8px;
  font-weight: bold;
}

.hide-content {
  display: none;
}


/* shadow */

.circle{
  border-radius:100%;
  -moz-border-radius:100%;
  -webkit-border-radius:100%;
}

.carousel-indicators [data-mdb-target] {
  background-color: var(--primary-color);
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
}


/* image effect */

@-webkit-keyframes move-up-down {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-10px);
  }
}

@keyframes move-up-down {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-10px);
  }
}

/* price list */
#search {
  float: left;
  width: 70%;
  margin-bottom: 0;
}

/* dropdown */
/* ------------------------------ */
.dropdown {
  position: relative;
  z-index: 500;
  font-weight: 600;
  display: inline-block;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  text-align: left;
}

.dropdown a,
.dropdown a:hover {
  text-decoration: none;
  outline: none;
  display: inline-block;
}

.dropdown a {
  color: #333;
}

.dark-scheme .dropdown a {
  color: #ffffff;
}

.dropdown>a {
  display: inline-block;
  padding: 7px 12px 7px 12px;
  min-width: 140px;
  border: solid 1px rgba(0, 0, 0, .2);
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  font-weight: bold;
}

.dark-scheme .dropdown>a {
  border: solid 1px rgba(255, 255, 255, .2);
}

.dropdown>a:after {
  font-family: "FontAwesome";
  font-size: 16px;
  content: "\f107";
  position: relative;
  float: right;
  margin-left: 10px;
}

.rtl .dropdown>a:after {
  margin-left: 0;
  float: left;
}

.dropdown ul,
.dropdown li {
  list-style: none;
  display: block;
  padding: 0;
  margin: 0;
}

.dropdown ul {
  background: #ffffff;
  padding: 10px;
  position: absolute;
  min-width: 140px;
  display: none;
  cursor: pointer;
  border: solid 1px rgba(0, 0, 0, .1);
}

.dropdown li span {
  background: #ffffff;
  display: block;
  padding: 5px 10px 5px 10px;
  border-top: none;
  width: 100%;
  font-weight: 400;
  font-size: 14px;
}

.dark-scheme .dropdown li span {
  background: var(--bg-dark-1);
  border: solid 1px rgba(255, 255, 255, .1);
}

.dark-scheme .dropdown li span:hover {
  background: var(--bg-color-even);
  color: #fff;
}

.dropdown li span:hover {
  color: #ffffff;
  background: #eeeeee;
}

.dropdown li.active {
  display: none;
}

.text-light .dropdown {
  background: none;
  border: solid 1px rgba(255, 255, 255, .1);
}

.text-light .dropdown a {
  color: #ffffff;
}  

/* --------------------------------------------------
* plugin
* --------------------------------------------------*/

/* ================================================== */


/* isotope */


/* ================================================== */

.isotope {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

/**** disabling Isotope CSS3 transitions ****/

#filters {
  font-family: var(--body-font);
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
  font-weight: 400;
}

#filters li {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 25px;
}

#filters a {
  outline: none;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  font-weight: 600;
}

.text-light #filters a {
  color: rgba(255, 255, 255, .5);
}

#filters a:hover {  
  background: rgba(255, 255, 255, .2);
}

#filters a.selected {
  color: #fff;
}

.text-light #filters a:hover {
  color: #fff;
}

.text-light #filters a.selected {
  color: #fff;
}

.text-light #filters a.selected {
  color: #fff;
}

a,
img {
  outline: 0;
}

/* overwrite bootstrap */

@-webkit-keyframes grow {
  to {
    transform: translateX(-50%) scale(0);
  }
}

@keyframes grow {
  to {
    transform: translateX(-50%) scale(0);
  }
}


/* -------------------------Line Preloader--------------------- */

@keyframes anim4 {
  to {
    transform: rotate(360deg);
  }
}

/* ================================================== */


/* R E S P O N S I V E */


/* ================================================== */

@media (min-width: 1000px){
    .container {
        max-width: var(--container-max-width);
    }
}


@media (min-width: 1200px) {

  .container {
    max-width: 1200px;
  }
}


@media (min-width: 1400px) {

  .container {
    max-width: 1304px;
  }
}


/* bootstrap cols 5 */
/* bootstrap cols 5 end */

@media(min-width:980px) and (max-width: 1199px) {
  #mainmenu li a:after {
    margin-left: 15px;
  }

  .container {
    min-width: 95%;
  }
}

/* -------------------------------------------------- 
    design for 768px
    /* ================================================== */

@media only screen and (max-width: 992px) {

  .container{
    max-width: 100%;
  }

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

  #menu-btn {
    display: block;
    float: right;
    z-index: 1000;
    top: 0;
    right: 0;
  }

  #mainmenu>li::before{
    display: none;
  }

  header {
    display: none;
  }

  header,
  header.fixed {
    display: block;
    position: inherit;
    margin: 0;
    padding: 0;
    margin-top: 0;
    height: auto;
    background: var(--bg-dark-1);
  }

  header.autoshow {
    height: auto;
    top: 0;
  }

  header.autoshow #mainmenu li a {
    background: none;
  }

  #logo,
  #logo .inner {
    vertical-align: middle;
    height: auto;
  }

  nav {
    height: 0;
  }

  #mainmenu {
    position: fixed;
    height: 100%;
    z-index: 200;
    width: 200px;
    margin: 0;
    margin-top: 10px;
    padding: 0;
    padding-top: 20px;
    padding-bottom: 100px !important;
    overflow-y: auto;
    top: 100px;
  }

  #mainmenu ul {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  #mainmenu a.menu-item {
    text-align: left;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #mainmenu li.has-child:after {
    display: none;
  }

  #mainmenu li li a.menu-item,
  #mainmenu li li li a.menu-item {
    padding-left: 0;
  }

  #mainmenu a.menu-item:hover {
    background: #111;
  }

  #mainmenu a.menu-item:hover {
    background: #111;
  }

  #mainmenu li ul {
    display: block;
    position: inherit;
    margin: 0;
    width: 100%;
  }

  #mainmenu li {
    border-bottom: solid 1px var(--bg-dark-3);
    margin: 0;
    width: 100%;
    display: block;
  }

  #mainmenu li a.menu-item:after {
    display: none;
  }

  #mainmenu li:last-child {
    margin-bottom: 30px;
  }

  #mainmenu li ul {
    border-top: solid 1px #eee;
    top: auto;
    width: auto;
    height: auto;
    position: inherit;
    visibility: visible;
    opacity: 1;
  }

  #mainmenu>li.menu-item-has-children>a.menu-item {
    position: relative;
    padding-right: 15px;
  }

  #mainmenu>li.menu-item-has-children>a.menu-item:after {
    content: "\f107";
    font-family: "FontAwesome";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
  }

  #mainmenu li ul a.menu-item {
    width: 100%;
    background: none;
    border: none;
  }

  #mainmenu li ul li {
    border: none;
    padding-left: 40px;
  }

  #mainmenu li ul li a.menu-item {
    display: block;
  }

  #mainmenu li ul li:last-child {
    border-bottom: none;
    margin: 0;
  }

  #mainmenu li ul li:last-child a.menu-item {
    border-bottom: none;
  }

  #mainmenu li a {
    color: #eceff3;
  }

  #mainmenu li li a.menu-item:hover {
    color: #fff;
  }

  #mainmenu ul:not(.mega) {
    border: none;
  }

  #back-to-top {
    display: none;
  }

  header.header-mobile {
    overflow: hidden;
    position: relative;
  }

  header.header-mobile #mainmenu {
    width: 100%;
    padding-right: 30px;
    position: absolute;
  }

  header.header-mobile #mainmenu ul {
    background: none;
  }

  header.header-mobile #mainmenu a.menu-item {
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  header.header-mobile #mainmenu a.menu-item:hover {
    background: none;
  }

  header.header-mobile #mainmenu li ul {
    display: block;
    position: inherit;
    margin: 0;
    width: 100%;
  }

  header.header-mobile #mainmenu li {
    border-bottom: solid 1px rgba(255, 255, 255, .2);
    margin: 0;
    width: 100%;
    display: block;
  }

  .dark-scheme header.header-mobile #mainmenu li {
    border-bottom-color: rgba(255, 255, 255, .1);
  }

  header.header-mobile #mainmenu li a.menu-item:after {
    display: none;
  }

  header.header-mobile #mainmenu li:last-child {
    margin-bottom: 30px;
  }

  header.header-mobile #mainmenu li ul {
    border-top: none;
    top: auto;
  }

  header.header-mobile #mainmenu li ul a.menu-item {
    width: 100%;
    background: none;
    border: none;
  }

  header.header-mobile #mainmenu li ul li {
    border: none;
    padding-left: 40px;
  }

  header #mainmenu li ul li:first-child {
    border-top: solid 1px var(--bg-dark-3);
  }

  .dark-scheme header #mainmenu li ul li:first-child {
    border-top-color: rgba(255, 255, 255, .1);
  }

  header.header-mobile #mainmenu li ul li a.menu-item {
    display: block;
    border-bottom: solid 1px var(--bg-dark-3);
  }

  header.header-mobile #mainmenu li ul li:last-child {
    border-bottom: none;
    margin: 0;
  }

  header.header-mobile #mainmenu li ul li:last-child a.menu-item {
    border-bottom: none;
  }

  header.header-mobile #mainmenu li a {
    color: #ffffff;
  }

  .dark-scheme header.header-mobile #mainmenu li a.menu-item {
    color: #ffffff;
  }
  
  header.header-mobile #mainmenu li a.menu-item:hover {
    color: var(--secondary-color);
  }

  .dark-scheme header.header-mobile #mainmenu li a.menu-item:hover {
    color: #fff;
  }

  header.header-mobile #mainmenu li ul {
    height: 0;
    overflow: hidden;
    position: relative;
    left: 0;
  }

  header.header-mobile #mainmenu li ul li ul {
    margin-bottom: 10px;
  }

  header.header-mobile #mainmenu>li>span {
    width: 36px;
    height: 36px;
    background: url(../images/ui/arrow-down-light.png) center no-repeat;
    position: absolute;
    right: 0;
    margin-top: 10px;
    z-index: 1000;
    cursor: poInter;
  }

  .dark-scheme header.header-mobile #mainmenu>li>span {
    background: url(../images/ui/arrow-down-light.png) center no-repeat;
  }

  header.header-mobile #mainmenu li span.active {
    background: url(../images/ui/arrow-up-light.png) center no-repeat;
  }

  .dark-scheme header.header-mobile #mainmenu li span.active {
    background: url(../images/ui/arrow-up-light.png) center no-repeat;
  }

  header.header-mobile #mainmenu li>ul>li>span {
    width: 36px;
    height: 36px;
    background: url(../images/ui/arrow-down.png) center no-repeat;
    position: absolute;
    right: 0;
    margin-top: -45px;
    z-index: 1000;
    cursor: poInter;
  }

  header.header-mobile #mainmenu>li>ul>li>span.active {
    background: url(../images/ui/arrow-up.png) center no-repeat;
  }

  header.header-mobile #mainmenu li ul li a.menu-item {
    border-bottom: solid 1px rgba(255, 255, 255, .2);
  }

  .dark-scheme header.header-mobile #mainmenu li ul li a.menu-item {
    border-bottom-color: rgba(255, 255, 255, .1);
  }

  header.header-mobile #mainmenu li ul li:last-child>a.menu-item {
    border-bottom: none;
  }

  /* header light */

  .sm-hide {
    display: none;
  }

  #mainmenu a.menu-item span {
    display: none;
  }

  .subfooter .de-flex {
    display: block;
  }

  .subfooter .social-icons {
    margin-top: 20px;
  }

  .subfooter span.copy {
    margin-top: 20px;
    display: block;
  }

  .dropdown {
    display: inline-block;
    margin-bottom: 10px;
  }

  section{
    padding: 60px 0;
  }

  /* title tablet */

  h1{
    font-size: 60px;
  }

  h2{
    font-size: 40px;
  }

  /* padding top (px) */

  /* padding top (px) */

  /* margin top (px) */

  /* margin top (px) */
  .mb-sm-30{margin-bottom:30px;}
  .fs-sm-10vw{font-size: 10vw}

  #content{
    margin-top: 50px;
  }

  #btn-extra{
    display: none;
  }

  header.logo-center{
    padding-top: 10px;
  }

}

/* -------------------------------------------------- 
    custom for 320px & 480px 
    /* -------------------------------------------------- */

@media only screen and (max-width: 767px) {

  header .btn-main{
    display: none;
  }

  #topbar{
    display: none;
  }

  .menu_side_area {
    margin-left: 20px;
    width: 100%;
    position: relative;
    right: 0;
    text-align: right;
    z-index: 0;
    display: block;
  }

  header .container {
    min-width: 100%;
  }

  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .text-item {
    font-size: 48px;
    line-height: 48px;
  }

  .text-item i {
    font-size: 36px;
  }

  header a.btn-main{
    display: none !important;
  }

  .scrollbar-v,
  .float-text{
    display: none;
  }

  section{
    padding: 40px 0;
  }

  /* title phone */

  h1{
    font-size: 48px;
  }

  h2{
    font-size: 36px;
  }

}

/* -------------------------------------------------- 
    design for 480px
    /* -------------------------------------------------- */

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* -------------------------------------------------- 
    design for 320px
    /* -------------------------------------------------- */

@media only screen and (max-width: 480px) {

  .text-item {
    font-size: 32px;
    line-height: 32px;
  }

  .text-item i {
    font-size: 24px;
  }

  header a.btn-main i {
    display: inline-block;
  }

}

@media only screen and (max-width: 360px) {
  #topbar {
    display: none;
  }
}

/* section control */
@media only screen and (min-device-width: 768) and (max-device-width: 1024) and (orientation: portrait) {
  section {
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    background-attachment: scroll;
  }
}

@media only screen and (max-width: 992px) {

  section {
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    background-attachment: scroll;
  }
}