:root {

 /* Fonts */
 --font-default: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 --font-primary: 'Source Sans Pro', sans-serif;
 --font-secondary: 'Poppins', sans-serif;

 /* Colors */
 /* The *-rgb color names are simply the RGB converted value of the corresponding color for use in the rgba() function */

 /* Default text color */
 --color-default: #1a1f24;
 --color-default-rgb: 26, 31, 36;

 /* Defult links color */
 --color-links: #0ea2bd;
 --color-links-hover: #1ec3e0;

 /* Primay colors */
 --color-primary: #5FC1AE;
 --color-primary-light: #88009a;
 --color-primary-dark: #5a0066;

 --color-primary-rgb: 14, 162, 189;
 --color-primary-light-rgb: 30, 195, 224;
 --color-primary-dark-rgb: 1, 137, 161;

 /* Secondary colors */
 --color-secondary: #485664;
 --color-secondary-light: #8f9fae;
 --color-secondary-dark: #3a4753;

 --color-secondary-rgb: 72, 86, 100;
 --color-secondary-light-rgb: 143, 159, 174;
 --color-secondary-dark-rgb: 58, 71, 83;

}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
 padding: 25px 0;
 transition: all 0.5s;
 z-index: 997;
}

.header.sticked {
 background: #232323;
 box-shadow: 0px 2px 20px rgba(33, 33, 33, 0.809);
}

.header .logo img {
 max-height: 50px;
 margin-right: 10px;
}

.header .logo h1 {
 font-size: 32px;
 font-weight: 300;
 color: var(--color-secondary);
 font-family: var(--font-secondary);
}

.header .logo h1 span {
 color: var(--color-primary);
 font-weight: 500;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
 font-size: 16px;
 color: var(--color-white);
 background: var(--color-primary);
 padding: 8px 23px;
 border-radius: 4px;
 transition: 0.3s;
 font-family: var(--font-secondary);
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
 color: var(--color-white);
 background: rgba(var(--color-primary-rgb), 0.85);
}

@media (max-width: 1279px) {

 .header .btn-getstarted,
 .header .btn-getstarted:focus {
  margin-right: 50px;
 }
}

/*--------------------------------------------------------------
# Desktop Navigation 
--------------------------------------------------------------*/
@media (min-width: 1280px) {
 .navbar {
  padding: 0;
  position: relative;
 }

 .navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
 }

 .navbar li {
  position: relative;
 }

 .navbar>ul>li {
  white-space: nowrap;
 }

 .navbar a,
 .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 400;
  color: white;
  white-space: nowrap;
  transition: 0.3s;
  position: relative;
 }

 .navbar a i,
 .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
 }

 .navbar>ul>li>a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--color-primary);
  visibility: hidden;
  transition: all 0.3s ease-in-out 0s;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
 }

 .navbar a:hover:before,
 .navbar li:hover>a:before,
 .navbar .active:before {
  visibility: visible;
  transform: scaleX(0.7);
 }

 .navbar a:hover,
 .navbar .active,
 .navbar .active:focus,
 .navbar li:hover>a {
  color: var(--color-primary);
 }

 .navbar .dropdown a:hover:before,
 .navbar .dropdown:hover>a:before,
 .navbar .dropdown .active:before {
  visibility: hidden;
 }

 .navbar .dropdown a:hover,
 .navbar .dropdown .active,
 .navbar .dropdown .active:focus,
 .navbar .dropdown:hover>a {
  color: var(--color-white);
  background: var(--color-secondary);
 }

 .navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  margin: 0;
  padding: 0 0 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: var(--color-secondary);
  transition: 0.3s;
 }

 .navbar .dropdown ul li {
  min-width: 200px;
 }

 .navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 15px;
  text-transform: none;
  font-weight: 400;
  color: rgba(var(--color-white-rgb), 0.5);
 }

 .navbar .dropdown ul a i {
  font-size: 12px;
 }

 .navbar .dropdown ul a:hover,
 .navbar .dropdown ul .active,
 .navbar .dropdown ul .active:hover,
 .navbar .dropdown ul li:hover>a {
  color: var(--color-white);
  background: var(--color-primary);
 }

 .navbar .dropdown:hover>ul {
  opacity: 1;
  visibility: visible;
 }

 .navbar .megamenu {
  position: static;
 }

 .navbar .megamenu ul {
  right: 0;
  padding: 10px;
  display: flex;
 }

 .navbar .megamenu ul li {
  flex: 1;
 }

 .navbar .megamenu ul li a,
 .navbar .megamenu ul li:hover>a {
  color: rgba(var(--color-white-rgb), 0.5);
  background: none;
 }

 .navbar .megamenu ul li a:hover,
 .navbar .megamenu ul li .active,
 .navbar .megamenu ul li .active:hover {
  color: var(--color-white);
  background: var(--color-primary);
 }

 .navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
 }

 .navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
 }
}

