:root {
  --primary-color:177,142,53;
  --secondary-color:30,56,30;
  --white:255,255,255;
  --black:0,0,0;
  --subtext-color:153,153,153;
  --text-color:33,33,33;
  --bg-color:245,241,224;
  --menu-color:102,102,102;
  --body-color:250, 248, 240;
}

/************************
    reset css 
*************************/
h1 {
  font-size: calc(20px + (50 - 20) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: 0;
}

h2 {
  font-size: calc(24px + (42 - 24) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: 0;
}

h3 {
  font-size: calc(20px + (36 - 20) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: 0;
}

h4 {
  font-size: calc(16px + (26 - 18) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: 0;
}

h5 {
  font-size: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: 0;
}

h6 {
  font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: 0;
}

p {
  font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: 0;
}

a {
  text-decoration: none;
}

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

li {
  list-style: none;
  display: inline-block;
  font-size: 14px;
}

@media screen and (min-width:1600px) {
  .custom-container {
    max-width: 1515px;
    margin-inline: auto;
  }
}

body{
    height: 100%;
    font-family: "Outfit", sans-serif;
    background-color: rgba(var(--body-color), 1);
;
}

.justify-items-center{
  justify-items: center;
}

/************************
    Scrollbar css 
*************************/

section *::-webkit-scrollbar-track{
  background: rgba(var(--secondary-color),0.1) !important;
}

section *::-webkit-scrollbar {
  height:calc(2px + (5 - 2) * ((100vw - 320px) / (1920 - 320)));
  width:5px !important;
  overflow:hidden;
}

section *::-webkit-scrollbar-thumb{
  background: rgba(var(--secondary-color),0.3) !important;
  border-radius: 2px;
}

/************************
    section padding 
*************************/

.steps-section,
.feature-marquee,
.features-section,
.pages-section,
.pricing-table-section,
.header-footer-section,
.review-section{
  padding-block: calc(36px + (100 - 36) * ((100vw - 320px) / (1920 - 320)));
  overflow: hidden;
}
/************************
    Button css 
*************************/
.btn{
    padding: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320))) calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
    display: flex;
    align-items: center;
    gap: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1;
    border-radius: 0px;
    font-weight: 500;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
}

/************************
    header section 
*************************/
.navbar {
  justify-content: unset;
  align-items: center;
  background: rgb(var(--bg-color));
  padding: calc(10px + (25 - 10) * ((100vw - 320px) / (1920 - 320)))
           calc(10px + (50 - 10) * ((100vw - 320px) / (1920 - 320))) 0;
  overflow: hidden;
}

#headerTop.sticky .navbar{
  padding-block:calc(9px + (18 - 9) * ((100vw - 320px) / (1920 - 320))) calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
}

.navbar .logo { 
  height: calc(27px + (42 - 27) * ((100vw - 320px) / (1920 - 320)));
  display: flex;
}

.navbar .logo {
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.navbar .buy-btn, .navbar .buy-btn:focus{
  background-color: rgb(var(--primary-color));
  color:rgb(var(--white));
  width: fit-content;
  justify-self: end;
}


.navbar .buy-btn svg{
  width: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
  height: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));
  fill:rgb(var(--white));
}

#headerTop.sticky .logo {
  opacity: 1;
}
#headerTop:not(.sticky) .navbar div:first-child{
  display: none !important;
  @media (max-width:1199px) {
    display: flex !important;
  }
}
#headerTop.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  animation: slideDown 0.8s ease forwards;
}

#headerTop {
  transition: all 0.3s ease;
}

.navbar .navbar-toggler {
  padding: 0;
  border: 0;
}

.navbar .navbar-toggler .navbar-toggler-icon {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
  background-image: none;
}

.navbar .navbar-toggler .navbar-toggler-icon i {
  color: rgba(var(--black), 1);
  font-size: calc(18px + (34 - 18) * ((100vw - 320px) / (1920 - 320)));
}

.navbar .navbar-toggler:focus {
  box-shadow: none;
}

.navbar .navbar-collapse .close-box {
  display: none;
}

 @media (max-width: 1199px) {
  .navbar .navbar-collapse {
    position: fixed;
    top: 0;
    left: -300px;
    width: calc(240px + (360 - 240) * ((100vw - 320px) / (1200 - 320)));
    height: 100vh;
    background-color: rgba(var(--white), 1);
    padding: 0;
    transition: all 0.3s ease-in-out;
    z-index: 3;
  }

  .navbar .navbar-collapse.show {
    left: 0;
  }

  .navbar .navbar-collapse .navbar-nav {
    padding: 14px 20px;
    height: 100%;
  }

  .navbar .navbar-collapse .close-box {
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    color: rgb(var(--text-color));
    border:none;
    width: 100%;
    padding: 14px 20px;
  }
} 

