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

    Template Name: Kartify - Multipurpose Ecommerce Template
    Template URI: https://themes.pixelstrap.com/Kartify
    Author: Pixelstrap
    Author URL: https://themeforest.net/user/pixelstrap

----------------------------------------------------------------------------------- */
/* 01 Variables */
/* 02 Typography */
/* 03 Button CSS */
/* 04 Marquee style */
/* 05 Header */
/* 06 Home section */
/* 07 Demo section */
/* 08 Feature section */
/* 09 Other section */
/* 10 Footer section */
/* 11 Testimonial section */
/* 12 Tap To Top Style */
/* 13 Cursor style */
/* 14 Animation  */
/*=====================
  01. Variables
==========================*/
:root {
  --primary-color: 255, 153, 0;
  --white: 255, 255, 255;
  --black: 0, 0, 0;
  --title-color: 34, 34, 34;
  --content-color: 153, 153, 153;
  --base-gray: 242, 243, 248;
}

/*=====================
  02. Typography
==========================*/
body {
  position: relative;
  scroll-behavior: smooth;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
}
body > section {
  overflow: hidden;
}

html {
  scroll-behavior: smooth;
}

ul,
ol {
  padding-left: 0;
  margin-bottom: 0;
}

a {
  text-decoration: none;
  transition: 0.4s ease;
  display: inline-block;
}
a:hover {
  text-decoration: none;
}
a:focus {
  outline: none;
}

li {
  display: inline-block;
  font-size: calc(16px + 8 * (100vw - 320px) / 1600);
  font-weight: 400;
}

p {
  font-size: calc(15px + 3 * (100vw - 320px) / 1600);
  font-weight: 400;
  margin-bottom: 0;
  color: rgba(var(--content-color), 1);
}

h1 {
  font-size: calc(22px + 38 * (100vw - 320px) / 1600);
  font-weight: 700;
  margin-bottom: 0;
}

h2 {
  font-size: calc(20px + 20 * (100vw - 320px) / 1600);
  font-weight: 700;
  line-height: normal;
  margin-bottom: 0;
}

h3 {
  font-size: calc(20px + 4 * (100vw - 320px) / 1600);
  font-weight: 500;
  line-height: normal;
  margin-bottom: 0;
}

h4 {
  font-size: calc(16px + 2 * (100vw - 320px) / 1600);
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0;
}

h5 {
  font-size: calc(15px + 1 * (100vw - 320px) / 1600);
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0;
}

h6 {
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0;
}

.text-theme {
  color: rgba(var(--primary-color), 1) !important;
}

section,
.section-t-space {
  padding-top: calc(38px + 62 * (100vw - 320px) / 1600);
}

.section-b-space {
  padding-bottom: calc(38px + 62 * (100vw - 320px) / 1600);
}

.sm-container {
  padding-inline: calc(15px + 120 * (100vw - 320px) / 1600);
}

.lg-container {
  padding-inline: calc(15px + 260 * (100vw - 320px) / 1600);
}

.section-title {
  text-align: center;
  padding-bottom: calc(22px + 18 * (100vw - 320px) / 1600);
}
.section-title h2 {
  color: rgba(var(--title-color), 1);
  font-size: calc(24px + 10 * (100vw - 320px) / 1600);
  font-weight: 500;
  letter-spacing: 0.8px;
  margin-bottom: calc(8px + 7 * (100vw - 320px) / 1600);
  line-height: 1.4;
}
@media (max-width: 575.98px) {
  .section-title h2 {
    line-height: 1.3;
  }
}
.section-title p {
  color: rgba(var(--content-color), 1);
  width: 50%;
  margin: 0 auto;
  line-height: 1.6;
}
@media (max-width: 1224px) {
  .section-title p {
    width: 68%;
  }
}
@media (max-width: 900px) {
  .section-title p {
    width: 100%;
  }
}
.section-title .btn {
  margin-top: calc(14px + 16 * (100vw - 320px) / 1600);
}

/*=====================
  03. Button
==========================*/
.btn {
  font-size: calc(14px + 4 * (100vw - 320px) / 1600);
  font-weight: 500;
  padding: calc(8px + 4 * (100vw - 320px) / 1600) calc(13px + 17 * (100vw - 320px) / 1600);
  border-radius: 100px;
}

.btn-theme {
  background-color: rgba(var(--primary-color), 1);
  color: rgba(var(--white), 1);
  border: 1px solid rgba(var(--primary-color), 1);
}
.btn-theme:hover {
  border: 1px solid rgba(var(--primary-color), 1) !important;
  background-color: transparent;
  color: rgba(var(--primary-color), 1);
}

