/* Sasen Business & Agency HTML Template */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header / Style Two / Style Three / Style Four / Style Five / Style Six
5. Main Slider
6. Services Section
7. Chart Section
8. Default Section
9. Counter Section
10. Project Section
11. Call To Action Section / Style Two
12. Price Section
13. Testimonial Section / Style Two
14. Map Section
15. Newslatter Section
16. About Section / Style Two
17. Chart Section
18. Plans Section
19. Fullwidth Section
20. Team Section
21. Clients Section
22. Project Section
23. Pricing Tab Section
24. Page Title
25. Blogs Section
26. Error Section
27. Faq's Section
28. Pricing Section / Style Two / Style Three
29. Project Masonry
30. Project FullWidth / Style Two / Style Three / Style Four
31. Team Section / Style Two / Style Three / Style Four
32. Contact Map
33. Contact Info
34. Contact Form

**********************************************/
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap");

@import url("font-awesome.css");

/*** 

====================================================================
	Reset
====================================================================

 ***/
* {
  margin: 0px;
  padding: 0px;
  border: none;
  outline: none;
}
.heading_titleclint {
  text-align: center;
  font-weight: 700;
  font-size: 32px; /* optional, adjust size */
  color: black; /* optional, change color */
  margin-bottom: 30px; /* optional spacing below */
}
:root {
  --bg: #704b66;

  --card-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035),
    rgba(255, 255, 255, 0.02)
  );
  --glass: rgba(255, 255, 255, 0.04);
  --purple-1: #704b66;
  --purple-2: #704b66;
  --accent: #704b66;
  --muted: #bfc7d2;
  --radius: 18px;
  --shadow-lg: 0 30px 60px rgba(11, 8, 20, 0.65);
}

/* Background Scene */
.erp-3d-wrap {
  display: flex;

  justify-content: center;
  align-items: center;
  padding: 80px 20px;
  background: radial-gradient(
      1000px 600px at 10% 10%,
      rgba(143, 93, 243, 0.06),
      transparent 60%
    ),
    radial-gradient(
      1000px 600px at 90% 90%,
      rgba(111, 43, 217, 0.04),
      transparent 60%
    ),
    var(--bg);
  perspective: 1600px;
}

/* Main Card */
.erp-card {
  width: 1080px;
  max-width: 95%;
  height: 640px;
  border-radius: var(--radius);
  perspective: 2000px;
  transform-style: preserve-3d;
  position: relative;
}

/* Inner 3D Layer */
.erp-card__stage {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s ease;
  box-shadow: var(--shadow-lg);
  overflow: visible;
  position: relative;
}

/* Neon Rim */
.erp-card__rim {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(
    120deg,
    rgba(143, 93, 243, 0.3),
    rgba(111, 43, 217, 0.15)
  );
  opacity: 0.8;
  z-index: 2;
  pointer-events: none;
}

/* 3D Layout */
.erp-card__content {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  padding: 50px;
  gap: 40px;
  height: 100%;
  transform-style: preserve-3d;
}

/* Left Image */
.erp-image {
  position: relative;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  transform: translateZ(70px) scale(1.05);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.erp-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(143, 93, 243, 0.2),
    rgba(111, 43, 217, 0.1)
  );
  mix-blend-mode: overlay;
}

.erp-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Right Content */
.erp-body {
  transform: translateZ(100px);
  transition: transform 0.6s ease;
}

.erp-title {
  font-size: 2rem;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 6px 20px rgba(143, 93, 243, 0.2);
  margin-bottom: 20px;
  transform: translateZ(20px);
}

.erp-desc {
  font-size: 1.1rem;
  color: var(--muted);
  opacity: 0.95;
  margin-bottom: 25px;
  line-height: 1.6;
  transform: translateZ(15px);
}

