* {
   --body-font: "Manrope", Helvetica, Arial, sans-serif;
   --body-font-size: 16px;
   --body-font-color: rgba(0, 0, 0, .6);
   --body-font-color-dark: rgba(255, 255, 255, .75);
   --body-font-weight: 500;
   --heading-font: "Manrope", Helvetica, Arial, sans-serif;
   --heading-font-weight: bold;
   --heading-font-color: #000000;
   --heading-text-transform: none;
   --h1-font-size: 60px;
   --h1-font-weight: var(--heading-font-weight);
   --h1-letter-spacing: -0.02em;
   --h1-line-height: 1.25em;
   --h1-margin-bottom: 20px;
   --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-font-size: 26px;
   --h3-font-weight: var(--heading-font-weight);
   --h3-letter-spacing: 0;
   --h3-line-height: 1.5em;
   --h3-margin-bottom: 10px;
   --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-font-size: 18px;
   --h5-font-weight: var(--heading-font-weight);
   --h5-letter-spacing: 0;
   --h5-line-height: 1.6em;
   --h5-margin-bottom: 10px;
   --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-font: var(--body-font);
   --mainmenu-font-size: 15px;
   --mainmenu-font-weight: 700;
   --mainmenu-letter-spacing: 0;
   --mainmenu-text-transform: none;
   --logo-width: 145px;
   --logo-footer-width: 150px;
   --border-default: solid 1px rgba(30, 30, 30, 1);
   --bg-color-even: #E8E8E8;
   --bg-color-odd: #F4F4F4;
   --bg-light: #F8F9FA;
   --bg-dark-1: #101435;
   --bg-dark-2: #1A1E42;
   --bg-dark-3: #1e1e1e;
   --bg-dark-1-rgb: 16, 20, 53;
   --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;
   --btn-color: #fff;
   --btn-hover-bg: var(--bg-dark-1);
   --btn-font-family: var(--body-font);
   --btn-font-size: 12px;
   --btn-font-weight: 800;
   --btn-letter-spacing: 2px;
   --btn-padding: 4px 20px;
   --btn-rounded: 6px;
   --btn-text-decoration: none;
   --btn-text-transform: uppercase;
   --gradient-text: 0deg, #888888 0%, #ffffff 75%
 }

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

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

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

 .rounded-1 {
   border-radius: var(--rounded-1) !important;
   -moz-border-radius: var(--rounded-1) !important;
   -webkit-border-radius: var(--rounded-1) !important
 }

 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 {
   width: 100%;
   position: absolute;
   left: 0;
   z-index: 1001;
   background: var(--bg-dark-1) !important;
   margin: 0
 }

 header.transparent {
   background: none
 }

 body:not(.side-layout) header:not(.smaller):not(.header-mobile).header-light.transparent {
   background: #fff0
 }

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

 header.autoshow.scrollOn,
 header.autoshow.scrollOff {
   -o-transition: .5s;
   -ms-transition: .5s;
   -moz-transition: .5s;
   -webkit-transition: .5s;
   transition: .5s;
   outline: none
 }

 header.autoshow.scrollOn {
   top: 0
 }

 header.autoshow.scrollOff {
   top: -120px
 }

 header div#logo {
   color: #fff;
   -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.smaller #mainmenu ul ul {
   top: 0
 }

 header.smaller {
   position: fixed;
   top: 0;
   background: var(--bg-dark-1);
   -webkit-backdrop-filter: blur(10px);
   -o-backdrop-filter: blur(10px);
   -moz-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   border: none
 }

 header.header-mobile.header-float .header-inner,
 header.smaller.header-float .header-inner {
   background: none;
   margin-top: 0;
   padding: 0
 }

 header.smaller.header-float.header-light .header-inner {
   background: none
 }

 header.header-light.smaller {
   background: #fff
 }

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

 .scroll-up {
   margin-top: 0
 }

 header.header-center.scroll-down {
   margin-top: -175px
 }

 header.header-center #logo-center {
   display: inline-block;
   padding-top: 40px
 }

 header.header-center #mainmenu {
   display: inline-block
 }

 header.header-center {
   text-align: center
 }

 header.header-center #logo {
   display: none
 }

 header.smaller .logo-init {
   display: none
 }

 header.smaller #topbar {
   margin-top: -42px;
   overflow: hidden
 }

 header.smaller #topbar.topbar-dark {
   background: rgb(34 34 34 / .05)
 }

 header.smaller #topbar.topbar-dark a {
   color: #333
 }

 header .logo-mobile {
   display: none
 }

 header.smaller.scroll-light {
   background: #fff
 }

 header.scroll-light .logo-scroll {
   display: none
 }

 header.smaller.scroll-light .logo-main {
   display: none
 }

 header.smaller.scroll-light .logo-scroll {
   display: block
 }

 header.smaller.scroll-dark {
   background: var(--bg-color-even)
 }

 header:not(.header-light).smaller.scroll-light div#logo .logo {
   display: none
 }

 header.smaller.scroll-light div#logo .logo-2 {
   display: inline-block
 }

 header.smaller.scroll-light div#logo .logo-scroll {
   display: inline-block
 }

 header.smaller.header-light div#logo .logo {
   display: none
 }

 header.smaller.scroll-light .social-icons i {
   color: var(--heading-font-color)
 }

 header.smaller.scroll-light #mainmenu li a,
 header.smaller.scroll-light #mainmenu li.has-child:after {
   color: var(--heading-font-color)
 }

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

 header.smaller div#logo .logo-1 {
   display: none
 }

 header.smaller div#logo .logo-2 {
   display: inline-block
 }

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

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

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

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

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

 #mainmenu>li {
   margin-right: 15px
 }

 #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: #fff;
   background: var(--primary-color)
 }

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


 #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: 0
 }

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

 #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: 400;
   border-bottom: solid 1px rgb(255 255 255 / .1);
   letter-spacing: 0
 }

 #mainmenu li li a:hover {
   background: var(--primary-color)
 }

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

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

 #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 {
   position: relative
 }

 #mainmenu li a:before {
   content: '';
   width: 0;
   height: 3px;
   position: absolute;
   left: 0;
   bottom: 20px;
   background: var(--primary-color)
 }

 #mainmenu li a.active:before {
   width: calc(100% - 5px)
 }

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

 #mainmenu ul li b {
   background: #333;
   color: #fff;
   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: 0
 }

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

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

 #mainmenu select option {
   padding: 10px
 }

 #mainmenu .btn-type {
   padding: 0;
   margin: 0
 }

 #mainmenu .btn-type a {
   background: #eee;
   padding: 0;
   margin: 0
 }

 #mainmenu>li ul.mega {
   position: fixed;
   left: 0;
   height: 0%;
   width: 100%;
   visibility: hidden;
   opacity: 0;
   overflow: hidden;
   padding: 0;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   background: none
 }

 #mainmenu>li ul.mega>li {
   padding: 0;
   margin: 0
 }

 #mainmenu>li ul.mega .sb-menu {
   background: #fff;
   border-radius: 6px;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border: solid 1px #ddd
 }


 #mainmenu li ul.mega>li,
 #mainmenu li ul.mega>li a {
   width: 100%
 }

 #mainmenu li ul.mega li.title {
   padding: 0 10px 15px 10px;
   text-align: left;
   color: #fff;
   font-weight: 700
 }

 #mainmenu li ul.mega>li ul {
   position: static;
   visibility: visible;
   opacity: 1;
   left: 0;
   float: none;
   width: 100%
 }

 #mainmenu ul.mega>li ul li {
   margin: 0;
   padding: 0
 }

 #mainmenu ul.mega>li ul li:last-child {
   border-bottom: none
 }

 #mainmenu li ul.mega .menu-content {
   background: #171A21;
   padding: 30px
 }

 #mainmenu li ul.mega li.title {
   font-family: var(--main-font);
   padding: 0;
   text-align: left;
   font-weight: 700;
   color: #586383
 }

 #mainmenu ul.mega>li ul {
   border: none
 }

 #mainmenu li ul.mega ul li a {
   background: none;
   padding: 2px 0
 }

 #mainmenu li ul.mega ul li a:hover {
   color: #35404e
 }

 header.header-mobile #mainmenu>li ul.mega {
   visibility: visible;
   opacity: 1
 }

 header:not(.header-mobile) #mainmenu>li:hover ul.mega {
   height: auto
 }

 #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: 0;
   margin-left: 20px
 }

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

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

 section {
   padding: 100px 0 100px 0
 }

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

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

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

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

 .subfooter {
   margin-top: 50px;
   border-top: solid 1px rgb(255 255 255 / .1);
   padding: 20px 0 20px 0
 }

 header.header-mobile {
   position: fixed !important;
   background: var(--heading-font-color);
   top: 0;
   padding-top: 20px;
   padding-bottom: 20px
 }

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

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

 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,
 #mainmenu li ul.mega a.btn-main {
   background: #4080F5;
   background: linear-gradient(90deg, rgb(64 128 245) 0%, rgb(87 42 194) 100%);
   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: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 rgb(255 255 255 / .5)
 }

 .text-light .btn-line {
   color: #fff
 }


 header:not(.header-light) a.btn-line,
 .dark-scheme a.btn-line,
 .dark-schem a.btn-line:hover {
   color: #fff
 }
 .spacer-single {
   width: 100%;
   height: 30px;
   display: block;
   clear: both
 }

 h1,
 h2,
 h4,
 h3,
 h5,
 h6,
 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6,
 h5 {
   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_big,
 .dark-scheme .h1,
 .dark-scheme .h2,
 .dark-scheme .h3,
 .dark-scheme .h4,
 .dark-scheme .h5,
 .dark-scheme .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)
 }

 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)
 }

 .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
 }

 .text-light h1,
 .text-light h2,
 .dark-scheme h1,
 .dark-scheme h2 {
   background: -webkit-linear-gradient(var(--gradient-text));
   background: -moz-linear-gradient(var(--gradient-text));
   background: linear-gradient(var(--gradient-text));
   -webkit-background-clip: text;
   -webkit-text-fill-color: #fff0
 }

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

 .ul-check li {
   margin: 5px 0 5px 0
 }

 .ul-check li:before {
   font-family: "FontAwesome";
   content: "\f00c";
   margin-right: 15px;
   color: var(--primary-color)
 }

 #preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999
 }

 #preloaderLogo {
   width: 200px;
   height: auto;
   opacity: 0;
   transition: opacity .5s ease
 }

 #loadingPercentage {
   position: absolute;
   bottom: 50px;
   right: 50px;
   font-size: 25px;
   font-weight: 800;
   opacity: 0;
   transition: opacity .5s ease;
   background: var(--primary-color);
   background: linear-gradient(to right, var(--primary-color) 0%, var(--secondary-color) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: #fff0
 }

 .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: rgb(255 255 255 / .1)
 }

 .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 #ddd
 }

 .dark-scheme .accordion-section-title,
 .text-light .accordion-section-title {
   color: #fff;
   border-bottom: solid 1px rgb(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: #fff
 }


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

 .accordion.s2 .accordion-section-title {
   border: none;
   border-bottom: solid 1px #ddd
 }

 .overflow-hidden {
   overflow: hidden
 }

 header,
 header *,
 .hover,
 .hover *,
 .de_tab .de_nav li span,
 a.btn-line:after,
 .de_count,
 .social-icons a i,
 .de_tab.tab_methods .de_nav li span,
 .de_tab.tab_methods .de_nav li span:hover,
 .mfp-close,
 .mfp-close:hover,
 .text-rotate-wrap,
 .text-rotate-wrap .text-item,
 .carousel-item .pf_text .title,
 .carousel-item:hover .pf_text .title,
 .carousel-item .pf_text .title .type,
 .carousel-item:hover .pf_text .title .type,
 .owl-slider-nav .next,
 .owl-slider-nav .prev,
 #back-to-top.show,
 #back-to-top.hide,
 .social-icons-sm i,
 .social-icons-sm i:hover,
 .de_tab .de_nav li span,
 #popup-box.popup-show,
 #popup-box.popup-hide,
 .d-btn-close,
 .btn-main,
 .de_tab.tab_style_4 .de_nav li,
 .form-subscribe input[type=text],
 #mainmenu *,
 #mainmenu a span,
 #mainmenu a.active span,
 #mainmenu li a.active:before,
 .error_input,
 .de_tab.tab_methods.style-2 .de_nav li.active .arrow,
 .owl-item.active.center div blockquote,
 .mask *,
 .mask .cover,
 .mask:hover .cover,
 .mask img,
 .mask:hover img,
 .accordion .content,
 a.btn-border,
 #contact_form input,
 #form_subscribe input[type=text],
 .logo-carousel img,
 a.a-underline *,
 .dropdown *,
 .form-border *,
 .d-carousel *,
 #slider-carousel *,
 .container-timeline *,
 .d_demo_img *,
 .carousel-control-next-icon,
 .carousel-control-prev-icon,
 .grayscale,
 .hover-color,
 .show-on-scroll,
 #mainmenu>li::before,
 .btn-plus,
 .btn-plus *,
 .btn-with-arrow:after,
 .btn-with-arrow:before,
 #topbar,
 #extra-wrap,
 #btn-extra,
 #btn-extra *,
 .crumb *,
 .active-show,
 .de-dot *,
 .de-tab * {
   -o-transition: all 1s cubic-bezier(.6, .03, .28, .98);
   -ms-transition: all 1s cubic-bezier(.6, .03, .28, .98);
   -moz-transition: all 1s cubic-bezier(.6, .03, .28, .98);
   -webkit-transition: all 1s cubic-bezier(.6, .03, .28, .98);
   transition: all 1s cubic-bezier(.6, .03, .28, .98);
   outline: none
 }

 a.btn-fx:after,
 a.btn-fx:hover:after,
 a.btn-fx:before,
 a.btn-fx:hover:before,
 #mainmenu li,
 #mainmenu li ul,
 .widget-post li .post-date,
 .items_filter *,
 .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
 }

 @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
 }

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

 p {
   margin-top: 0
 }

 p.lead {
   font-size: 18px;
   line-height: 32px;
   margin-top: 0;
   font-weight: 400;
   letter-spacing: -.2px;
   margin-bottom: 30px
 }

 .dark-scheme p.lead {
   color: rgb(255 255 255 / .75)
 }

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

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

 .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-bottom {
   z-index: 1;
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 30%;
   background: linear-gradient(0deg, rgba(var(--bg-dark-1-rgb), 1) 0%, rgba(var(--bg-dark-1-rgb), 0) 100%)
 }

 .gradient-edge-top.color {
   background: linear-gradient(180deg, rgba(var(--primary-color-rgb), .3) 0%, rgba(var(--primary-color-rgb), 0) 100%)
 }

 .gradient-edge-bottom.color {
   background: linear-gradient(0deg, rgba(var(--primary-color-rgb), 1) 0%, rgba(var(--primary-color-rgb), 0) 100%)
 }

 .show-on-scroll {
   opacity: 0
 }

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

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

 .w-100 {
   width: 100%
 }

 .w-150px {
   width: 150px
 }

 .h-50 {
   height: 50%
 }

 .h-100 {
   height: 100%
 }

 .bottom-20 {
   bottom: 20%
 }

 .mt-50 {
   margin-top: 50px
 }


 .fs-15 {
   font-size: 15px
 }

 .fs-20 {
   font-size: 20px
 }

 .fs-40 {
   font-size: 40px
 }

 .p-40 {
   padding: 40px
 }

 .pt-80 {
   padding-top: 80px
 }

 .hover-op-1,
 .hover-op-05 {
   opacity: 0
 }

 .radial-gradient-color {
   background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0) 50%, rgba(var(--primary-color-rgb), 1) 100%)
 }

 .op-5 {
   opacity: .5
 }

 .op-6 {
   opacity: .6
 }

 .op-8 {
   opacity: .8
 }

 .mh-900 {
   min-height: 900px
 }


 .absolute,
 .abs {
   position: absolute
 }

 .abs-centered {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%)
 }

 .relative,
 .position-relative {
   position: relative
 }

 .z-2 {
   z-index: 2
 }

 .z-3 {
   z-index: 3
 }

 .z-4 {
   z-index: 4
 }

 .border-white-bottom-op-2 {
   border-bottom: solid 1px rgb(255 255 255 / .2)
 }

 .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: #fff;
   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.plain .d-tab-nav li {
   font-weight: 500;
   color: #000;
   text-align: center;
   padding: 0;
   margin: 0;
   opacity: .4
 }

 .text-light .de-tab.plain .d-tab-nav li {
   color: #fff
 }

 .de-tab.plain .d-tab-nav .active-tab {
   background: none;
   font-weight: 700;
   opacity: 1
 }

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

   .d-tab-nav,
   .d-tab-nav li {
     display: block !important
   }
 }

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

 .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%)
 }

 .de-flex #mainmenu {
   margin: 0
 }

 .subtitle {
   position: relative;
   font-weight: 500;
   position: relative;
   display: inline-block;
   font-size: 15px;
   padding: 2px 10px;
   font-family: var(--body-font);
   color: var(--heading-font-color);
   text-transform: none;
   letter-spacing: 0;
   line-height: 1.5em;
   margin-bottom: 20px;
   border-radius: 2px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px
 }

 .subtitle:before {
   content: "◄ ";
   color: var(--primary-color);
   font-weight: 700
 }

 .subtitle:after {
   content: " ►";
   color: var(--primary-color);
   font-weight: 700
 }

 .dark-scheme .subtitle:not(.id-color),
 .text-light .subtitle:not(.id-color) {
   color: #fff
 }
 .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
 }

 .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
 }


 .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
 }

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

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

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

 p {
   margin-bottom: 20px
 }


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

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


 .wow {
   visibility: hidden
 }

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

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

 .ul-check li {
   position: relative;
   display: block;
   margin-top: 0;
   padding: 0;
   padding-left: 30px;
   border-radius: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   line-height: 1.6em
 }

 .ul-check-inline li:before {
   font-family: "FontAwesome";
   content: "\f00c";
   margin-right: 10px;
   color: var(--primary-color);
   border: solid 1px var(--primary-color);
   border-radius: 30px;
   -moz-border-radius: 30px;
   -webkit-border-radius: 30px;
   padding: 5px
 }

 .ul-check li:before {
   position: absolute;
   left: 0;
   font-family: "FontAwesome";
   content: "\f00c";
   margin-right: 12px;
   width: 20px;
   line-height: 1;
   padding: 4px 0;
   font-size: 15px;
   display: inline-block;
   text-align: center;
   border-radius: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0
 }

 .scale-in-mask {
   animation: scale-in-mask 1.3s cubic-bezier(.25, .46, .45, .94) .2s forwards;
   -moz-transform: scale(1.5);
   -ms-transform: scale(1.5);
   -webkit-transform: scale(1.5);
   transform: scale(1.5);
   opacity: 0
 }

 @keyframes scale-in-mask {
   0% {
     -moz-transform: scale(1.5);
     -ms-transform: scale(1.5);
     -webkit-transform: scale(1.5);
     transform: scale(1.5);
     clip-path: inset(30% 30% 30% 30%);
     opacity: 0
   }

   100% {
     -moz-transform: scale(1);
     -ms-transform: scale(1);
     -webkit-transform: scale(1);
     transform: scale(1);
     clip-path: inset(0 0 0 0);
     opacity: 1
   }
 }

 @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
   }

   .header-col-mid #mainmenu {
     position: absolute;
     top: 90px;
     width: 100%;
     padding: 0 0 0 0;
     left: 20px
   }


   header {
     display: none
   }


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

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

   #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 a.menu-item {
     text-align: left;
     padding-left: 0;
     padding-top: 10px;
     padding-bottom: 10px
   }

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

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

   #mainmenu li a {
     color: #eceff3
   }


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

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

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


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

   .dark-scheme header.header-mobile #mainmenu li {
     border-bottom-color: rgb(255 255 255 / .1)
   }

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

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

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

   section {
     padding: 60px 0
   }

   h1,
   h1.ultra-big,
   h1.ultra-big .text-line,
   h1.ultra-big-2,
   .title-text,
   h1.slider-title {
     font-size: 60px
   }


   h2 {
     font-size: 40px
   }


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

   #mainmenu li a:before {
     display: none
   }
 }

 @media only screen and (max-width:767px) {
   header .logo-main {
     display: none
   }


   header .btn-main {
     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
   }

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

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


   section {
     padding: 40px 0
   }

   h1,
   h1.ultra-big,
   h1.ultra-big .text-line,
   h1.ultra-big-2,
   .title-text,
   h1.slider-title,
   h2.slider-title {
     font-size: 48px
   }

   h2 {
     font-size: 36px
   }

   .mt-xs-0 {
     margin-top: 0
   }

   .pt-xs-10 {
     padding-top: 10px
   }

   .pt-xs-20 {
     padding-top: 20px
   }

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

   .pt-xs-40 {
     padding-top: 40px
   }

   .pt-xs-50 {
     padding-top: 50px
   }

   .pt-xs-60 {
     padding-top: 60px
   }

   .pt-xs-70 {
     padding-top: 70px
   }

   .pt-xs-80 {
     padding-top: 80px
   }

   .pt-xs-90 {
     padding-top: 90px
   }

   .pt-xs-100 {
     padding-top: 10px
   }

   .pb-xs-10 {
     padding-bottom: 10px
   }

   .pb-xs-20 {
     padding-bottom: 20px
   }

   .pb-xs-30 {
     padding-bottom: 30px
   }

   .pb-xs-40 {
     padding-bottom: 40px
   }

   .pb-xs-50 {
     padding-bottom: 50px
   }

   .pb-xs-60 {
     padding-bottom: 60px
   }

   .pb-xs-70 {
     padding-bottom: 70px
   }

   .pb-xs-80 {
     padding-bottom: 80px
   }

   .pb-xs-90 {
     padding-bottom: 90px
   }

   .pb-xs-100 {
     padding-bottom: 10px
   }

   .mt-xs-10 {
     margin-top: 10px
   }

   .mt-xs-20 {
     margin-top: 20px
   }

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

   .mt-xs-40 {
     margin-top: 40px
   }

   .mt-xs-50 {
     margin-top: 50px
   }

   .mt-xs-60 {
     margin-top: 60px
   }

   .mt-xs-70 {
     margin-top: 70px
   }

   .mt-xs-80 {
     margin-top: 80px
   }

   .mt-xs-90 {
     margin-top: 90px
   }

   .mt-xs-100 {
     margin-top: 10px
   }

   .mb-xs-10 {
     margin-bottom: 10px
   }

   .mb-xs-20 {
     margin-bottom: 20px
   }

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

   .mb-xs-40 {
     margin-bottom: 40px
   }

   .mb-xs-50 {
     margin-bottom: 50px
   }

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

   .mb-xs-70 {
     margin-bottom: 70px
   }

   .mb-xs-80 {
     margin-bottom: 80px
   }

   .mb-xs-90 {
     margin-bottom: 90px
   }

   .mb-xs-100 {
     margin-bottom: 10px
   }

   .ss-wrap {
     position: relative;
     width: 200%;
     margin-left: -50%
   }

   .fs-xs-1vw {
     font-size: 1vw
   }

   .fs-xs-2vw {
     font-size: 2vw
   }

   .fs-xs-3vw {
     font-size: 3vw
   }

   .fs-xs-4vw {
     font-size: 4vw
   }

   .fs-xs-5vw {
     font-size: 5vw
   }

   .fs-xs-6vw {
     font-size: 6vw
   }

   .fs-xs-7vw {
     font-size: 7vw
   }

   .fs-xs-8vw {
     font-size: 8vw
   }

   .fs-xs-9vw {
     font-size: 9vw
   }

   .fs-xs-10vw {
     font-size: 10vw
   }

   .fs-xs-11vw {
     font-size: 11vw
   }

   .fs-xs-12vw {
     font-size: 12vw
   }

   .fs-xs-13vw {
     font-size: 13vw
   }

   .fs-xs-14vw {
     font-size: 14vw
   }

   .fs-xs-15vw {
     font-size: 15vw
   }
 }

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

   .timeline-panel {
     margin-bottom: 30px
   }

   .timeline-pic {
     height: 300px
   }
 }

 @media only screen and (max-width:480px) {
   .text-item {
     font-size: 32px;
     line-height: 32px
   }

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

   h4.s2 span {
     display: block;
     margin: 0;
     padding: 0
   }

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

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

 @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
   }
 }

 .half-fluid .left-half,
 .half-fluid .right-half {
   left: 50%;
   margin-left: -50vw;
   max-width: 100vw;
   position: relative;
   right: 50%;
   width: 100vw;
   padding: 0
 }

 .half-fluid .image {
   background-size: cover;
   background-position: center;
   min-height: 400px;
   height: 100%
 }

 @media (min-width:992px) {
   .half-fluid .left-half {
     padding-left: 0 !important;
     position: absolute;
     left: 0;
     right: 50%;
     margin-left: auto;
     width: auto
   }

   .half-fluid .right-half {
     padding-right: 0 !important;
     position: absolute;
     right: 0;
     left: 50%;
     margin-left: auto;
     width: auto
   }
 }

 .price-slash {
   margin-right: 10px;
   position: relative
 }

 .price-slash::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #e53e3e;
   transform: translateY(-50%) rotate(-10deg)
 }

 .modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(0 0 0 / .5)
 }

 .modal-content {
   width: 750px;
   height: fit-content;
   overflow-x: hidden;
   overflow-y: scroll;
   padding: 25px;
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%)
 }

 .modal-content::-webkit-scrollbar {
   display: none
 }

 .modal-content .close {
   position: absolute;
   top: 15px;
   right: 15px;
   font-size: 25px;
   cursor: pointer
 }

 .modal-content h2 {
   font-size: 30px;
   margin-bottom: 10px
 }

 .modal-content p {
   font-size: 15px
 }

 .modal-content form {
   display: flex;
   flex-direction: column;
   gap: 20px
 }

 .modal-content form div {
   display: flex;
   gap: 20px;
   width: 100%
 }

 .modal-content form input {
   width: 100%;
   padding: 10px;
   background-color: #fff0;
   border: none;
   color: #fff;
   outline: none;
   border-bottom: 1px solid #fff
 }

 .modal-content form input::placeholder {
   color: #fff
 }

 .modal-content form textarea {
   background-color: #fff0;
   padding: 10px;
   outline: none;
   border: 1px solid #fff;
   color: #fff;
   border-radius: 5px
 }

 .modal-content form textarea::placeholder {
   color: #fff
 }

 .modal-content form button {
   width: 200px
 }

 @media (max-width:768px) {
   .modal-content {
     width: 90%
   }
 }

 #cursorFllower {
   position: fixed;
   top: 0;
   left: 0;
   width: 10px;
   height: 10px;
   background-color: var(--secondary-color);
   border-radius: 50%;
   pointer-events: none;
   z-index: 9999
 }

 @media (max-width:768px) {
   #cursorFllower {
     display: none
   }
 }

 .newsletter {
   width: 90%;
   margin: auto;
   margin-bottom: 100px;
   height: 300px;
   border: 1px solid var(--primary-color);
   border-radius: 20px;
   overflow: hidden;
   padding: 25px;
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center
 }

 .newsletter div:nth-child(1) {
   width: 70%
 }

 .newsletter div:nth-child(2) {
   width: 30%;
   display: flex;
   justify-content: center;
   align-items: center
 }

 .newsletter::after {
   content: " ";
   width: 200px;
   height: 200px;
   background-color: var(--secondary-color) !important;
   border-radius: 50%;
   position: absolute;
   bottom: -100px;
   left: 100px;
   z-index: -1
 }

 .newsletter::before {
   content: " ";
   width: 200px;
   height: 200px;
   background-color: var(--secondary-color) !important;
   border-radius: 50%;
   position: absolute;
   top: -100px;
   right: 100px;
   z-index: -1
 }

 .letTalkBtn {
   min-width: 120px;
   position: relative;
   cursor: pointer;
   padding: 12px 17px;
   border: 0;
   border-radius: 7px;
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
   background: radial-gradient(ellipse at bottom, var(--primary-color-rgb) 0%, #0b151e 45%);
   color: rgb(255 255 255 / .66);
   transition: all 1s cubic-bezier(.15, .83, .66, 1)
 }

 .letTalkBtn::before {
   content: "";
   width: 70%;
   height: 1px;
   position: absolute;
   bottom: 0;
   left: 15%;
   background: #fff;
   background: linear-gradient(90deg, #fff0 0%, #ffffff 50%, #fff0 100%);
   opacity: .2;
   transition: all 1s cubic-bezier(.15, .83, .66, 1)
 }

 .letTalkBtn:hover {
   color: #fff;
   transform: scale(1.1) translateY(-3px)
 }

 .letTalkBtn:hover::before {
   opacity: 1
 }

 @media (max-width:768px) {
   .newsletter {
     flex-direction: column
   }

   .newsletter div:nth-child(1) {
     width: 100%
   }

   .newsletter div:nth-child(2) {
     width: 100%
   }
 }

 @media (max-width:640px) {
   .newsletter {
     height: fit-content
   }
 }

 .youtubeVideoSection {
   position: relative;
   width: 100%;
   height: 120dvh;
   overflow: hidden
 }

 .yVideoTitle {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 5vw;
   z-index: 2;
   color: #fff;
   font-size: 3em
 }

 .yVideoTitle .t1 {
   color: white !important
 }

 .pinBox {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   padding-left: 0;
   position: absolute;
   bottom: 50vh;
   z-index: 1
 }

 .vdCard {
   width: 400px;
   height: 400px;
   flex-shrink: 0;
   border-radius: 1.5rem;
   margin-left: -11rem;
   overflow: hidden;
   position: absolute;
   border: 2px solid var(--primary-color)
 }

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

 .translate-x-10 {
   transform: translateX(-300px) rotate(-3deg)
 }

 .translate-x-20 {
   transform: translateX(-150px) rotate(3deg)
 }

 .translate-x-30 {
   transform: translateX(0) rotate(-3deg)
 }

 .translate-x-40 {
   transform: translateX(150px) rotate(6deg)
 }

 .translate-x-50 {
   transform: translateX(300px) rotate(-6deg)
 }

 .translate-x-60 {
   transform: translateX(450px) rotate(6deg)
 }

 .translate-x-70 {
   transform: translateX(450px) rotate(-6deg)
 }

 .gsapMargin {
   margin-bottom: 150dvh
 }

 .youtubeExploreBtn {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center
 }

 @media (max-width:1024px) {
   .vdCard {
     width: 350px;
     height: 350px
   }

   .translate-x-10 {
     transform: translateX(-250px) rotate(-3deg)
   }

   .translate-x-20 {
     transform: translateX(-125px) rotate(3deg)
   }

   .translate-x-30 {
     transform: translateX(0) rotate(-3deg)
   }

   .translate-x-40 {
     transform: translateX(125px) rotate(6deg)
   }

   .translate-x-50 {
     transform: translateX(250px) rotate(6deg)
   }

   .translate-x-60 {
     transform: translateX(375px) rotate(-6deg)
   }
 }

 @media (max-width:768px) {
   .pinBox {
     flex-direction: column
   }

   .translate-x-10,
   .translate-x-20,
   .translate-x-30,
   .translate-x-40,
   .translate-x-50,
   .translate-x-60 {
     transform: translateX(0)
   }

   .translate-x-10 {
     transform: rotate(3deg)
   }

   .translate-x-20 {
     transform: rotate(-3deg)
   }

   .translate-x-30 {
     transform: rotate(3deg)
   }

   .translate-x-40 {
     transform: rotate(-3deg)
   }

   .translate-x-50 {
     transform: rotate(3deg)
   }

   .translate-x-60 {
     transform: rotate(-3deg)
   }

   .vdCard {
     width: 90%;
     margin: auto;
     height: 80vh
   }
 }

 @keyframes slides {
   from {
     transform: translateX(0)
   }

   to {
     transform: translateX(-100%)
   }
 }

 .logos {
   overflow: hidden;
   padding: 30px 0;
   white-space: nowrap;
   position: relative
 }

 .logos:before,
 .logos:after {
   position: absolute;
   top: 0;
   content: '';
   width: 250px;
   height: 100%;
   z-index: 2
 }

 .logos:before {
   left: 0;
   background: linear-gradient(to left, #fff0, #101435)
 }

 .logos:after {
   right: 0;
   background: linear-gradient(to right, #fff0, #101435)
 }

 .logo_items {
   display: inline-block;
   animation: 50s slides infinite linear
 }

 .logo_items img {
   width: 150px;
   height: 150px;
   object-fit: cover;
   margin: auto 50px
 }

 .logos:hover .logo_items {
   animation-play-state: paused
 }

 .logo_items img {
   height: 100px
 }

 .h-300 {
   height: 500px
 }

 .object-fit-cover {
   object-fit: cover
 }

 .heroSection {
   margin-top: -50px
 }

 .g-2-5 {
   gap: 5px
 }

 .g-5 {
   gap: 10px
 }

 .hero-marquee-container {
   position: absolute;
   bottom: 0;
   width: 100%;
   overflow: hidden;
   display: flex;
   align-items: center;
   gap: 10px
 }

 .hero-marquee {
   height: 80px;
   background: #4080F5;
   background: linear-gradient(90deg, rgb(64 128 245) 0%, rgb(87 42 194) 100%);
   border-radius: 7px;
   padding: 3px;
   animation: marquee 30s linear infinite
 }

 .hero-marquee-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   padding: 10px;
   width: 100%;
   height: 100%;
   background-color: #fff;
   border-radius: 5px
 }

 .hero-marquee-content img {
   width: 50px;
   height: 50px
 }

 .hero-marquee-content p {
   font-size: 16px;
   font-weight: 700;
   margin-bottom: 0;
   color: #000
 }

 .flash-sale-container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 15px
 }

 .flash-sale-container button {
   padding: 15px;
   font-size: 20px;
   text-transform: capitalize
 }

 .flash-sale-left {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px
 }

 .flash-sale-left p {
   margin-bottom: 0;
   font-size: 18px
 }

 @media (max-width:640px) {
   .flash-sale-left {
     gap: 5px
   }

   .flash-sale-left p {
     font-size: 14px
   }

   .flash-sale-container button {
     font-size: 16px;
     padding: 10px
   }
 }

 @keyframes marquee {
   0% {
     transform: translateX(0%)
   }

   100% {
     transform: translate(-220%)
   }
 }

 @media (max-width:1024px) {
   .heroLeft {
     text-align: center
   }

   .heroSection {
     margin-top: 0
   }

   .sm-p-2 {
     padding: .75rem !important
   }

   .sm-justify-content-center {
     justify-content: center !important
   }

   .sm-mt-10 {
     margin-top: 10px !important
   }

   .md-bottom-0 {
     bottom: 0% !important
   }

   .md-bottom-5 {
     bottom: 5% !important
   }

   .-md-bottom-5 {
     bottom: -5% !important
   }

   .sm-mh-1000 {
     min-height: 1200px !important
   }
 }

 @media (max-width:640px) {
   .sm-bottom-10 {
     bottom: 10% !important
   }

   .sm-bottom-0 {
     bottom: 0% !important
   }

   .newsletter h1 {
     font-size: 25px !important
   }
 }

 .ai-tools-container {
   width: 80%;
   margin: auto;
   display: grid;
   justify-content: center;
   align-items: center;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px
 }

 .ai-tools {
   width: 100%;
   height: 150px;
   background: #4080F5;
   background: linear-gradient(90deg, rgb(64 128 245) 0%, rgb(87 42 194) 100%);
   border-radius: 8px;
   padding: 4px
 }

 .ai-tools-content {
   width: 100%;
   height: 100%;
   border-radius: 5px;
   background-color: #fff;
   padding: 5px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px
 }

 .ai-tools-content img {
    width: 150px;
    max-width: 100%;
 }

 .ai-tools-content p {
   color: #4C5863;
   text-align: center;
   margin-bottom: 0;
   font-size: 14px !important
 }

 .mt-50 {
   margin-top: 70px
 }

 @media (max-width:1024px) {
   .ai-tools-container {
     width: 90%;
     grid-template-columns: repeat(2, 1fr)
   }
 }

 @media (max-width:640PX) {
   .ai-tools-container {
     width: 90%;
     grid-template-columns: repeat(1, 1fr)
   }
 }

 .who-it-for-content {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
   max-width: 1100px;
   margin: 0 auto
 }

 .who-it-for-content span {
   background-color: #2a2a2a;
   color: #fff;
   padding: 10px 20px;
   border-radius: 999px;
   font-size: 16px;
   white-space: nowrap;
   transition: background .3s
 }

 .who-it-for-content span:hover {
   background-color: #444
 }

 .live-icon {
   position: relative;
   width: 15px;
   height: 15px
 }

 .live-dot {
   width: 8px;
   height: 8px;
   background-color: red;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2
 }

 .live-plus {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background-color: red;
   opacity: .4;
   animation: live-plus 2s ease-out infinite
 }

 .live-plus-deplay1 {
   animation-delay: .5s;
   opacity: .3
 }

 .live-plus-deplay2 {
   animation-delay: 1s;
   opacity: .2
 }

 .liveText {
   font-size: 18px;
   font-weight: 700;
   color: red
 }

 @keyframes live-plus {
   0% {
     transform: scale(1);
     opacity: .4
   }

   100% {
     transform: scale(2.5);
     opacity: 0
   }
 }

 .heroText {
   font-size: 20px;
   margin-top: 10px;
   margin-bottom: 0
 }

 .heroText2 {
   font-size: 40px;
   margin-top: 15px
 }

 .gadient-text {
   background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
   -webkit-text-fill-color: #fff0;
   -webkit-background-clip: text
 }

 @media (max-width: 768px) {
   .heroText2 {
     font-size: 30px;
   }

   .liveText {
     justify-content: center;
   }
 }

 @media (max-width: 768px) {
   .heroText2 {
     font-size: 25px;
   }
 }

 img {
   width: 100%;
   height: auto;
   aspect-ratio: attr(width) / attr(height);
 }

 .flash-sale-left img {
   width: 30px;
 }