.navbar .navbar-nav {
  display: flex;
  gap: calc(12px + (50 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.navbar .navbar-nav .nav-link {
  text-transform: uppercase;
  color: rgba(var(--menu-color), 1);
  font-weight: 400;
  font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
  padding: 0;
  width: fit-content;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease-in-out;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:active {
  color: rgba(var(--text-color), 1);
  border-bottom-color:rgba(var(--primary-color), 1);
}

/************************
    home section
*************************/
.home-section{
  background: rgb(var(--bg-color)) url('../images/hero-bg.png') center/cover no-repeat;
  padding-top: 20px;
}

.home-section .logo{
  width: 100%;
  display: flex;
  justify-content: center;
}

.home-section .logo img{
  width: calc(80px + (120 - 80) * ((100vw - 320px) / (1920 - 320)));
}

.home-section .hero-content{
  max-width: calc(330px + (661 - 330) * ((100vw - 320px) / (1920 - 320)));
  text-align: center;
  padding-top: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
}

.home-section .hero-content h1{
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color:rgb(var(--secondary-color));
  font-size: calc(20px + (46 - 20) * ((100vw - 320px) / (1920 - 320)));
  letter-spacing: 1.2px;
}

.home-section .hero-content h1 span{
  color: rgb(var(--primary-color));
}

.home-section .hero-content p{
  color: rgb(var(--subtext-color));
  padding:10px calc(10px + (26 - 10) * ((100vw - 320px) / (1920 - 320))) 0;
  font-size:calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
}

.home-section .hero-counter{
  width: 100%;
  text-align: center;
  margin-block: calc(16px + (50 - 16) * ((100vw - 320px) / (1920 - 320)));
}
@media (max-width:480px) {
  .home-section .hero-counter div{
    width: 50%;
    --bs-gutter-y:16px;
  }
}
.home-section .hero-counter h2{
  font-weight: 700;
  font-size: calc(20px + (36 - 20) * ((100vw - 320px) / (1920 - 320)));
  color:rgb(var(--primary-color));
}

.home-section .hero-counter .counter{
  margin-bottom: 5px;
}

.home-section .hero-counter p{
  text-transform: uppercase;
  font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 500;
  letter-spacing: calc(0.6px + (0.8 - 0.6) * ((100vw - 320px) / (1920 - 320)));
}

.home-section .hero-images{
  padding-inline: 12px;
}
.home-section .hero-images .image-outer{
  background-color: rgba(var(--primary-color),0.1);
  padding: 8px;
  margin-inline: calc(0px + (42 - 0) * ((100vw - 991px) / (1920 - 991)));
  position: relative;
  z-index: 1;
  border: 1px solid rgb(var(--white));
  @media  (max-width:991px) {
    display: none;
    margin-inline: 1px;
  }
}

.home-section .hero-images .image-outer.center .image-effect{
  transform: rotateY(0deg);
  transition: transform 0.35s linear;
  padding: calc(4px + (10 - 4) * ((100vw - 320px) / (1920 - 320))) calc(4px + (10 - 4) * ((100vw - 320px) / (1920 - 320))) 0;
  margin-inline: 12px;
  background-color: rgba(var(--primary-color),0.1);
  border: 1px solid rgb(var(--white));
  @media (max-width:575px) {
    margin-inline: 0;
  }
}

.home-section .hero-images .image-outer.center .image-effect img{
  object-fit: cover;
  min-height: 200px;
}

.home-section .hero-images .image-outer.center{
  perspective: 680px;
  background: none;
  display: block;
  border:none;
}

.home-section .hero-images .image-outer.center:hover .image-effect{
  transform: rotateY(-3deg);
  @media (max-width:768px) {
    transform: rotateY(0deg);
  }
}

.home-section .hero-images .image-outer.center ~ .demo-btn{
    top: 50%;
    right: calc(-8px + (0 - -8) * ((100vw - 320px) / (1920 - 320)));
    width: calc(70px + (150 - 70) * ((100vw - 320px) / (1920 - 320)));
    height: calc(70px + (150 - 70) * ((100vw - 320px) / (1920 - 320)));
    transform: translateY(-50%);
    z-index: 2;
}

.home-section .hero-images .demo-btn .outer-img{
  animation: rotation 10s infinite linear;
}

.home-section .hero-images .demo-btn .demo-btn-border{
  border: 2px solid rgb(var(--white));
  margin: calc(16px + (35 - 16) * ((100vw - 320px) / (1920 - 320)));
  padding: calc(4px + (16 - 4) * ((100vw - 320px) / (1920 - 320)));
  border-radius: 50%;
  position: absolute;
  width: calc(100% - calc(30px + (70 - 30) * ((100vw - 320px) / (1920 - 320))));
  height: calc(100% - calc(30px + (70 - 30) * ((100vw - 320px) / (1920 - 320))));
  top: 0;
}

.home-section .hero-images .demo-btn .demo-btn-border a{
  background-color: rgb(var(--white));
  border-radius: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(6px + (14 - 10) * ((100vw - 320px) / (1920 - 320))) calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
}

.home-section .hero-images .demo-btn .demo-btn-border a:active,
.home-section .hero-images .demo-btn .demo-btn-border a:focus{
  border: 1px solid rgb(var(--white));
}

.home-section .hero-images .demo-btn .demo-btn-border a img{
  min-width: 16px;
  height:100%;
}

.home-section .image-top-outer{
  background-color: rgba(var(--primary-color),0.1);
  padding: 7px;
  width: calc(280px + (381 - 280) * ((100vw - 320px) / (1920 - 320)));
  position: absolute;
  border: 1px solid rgb(var(--white));
  @media (max-width:1199px) {
    display: none;
  }
}

.home-section .image-top-outer.second{
  top: -18px;
  right: 0px;
  animation: up-down 3s infinite linear;
  animation-delay: 0.8s;
}

.home-section .image-top-outer.first{
  top: 6px;
  left: 0px;
  height: 330px;
}

.home-section .image-top-outer.first video{
  height: 100%;
  object-fit: cover;
}

.home-section .marquee-wrapper{
  position: absolute;
  bottom: calc(-80px + (-192 - -80) * ((100vw - 320px) / (1920 - 320)));
  z-index: -1;
  opacity: 0.4;
  overflow: hidden;
}

.home-section .marquee-wrapper .marquee{
  font-size: calc(150px + (400 - 150) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1;
  color:rgb(var(--white));
  font-weight: 700;
  white-space: nowrap;
  animation: Marquee 30s linear infinite;
}

/************************
    steps section
*************************/

.steps-section .steps-content p{
  color:rgb(var(--subtext-color));
  font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.8;
}

.steps-section .btn svg{
  width: 16px;
  height: 8px;
  fill:rgb(var(--white));
}

.steps-section .btn{
  background-color: rgb(var(--primary-color));
  color: rgb(var(--white));
  width: fit-content;
  padding-inline: 20px;
}
.steps-section .steps-content .install-steps{
  padding-block: calc(20px + (50 - 20) * ((100vw - 320px) / (1920 - 320)));
}

.steps-section .steps-content .install-steps h2{
  font-size: calc(20px + (26 - 20) * ((100vw - 320px) / (1920 - 320)));
  font-family: "Playfair Display", serif;
  color: rgb(var(--secondary-color));
  font-weight: 700;
  margin-bottom: calc(12px + (30 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.steps-section .steps-content .install-steps ol{
  gap: calc(16px + (30 - 16) * ((100vw - 320px) / (1920 - 320)));
}

.steps-section .steps-content .install-steps ol li{
  border: none;
  counter-increment: step;
  display: flex;
  gap: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
  align-items: center !important;
  font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 500;
  color: rgb(var(--subtext-color));
  padding: 0 calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
  align-items: baseline;
  background: transparent;
  transition: color 0.3s ease-in-out;
}

.steps-section .steps-content .install-steps ol li.active{
  color:rgb(var(--secondary-color));
  background: none;
  margin-top: 0;
}

.steps-section .steps-content .install-steps ol li::before{
  content: counter(step, decimal-leading-zero); 
  border-radius: 50%;
  width: calc(24px + (30 - 24) * ((100vw - 320px) / (1920 - 320)));
  height: calc(24px + (30 - 24) * ((100vw - 320px) / (1920 - 320)));
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 700;
  color: rgb(var(--subtext-color));
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  background-color: rgba(var(--white),1);
    z-index: 1;
}

.steps-section .steps-content .install-steps ol li.active::before{
  background-color: rgb(var(--primary-color));
  color:rgb(var(--white));
  box-shadow: 0px 0px 0px 4px rgba(var(--primary-color),0.1);
}

.steps-section .steps-content .install-steps ol li::after{
  content: "";
  position: absolute;
  left: calc(19px + (30 - 19) * ((100vw - 320px) / (1920 - 320)));
  top: calc(24px + (32 - 24) * ((100vw - 320px) / (1920 - 320)));
  width: 2px;
  height: 100%;
  background-color: rgba(var(--primary-color),0.1);
}

.steps-section .steps-content .install-steps ol li:last-child::after {
  display: none;
}

.steps-section .image-scroll-wrapper{
  padding: calc(4px + (10 - 4) * ((100vw - 320px) / (1920 - 320)));
  background-color: rgba(var(--primary-color),0.1);
  border: 1px solid rgba(var(--white), 1);
}

.steps-section .image-scroll-wrapper .image-scroll{
  background-image: url('../images/home-page.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: calc(215px + (570 - 215) * ((100vw - 320px) / (1920 - 320)));
  transition: 11s linear;
}

.steps-section .image-scroll-wrapper .image-scroll:hover{
  background-position: bottom;
}

@media (max-width: 768px) {
  .steps-section .image-scroll-wrapper .image-scroll {
    animation: autoScrollBg 20s linear infinite;
  }

  .steps-section .image-scroll-wrapper .image-scroll:hover {
    background-position: top; /* disable hover */
  }
}

.steps-section .steps-title{
  font-size: calc(68px + (150 - 68) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 700;
  opacity: 0.2;
  transform: rotate(90deg);
  background: linear-gradient(180deg, rgb(var(--primary-color)) 13.67%, rgba(var(--primary-color), 0) 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  position: absolute;
  font-family: "oswald", sans-serif;
  top: calc(70px + (198 - 70) * ((100vw - 320px) / (1920 - 320)));
  right: calc(-76px + (-186 - -76) * ((100vw - 320px) / (1920 - 320)));
  letter-spacing: calc(0px + (6 - 0) * ((100vw - 320px) / (1920 - 320)));
  @media (max-width:991px) {
    right: calc(-67px + (-20 - -67) * ((100vw - 320px) / (1920 - 320)));
    height: fit-content;
  }
}

/************************
    marquee
*************************/
.marquee-section .marquee{
  padding-block: calc(12px + (28 - 12) * ((100vw - 320px) / (1920 - 320)));
  border-top: 2px solid;
  border-bottom: 2px solid;
  overflow: hidden;
  border-image: linear-gradient(90deg, rgba(var(--primary-color), 0) 0%, rgba(var(--primary-color), 0.3) 50%, rgba(var(--primary-color), 0) 100%) 1;
  background: linear-gradient(90deg, rgba(var(--primary-color), 0) 0%, rgba(var(--primary-color), 0.05) 50%, rgba(var(--primary-color), 0) 100%);
}

.marquee-section .marquee-wrapper p{
  font-size: calc(18px + (26 - 18) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 500;
  color: rgb(var(--secondary-color));
  position: relative;
}

.marquee-section .marquee-wrapper .marquee-content,
.marquee-section .marquee-wrapper{
  display: flex;
  gap: calc(150px + (340 - 150) * ((100vw - 320px) / (1920 - 320)));
  white-space: nowrap;
}

.marquee-section .marquee-wrapper{
  animation: scrollMarquee 15s linear infinite;
}

.marquee-section .marquee-wrapper p::before{
  content: "\2734";
    position: absolute;
    left: -40px;
    top: 0;
    color: rgb(var(--primary-color));
}

/************************
    feature marquee section
*************************/

.feature-marquee .feature-marquee-wrapper{
  display: flex;
  gap: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
  overflow: hidden;
  flex-direction: column;
}

.feature-marquee .feature-marquee-wrapper .marquee-track svg{
  width:30px;
  height: 30px;
}

.feature-marquee .feature-marquee-wrapper .marquee-track li:hover svg{
  filter: invert(1);
}

.marquee-row {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.marquee-track ul {
  display: flex;
  gap: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.marquee-track li {
  list-style: none;
  padding: 20px calc(24px + (35 - 24) * ((100vw - 320px) / (1920 - 320)));
  background: rgb(var(--white));
  font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
  border-radius: 0;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(10px + (16 - 10) * ((100vw - 320px) / (1920 - 320)));
  outline: 2px solid rgb(var(--body-color));
  outline-offset: -6px;
}

.marquee-track li i{
  font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
}

.marquee-track li:hover{
  background: rgb(var(--secondary-color));
  color: rgb(var(--white));
  animation: none;
  outline-color: rgba(var(--body-color),0.2);
}

.marquee-row:hover .marquee-track {
  animation-play-state: paused !important;
}

.marquee-row.left .marquee-track {
  animation:scrollMarquee 30s linear infinite;
}

.marquee-row.right .marquee-track {
  animation: scrollMarquee 35s linear infinite reverse;
}

/************************
    ready to us   section
*************************/
.ready-sections span{
  padding: calc(3px + (6 - 3) * ((100vw - 320px) / (1920 - 320)));
  background-color: rgba(var(--primary-color),0.1);
  border: 1px solid rgb(var(--white));
  display: block;
  margin-bottom: calc(10px + (24 - 10) * ((100vw - 320px) / (1920 - 320)));
}

.ready-sections div{
  text-align: center;
}

.ready-sections h2,
.review-section h2{
  font-size: calc(80px + (180 - 80) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 800;
  background: linear-gradient(180deg, rgb(var(--primary-color)) 13.67%, rgba(var(--primary-color), 0) 100%);
  background-clip: text;
  opacity: 0.6;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.ready-sections h3{
  font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 700;
  color: rgb(var(--secondary-color));
  margin-bottom: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
  font-family: "Playfair Display", serif;
}

.ready-sections .ready-section-list div{
  padding-inline: calc(5px + (12 - 5) * ((100vw - 320px) / (1920 - 320)));
}

@media (min-width: 575px) and (max-width: 991px) {
    .ready-sections .ready-section-list div:nth-child(2) {
        display: none;
    }
}

/************************
    features section
*************************/
.features-section .feature-content{
  margin-bottom: 50px;
  @media (max-width:991px) {
    margin-bottom: 16px;
  }
}

.features-section .feature-content p.sub-heading{
  line-height: 1.25;
}

.features-section .feature-content h2{
  line-height: 1;
}

.features-section p{
  color: rgb(var(--subtext-color));
  font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.6;
  @media (max-width:575px) {
    line-height: 1.5;
  }
}

.features-wrapper{
  display: flex;
  flex-direction: column;
  gap: calc(12px + (30 - 12) * ((100vw - 320px) / (1920 - 320)));
  flex-wrap: wrap;
  max-height: calc(1315px + (2000 - 1315) * ((100vw - 320px) / (1920 - 320)));
  width: calc(100% - calc(24px + (60 - 24) * ((100vw - 320px) / (1920 - 320))));
   @media (max-width:991px) {
    max-height: 2200px;
     width: calc(100% - calc(12px + (30 - 12) * ((100vw - 320px) / (1920 - 320))));
  }
  @media (max-width:575px) {
    max-height: unset;
    width: 100%;
    gap:12px;
  }
}

.features-section .features.features-top{
    width: 100%;
}

.features-section .features{
  width: 33.33%;
  background-color: rgba(var(--white),0.46);
  padding: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
  border: calc(4px + (10 - 4) * ((100vw - 320px) / (1920 - 320))) solid rgba(var(--primary-color),0.1);
  outline: 1px solid rgb(var(--white));
  @media (max-width:991px) {
    width: 50%;
  }
  @media (max-width:575px) {
    width: 100%;
  }
}

.features-section .features-content-wrapper > div:first-child{
  margin-bottom: calc(12px + (30 - 12) * ((100vw - 320px) / (1920 - 320)));
  gap:calc(12px + ( 30 - 12) * ((100vw - 320px) / (1920 - 320)));
  width: calc(100% - calc(20px + ( 30 - 20) * ((100vw - 320px) / (1920 - 320))));
  @media (max-width:767px) {
    flex-direction: column;
    width: 100% !important;
  }
}

.features-section .features .mobile-images-wrapper{
  background:  url('../images//background-image.webp');
  padding: calc(10px + (34 - 10) * ((100vw - 320px) / (1920 - 320))) calc(20px + (50 - 20) * ((100vw - 320px) / (1920 - 320))) 0 calc(20px + (50 - 20) * ((100vw - 320px) / (1920 - 320)));
  overflow: hidden; 
}

.features-section .features .mobile-images-wrapper .mobile-menu{
    position: absolute;
    z-index: 3;
    bottom: 30px;
    transform: translateX(-50%);
    left: 50%;
    width: calc(340px + (462 - 340) * ((100vw - 991px) / (1920 - 991)));
    @media (max-width:991px) {
      width: 300px;
    }
    @media (max-width:767px) {
      width: calc(260px + (420 - 260) * ((100vw - 320px) / (767 - 320)));
    }
}

.features-section .mobile-images .center-image {
  animation: autoScrollBg 70s linear infinite;
  background-image: url('../images/features//mobile-screen.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: calc(390px + (560 - 390) * ((100vw - 991px) / (1920 - 991)));
  transition: 15s linear;
  background-position: top;
  width: 320px;
  z-index: 2;
  border: 2px solid rgb(var(--secondary-color));
  border-radius: 30px 30px 0 0;
  border-bottom: none;
  overflow: hidden;
  margin-inline: auto;
  @media (max-width:991px) {
    height: 280px;
  }
  @media (max-width:767px) {
    height: calc(320px + (350 - 320) * ((100vw - 320px) / (767 - 320)));
  }
}

.features-section .mobile-images .center-image .image-scroll{
  background-image: url('../images/home-page.png');
  background-repeat: no-repeat;
  background-size: cover;
  transition: 11s linear;
}

.features-section .features .image{
  display: block;
  margin-bottom: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
  backdrop-filter: blur(4px);
  max-height: 532px;
  overflow: hidden;
}

.features-section .features .feature-title{
  color: rgb(var(--secondary-color));
  font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 600;
  font-family: "Playfair Display", serif;
  line-height: 1;
  margin-bottom: 8px;
}

.shopping-video-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgb(var(--body-color));
  padding:18px 8px ;
  position: relative;
}

.shopping-video-wrapper .shopping-video:first-child{
  left: 8px;
}

.shopping-video-wrapper .shopping-video:last-child{
  right: 8px;
}

.shopping-video {
  transition: all 0.4s ease;
  position: absolute;
  z-index: 1;
}

.shopping-video.active {
  transform: scale(1.08);
  opacity: 1;
  z-index: 2;
  position: relative;
}

.video-wrapper {
  width: calc(140px + (171 - 140) * ((100vw - 320px) / (1920 - 320)));
  height: calc(250px + (304 - 250) * ((100vw - 320px) / (1920 - 320)));
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 2px solid rgb(var(--secondary-color));
}

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

.product {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
}

.shopping-video .view{
  position: absolute;
  top:8px;
  right:8px;
  background: rgba(var(--white),0.3);
  color:rgb(var(--white));
  font-size: 7px;
}

.shopping-video .view span{
  padding: 0px 2px;
  margin-bottom: 0;
  border: none;
  display: flex;
  gap: 2px;
  align-items: center;
}

.shopping-video .view span i{
  font-size: 8px;
}

/************************
    pages section
*************************/
.pages-section{
  background: linear-gradient(180deg, rgba(245, 241, 224, 0) 0%, #F5F1E0 50%, rgba(245, 241, 224, 0) 100%);
}

.pages-section .pages-outer-wrapper .pages-heading{
  text-align: center;
  width: 50%;
  margin-inline: auto;
  @media (max-width:991px) {
    width: 75%;
  }
  @media (max-width:767px) {
    width: 100%;
  }
}

.pages-section .page-tab-content ul{
  margin-bottom: 30px;
  justify-content: center;
  flex-wrap: nowrap;
  @media (max-width:767px) {
    overflow-x: scroll;
    padding-bottom: 10px;
    justify-content: flex-start;
  }
}

.pages-section .page-tab-content ul li{
  white-space: nowrap;
}

.pages-section .page-tab-content .page-content-wrapper .page-content{
  background: rgba(var(--primary-color),0.1);
  border: 1px solid rgb(var(--white));
  padding: calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320)));
}

.pages-section .page-tab-content .page-content-wrapper .page-content .page-image{
  position: relative;
  overflow: hidden;
}

.pages-section .page-tab-content .page-content-wrapper .page-content .page-content-overlay{
  transition: all 0.3s ease;
}

.pages-section .page-tab-content .page-content-wrapper .page-content:hover .page-image img{
  transform: scale(1.03);
}

.pages-section .page-tab-content .page-content-wrapper .page-content:hover .page-content-overlay{
  position: absolute;
  inset: 0;
}

.pages-section .page-tab-content .page-content-wrapper .page-content:hover .btn{
  opacity: 1;
  transform: translate(-50%, -30px);
}

.pages-section .page-tab-content .page-content-wrapper .page-content .btn{
  position: absolute;
  bottom: 0px;
  background: rgb(var(--primary-color));
  color: rgb(var(--white));
  padding: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320))) calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.pages-section .page-tab-content .page-content-wrapper .page-content .btn svg{
  width: 16px;
  height: 8px;
  fill:rgb(var(--white));
}

.pages-section .page-tab-content .page-content-wrapper .page-content img{
  aspect-ratio: 53/50;
  transition: all 0.5s ease-in-out;
}

.pages-section .page-tab-content .page-content-wrapper .page-content ~ h3{
  margin-top: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
  font-size: calc(20px + (26 - 20) * ((100vw - 320px) / (1920 - 320)));
  font-family: "Playfair Display", serif;
  font-weight: 700;
  text-align: center;
  color: rgb(var(--secondary-color));
}

/************************
    Pricing Table section
*************************/
.pricing-table-section{
  background-color: rgb(var(--bg-color));
  text-align: center;
}

.pricing-table-section .pricing-wrapper .pricing-table table{
  width: 100%;
}

.pricing-table-section .pricing-wrapper .pricing-table table th,
.pricing-table-section .pricing-wrapper .pricing-table table td{
  border: 6px solid rgb(var(--bg-color));
  padding: calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320))) calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
}

.pricing-table-section .pricing-wrapper .pricing-table table td:first-child{
  font-weight: 600;
  text-align: left;
  text-transform: capitalize;
}

.pricing-table-section .pricing-wrapper .pricing-table table th{
  background: rgb(var(--secondary-color));
  color:rgb(var(--primary-color));
  font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.57px;
  min-width: 260px;
}

.pricing-table-section .pricing-wrapper .pricing-table table tfoot td{
  background-color: rgb(var(--secondary-color));
  color: rgb(var(--primary-color));
  text-transform: uppercase;
  font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 700;
  letter-spacing: 1.57px;
  padding-block: calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.pricing-table-section .pricing-wrapper .pricing-table table tfoot td:first-child{
  text-align: center;
}

.pricing-table-section .pricing-wrapper .pricing-table table td{
  font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
  background: rgb(var(--body-color));
}

.pricing-table-section .pricing-wrapper .pricing-table table td .free-content{
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
}

.pricing-table-section .pricing-wrapper .pricing-table table td .free-icon{
  border: 1px solid rgb(var(--primary-color));
  border-radius: 4px;
  background: rgb(var(--body-color));
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
}

.pricing-table-section .pricing-wrapper .pricing-table table td svg{
  width: 16px;
  height: 16px;
}

/************************
    header footer style section 
*************************/
.header-footer-section .header-footer-wrapper .header-footer-top{
  justify-content: space-between;
    align-items: center;
    margin-bottom: calc(20px + (50 - 20) * ((100vw - 320px) / (1920 - 320)));
    @media (max-width:575px) {
     flex-direction: column;
     gap: 20px; 
     text-align: center;
    }
}

.header-footer-section .header-footer-wrapper .tab-content .page-content{
  background-color: rgba(var(--primary-color),0.1);
  padding: calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320)));
  border: 1px solid  rgb(var(--white));
}

.header-footer-section #header-style .page-content-wrapper{
  display: flex;
  flex-direction: column;
  gap: calc(10px + (30 - 10) * ((100vw - 320px) / (1920 - 320)));
}

.header-footer-section .footer-wrapper{
  position: relative;
  padding-bottom: calc(28px + (44 - 28) * ((100vw - 320px) / (1920 - 320)));
}

.header-footer-section .footer-wrapper .swiper-pagination{
  bottom: 0;
}

.header-footer-section .footer-wrapper .swiper-pagination-bullet{
  width: 10px;
  height: 10px;
  background-color: rgba(var(--primary-color), 0.25);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.header-footer-section .footer-wrapper .swiper-pagination-bullet-active{
  width: 24px;
  border-radius: 999px;
  background-color: rgb(var(--primary-color));
}

/************************
    Review
*************************/
.review-section .review-content-wrapper h2{
  font-size: calc(60px + (130 - 60) * ((100vw - 320px) / (1920 - 320)));
}

.review-section .review-content{
  display: flex;
  justify-content: space-between;
  @media (max-width:991px) {
    flex-direction: column;
    gap: calc(20px + (50 - 20) * ((100vw - 320px) / (992 - 320)));
    justify-content: center;
    text-align: center;
  }
}

.review-section .review-content .review-user .user-images{
  margin-bottom:calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.review-section .review-content .review-count{
  width: 100%;
}

.review-section .review-content .review-count p{
  font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
  color: rgb(var(--secondary-color));
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
  letter-spacing: calc(1.2px + (1.57 - 1.2) * ((100vw - 320px) / (1920 - 320)))
}

.review-section .review-content .review-user .user-images img{
  height:calc(42px + (50 - 42) * ((100vw - 320px) / (1920 - 320)));
  width:calc(42px + (50 - 42) * ((100vw - 320px) / (1920 - 320)));
  border-radius: 50%;
  overflow: hidden;
  margin-left: -12px;
  background: rgb(var(--bg-color));
  border: 2px solid rgba(var(--primary-color),0.5);
}

.review-section .review-content .review-user .user-images img:first-child{
  margin-left: 0px;
}

.review-section .review-wrapper{
  margin-top: calc(20px + (50 - 20) * ((100vw - 320px) / (1920 - 320)));
}

.review-section .marquee-track{
  gap:calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
  padding-block: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
}

.review-section .marquee-track ul{
  gap: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.marquee-track li.review-box{
  width: calc(300px + (460 - 300) * ((100vw - 320px) / (1920 - 320)));
  white-space: wrap;
  outline: none;
  transition: all 0.3s ease-in-out;
  border: calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320))) solid rgb(var(--bg-color));
  background: rgb(var(--white));
  padding: 0;
}

.marquee-track li.review-box .user-review{
  padding: calc(16px + (30 - 16) * ((100vw - 320px) / (1920 - 320)));
  background-color: rgb(var(--white));
}

.marquee-track li.review-box p{
  color: rgb(var(--subtext-color));
  font-weight: 400;
}

.marquee-track li.review-box .user-info-wrapper{
  display: flex;
  justify-content: space-between;
  margin-top: calc(10px + (16 - 10) * ((100vw - 320px) / (1920 - 320)));
}

.left .marquee-track li.review-box:hover{
  color: rgb(var(--subtext-color));
  transform: rotateZ(2deg);
}

.right .marquee-track li.review-box:hover{
  color: rgb(var(--subtext-color));
  transform: rotateZ(-2deg);
}

.marquee-track li.review-box .user-info-wrapper .user-image{
  height: calc(42px + (50 - 42) * ((100vw - 320px) / (1920 - 320)));
  width: calc(42px + (50 - 42) * ((100vw - 320px) / (1920 - 320)));
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgb(var(--bg-color));
}

.marquee-track li.review-box .user-info-wrapper .user-info .user-name{
  color: rgb(var(--text-color));
  font-size: calc(17px + (20 - 17) * ((100vw - 320px) / (1920 - 320)));
}

.marquee-track li.review-box .user-info-wrapper .user-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/************************
    footer design
*************************/

 footer {
   border-radius: 0;
   background:rgb(var(--secondary-color))  url('../images/footer-bg.png') no-repeat center/cover;
  }
  
  footer .footer-outer-box{
  padding: calc(50px + (120 - 50) * ((100vw - 320px) / (1920 - 320))) 0;
  position: relative; 
}

footer .footer-content{
  max-width: 813px;
  margin-inline: auto;
}

footer .footer-content h2{
  margin-bottom: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
  color: rgb(var(--primary-color));
  font-size: calc(24px + (50 - 24) * ((100vw - 320px) / (1920 - 320)));
  font-family: "playfair display",serif;
}

footer .footer-content p.sub-title{
  color:rgba(var(--bg-color), 1);
  text-transform: uppercase;
  font-size: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
  @media (max-width:575px) {
    font-weight: 600;
  }
}
footer .footer-content p.description{
  color:rgba(var(--white), 1);
  @media (max-width:575px) {
    display: none;
  }
}

footer .btn{
  width: 250px;
  justify-content: center;
  @media (max-width:380px) {
    width: fit-content;    
  }
}

footer .btn-box{
  display: flex;
  gap:calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320)));
  justify-content: end;
  margin-left: auto;
  margin-top: calc(30px + (80 - 30) * ((100vw - 320px) / (1920 - 320)));
}

footer .buy-btn,
footer .buy-btn:hover{
  background-color: rgb(var(--primary-color));
  color:rgb(var(--white));

}

footer .demo-btn,
footer .demo-btn:hover{
    border:1px solid rgb(var(--white));
    color:rgb(var(--primary-color));
    background-color: rgb(var(--white));
}

footer .demo-btn:hover{
  background-color: transparent;
  border: 1px solid rgb(var(--primary-color));
}

footer .footer-bottom{
  display: flex;
  justify-content: center;
  padding: 20px 0;
  border-top: 1px solid;
  border-image-source: linear-gradient(90deg, rgba(245, 241, 224, 0) 0%, rgba(245, 241, 224, 0.3) 50%, rgba(245, 241, 224, 0) 100%);
  border-image-slice: 1;
  opacity: 0.6;
  font-size: 18px;
  gap: calc(4px + (34 - 4) * ((100vw - 320px) / (1920 - 320)));
  @media (max-width:767px) {
    flex-wrap: wrap;
    justify-content: center;
  }
}

footer .footer-bottom .copy-text p,
footer .footer-bottom .footer-links ul li a{
  color:rgb(var(--bg-color));
  font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
  @media (max-width:575px) {
    text-align: center;
  }
}

footer .footer-bottom .footer-links ul{
  display: flex;
  gap:calc(10px + (34 - 10) * ((100vw - 320px) / (1920 - 320)));
}

footer .footer-bottom .footer-links ul li a{
  text-decoration: underline;
}
/************************
    tab design
*************************/
.page-tab-content ul li .nav-link{
  font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 600;
  color: rgb(var(--secondary-color));
  text-transform: uppercase;
  padding: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320))) calc(14px + (40 - 14) * ((100vw - 320px) / (1920 - 320)));
  border: 3px solid transparent;
}

