@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;400;500;600;700;800;900&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');



@font-face {
  font-family: 'satoshibold';
  src: url('../fonts/satoshi-bold-webfont.eot');
  src: url('../fonts/satoshi-bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/satoshi-bold-webfont.woff2') format('woff2'),
       url('../fonts/satoshi-bold-webfont.woff') format('woff'),
       url('../fonts/satoshi-bold-webfont.ttf') format('truetype'),
       url('../fonts/satoshi-bold-webfont.svg#satoshibold') format('svg');
  font-weight: normal;
  font-style: normal;

}
@font-face {
  font-family: 'satoshiregular';
  src: url('../fonts/satoshi-regular-webfont.eot');
  src: url('../fonts/satoshi-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/satoshi-regular-webfont.woff2') format('woff2'),
       url('../fonts/satoshi-regular-webfont.woff') format('woff'),
       url('../fonts/satoshi-regular-webfont.ttf') format('truetype'),
       url('../fonts/satoshi-regular-webfont.svg#satoshiregular') format('svg');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'satoshimedium';
  src: url('../fonts/satoshi-medium-webfont.eot');
  src: url('../fonts/satoshi-medium-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/satoshi-medium-webfont.woff2') format('woff2'),
       url('../fonts/satoshi-medium-webfont.woff') format('woff'),
       url('../fonts/satoshi-medium-webfont.ttf') format('truetype'),
       url('../fonts/satoshi-medium-webfont.svg#satoshimedium') format('svg');
  font-weight: normal;
  font-style: normal;

}

@font-face {
	font-family: 'FontAwesome';
	src: url("../fonts/fontawesome-webfont.eot?v=4.3.0");
	src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
	font-weight: normal;
	font-style: normal;
}
p{
  margin: 0;
}
img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container{
  max-width: 1440px;
}
.text {
  font-family: 'satoshiregular';
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}
.bannertext_wrap .text {
  font-family: 'satoshiregular';
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}