.btn-theme-outline {
  background-color: transparent;
  color: rgba(var(--primary-color), 1);
  border: 1px solid rgba(var(--primary-color), 1);
}
.btn-theme-outline:hover {
  background-color: rgba(var(--primary-color), 1);
  color: rgba(var(--white), 1);
}

.custom-container {
  padding-inline: calc(15px + 180 * (100vw - 320px) / 1600);
}

/*=====================
  04. Marquee style
==========================*/
.quote-panel {
  transform: rotate(362deg);
  padding: calc(10px + 5 * (100vw - 320px) / 1600) 0;
  background: linear-gradient(to right, #e66529, #f7d1b1);
  overflow: hidden;
  position: absolute;
  left: -4px;
  bottom: 26%;
  z-index: 0;
  width: calc(100% + 8px);
  right: 0;
}
.quote-panel .marquee {
  display: flex;
  gap: calc(15px + 10 * (100vw - 320px) / 1600);
  animation: marquee 20s linear infinite;
  box-sizing: border-box;
  position: relative;
  white-space: nowrap;
}
.quote-panel .marquee li {
  padding-right: calc(15px + 10 * (100vw - 320px) / 1600);
  display: flex;
  gap: calc(15px + 10 * (100vw - 320px) / 1600);
  align-items: center;
}
.quote-panel .marquee li + li {
  position: relative;
}
.quote-panel .marquee li + li::after {
  content: "";
  position: absolute;
  left: -30px;
  width: 18px;
  height: 18px;
  background-color: rgba(var(--white), 1);
  border-radius: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0.6;
}
.quote-panel .marquee li img {
  width: calc(22px + 14 * (100vw - 320px) / 1600);
  height: calc(22px + 14 * (100vw - 320px) / 1600);
}
.quote-panel .marquee li span {
  font-size: calc(16px + 18 * (100vw - 320px) / 1600);
  font-weight: 600;
  line-height: 1.2;
  font-style: italic;
  opacity: 0.7;
  color: var(--white) !important;
}
.quote-panel.quote-reverse {
  bottom: 26%;
  transform: rotate(-2deg);
  background: linear-gradient(to right, #f7d1b1, #e66529);
}
.quote-panel.quote-reverse .marquee {
  animation-direction: reverse;
}
.quote-panel.wo-bg {
  background: none;
  position: relative;
  inset: 0;
  transform: none;
  width: 100%;
  margin: -30px 0;
}
.quote-panel.wo-bg .marquee li span {
  font-style: unset;
  font-size: calc(50px + 50 * (100vw - 320px) / 1600);
  color: #eee !important;
}
.quote-panel.wo-bg .marquee li + li::after {
  background-color: #eee;
}

/*=====================
  05. Header
==========================*/
header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 3;
}
header .logo-dark {
  display: none;
}
header .logo-light {
  width: calc(105px + 65 * (100vw - 320px) / 1600);
}
header .collapsing {
  transition: left 0.25s ease-in-out;
}
header.sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(var(--white), 1);
  box-shadow: 0px 8px 23px 7px rgba(61, 61, 61, 0.03);
}
header.sticky .navbar {
  padding-block: calc(10px + 5 * (100vw - 320px) / 1600) !important;
}
header.sticky .navbar .nav-link {
  color: rgba(var(--title-color), 1);
}
header.sticky .navbar .navbar-toggler {
  color: #222;
}
header.sticky .logo-dark {
  display: block;
  width: calc(105px + 65 * (100vw - 320px) / 1600);
}
header.sticky .logo-light {
  display: none;
}
header.sticky ~ .home-section-1 .home-contain {
  padding-top: 83px;
}
header .sm-container {
  display: flex;
  width: 100%;
  align-items: center;
}
header .nav-link {
  font-size: 18px;
  color: rgba(var(--white), 1);
  padding: 0 !important;
  font-weight: 500;
}
header .nav-link:hover {
  color: rgba(var(--primary-color), 1);
}
@media (max-width: 1199px) {
  header .nav-link {
    color: #222;
  }
  header .nav-link:hover {
    color: rgba(var(--primary-color), 1);
  }
}
header .nav-link.active {
  color: rgba(var(--primary-color), 1) !important;
}
header .navbar-collapse {
  justify-content: center;
}
@media (max-width: 1199px) {
  header .navbar-collapse {
    position: fixed;
    top: 0;
    left: -300px;
    width: calc(300px + 20 * (100vw - 320px) / 879);
    height: 100vh;
    background-color: #fff;
    padding: calc(15px + 5 * (100vw - 320px) / 879);
  }
  header .navbar-collapse.show {
    left: 0;
  }
}
header .navbar-collapse .close-box {
  margin: calc(-15px + -5 * (100vw - 320px) / 879);
  margin-left: -17px;
  background-color: rgba(var(--base-gray), 1);
  padding: 14px;
  margin-bottom: 9px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  font-size: 17px;
  display: none;
  width: calc(100% + 37px);
  border: unset;
  color: #222;
  text-align: unset;
}
header .navbar-collapse .close-box i {
  font-weight: normal;
}
@media (max-width: 1199px) {
  header .navbar-collapse .close-box {
    display: block;
  }
}
header .navbar {
  background: transparent;
  border: none;
  padding-bottom: 0;
  padding-top: calc(13px + 13 * (100vw - 320px) / 1600);
}
header .navbar .navbar-toggler {
  border: unset;
  box-shadow: unset;
  padding: 0;
  font-size: calc(18px + 6 * (100vw - 320px) / 1600);
  color: #fff;
  margin-right: calc(8px + 7 * (100vw - 320px) / 1600);
}
header .navbar-nav {
  gap: calc(15px + 20 * (100vw - 1199px) / 721);
}
@media (max-width: 1199px) {
  header .navbar-nav {
    gap: calc(7px + 8 * (100vw - 320px) / 880);
  }
}