/* Chips */
.erp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px;
}
.erp-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(143, 93, 243, 0.3);
  color: #dbe7ff;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  transition: all 0.3s ease;
  transform: translateZ(20px);
}
.erp-chip:hover {
  background: rgba(143, 93, 243, 0.2);
  transform: translateZ(30px) scale(1.1);
}

/* CTA */
.erp-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(90deg, #8f5df3, #6f2bd9);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 14px;
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(143, 93, 243, 0.3);
  transform: translateZ(60px);
  transition: transform 0.3s, box-shadow 0.3s;
}
.erp-btn:hover {
  transform: translateY(-8px) translateZ(80px) scale(1.05);
  box-shadow: 0 20px 60px rgba(143, 93, 243, 0.45);
}

/* Hover Animation - Card Tilt */
.erp-card:hover .erp-card__stage {
  transform: rotateX(12deg) rotateY(-10deg) translateZ(40px) scale(1.04);
}
.erp-card:hover .erp-thumb {
  transform: scale(1.15);
}
.erp-card:hover .erp-body {
  transform: translateZ(120px);
}

/* Decorative Light Orbs */
.erp-light {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.erp-light:nth-child(1) {
  background: radial-gradient(
    circle,
    rgba(143, 93, 243, 0.25),
    transparent 60%
  );
  top: -60px;
  left: -60px;
}
.erp-light:nth-child(2) {
  background: radial-gradient(
    circle,
    rgba(111, 43, 217, 0.25),
    transparent 60%
  );
  bottom: -60px;
  right: -60px;
}
/* Responsive Design */
@media (max-width: 992px) {
  .erp-card {
    height: auto;
  }

  .erp-card__content {
    grid-template-columns: 1fr;
    padding: 30px 20px;
    gap: 35px;
    height: auto;
  }

  .erp-image {
    /* height: 400px;  */
    transform: translateZ(40px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  }

  .erp-body {
    transform: translateZ(40px);
    text-align: center;
  }

  .erp-title {
    font-size: 1.8rem;
    margin-bottom: 16px;
  }

  .erp-desc {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
  }

  .erp-list {
    justify-content: center;
  }

  .erp-chip {
    font-size: 0.95rem;
    padding: 10px 14px;
  }

  .erp-btn,
  .erp-ghost {
    display: inline-flex;
    justify-content: center;
    width: auto;
  }

  .erp-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
}

/* Small Screens (phones) */
@media (max-width: 576px) {
  .erp-image {
  }

  .erp-title {
    font-size: 1.5rem;
  }

  .erp-desc {
    font-size: 0.95rem;
  }

  .erp-chip {
    font-size: 0.85rem;
    padding: 8px 12px;
  }

  .erp-btn {
    font-size: 0.95rem;
    padding: 12px 20px;
  }
}

/* Optional - Disable 3D tilt on mobile for smoother scrolling */
@media (max-width: 768px) {
  .erp-card__stage {
    transform: none !important;
  }
  .erp-card:hover .erp-card__stage {
    transform: none !important;
  }
}

.tech-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* space between logos */
  flex-wrap: wrap; /* allow wrap on small screens */
}

.tech-item img {
  height: 60px; /* make all logos equal size */
  display: block;
  margin: 0 auto 8px;
}

.tech-item small {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.service-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
}

.service-text {
  flex: 1;
}

.service-image {
  flex: 1;
  text-align: center;
}

.service-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.icon-box .icon {
  font-size: 32px;
  color: #1bab9a;
  margin-bottom: 15px;
}

.service-title {
  color: #1bab9a;
  font-size: 24px;
  margin-bottom: 15px;
  display: inline-block;
}

.text {
  font-size: 16px;
  color: #555;
}

/* Responsive: Image below text on small screens */
@media (max-width: 991px) {
  .service-inner {
    flex-direction: column;
    text-align: center;
  }
}
.whatsapp-box {
  position: fixed;
  bottom: 90px; /* placed above the button */
  right: 20px;
  background-color: #ffffff;
  color: #1bab9a;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  white-space: nowrap;
}

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: white;
  font-size: 28px;
  padding: 16px 16px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whatsapp-float:hover {
  background-color: #1ebe57;
  transform: scale(1.05);
}
.whatsapp-box i {
  margin-right: 8px;
  font-size: 16px;
}

/* Blog Section */
.shb-blog-section {
  padding: 60px 0;
  background-color: #f9f9f9;
  font-family: "Poppins", sans-serif;
}

.shb-container {
  max-width: 1100px;
  margin: 0 auto;
}
/*--------------------------------------------------------------
# Custom Cursor
--------------------------------------------------------------*/
.custom-cursor__cursor {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  border: 1px solid #1bab9a;
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  -webkit-transform: translate(calc(-50% + 5px), -50%);
  transform: translate(calc(-50% + 5px), -50%);
  z-index: 999991;
}

.custom-cursor__cursor-two {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #1bab9a;
  opacity: 0.3;
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-transition: width 0.3s, height 0.3s, opacity 0.3s;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  z-index: 999991;
}
.navmove {
  transition: margin-bottom 0.3s ease; /* smooth effect */
}

.navmove:hover {
  margin-bottom: 10px;
}

.custom-cursor__hover {
  background-color: #1bab9a;
  opacity: 0.4;
}

.custom-cursor__innerhover {
  width: 25px;
  height: 25px;
  opacity: 0.4;
}

/* Blog Content */
.shb-blog-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: left; /* Ensures content is left-aligned */
}

