@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700);

@import url("https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap");

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  padding: 0;
  margin: 0;
  font-family: Montserrat;
  background: white;
}

a {
  text-decoration: none;
  color: unset;
}

div,
h1,
h2,
h3,
h4,
p,
i,
a {
  position: relative;
  transition: 0.4s;
}

form,
input,
textarea,
select {
  font-family: Montserrat;
}

:root {
  --color: #848484;
  --color2: #64af35;
}

/*alerts */
div,
h1,
h2,
h3,
h4,
p,
i,
a,
footer {
  position: relative;
  transition: 0.4s;
}

.h1{
  color: #111 !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  text-align: center;
}

input,
select,
textarea,
button {
  font-family: Montserrat;
}

a {
  text-decoration: unset;
  color: #4782ff;
}

hr{
  width: 90%;
  background-color: #333;
  margin: 1rem auto 1rem;
}

.btn_save {
  background: linear-gradient(45deg, #2196f3, #00bcd4);
  width: fit-content;
  margin: 10 auto;
  padding: 14px;
  color: white;
}

.new_tag {
  position: absolute;
  top: 5px;
  background: #8bc34a;
  padding: 2px 8px;
  font-weight: 500;
  font-size: 8px;
  border-radius: 29px;
  right: -14px;
  border: 1px solid;
}

.new_lab {
  z-index: 2;
  position: absolute;
  background: #e91e63;
  padding: 4px 10px;
  right: -13px;
  top: -11px;
  font-size: 12px;
  color: white;
  border-radius: 24px;
}

.slider_image {
  width: 100%;
  position: relative;
  height: auto;
  background: white;
}

.slider_image .mySlides {
  width: 100%;
  animation: fadeIn 1s linear forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.new_label {}

.head_up {
  background: black;
  color: white;
  display: flex;
}

.head_up p {
  padding: 4px 26px;
  margin: 0px;
  font-size: 13px;
  float: unset;
}

.head_up p i {}

.wtsp_chat {
  width: fit-content;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 8;
}

.wtsp_chat img {
  width: 57px;
  height: auto;
  margin: 10px;
}

header {
  background: linear-gradient(127deg, #1a2061 , rgb(18, 44, 131),  #4c4c9e 50%,#080864 );
  width: -webkit-fill-available;
  padding: 0;
  overflow: unset;
  position: sticky;
  display: flex;
  align-items: center;
  padding: 0px 68px;
  top: 0;
  z-index: 99;
  height: 13vh;
}

.text_logo {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  font-size: 2rem;
  color: #fff;
}

header .logo {
  display: flex;
}

header .logo h3 {
  margin: 7px 0px;
  font-size: 50px;
  font-weight: 200;
  font-family: "Teko", sans-serif;
  text-transform: capitalize;
}

/* header .logo img {
  width: 167px;
  height: auto;
  margin: 0px 0px 0px;
  border-radius: 57px;
} */

header .head_txt {
  display: flex;
  position: absolute;
  right: 80px;
}

header .head_txt h3 {
  font-weight: 500;
  padding: 22px 11px;
  cursor: pointer;
  color: white;
  font-size: 14px;
  letter-spacing: -1px;
}

header .head_txt h3:hover {
  transition: 0.3s;
}

header .head_txt h3 .notification {
  background: white;
  color: #4c4c4b;
  font-weight: 500;
  padding: 10px;
  border-radius: 6px;
  font-size: 10px;
  position: relative;
  top: 8px;
}

.login_btn {
  background: white;
  color: #4c54af !important;
  padding: 11px 23px !important;
  margin: 25px 10px;
  letter-spacing: .5px !important;
  border-radius: 2rem;
}

.notification:before {
  content: "";
  position: absolute;
  top: -17px;
  border: 10px solid transparent;
  border-bottom: 10px solid white;
  border-radius: 15px;
}

.close_2 {
  background: #cc3c1b;
  color: white;
  width: fit-content;
  padding: 5px;
  margin: 9px;
  border-radius: 3px;
  display: inline-block;
}

.search_now {
  background: #19b119;
  color: white;
  width: fit-content;
  padding: 5px;
  margin: 9px;
  border-radius: 3px;
  display: inline-block;
}

.search_box {
  position: fixed;
  background: white;
  width: 400px;
  height: 200px;
  z-index: 54;
  left: 50%;
  transform: translate(-50%);
  padding: 23px;
  border-radius: 7px;
  box-shadow: 0px 0px 50px 0px #0000003d;
}

.search_box .close {
  color: #ff0808;
  width: fit-content;
  font-size: 42px;
  position: absolute;
  right: 31px;
  top: 14px;
  z-index: 3;
  cursor: pointer;
}

.search_box h2 {
  font-size: 24px;
  text-align: center;
  font-weight: 500;
  color: #323332;
  text-transform: capitalize;
}

.search_box input {
  border: 1px solid gray;
  padding: 10px;
  display: block;
  margin: 10px auto;
  width: -webkit-fill-available;
}

.search_box button {
  margin: 0 auto;
  position: relative;
  display: block;
  padding: 10px;
  border-radius: 52px;
  border: 0px;
  background: linear-gradient(0deg, #2196f3, #0fa784);
  color: white;
  outline: none;
}

.search_box button:active {
  transition: 0.3s;
  transform: scale(0.8);
}

#facebook_icon {
  color: #ffffff;
  background: linear-gradient(0deg, #3f51b5, #8946ff);
  border: 0px;
  border-radius: 6px;
  width: 100px;
}

.fa-line-chart {
  color: #453b9d;
  font-weight: 800;
}

.mobile_home {
  display: none;
}

.main {
  background: linear-gradient(rgba(0, 0, 0, 0.55), #00000073), url(images/mobile-block.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  height: 80vh;
  padding: 4% 0;

}

.clip_path1 {
  position: absolute;
  top: 0;
  left: 0;
  background: #00000073;
  z-index: 1;
  height: -webkit-fill-available;
  width: -webkit-fill-available;
  color: white;
  animation: imageSlide 2s linear infinite;
}

.main img {
  width: -webkit-fill-available;
  position: absolute;
  top: 0px;
}

.main .main_txt {
  font-family: 'Montserrat', sans-serif;
  margin: 4% 0% 5% 6%;
  text-align: left;
  z-index: 4;
  color: white;
  width: 50%;
}

.main .main_txt h1 {
  font-size: 3rem;
  letter-spacing: -3px;
  margin: 0;
  color: #8bf;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 4px black;
}

/*water wave*/

.water_wave1,
.water_wave2,
.water_wave3,
.water_wave4 {
  position: absolute;
  width: -webkit-fill-available;
  height: auto;
}

.water_wave1 {
  z-index: 4;
}

.water_wave3 {}

.water_wave1 svg {}

.water_wave2 svg {
  animation: wave_ani 4s linear infinite;
  animation-delay: 1s;
}

.water_wave3 svg {
  animation: wave_ani 4s linear infinite;
  animation-delay: 2s;
}

.water_wave4 svg {
  animation: wave_ani 4s linear infinite;
  animation-delay: 4s;
}

@keyframes wave_ani {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

.main .main_txt h2 {
  font-size: 22px;
  font-weight: 500;
  margin: 16px 0px;
  text-align: justify;
}

.main .main_txt p {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin: 37px auto 5px;
}

#card-type {
  width: 100%;
  display: flex;
  justify-content: center;
}

.btn_1 {
  width: fit-content;
  margin: 38px auto;
  color: #ffffff;
  padding: 13px 36px;
  border-radius: 50px;
  font-size: 20px;
  border: 2px solid;
  background: #453b9d;
}

.btn_2 {
  background: #130a42;
  width: fit-content;
  margin: 38px auto;
  color: white;
  padding: 13px 36px;
  border-radius: 40px;
  border: 2px solid;
  font-size: 23px;
  animation: shining1 1s linear infinite;
}

.btn_2:after {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: -1px;
  width: 0px;
  border-radius: 40px;
  background: #ffffff26;
}

.btn_2:hover:after {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: -1px;
  width: 100%;
  background: #ffffff26;
  transition: 0.4s;
}

/* @keyframes shining1 {
} */

iframe {
  height: 300px;
  cursor: zoom-out;
  border: 0px;
  box-shadow: unset;
  border-radius: 5px;
}

.w_l_f {
  color: #653bb7;
  width: auto;
  margin: 0 auto;
  padding: 20px;
}

.w_l_f h1 {
  margin: 0px;
  padding: 20px 39px;
  font-weight: 600;
  text-align: center;
  color: black;
}

.w_l_f h3 {
  background: linear-gradient(5deg, #444fb6, #9c27b0);
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  color: white;
  font-weight: 500;
  padding: 16px;
  border-radius: 5px;
}

.w_l_f img {
  width: 401px;
}

.w_l_f ul,
img {
  display: inline-block;
}

.w_l_f ul {
  vertical-align: top;
  background: white;
  border-radius: 0px;
  overflow: hidden;
  padding: 0px 53px;
  font-weight: 600;
  color: black;
}

.w_l_f ul li {
  padding: 13px;
}

.w_l_f ul li:nth-child(2n) {
  background: #efefef;
}

/*scroll bar*/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#background_img {}

/* page 3 */

.display_flex {
  display: flex;
  padding: 50px;
  background: linear-gradient(90deg, #4c4bb6, #942bb2);
}

.side1,
.side2 {
  width: -webkit-fill-available;
  padding: 18px;
  text-align: center;
}

.side1 img {
  width: 200px;
  margin: 4px;
  border: 18px solid #e0e0e0;
  border-left: 5px solid #efefef;
  border-right: 5px solid #ddd;
  height: 358px;
  box-shadow: 0px 0px 20px 0px #00000052;
  border-radius: 14px;
}

#imgd1 {
  animation: left 3s 3s ease-in;

}

#imgd2 {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0px 0px 20px 0px #0000003d;
  top: 99px;
  animation: bottom 3s 3s ease-in;
  z-index: 9;
}

#imgd3 {
  animation: right 3s 3s ease-out;
}

@keyframes bottom {
  from {
    opacity: 0;
    top: 200px;
  }

  80%{
    opacity: .2;
  }
  
  to {
    opacity: 1;
    top: 99px;
  }
}


.demo_card_side {
  position: absolute;
  top: 52px;
  z-index: 2;
  right: 10%;
  height: 372px;
  width: 217px;
  border: 29px solid #e8e7e8;
  border-left: 5px solid #d4d4d4;
  border-right: 5px solid #e8e7e8;
  border-radius: 23px;
  overflow: hidden;
  animation: right 3s;
  transform: translateX(0%);
}

/* header image and text animation */
@keyframes right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}



/* header text slider animation */
.head-text {
  font-size: 9vmin;
  color: #8bf;
  text-align: left;
  font-family: Lato, sans-serif;
  font-weight: 700;
  margin: 1rem 0 1rem 2rem;
}

/* Typewriter effect 1 */
@keyframes typing {

  0.0000%,
  27.3488% {
    content: "";
  }

  1.1395%,
  26.2093% {
    content: "";
  }

  2.2791%,
  25.0698% {
    content: "";
  }

  3.4186%,
  23.9302% {
    content: "v";
  }

  4.5581%,
  22.7907% {
    content: "vi";
  }

  5.6977%,
  21.6512% {
    content: "vis";
  }

  6.8372%,
  20.5116% {
    content: "visi";
  }

  7.9767%,
  19.3721% {
    content: "visit";
  }

  9.1163%,
  18.2326% {
    content: "visiti";
  }

  10.2563%,
  17.0926% {
    content: "visitin";
  }

  11.3963%,
  16.8606% {
    content: "visiting";
  }

  30.7674%,
  51.2791% {
    content: "";
  }

  31.9070%,
  50.1395% {
    content: "d";
  }

  33.0465%,
  49.0000% {
    content: "di";
  }

  34.1860%,
  47.8605% {
    content: "dig";
  }

  35.3256%,
  46.7209% {
    content: "digi";
  }

  36.4651%,
  45.5814% {
    content: "digit";
  }

  37.6047%,
  44.4419% {
    content: "digita";
  }

  38.7447%,
  43.3019% {
    content: "digital";
  }

  54.6977%,
  75.2093% {
    content: "";
  }

  55.8372%,
  74.0698% {
    content: "e";
  }

  56.9767%,
  72.9302% {
    content: "ec";
  }

  58.1163%,
  71.7907% {
    content: "eco";
  }

  59.2558%,
  70.6512% {
    content: "ecom";
  }

  60.3953%,
  69.5116% {
    content: "ecomm";
  }

  61.5349%,
  68.3721% {
    content: "ecommer";
  }

  62.6801%,
  67.2316% {
    content: "ecommerc";
  }

  63.8290%,
  66.0909% {
    content: "ecommerce";
  }

  78.4390%,
  100% {
    content: "";
  }

  79.5720%,
  99.8900% {
    content: "m";
  }

  80.7190%,
  99.0109% {
    content: "mi";
  }

  81.8610%,
  98.8409% {
    content: "min";
  }

  82.9960%,
  98.7009% {
    content: "mini";
  }

  83.4090%,
  97.5679% {
    content: "mini w";
  }

  84.5450%,
  96.4265% {
    content: "mini we";
  }

  85.6880%,
  95.2809% {
    content: "mini web";
  }

  86.8290%,
  94.1698% {
    content: "mini webs";
  }

  87.9680%,
  93.0202% {
    content: "mini websi";
  }

  88.6990%,
  92.8787% {
    content: "mini websit";
  }

  89.8490%,
  91.6363% {
    content: "mini website";
  }

}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.typewriter {
  --caret: currentcolor;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px #111;
}

.typewriter::before {
  content: "";
  animation: typing 15.5s infinite;
}

.typewriter::after {
  content: "";
  border-right: 1px solid var(--caret);
  animation: blink 0.5s linear infinite;
}

.typewriter.thick::after {
  border-right: 1ch solid var(--caret);
}

.typewriter.nocaret::after {
  border-right: 0;
}

@media (prefers-reduced-motion) {
  .typewriter::after {
    animation: none;
  }

  @keyframes sequencePopup {

    0%,
    100% {
      content: "developer";
    }

    25% {
      content: "writer";
    }

    50% {
      content: "reader";
    }

    75% {
      content: "human";
    }
  }

  .typewriter::before {
    content: "developer";
    animation: sequencePopup 12s linear infinite;
  }
}

/**/


/* header text slider animation ent*/




.demo_card_side img {
  position: relative;
  width: 100%;
  height: -webkit-fill-available;
}

.side2 p {
  font-weight: 500;
  text-align: center;

  font-size: 23px;
}

.side2 h1 {
  font-weight: 500;
  text-align: left;
  font-size: 41px;

  text-transform: capitalize;
}

.side2 h3 {
  font-size: 15px;
  line-height: 2;

  text-align: initial;
  font-weight: 400;
}

.row {
  background: white;
}

.row_backimg {
  /* background: linear-gradient(0deg, #fff, rgb(147, 170, 255), #5463ff, #3943b1, #787fff, #fff); */
  padding: 2.5rem;
  overflow: hidden;
  text-align: center;
}

.row_backimg h1 {
  font-size: 2rem;
  margin: 20px 0px 56px;
}

.row_backimg .flex_box {
  display: flex;
}

.row_backimg .flex_box .flex_boxin {
  background: linear-gradient(45deg, #ffffff, #ffffff);
  margin: 15px;
  width: -webkit-fill-available;
  padding: 25px 24px;
  box-shadow: 0px 0px 10px 0px #544b4b40;
  border-radius: 10px;
}

.row_backimg .flex_box .flex_boxin:hover {
  transform: rotate(0deg);
}

.row_backimg .flex_box .flex_boxin i {
  font-size: 60px;
  color: #453b9d;
}

.row_backimg .flex_box .flex_boxin h1 {
  font-size: 19px;
  margin: 33px 0px;
  font-weight: 500;
  letter-spacing: -1px;
  color: black;
}

.row_backimg .flex_box .flex_boxin p {
  font-weight: 500;
  color: #453b9d;
  font-size: 10px;
}

.row2 {
  width: 100%;
  margin: auto;
  padding: 50px 0 !important;
  background-attachment:fixed;
  background: #ddd;
}

.row2 h1 {
  text-align: center;
  font-size: 42px;
  font-weight: 500;
  color: #111;
  margin: 0 auto 2rem auto;
}

.flex_pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  /* flex-wrap: wrap; */
  place-items: flex-start;
  margin: auto;
  width: 90%;
  background: transparent;
}

.flex_pricingin {
  /* max-width: fit-content; */
  width: 100%;
  padding: 0;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0px 0px 6px 2px #0044;
}

.flex_pricingin h3 {
  background: #f44336;
  margin: 0px;
  padding: 13px 20px;
  text-align: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.7px;
}

/* .flex_pricing :after {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: -1px;
  width: 0px;
  background: #79797973;
}
.flex_pricing :hover::after {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: -1px;
  width: 100%;
  background: #ffffff71;
  transition: 0.4s;
} */



.mobile_close {
  display: none;
  position: absolute;
  top: 0;
  font-size: 50px;
  z-index: 3;
  color: white;
  right: 16px;
  padding: 0;
}

.flex_pricingin h1 p {
  font-size: 10px;
}

.flex_pricingin h1 del {
  font-size: 31px;
  color: #e91e63;
}

.flex_pricingin h1 {
  color: #ffffff !important;
  background: #453b9d;
  margin: 0;
  padding: 19px;
  font-size: 31px;
}

.flex_pricingin ul {
  padding: 0px 0px;
}

.flex_pricingin li {
  width: fit-content;
  background: white;
  padding: 7px 26px;
  list-style-type: none;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  text-align: left !important;
}

.flex_pricingin li.back {
  background: #3f5c8417;
}

.flex_pricingin li i {
  background: #1c631f;
  color: white;
  border-radius: 50px;
  padding: 6px;
  font-size: 11px;
  margin: 0px 10px;
}

.row_contact {
  background: transparent;
  color: black;
  padding: 91px 50px;
  text-align: center;
}

.row_contact h3 {
  font-weight: 500;

  width: fit-content;
  margin: 5px auto;
  padding: 20px;
}

.row_contact h1 {
  font-size: 50px;
  font-weight: 500;
  background: #ffffff;
  width: fit-content;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0px 0px 10px 0px #544d4d33;
  border-radius: 7px;
}

.row_features {
  padding: 50px;
  text-align: center;
}

.row_features p {
  text-align: center;
  color: #000000;
  font-weight: 500;
  border-bottom: 2px solid #8bc34a;
  width: fit-content;
  margin: 0 auto;
}

.row_features h1 {
  text-align: center;
  font-size: 38px;
  color: #363c3f;
  width: auto;
  letter-spacing: -0.6px;
  font-weight: 400;
  text-transform: capitalize;
}

#svg_fea {
  position: absolute;
  width: 100%;
  z-index: -1;
  left: 0;
  height: auto;
  bottom: 0;
}

.cont_share_boxes {
  width: 200px;
  display: inline-grid;
  font-size: 16px;
  margin: 5px;
  text-align: center;
  box-shadow: 0px 0px 20px 0px #b1b1b1b8;
  padding: 13px 13px 26px;
  font-weight: 500;
  border-radius: 5px;
  color: #453b9d;
}

.cont_share_boxes:hover:after {
  content: "";
  position: absolute;
  border: 6px solid #453b9d;
  width: 30px;
  height: 27px;
  border-bottom: none;
  border-left: none;
  right: 0;
  top: 0;
  transition: 0.3s;
}

.cont_share_boxes:hover:before {
  content: "";
  position: absolute;
  border: 6px solid #453b9d;
  width: 30px;
  height: 27px;
  border-top: none;
  border-right: none;
  left: 0;
  bottom: 0;
  transition: 0.3s;
}

.cont_share_boxes:hover {
  box-shadow: 0px 0px 10px 0px #0000002e;
  color: black;
  transform: scale(1.04);
}

.cont_share_boxes i {
  font-size: 43px;
  margin: 20px;
}

.row_bottom {
  background: #000000;
  color: white;
}

.row_bottom .side1 {
  text-align: left;
  padding: 20px 0px 20px 62px;
  background: #ffffff00;
  color: white;
  width: 63%;
}

.row_bottom .side1 h1 img {
  width: auto;
  height: 45px;
  margin: 0px;
  padding: 0px;
  filter: none;
  border-radius: 0px;
}

.row_bottom .side1 h1 {
  display: flex;
  margin: 0px;
  margin: 24px 0px;
  padding: 0px;
  font-weight: 700;
}

.row_bottom .side1 h3 {
  font-weight: 500;
  font-size: 27px;
  color: #000000;
}

.row_bottom .side1 .row_bt_p {
  display: flex;
  margin: 10px 0px;
}

.row_bottom .side1 .row_bt_p h4 {
  line-height: 2;
  margin: 8px;
  font-weight: 500;
  font-size: 14px;
}

.row_bottom .side1 .row_bt_p i {
  padding: 12px 7px;
  width: 29px;
  text-align: center;
  font-size: 21px;
  margin: 2px 10px 0px 0px;
  height: fit-content;
  border: 2px solid #ffffff00;
  border: 2px solid;
  border-radius: 47px;
}

.row_bottom .side2 h3 {
  text-align: center;
  font-size: 30px;
  margin: 0;
}

.row_bottom .side2 form {}

.row_bottom .side2 input,
.row_bottom .side2 textarea {
  width: 63%;
  padding: 14px;
  background: #00000000;
  border: 1px solid #ffffff;
  border-bottom: 2px solid white;
  margin: 38px auto 0px;
  color: white;
  font-size: 13px;
  border-radius: 7px;
  outline: none;
}

.row_bottom input[type="submit"] {
  width: 365px;
  background: linear-gradient(45deg, #214eec, #114bb1);
  font-size: 22px;
  padding: 11px;
  border-radius: 50px;
  border-bottom: 0px;
  margin: 20px;
}

.row_bottom .side2 textarea {
  height: 100px;
}

.row_bottom .side2 input::placeholder,
.row_bottom .side2 textarea::placeholder {
  color: #dcd6d6;
  font-style: italic;
}

.success_alert,
.danger_alert {
  padding: 16px 43px;
  background: #ececec1f;
  width: fit-content;
  font-size: 13px;
  margin: 6px auto;
  border-radius: 5px;
}

.temp_container{
  background: linear-gradient(#0000004f,#00000037), url('images/christmas.jpg');
  padding: 2rem 0;
}

.temp_preview {
  padding: 50px;
  text-align: center;
  width: auto;
  margin: 0 auto;
  overflow-x: scroll;  
}

.slide{
  width: 100%;
  height: 2px;
  background-color: #ffffff7d;
  animation: slide 20s infinite;
}

@keyframes slide {
  from{width: 2%;}
  to{width: 100%;}
}

.temp_preview::-webkit-scrollbar,
.temp_preview::-webkit-scrollbar-track{
  display: none;
}

.temp_preview h1 {
  text-align: center;
  font-weight: 400;
  margin: 0px 10px 40px;
}

.temp_pre {
  display: inline-grid;
  margin: 10px 16px;
  text-align: center;
  animation: slowslide 20s infinite linear;
}

.temp_preview:hover .temp_pre, .temp_preview:hover ~ .slide{
  animation-play-state:paused;
}

.demo_slider {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  /* animation: slowslide 5s  ; */
  /* transition: all ease-in; */
}

@keyframes slowslide {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(calc(3.7*(-100vw)));
  }
}

.temp_pre img {
  width: 144px;
  border: 30px solid #000000;
  height: 260px;
  border-radius: 12px;
  border-left: 5px solid #000000;
  border-right: 5px solid #000000;
  padding: 0px;
  box-shadow: 0 0 4px #111;
}

.temp_pre:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}

.join_facebook {
  width: 51% !important;
  border-radius: 11px !important;
  margin: 5px !important;
  filter: brightness(1) !important;
}

.pre_btn {
  background: #ddd;
  width: fit-content;
  margin: 13px auto;
  padding: 10px 30px;
  color: #453b9d;
  border: 1px solid;
  font-weight: 700;
  border-radius: 35px;
  cursor: pointer;
}

.pre_btn:hover {
  background: #094a59;
  transition: 0.3s;
  color: white;
}

#qr_code_d {
  left: 50%;
  position: relative;
  transform: translate(-50%, 0px);
  margin: 0px 0px 24px;
}

.services {
  padding: 20px;
  text-align: center;
  display: flex;
}

#servicesh2 {
  text-align: center;
  font-size: 38px;
  color: #453b9d;
  font-weight: 700;
}