.sitebtn {
  text-decoration: none;
  /* border: 1px solid; */
  padding: 20px 60px 20px 30px;
  background-color: #fff;
  border-radius: 6px;
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  box-shadow: #747474 0px 1px 3px 0px, #747474 0px 0px 0px 1px;
  outline: none;
  border: none;
  -webkit-text-fill-color: #F14F62;
}
.sitebtn::after {
	content: '';
	position: absolute;
	background: linear-gradient(220deg, #F98A2A, #FB1282);
	padding: 20px 18px;
	width: 100%;
	height: 100%;
	z-index: -1;
	inset: 6px;
  border-radius: 6px;
  transition: all 00ms ease;
}
.sitebtn:hover::after{
  inset: 3px;
  transition: all 100ms ease;
}
.sitebtn::before {
	content: '';
	background: url('../image/buttonstyle.png');
  background-size: 20px;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 34%;
	right: 0;
	margin-right: 12px;
}
.heading{
  font-family: 'Outfit', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 52px;
}
.section{
  margin: 125px 0;
}
span{
  color: #FFC510;
}
.title span{
  color: #85D965;
}
.sticky .header_section {
  background-color: #f1f6ffc7;
  width: 100%;
  height: 95px;
  max-height: 95px;
  position: fixed;
  top: 0;
  z-index: 9;
  box-shadow: 0 2px 6px #9b9b9b;
  opacity: 0.8;
  animation: stickydw 2s  forwards;
  transition: all 200ms ease-out;
}
@keyframes stickydw {
  0%{height: 0px; opacity: 0;}
  25%{height: 25%;}
  50%{height: 50%; opacity: 0.4;}
  75%{height: 75%;}
  100%{height: 100%; opacity: 0.8;}
}
/* topheader css starts */
.topheader_section {
  background: linear-gradient(to right,#71DF71 30%, #1DE1A1 100%);
}
.topheader_section .social-media{
  display: flex;
  list-style: none;
  column-gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}
.topheader_section .social-media figure{
  width: 40px;
  height: 40px;
  margin: 0;
  transition: all 200ms ease;
}
.topheader_section .social-media figure:hover{
  transform: rotate(360deg);
  transition: all 200ms ease;
}
.topheader_section .headercontact, .topheader_section .social_icon{
  display: flex;
  list-style: none;
  column-gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 14px 0;
  margin: 0;
}
.topheader_section .social_icon i{
  color: #000;
  font-size: 18px;
}
.topheader_section .headercontact li a{
  display: flex;
  align-items: center;
  column-gap: 5px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #2C2C2C;
}
.topheader_section .headercontact span{
  color: #2C2C2C;
}
/* topheader css ends  */

/* header css starts  */
.header_section {
  border-bottom: 1px solid #000;
  background: linear-gradient(155deg,#43cf7e 32%,#b3ee86 100%);
  transition: all 200ms ease-out;
}
.navbar {
  padding: 0;
}
#navbarNavAltMarkup {
  justify-content: center;
}
.header_section .header_menu {
  display: flex;
  column-gap: 0px;
  list-style: none;
  margin: 0;
  align-items: center;
  padding: 0;
}
.header_section .header_menu li a{
  font-family: 'satoshimedium';
  font-size: 18px;
  font-weight: 600;
  line-height: 23px;
  color: #000;
  text-decoration: none;
  text-transform: capitalize;
}
.header_section .header_menu li{
  padding: 35px 0;
  position: relative;
  width: 160px;
  text-align: center;
}
.header_section .header_menu li::after {
  content: '';
  background-color: #000;
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.header_section .menuicon {
  display: flex;
  column-gap: 30px;
  align-items: center;
  justify-content: end;
}
.header_section .menuicon a {
    color: #000;
    font-size: 20px;
}
/* header css ends  */
/* banner css starts here */

.banner_section{
  background: url('../image/banner.png') no-repeat;
  background-size: cover;
  height: 850px;
}
.banner_section .container{
  height: 100%;
}
.banner_section .row{
  height: 100%;
  align-items: center;
}
.banner_section .bannertext_wrap .bannertitle {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 70px;
  line-height: 80px;
  margin-bottom: 20px;
}
.banner_section .bannertext_wrap{
  width: 600px;
  color: #fff;
}
.banner_section .bannertext_wrap .btnwrap{
  margin-top: 40px;
  padding-left: 5px;
  display: flex;
  column-gap: 30px;
}
.banner_section .rt_banner{
  position: relative;
  height: 400px;

}
.banner_section .rt_banner::before {
	content: '';
	background: url('../image/Ellipse\ 1.png') no-repeat;
	position: absolute;
	background-size: 440px;
	top: -140px;
	left: 0;
	width: 450px;
	height: 450px;
	z-index: 0;
}
.banner_section .rt_banner figure{
  z-index: 1;
  position: relative;
}
.banner_section .rt_banner .notebox{
  position: relative;
  height: 400px;
  width: 500px;
  margin: 0 auto;
}
.banner_section .rt_banner .notebox figure:nth-child(1), .banner_section .rt_banner .notebox figure:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 370px;
  margin: 0 auto;
  animation: none;
  -webkit-animation: none;
  -moz-animation: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.banner_section .rt_banner .notebox figure:nth-child(2) img{
  filter: grayscale(1);
}
.banner_section .rt_banner .notebox #box3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
  margin: auto auto;
  z-index: 3;
  position: absolute;
  top: 10%;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
}
.banner_section .rt_banner .notebox #box3 img{
  object-fit: contain;
}
.banner_section .rt_banner .notebox #box5{
  width: 70px;
  height: 60px;
  position: absolute;
  top: 32%;
  left: 3%;
  z-index: 3;
  opacity: 0;
}
.banner_section .rt_banner .notebox #box7{
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 18%;
  left: 4%;
  z-index: 3;
  opacity: 0;
  animation: none;
  -webkit-animation: none;
  -moz-animation: none;
}
/* .banner_section .rt_banner .notebox figure:nth-child(2){
  animation: change 7s infinite;
} */
.banner_section .rt_banner figure:nth-child(2) {
  position: absolute;
  bottom: -80px;
  left: 90px;
  animation: none;
  -webkit-animation: none;
  -moz-animation: none;
  width: 70px;
}
.banner_section .rt_banner figure:nth-child(3) {
  position: absolute;
  right: 80px;
  bottom: 40px;
  animation: none;
  -webkit-animation: none;
  -moz-animation: none;
  width: 70px;
  opacity: 0;
}
.banner_section .rt_banner figure:nth-child(4) {
  position: absolute;
  top: -120px;
  right: 95px;
  /* animation: moving 4s infinite alternate; */
  width: 150px;
}
.banner_section .rt_banner figure:nth-child(5) {
  position: absolute;
  top: 130px;
  left: 0;
  animation: none;
  -webkit-animation: none;
  -moz-animation: none;
  width: 70px;
}
.banner_section .rt_banner figure:nth-child(5) img{
  filter: invert(1);
}
.banner_section .text_slider .owl-stage-outer{
  padding: 80px 0;
}
.bannertitle span{
  color: #383838;
  position: relative;
}
.bannertitle span::after{
  content: '';
  background: url('../image/bannerstyle.png') no-repeat;
  background-size: contain;
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: -15px;
  left: 0;
}
/* banner css ends here */