/* Loading & Error */
#shb-blog-details.shb-loading,
#shb-blog-details .shb-error {
  text-align: center;
  font-size: 18px;
  color: #888;
  padding: 50px 0;
}

/* Blog Details Card */
.shb-blog-card {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
  text-align: left; /* Explicit left alignment */
}

.shb-blog-card:hover {
  transform: translateY(-5px);
}

/* Image */
.shb-blog-card .shb-image img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid #eee;
  transition: transform 0.5s ease;
}

/* Lower Content */
.shb-blog-card .shb-lower-content {
  padding: 30px;
  text-align: left; /* Explicitly left-aligned */
}

.shb-blog-card h4 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #222;
  text-align: left; /* Ensure title is left-aligned */
}

.shb-blog-card .shb-post-meta {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #777;
  margin-bottom: 20px;
  text-align: left; /* Ensure meta is left-aligned */
}

.shb-blog-card .shb-post-meta li span {
  color: #999;
}

/* Blog Description */
.shb-blog-card .shb-text {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  text-align: left; /* Ensure description is left-aligned */
}

/* Responsive */
@media (max-width: 991px) {
  .shb-blog-card h4 {
    font-size: 24px;
  }
  .shb-blog-card .shb-lower-content {
    padding: 20px;
  }
}

@media (max-width: 576px) {
  .shb-blog-section {
    padding: 40px 15px;
  }
  .shb-blog-card h4 {
    font-size: 20px;
  }
}

/* ====================================================================
  gallery
  /* CSS */
.gallery {
  width: 50%; /* container width */
  margin: 0 auto; /* center the container */
  display: block;
  gap: 16px; /* space between columns/rows */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-items: center; /* center items inside each grid cell */
  align-items: center;
  box-sizing: border-box;
  padding: 12px;
}
/* Tablets: 2 columns */
@media (max-width: 900px) {
  .gallery {
    width: 90%; /* container width */
    margin: 0 auto; /* center the container */
    display: block;
    gap: 16px; /* space between columns/rows */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    justify-items: center; /* center items inside each grid cell */
    align-items: center;
    box-sizing: border-box;
    padding: 12px;
  }
}
@media (max-width: 600px) {
  .gallery {
    width: 100%; /* container width */
    margin: 0 auto; /* center the container */
    display: block;
    gap: 16px; /* space between columns/rows */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    justify-items: center; /* center items inside each grid cell */
    align-items: center;
    box-sizing: border-box;
    padding: 12px;
  }
}
.gallery img {
  width: 100%; /* image fills its grid cell */
  height: auto;
  display: block;
  object-fit: cover; /* keeps aspect ratio, crops if necessary */
  border-radius: 6px; /* optional */
}