.services h3 {
  height: 50px;
  margin: 0px;
  font-weight: 600;
}

.services_box {
  width: 200px;
  vertical-align: middle;
  height: auto;
  background: linear-gradient(45deg, #453b9d, #080248, #4d05bf);
  padding: 27px;
  text-align: center;
  color: white;
  margin: 10px 4px;
  box-shadow: 0px 0px 10px 0px #00000012;
  border-radius: 10px;
}

.scroll_cont {
  display: flex;
  position: relative;
  margin: 0 auto;
}

.services_box h2 {}

.services_box p {
  font-size: 12px;
  height: 65px;
}

.share_wtsp form {
  display: flex;
  margin: 14px auto 20px;
  position: relative;
  width: fit-content;
}

.wtsp_share_btn {
  background: #1aab2c;
  font-size: 12px;
  padding: 10px;
  cursor: pointer;
}

.wtsp_share_btn i {}

.share_box .close {
  font-size: 47px;
  text-align: end;
  padding: 0px 10px;
  font-weight: 400;
  color: red;
}

#whatsapp2 {
  background: #1aab2c;
  color: white;
}

.fa-comment-dots {
  background: #1cbdff;
  color: white;
}

.share_box .close i {}

.share_box {
  display: none;
  background: white;
  color: black;
  position: fixed;
  top: 10%;
  width: 351px;
  padding: 10px;
  box-shadow: 0px 0px 10px 0px #00000033;
  z-index: 3;
  border-radius: 11px;
}