@media (min-width: 1280px) and (max-width: 1366px) {
 .navbar .dropdown .dropdown ul {
  left: -90%;
 }

 .navbar .dropdown .dropdown:hover>ul {
  left: -100%;
 }
}

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
@media (max-width: 1279px) {
 .navbar {
  position: fixed;
  top: 0;
  left: -100%;
  width: calc(100% - 70px);
  bottom: 0;
  transition: 0.3s;
  z-index: 9997;
 }

 .navbar ul {
  position: absolute;
  inset: 0;
  padding: 10px 0;
  margin: 0;
  background: #D3104E;
  overflow-y: auto;
  transition: 0.3s;
  z-index: 9998;
 }

 .navbar a,
 .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(var(--color-white-rgb), 0.7);
  white-space: nowrap;
  transition: 0.3s;
 }

 .navbar a i,
 .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
 }

 .navbar a:hover,
 .navbar .active,
 .navbar .active:focus,
 .navbar li:hover>a {
  color: var(--color-white);
 }

 .navbar .dropdown ul,
 .navbar .dropdown .dropdown ul {
  position: static;
  display: none;
  padding: 10px 0;
  margin: 10px 20px;
  transition: all 0.5s ease-in-out;
  border: 1px solid rgba(var(--color-secondary-light-rgb), 0.3);
 }

 .navbar .dropdown>.dropdown-active,
 .navbar .dropdown .dropdown>.dropdown-active {
  display: block;
 }

 .mobile-nav-toggle {
  display: block !important;
  color: white;
  font-size: 28px;
  cursor: pointer;
  line-height: 0;
  transition: 0.5s;
  position: fixed;
  top: 20px;
  z-index: 9999;
  right: 20px;
 }

 .mobile-nav-toggle.bi-x {
  color: var(--color-white);
 }

 .mobile-nav-active {
  overflow: hidden;
  z-index: 9995;
  position: relative;
 }

 .mobile-nav-active .navbar {
  left: 0;
 }

 .mobile-nav-active .navbar:before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(var(--color-secondary-rgb), 0.8);
  z-index: 9996;
 }
}



/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
 position: fixed;
 inset: 0;
 z-index: 9999;
 overflow: hidden;
 background: #5FC1AE;
 transition: all 0.6s ease-out;
 width: 100%;
 height: 100vh;
}

#preloader:before,
#preloader:after {
 content: "";
 position: absolute;
 border: 4px solid var(--color-primary);
 border-radius: 50%;
 -webkit-animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
 -webkit-animation-delay: -0.5s;
 animation-delay: -0.5s;
}

@-webkit-keyframes animate-preloader {
 0% {
  width: 10px;
  height: 10px;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  opacity: 1;
 }

 100% {
  width: 72px;
  height: 72px;
  top: calc(50% - 36px);
  left: calc(50% - 36px);
  opacity: 0;
 }
}

@keyframes animate-preloader {
 0% {
  width: 10px;
  height: 10px;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  opacity: 1;
 }

 100% {
  width: 72px;
  height: 72px;
  top: calc(50% - 36px);
  left: calc(50% - 36px);
  opacity: 0;
 }
}