/* ====================================================================
  pricing 
==================================================================== */
.pricing-section {
  width: 95%;
  margin: auto;
  text-align: center;
  padding: 40px 0;
  font-family: Arial, sans-serif;
}

select {
  margin: 10px;
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on mobile */
  margin-top: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

th {
  background: #f8f8f8;
}

.plan-price {
  font-weight: bold;
  color: #1bab9a;
  display: block;
  margin: 5px 0;
}

.note {
  font-size: 12px;
  color: #888;
}

.yes {
  color: #1bab9a;
  font-weight: bold;
}

.no {
  color: #aaa;
}

.signup-btn {
  background: #1bab9a;
  color: white;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 5px;
}

/*** 




====================================================================
  Global Settings
====================================================================

 ***/

:root {
  --theme-color: #1bab9a;
  --primary-color: #f8f1ff;
  --text-color: rgba(106, 106, 106, 1);
  --title-color: rgba(17, 17, 17, 1);
  --white-color: #ffffff;
  --text-font: "Hanken Grotesk";
  --title-font: "Outfit";
}

body {
  font-size: 15px;
  color: #777777;
  line-height: 1.8em;
  font-weight: 400;
  background: var(--white-color);
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-family: var(--title-font);
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #111111;
}

a:hover,
a:focus,
a:visited {
  text-decoration: none;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  font-weight: normal;
  margin: 0px;
  background: none;
  line-height: 1.6em;
  font-family: var(--title-font);
}

input,
button,
select,
textarea {
  font-family: var(--title-font);
}

::-ms-input-placeholder {
  /* Edge 12-18 */
  color: #6a6a6a;
}

::placeholder {
  color: #6a6a6a;
}
.theme_color {
  color: #111111;
}
p {
  position: relative;
  line-height: 1.8em;
}
.auto-container {
  position: static;
  align-items: center;
  max-width: 1290px;
  padding: 0px 15px;
  margin: 0 auto;
}
.medium-container {
  position: relative;
  max-width: 850px;
  padding: 0px 15px;
  margin: 0 auto;
}
.login-container {
  position: relative;
  max-width: 510px;
  padding: 0px 15px;
  margin: 0 auto;
}

.page-wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-width: 300px;
  overflow: hidden;
}

.grey-bg {
  background-color: #f8fcff;
}

ul,
li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.link-box.client_btn {
  text-align: left;
  margin-top: 45px;
}

