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

  Theme Name: Stackly - App Landing, Ai & Software Business Html Template
  Author: themewolfs
  Support: themewolfs@gmail.com
  Description: Stackly - App Landing, Ai & Software Business Html Template
  Version: 1.0

  Cascade-layer note: every rule in this file lives in `@layer base` so it
  sits below brand-override.css (unlayered) without per-rule !important.
  See assets/css/brand-override.css for SafeKernels-native styles.
-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************
/* variable css */
/* typography css */
/* animation css */
/* common css */
/* theme css */
/* preloader css */
/* scroll css */
/* === Colors variable scss (index 01) === */
@layer base {
:root {
  --primary: #004FFC;
  --primary4: #7444FD;
  --primary5: #00D4FF;
  --secondary: #646463;
  --black: #0E0E0C;
  --green: #A0EA71;
  --white: #FFF;
  --red: #f14f44;
  --lime-green: #90ee02;
  --orange: #FF5914;
  --yellow: #f3ff0a;
  --purple: #5814f9;
  --white: #ffffff;
  --gray: #999;
  --bg: #F6F6F6;
  --gray-two: #555555;
  --gray-three: #F0F2F4;
  --border-color-one: rgba(255, 255, 255, 0.1);
  --border-color-two: #DADADA;
}

/* === Responsive variable scss (index 02) === */
/* === For Box Layout scss (index 03) === */
/* === Responsive container scss (index 04) === */
/* === heading scss (index 01) === */
/* === dark scss (index 01) === */
/* === bg primary  scss (index 01) === */
/* === Transition multiple scss (index 01) === */
/* === Transform scss (index 01) === */
/* === Flexbox scss (index 01) === */
/* === Font Family scss (index 01) === */
:root {
  --font_monts: "Montserrat Alternates", sans-serif;
  --font_jakarta: "Plus Jakarta Sans", sans-serif;
  --font_awesome: "Font Awesome 6 Pro";
}

/* === Defalut Style scss (index 03) === */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font_jakarta);
  line-height: 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--secondary);
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3 {
  padding: 0;
  margin: 0;
  color: var(--black);
  line-height: 1.22;
  font-family: var(--font_monts);
  font-weight: 500;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  transition: all 0.3s;
  color: inherit;
}
a:hover {
  color: var(--primary);
}

button {
  background-color: transparent;
  border: 0;
}

p {
  padding: 0;
  margin: 0;
}

strong {
  font-weight: 500;
}


img {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

/* === Gutter scss (index 03) === */
@media only screen and (max-width: 767px) {
  br {
    display: none;
  }
}
main {
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 32px;
}

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

/* === Animation (index 01) === */
@keyframes shape-animaiton1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
  }
}

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

/* === Scrollbar scss (index 01) === */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #d6d6d6;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* === positioning scss (index 02) === */
.rr-pos-rel {
  position: relative;
}

.rr-ov-hidden {
  overflow: hidden;
}

/* === Container scss (index 03) === */
.rr-container-1350 {
  max-width: 1350px;
}

.rr-container-1638 {
  max-width: 1638px;
}

.p-relative {
  position: relative;
}

/* === Background scss (index 04) === */

/* === Parallax view scss (index 05) === */

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

/* === Section spacing  scss (index 07) === */