.page-tab-content ul li button:focus,
.page-tab-content ul li button:focus-visible,
.page-tab-content ul li:focus-visible{
  border: 3px solid transparent;
  box-shadow: none;
}

.page-tab-content ul li .nav-link.active{
  background: linear-gradient(90deg, rgba(var(--primary-color), 0) 0%, rgba(var(--primary-color), 0.06) 50%, rgba(var(--primary-color), 0) 100%);
  border: 3px solid transparent;
  border-image-source: linear-gradient(90deg, rgba(var(--primary-color), 0) 0%, rgba(var(--primary-color), 0.3) 50%, rgba(var(--primary-color), 0) 100%);
  border-image-slice: 1;
  color: rgb(var(--primary-color));
}

/************************
    common heading 
*************************/
section p.sub-heading{
  font-size:calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
  color: rgb(var(--primary-color));
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
  letter-spacing: calc(1.2px + (1.57 - 1.2) * ((100vw - 320px) / (1920 - 320)));
  @media (max-width:575px) {
    font-weight: 600;
  }
}

section h2.heading{
  color: rgb(var(--secondary-color));
  font-family: "Playfair Display", serif;
  font-size: calc(22px + (50 - 22) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: calc(20px + (46 - 20) * ((100vw - 320px) / (1920 - 320)));
  font-weight: 600;
}
/************************
    Animation
*************************/
@keyframes Marquee {
  0%{
    transform: translateX(100%);
  }
  100%{
    transform: translateX(-150%);
  }
}

@keyframes autoScrollBg {
  0% {
    background-position: top;
  }
  50% {
    background-position: bottom;
  }
  92% {
    background-position: top;
  }
  100% {
    background-position: top;
  }
}

@keyframes scrollMarquee {
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}

@keyframes up-down{
  0%{
    transform: translateY(-2px);
  }
  50%{
    transform: translateY(2px);
  }
  100%{
    transform: translateY(-2px);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}