/*=====================
  06. Home section
==========================*/
.home-section {
  position: relative;
  padding-top: 220px;
  z-index: 0;
  margin-bottom: calc(38px + 62 * (100vw - 320px) / 1600);
}
@media (max-width: 991.98px) {
  .home-section {
    padding-top: calc(82px + 28 * (100vw - 320px) / 671);
  }
}
.home-section .bg-image {
  object-fit: cover;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.home-section .sm-container {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.home-section .sm-container h1 {
  color: rgba(var(--white), 1);
  font-size: 60px;
  margin-bottom: 20px;
  position: relative;
  font-weight: 600;
}
.home-section .sm-container h1 span {
  background: linear-gradient(273.84deg, #FF5452 37.69%, rgba(var(--primary-color), 1) 73.11%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-section .sm-container p {
  margin-bottom: 30px;
}
.home-section .bottom-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(10px + 10 * (100vw - 320px) / 1600);
  margin-inline: auto;
}
.home-section .bottom-box .btn {
  font-weight: 600;
  white-space: nowrap;
}
.home-section .bottom-box p {
  margin: 0;
  text-align: left;
  font-size: 16px;
}
.home-section .shape-1 {
  position: absolute;
  top: 140px;
  right: 36%;
}
.home-section .shape-2 {
  position: absolute;
  bottom: 340px;
  left: 170px;
}
.home-section .shape-3 {
  position: absolute;
  top: 50%;
  right: 130px;
  transform: translateY(-50%);
}
.home-section .demo-list-box {
  padding-top: calc(48px + 90 * (100vw - 320px) / 1600);
  position: relative;
}
.home-section .demo-list-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 46px);
  background: linear-gradient(180deg, rgba(27, 27, 27, 0) 0%, #1B1B1B 100%);
  z-index: 1;
}
.home-section .demo-list-box img {
  border-radius: 10px 10px 0 0;
}
.home-section .service-slider {
  z-index: unset;
}
.home-section .service-slider .swiper-wrapper {
  z-index: unset;
  transition-timing-function: linear;
}
.home-section .home-contain {
  width: 66%;
  margin-inline: auto;
  text-align: center;
}
@media (max-width: 1350.98px) {
  .home-section .home-contain {
    width: 90%;
  }
}
@media (max-width: 1075.98px) {
  .home-section .home-contain {
    width: 100%;
  }
}
.home-section .home-contain h1 {
  font-size: calc(28px + 32 * (100vw - 320px) / 1600);
  font-weight: 500;
  color: rgba(var(--white), 1);
}
.home-section .home-contain h1 span {
  background: linear-gradient(273.84deg, #FF5452 37.69%, #FFA800 73.11%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.home-section .home-contain p {
  margin-block: calc(12px + 18 * (100vw - 320px) / 1600);
}
.home-section .home-contain .bottom-box p {
  margin: 0;
}
@media (max-width: 575.98px) {
  .home-section .home-contain .bottom-box p {
    text-align: center;
  }
}
.home-section .home-banner {
  z-index: 2;
  width: 80%;
  margin: 0 auto;
  margin-top: -27%;
  border-radius: 16px;
}
@media (max-width: 1468px) {
  .home-section .home-banner {
    margin-top: -23%;
  }
}
@media (max-width: 1300px) {
  .home-section .home-banner {
    margin-top: -20%;
  }
}
@media (max-width: 1075px) {
  .home-section .home-banner {
    margin-top: -15%;
    width: 90%;
  }
}
.home-section .quote-panel.quote-reverse,
.home-section .quote-panel {
  bottom: 0;
}

/*=====================
  07. Demo section
==========================*/
.demo-box {
  display: inline-block;
  cursor: pointer;
  transition: all 0.5s ease;
}
.demo-box .img-box {
  background-color: rgba(var(--base-gray), 1);
  padding: calc(32px + 8 * (100vw - 320px) / 1600) calc(11px + 4 * (100vw - 320px) / 1600) calc(11px + 4 * (100vw - 320px) / 1600) calc(11px + 4 * (100vw - 320px) / 1600);
  border-radius: calc(14px + 6 * (100vw - 320px) / 1600);
  position: relative;
  margin-bottom: calc(12px + 3 * (100vw - 320px) / 1600);
}
.demo-box .img-box img {
  border-radius: calc(14px + 2 * (100vw - 320px) / 1600);
}
.demo-box .img-box .dots {
  display: flex;
  align-items: center;
  gap: calc(5px + 1 * (100vw - 320px) / 1600);
  position: absolute;
  top: calc(13px + 3 * (100vw - 320px) / 1600);
  left: calc(17px + 3 * (100vw - 320px) / 1600);
}
.demo-box .img-box .dots span {
  width: calc(7px + 3 * (100vw - 320px) / 1600);
  height: calc(7px + 3 * (100vw - 320px) / 1600);
  border-radius: 100%;
  display: block;
  background-color: #cccccc;
}
.demo-box .img-box .dots span:nth-child(2) {
  background-color: #dddddd;
}
.demo-box .img-box .dots span:nth-child(3) {
  background-color: #eeeeee;
}
.demo-box h4 {
  font-weight: 500;
  margin-bottom: 6px;
  color: rgba(var(--title-color), 1);
  transition: all 0.5s ease;
  text-transform: capitalize;
}
.demo-box h5 {
  color: rgba(var(--content-color), 1);
}
.demo-box:hover {
  transform: translateY(-8px);
}
.demo-box:hover h4 {
  color: rgba(var(--primary-color), 1);
}

/*=====================
  08. Feature section
==========================*/
.bg-section {
  background-image: url("../images/home-section.jpg");
}

.feature-section {
  text-align: center;
}
.feature-section .feature-row {
  width: 90%;
  margin: 0 auto;
  padding-bottom: calc(45px + 55 * (100vw - 320px) / 1600);
}
@media (max-width: 1199px) {
  .feature-section .feature-row {
    width: 100%;
  }
}
.feature-section .feature-box {
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  gap: calc(14px + 6 * (100vw - 320px) / 1600);
}
.feature-section .feature-box .icon {
  width: calc(68px + 12 * (100vw - 320px) / 1600);
  height: calc(68px + 12 * (100vw - 320px) / 1600);
  margin-inline: auto;
}
.feature-section .feature-box h3 {
  color: rgba(var(--white), 1);
  font-size: calc(16px + 4 * (100vw - 320px) / 1600);
  margin-bottom: calc(-8px + -2 * (100vw - 320px) / 1600);
}
.feature-section .feature-box p {
  font-size: calc(14px + 4 * (100vw - 320px) / 1600);
}
.feature-section .feature-box img {
  width: max-content;
  margin: 0 auto;
}
.feature-section .nav-tabs {
  display: inline-flex;
  gap: calc(10px + 10 * (100vw - 320px) / 1600);
  border: none;
  border-radius: 100px;
  flex-wrap: nowrap;
  padding: 0;
  overflow: auto;
}
@media (max-width: 500px) {
  .feature-section .nav-tabs {
    display: flex;
    width: auto;
    margin: 0 auto;
  }
}
.feature-section .nav-tabs .nav-link {
  white-space: nowrap;
  box-shadow: unset;
  font-size: calc(16px + 2 * (100vw - 320px) / 1600);
  font-weight: 500;
  padding: calc(10px + 6 * (100vw - 320px) / 1600) calc(20px + 10 * (100vw - 320px) / 1600);
  color: rgba(var(--white), 1);
  border: 1px solid transparent;
  margin: 0;
  border-radius: 100px;
  text-transform: capitalize;
  background-color: rgba(var(--white), 0.1);
}
.feature-section .nav-tabs .nav-link.active {
  background-color: rgba(var(--primary-color), 1);
  color: rgba(var(--white), 1);
}
.feature-section .nav-tabs .nav-link.active:hover {
  border-color: rgba(var(--primary-color), 1);
  background-color: rgba(var(--primary-color), 1);
  color: rgba(var(--white), 1);
}
.feature-section .nav-tabs .nav-link:hover {
  border-color: rgba(var(--primary-color), 1);
  background-color: rgba(var(--primary-color), 0.1);
  color: rgba(var(--primary-color), 1);
}
.feature-section .tab-content {
  margin-top: 40px;
}
.feature-section .tab-content .tab-pane .pages-slider .swiper-wrapper {
  transition-timing-function: linear;
}
.feature-section .tab-content .tab-pane .pages-slider .swiper-wrapper .swiper-slide > a {
  display: block;
}
.feature-section .tab-content .tab-pane .pages-slider .swiper-wrapper .swiper-slide > a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, rgba(var(--title-color), 0) 0%, rgba(var(--title-color), 1) 100%);
  z-index: 2;
}
@media (max-width: 460px) {
  .feature-section .tab-content .tab-pane .mySwiper a {
    width: 100%;
    padding-inline: 15px;
  }
}