.theme-btn {
  display: inline-block;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.theme-btn.three {
  padding: 14px 30px;
}

.theme-btn.four {
  padding: 9px 30px;
  margin-top: 10px;
}

.centered {
  text-align: center;
}

.theme-btn.four.btn-bg-color {
  background: linear-gradient(270deg, #1bab9a 0%, #a3cd3a 100%);
  border: none;
  color: var(--white-color);
}

/*List Style One*/

.list-style-one {
  position: relative;
  margin: 0px 0px;
}

.list-style-one li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  color: #000000;
  font-size: 15px;
  font-weight: 400;
}

.list-style-one li:before {
  position: absolute;
  content: "\f00c";
  left: 0px;
  top: 0px;
  color: var(--title-color);
  font-size: 14px;
  font-weight: 300;
  font-family: "FontAwesome";
}

.list-style-one li.cross:before {
  position: absolute;
  content: "\f00d";
  left: 0px;
  top: 0px;
  color: #e21e1e;
  font-size: 16px;
  font-weight: 300;
  font-family: "FontAwesome";
}

/*Btn Style One*/

.btn-style-one {
  position: relative;
  line-height: 24px;
  color: #222222;
  font-size: 15px;
  font-weight: 600;
  background: none;
  display: inline-block;
  padding: 12px 40px 12px;
  border: 2px solid #e7e7e7;
  border-radius: 50px;
  text-transform: uppercase;
}

.btn-style-one:hover {
  opacity: 0.7;
  color: var(--white-color);
  border-color: #03c7d9;
  background-color: #03c7d9;
}

/*Btn Style Two*/

.btn-style-two {
  position: relative;
  line-height: 24px;
  color: var(--white-color);
  font-size: 15px;
  font-weight: 500;
  background: #03c7d9;
  display: inline-block;
  padding: 13px 40px 13px;
  border-radius: 50px;
  text-transform: uppercase;
}

.btn-style-two:hover {
  background: #ff4052;
  color: var(--white-color);
}

/*Btn Style Three*/

.btn-style-three {
  position: relative;
  line-height: 24px;
  color: var(--white-color);
  font-size: 14px;
  font-weight: 500;
  background: none;
  border-radius: 50px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 11px 38px 11px;
  text-transform: uppercase;
  border: 2px solid var(--white-color);
}

.btn-style-three:hover {
  background: #03c7d9;
  color: var(--white-color);
  border-color: #03c7d9;
}

/*Btn Style Four*/

.btn-style-four {
  position: relative;
  line-height: 24px;
  color: #03c7d9;
  font-size: 13px;
  font-weight: 500;
  background: none;
  display: inline-block;
  padding: 11px 34px 11px;
  border: 2px solid #03c7d9;
  border-radius: 50px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
}

.btn-style-four:hover {
  color: var(--white-color);
  background-color: #03c7d9;
}

/* Preloader */

.handle-preloader {
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -ms-flexbox;
  height: 100%;
  justify-content: center;
  -webkit-justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999999;
  background: #1bab9a;
}

.preloader-close {
  position: fixed;
  z-index: 99999999;
  font-size: 14px;
  background: #fff;
  color: #1bab9a;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  right: 30px;
  top: 30px;
  font-weight: 400;
}

.handle-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}

.handle-preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  height: 150px;
  margin: 0 auto 45px auto;
  width: 150px;
}

.handle-preloader .animation-preloader .txt-loading {
  text-align: center;
  user-select: none;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
  animation: letters-loading 4s infinite;
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  top: 0;
  position: absolute;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading {
  font-family: var(--title-font);
  font-weight: 500;
  letter-spacing: 15px;
  display: inline-block;
  position: relative;
  font-size: 70px;
  line-height: 70px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.3);
}