.section-spacing-120 {
  padding-bottom: 120px;
  padding-top: 120px;
}
@media only screen and (max-width: 1919px) {
  .section-spacing-120 {
    padding-bottom: 90px;
    padding-top: 90px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-spacing-120 {
    padding-bottom: 80px;
    padding-top: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-spacing-120 {
    padding-bottom: 60px;
    padding-top: 60px;
  }
}

.section-spacing-top-120 {
  padding-top: 120px;
}
@media only screen and (max-width: 1919px) {
  .section-spacing-top-120 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-spacing-top-120 {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-spacing-top-120 {
    padding-top: 60px;
  }
}

/* === ontainer styling with full HD support  scss (index 08) === */
.container {
  --bs-gutter-x: 30px;
}

/* ===Inverted scss (index 09) === */

/* ===Side info and offcanvas scss (index 10) === */
.offcanvas-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(10, 11, 15, 0.85);
  z-index: 900;
  top: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.offcanvas-overlay.overlay-open {
  opacity: 0.5;
  visibility: visible;
}

.side-info-close {
  font-size: 20px;
  padding: 0;
  transition: all 0.3s linear;
  background-color: transparent;
  color: var(--black);
  width: 40px;
  height: 40px;
  border: 1px solid var(--black);
  border-radius: 50%;
  line-height: 38px;
}
.side-info-close:hover {
  transform: rotate(90deg);
}

.side-info {
  background: var(--white) none repeat scroll 0 0;
  padding: 40px 45px;
  position: fixed;
  right: 0;
  top: 0;
  width: 500px;
  height: 100%;
  transform: translateX(calc(100% + 80px));
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 9999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
@media only screen and (max-width: 1199px) {
  .side-info {
    width: 460px;
  }
}
@media (max-width: 575px) {
  .side-info {
    width: 280px;
    padding: 30px 20px;
  }
}
.side-info ::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar */
}
.side-info.info-open {
  opacity: 1;
  transform: translateX(0);
  /* Show side info */
}

.tx-center {
  text-align: center;
}

/* === Offset header scss (index 11) === */
.offset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.offset-logo {
  width: 95px;
}
@media (max-width: 575px) {
  .offset-logo {
    width: 95px;
  }
}
.offset-logo img {
  width: 100%;
}
.offset-button {
  margin-top: 40px;
}
@media (min-width: 576px) {
  .offset-button {
    display: none;
  }
}

/* === Offset widget box scss (index 12) === */
.offset-widget-box {
  margin-top: 40px;
}
.offset-widget-box .title {
  font-size: 24px;
  line-height: 1.33;
  margin-bottom: 15px;
  color: var(--black);
}
@media only screen and (max-width: 1919px) {
  .offset-widget-box .title {
    margin-bottom: 22px;
  }
}
.offset-widget-box .contact-meta > *:not(:first-child) {
  margin-top: 16px;
}
.offset-widget-box .contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.offset-widget-box .contact-item span {
  color: var(--black);
  font-weight: 500;
}
.offset-widget-box .contact-item span a:hover {
  color: var(--secondary);
}
.offset-widget-box .contact-item .icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  border: 1px solid var(--black);
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: var(--black);
}

/* ===Mobile menu customization scss (index 13) === */

/* === theme scss (index 01) === */
html {
  --container-max-widths: 1320px;
}
@media only screen and (max-width: 1399px) {
  html {
    --container-max-widths: 1140px;
  }
}
@media only screen and (max-width: 1199px) {
  html {
    --container-max-widths: 960px;
  }
}
@media only screen and (max-width: 991px) {
  html {
    --container-max-widths: 720px;
  }
}
@media only screen and (max-width: 767px) {
  html {
    --container-max-widths: 540px;
  }
}

/* === BG Color scss (index 02) === */

/* === Z-index scss (index 03) === */

/* === Text Border scss (index 04) === */

/* === Text Indent scss (index 05) === */

header {
  margin-bottom: -1px;
  z-index: 100;
}

section {
  margin-bottom: -1px;
}

.border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.border-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.section-spacing-120 {
  padding-bottom: 120px;
  padding-top: 120px;
}
@media only screen and (max-width: 1919px) {
  .section-spacing-120 {
    padding-bottom: 90px;
    padding-top: 90px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-spacing-120 {
    padding-bottom: 80px;
    padding-top: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-spacing-120 {
    padding-bottom: 60px;
    padding-top: 60px;
  }
}

.section-spacing-top-120 {
  padding-top: 120px;
}
@media only screen and (max-width: 1919px) {
  .section-spacing-top-120 {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-spacing-top-120 {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-spacing-top-120 {
    padding-top: 60px;
  }
}

.border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.border-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* === preloader scss (index 02) === */

@-webkit-keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* === scroll scss (index 01) === */

/* === progress-wrap scss (index 01) === */

/* === primary btn scss (index 01) === */

.rr-btn {
  z-index: 5;
  font-size: 16px;
  overflow: hidden;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  padding: 16px 37.15px;
  align-items: center;
  display: inline-flex;
  border-radius: 500px;
  letter-spacing: -0.8px;
  justify-content: center;
  text-transform: uppercase;
  font-family: var(--font_monts);
  background-color: var(--primary);
}
.rr-btn:hover::before, .rr-btn:focus::before {
  height: 100%;
}
.rr-btn:hover .btn-wrap .text-one, .rr-btn:focus .btn-wrap .text-one {
  color: var(--white);
  transform: translateY(-150%);
}
.rr-btn:hover .btn-wrap .text-two, .rr-btn:focus .btn-wrap .text-two {
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
}
.rr-btn:after {
  display: block;
  clear: both;
  content: "";
}
.rr-btn::before {
  background-color: var(--black);
  content: "";
  width: 100%;
  height: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  transition: all 0.5s;
}
.rr-btn .btn-wrap {
  z-index: 1;
  float: left;
  overflow: hidden;
  position: relative;
  display: inline-block;
  border: none;
}
.rr-btn .btn-wrap .text-one,
.rr-btn .btn-wrap .text-two {
  gap: 6px;
  display: flex;
  align-items: center;
}
.rr-btn .btn-wrap .text-one {
  position: relative;
  color: var(--white);
  transition: all 0.5s;
}
.rr-btn .btn-wrap .text-two {
  top: 100%;
  position: absolute;
  color: var(--white);
  transition: all 0.5s;
}
.rr-btn-5 {
  padding: 16px 32.14px;
  letter-spacing: 0.5px;
  background-color: var(--primary5);
}

/* === menu scss (index 01) === */
.main-menu > ul {
  display: flex;
}
.main-menu > ul > li:first-child > a {
  padding-left: 0;
}
.main-menu > ul > li:last-child > a {
  padding-right: 0;
}
.main-menu > ul > li:hover > a {
  color: var(--secondary);
}
.main-menu > ul > li:hover > ul {
  opacity: 1;
  pointer-events: all;
  inset-inline-start: 0;
}
.main-menu li {
  position: relative;
  list-style: none;
}
.main-menu li a {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--primary);
  padding: 37px 15px;
  text-transform: capitalize;
}

/* === offcanvas scss (index 02) === */

/* === cursor css scss (index 01) === */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Exclusion and Blending Modes */

/* Cursor Visibility and Transformations */

/*----------------------------------------*/
/*  Context-Specific Styles  */
/*----------------------------------------*/

/* === header scss (index 01) === */

.header-area {
  top: 24px;
  left: 24px;
  right: 24px;
  position: absolute;
  border-bottom: 1px solid rgba(201, 201, 200, 0.24);
}
@media only screen and (max-width: 991px) {
  .header-area {
    top: 0;
    left: 0;
    right: 0;
  }
}
.header-area__inner {
  gap: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 1399px) {
  .header-area__inner {
    padding: 0px;
  }
}
@media (max-width: 575px) {
  .header-area__inner {
    padding: 15px 0;
  }
}
@media (max-width: 575px) {
  .header-area .header__logo {
    max-width: 150px;
  }
}
.header-area .header-right {
  gap: 24px;
  display: flex;
  align-items: center;
  padding: 16px 0px 16px 42px;
}
@media only screen and (max-width: 1919px) {
  .header-area .header-right {
    padding: 16px 0px 16px 22px;
  }
}
@media only screen and (max-width: 1399px) {
  .header-area .header-right {
    border-left: none;
  }
}
.header-area .header-right .side-toggle .bar-icon {
  width: 30px;
  height: 7px;
}
.header-area .header-right .side-toggle .bar-icon span {
  height: 1px;
  background: var(--black);
}
.header-area .header-right .header-btn {
  gap: 32px;
  display: flex;
  align-items: center;
}
.header-area .main-menu > ul {
  display: flex;
}
.header-area .main-menu > ul > li:hover > a {
  color: var(--green);
}
.header-area .main-menu li a {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding: 38px 26px;
  color: var(--black);
  letter-spacing: 0.5px;
  font-family: var(--font_monts);
  text-transform: uppercase;
}
@media only screen and (max-width: 1919px) {
  .header-area .main-menu li a {
    padding: 36px 12px;
  }
}
.header-area .main-menu li a:hover {
  color: var(--green);
}
.header-area .header__navicon {
  margin-left: auto;
}
.header-area .header__navicon i {
  font-size: 22px;
  color: var(--white);
}

.header_5 {
  position: relative;
  border-bottom: none;
}
.header_5 .header__nav {
  gap: 104px;
  align-items: center;
}
@media only screen and (max-width: 1399px) {
  .header_5 .header__nav {
    gap: 40px;
  }
}

/* === Icon draw scss (index 01) === */
.bar-icon {
  width: 26px;
  height: 18px;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  transition: color 0.2s ease-out;
}
.bar-icon span {
  width: 100%;
  height: 2px;
  display: inline-block;
  background: var(--primary);
  transition: color 0.2s ease-out;
}
.bar-icon span:nth-child(2) {
  margin-left: 0px;
}
.bar-icon:hover span {
  animation: qode-draw 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
.bar-icon:hover span:nth-child(2) {
  margin-left: 0px;
  animation-delay: 0.1s;
}
.bar-icon:hover span:nth-child(3) {
  animation-delay: 0.2s;
}

/* === Icon draw Animate scss (index 01) === */
@keyframes qode-draw {
  0%, 100% {
    -webkit-clip-path: inset(-2px 0);
    clip-path: inset(-2px 0);
  }
  42% {
    -webkit-clip-path: inset(-2px 0 -2px 100%);
    clip-path: inset(-2px 0 -2px 100%);
  }
  43% {
    -webkit-clip-path: inset(-2px 100% -2px 0);
    clip-path: inset(-2px 100% -2px 0);
  }
}
/* === footer scss (index 01) === */
.footer-4__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--black);
  margin-bottom: 16px;
  letter-spacing: 0.5px;
  font-family: var(--font_monts);
}
.copyright-4__text .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--black);
  font-family: var(--font_jakarta);
}
.copyright-4__text .text a {
  color: var(--primary4);
  text-transform: uppercase;
}

.footer-5__inner {
  overflow: hidden;
  background-color: #F0F5FF;
}
.footer-5__wrap {
  position: relative;
  padding-bottom: 100px;
}
@media only screen and (max-width: 1199px) {
  .footer-5__wrap {
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .footer-5__wrap {
    padding-bottom: 60px;
  }
}
.footer-5__bg-shape {
  left: -220px;
  bottom: -250px;
  width: 704px;
  height: 704px;
  position: absolute;
  filter: blur(100px);
  border-radius: 500px;
  background: #E5F3F3;
}
.footer-5__bg-shape_2 {
  top: 204px;
  right: 120px;
  width: 704px;
  height: 704px;
  position: absolute;
  filter: blur(100px);
  background: #DADAF8;
}

.copyright-5__wrap {
  z-index: 1;
  text-align: center;
  padding: 23.5px 0;
  position: relative;
  border-top: 1px solid rgba(201, 201, 200, 0.24);
}

/* === pages scss (index 01) === */

/* === section-title (index 01) === */

/* === brand-1 (index 01) === */

/* === hero-1 (index 01) === */

/* === features-1 (index 01) === */

/* === service (index 01) === */
@keyframes rotate-ring {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-dot {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  100% {
    transform: rotate(360deg) translateX(0);
  }
}

/* === faq (index 01) === */

/* === blog (index 01) === */

/* === pricing (index 01) === */

/* === control-plan (index 01) === */

/* === testimonial  (index 01) === */

/* === brand-2 (index 03) === */

/* === brand-3 (index 03) === */

/* === blog-3 (index 03) === */

/* === brand-1 (index 01) === */

.hero-5__wrapper {
  margin: 0 48px;
  overflow: hidden;
  border-radius: 24px;
  background-color: #EDEEF2;
}
@media (min-width: 1600px) and (max-width: 1700px) {
  .hero-5__wrapper {
    margin: 0 15px;
  }
}
@media only screen and (max-width: 1919px) {
  .hero-5__wrapper {
    margin: 0 15px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-5__wrapper {
    margin: 0px;
    border-radius: 0;
  }
}
@media only screen and (max-width: 767px) {
  .hero-5__wrapper {
    padding-bottom: 60px;
  }
}
.hero-5__content {
  position: relative;
  margin-bottom: 80px;
}
@media only screen and (max-width: 991px) {
  .hero-5__content {
    margin-bottom: 40px;
  }
}
.hero-5__title {
  font-weight: 700;
  font-size: 72px;
  margin: 0 auto;
  max-width: 1268px;
  line-height: 80px;
  color: var(--black);
  letter-spacing: 3.6px;
  font-family: var(--font_monts);
}
@media only screen and (max-width: 1199px) {
  .hero-5__title {
    font-size: 48px;
    line-height: 58px;
  }
}
@media only screen and (max-width: 991px) {
  .hero-5__title {
    font-size: 40px;
    line-height: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-5__title {
    font-size: 32px;
    line-height: 42px;
  }
}
@media (max-width: 575px) {
  .hero-5__title {
    font-size: 23px;
    line-height: 36px;
  }
}
.hero-5__title span {
  color: var(--primary5);
}
.hero-5__dec {
  font-weight: 400;
  font-size: 16px;
  max-width: 828px;
  margin: 0 auto;
  margin-top: 24px;
  margin-bottom: 48px;
  line-height: 24px;
  color: var(--secondary);
  font-family: var(--font_jakarta);
}
@media only screen and (max-width: 991px) {
  .hero-5__dec {
    margin-top: 20px;
    margin-bottom: 25px;
  }
}
@media (max-width: 575px) {
  .hero-5__dec {
    margin-top: 15px;
    margin-bottom: 20px;
  }
}

/* Base styles for shop-area */

/* .shop-area */

/* === Responsive === */
} /* end @layer base */