.feature-wrap {
  padding: 30px 34px 20px;
  border-radius: calc(9px + 11 * (100vw - 320px) / 1600);
  text-align: center;
  background-color: #F2F3F8;
}
.feature-wrap .feature-title {
  margin-bottom: calc(18px + 12 * (100vw - 320px) / 1600);
}
.feature-wrap .feature-title h3 {
  color: rgba(var(--title-color), 1);
  margin-bottom: 10px;
  font-weight: 500;
  font-size: calc(16px + 8 * (100vw - 320px) / 1600);
}
.feature-wrap .feature-title p {
  color: rgba(var(--content-color), 1);
  font-size: calc(14px + 4 * (100vw - 320px) / 1600);
}

/*=====================
  09. Other section
==========================*/
.responsive-box {
  padding: calc(9px + 3 * (100vw - 320px) / 1600);
  position: relative;
  z-index: 1;
}
.responsive-box img {
  border-radius: calc(6px + 4 * (100vw - 320px) / 1600);
}
.responsive-box::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--base-gray), 1);
  z-index: -1;
  border-radius: calc(7px + 8 * (100vw - 320px) / 1600);
}

.vendor-section .vendor-sec {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
@media (max-width: 991.98px) {
  .vendor-section .vendor-sec {
    width: 100%;
  }
  .vendor-section .vendor-sec > div {
    display: none !important;
  }
}
.vendor-section .vendor-sec .vendor-box {
  position: absolute;
  bottom: calc(-39px + 10 * (100vw - 991px) / 929);
  left: calc(-134px + -93 * (100vw - 991px) / 929);
  display: grid;
}
.vendor-section .vendor-sec .vendor-box .sub-img {
  animation: mover 2s infinite alternate;
  width: calc(218px + 82 * (100vw - 991px) / 929);
  border-radius: 10px;
  box-shadow: 0px 5px 10px 0px rgba(39, 119, 252, 0.1019607843);
}
.vendor-section .vendor-sec .vendor-box .text-img {
  animation: mover 2s infinite alternate;
  margin-left: calc(17px + 28 * (100vw - 991px) / 929);
  margin-bottom: calc(-9px + -7 * (100vw - 991px) / 929);
  z-index: 1;
  width: calc(110px + 23 * (100vw - 991px) / 929);
}
.vendor-section .vendor-sec .sub-img-2 {
  position: absolute;
  bottom: 30px;
  right: -129px;
  width: calc(150px + 35 * (100vw - 991px) / 929);
}
.vendor-section .vendor-sec .sub-img-2 img {
  animation: mover 2s infinite alternate;
  animation-delay: 0.6s;
}
.vendor-section .vendor-sec .sub-img-3 {
  position: absolute;
  top: calc(-18px + 240 * (100vw - 991px) / 929);
  width: calc(230px + 90 * (100vw - 991px) / 929);
  right: calc(-110px + -90 * (100vw - 991px) / 929);
  box-shadow: 0px 5px 10px 0px rgba(39, 119, 252, 0.1019607843);
}
.vendor-section .vendor-sec .sub-img-3 img {
  border-radius: 10px;
  animation-delay: 1.2s;
  animation: mover 2s infinite alternate;
}

.product-section .product-img-sec {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
@media (max-width: 1199.98px) {
  .product-section .product-img-sec {
    width: 90%;
  }
}
@media (max-width: 991.98px) {
  .product-section .product-img-sec {
    width: 100%;
  }
}
.product-section .product-img-sec .sub-img-1,
.product-section .product-img-sec .sub-img-2,
.product-section .product-img-sec .sub-img-3 {
  position: absolute;
  box-shadow: 0px 5px 10px 0px rgba(39, 119, 252, 0.1019607843);
}
@media (max-width: 991.98px) {
  .product-section .product-img-sec .sub-img-1,
  .product-section .product-img-sec .sub-img-2,
  .product-section .product-img-sec .sub-img-3 {
    display: none;
  }
}
.product-section .product-img-sec .sub-img-1 img,
.product-section .product-img-sec .sub-img-2 img,
.product-section .product-img-sec .sub-img-3 img {
  border-radius: 10px;
  animation: mover 2s infinite alternate;
  width: 100%;
  height: 100%;
}
.product-section .product-img-sec .sub-img-1 {
  bottom: calc(-24px + 54 * (100vw - 991px) / 929);
  right: calc(-60px + -20 * (100vw - 991px) / 929);
  width: calc(770px + 302 * (100vw - 991px) / 929);
}
.product-section .product-img-sec .sub-img-1 img {
  animation-delay: 0.3s;
}
.product-section .product-img-sec .sub-img-2 {
  height: calc(243px + 76 * (100vw - 991px) / 929);
  bottom: calc(122px + -70 * (100vw - 991px) / 929);
  left: calc(-50px + -96 * (100vw - 991px) / 929);
}
.product-section .product-img-sec .sub-img-2 img {
  animation-delay: 0.6s;
}
.product-section .product-img-sec .sub-img-3 {
  right: calc(40px + 20 * (100vw - 991px) / 929);
  bottom: calc(62px + 53 * (100vw - 991px) / 929);
  width: calc(175px + 128 * (100vw - 991px) / 929);
}
.product-section .product-img-sec .sub-img-3 img {
  animation-delay: 0.9s;
}

.admin-section .product-img-sec {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
@media (max-width: 1199.98px) {
  .admin-section .product-img-sec {
    width: 90%;
  }
}
@media (max-width: 991.98px) {
  .admin-section .product-img-sec {
    width: 100%;
  }
}
.admin-section .product-img-sec .sub-img-1,
.admin-section .product-img-sec .sub-img-2,
.admin-section .product-img-sec .sub-img-3,
.admin-section .product-img-sec .sub-img-4 {
  position: absolute;
  box-shadow: 0px 5px 10px 0px rgba(39, 119, 252, 0.1019607843);
}
@media (max-width: 991.98px) {
  .admin-section .product-img-sec .sub-img-1,
  .admin-section .product-img-sec .sub-img-2,
  .admin-section .product-img-sec .sub-img-3,
  .admin-section .product-img-sec .sub-img-4 {
    display: none;
  }
}
.admin-section .product-img-sec .sub-img-1 img,
.admin-section .product-img-sec .sub-img-2 img,
.admin-section .product-img-sec .sub-img-3 img,
.admin-section .product-img-sec .sub-img-4 img {
  border-radius: 10px;
  animation: mover 2s infinite alternate;
  width: 100%;
  height: 100%;
}
.admin-section .product-img-sec .sub-img-1 {
  top: calc(38px + 36 * (100vw - 991px) / 929);
  right: calc(-38px + -7 * (100vw - 991px) / 929);
  width: calc(202px + 63 * (100vw - 991px) / 929);
}
.admin-section .product-img-sec .sub-img-1 img {
  animation-delay: 0.3s;
}
.admin-section .product-img-sec .sub-img-2 {
  width: calc(148px + 80 * (100vw - 991px) / 929);
  bottom: calc(36px + 25 * (100vw - 991px) / 929);
  left: calc(-84px + -118 * (100vw - 991px) / 929);
}
.admin-section .product-img-sec .sub-img-2 img {
  animation-delay: 0.6s;
}
.admin-section .product-img-sec .sub-img-3 {
  top: calc(72px + 137 * (100vw - 991px) / 929);
  left: calc(-42px + -83 * (100vw - 991px) / 929);
  width: calc(158px + 72 * (100vw - 991px) / 929);
}
.admin-section .product-img-sec .sub-img-3 img {
  animation-delay: 0.9s;
}
.admin-section .product-img-sec .sub-img-4 {
  width: calc(356px + 194 * (100vw - 991px) / 929);
  bottom: calc(-38px + 8 * (100vw - 991px) / 929);
  right: calc(-92px + -81 * (100vw - 991px) / 929);
}
.admin-section .product-img-sec .sub-img-4 img {
  animation-delay: 1s;
}

#tooltip {
  position: absolute;
  background: rgba(var(--primary-color), 0.9);
  color: rgba(var(--white), 1);
  padding: 9px 15px;
  border-radius: 6px;
  display: none;
  z-index: 2;
  text-transform: capitalize;
  white-space: nowrap;
  font-weight: 600;
}

.slider-section {
  display: flex;
  flex-direction: column;
  gap: calc(12px + 18 * (100vw - 767px) / 1153);
}

.feature-slider {
  display: flex;
  gap: calc(12px + 18 * (100vw - 320px) / 1600);
  flex-wrap: nowrap;
}
.feature-slider li {
  display: flex;
  align-items: center;
  gap: calc(10px + 10 * (100vw - 320px) / 1600);
  padding: calc(12px + 10 * (100vw - 320px) / 1600) calc(17px + 18 * (100vw - 320px) / 1600);
  box-shadow: 6px 10px 90px -11px rgba(34, 34, 34, 0.1);
  border-radius: 40px;
}
.feature-slider img {
  width: calc(24px + 6 * (100vw - 320px) / 1600);
  height: calc(24px + 6 * (100vw - 320px) / 1600);
}
.feature-slider span {
  white-space: nowrap;
  padding-right: calc(17px + 18 * (100vw - 320px) / 1600);
  font-size: calc(15px + 3 * (100vw - 320px) / 1600);
  font-weight: 600;
}

/*=====================
  10. Footer section
==========================*/
.footer-section {
  position: relative;
  background-image: url("./../images/home-section.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.footer-section .footer-box .footer-img .count-img {
  width: calc(100px + 102 * (100vw - 320px) / 1600);
}
.footer-section .footer-box .footer-details {
  margin-top: calc(10px + 10 * (100vw - 320px) / 1600);
}
.footer-section .footer-box .footer-details h5 {
  font-weight: 500;
  font-size: calc(14px + 8 * (100vw - 320px) / 1600);
  color: rgba(var(--white), 0.6);
  white-space: nowrap;
}
.footer-section .footer-box .footer-details h2 {
  margin-top: calc(5px + 5 * (100vw - 320px) / 1600);
  font-weight: 500;
  color: rgba(var(--white), 1);
}
.footer-section .footer-content {
  text-align: center;
  margin-top: calc(30px + 50 * (100vw - 320px) / 1600);
}
.footer-section .footer-content .footer-logo {
  height: calc(40px + 20 * (100vw - 320px) / 1600);
}
.footer-section .footer-content h4 {
  margin-top: 15px;
  color: rgba(var(--white), 0.7);
  text-transform: uppercase;
  font-weight: 500;
  width: 50%;
  line-height: 1.6;
  margin-inline: auto;
}
@media (max-width: 1540.98px) {
  .footer-section .footer-content h4 {
    width: 70%;
  }
}
@media (max-width: 1020.98px) {
  .footer-section .footer-content h4 {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .footer-section .footer-content h4 {
    line-height: 1.4;
  }
}
.footer-section .footer-content p {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  font-size: calc(16px + 14 * (100vw - 320px) / 1600);
  line-height: 1.5;
  color: rgba(var(--white), 1);
}
@media (max-width: 1199px) {
  .footer-section .footer-content p {
    width: 80%;
  }
}
@media (max-width: 991px) {
  .footer-section .footer-content p {
    width: 100%;
  }
}
.footer-section .footer-content p span {
  line-height: 1;
}
.footer-section .footer-content p span .star {
  line-height: 1;
  width: calc(16px + 8 * (100vw - 320px) / 1600);
  height: calc(16px + 8 * (100vw - 320px) / 1600);
}
.footer-section .footer-content .more-button {
  margin-top: calc(20px + 20 * (100vw - 320px) / 1600);
}
.footer-section .footer-content .Powered-sec {
  margin-top: calc(20px + 20 * (100vw - 320px) / 1600);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-weight: 400;
  font-size: calc(15px + 5 * (100vw - 320px) / 1600);
  color: rgba(var(--white), 0.6);
}
.footer-section .footer-content .Powered-sec .pixalstrap-logo {
  width: calc(100px + 70 * (100vw - 320px) / 1600);
}
.footer-section .copyright-box {
  position: relative;
  text-align: center;
  margin-top: calc(20px + 20 * (100vw - 320px) / 1600);
  padding: 15px;
  background-color: rgba(var(--white), 0.05);
}
@media (max-width: 767px) {
  .footer-section .copyright-box {
    padding-bottom: 10px;
  }
}
.footer-section .copyright-box p {
  position: relative;
  color: rgba(var(--white), 1);
  z-index: 1;
  margin: 0;
  width: 100%;
}

/*=====================
  11. Testimonial section
==========================*/
.testimonial-box {
  padding: calc(15px + 5 * (100vw - 320px) / 1600);
  box-shadow: 6px 10px 90px -11px rgba(var(--title-color), 0.102);
  height: 100%;
  border-radius: calc(9px + 11 * (100vw - 320px) / 1600);
}
.testimonial-box .top-part {
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-box .top-part img {
  width: calc(52px + 8 * (100vw - 320px) / 1600);
  height: calc(52px + 8 * (100vw - 320px) / 1600);
  border-radius: 100%;
}
.testimonial-box .top-part h4 {
  font-weight: 600;
  color: rgba(var(--title-color), 1);
  margin-bottom: 3px;
}
.testimonial-box .top-part h5 {
  color: rgba(var(--content-color), 1);
  font-size: calc(14px + 2 * (100vw - 320px) / 1600);
}
.testimonial-box .top-part span {
  font-size: calc(14px + 2 * (100vw - 320px) / 1600);
  line-height: 1;
}
.testimonial-box .top-part ul {
  display: flex;
  align-items: center;
  gap: 1px;
}
.testimonial-box p {
  margin-top: 15px;
  font-size: calc(16px + 2 * (100vw - 320px) / 1600);
}
.testimonial-box .rating {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: calc(10px + 11 * (100vw - 320px) / 1600);
}
.testimonial-box .rating ul {
  display: flex;
  align-items: center;
  gap: 1px;
}
.testimonial-box .rating li {
  line-height: 1;
  display: flex;
}
.testimonial-box .rating i {
  color: #ffbc4f;
  font-size: calc(16px + 2 * (100vw - 320px) / 1600);
}
.testimonial-box .rating span {
  font-size: calc(14px + 2 * (100vw - 320px) / 1600);
  font-weight: 500;
  color: rgba(var(--content-color), 1);
}

/*=====================
  12. Tap To Top Style
==========================*/
.scroll-to-top {
  z-index: 4;
  position: fixed;
  right: 20px;
  bottom: 30px;
  width: calc(30px + 10 * (100vw - 320px) / 1600);
  height: calc(30px + 10 * (100vw - 320px) / 1600);
  background-color: #2d2d2d;
  border: none;
  font-size: calc(20px + 10 * (100vw - 320px) / 1600);
  transition: 0.4s ease;
  transform: scale(0);
  outline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(4px + 2 * (100vw - 320px) / 1600);
}
.scroll-to-top .arrow {
  color: rgba(var(--white), 1);
  font-size: calc(18px + 4 * (100vw - 320px) / 1600);
}

/*=====================
  13. Cursor style
==========================*/
#cursor {
  position: fixed;
  top: -5px;
  left: -5px;
  width: calc(8px + 2 * (100vw - 320px) / 1600);
  height: calc(8px + 2 * (100vw - 320px) / 1600);
  background-color: rgba(var(--primary-color), 1);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
}
@media (max-width: 575.98px) {
  #cursor {
    display: none;
  }
}

#cursor-border {
  --size: 30px;
  position: fixed;
  top: calc(var(--size) / -2);
  left: calc(var(--size) / -2);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(var(--primary-color), 1);
  pointer-events: none;
  transition: top 0.15s ease-out, left 0.15s ease-out, width 0.15s ease-out, height 0.15s ease-out, background-color 0.15s ease-out;
  z-index: 999;
}
@media (max-width: 575.98px) {
  #cursor-border {
    display: none;
  }
}

/*=====================
  14. Animation
==========================*/
@keyframes marquee {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes mover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

/*# sourceMappingURL=style.css.map */