/* service css starts */
.service_section{
  padding: 50px 0;
  background-color: #E7F9DD;
}
.service_section .row{
  border-bottom: 1px solid #E2E2E2;
}
.service_section .servicecard {
  display: flex;
  align-items: center;
  column-gap: 20px;
  padding: 30px 0 30px 40px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  margin-bottom: 20px;
  position: relative;
  scale: 1;
  transition: all 200ms ease-in-out;
  cursor: pointer;
}
.service_section .servicecard:hover{
  box-shadow: rgba(99, 99, 99, 0.2) 8px 10px 7px 0px;
  transition: all 200ms ease-in-out;
}
.service_section .servicecard::after {
	content: '';
	background-color: #ccc;
	width: 1px;
	height: 100%;
	position: absolute;
	right: -13px;
	top: 0;
}
.service_section .servicecard .seviceicon{
  width: 75px;
  height: 75px;
}
.service_section .servicecard .seviceicon img{
  object-fit: contain;
}
.service_section .servicecard .servicetitle{
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: #3C3C3C;
}
/* service css ends */

/* process css starts */
.process_section{
  background-color: #E7F9DD;
  margin-top: 0;
  padding: 50px 0;
  z-index: 0;
  position: relative;
}
.process_section .processleft{
  position: relative;
}
.process_section .processleft::before {
	content: '';
	background: url('../image/processbg.png') no-repeat;
	position: absolute;
	width: 650px;
	height: 650px;
	border-radius: 50%;
	top: 0;
	left: 0;
	z-index: -1;
}
.process_section .processleft figure{
  width: 350px;
  height: 370px;
}
.process_section .processleft figure:nth-child(1){
  margin: 0 0 0 380px;
}
.process_section .processleft figure:nth-child(2){
  margin: -175px 0 0 70px;
}
.process_section .processleft figure:nth-child(3){
  margin: -230px 0 0 392px;
}
.title{
  font-family: 'Outfit', sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 28px;
  color: #09052F;
  margin-bottom: 50px;
  position: relative;
  display: inline-block;
}
.title::after {
  content: '';
  background-color: #19B0EC;
  position: absolute;
  width: 40%;
  height: 3px;
  border-radius: 25px;
  bottom: 4px;
  right: -55px;
}
.process_section .processright .process_step{
  display: flex;
  align-items: center;
  margin-bottom: 110px;
  position: relative;
}
.process_section .processright .process_step span {
	font-family: 'Outfit', sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 30px;
  background: linear-gradient(#81D55E, #9BE472, #8fff35);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
  color: #fff;
  margin-right: 50px;
  padding: 18px;

}
.process_section .processright .process_step::after {
	content: "";
    width: 2px;
    height: 190px;
    background: #BFBFBF;
    position: absolute;
    top: 72px;
    left: 31px;
    z-index: -1;
}
.process_section .processright .process_step:last-child::after{
  display: none;
}
.process_section .processright .process_step .step{
  font-family: 'Outfit', sans-serif;
	font-size: 30px;
	font-weight: 800;
	line-height: 36px;
  color: #09052F;
}
.marq_section .policechecker p{
  font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
  color: #09052F;
  position: relative;
  text-align: center;
}
.marq_section .policechecker p::after{
  content: '';
  /* background: url('../image/striparrow.png'); */
  background-size: contain;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 0;
  right: 0;
}
.marq_section{
  padding: 125px 0 150px 0;
}


.marq_section .policechecker .frontmarq{
	/* background: #6CCF44; */
	padding: 10px 0;
	transform: rotate(8deg);
  margin: -50px 0;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  background: url('../image/Mask\ group.png');
  background-size: cover;
  background-position: center;
}
.marq_section .policechecker .backmarq{
	transform: rotate(-8deg);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 10px 0;
  margin: 0;
  background: url('../image/Mask\ group.png');
  background-size: cover;
  background-position: center;
}

.marq_section .policechecker .frontmarq .owl-stage, .marq_section .policechecker .backmarq .owl-stage{
  background-color: #fff;
}
/* process css ends */

/* about css starts */
.about_section .aboutrt, .aboutus_section .right_side{
  padding-left: 80px;
}
.about_section .aboutrt .title::after, .aboutus_section .title::after{
  width: 35%;
  right: -100px;
  background: #85D965;
}
.about_section .aboutrt ul, .aboutus_section ul{
  padding: 0;
  list-style: none;
  padding-left: 10px;
  margin: 40px 0;
}
.about_section .aboutrt ul li, .aboutus_section ul li{
  font-family: 'satoshibold';
  font-size: 20px;
  font-weight: 700;
  line-height: 40px;
  color: #000;
  position: relative;
  margin-left: 22px;
}
.about_section .aboutrt ul li::before, .aboutus_section ul li::before{
  content: '';
  background: url('../image/Check.png') no-repeat;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 6px;
  left: -30px;
}
/* about css ends */

/* shipping css starts */
.shipping_section{
  background: linear-gradient(1deg, #71DF71, #1DE1A1);
  z-index: 0;
  position: relative;
  margin-bottom: 0;
}
.shipping_section .shipping_content{
  padding: 190px 0;
  position: relative;
}
.shipping_section figure {
  width: 500px;
  height: 480px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  transform: scale(1);
  animation: img 2s 1;
  -webkit-animation: img 2s 1;
  -moz-animation: img 2s 1;
  transition: all 0.3s ease-in 0;
  -moz-transition: all 0.3s ease-in 0;
  -webkit-transition: all 0.3s ease-in 0;
}
.shipping_section .shipping_content figure:last-child {
  position: absolute;
  right: 0;
  left: auto;
  width: 330px;
  height: 230px;
  top: 50%;
  animation: none;
  -webkit-animation: none;
  -moz-animation: none;
}
.shipping_section figure img{
  object-fit: contain;
}
.shipping_section .shipping_details{
  text-align: center;
  width: 600px;
  margin: 0 auto;
}
.shipping_details .title::after{
  display: none;
}
.shipping_details button{
  margin-top: 60px;
}
.shipping_section .shipping_details .heading{
  margin-bottom: 52px;
}
.shipping_section figure .shipping_link {
  position: absolute;
  right: 0;
  top: 20px;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 42px;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}
/* shipping css ends */

/* testimonial & form css strats */
.testimonial_section{
  background: #daf4ff42;
  padding: 125px 0;
}
.testimonial_section .testimonoial_part{
  width: 80%;
}

.testimonial_section .testimonoial_part .testimonial_slider, .testimonialpage_slider{
  margin: 60px 0;
}
.testimonial_section .testimonoial_part .testimonial_slider .owl-dots, .testimonialpage_slider .owl-dots{
  margin-left: 50px;
}
.testimonial_section .testimonoial_part .testimonial_slider .owl-dots .owl-dot, .testimonialpage_slider .owl-dots .owl-dot{
  background: #83D760;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 12px;
}
.testimonial_section .testimonoial_part .testimonial_slider .owl-dots .owl-dot.active, .testimonialpage_slider .owl-dots .owl-dot.active{
  background: #83D760;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  outline-color: #83D760;
  outline-offset: 4px;
  outline-style: solid;
  outline-width: 1px;
}
.testimonial_section .testimonoial_part .testimonial_card{
  width: 80%;
  position: relative;
}
.testimonial_section .testimonoial_part .testimonial_card::before, .testimonialpage_slider .testimonial_card::before{
  content: '';
  background: url('../image/comma.png') no-repeat;
  background-size: contain;
  width: 90px;
  height: 60px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.testimonial_section .testimonoial_part .testimonial_card figure, .testimonialpage_slider .testimonial_card figure{
  width: 80px;
  height: 80px;
  margin: 0;
}
.testimonial_section .testimonoial_part .testimonial_card figure img, .testimonialpage_slider .testimonial_card figure img{
  border-radius: 50%;
}
.testimonial_section .testimonoial_part .testimonial_card .profile, .testimonialpage_slider .testimonial_card .profile{
  display: flex;
  align-items: center;
  column-gap: 18px;
  padding: 40px 0;
}
.testimonial_section .testimonoial_part .testimonial_card .profile .name, .testimonialpage_slider .testimonial_card .profile .name{
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 31px;
  color: #09052F;
  margin-bottom: 15px;
}
.testimonial_section .form_part form{
  margin-top: 40px;
}
.testimonial_section .form_part form input, .testimonial_section .form_part form textarea, .contactpage_section .form_part form input, .contactpage_section .form_part form textarea{
  padding: 18px;
  font-family: 'satoshiregular';
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  color: #000;
}
.testimonial_section .form_part form input::placeholder, .testimonial_section .form_part form textarea::placeholder, .contactpage_section .form_part form input::placeholder, .contactpage_section .form_part form textarea::placeholder{
  font-family: 'satoshiregular';
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  color: #B5B5B5;
}
.testimonial_section .form_part form button{
  margin-top: 30px;
}
/* testimonial & form css ends */

/* footer  css starts  */
.footer{
  background: linear-gradient(1deg, #D0FFBF, #A0F29F);
  padding: 90px 0 10px 0;
}
.footer .logo-section h4{
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 42px;
  color: #2C2C2C;
  width: 450px;
  margin-bottom: 30px;
}
/* .footer .logo-section p{
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 42px;
  color: #2C2C2C;
  width: 420px;
} */
.footer .list-heading{
  font-family: 'Outfit', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 35px;
  color: #2C2C2C;
  margin-bottom: 35px;
}

.footer ul{
  padding: 0;
}
.footer ul li{
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
}
.footer ul li a{
  color: #2C2C2C;
  text-decoration: none;
  font-family: 'satoshiregular';
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition: all 400ms ease-out;

}
.footer ul li a:hover{
  color: #6286e7;
  transition: all 400ms ease-out;
}

.footer .social-media .icon{
  width: 50px;
  height: 50px;
} 
.footer .icon {
  display: inline-block;
  margin-right: 12px;
  width: 20px;
  height: 20px;
  transition: all 200ms ease;
}
.footer .social-media .icon:hover{
  transform: rotate(360deg);
  transition: all 200ms ease;
}
.footer .icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer ul li:nth-child(2) .icon img{
  border-radius: 8px;
}
.footer .copyright {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  color: #2C2C2C;
  margin-top: 110px;
  border-top: 1px solid #cccccc;
  padding-top: 11px;
}
.footer .copyright a{
  color: #2C2C2C;
  text-decoration: none;
  transition: all 200ms ease-in-out;
}
.footer .copyright a:hover{
  color: #6286e7;
  transition: all 200ms ease-in-out;
}
.footer .copyright span{
  color: #f9595f;
  font-size: 14px;
}
/* footer  css ends   */
.error{
  font-family: 'satoshiregular';
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #d63030;
}
/* ANIMITION */
@keyframes zoom {
  0%{transform: scale(0.5);}
  50%{transform: scale(1);}
  100%{transform: scale(0.5);}
}
@-webkit-keyframes zoom {
  0%{-webkit-transform: scale(0.5);}
  50%{-webkit-transform: scale(1);}
  100%{-webkit-transform: scale(0.5);}
}
@-moz-keyframes zoom {
  0%{-moz-transform: scale(0.5);}
  50%{-moz-transform: scale(1);}
  100%{-moz-transform: scale(0.5);}
}

@keyframes updown {
  0%{transform: translateY(0px);}
  90%{transform: translateY(-140px);}
  100%{transform: translateY(-130px); display: none;}
}
@-webkit-keyframes updown {
  0%{-webkit-transform: translateY(0px);}
  90%{-webkit-transform: translateY(-140px);}
  100%{-webkit-transform: translateY(-130px); display: none;}
}
@-moz-keyframes updown {
  0%{-moz-transform: translateY(0px);}
  90%{-moz-transform: translateY(-140px);}
  100%{-moz-transform: translateY(-130px); display: none;}
}

@keyframes trangle {
  0%{transform: translateX(0px);}
  90%{transform: translateX(100px);}
  100%{transform: translateX(90px); display: none;}
}
@-webkit-keyframes trangle {
  0%{-webkit-transform: translateX(0px);}
  90%{-webkit-transform: translateX(100px);}
  100%{-webkit-transform: translateX(90px); display: none;}
}
@-moz-keyframes trangle {
  0%{-moz-transform: translateX(0px);}
  90%{-moz-transform: translateX(100px);}
  100%{-moz-transform: translateX(90px); display: none;}
}

@keyframes moving {
  0%{transform: translateY(-30px);}
  90%{/*transform: translateX(0);*/
  top: 0;}
  100%{display: none; top: 10%;}
}
@-webkit-keyframes moving {
  0%{-webkit-transform: translateY(-30px);}
  90%{/*-webkit-transform: translateX(0);*/
  top: 0;}
  100%{display: none; top: 10%;}
}
@-moz-keyframes moving {
  0%{-moz-transform: translateY(-30px);}
  90%{/*-moz-transform: translateX(0);*/
  top: 0;}
  100%{display: none; top: 10%;}
}

@keyframes change{
  0%{ opacity: 1;}
	100%{ opacity: 0;}
}
@-webkit-keyframes change{
  0%{ opacity: 1;}
	100%{ opacity: 0;}
}
@-moz-keyframes change{
  0%{ opacity: 1;}
	100%{ opacity: 0;}
}

@keyframes fadeout{
  0%{ opacity: 0;}
	100%{ opacity: 1;}
}
@-webkit-keyframes fadeout{
  0%{ opacity: 0;}
	100%{ opacity: 1;}
}
@-moz-keyframes fadeout{
  0%{ opacity: 0;}
	100%{ opacity: 1;}
}
/* ANIMITION */


/* cart Page Css*/

body{
  background:#F5F5F5;
  overflow-x: hidden;
}
.ui-w-40 {
  width: 40px !important;
  height: auto;
}

.card{
  box-shadow: 0 1px 15px 1px rgba(52,40,104,.08);    
}

.ui-product-color {
  display: inline-block;
  overflow: hidden;
  margin: .144em;
  width: .875rem;
  height: .875rem;
  border-radius: 10rem;
  -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset;
  vertical-align: middle;
}
@keyframes img {
  0%{height: 0px; transform: scale(0);}
  /* 20%{height: 90px;}
  40%{height: 180px;}
  60%{height: 270px;}
  80%{height: 360px;} */
  100%{height: 540px; transform: scale(1);}
}
/* ANIMITION */



/* ========================================================FAQ Page design================================================ */
.faqpage_section{
  background-color: #E7F9DD;
  padding: 125px 0;
}
.faqpage_section .accordian{
  margin-top: 50px;
}
.faq-container {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background: linear-gradient(to right,#81D55E 10%, #9BE472 100%, #BCF48F 30%);
  border-radius: 10px;
}

.faq-label {
  font-family: 'Outfit', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 36px;
  color: #FFF;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.faq-label::before{
  content: '+';
  position: absolute;
  top: 0;
  right: 0;

}

.faq-content {
  /* display: none; */
  padding: 0px;
  font-family: 'satoshiregular';
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #FFF;
  overflow: hidden;
  height: 0;
  transition: all 500ms ease-out;
}
.faq-container.open .faq-content{
  /* display: block; */
  transition: all 500ms ease-out;
  height: auto;
  padding: 10px;

}
.faq-container.open .faq-label::before{
  content: '-';
}
/* ========================================================FAQ Page design================================================ */

/* =========================================================Contact Page design============================================== */
.contactpage_section{
  background: #daf4ff42;
  padding: 125px 0;
}
.contactpage_section .contact_list ul{
  list-style: none;
  padding: 0;
}
.contactpage_section .contact_list ul li a, .contactpage_section .contact_list ul li{
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #000;
  display: flex;
  column-gap: 10px;
  margin: 10px 0;
}

.contactpage_section .contact_list ul li  i{
  color: #19B0EC;
  font-size: 20px;
  font-weight: 700;
}
/* =========================================================Contact Page design============================================== */
@media only screen and (max-width: 1400px) {
  .header_section .header_menu li{
    width: 150px;
  }
}


.breadcrumb{
  position: relative;
}
.breadcrumb .banner_text_wrap{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}
.breadcrumb .banner_text_wrap .heading{
  color: #fff;
}


/* loader */
.preloader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  text-align: center;
}
.loading{
  display: flex;
    justify-content: center;
    position: relative;
    top: 50%;
}
.loading div{
  width: 1rem;
  height: 1rem;
  margin: 2rem 0.3rem;
  background: #43cf7e;
  border-radius: 50%;
  animation: 0.9s bounce infinite alternate;
}
.loading div:nth-child(2){
  animation-delay: 0.3s;
}
.loading div:nth-child(3){
  animation-delay: 0.6s;
}

@keyframes bounce {
  to {
    opacity: 0.3;
    transform: translate3d(0, -1rem, 0);
  }
}
/* loader */
.thankyou_section{
  /* max-width: 500px; */
  margin: 0 auto;
  text-align-last: center;
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  align-items: center;
}
.thankyou_section a{
  width: 100px;
}

/*RESPONSIVE MENU*/

.responsive_btn {
  display: none;
  cursor: pointer;
  text-align: center;
  width: 30px;
  height: 30px;
  margin: -30px 0;
  float: right;
  position: relative;
  z-index: 20;
  -moz-transition: all 300ms ease-in-out 0s;
  -webkit-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
  background: transparent;
}
.responsive_btn span {display: block; height: 2px; width: 20px; position: relative; top: 50%; margin: -1px auto;}
.responsive_btn span:before,.responsive_btn span:after {content: ""; display: inline-block; height: 100%; width: 100%; position: absolute; left: 0;}
.responsive_btn span:before {top: -6px;}
.responsive_btn span:after {bottom: -6px;}
.responsive_btn span,.responsive_btn span:before,.responsive_btn span:after {
  background: #000;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  -moz-transition: all 300ms ease-in-out 0s;
  -webkit-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
}
.responsive_btn:hover span, .responsive_btn:hover span:before, .responsive_btn:hover span:after {background: #014baf;}

.responsive_nav {
  display: block;
  position: fixed;
  left: -280px;
  top: 0;
  bottom: 0;
  width: 280px;
  min-height: 100%;
  z-index: 20;
  background: #000;
  -moz-transition: all 300ms ease-in-out 0s;
  -webkit-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
}
.responsive_nav ul {margin: 0; padding: 0; text-align: left;}
.responsive_nav ul li {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  text-transform: capitalize;
  font-size: 15px;
  line-height: 20px;
  color: #fff;
}
.responsive_nav ul li:first-child {border-top: none;}
.responsive_nav ul li:after{display: none;}
.responsive_nav ul li > a {display: block; padding: 12px 10px 8px; color: inherit; position: relative; text-decoration: none;}
.responsive_nav ul li a:hover,.responsive_nav ul li a:focus,.responsive_nav ul li.active > a{color: #fff; background: #383431;}
.responsive_nav ul ul {padding: 0 0 15px 15px;}
.responsive_nav ul .sub-menu,.responsive_nav ul li a i {display: none;}
.responsive_nav .subarrow {display: block; pointer-events: inherit; width: 30px; height: 40px; line-height: 40px !important; right: 0;}
.responsive_nav ul .sub-menu .container {width: 100%; padding: 0;}
.bodyOverlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  transform: none;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 500ms ease 0s;
  transition: all 500ms ease 0s;
}
html.responsive,.responsive body {overflow-y: hidden;}
.responsive .wrapper {-webkit-transform: translate(-280px, 0) !important; transform: translate(-280px, 0) !important;}
.responsive .bodyOverlay {opacity: 1; visibility: visible;}
.responsive .responsive_nav {left: 0;}
.responsive .responsive_btn {pointer-events: none;}
.responsive .responsive_btn span {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.responsive .responsive_btn span:after {-webkit-transform: rotate(270deg); transform: rotate(270deg); top: 0;}
.responsive .responsive_btn span:before {opacity: 0;}
.responsive_nav .opened > .subarrow {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
.responsive_nav .mCSB_outside + .mCSB_scrollTools{right: 0;}
.responsive .responsive_nav .mCSB_outside + .mCSB_scrollTools{right: -4px;}
/*MENU END*/
.policy_title{
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 26px;
  color: #09052F;
  margin: 10px 0;
}
.colorpicker{
  background: none;
  display: block;
  height: 24px;
  width: 80%;
  /* margin: 16px; */
}
/* ============================================ Request a design ======================================= */
 /* Styling for input range thumb */
input[type=range]{
    -webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  border: none;
  width: 20px;
  height: 20px;
  background: #fff;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  margin-top:-4px;
}
.colorpicker::-moz-slider-thumb{
  -moz-appearance: none;
  border: none;
  width: 24px;
  height: 24px;
  background: #fff;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 100%;
}

input[type="range"]::-webkit-range-thumb{
  border: none;
  width: 24px;
  height: 24px;
  background: #fff;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 100%;
}
.colorpicker::-moz-range-thumb{
  border: none;
  width: 24px;
  height: 24px;
  background: #fff;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 100%;
}
.colorpicker::-webkit-slider-runnable-track{
  height: 8px;
  width: 100%;
  border-radius: 4px;
  background: -webkit-linear-gradient(left,
    hsl(0, 100%, 100%),
    hsl(10, 100%, 50%),
    hsl(20, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(40, 100%, 50%),
    hsl(50, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(70, 100%, 50%),
    hsl(80, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(100, 100%, 50%),
    hsl(110, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(130, 100%, 50%),
    hsl(140, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(160, 100%, 50%),
    hsl(170, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(190, 100%, 50%),
    hsl(200, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(220, 100%, 50%),
    hsl(230, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(250, 100%, 50%),
    hsl(260, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(280, 100%, 50%),
    hsl(290, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(310, 100%, 50%),
    hsl(320, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(340, 100%, 50%),
    hsl(350, 100%, 50%),
    hsl(360, 0%, 0%));
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 10px;
    width: 100%;
    border-radius: 4px;
    background: -webkit-linear-gradient(left,
    hsl(0, 100%, 100%),
    hsl(10, 100%, 50%),
    hsl(20, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(40, 100%, 50%),
    hsl(50, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(70, 100%, 50%),
    hsl(80, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(100, 100%, 50%),
    hsl(110, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(130, 100%, 50%),
    hsl(140, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(160, 100%, 50%),
    hsl(170, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(190, 100%, 50%),
    hsl(200, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(220, 100%, 50%),
    hsl(230, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(250, 100%, 50%),
    hsl(260, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(280, 100%, 50%),
    hsl(290, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(310, 100%, 50%),
    hsl(320, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(340, 100%, 50%),
    hsl(350, 100%, 50%),
    hsl(360, 0%, 0%));
}
.colorpicker::-moz-slider-runnable-track{
  height: 8px;
  width: 100%;
  border-radius: 4px;
  background: -moz-linear-gradient(left,
    hsl(0, 100%, 100%),
    hsl(10, 100%, 50%),
    hsl(20, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(40, 100%, 50%),
    hsl(50, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(70, 100%, 50%),
    hsl(80, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(100, 100%, 50%),
    hsl(110, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(130, 100%, 50%),
    hsl(140, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(160, 100%, 50%),
    hsl(170, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(190, 100%, 50%),
    hsl(200, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(220, 100%, 50%),
    hsl(230, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(250, 100%, 50%),
    hsl(260, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(280, 100%, 50%),
    hsl(290, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(310, 100%, 50%),
    hsl(320, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(340, 100%, 50%),
    hsl(350, 100%, 50%),
    hsl(360, 0%, 0%));
}

.colorpicker::-moz-range-track{
  height: 8px;
  width: 100%;
  border-radius: 4px;
  background: -moz-linear-gradient(left,
    hsl(0, 100%, 100%),
    hsl(10, 100%, 50%),
    hsl(20, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(40, 100%, 50%),
    hsl(50, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(70, 100%, 50%),
    hsl(80, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(100, 100%, 50%),
    hsl(110, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(130, 100%, 50%),
    hsl(140, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(160, 100%, 50%),
    hsl(170, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(190, 100%, 50%),
    hsl(200, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(220, 100%, 50%),
    hsl(230, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(250, 100%, 50%),
    hsl(260, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(280, 100%, 50%),
    hsl(290, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(310, 100%, 50%),
    hsl(320, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(340, 100%, 50%),
    hsl(350, 100%, 50%),
    hsl(360, 0%, 0%));
}

input[type="range"]::-webkit-range-track{
  height: 8px;
  width: 100%;
  border-radius: 4px;
  background: -webkit-linear-gradient(left,
    hsl(0, 100%, 100%),
    hsl(10, 100%, 50%),
    hsl(20, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(40, 100%, 50%),
    hsl(50, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(70, 100%, 50%),
    hsl(80, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(100, 100%, 50%),
    hsl(110, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(130, 100%, 50%),
    hsl(140, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(160, 100%, 50%),
    hsl(170, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(190, 100%, 50%),
    hsl(200, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(220, 100%, 50%),
    hsl(230, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(250, 100%, 50%),
    hsl(260, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(280, 100%, 50%),
    hsl(290, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(310, 100%, 50%),
    hsl(320, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(340, 100%, 50%),
    hsl(350, 100%, 50%),
    hsl(360, 0%, 0%));
}
#textColorPreview, #textBackgroundColorPreview, #templateBackgroundColorPreview {
	height: 30px;
	display: block;
	background-color: #fff;
  border: 1px solid #000;
	width: 30px;
}
.thankyouSection {
	padding: 100px 0;
	font-size: 18px;
	letter-spacing: 1px;
	position: relative;
	z-index: 1;
	background: var(--gradient-background);
	min-height: 80dvh;
	display: grid;
	place-items: center;
}
.thank-you-page .thankyouContent {
	background-image: url(../image/thank-you-bottom.svg), url(../image/thank-you-top.svg);
	background-size: 250px, 250px;
	width: clamp(480px, 55vw, 980px);
	height: clamp(360px, 50dvh, 500px);
	display: grid;
	align-content: center;
	color: var(--white-color);
	-webkit-animation: rj-fill 10s forwards;
	animation: rj-fill 10s forwards;
}
.thankyouContent {
	background-image: url(../image/left404-shape.png), url(../image/right-404-shape.png);
	background-position: bottom left, top right;
	background-repeat: no-repeat;
	padding: 60px;
	background-color: var(--white-color);
	border-radius: var(--border-radius);
	max-width: 1200px;
	margin: 0 auto;
}
.thank_you-img {
	max-width: 80px;
	margin: 0 auto 15px;
	padding: 10px;
	background: var(--white-color);
	border-radius: var(--border-radius);
}
.thank-you-page .heading {
	color: inherit;
}
.effect-btn {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	background: var(--secondary-color);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: -1;
}
.form_part .design_text {
  font-family: 'Outfit', sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 40px;
  color: #2C2C2C;
  margin: 30px 0;
}
#requestaDesignForm label{
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: #000;
}
#requestaDesignForm select{
  color: #B5B5B5;
}
#requestaDesignForm select option {
  color: #000;
}
#requestaDesignForm textarea#section_3_text{height: 60px;}
.colorpicker_wrap{display: flex;}
.form_part .upload__box{padding: 0;}
.form_part .upload__box .upload__btn{background-color: #33da9d; border-color: #90eba1; color: #fff !important;}
.dataTables_wrapper .dataTables_paginate.paging_simple_numbers {margin-top: 10px;}