.shar_btns {
  width: 100px;
  text-align: center;
  display: inline-block;
}

.shar_btns i {
  padding: 10px;
  border-radius: 8px;
}

.shar_btns p {
  font-size: 10px;
}

/* animated button */
.btn2 {
  background: linear-gradient(45deg, #453b9d, #009688);
  color: white;
  padding: 14px;
  width: fit-content;
  border-radius: 2px;
  margin: 20px auto;
  box-shadow: 0px 0px 10px 0px #00000017;
}

.row33 {
  padding: 20px;
  color: #313131;
  text-align: center;
}

.row33 h1 {
  margin: 21px 0px 10px;
  text-align: center;
  font-weight: 500;
  color: #333333;
}

.row33 p {
  font-size: 1.2rem;
  text-align: center;
  width: 80%;
  color: gray;
}

.benefit_box_container {
  /* width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit , minmax(260px, 1fr));
  gap: 1rem; */
}

.row33 .benefit_box {
  width: auto;
  display: inline-block;
  text-align: center;
  margin: 6px;
  background: linear-gradient(120deg, #190f76, #483bc1, #6554ff);
  text-align: center;
  padding: 21px;
  vertical-align: top;
  box-shadow: 0px 0px 20px 0px #0000001f;
  border-radius: 20px;
  color: white;
  animation: shining1 1s linear infinite;
  transition: all 1s ease-in-out;

}


.benefit_box:after {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: -1px;
  width: 0px;
  background: #ffffff26;
}

.benefit_box:hover:after {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: -1px;
  width: 100%;
  background: #ffffff26;
  transition: 0.4s;
}

.row33 .benefit_box i {
  font-size: 29px;
}

.row33 .benefit_box h3 {
  margin: 7px;
  font-weight: 600;
}

.row33 .benefit_box p {
  width: 190px;
  color: white;
  font-size: 12px;
  font-weight: 400;
}

/*view counter*/

.view_counter {
  width: fit-content;
  max-width: 200px;
  text-align: center;
  font-size: 10px;
  padding: 2px 12px;
  background: black;
  color: white;
  border-radius: 3px;
  margin: 0 auto;
  top: 0px;
  z-index: 5;
}

/*footer*/

footer {
  background: black;
  color: white;
}

footer p {
  margin: 0px;
  padding: 14px;
  text-align: center;
  font-size: 11px;
}

/*order online */

#checkout {
  width: 400px;
  margin: 0 auto;
  border: 2px solid #3f51b5;
  border-left: 2px solid red;
  border-bottom: 2px solid green;
  border-radius: 9px;
  box-shadow: 0px 0px 20px 0px #6f60603d;
  padding: 21px;
}

.checkout_preview {
  overflow: hidden;
  background: white;
  padding: 10px;
  margin: 14px 0px;
  border-radius: 10px;
}

.checkout_preview img {
  width: 50%;
  max-height: 150px;
  position: relative;
  margin: 0 auto;
  left: 50%;
  transform: translate(-50%, 0px);
}

.checkout_preview h2 {
  margin: 6px;
  text-align: center;
  font-weight: 500;
  color: black;
  font-size: 16px;
}

.checkout_preview h4 {
  margin: 6px;
  text-align: center;
  font-weight: 500;
  display: inline-block;
  color: #757575;
  font-size: 16px;
}

.checkout_preview p {
  margin: 6px;
  text-align: center;
  font-weight: 500;
  color: black;
  font-size: 16px;
}

.checkout_payment {}

.row_bt_p {}

.row_bt_p img {
  height: auto;
  border: 0px;
  width: 250px;
  margin: 14px auto;
}

.card2 form input,
.card2 form select {
  width: -webkit-fill-available;
  font-size: 14px;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #dedede;
  margin: 4px 26px;
  resize: vertical;
  background: #00000005;
}

.order_confirmation {
  background: white;
  padding: 34px 20px 20px;
  width: 300px;
  text-align: center;
  margin: 100px auto;
  font-size: 14px;
  line-height: 2;
  box-shadow: 0px 0px 10px 0px #0000001c;
  border-radius: 10px;
}

.order_confirmation i {
  font-size: 55px;
  color: #8bc34a;
}

.order_confirmation p {}

/* .back_btn {
  z-index: 999;
  background: #03a9f4;
  color: white;
  width: fit-content;
  padding: 5px 18px;
  margin: 0 auto;
  border-radius: 5px;
} */

.card_loader_back {
  z-index: 100;
  background: #ffffff;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
}

.loader2 {
  background: #ffffffcc;
  width: -webkit-fill-available;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.loader2 h2 {
  text-align: center;
  font-family: sans-serif;
  color: #777575c4;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
}

.loader_box {
  width: 190px;
  margin: 10% auto 0px;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  text-align: center;
  height: 100px;
  align-items: end;
}

.load1 {
  background: linear-gradient(45deg, #f44336, #e91e63, #ff9800);
  width: 27px;
  height: 27px;
  border-radius: 29px;

  bottom: 0;
  text-align: center;
  animation-delay: 0s;
}

.load2 {
  background: linear-gradient(45deg, #2196f3, #673ab7, #9c27b0);
  width: 27px;
  height: 27px;
  border-radius: 29px;
  text-align: center;
  bottom: 0;
  animation-delay: 0.2s;
}

.load3 {
  background: linear-gradient(45deg, #cddc39, #453b9d, #009688);
  width: 27px;
  height: 27px;
  border-radius: 29px;
  text-align: center;
  bottom: 0;
  animation-delay: 0.4s;
}

.load4 {
  background: linear-gradient(45deg, #ffeb3b, #ff9800, #ff9800);
  width: 27px;
  height: 27px;
  border-radius: 29px;
  text-align: center;
  bottom: 0;
  animation-delay: 0.6s;
}

.load5 {
  background: linear-gradient(45deg, #f44336, #e91e63, #ff9800);
  width: 27px;
  height: 27px;
  border-radius: 29px;
  text-align: center;
  bottom: 0;
  animation-delay: 0.8s;
}

.load1,
.load2,
.load3,
.load4,
.load5 {
  position: relative;
  display: block;
  margin: 0 auto;
  animation: bounce 01s ease-out infinite alternate;
}

.load1 {
  animation-delay: 0s;
}

.load2 {
  animation-delay: 0.2s;
}

.load3 {
  animation-delay: 0.4s;
}

.load4 {
  animation-delay: 0.6s;
}

.load5 {
  animation-delay: 0.8s;
}

.load1:after,
.load2:after,
.load3:after,
.load4:after,
.load5:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 8px;
  background: linear-gradient(180deg, black, transparent);
  top: -3px;
  left: 12px;
}

@keyframes bounce {
  0% {
    transform: translate(0, 0);
    height: 15px;
    box-shadow: 0px 22px 10px 0px #6d6d6d4f;
  }

  30% {
    height: 27px;
    box-shadow: 0px 0px 0px 0px #6d6d6d4f;
  }

  100% {
    transform: translate(0, -50px);
    height: 27px;
  }
}