.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(2):before {
  animation-delay: 0.2s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(3):before {
  animation-delay: 0.4s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(4):before {
  animation-delay: 0.6s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(5):before {
  animation-delay: 0.8s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(6):before {
  animation-delay: 1s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(7):before {
  animation-delay: 1.2s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(8):before {
  animation-delay: 1.4s;
}
.handle-preloader .loader-section {
  background-color: var(--white-color);
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.preloader .loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
  color: var(--white-color);
}

.handle-preloader .animation-preloader .spinner {
  border: 3px solid var(--white-color);
  border-top-color: rgba(255, 255, 255, 0.5);
}

/* AnimaciÃƒÆ’Ã‚Â³n del preloader */
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@media screen and (max-width: 767px) {
  .handle-preloader .animation-preloader .spinner {
    height: 8em;
    width: 8em;
  }
}
@media screen and (max-width: 500px) {
  .handle-preloader .animation-preloader .spinner {
    height: 7em;
    width: 7em;
  }
  .handle-preloader .animation-preloader .txt-loading .letters-loading {
    font-size: 40px;
    letter-spacing: 10px;
  }
}

.preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background-color: var(--white-color);
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../images/icons/preloader.svg);
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.float-bob-y {
  animation-name: float-bob-y;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: float-bob-y;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: float-bob-y;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob-y;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob-y;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.float-bob-x {
  animation-name: float-bob-x;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: float-bob-x;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: float-bob-x;
  -moz-animation-duration: 15s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob-x;
  -ms-animation-duration: 15s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob-x;
  -o-animation-duration: 15s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

@-webkit-keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

:root {
  --progress-bar-width: 100px;
  --progress-bar-height: 100px;
  --font-size: 30px;
}
.circular-progress {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner-circle {
  position: absolute;
  width: calc(var(--progress-bar-width) - 30px);
  height: calc(var(--progress-bar-height) - 30px);
  border-radius: 50%;
  background-color: lightgrey;
}

.percentage {
  position: absolute;
  right: 155px;
  top: 34px;
  font-size: var(--font-size);
  color: rgba(30, 27, 57, 1) !important;
  line-height: 40px;
  font-weight: 700;
  font-family: "Outfit";
}
.progress-two .percentage {
  position: relative;
  right: 0px;
  top: 0px;
  font-size: 20px;
  color: rgba(30, 27, 57, 1) !important;
  line-height: 40px;
  font-weight: 600;
  font-family: "Outfit";
}

/*** 

====================================================================
	Social Icon One
====================================================================

***/

.social-icon-one {
  position: relative;
}

.social-icon-one .share {
  color: #222222;
  font-size: 16px;
  font-weight: 700;
}

.social-icon-one li {
  position: relative;
  margin-left: 12px;
  display: inline-block;
}

.social-icon-one li a {
  position: relative;
  font-size: 18px;
  color: #333333;
  display: inline-block;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
}

.social-icon-one li a:hover {
  color: #03c7d9;
}

/*** 

====================================================================
	Scroll To Top style
====================================================================

***/
/* 
.scroll-to-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 50px;
  height: 50px;
  color: var(--white-color);
  font-size: 13px;
  text-transform: uppercase;
  line-height: 50px;
  text-align: center;
  z-index: 100;
  cursor: pointer;
  background: linear-gradient(270deg, #1bab9a 0%, #a3cd3a 100%);
  display: none;
  border-radius: 3px;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  transition: all 500ms ease;
} */

.scroll-to-top::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  content: "";
  z-index: -1;
  background: var(--title-color);
  color: var(--white-color);
  transition: all 900ms ease;
  -moz-transition: all 900ms ease;
  -webkit-transition: all 900ms ease;
  -ms-transition: all 900ms ease;
  -o-transition: all 900ms ease;
}
.scroll-to-top:hover:before {
  width: 100%;
}
.scroll-to-top:hover i {
  color: var(--white-color);
}

/* .scroll-to-top:hover{
	color:var(--white-color);
	background: var(--title-color);
} */

.centred {
  text-align: center;
}

.subtitle {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--title-color);
  font-family: var(--text-font);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.heading_title {
  font-size: 48px;
  line-height: 56px;
  font-weight: 600;
  font-family: var(--title-font);
  color: var(--title-color);
  margin-bottom: 35px;
}

/* ----------Contact Info------------- */
.social-contact-section {
  position: relative;
  padding-top: 160px;
  z-index: 1;
}
.contact-section {
  position: relative;
  margin: 120px 0px 150px 0px;
  z-index: 1;
}
.link-box .btn-large.contact-us {
  display: block;
}
.contact-info {
  position: relative;
  z-index: 1;
}
.contact-info .info-block {
  position: relative;
  display: block;
  margin-bottom: 30px;
  border-radius: 10px;
}
.contact-info .info-block .inner-box {
  position: relative;
  display: block;
  padding: 54px 0px 54px 122px;
  line-height: 24px;
  font-size: 14px;
  color: #707070;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 30px 100px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.contact-info .info-block .inner-box h4 {
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 22px;
  color: rgba(0, 0, 0, 1);
}
.contact-info .info-block .inner-box .icon-box {
  position: absolute;
  left: 40px;
  top: 55px;
  text-align: center;
  width: 60px;
  height: 60px;
  line-height: 64px;
  background: rgba(248, 241, 255, 1);
  font-size: 25px;
  border-radius: 50%;
}
.contact-info .info-block .inner-box .icon-box span {
  background: linear-gradient(180deg, #1bab9a 0%, #a3cd3a 61.11%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 500ms ease;
}

.contact-info .info-block .inner-box .text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 0px;
  color: rgba(0, 0, 0, 1);
}
.contact-shape-image {
  position: relative;
}
.contact-shape-image img {
  position: absolute;
  display: inline-block;
  top: -154px;
  left: 28%;
  z-index: -2;
}

/* -----------Login Page Css-------------------- */
.login-section {
  position: relative;
  margin: 150px 0px;
}
.login-section .form-container .form {
  margin-bottom: 0px;
}
.form-container {
  display: flex;
  flex-direction: column;
}
.login-section .close-icon {
  position: absolute;
  top: 32px;
  right: 50px;
  font-size: 14px;
  color: rgba(0, 0, 0, 1);
  cursor: pointer;
}
.form-container .form {
  background-color: #fff;
  padding: 50px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
.form-container .form h2 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  color: var(--title-color);
}
.form-container .form .input-group {
  margin-bottom: 15px;
  display: block;
}
.form-container .form .input-group label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  font-family: var(--text-font);
  color: var(--title-color);
}
.form-container .form .input-group input {
  width: 100%;
  padding: 10px 27px;
  border: 1px solid rgba(229, 229, 229, 1);
  border-radius: 145px;
  margin-bottom: 10px;
}
.form-container .form button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 3px;
  background: linear-gradient(90deg, #1bab9a 0%, #a3cd3a 100%);
  color: #fff;
  border-radius: 145px;
  cursor: pointer;
}
.form-container .form button:hover {
  background-color: #0056b3;
}
.form-container .form span.psw {
  position: relative;
  display: block;
  text-align: right;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 30px;
  background: linear-gradient(270deg, #1bab9a 0%, #a3cd3a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
}
.form-container .form .small-xl .text-muted {
  font-family: var(--text-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0em;
  color: var(--title-color);
}
.form-container .form .small-xl a {
  font-family: var(--text-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0em;
  background: linear-gradient(270deg, #1bab9a 0%, #a3cd3a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.form-container .form .small-xl {
  margin-top: 30px;
}
.form-container .form p {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  font-family: var(--text-font);
  color: rgba(110, 110, 110, 1);
  margin-bottom: 20px;
}
.form-container .form .login-part:before {
  position: absolute;
  content: "";
  top: 10px;
  left: 0px;
  height: 1px;
  width: 170px;
  background-color: rgba(229, 229, 229, 1);
}
.form-container .form .login-part:after {
  position: absolute;
  content: "";
  top: 10px;
  right: 0px;
  height: 1px;
  width: 170px;
  background-color: rgba(229, 229, 229, 1);
}
.google-link ul {
  display: flex;
  justify-content: center;
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  color: var(--title-color);
  width: 100%;
  padding: 10px 27px;
  border: 1px solid rgba(229, 229, 229, 1);
  border-radius: 145px;
  margin-bottom: 30px;
}
.google-link ul li {
  margin-right: 10px;
}
.facebook-link ul {
  display: flex;
  justify-content: center;
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  color: var(--title-color);
  width: 100%;
  padding: 10px 27px;
  border: 1px solid rgba(229, 229, 229, 1);
  border-radius: 145px;
}
.facebook-link ul li {
  margin-right: 10px;
}
.signup-section {
  position: relative;
  margin: 150px 0px;
}
.signup-section .form-container .form {
  margin-bottom: 0;
}
.signup-section .close-icon {
  position: absolute;
  top: 32px;
  right: 50px;
  font-size: 14px;
  color: rgba(0, 0, 0, 1);
  cursor: pointer;
}

.owl-carousel {
  -ms-touch-action: none;
  /* touch-action: none; */
}
