/*
  Website Name: From the Drafts
  Version: 1.0
*/
/* CSS Index
============================
01. Variable CSS
02. Header
03. Mobile Menu
04. Search
05. OffCanvas
06. Slider
07. Banner
08. Breadcrumb
09. About
10. Overview
11. Features
12. Choose
13. Services
14. Cta
15. Counter
16. Estimate
17. Project
18. Faq
19. Request
20. Team
21. Testimonial
22. Pricing
23. Contact
24. Blog
25. Brand
26. Error
27. Footer
28. Preloader
============================
*/
/*=============================
	1. Google Fonts
===============================*/
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500;1,600&family=Urbanist:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
/*=============================
	01. Variable CSS
===============================*/
:root {
  --tg-body-font-family: var(--primary-font);
  --tg-heading-font-family: var(--heading-font);
  --tg-primary-color: var(--primary-color);
  --tg-secondary-color: var(--secondary-color);
  --tg-body-font-color: var(--text-color);
  --tg-heading-font-color: var(--heading-color);
  --tg-paragraph-color: var(--text-color);
  --tg-section-background: #f8faff;
  --tg-body-font-size: 16px;
  --tg-body-font-weight: 500;
  --tg-heading-font-weight: 700;
  --tg-body-line-height: 1.62;
  --tg-heading-line-height: 1.2;
  --tg-text-transform: capitalize;
  --tg-blue: #0049dc;
  --tg-metallic-blue: #324b7d;
  --tg-cornflower-blue: #b3ccff;
  --tg-steel-blue: #b6c1db;
  --tg-lavender: #e6eeff;
  --tg-indigo: #6610f2;
  --tg-purple: #6f42c1;
  --tg-pink: #ff005c;
  --tg-red: #ff3c3c;
  --tg-orange: #fd7e14;
  --tg-yellow: #ffb930;
  --tg-green: #219653;
  --tg-teal: #20c997;
  --tg-cyan: #0dcaf0;
  --tg-white: #ffffff;
  --tg-black: #000;
  --tg-gray: #f1f4fc;
  --tg-gray-two: #f1f5ff;
  --tg-gray-three: #96a1b8;
  --tg-gray-four: #667594;
  --tg-border-color: #e1e5ee;
  --facebook: #3b5998;
  --twitter: #00acee;
  --linkedin: #1976d2;
  --pinterest: #3b5998;
  --youtube: #c4302b;
  --skype: #00aff0;
}

body {
  font-family: var(--tg-body-font-family);
  font-weight: var(--tg-body-font-weight);
  font-size: var(--tg-body-font-size);
  line-height: var(--tg-body-line-height);
  color: var(--tg-body-font-color);
  font-style: normal;
}

img,
.img {
  max-width: 100%;
  transition: all 0.3s ease-out 0s;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.fix {
  overflow: hidden;
}

a,
button {
  transition: all 0.3s ease-out 0s;
  text-decoration: none;
}

a:focus,
.btn:focus,
button:focus {
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

a:hover,
.portfolio-cat a:hover,
.footer -menu li a:hover {
  color: var(--tg-primary-color);
  text-decoration: none;
}

a,
button {
  color: var(--tg-primary-color);
  outline: medium none;
  text-decoration: none;
}

.btn:focus,
button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--tg-heading-font-family);
  color: var(--tg-heading-font-color);
  margin-top: 0px;
  margin-bottom: 0.7rem;
  font-style: normal;
  line-height: var(--tg-heading-line-height);
  font-weight: var(--tg-heading-font-weight);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

.list-wrap {
  margin: 0px;
  padding: 0px;
}

.list-wrap li {
  list-style: none;
}

p {
  font-size: var(--tg-body-font-size);
  font-weight: var(--tg-body-font-weight);
  line-height: var(--tg-body-line-height);
  color: var(--tg-paragraph-color);
  margin-bottom: 15px;
}

hr {
  border-bottom: 1px solid var(--tg-primary-color);
  border-top: 0 none;
  margin: 30px 0;
  padding: 0;
}

label {
  color: var(--tg-body-font-color);
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
}

.white-shadow {
  text-shadow: 3.94px 3.08px 2px #FFFFFF;
}

.white-color {
  color: #FFFFFF;
}

*::-moz-selection {
  background: var(--tg-primary-color);
  color: var(--tg-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--tg-primary-color);
  color: var(--tg-white);
  text-shadow: none;
}

::selection {
  background: var(--tg-primary-color);
  color: var(--tg-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--tg-body-font-color);
  font-size: var(--tg-body-font-size);
  opacity: 1;
}

*::placeholder {
  color: var(--tg-body-font-color);
  font-size: var(--tg-body-font-size);
  opacity: 1;
}

.theme-overlay {
  position: relative;
}

.theme-overlay::before {
  background: var(--tg-primary-color) none repeat scroll 0 0;
  content: "";
  height: 100%;
  inset-inline-start: 0;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
}

.separator {
  border-top: 1px solid var(--tg-primary-color);
}

/* Bootstrap 5 */
.container {
  padding-inline-start: 15px;
  padding-inline-end: 15px;
}

.row {
  --bs-gutter-x: 30px;
}

.row.g-0 {
  --bs-gutter-x: 0;
}

.gutter-y-30 {
  --bs-gutter-y: 30px;
}

/*=============================
	1. Button style
===============================*/
.btn {
  background: rgba(0, 0, 0, 0) !important;
  color: #000 !important;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 700;
  margin-bottom: 0;
  padding: 1rem 2rem 0.5rem 2.5rem;
  border: 3px solid #000 !important;
  border-radius: 0px !important;
  position: relative;
  transition: padding 0.3s ease-in-out;
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  border-right: 3px solid #FFFFFF;
  border-bottom: 3px solid #FFFFFF;
  transition: all 0.3s ease-in-out;
  z-index: -1 !important;
}

.btn:hover::before {
  top: 0;
  left: 0;
}

.btn:hover {
  padding: 0.75rem 2.25rem;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.btn-yellow {
  background: rgba(0, 0, 0, 0) !important;
  color: #000 !important;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 700;
  margin-bottom: 0;
  padding: 1rem 2rem 0.5rem 2.5rem;
  border: 3px solid #FFFFFF !important;
  border-radius: 0px !important;
  position: relative;
  transition: padding 0.3s ease-in-out;
}

.btn-yellow::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  height: 100%;
  width: 100%;
  background-color: #fedc00;
  border-right: 3px solid #fedc00;
  border-bottom: 3px solid #fedc00;
  transition: all 0.3s ease-in-out;
  z-index: -1 !important;
}

.btn-yellow:hover::before {
  top: 0;
  left: 0;
}

.btn-yellow:hover {
  padding: 0.75rem 2.25rem;
}

.btn.btn-two::after {
  display: none;
}

.transparent-btn {
  border: 2px solid var(--tg-primary-color);
  background: transparent;
  color: var(--tg-primary-color);
}

.btn-three {
  padding: 19px 30px;
}

.transparent-btn-two::before,
.btn-three::before {
  display: none;
}

.transparent-btn-two::after,
.btn-three::after {
  content: "";
  background-image: url(../img/icons/right-arrow.svg);
  filter: brightness(0) invert(1);
  width: 18px;
  height: 12px;
  margin-inline-start: 12px;
}

.btn-three:hover {
  background: var(--tg-secondary-color);
}

.transparent-btn-two {
  border: 2px solid var(--tg-primary-color);
  color: var(--tg-primary-color);
  background: transparent;
  padding: 17px 30px;
}

.transparent-btn-two::after {
  filter: none;
  transition: all 0.3s ease 0s;
}

.transparent-btn-two:hover {
  background: var(--tg-primary-color);
}

.transparent-btn-two:hover::after {
  filter: brightness(0) invert(1);
}

.breadcrumb > .active {
  color: var(--tg-primary-color);
}

/* scrollUp */
.scroll-top {
  width: 35px;
  height: 35px;
  line-height: 35px;
  position: fixed;
  bottom: -10%;
  inset-inline-end: 30px;
  font-size: var(--tg-body-font-size);
  border-radius: 6px;
  z-index: 99;
  color: var(--tg-white);
  text-align: center;
  cursor: pointer;
  background: var(--tg-primary-color);
  transition: 1s ease;
  border: none;
}

.scroll-top.open {
  bottom: 30px;
}

.scroll-top::after {
  position: absolute;
  z-index: -1;
  content: "";
  top: 100%;
  inset-inline-start: 5%;
  height: 10px;
  width: 90%;
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}

.scroll-top:hover {
  background: var(--tg-secondary-color);
}

/*=============================
	02. Header
===============================*/
.custom-container {
  max-width: 1310px;
}

.custom-container-two {
  max-width: 1360px;
}

.custom-container-three {
  max-width: 1800px;
}

.transparent-header {
  position: absolute;
  inset-inline-start: 0;
  top: 0px;
  width: 100%;
  z-index: 9;
  height: auto;
}

#header-fixed-height.active-height {
  display: block;
  height: 96px;
}

.header-top-wrap {
  background: var(--tg-secondary-color);
  overflow: hidden;
  padding: 9px 0;
}

.header-top-left .list-wrap {
  display: flex;
  align-items: center;
  gap: 10px 35px;
}

.header-top-left .list-wrap li {
  font-size: 14px;
  color: var(--tg-lavender);
  display: flex;
  align-items: center;
  line-height: 1.28;
  position: relative;
}

.header-top-left .list-wrap li::before {
  content: "";
  position: absolute;
  inset-inline-end: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 500%;
  background: var(--tg-metallic-blue);
}

.header-top-left .list-wrap li:last-child::before {
  display: none;
}

.header-top-left .list-wrap li i {
  font-size: 20px;
  margin-inline-end: 8px;
  line-height: 0;
  color: var(--tg-cornflower-blue);
}

.header-top-left .list-wrap li a {
  color: var(--tg-lavender);
}

.header-top-left .list-wrap li a:hover {
  color: var(--tg-primary-color);
}

.header-top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.header-contact {
  position: relative;
  margin-inline-end: 35px;
}

.header-contact::before {
  content: "";
  position: absolute;
  inset-inline-end: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 500%;
  background: var(--tg-metallic-blue);
}

.header-contact a {
  font-size: 14px;
  line-height: 1.28;
  color: var(--tg-lavender);
  display: flex;
  align-items: center;
}

.header-contact a i {
  font-size: 20px;
  margin-inline-end: 8px;
}

.header-contact a:hover {
  color: var(--tg-primary-color);
}

.header-social .list-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-social .list-wrap li a {
  font-size: 15px;
  color: var(--tg-lavender);
}

.header-social .list-wrap li a:hover {
  color: var(--tg-primary-color);
}

.menu-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.logo img,
.f-logo img,
.fw-logo img {
  max-height: 50px;
}

.navbar-wrap {
  display: flex;
  flex-grow: 1;
}

.navbar-wrap ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 0;
  margin: 0;
}

.navbar-wrap ul li {
  list-style: none;
  display: block;
  position: relative;
}

.navbar-wrap ul li a {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--tg-secondary-color);
  padding: 40px 15px;
  display: block;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.navbar-wrap > ul > li.active > a,
.navbar-wrap > ul > li:hover > a {
  color: var(--tg-primary-color);
}

.navbar-wrap > ul > li.menu-item-has-children > a::after {
  content: "\f107";
  font-weight: 700;
  font-family: "Font Awesome 5 Free";
  color: var(--tg-paragraph-color);
  margin-inline-start: 8px;
  transition: all 0.3s ease-out 0s;
}

.navbar-wrap > ul > li.menu-item-has-children:hover > a::after,
.navbar-wrap > ul > li.menu-item-has-children.active > a::after {
  color: var(--tg-primary-color);
}

.main-menu .navigation li.menu-item-has-children .dropdown-btn {
  display: none;
}

.header-action > ul {
  display: flex;
  align-items: center;
  margin-inline-start: 25px;
}

.header-action > ul li {
  position: relative;
  margin-inline-start: 25px;
}

.header-action ul li:first-child {
  margin-inline-start: 0;
}

.header-action ul li a {
  color: var(--tg-heading-font-color);
  font-size: 14px;
}

.header-action ul li.header-search {
  line-height: 0;
}

.header-action ul li.header-search a {
  color: #334770;
  font-size: 22px;
  line-height: 0;
  transition: all 0.3s ease-out 0s;
}

.header-action ul li.header-search a:hover {
  color: var(--tg-primary-color);
}

.header-action .header-btn .btn {
  color: var(--tg-white);
  font-size: 15px;
  border: 2px solid transparent;
}

.header-action .header-btn .btn:hover {
  background: transparent;
  border-color: var(--tg-primary-color);
  color: var(--tg-primary-color);
}

.navbar-wrap ul li .sub-menu {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 100%;
  min-width: 230px;
  border: 1px solid #f5f5f5;
  background: var(--tg-white);
  margin: 0 0;
  transform: scale(1, 0);
  transform-origin: 0 0;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15);
  border-radius: 5px;
  padding: 18px 0;
  display: block;
  visibility: hidden;
  opacity: 0;
  z-index: 9;
}

.navbar-wrap ul li .sub-menu .sub-menu {
  inset-inline-end: auto;
  inset-inline-start: 100%;
  top: 0;
}

.navbar-wrap ul li .sub-menu li {
  margin-inline-start: 0;
  text-align: start;
  display: block;
}

.navbar-wrap ul li .sub-menu li a {
  padding: 9px 15px 9px 25px;
  line-height: 1.4;
  font-size: 16px;
  font-weight: 500;
  color: var(--tg-secondary-color);
  text-transform: capitalize;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  gap: 5px;
}

.navbar-wrap ul li .sub-menu li a::before {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--tg-primary-color);
  transition: 0.3s ease-in-out;
}

.navbar-wrap ul li .sub-menu > li.active > a,
.navbar-wrap ul li .sub-menu li a:hover {
  color: var(--tg-primary-color);
}

.navbar-wrap ul li .sub-menu > li.active > a::before,
.navbar-wrap ul li .sub-menu li a:hover::before {
  width: 10px;
}

.navbar-wrap ul li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.sticky-menu {
  position: fixed;
  inset-inline-start: 0;
  margin: auto;
  top: 0;
  width: 100%;
  z-index: 99;
  background: #fedc00;
  animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
  box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  border-radius: 0;
}

.header-style-two .header-top-wrap, .header-style-four .header-top-wrap {
  padding: 0;
}

.header-style-two .header-top-left {
  padding-inline-start: 25px;
}
.header-style-two .header-top-right {
  gap: 20px;
}

.header-top-btn a {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  line-height: 0;
  background: var(--tg-primary-color);
  color: var(--tg-white);
  padding: 17px 25px;
}

.header-top-btn a i {
  font-size: 16px;
  margin-inline-end: 10px;
}

.header-top-btn a:hover {
  background: var(--primary-hover-color);
}

.header-style-two .menu-area {
  box-shadow: 0px 2px 50px rgba(0, 0, 0, 0.05);
  background: var(--tg-white);
  padding: 0 0 0 30px;
}

.header-style-two .navbar-wrap ul {
  margin: 0 0 0 60px;
}

.header-style-two .navbar-wrap ul li a {
  padding: 32px 15px;
}

.header-contact-two {
  display: flex;
  align-items: center;
  margin-inline-end: 30px;
}

.header-contact-two .icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-primary-color);
  color: var(--tg-white);
  line-height: 0;
  border-radius: 50%;
  font-size: 20px;
  margin-inline-end: 7px;
}

.header-contact-two .content span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: var(--tg-paragraph-color);
  line-height: 1;
  margin-bottom: 5px;
}

.header-contact-two .content a {
  font-weight: 700;
  font-size: 16px;
  display: block;
  line-height: 1;
  color: var(--tg-secondary-color);
}

.header-contact-two .content a:hover {
  color: var(--tg-primary-color);
}

.header-style-two .header-action ul > li > a {
  padding: 29px 29px;
  display: block;
  min-height: 80px;
  display: flex;
  align-items: center;
}

.header-action .offcanvas-menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 26px;
  padding: 29px 29px;
  justify-content: center;
}

.header-action .offcanvas-menu a span {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--tg-paragraph-color);
  transition: 0.3s linear;
}

.header-action .offcanvas-menu a span:nth-child(2) {
  width: 23px;
}

.header-action .offcanvas-menu a span:nth-child(3) {
  width: 15px;
}

.header-style-two .header-action .offcanvas-menu a:hover span {
  background: var(--tg-primary-color);
}

.header-style-two .header-action > ul li {
  margin-inline-start: 0;
}

.header-style-two .header-action > ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 100%;
  background: #d9d9d9;
}

.header-style-two .header-action > ul li:first-child::before {
  display: none;
}

.header-style-two.sticky-menu .header-top-wrap {
  display: none;
}

.header-style-two.sticky-menu .menu-area {
  box-shadow: none;
}

/* header-three */
.header-action .offcanvas-menu.offcanvas-menu-two a {
  padding: 0 0;
}

.header-style-three .header-action > ul li {
  margin-inline-start: 20px;
}

.header-style-three .header-action > ul li:first-child {
  margin-inline-start: 0;
}

.header-style-three .header-action > ul {
  margin-inline-start: 50px;
}

/* header-four */
.header-style-four .menu-area {
  background: var(--tg-white);
  box-shadow: 0px 2px 50px rgba(0, 0, 0, 0.05);
}

.header-style-five .header-btn .btn {
  text-transform: capitalize;
}

.header-style-six .menu-area {
  background: var(--tg-white);
}

/*=============================
	03. Mobile Menu
===============================*/
.nav-outer .mobile-nav-toggler {
  position: relative;
  float: right;
  font-size: 40px;
  line-height: 50px;
  cursor: pointer;
  display: none;
  color: var(--tg-white);
  margin-inline-end: 30px;
  top: 15px;
}

.nav-logo img {
  max-width: 135px;
}

.mobile-search {
  padding: 0 20px 25px 25px;
}

.mobile-search form {
  position: relative;
}

.mobile-search input {
  display: block;
  width: 100%;
  border: none;
  padding: 10px 45px 10px 20px;
  font-size: 14px;
  font-weight: 500;
  height: 45px;
  background: var(--tg-gray);
  color: var(--tg-secondary-color);
}

.mobile-search input::-moz-placeholder {
  font-size: 14px;
  font-weight: 500;
  color: var(--tg-heading-font-color);
}

.mobile-search input::placeholder {
  font-size: 14px;
  font-weight: 500;
  color: var(--tg-heading-font-color);
}

.mobile-search button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: 0;
  inset-inline-end: 20px;
  line-height: 1;
  background: transparent;
  color: var(--tg-secondary-color);
}

.mobile-menu {
  position: fixed;
  inset-inline-end: 0;
  top: 0;
  width: 320px;
  padding-inline-end: 30px;
  max-width: 100%;
  height: 100%;
  z-index: 99;
  border-radius: 0px;
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -ms-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86) e;
  -o-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transform: translateX(101%);
}

.mobile-menu .navbar-collapse {
  display: block !important;
}

.mobile-menu .nav-logo {
  position: relative;
  padding: 30px 25px;
  text-align: start;
}

.mobile-menu-visible {
  overflow: hidden;
}

.mobile-menu-visible .mobile-menu {
  transform: translateX(0%);
}

.mobile-menu .navigation li.current > a:before {
  height: 100%;
}

.menu-backdrop {
  position: fixed;
  inset-inline-end: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: all 700ms ease;
  -moz-transition: all 700ms ease;
  -webkit-transition: all 700ms ease;
  -ms-transition: all 700ms ease;
  -o-transition: all 700ms ease;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.5);
}

.mobile-menu-visible .menu-backdrop {
  opacity: 1;
  visibility: visible;
}

.mobile-menu .menu-box {
  position: absolute;
  inset-inline-start: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--tg-white);
  padding: 0px 0px;
  z-index: 5;
  box-shadow: -9px 0 14px 0px rgba(0, 0, 0, 0.06);
}

.mobile-menu-visible .mobile-menu .menu-box {
  opacity: 1;
  visibility: visible;
}

.mobile-menu .close-btn {
  position: absolute;
  inset-inline-end: 15px;
  top: 28px;
  line-height: 30px;
  width: 35px;
  text-align: center;
  font-size: 20px;
  color: #292b37;
  cursor: pointer;
  z-index: 10;
  transition: all 0.9s ease;
}

.mobile-menu-visible .mobile-menu .close-btn {
  transform: rotate(360deg);
}

.mobile-menu .navigation {
  position: relative;
  display: block;
  width: 100%;
  float: none;
  margin: 0;
  padding: 0;
}

.mobile-menu .navigation ul {
  padding: 0;
  margin: 0;
}

.mobile-menu .navigation li {
  position: relative;
  display: block;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu .navigation:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu .navigation li > ul > li:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu .navigation li > a {
  position: relative;
  display: block;
  line-height: 24px;
  padding: 10px 60px 10px 25px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tg-heading-font-color);
  text-transform: capitalize;
  transition: all 500ms ease;
  border: none;
}

.mobile-menu .navigation li ul li > a {
  font-size: 16px;
  margin-inline-start: 20px;
  text-transform: capitalize;
}

.mobile-menu .navigation li ul li ul li a {
  margin-inline-start: 40px;
}

.mobile-menu .navigation li ul li ul li ul li a {
  margin-inline-start: 60px;
}

.mobile-menu .navigation li > a:before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 0;
  transition: all 500ms ease;
}

.mobile-menu .navigation li.menu-item-has-children .dropdown-btn {
  position: absolute;
  inset-inline-end: 15px;
  top: 6px;
  width: 32px;
  height: 32px;
  text-align: center;
  font-size: 16px;
  line-height: 32px;
  color: #292b37;
  background: var(--tg-gray);
  cursor: pointer;
  border-radius: 2px;
  transition: all 500ms ease;
  z-index: 5;
}

.mobile-menu .navigation li.menu-item-has-children .dropdown-btn i {
  transition: all 500ms ease;
}

.mobile-menu .navigation li.menu-item-has-children .dropdown-btn.open i {
  transform: rotate(45deg);
  color: var(--tg-primary-color);
}

.mobile-menu .navigation li > ul,
.mobile-menu .navigation li > ul > li > ul {
  display: none;
}

.mobile-menu .social-links ul {
  display: flex;
  position: relative;
  text-align: center;
  padding: 30px 20px 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.mobile-menu .social-links li {
  position: relative;
  display: inline-block;
  margin: 0px 6px 10px;
}

.mobile-menu .social-links li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: relative;
  line-height: 32px;
  font-size: 16px;
  color: var(--tg-heading-font-color);
  transition: all 500ms ease;
  border: 1px solid var(--tg-gray);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

.mobile-menu .social-links li a:hover {
  border-color: var(--tg-primary-color);
  background: var(--tg-primary-color);
  color: var(--tg-white);
}

.menu-area .mobile-nav-toggler {
  position: relative;
  float: right;
  font-size: 27px;
  cursor: pointer;
  line-height: 1;
  color: var(--tg-primary-color);
  display: none;
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 5px 10px;
}

/*=============================
	04. Search
===============================*/
.search-popup-wrap {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  background: rgba(255, 255, 255, 0.9);
  height: 100%;
  width: 100%;
  z-index: 99;
  padding: 100px 0;
  display: none;
}

.search-wrap {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.search-wrap .title {
  font-size: 47px;
  margin: 0 0 70px 0;
  font-weight: 700;
}

.search-form {
  position: relative;
}

.search-form input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--tg-primary-color);
  padding: 10px 50px 20px;
  text-align: center;
  font-weight: 500;
  font-size: 30px;
  background: transparent;
  color: var(--tg-heading-font-color);
}

.search-form input::-moz-placeholder {
  font-size: 30px;
  color: var(--tg-heading-font-color);
  opacity: 0.5;
}

.search-form input::placeholder {
  font-size: 30px;
  color: var(--tg-heading-font-color);
  opacity: 0.5;
}

.search-btn {
  position: absolute;
  inset-inline-end: 20px;
  background: transparent;
  border: 0;
  font-size: 25px;
  color: var(--tg-primary-color);
  top: 50%;
  transform: translateY(-50%);
}

.search-close {
  position: absolute;
  top: 5%;
  inset-inline-end: 5%;
  font-size: 30px;
  color: var(--tg-primary-color);
  cursor: pointer;
}

/*=============================
	05. OffCanvas
===============================*/
.extra-info {
  background: var(--tg-white) none repeat scroll 0 0;
  height: 100%;
  padding: 30px;
  position: fixed;
  inset-inline-end: 0;
  top: 0;
  transition: all 0.7s ease 0s;
  width: 340px;
  z-index: 999;
  overflow-y: scroll;
  transform: translateX(100%);
}

.extra-info.active {
  transform: translateX(0);
}

.close-icon {
  margin-top: -16px;
  text-align: end;
}

.close-icon > button {
  background: transparent;
  border: 0 none;
  color: var(--tg-primary-color);
  cursor: pointer;
  font-size: 20px;
  padding: 0;
}

.extra-info .logo-side img {
  max-width: 151px;
}

.side-info {
  border-top: 1px solid var(--tg-primary-color);
  padding-top: 25px;
}

.contact-list h4 {
  color: var(--tg-heading-font-color);
  font-weight: 700;
  font-size: 18px;
}

.contact-list p {
  color: var(--tg-paragraph-color);
  margin: 0;
  margin-bottom: 2px;
  line-height: 26px;
}

.side-instagram {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}

.side-instagram li {
  width: 33.3333%;
  flex: 0 0 33.3333%;
  padding: 5px;
}

.side-instagram li > a {
  display: block;
}

.side-instagram img {
  width: 100%;
  border-radius: 5px;
}

.social-icon-right > a {
  color: var(--tg-primary-color);
  display: inline-block;
  margin-inline-end: 20px;
  text-align: center;
}

.social-icon-right > a:hover {
  color: var(--tg-secondary-color);
}

.offcanvas-overly {
  position: fixed;
  background: var(--tg-black);
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  width: 100%;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.offcanvas-overly.active {
  opacity: 0.5;
  visibility: visible;
}

/*=============================
	06. Slider
===============================*/
.slider-bg {
  background-size: cover;
  background-position: center;
  min-height: 872px;
  display: flex !important;
  align-items: center;
  padding: 200px 0 120px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
}

.slider-content .sub-title {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  display: block;
  color: var(--tg-primary-color);
  padding-top: 18px;
  margin-bottom: 10px;
}

.slider-content .sub-title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 30px;
  height: 4px;
  border-radius: 4px;
  background: var(--tg-primary-color);
}

.slider-content .title {
  font-weight: 800;
  font-size: 60px;
  margin-bottom: 20px;
  line-height: 1;
}

.slider-content p {
  color: var(--tg-paragraph-color);
  margin-bottom: 45px;
  width: 85%;
}

.slider-shape {
  position: absolute;
  inset-inline-start: 15%;
  bottom: 23%;
  animation: alltuchtopdown 8s infinite linear;
}

/*=============================
	07. Banner
===============================*/
.banner-bg-two {
  background-size: cover;
  background-position: center;
  min-height: 770px;
  display: flex;
  align-items: flex-end;
  padding: 170px 0 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.banner-content-two {
  width: 85%;
}

.banner-content-two .sub-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tg-primary-color);
  background: rgba(var(--primary-color-rgb)/20%);
  border-radius: 50px;
  display: inline-block;
  padding: 4px 13px;
  margin-bottom: 15px;
}

.banner-content-two .title {
  font-weight: 800;
  font-size: 90px;
  margin-bottom: 20px;
  line-height: 1;
}

.banner-content-two p {
  margin-bottom: 30px;
  color: var(--tg-paragraph-color);
}

.banner-content-two .banner-btn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.banner-content-two .banner-btn .play-btn {
  display: flex;
  align-items: center;
  color: var(--tg-secondary-color);
}

.banner-content-two .banner-btn .play-btn span {
  text-decoration: underline;
}

.banner-content-two .banner-btn .play-btn i {
  box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.1);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-white);
  border-radius: 50%;
  color: var(--tg-primary-color);
  font-size: 18px;
  margin-inline-end: 12px;
}

.banner-content-two .banner-btn .play-btn:hover {
  color: var(--tg-primary-color);
}

.banner-shape-wrap img {
  position: absolute;
  z-index: -1;
}

.banner-shape-wrap img:nth-child(1) {
  inset-inline-start: 47%;
  bottom: 47%;
  animation: float-bob-x 4s infinite linear;
}

.banner-shape-wrap img:nth-child(2) {
  inset-inline-end: 45%;
  bottom: 22%;
  animation: alltuchtopdown 8s infinite linear;
}

.banner-shape-wrap img:nth-child(3) {
  inset-inline-end: 26%;
  bottom: 0;
  z-index: -2;
}

@keyframes float-bob-x {
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-30px);
  }
}
/* banner-three */
.banner-area-three {
  padding: 200px 0 60px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #fedc00;
}

.banner-area-three::after,
.banner-area-three::before {
  content: "";
  position: absolute;
  inset-inline-start: 30px;
  top: 60px;
  width: 550px;
  height: 550px;
  background: #cef0ff;
  opacity: 0.3;
  filter: blur(75px);
  border-radius: 50%;
  z-index: -3;
}

.banner-area-three::after {
  background: #e4ceff;
  top: -105px;
  inset-inline-start: auto;
  inset-inline-end: 30%;
}

.banner-content-three {
  margin-top: 60px;
}

.banner-content-three .title {
  font-weight: 800;
  font-size: 60px;
  margin-bottom: 25px;
  line-height: 1.06;
}

.banner-content-three p {
  margin-bottom: 15px;
  color: var(--tg-paragraph-color);
}

.banner-content-three .banner-form {
  position: relative;
  width: 93%;
}

.banner-content-three .banner-form input {
  width: 100%;
  border: 1px solid #d7dff0;
  border-radius: 30px;
  background: var(--tg-white);
  font-size: 16px;
  font-weight: 400;
  color: var(--tg-secondary-color);
  padding: 16px 70px 16px 28px;
  height: 60px;
}

.banner-content-three .banner-form input::-moz-placeholder {
  font-size: 16px;
  color: var(--tg-paragraph-color);
  font-weight: 400;
}

.banner-content-three .banner-form input::placeholder {
  font-size: 16px;
  color: var(--tg-paragraph-color);
  font-weight: 400;
}

.banner-content-three .banner-form button {
  position: absolute;
  top: 4px;
  bottom: 4px;
  inset-inline-end: 5px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-primary-color);
  color: var(--tg-white);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  line-height: 0;
}

.banner-content-three .banner-form button:hover {
  background: var(--tg-secondary-color);
}

.ball {
  opacity: 0;
  z-index: -2;
  position: absolute;
  border-radius: 50%;
}

.banner-img-three {
  position: relative;
  text-align: end;
  padding-inline-end: 80px;
}

.banner-img-three img.main-img {
  -webkit-clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
          clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
  border-radius: 5px;
  max-width: 80%;
}

.banner-img-three img:not(.main-img) {
  position: absolute;
}

.banner-img-three img.img-two {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  inset-inline-start: 6%;
  bottom: 24%;
}

.banner-img-three img.img-three {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  inset-inline-end: -4%;
  top: 21%;
}

.banner-shape-wrap-three img {
  position: absolute;
  z-index: -1;
}

.banner-shape-wrap-three img:nth-child(1) {
  inset-inline-end: 47.5%;
  bottom: 41%;
  animation: ribbonRotate 6s infinite linear;
}

.banner-shape-wrap-three img:nth-child(2) {
  inset-inline-end: 18%;
  bottom: 3%;
  animation: alltuchtopdown 8s infinite linear;
}

@keyframes ribbonRotate {
  0%, 100% {
    transform: rotate(0);
  }
  25%, 75% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(30deg);
  }
}
/* banner-four */
.banner-bg-four {
  background-size: cover;
  background-position: center;
  padding: 65px 0 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.banner-content-four {
  margin-top: 105px;
}

.banner-content-four .sub-title {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-block;
  background: rgba(var(--primary-color-rgb)/20%);
  color: var(--tg-primary-color);
  border-radius: 30px;
  padding: 4px 13px;
  margin-bottom: 20px;
}

.banner-content-four .title {
  margin-bottom: 15px;
  font-weight: 800;
  font-size: 90px;
  line-height: 1.1;
}

.banner-content-four p {
  margin-bottom: 35px;
  color: var(--tg-paragraph-color);
  width: 90%;
}

.banner-shape-wrap-four img {
  position: absolute;
  z-index: -1;
}

.banner-shape-wrap-four img:nth-child(1) {
  inset-inline-start: 15%;
  bottom: 25%;
  animation: alltuchtopdown 8s infinite linear;
}

.banner-shape-wrap-four img:nth-child(2) {
  inset-inline-end: 46%;
  bottom: 39%;
}

.banner-shape-wrap-four img:nth-child(3) {
  inset-inline-end: 15%;
  top: 0;
}

/* banner-five */
.banner-area-five {
  position: relative;
  background: #f2f7ff;
  padding: 140px 0 100px;
  z-index: 1;
  overflow: hidden;
}

.banner-area-five::before {
  content: "";
  position: absolute;
  inset-inline-start: 17%;
  top: -100px;
  width: 460px;
  height: 460px;
  background: #fbedff;
  filter: blur(200px);
  z-index: -1;
}

.banner-area-five::after {
  content: "";
  position: absolute;
  inset-inline-end: -10%;
  top: -15%;
  width: 1100px;
  height: 600px;
  background: linear-gradient(88.44deg, #e0faf3 0.58%, rgba(239, 247, 255, 0) 67.54%);
  border-radius: 326.687px;
  transform: rotate(-42.01deg);
  z-index: -1;
}

.banner-content-five .title {
  margin-bottom: 20px;
  font-weight: 800;
  font-size: 90px;
}

.banner-content-five .title span {
  position: relative;
  z-index: 1;
}

.banner-content-five .title span svg {
  position: absolute;
  width: 100%;
  inset-inline-start: 0;
  bottom: -4px;
  z-index: -1;
}

.has-animation.active-animation .banner-content-five .title span svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash_animation 10s linear forwards;
}
@keyframes dash_animation {
  to {
    stroke-dashoffset: 0;
  }
}
.banner-content-five p {
  margin-bottom: 25px;
  color: var(--tg-black);
}

.banner-img-five {
  position: relative;
  margin-inline-start: 90px;
  z-index: 1;
}

.banner-img-five img:not(.main-img) {
  position: absolute;
}

.banner-img-five .main-img {
  max-width: unset;
}

.banner-img-five .shape-one {
  inset-inline-end: -19%;
  bottom: 12%;
}

.banner-img-five .shape-two {
  inset-inline-start: 35%;
  top: 38%;
  animation: float-bob-x 4s infinite linear;
}

.banner-img-five .shape-three {
  inset-inline-end: 5%;
  top: 23%;
  animation: alltuchtopdown 8s infinite linear;
}

/*=============================
	08. Breadcrumb
===============================*/
.breadcrumb-bg {
  background-size: cover;
  background-position: center;
  padding: 120px 0 130px;
  position: relative;
  z-index: 1;
}

.breadcrumb-bg::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #03091b;
  opacity: 0.85;
  z-index: -1;
}

.breadcrumb-shape-wrap img {
  position: absolute;
  z-index: -1;
}

.breadcrumb-shape-wrap img:nth-child(1) {
  inset-inline-start: 0;
  top: 0;
}

.breadcrumb-shape-wrap img:nth-child(2) {
  inset-inline-end: 10%;
  top: 0;
}

.breadcrumb-content {
  text-align: center;
}

.breadcrumb-content .title {
  margin-bottom: 12px;
  color: var(--tg-white);
  font-size: 40px;
  line-height: 1.1;
  text-transform: capitalize;
}

.breadcrumb-content .breadcrumb {
  justify-content: center;
  margin-bottom: 0;
}

.breadcrumb-content .breadcrumb-item {
  color: var(--tg-primary-color);
  font-weight: 500;
  font-size: 14px;
  text-transform: capitalize;
}

.breadcrumb-content .breadcrumb-item a {
  color: #9fa9be;
}

.breadcrumb-content .breadcrumb-item a:hover {
  color: var(--tg-primary-color);
}

.breadcrumb-content .breadcrumb-item + .breadcrumb-item::before {
  padding-inline-end: 10px;
  color: #9fa9be;
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  margin-top: 7px;
}

.breadcrumb-content .breadcrumb-item + .breadcrumb-item {
  padding-inline-start: 10px;
}

/*=============================
	09. About
===============================*/
.about-bg {
  background-size: cover;
  background-position: center;
  padding: 140px 0 200px;
}

.about-img-wrap {
  position: relative;
  text-align: center;
  z-index: 1;
  padding-bottom: 15px;
  margin-top: 16px;
}

.about-img-wrap img:not(.main-img) {
  position: absolute;
  z-index: -1;
}

.about-img-wrap img:nth-child(2) {
  inset-inline-start: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.about-img-wrap img.main-img {
  border-radius: 50%;
  width: 314px;
  -o-object-fit: cover;
     object-fit: cover;
  height: 314px;
  border: 5px solid var(--tg-white);
}

.about-img-wrap img:nth-child(3) {
  inset-inline-end: 19%;
  top: -10%;
  animation: alltuchtopdown 8s infinite linear;
}

.about-content {
  width: 88%;
}

.section-title .sub-title {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--tg-primary-color);
  position: relative;
  padding-top: 18px;
  margin-bottom: 10px;
}

.section-title .sub-title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 30px;
  height: 4px;
  background: var(--tg-primary-color);
  border-radius: 4px;
}

.section-title .title {
  font-size: 40px;
  margin-bottom: 0;
}

.about-content p {
  margin-bottom: 0;
  color: var(--tg-paragraph-color);
}

/* about-two */
.about-area-two {
  position: relative;
}

.about-area-two::before {
  content: "";
  position: absolute;
  inset-inline-start: 13%;
  top: 0;
  width: 630px;
  height: 630px;
  background: linear-gradient(154.68deg, #8894ff 11.62%, #ff8585 90.47%);
  opacity: 0.1;
  filter: blur(75px);
  z-index: -1;
}

.about-content-two p {
  margin-bottom: 20px;
  color: var(--tg-paragraph-color);
}

.about-list .list-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 0;
  margin-bottom: 30px;
}

.about-list .list-wrap li {
  font-family: var(--tg-heading-font-family);
  color: var(--tg-paragraph-color);
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  width: 50%;
  line-height: 1.3;
  display: flex;
  align-items: flex-start;
}

.about-list .list-wrap li img {
  margin-inline-end: 10px;
}

.success-wrap .list-wrap {
  display: flex;
  align-items: center;
  border-top: 1px solid #d9d9d9;
  padding-top: 30px;
  margin-bottom: 40px;
}

.success-wrap .list-wrap li {
  width: 50%;
}

.success-wrap .list-wrap li .count {
  font-weight: 800;
  font-size: 36px;
  margin-bottom: 8px;
  letter-spacing: 2px;
  line-height: 0.8;
}

.success-wrap .list-wrap li p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1;
}

.about-content-two .btn {
  background: transparent;
  border-color: var(--tg-primary-color);
  color: var(--tg-primary-color);
}

.about-content-two .btn::after {
  color: var(--tg-white);
}

.about-content-two .btn:hover {
  color: var(--tg-white);
}

.about-img-two {
  position: relative;
  padding-inline-start: 218px;
}

.about-img-two .main-img {
  position: relative;
  text-align: end;
}

.about-img-two .main-img img {
  border-radius: 15px;
  border: 9px solid var(--tg-white);
  box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.2);
}

.about-img-two .main-img .play-btn {
  position: absolute;
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 85, 255, 0.8);
  border-radius: 50%;
  box-shadow: -8px -1px 10px rgba(255, 255, 255, 0.1);
  color: var(--tg-white);
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
}

.about-img-two .main-img .play-btn::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid var(--tg-white);
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
  animation: pulse-border 1500ms ease-out infinite;
}

.about-img-two img:nth-child(2) {
  border: 9px solid #ffffff;
  box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  transform: rotate(-2.71deg);
  position: absolute;
  inset-inline-start: 40px;
  bottom: 70px;
}

.about-shape-wrap img {
  position: absolute;
  z-index: -1;
}

.about-shape-wrap img:nth-child(1) {
  inset-inline-end: 41%;
  top: 13%;
  animation: alltuchtopdown 8s infinite linear;
}

.about-shape-wrap img:nth-child(2) {
  inset-inline-end: 0;
  bottom: 0;
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
@keyframes alltuchtopdown {
  0% {
    transform: rotateX(0deg) translateY(0px);
  }
  50% {
    transform: rotateX(0deg) translateY(-50px);
  }
  100% {
    transform: rotateX(0deg) translateY(0px);
  }
}
/* about-three */
.about-area-three {
  position: relative;
  padding: 80px 0;
}

.about-img-wrap-three {
  position: relative;
  text-align: center;
  padding-bottom: 90px;
}

.about-img-wrap-three img:nth-child(1) {
  border-radius: 100px 0 0 0;
}

.about-img-wrap-three img:nth-child(2) {
  border-radius: 0 50px 0 0;
  border: 8px solid var(--tg-white);
  position: absolute;
  inset-inline-end: 0;
  bottom: 25px;
  z-index: 2;
}

.about-img-wrap-three .experience-wrap {
  width: 506px;
  display: flex;
  align-items: center;
  text-align: start;
  background: var(--tg-primary-color);
  border-radius: 0px 0px 0px 60px;
  padding: 40px 195px 50px 45px;
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
}

.about-img-wrap-three .experience-wrap .title {
  margin-bottom: 0;
  text-align: center;
  font-size: 64px;
  line-height: 0.8;
  color: var(--tg-white);
  position: relative;
  padding-inline-end: 13px;
  margin-inline-end: 13px;
}

.about-img-wrap-three .experience-wrap .title span {
  display: block;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.1em;
  margin-top: 5px;
}

.about-img-wrap-three .experience-wrap .title::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 100%;
  background: var(--tg-white);
}

.about-img-wrap-three .experience-wrap p {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 0;
  color: var(--tg-white);
  line-height: 1.4;
  font-family: var(--tg-heading-font-family);
}

.section-title-two span {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  color: var(--tg-primary-color);
  background: rgba(var(--primary-color-rgb)/20%);
  border-radius: 50px;
  padding: 4px 13px;
  margin-bottom: 12px;
}

.section-title-two .title {
  font-weight: 800;
  font-size: 40px;
  margin-bottom: 0;
}

.about-content-three p {
  margin-bottom: 0;
  color: var(--tg-paragraph-color);
  width: 90%;
}

.about-content-three p.info-one {
  margin-bottom: 25px;
}

.about-list-two .list-wrap {
  margin-bottom: 20px;
}

.about-list-two .list-wrap li {
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: baseline;
  text-transform: capitalize;
  color: var(--tg-secondary-color);
  margin-bottom: 14px;
}

.about-list-two .list-wrap li:last-child {
  margin-bottom: 0;
}

.about-list-two .list-wrap li i {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-primary-color);
  color: var(--tg-white);
  border-radius: 50%;
  font-size: 12px;
  margin-inline-end: 8px;
  flex: 0 0 auto;
}

.about-author-info {
  display: flex;
  align-items: center;
  margin-top: 35px;
}

.about-author-info .thumb {
  border-radius: 50%;
  border: 3px solid var(--tg-white);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
  width: 70px;
  flex: 0 0 auto;
  margin-inline-end: 15px;
}

.about-author-info .content .title {
  font-size: 20px;
  margin-bottom: 5px;
}

.about-author-info .content span {
  font-weight: 500;
  font-size: 14px;
  display: block;
  line-height: 1;
}

.about-author-info .signature {
  margin-inline-start: 20px;
}

.about-shape-wrap-two img {
  position: absolute;
  z-index: -1;
}

.about-shape-wrap-two img:nth-child(1) {
  inset-inline-start: 15%;
  bottom: 27%;
  animation: alltuchtopdown 8s infinite linear;
}

.about-shape-wrap-two img:nth-child(2) {
  inset-inline-start: 40%;
  top: 5%;
}

.about-shape-wrap-two img:nth-child(3) {
  right: 0;
  bottom: 0;
}

/* about-four */
.about-content-four > p {
  color: var(--tg-paragraph-color);
  margin-bottom: 35px;
}

.about-list-three .list-wrap li {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  padding-inline-start: 13px;
}

.about-list-three .list-wrap li:last-child {
  margin-bottom: 0;
}

.about-list-three .list-wrap li .icon {
  position: relative;
  font-size: 50px;
  line-height: 0;
  color: var(--tg-primary-color);
  margin-inline-end: 15px;
}

.about-list-three .list-wrap li .icon::before {
  content: "";
  position: absolute;
  inset-inline-start: -13px;
  top: -15px;
  width: 46px;
  height: 46px;
  background: rgba(var(--primary-color-rgb)/20%);
  border-radius: 50%;
  z-index: -1;
}

.about-list-three .list-wrap li .icon i {
  transform: rotateY(0);
  transition: 0.3s linear;
  display: block;
}

.about-list-three .list-wrap li:hover .icon i {
  transform: rotateY(180deg);
}

.about-list-three .content .title {
  font-size: 20px;
  margin-bottom: 10px;
}

.about-list-three .content p {
  margin-bottom: 0;
  width: 75%;
  color: var(--tg-paragraph-color);
}

.about-img-wrap-four {
  position: relative;
  margin-inline-end: -30px;
}

.mask-img-wrap {
  -webkit-mask-image: url(../img/images/mask_img.png);
  mask-image: url(../img/images/mask_img.png);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: -1;
  height: 558px;
  width: 633px;
  margin-inline-start: auto;
}

.mask-img-wrap img {
  max-width: unset;
}

.about-img-wrap-four .img-two {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  position: absolute;
  inset-inline-start: 10%;
  bottom: 14%;
}

.about-shape-wrap-three img {
  position: absolute;
  z-index: -1;
}

.about-shape-wrap-three img:nth-child(1) {
  inset-inline-start: 0;
  top: 6%;
  animation: ribbonRotate 15s infinite linear;
}

.about-shape-wrap-three img:nth-child(2) {
  inset-inline-start: 4%;
  bottom: 7%;
  animation: alltuchtopdown 8s infinite linear;
}

.about-shape-wrap-three img:nth-child(3) {
  inset-inline-end: 23%;
  top: -2%;
  animation: rotateme 8s infinite linear;
}

.about-img-wrap-four .icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset-inline-start: 8%;
  top: 21%;
  border-radius: 50%;
  background: var(--tg-pink);
  border: 5px solid var(--tg-white);
  color: var(--tg-white);
  font-size: 50px;
  line-height: 0;
}

@keyframes rotateme {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* about-five */
.about-area-five {
  position: relative;
  padding: 120px 0;
}

.about-img-wrap-five {
  position: relative;
  padding-bottom: 30px;
}

.about-img-wrap-five::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  height: 40px;
  width: 380px;
  background: var(--tg-primary-color);
  z-index: -1;
}

.about-img-wrap-five img:nth-child(1) {
  -webkit-clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 0% 100%, 0 100%);
          clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 0% 100%, 0 100%);
}

.about-img-wrap-five img:nth-child(2) {
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  position: absolute;
  inset-inline-start: -25%;
  top: 14%;
}

.about-img-wrap-five .experience-wrap {
  background: var(--tg-primary-color);
  max-width: 200px;
  padding: 36px 20px;
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
}

.about-img-wrap-five .experience-wrap .title {
  margin-bottom: 0;
  color: var(--tg-white);
  font-size: 60px;
  text-align: center;
  line-height: 1;
}

.about-img-wrap-five .experience-wrap .title span {
  display: block;
  font-weight: 500;
  font-size: 24px;
}

.about-content-five > p {
  margin-bottom: 50px;
  color: var(--tg-paragraph-color);
  width: 85%;
}

.about-content-five {
  margin-inline-start: 55px;
  width: 85%;
}

.about-content-five .about-list {
  width: 60%;
  flex: 0 0 auto;
}

.about-content-five .about-list .list-wrap {
  gap: 25px 0;
  margin-bottom: 0;
}

.about-content-five .about-list .list-wrap li {
  color: var(--tg-secondary-color);
  width: 100%;
}

.about-content-five .about-list .list-wrap li i {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-primary-color);
  color: var(--tg-white);
  border-radius: 50%;
  font-size: 12px;
  margin-inline-end: 8px;
  flex: 0 0 auto;
}

.about-content-five .about-content-bottom {
  display: flex;
  align-items: center;
}

.about-success-wrap .list-wrap li {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.about-success-wrap .list-wrap li:last-child {
  margin-bottom: 0;
}

.about-success-wrap .list-wrap li .icon {
  font-size: 60px;
  line-height: 0;
  color: var(--tg-primary-color);
  flex: 0 0 auto;
  margin-inline-end: 20px;
}

.about-success-wrap .list-wrap li .content .count {
  font-weight: 800;
  font-size: 50px;
  line-height: 0.8;
  margin-bottom: 5px;
}

.about-success-wrap .list-wrap li .content p {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 0;
  color: var(--tg-secondary-color);
  font-family: var(--tg-heading-font-family);
  line-height: 1;
}

.about-shape-five img {
  position: absolute;
  inset-inline-start: 41%;
  bottom: 35%;
  z-index: -1;
  animation: alltuchtopdown 8s infinite linear;
}

/* about-six */
.about-area-six {
  padding: 0 0 120px;
  position: relative;
  overflow: hidden;
}

.about-area-six::before {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  background: #fae7ff;
  filter: blur(200px);
  inset-inline-end: 26%;
  top: 16%;
  z-index: -1;
}

.about-img-six {
  margin-inline-start: -75px;
  position: relative;
  max-width: 100%;
}

.about-img-six img:nth-child(1) {
  max-width: 100%;
  position: unset;
}

.about-img-six img {
  position: absolute;
  z-index: -1;
}

.about-img-six img:nth-child(2) {
  inset-inline-start: 0;
  bottom: -40px;
}

.about-img-six img:nth-child(3) {
  inset-inline-start: 19%;
  top: 14%;
  animation: alltuchtopdown 8s infinite linear;
}

.about-content-six {
  width: 88%;
}

.about-content-six .title {
  color: #ffffff;
}

.about-content-six .sub-title {
  color: #ffffff;
}

.about-content-six p {
  margin-bottom: 30px;
  color: #ffffff;
}

.about-content-six .about-list .list-wrap {
  margin-bottom: 45px;
}

.about-content-six .about-list .list-wrap li {
  color: var(--tg-secondary-color);
}

.about-content-six .about-list .list-wrap li i {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-primary-color);
  color: var(--tg-white);
  border-radius: 50%;
  font-size: 12px;
  margin-inline-end: 8px;
  flex: 0 0 auto;
}

/* about-seven */
.about-content-seven {
  width: 88%;
}

.about-content-seven > p {
  margin-bottom: 25px;
}

.success-wrap-two {
  margin-bottom: 25px;
}

.success-wrap-two .list-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.success-wrap-two .list-wrap li {
  background: rgba(var(--primary-color-rgb)/20%);
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 30px 25px;
  min-width: 240px;
  transition: 0.3s;
}

.success-wrap-two .list-wrap li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 28px;
  border-radius: 3px;
  background: var(--tg-primary-color);
}

.success-wrap-two .list-wrap li:hover {
  transform: translateY(-5px);
}

.success-wrap-two .list-wrap li .icon {
  font-size: 50px;
  flex: 0 0 auto;
  line-height: 0;
  color: var(--tg-primary-color);
  margin-inline-end: 18px;
}

.success-wrap-two .list-wrap li .content .count {
  font-weight: 800;
  font-size: 36px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  line-height: 0.8;
}

.success-wrap-two .list-wrap li .content p {
  margin-bottom: 0;
  line-height: 1;
}

.about-img-seven-wrap {
  position: relative;
  padding-bottom: 90px;
}

.about-img-seven-wrap img:nth-child(1) {
  border-radius: 10px;
}

.about-img-seven-wrap img:nth-child(2) {
  position: absolute;
  inset-inline-end: 50px;
  bottom: 0;
  border: 8px solid var(--tg-white);
  border-radius: 10px;
  z-index: 3;
}

.about-img-seven-wrap .shape {
  position: absolute;
  inset-inline-start: 33%;
  bottom: -8%;
  z-index: -1;
  animation: alltuchtopdown 8s infinite linear;
}

.about-img-seven-wrap .experience-wrap {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  border: 8px solid #ffffff;
  border-radius: 19px 63px 24px 0px;
  max-width: 197px;
  min-height: 384px;
  background: var(--tg-primary-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 20px;
  text-align: center;
}

.about-img-seven-wrap .experience-wrap .title {
  color: var(--tg-white);
  margin-bottom: 10px;
  font-size: 60px;
  line-height: 0.8;
}

.about-img-seven-wrap .experience-wrap p {
  margin-bottom: 0;
  color: var(--tg-white);
  font-family: var(--tg-heading-font-family);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

/* about-eight */
.about-img-eight img {
  border-radius: 15px;
}

.about-content-eight > p {
  margin-bottom: 35px;
}

.about-content-eight .about-content-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.about-content-eight .about-content-inner .list-wrap {
  width: 58%;
}

.about-content-eight .about-content-inner .list-wrap li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 50px;
}

.about-content-eight .about-content-inner .list-wrap li:last-child {
  margin-bottom: 0;
}

.about-content-eight .about-content-inner .list-wrap li .icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--primary-color-rgb)/20%);
  color: var(--tg-primary-color);
  font-size: 40px;
  line-height: 0;
  position: relative;
  border-radius: 15px;
  flex: 0 0 auto;
  margin-inline-end: 20px;
}

.about-content-eight .about-content-inner .list-wrap li .icon::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  background: var(--tg-primary-color);
  border-radius: 3px;
}

.about-content-eight .about-content-inner .content .title {
  font-size: 20px;
  margin-bottom: 8px;
}

.about-content-eight .about-content-inner .content p {
  margin-bottom: 0;
}

.about-content-eight .right-slide-img {
  margin-inline-start: auto;
}

.about-content-eight .right-slide-img img {
  border-radius: 10px;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}

.about-content-eight .about-content-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px 40px;
}

.about-content-eight .about-content-bottom .about-author-info {
  margin-top: 0;
}

/* about-ten */
.about-area-ten {
  padding: 120px 0;
  position: relative;
}

.about-img-wrap-ten {
  padding-inline-start: 120px;
}

.about-img-wrap-ten img:nth-child(2) {
  inset-inline-start: 0;
}

.about-area-ten .about-shape-five img {
  inset-inline-start: 46%;
}

.about-content-five.about-content-ten {
  margin-inline-start: 80px;
  width: auto;
  margin-inline-end: 30px;
}

.about-content-ten .about-success-wrap .list-wrap {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 45px;
}

.about-content-ten .about-success-wrap .list-wrap li {
  margin-bottom: 0;
}

.about-content-five.about-content-ten > p {
  margin-bottom: 20px;
  width: 100%;
}

/* about-eleven */
.about-area-eleven {
  position: relative;
  padding: 120px 0 0;
}

.about-area-eleven::before {
  content: "";
  position: absolute;
  inset-inline-start: 20%;
  top: 32%;
  width: 300px;
  height: 300px;
  background: #fae7ff;
  filter: blur(200px);
  z-index: -1;
}

.about-content-eleven {
  width: 85%;
}

.about-content-eleven p {
  margin-bottom: 25px;
}

.about-content-eleven .about-list-two .list-wrap {
  margin-bottom: 40px;
}

.about-img-wrap-eleven {
  position: relative;
  text-align: center;
  padding-bottom: 30px;
}

.about-img-wrap-eleven .shape-one {
  position: absolute;
  inset-inline-start: -5%;
  top: -2%;
  z-index: -1;
  animation: alltuchtopdown 8s infinite linear;
}

.about-img-wrap-eleven .shape-two {
  position: absolute;
  inset-inline-start: -20px;
  bottom: 0;
  z-index: -2;
  max-width: unset;
}

/* about-twelve */
.about-area-twelve {
  padding: 140px 0 140px;
}

.about-img-six.about-img-twelve img:nth-child(2) {
  bottom: -50px;
}

/*=============================
	10. Overview
===============================*/
.overview-area {
  position: relative;
  overflow: hidden;
}

.overview-area::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  opacity: 0.2;
  filter: blur(75px);
  border-radius: 50%;
  background: #d5ceff;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.overview-shape {
  right: 0;
  top: 0;
  width: 424px;
  height: 342px;
  position: absolute;
  z-index: -1;
}

.overview-img-wrap {
  text-align: center;
  position: relative;
}

.overview-img-wrap img:nth-child(1) {
  border-radius: 280px;
}

.overview-img-wrap img:nth-child(2) {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  position: absolute;
  inset-inline-start: 0;
  bottom: 30px;
}

.overview-img-wrap img:nth-child(3) {
  position: absolute;
  inset-inline-start: -50px;
  bottom: 32%;
  z-index: -1;
  animation: alltuchtopdown 8s infinite linear;
}

.overview-img-wrap .icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-primary-color);
  position: absolute;
  inset-inline-end: 90px;
  top: 20px;
  border-radius: 50%;
  font-size: 50px;
  line-height: 0;
  color: var(--tg-white);
  border: 5px solid var(--tg-white);
}

.overview-content {
  width: 90%;
}

.overview-content > p {
  margin-bottom: 0;
  color: var(--tg-paragraph-color);
}

.overview-content .info-one {
  margin-bottom: 15px;
}

.overview-content .info-two {
  margin-bottom: 30px;
}

.overview-content .content-bottom .list-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.overview-content .content-bottom .list-wrap li {
  border: 1.2px solid #d4dced;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 28px 20px 28px 30px;
  min-width: 256px;
}

.overview-content .content-bottom .list-wrap li .icon {
  font-size: 50px;
  line-height: 0;
  color: var(--tg-primary-color);
  position: relative;
  margin-inline-end: 40px;
}

.overview-content .content-bottom .list-wrap li .icon::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(var(--primary-color-rgb)/20%);
  inset-inline-start: -10px;
  top: -12px;
  border-radius: 50%;
  z-index: -1;
}

.overview-content .content-bottom .list-wrap li .icon::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 38px;
  background: rgba(var(--primary-color-rgb)/20%);
  inset-inline-end: -20px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  z-index: -1;
}

.overview-content .content-bottom .list-wrap li .content .count {
  font-size: 36px;
  margin-bottom: 3px;
  line-height: 0.8;
  display: flex;
  align-items: center;
}

.overview-content .content-bottom .list-wrap li .content p {
  margin-bottom: 0;
}

/* overview-two */
.overview-area-two {
  position: relative;
  padding: 0 0 120px;
}

.overview-area-two::before {
  content: "";
  position: absolute;
  inset-inline-start: 114px;
  top: 0;
  width: 600px;
  height: 600px;
  background: #d5ceff;
  opacity: 0.2;
  filter: blur(75px);
  z-index: -1;
}

.overview-img-two {
  position: relative;
}

.mask-img-two {
  -webkit-mask-image: url(../img/images/mask_img02.png);
  mask-image: url(../img/images/mask_img02.png);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: -1;
  height: 534px;
  width: 556px;
}

.mask-img-two img {
  max-width: unset;
}

.overview-img-two .img-two {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  position: absolute;
  inset-inline-start: -13%;
  bottom: 21%;
}

.overview-shape-wrap img {
  position: absolute;
  z-index: -1;
}

.overview-shape-wrap img:nth-child(1) {
  inset-inline-end: 7%;
  top: 15%;
  animation: float-bob-x 4s infinite linear;
}

.overview-shape-wrap img:nth-child(2) {
  inset-inline-end: 6%;
  top: 25%;
}

.overview-content-two {
  margin-inline-start: 45px;
}

.overview-content-two p {
  margin-bottom: 30px;
  color: var(--tg-paragraph-color);
}

/*=============================
	11. Features
===============================*/
.features-area {
  margin-top: -100px;
  position: relative;
  z-index: 1;
}

.features-item {
  border: 1px solid var(--tg-steel-blue);
  border-radius: 10px;
  padding: 35px 50px;
  margin-bottom: 40px;
  background: var(--tg-white);
  position: relative;
}

.features-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  inset-inline-end: 5px;
  bottom: -5px;
  background: var(--tg-gray);
  border: 1px solid var(--tg-steel-blue);
  border-radius: 8px;
  height: 70px;
  z-index: -1;
  transition: 0.3s ease-in;
}

.features-item::after {
  content: "";
  position: absolute;
  inset-inline-start: 12px;
  inset-inline-end: 12px;
  bottom: -10px;
  background: #dfe5f0;
  border: 1px solid var(--tg-steel-blue);
  border-radius: 8px;
  height: 70px;
  z-index: -2;
  transition: 0.3s ease-in;
}

.features-item:hover::after,
.features-item:hover::before {
  bottom: 3px;
}

.features-content .content-top {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.features-content .content-top .icon {
  font-size: 50px;
  line-height: 0;
  position: relative;
  color: var(--tg-primary-color);
  z-index: 1;
  margin-inline-end: 15px;
}

.features-content .content-top .icon::before {
  content: "";
  position: absolute;
  inset-inline-start: -13px;
  top: -15px;
  width: 46px;
  height: 46px;
  background: rgba(var(--primary-color-rgb)/20%);
  z-index: -1;
  border-radius: 50%;
  transition: 0.3s ease-in;
}

.features-item:hover .features-content .content-top .icon::before {
  inset-inline-start: 0;
  top: 0;
}

.features-content .content-top .title {
  font-size: 22px;
  margin-bottom: 0;
}

.features-content p {
  margin-bottom: 0;
  color: var(--tg-gray-four);
}

/* features-two */
.features-item-wrap {
  border-bottom: 1px solid var(--tg-lavender);
  padding-bottom: 50px;
}

.features-item-two {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.features-icon-three,
.features-icon-two {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(var(--primary-color-rgb)/20%);
  flex: 0 0 auto;
  color: var(--tg-primary-color);
  font-size: 40px;
  line-height: 0;
  position: relative;
  margin-inline-end: 20px;
}

.features-icon-three::before,
.features-icon-two::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--tg-primary-color);
  top: 0;
  width: 16px;
  height: 3px;
  border-radius: 3px;
}

.features-icon-two i {
  transform: rotateY(0);
  transition: 0.3s linear;
}

.features-item-two:hover .features-icon-two i {
  transform: rotateY(180deg);
}

.features-content-two .title {
  font-size: 20px;
  margin-bottom: 10px;
}

.features-content-two p {
  margin-bottom: 0;
  color: var(--tg-paragraph-color);
  width: 80%;
}

/* features-three */
.features-area-three {
  position: relative;
  padding: 120px 0 90px;
  overflow: hidden;
}

.features-area-three::before {
  content: "";
  position: absolute;
  inset-inline-start: -127px;
  top: 90px;
  width: 530px;
  height: 530px;
  background: #cc3de3;
  opacity: 0.05;
  filter: blur(75px);
  border-radius: 50%;
  z-index: -1;
}

.features-area-three::after {
  content: "";
  position: absolute;
  inset-inline-end: -120px;
  top: 80px;
  width: 530px;
  height: 530px;
  background: #5e3de3;
  opacity: 0.05;
  filter: blur(75px);
  z-index: -1;
}

.features-item-three {
  background: var(--tg-white);
  border: 1px solid var(--tg-border-color);
  border-radius: 10px;
  padding: 30px 30px 35px;
  position: relative;
  transition: 0.3s linear;
  z-index: 1;
  margin-bottom: 30px;
}

.features-item-three:hover {
  background: var(--tg-primary-color);
  border-color: var(--tg-primary-color);
  box-shadow: 0px 20px 50px rgba(3, 74, 218, 0.29);
}

.features-item-three .features-icon-three {
  margin-inline-end: 0;
  margin-bottom: 25px;
  transition: 0.3s;
  width: 65px;
  height: 65px;
}

.features-item-three:hover .features-icon-three {
  background: var(--tg-white);
}

.features-content-three .title {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px;
  transition: 0.3s;
}

.features-content-three p {
  margin-bottom: 17px;
  color: var(--tg-paragraph-color);
  transition: 0.3s;
}

.features-item-three:hover .features-content-three p,
.features-item-three:hover .features-content-three .title {
  color: var(--tg-white);
}

.features-content-three .link-btn {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--tg-paragraph-color);
}

.features-content-three .link-btn img {
  margin-inline-start: 10px;
  transition: 0.3s;
}

.features-item-three:hover .features-content-three .link-btn {
  color: var(--tg-white);
}

.features-item-three:hover .features-content-three .link-btn img {
  filter: brightness(0) invert(1);
}

.features-item-wrap-two .row [class*=col-]:nth-child(even) .features-item-three {
  margin-top: 20px;
}

/* features-four */
.features-item-wrap-four {
  background: var(--tg-white);
  box-shadow: 0px 4px 50px rgba(233, 233, 243, 0.5);
  border-radius: 10px;
  padding: 65px 50px 30px;
  margin-top: -90px;
  position: relative;
  z-index: 1;
}

.features-item-four {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.features-icon-four {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-inline-end: 20px;
  color: var(--tg-primary-color);
  font-size: 40px;
  position: relative;
  line-height: 0;
  border-radius: 14px;
  background: rgba(var(--primary-color-rgb)/20%);
}

.features-icon-four::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: var(--tg-primary-color);
  border-radius: 2px;
}

.features-icon-four i {
  transition: 0.3s linear;
  transform: rotateY(0);
}

.features-item-four:hover .features-icon-four i {
  transform: rotateY(180deg);
}

.features-content-four .title {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 10px;
}

.features-content-four p {
  margin-bottom: 0;
  color: var(--tg-paragraph-color);
}

/* features-five */
.features-bg {
  background-size: cover;
  background-position: center;
  padding: 120px 0 80px;
  z-index: 1;
  position: relative;
  overflow: hidden;
}

.features-shape-wrap img {
  position: absolute;
  z-index: -1;
}

.features-shape-wrap img:nth-child(1) {
  inset-inline-end: 9%;
  top: 10%;
  animation: float-bob-x 4s infinite linear;
}

.features-shape-wrap img:nth-child(2) {
  inset-inline-start: 8%;
  bottom: 10%;
  animation: animationFramesOne 18s linear infinite;
}

/* features-six */
.features-item-wrap-six {
  margin-top: 0;
  border: 1px solid #e7eaf1;
  z-index: 3;
  position: relative;
}

/* features-seven */
.features-area-seven {
  background: var(--tg-section-background);
  padding: 230px 0 120px;
  margin-top: -110px;
  position: relative;
  z-index: 1;
}

.features-area-seven::before {
  content: "";
  position: absolute;
  inset-inline-start: 40%;
  bottom: 70px;
  width: 390px;
  height: 390px;
  background: #ff6ae7;
  opacity: 0.1;
  filter: blur(75px);
  z-index: -1;
}

.features-content-seven {
  width: 90%;
}

.features-content-seven p {
  margin-bottom: 0;
}

.features-progress-wrap {
  width: 90%;
}

.inner-features-shape {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

/*=============================
	12. Choose
===============================*/
.choose-bg {
  background-size: cover;
  background-position: center;
  padding: 120px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.choose-bg::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #001641;
  opacity: 0.8;
  z-index: -1;
}

.choose-shape {
  z-index: -1;
  position: absolute;
  left: 0;
  bottom: 0;
}

.section-title-two.white-title .title {
  color: var(--tg-white);
}

.choose-content {
  width: 90%;
}

.choose-content p {
  margin-bottom: 40px;
  color: #d0d0dd;
}

.choose-content .play-btn {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 18px;
  color: var(--tg-white);
  font-family: var(--tg-heading-font-family);
}

.choose-content .play-btn:hover {
  color: var(--tg-primary-color);
}

.choose-content .play-btn i {
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-primary-color);
  color: var(--tg-white);
  border-radius: 50%;
  font-size: 20px;
  margin-inline-end: 35px;
  position: relative;
}

.choose-content .play-btn i::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid var(--tg-white);
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
  animation: pulse-border 1500ms ease-out infinite;
}

.skill-wrap {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 70px 60px;
  background: var(--tg-white);
  margin-inline-start: 100px;
}

.skill-wrap .section-title-two .title {
  font-size: 36px;
}

.skill-wrap > p {
  margin-bottom: 25px;
  color: var(--tg-paragraph-color);
}

.progress-wrap {
  overflow: hidden;
  padding-top: 5px;
}

.progress-item {
  margin-bottom: 25px;
}

.progress-item:last-child {
  margin-bottom: 0;
}

.progress-item .title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px;
  color: var(--tg-paragraph-color);
}

.progress-item .progress {
  height: 8px;
  background-color: var(--tg-lavender);
  border-radius: 8px;
  overflow: inherit;
}

.progress-item .progress-bar {
  background-color: var(--tg-primary-color);
  position: relative;
  overflow: inherit;
  border-radius: 8px;
}

.progress-item .progress-bar span {
  display: block;
  position: absolute;
  inset-inline-end: 3px;
  bottom: 20px;
  color: var(--tg-white);
  line-height: 1;
  font-family: var(--tg-heading-font-family);
  font-weight: 700;
  font-size: 11px;
  border-radius: 2px;
  background: var(--tg-primary-color);
  padding: 4px 7px;
}

.progress-item .progress-bar span::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  bottom: -5px;
  width: 8px;
  height: 8px;
  background: var(--tg-primary-color);
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
          clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* choose-two */
.choose-area-two {
  background: #001641;
  padding: 120px 0 205px;
  position: relative;
  z-index: 1;
}

.choose-img-two {
  position: relative;
  z-index: 1;
}

.choose-img-two img:nth-child(2) {
  position: absolute;
  inset-inline-end: 18%;
  top: 10%;
  z-index: -1;
}

.choose-img-two img:nth-child(3) {
  position: absolute;
  inset-inline-end: 14%;
  top: 19%;
  z-index: -2;
}

.choose-content-two {
  width: 90%;
}

.choose-content-two > p {
  color: #d0d0dd;
  margin-bottom: 30px;
  width: 90%;
}

.choose-circle-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.circle-item {
  position: relative;
  width: 160px;
}

.circle-content {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 20px;
}

.circle-content .percentage {
  display: block;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  font-family: var(--tg-heading-font-family);
  color: var(--tg-white);
  margin-bottom: 5px;
}

.circle-content p {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 15px;
  color: var(--tg-white);
  line-height: 1.2;
}

/* choose-three */
.choose-area-three {
  background: var(--tg-secondary-color);
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}

.choose-content-three {
  margin-inline-end: 65px;
}

.choose-content-three > p {
  margin-bottom: 35px;
  color: var(--tg-lavender);
}

.accordion-wrap-two .accordion-item {
  border-radius: 5px;
  background: var(--tg-primary-color);
  border: none;
  margin-bottom: 10px;
  overflow: hidden;
}

.accordion-wrap-two .accordion-item:last-child {
  margin-bottom: 0;
}

.accordion-wrap-two .accordion-item:first-of-type {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.accordion-wrap-two .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.accordion-wrap-two .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.accordion-wrap-two .accordion-button {
  padding: 16px 60px 16px 22px;
  font-weight: 600;
  font-size: 20px;
  color: var(--tg-white);
  background: #052462;
  position: relative;
}

.accordion-wrap-two .accordion-button:focus {
  box-shadow: none;
}

.accordion-wrap-two .accordion-button:not(.collapsed) {
  color: var(--tg-white);
  background-color: #1a66ff;
  box-shadow: none;
}

.accordion-wrap-two .accordion-button::after {
  content: "\f102";
  width: auto;
  height: auto;
  background-image: none;
  font-family: "flaticon";
  font-size: 16px;
  position: absolute;
  inset-inline-end: 25px;
  top: 18px;
  color: var(--tg-primary-color);
}

.accordion-wrap-two .accordion-button:not(.collapsed)::after {
  background-image: none;
  transform: rotate(-180deg);
  color: var(--tg-white);
}

.accordion-wrap-two .accordion-body {
  padding: 20px 40px 30px 22px;
}

.accordion-wrap-two .accordion-body p {
  margin-bottom: 0;
  color: var(--tg-white);
}

.choose-img-three {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  inset-inline-end: 0;
}

.choose-img-three img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}

/*=============================
	13. Services
===============================*/
.section-title.white-title .sub-title {
  color: var(--tg-lavender);
}

.section-title.text-center .sub-title::before {
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.section-title.white-title .title {
  color: var(--tg-white);
}

.section-title p {
  margin-bottom: 0;
  margin-top: 16px;
  color: var(--tg-gray-four);
}

.section-title.white-title p {
  color: var(--tg-lavender);
}

.services-bg {
  background-size: cover;
  background-position: center;
  padding: 120px 0;
}

.services-item {
  background: var(--tg-white);
  border-radius: 10px;
  padding: 25px 35px 35px;
  margin-bottom: 30px;
}

.services-content .content-top {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.services-content .content-top .icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--primary-color-rgb)/20%);
  font-size: 30px;
  color: var(--tg-primary-color);
  line-height: 0;
  margin-inline-end: 15px;
  transition: 0.3s ease-in;
}

.services-item:hover .services-content .content-top .icon {
  background: var(--tg-primary-color);
  color: var(--tg-white);
}

.services-content .content-top .title {
  margin-bottom: 0;
  font-size: 24px;
}

.services-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 25px;
}

.services-thumb::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--tg-primary-color);
  opacity: 0;
  transition: 0.3s linear;
}

.services-item:hover .services-thumb::before {
  opacity: 0.8;
}

.services-thumb .btn {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border-color: var(--tg-white);
  margin-top: -100px;
  opacity: 0;
  visibility: hidden;
  color: var(--tg-white);
}

.services-thumb .btn::before {
  background: var(--tg-white);
}

.services-thumb .btn::after {
  color: var(--tg-primary-color);
}

.services-thumb .btn:hover {
  color: var(--tg-primary-color);
}

.services-item:hover .services-thumb .btn {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}

.services-content .list-wrap li {
  text-transform: capitalize;
  color: var(--tg-paragraph-color);
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.services-content .list-wrap li:last-child {
  margin-bottom: 0;
}

.services-content .list-wrap li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--tg-paragraph-color);
  border-radius: 50px;
  margin-inline-end: 10px;
  flex: 0 0 auto;
}

.services-active [class*=col-] {
  padding: 0 15px;
}

.services-active .slick-dots {
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.services-active .slick-dots li {
  list-style: none;
  line-height: 0;
}

.services-active .slick-dots li button {
  text-indent: -9999999999px;
  padding: 0;
  border: 2px solid var(--tg-lavender);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: transparent;
}

.services-active .slick-dots li.slick-active button {
  border-color: var(--tg-primary-color);
  background: var(--tg-primary-color);
}

/* services-two */
.services-bg-two {
  background-size: cover;
  background-position: center;
  padding: 120px 0 90px;
}

.services-item-two {
  position: relative;
  margin-bottom: 30px;
}

.services-thumb-two {
  position: relative;
  border-radius: 8px;
  border: 7px solid var(--tg-white);
  box-shadow: 0px 10px 30px #ced2dd;
  overflow: hidden;
  z-index: 1;
}

.services-thumb-two::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(360deg, #00194c 11.66%, rgba(0, 25, 76, 0) 65.89%);
}

.services-thumb-two::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(360deg, rgba(0, 25, 76, 0.55) 52.77%, rgba(0, 25, 76, 0) 100%, #00194c 100%);
  transition: 0.3s linear;
  opacity: 0;
}

.services-item-two:hover .services-thumb-two::after {
  opacity: 1;
}

.services-thumb-two img {
  width: 100%;
}

.services-thumb-two .item-shape {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  margin-top: -50px;
  transition: 0.3s linear;
  opacity: 0;
}

.services-item-two:hover .services-thumb-two .item-shape {
  margin-top: 0;
  opacity: 1;
}

.services-content-two {
  position: absolute;
  inset-inline-start: 30px;
  inset-inline-end: 30px;
  bottom: 25px;
  z-index: 2;
}

.services-content-two .icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  line-height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--tg-white);
  margin-bottom: 15px;
  transition: 0.3s linear;
}

.services-item-two:hover .services-content-two .icon {
  background: var(--tg-primary-color);
}

.services-content-two .title {
  margin-bottom: 10px;
  font-size: 24px;
  color: var(--tg-white);
}

.services-content-two p {
  margin-bottom: 5px;
  color: var(--tg-lavender);
  display: none;
}

/* services-three */
.services-area-three {
  background: var(--tg-section-background);
  position: relative;
  z-index: 1;
  padding: 120px 0 90px;
}

.services-item-three {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}

.services-thumb-three {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.services-thumb-three img {
  transform: scale(1);
  transition: 0.3s ease-in-out;
  width: 100%;
}

.services-item-three:hover .services-thumb-three img {
  transform: scale(1.1);
}

.services-content-three {
  position: relative;
  background: var(--tg-white);
  border-radius: 0 0 10px 10px;
  padding: 60px 30px 50px;
}

.services-content-three .services-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-primary-color);
  box-shadow: 0px 10px 15px rgba(0, 85, 255, 0.2);
  border-radius: 15px;
  color: var(--tg-white);
  font-size: 40px;
  line-height: 0;
  position: absolute;
  inset-inline-start: 30px;
  top: -35px;
}

.services-content-three .services-icon i {
  transition: 0.3s linear;
}

.services-item-three:hover .services-icon i {
  transform: rotateY(180deg);
}

.services-content-three .title {
  font-size: 22px;
  margin-bottom: 10px;
}

.services-content-three p {
  margin-bottom: 0;
}

.overlay-icon {
  position: absolute;
  font-size: 60px;
  inset-inline-end: 30px;
  bottom: -5px;
  line-height: 0;
  color: var(--tg-lavender);
}

.services-shape-four {
  top: 2%;
  position: absolute;
  inset-inline-end: 0;
  z-index: -1;
  opacity: 0.5;
}

/* services-four */
.services-area-four {
  padding: 120px 0 90px;
  position: relative;
  overflow: hidden;
}

.services-area-four::before {
  content: "";
  position: absolute;
  inset-inline-start: -30px;
  bottom: 8%;
  width: 390px;
  height: 390px;
  background: #e7f9ff;
  filter: blur(200px);
  z-index: -1;
}

.services-area-four::after {
  content: "";
  position: absolute;
  inset-inline-end: 80px;
  top: 12%;
  width: 350px;
  height: 350px;
  background: #f7e7ff;
  filter: blur(200px);
  z-index: -1;
}

.section-title-three .sub-title {
  font-size: 14px;
}

.section-title-three .title {
  font-size: 36px;
  font-weight: 800;
}

.section-title-three p {
  color: var(--tg-paragraph-color);
  width: 90%;
  margin: 12px auto 0;
}

.services-item-four {
  background: var(--tg-white);
  border: 1px solid #dde5f6;
  border-radius: 30px;
  text-align: center;
  padding: 55px 50px 65px;
  margin-bottom: 30px;
  transition: 0.3s linear;
}

.services-item-four:hover {
  filter: drop-shadow(0px 14px 200px #e1e5ed);
}

.services-icon-four {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 35px;
  border-radius: 50%;
  line-height: 0;
  background: rgba(var(--primary-color-rgb)/20%);
  color: var(--tg-primary-color);
  font-size: 50px;
  transition: 0.3s linear;
}

.services-item-four:hover .services-icon-four {
  background: var(--tg-primary-color);
  color: var(--tg-white);
  box-shadow: 0px 10px 15px rgba(0, 85, 255, 0.2);
}

.services-content-four .title {
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 15px;
}

.services-content-four p {
  margin-bottom: 25px;
}

/* services-five */
.inner-services-bg {
  background-size: cover;
  background-position: center;
  padding: 120px 0 90px;
}

/* services-six */
.services-area-six {
  background: var(--tg-section-background);
  padding: 120px 0 90px;
}

/* services-seven */
.services-area-seven {
  background: var(--tg-section-background);
}

/* services-details */
.services-details-area .row .col-71 {
  width: 71%;
  flex: 0 0 auto;
}

.services-details-area .row .col-29 {
  width: 29%;
  flex: 0 0 auto;
}

.services-details-thumb {
  margin-bottom: 20px;
}

.services-details-thumb img {
  border-radius: 10px;
  width: 100%;
}

.services-details-content .title {
  font-weight: 800;
  font-size: 36px;
  text-transform: capitalize;
  margin-bottom: 20px;
}

.services-details-content > p {
  margin-bottom: 15px;
}

.sd-inner-wrap {
  margin-top: 30px;
  margin-bottom: 25px;
}

.sd-inner-wrap .row .col-56 {
  width: 56.5%;
  flex: 0 0 auto;
}

.sd-inner-wrap .row .col-44 {
  width: 43.5%;
  flex: 0 0 auto;
}

.services-details-content .title-two {
  font-size: 30px;
  margin-bottom: 15px;
  text-transform: capitalize;
}

.sd-inner-wrap .content p {
  margin-bottom: 30px;
}

.sd-inner-wrap .content .list-wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 15px 0;
}

.sd-inner-wrap .content .list-wrap li {
  display: flex;
  align-items: flex-start;
  line-height: 1.3;
  font-weight: 600;
  font-size: 18px;
  font-family: var(--tg-heading-font-family);
  width: 50%;
}

.sd-inner-wrap .content .list-wrap li img {
  margin-inline-end: 10px;
}

.sd-inner-wrap .thumb {
  position: relative;
}

.sd-inner-wrap .thumb img {
  width: 100%;
  border-radius: 10px;
}

.sd-inner-wrap .thumb .play-btn {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-white);
  border-radius: 50%;
}

.sd-inner-wrap .thumb .play-btn::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid var(--tg-white);
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
  animation: pulse-border 1500ms ease-out infinite;
}

.company-benefit-wrap {
  margin-top: 40px;
}

.company-benefit-wrap p {
  margin-bottom: 25px;
}

.accordion-wrap-three .accordion-item {
  background-color: transparent;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.accordion-wrap-three .accordion-item:last-child {
  margin-bottom: 0;
}

.accordion-wrap-three .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.accordion-wrap-three .accordion-button {
  position: relative;
  padding: 16px 50px 16px 25px;
  font-weight: 600;
  font-size: 20px;
  color: var(--tg-secondary-color);
  text-align: start;
  background-color: var(--tg-gray-two);
  font-family: var(--tg-heading-font-family);
  border: none;
}

.accordion-wrap-three .accordion-button:not(.collapsed) {
  color: var(--tg-white);
  background: var(--tg-primary-color);
}

.accordion-wrap-three .accordion-button::after {
  content: "\f102";
  width: auto;
  height: auto;
  background-image: none;
  font-family: "flaticon";
  font-size: 16px;
  position: absolute;
  inset-inline-end: 25px;
  top: 18px;
  color: var(--tg-primary-color);
}

.accordion-wrap-three .accordion-button:not(.collapsed)::after {
  background-image: none;
  transform: rotate(-180deg);
  color: var(--tg-white);
}

.accordion-wrap-three .accordion-body {
  padding: 20px 40px 30px 30px;
  border: 1px solid #dfdfdf;
  border-top: none !important;
  border-radius: 0 0 4px 4px;
  margin-top: -1px;
}

.accordion-wrap-three .accordion-body p {
  margin-bottom: 0;
}

.accordion-wrap-three .accordion-button:focus {
  border-color: #dfdfdf;
  box-shadow: none;
}

.sd-inner-wrap-two {
  margin-top: 35px;
  margin-bottom: 50px;
}

.sd-inner-wrap-two .row .col-58 {
  width: 58.4%;
  flex: 0 0 auto;
}

.sd-inner-wrap-two .row .col-42 {
  width: 41.6%;
  flex: 0 0 auto;
}

.sd-inner-wrap-two .thumb img {
  border-radius: 10px;
}

.services-details-list .list-wrap li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}

.services-details-list .list-wrap li:last-child {
  margin-bottom: 0;
}

.services-details-list .list-wrap li .icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--primary-color-rgb)/20%);
  color: var(--tg-primary-color);
  border-radius: 14px;
  position: relative;
  font-size: 40px;
  line-height: 0;
  flex: 0 0 auto;
  margin-inline-end: 20px;
}

.services-details-list .list-wrap li .icon::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  background: var(--tg-primary-color);
  border-radius: 3px;
}

.services-details-list .list-wrap li .content .title {
  margin-bottom: 8px;
  font-size: 20px;
  text-transform: capitalize;
}

.services-details-list .list-wrap li .content p {
  margin-bottom: 0;
}

.industrial-working-wrap p {
  margin-bottom: 25px;
}

.industrial-working-wrap .info-two {
  margin-bottom: 0;
}

.industrial-working-wrap img {
  border-radius: 10px;
  margin-bottom: 25px;
}

.services-details-list-two {
  margin-inline-end: 15px;
}

.services-details-list-two .list-wrap li {
  border: 1px solid #dadfee;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  padding: 25px 30px;
  background: var(--tg-white);
  margin-bottom: 20px;
}

.services-details-list-two .list-wrap li:last-child {
  margin-bottom: 0;
}

.services-details-list-two .list-wrap li .icon {
  font-size: 35px;
  line-height: 0;
  color: var(--tg-primary-color);
  flex: 0 0 auto;
  margin-inline-end: 10px;
  line-height: 0;
}

.services-details-list-two .list-wrap li .content .title {
  font-size: 22px;
  margin-bottom: 10px;
}

.services-details-list-two .list-wrap li .content p {
  margin-bottom: 0;
}

.sd-inner-wrap-three .col-43 {
  width: 43%;
  flex: 0 0 auto;
}

.sd-inner-wrap-three .col-57 {
  width: 57%;
  flex: 0 0 auto;
}

.sd-inner-wrap-three {
  margin-bottom: 50px;
  margin-top: 40px;
}

.sd-inner-wrap-four .row .col-55 {
  width: 55%;
  flex: 0 0 auto;
}

.sd-inner-wrap-four .row .col-45 {
  width: 45%;
  flex: 0 0 auto;
}

.sd-inner-wrap-four .thumb img {
  border-radius: 10px;
}

.sd-inner-wrap-four .content .list-wrap li {
  display: flex;
  align-items: flex-start;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  text-transform: capitalize;
  font-family: var(--tg-heading-font-family);
  margin-bottom: 15px;
}

.sd-inner-wrap-four .content .list-wrap li:last-child {
  margin-bottom: 0;
}

.sd-inner-wrap-four .content .list-wrap li img {
  margin-inline-end: 10px;
}

.sd-inner-wrap-four {
  margin-bottom: 40px;
}

.services-details-list-three .list-wrap {
  display: flex;
  align-items: center;
  gap: 25px;
}

.services-details-list-three .list-wrap li {
  display: flex;
  align-items: flex-start;
  border: 1px solid #dadfee;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: var(--tg-white);
  padding: 25px 30px;
}

.services-details-list-three .list-wrap li .icon {
  font-size: 50px;
  line-height: 0;
  color: var(--tg-primary-color);
  margin-inline-end: 15px;
}

.services-details-list-three .list-wrap li .content .title {
  font-size: 22px;
  margin-bottom: 10px;
}

.services-details-list-three .list-wrap li .content p {
  margin-bottom: 0;
}

.services-details-list-three {
  margin-bottom: 30px;
}

.services-details-thumb-two {
  margin-bottom: 20px;
  margin-top: 25px;
}

.services-details-thumb-two img {
  border-radius: 10px;
}

.speed-optimized-wrap {
  margin-top: 50px;
  margin-bottom: 45px;
}

.speed-optimized-wrap p {
  margin-bottom: 0;
}

.sd-inner-wrap-five .row .col-50 {
  width: 50%;
  flex: 0 0 auto;
}

.sd-inner-wrap-five .left-side-content {
  margin-inline-end: 30px;
}

.sd-inner-wrap-five .left-side-content p {
  margin-bottom: 0;
}

.sd-inner-wrap-five .right-side-content p {
  margin-bottom: 15px;
}

.sd-inner-wrap-five .right-side-content .list-wrap li {
  display: flex;
  align-items: flex-start;
  line-height: 1.3;
  font-weight: 600;
  font-size: 18px;
  color: var(--tg-secondary-color);
  font-family: var(--tg-heading-font-family);
  margin-bottom: 15px;
}

.sd-inner-wrap-five .right-side-content .list-wrap li:last-child {
  margin-bottom: 0;
}

.sd-inner-wrap-five .right-side-content .list-wrap li img {
  margin-inline-end: 10px;
}

/* services-sidebar */
.services-sidebar {
  padding-inline-end: 20px;
}

.services-cat-list .list-wrap li {
  margin-bottom: 10px;
}

.services-cat-list .list-wrap li:last-child {
  margin-bottom: 0;
}

.services-cat-list .list-wrap li a {
  border: 1px solid #e0e6f2;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 22px;
  background: var(--tg-white);
  font-weight: 600;
  font-size: 18px;
  font-family: var(--tg-heading-font-family);
  color: var(--tg-secondary-color);
  text-transform: capitalize;
}

.services-cat-list .list-wrap li a i {
  margin-inline-start: 10px;
  font-size: 22px;
  line-height: 0;
  color: var(--tg-gray-four);
  transition: all 0.3s ease-out 0s;
}

.services-cat-list .list-wrap li.active a,
.services-cat-list .list-wrap li a:hover {
  background: var(--tg-primary-color);
  color: var(--tg-white);
  border-color: var(--tg-primary-color);
}

.services-cat-list .list-wrap li.active a i,
.services-cat-list .list-wrap li a:hover i {
  color: var(--tg-white);
}

.services-widget {
  background: var(--tg-section-background);
  border-radius: 10px;
  padding: 30px 30px 35px;
  margin-bottom: 30px;
}

.services-widget:last-child {
  margin-bottom: 0;
}

.services-widget .sw-title {
  margin-bottom: 15px;
  position: relative;
  font-size: 24px;
  text-transform: capitalize;
  padding-bottom: 10px;
}

.services-widget .sw-title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 30px;
  height: 4px;
  background: var(--tg-primary-color);
  border-radius: 4px;
}

.services-brochure-wrap p {
  margin-bottom: 15px;
}

.services-brochure-wrap .download-btn {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-secondary-color);
  border: 1px solid #e0e6f2;
  border-radius: 5px;
  background: var(--tg-white);
  padding: 13px 20px;
  margin-bottom: 10px;
}

.services-brochure-wrap .download-btn i {
  font-size: 16px;
  color: var(--tg-primary-color);
  margin-inline-end: 10px;
  transition: all 0.3s ease-out 0s;
}

.services-brochure-wrap .download-btn:hover {
  color: var(--tg-white);
  background: var(--tg-primary-color);
  border-color: var(--tg-primary-color);
}

.services-brochure-wrap .download-btn:hover i {
  color: var(--tg-white);
}

.services-brochure-wrap .download-btn:last-child {
  margin-bottom: 0;
}

.services-widget-form .form-grp {
  margin-bottom: 10px;
}

.services-widget-form .form-grp textarea,
.services-widget-form .form-grp input {
  width: 100%;
  border: 1px solid #e0e6f2;
  border-radius: 5px;
  background: var(--tg-white);
  padding: 13px 16px;
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-paragraph-color);
  height: 50px;
  display: block;
}

.services-widget-form .form-grp textarea::-moz-placeholder, .services-widget-form .form-grp input::-moz-placeholder {
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-gray-four);
}

.services-widget-form .form-grp textarea::placeholder,
.services-widget-form .form-grp input::placeholder {
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-gray-four);
}

.services-widget-form .form-grp textarea {
  min-height: 120px;
  max-height: 120px;
}

.submit-btn {
  border: none;
  background: var(--tg-primary-color);
  width: 100%;
  font-weight: 700;
  font-size: 16px;
  color: var(--tg-white);
  text-transform: capitalize;
  border-radius: 5px;
  padding: 13px 20px;
  height: 50px;
}

.submit-btn:hover {
  background: var(--tg-secondary-color);
}

.services-sidebar-contact {
  background: var(--tg-paragraph-color);
  text-align: center;
}

.services-sidebar-contact .title {
  margin-bottom: 30px;
  color: var(--tg-white);
  font-size: 22px;
}

.services-sidebar-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-primary-color);
  border-radius: 6px;
  color: var(--tg-white);
  font-weight: 600;
  font-size: 18px;
  padding: 9px 22px;
}

.services-sidebar-contact a i {
  line-height: 0;
  margin-inline-end: 5px;
}

.services-sidebar-contact a:hover {
  background: var(--tg-secondary-color);
}

.services-cat-list-two .list-wrap li a {
  position: relative;
  z-index: 1;
  background: #f8f8fa;
}

.services-cat-list-two .list-wrap li a::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 30px;
  border-radius: 3px;
  background: var(--tg-primary-color);
  z-index: -1;
}

/*=============================
	14. Cta
===============================*/
.cta-area {
  margin-top: -105px;
}

.cta-inner-wrap-two,
.cta-inner-wrap {
  background-size: cover;
  background-position: center;
  padding: 70px;
  border-radius: 10px;
}

.cta-content {
  display: flex;
  align-items: center;
}

.cta-info-wrap {
  display: flex;
  align-items: center;
  width: 46%;
  flex: 0 0 auto;
  position: relative;
}

.cta-info-wrap::before {
  content: "";
  position: absolute;
  inset-inline-end: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 74px;
  background: var(--tg-primary-color);
}

.cta-info-wrap .icon {
  font-size: 50px;
  color: var(--tg-white);
  line-height: 0;
  margin-inline-end: 15px;
}

.cta-info-wrap .content span {
  display: block;
  font-weight: 600;
  font-size: 18px;
  font-family: var(--tg-heading-font-family);
  color: var(--tg-white);
  line-height: 1;
  margin-bottom: 10px;
}

.cta-info-wrap .content a {
  font-weight: 700;
  font-size: 30px;
  display: inline-block;
  line-height: 1;
  color: var(--tg-white);
  font-family: var(--tg-heading-font-family);
}

.cta-info-wrap .content a:hover {
  color: var(--tg-primary-color);
}

.cta-content .title {
  font-weight: 800;
  font-size: 30px;
  margin-bottom: 0;
  color: var(--tg-white);
  line-height: 1.13;
}

/* cta-two */
.cta-inner-wrap-two .cta-info-wrap::before {
  background: var(--tg-white);
}

.cta-inner-wrap-two .cta-info-wrap a:hover {
  color: var(--tg-secondary-color);
}

.cta-inner-wrap-two .cta-btn .btn {
  border: 2px solid var(--tg-white);
  background: transparent;
  padding: 16px 30px;
}

.cta-inner-wrap-two .cta-btn .btn:hover {
  background: rgba(var(--primary-color-rgb)/20%);
  border-color: rgba(var(--primary-color-rgb)/20%);
}

/* cta-three */
.cta-area-three {
  background: #f8f8fa;
}

.cta-inner-wrap-three {
  margin-top: -85px;
  position: relative;
  z-index: 1;
}

.cta-info-wrap.cta-info-wrap-two .icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 24px 50px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  background: var(--tg-white);
  font-size: 35px;
  color: var(--tg-primary-color);
  line-height: 0;
  margin-inline-end: 15px;
}

.cta-info-wrap.cta-info-wrap-two .content a {
  font-size: 24px;
}

.cta-info-wrap.cta-info-wrap-two::before {
  display: none;
}

.cta-inner-wrap-three {
  background-size: cover;
  background-position: center;
  padding: 50px 45px;
  border-radius: 10px;
}

.cta-inner-wrap-three .btn-three {
  background: var(--tg-white);
  color: var(--tg-primary-color);
}

.cta-inner-wrap-three .btn-three::after {
  filter: unset;
}

.cta-inner-wrap-three .btn-three:hover {
  background: var(--tg-secondary-color);
  color: var(--tg-white);
}

.cta-inner-wrap-three .btn-three:hover::after {
  filter: brightness(0) invert(1);
}

.cta-area-four {
  margin-top: -100px;
}

.cta-area-five {
  position: relative;
  z-index: 3;
}

/*=============================
	15. Counter
===============================*/
.counter-bg {
  background-size: cover;
  background-position: center;
  padding: 120px 0 90px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.counter-item {
  text-align: center;
  margin-bottom: 30px;
}

.counter-item .count {
  margin-bottom: 5px;
  font-weight: 800;
  font-size: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0.8;
}

.counter-item p {
  margin-bottom: 0;
}

.counter-shape-wrap img {
  position: absolute;
  z-index: -1;
}

.counter-shape-wrap img:nth-child(1) {
  inset-inline-start: 10%;
  top: 25%;
  animation: animationFramesOne 15s linear infinite;
}

.counter-shape-wrap img:nth-child(2) {
  inset-inline-end: 10%;
  top: 45%;
  animation: animationFramesOne 20s linear infinite;
}

@keyframes animationFramesOne {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
.animationFramesOne {
  animation: animationFramesOne 12s linear infinite;
}

/* counter-two */
.counter-area-two {
  background: #f8f8fa;
  padding: 75px 0 45px;
}

.counter-item-two {
  text-align: center;
  position: relative;
  margin-bottom: 30px;
}

.counter-item-two::before {
  content: "";
  position: absolute;
  inset-inline-end: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 95px;
  background: #d5ddec;
}

.counter-item-wrap .row [class*=col-]:last-child .counter-item-two::before {
  display: none;
}

.counter-item-two .count {
  font-weight: 800;
  font-size: 60px;
  display: inline-flex;
  align-items: center;
  line-height: 0.8;
  margin-bottom: 5px;
  justify-content: center;
  position: relative;
}

.counter-item-two .count::before {
  content: "";
  position: absolute;
  inset-inline-start: -24px;
  top: -18px;
  width: 50px;
  height: 50px;
  background: rgba(var(--primary-color-rgb)/20%) !important;
  border-radius: 50%;
}

.counter-item-two p {
  margin-bottom: 0;
}

/* counter-three */
.counter-item-three {
  border: 1.2px solid #d4dced;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 28px 30px;
  margin-bottom: 30px;
  transform: translateY(0);
  transition: 0.3s linear;
}

.counter-item-three:hover {
  transform: translateY(-5px);
}

.counter-icon {
  font-size: 60px;
  line-height: 0;
  position: relative;
  color: var(--tg-primary-color);
  margin-inline-end: 40px;
}

.counter-icon::before {
  content: "";
  position: absolute;
  inset-inline-start: -14px;
  top: -15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--primary-color-rgb)/20%);
  z-index: -1;
  transition: 0.3s linear;
}

.counter-icon::after {
  content: "";
  position: absolute;
  inset-inline-end: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 38px;
  background: rgba(var(--primary-color-rgb)/20%);
}

.counter-item-three:hover .counter-icon::before {
  inset-inline-start: 0;
  top: 0;
}

.counter-content .count {
  font-size: 36px;
  margin-bottom: 10px;
  line-height: 0.8;
  display: flex;
  align-items: center;
}

.counter-content p {
  margin-bottom: 0;
  line-height: 1.2;
  color: var(--tg-gray-four);
}

/* counter-four */
.counter-area-four {
  background: var(--tg-section-background);
  position: relative;
  padding: 220px 0 120px;
  overflow: hidden;
  z-index: 1;
  margin-top: -100px;
}

.counter-area-four::before {
  content: "";
  position: absolute;
  inset-inline-end: 38%;
  bottom: 60px;
  width: 390px;
  height: 390px;
  background: #5e3de3;
  opacity: 0.07;
  filter: blur(75px);
  z-index: -1;
}

.counter-content-four {
  width: 90%;
}

.counter-content-four p {
  margin-bottom: 0;
}

.counter-item-wrap-four .list-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -12px;
  gap: 24px 0;
}

.counter-item-wrap-four .list-wrap li {
  padding: 0 12px;
  width: 50%;
}

.counter-item-wrap-four .list-wrap li .counter-item-three {
  background: var(--tg-white);
  margin-bottom: 0;
}

.inner-counter-shape {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  z-index: -1;
}

/*=============================
	16. Estimate
===============================*/
.estimate-area {
  background: #f8f8fa;
  padding: 120px 0 0;
  position: relative;
  z-index: 1;
}

.estimate-content {
  padding: 0 40px 0 80px;
}

.estimate-tab-wrap .nav-tabs {
  border-bottom: none;
  gap: 5px;
  margin-bottom: 20px;
}

.estimate-tab-wrap .nav-tabs .nav-link {
  margin-bottom: 0;
  background: var(--tg-gray-four);
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tg-white);
  padding: 7px 20px;
}

.estimate-tab-wrap .nav-tabs .nav-link.active {
  background: var(--tg-primary-color);
}

.estimate-form-wrap .form-grp {
  margin-bottom: 10px;
}

.estimate-form-wrap .form-grp input, select {
  border: 1px solid #d0d6e1;
  border-radius: 5px;
  width: 100%;
  padding: 15px 20px;
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-secondary-color);
  height: 50px;
  background: var(--tg-white);
}

.estimate-form-wrap .form-grp input::-moz-placeholder {
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-gray-four);
}

.estimate-form-wrap .form-grp input::placeholder {
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-gray-four);
}

.range-slider-wrap {
  margin-bottom: 30px;
}

.range-slider-wrap .content-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.range-slider-wrap .content-top p {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 0;
}

.range-slider-wrap .content-top span {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--tg-secondary-color);
}

.range-slider-wrap .content-top span strong {
  font-weight: 600;
  font-size: 16px;
}

.range-slider-wrap input {
  width: 100%;
  height: 15px;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: #d9d9d9;
  outline: none;
  border-radius: 10px;
  overflow: hidden;
}

.range-slider-wrap .range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--tg-primary-color);
  cursor: pointer;
  border: none;
  box-shadow: -807px 0 0 800px #6699ff;
}

.estimate-form-wrap .btn.btn-three::after {
  display: none;
}

.estimate-shape {
  position: absolute;
  z-index: -1;
  top: 0;
  inset-inline-end: 0;
}

/*=============================
	17. Project
===============================*/
.project-bg {
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.project-top-content {
  margin-inline-start: 40px;
  margin-bottom: 50px;
}

.project-top-content p {
  margin-bottom: 0;
  color: var(--tg-paragraph-color);
}

.project-item {
  margin-bottom: 30px;
}

.project-thumb {
  border-radius: 10px;
  overflow: hidden;
}

.project-thumb img {
  filter: grayscale(0);
}

.project-item:hover .project-thumb img {
  filter: grayscale(100%);
}

.project-content {
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 9px;
  margin: -85px 18px 0;
  padding: 22px 80px 22px 30px;
  position: relative;
  overflow: hidden;
  background: var(--tg-white);
}

.project-content .tag {
  font-weight: 500;
  font-size: 15px;
  display: inline-block;
  text-transform: capitalize;
  margin-bottom: 5px;
}

.project-content .tag:hover {
  color: var(--tg-secondary-color);
}

.project-content .title {
  font-size: 22px;
  margin-bottom: 0;
}

.project-content .link-arrow {
  width: 113px;
  height: 113px;
  display: block;
  border-radius: 50%;
  background: var(--tg-primary-color);
  color: var(--tg-white);
  font-size: 22px;
  line-height: 0;
  padding: 24px 32px;
  position: absolute;
  inset-inline-end: -38px;
  bottom: -51px;
  transform: translateY(50px);
  opacity: 0;
  visibility: hidden;
}

.project-item:hover .project-content .link-arrow {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.project-content .link-arrow:hover {
  background: var(--tg-secondary-color);
}

.swiper-container.project-active {
  overflow: hidden;
  margin-inline-end: -422px;
}

/* project-two */
.project-bg-two {
  background-size: cover;
  background-position: center;
}

.project-content-top {
  margin-bottom: 30px;
}

.project-content-top p {
  margin-bottom: 0;
  width: 90%;
  margin-inline-start: auto;
}

.project-item-two {
  position: relative;
  margin-bottom: 30px;
}

.project-thumb-two img {
  border-radius: 10px;
  transition: 0.3s linear;
}

.project-item-two:hover .project-thumb-two img {
  filter: grayscale(100%);
}

.project-content-two {
  position: absolute;
  inset-inline-start: 10px;
  inset-inline-end: 10px;
  top: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(var(--primary-color-rgb)/80%);
  border-radius: 10px;
  padding: 30px;
  transition: 0.3s linear;
  opacity: 0;
  transform: scale(0.8);
  visibility: hidden;
}

.project-item-two:hover .project-content-two {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

.project-content-two .title {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: 10px;
  color: var(--tg-white);
}

.project-content-two .title a:hover {
  color: var(--tg-white);
}

.project-content-two span {
  display: block;
  line-height: 1;
  color: var(--tg-white);
}

.project-content-two .link-btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tg-white);
  color: var(--tg-secondary-color);
  font-size: 18px;
  position: absolute;
  inset-inline-end: 28px;
  bottom: 28px;
}

.project-content-two .link-btn:hover {
  background: var(--tg-secondary-color);
  color: var(--tg-white);
}

/* project-three */
.project-item-three {
  margin-bottom: 30px;
}

.project-thumb-three {
  overflow: hidden;
}

.project-thumb-three img {
  transform: scale(1);
  transition: 0.3s linear;
}

.project-item-three:hover .project-thumb-three img {
  transform: scale(1.1);
}

/* project-four */
.project-area-four {
  background: var(--tg-section-background);
  padding: 120px 0 190px;
}

.project-item-four {
  margin-bottom: 30px;
}

.project-thumb-four {
  position: relative;
  margin-bottom: 20px;
}

.project-thumb-four::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--tg-primary-color);
  opacity: 0;
  transition: 0.3s linear;
}

.project-thumb-four .project-link {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  width: 50px;
  opacity: 0;
  visibility: hidden;
  line-height: 0;
}

.project-item-four:hover .project-thumb-four::before {
  opacity: 0.9;
}

.project-item-four:hover .project-thumb-four .project-link {
  opacity: 1;
  visibility: visible;
}

.project-content-four .title {
  font-size: 24px;
  margin-bottom: 5px;
}

.project-content-four span {
  font-weight: 400;
  display: block;
  line-height: 1;
  color: var(--tg-gray-four);
}

.project-area-five {
  padding: 100px 0 100px;
}

/* project-details */
.project-details-wrap .row .col-71 {
  width: 71%;
  flex: 0 0 auto;
}

.project-details-wrap .row .col-29 {
  width: 29%;
  flex: 0 0 auto;
}

.project-details-thumb {
  margin-bottom: 30px;
}

.project-details-thumb img {
  border-radius: 10px;
}

.project-details-info {
  border: 1px solid #e0e6f2;
  border-radius: 5px;
  padding: 25px 35px 28px;
  margin-bottom: 30px;
}

.project-details-info .title {
  font-size: 24px;
  position: relative;
  margin-bottom: 15px;
  padding-bottom: 12px;
}

.project-details-info .title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 30px;
  height: 4px;
  background: var(--tg-primary-color);
  border-radius: 4px;
}

.project-details-info > .list-wrap > li {
  font-weight: 500;
  font-size: 16px;
  color: var(--tg-gray-four);
  border-bottom: 1px solid #dfe3e7;
  display: flex;
  align-items: center;
  font-family: var(--tg-heading-font-family);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.project-details-info > .list-wrap > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}

.project-details-info > .list-wrap > li span {
  font-weight: 700;
  font-size: 18px;
  color: var(--tg-paragraph-color);
  width: 40%;
  flex: 0 0 auto;
}

.project-details-info > .list-wrap > li.social .list-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-details-info > .list-wrap > li.social .list-wrap li a {
  color: var(--tg-gray-four);
}

.project-details-info > .list-wrap > li.social .list-wrap li a:hover {
  color: var(--tg-primary-color);
}

.project-details-content .title {
  font-weight: 800;
  font-size: 36px;
  margin-bottom: 20px;
}

.project-details-content > p {
  margin-bottom: 15px;
}

.project-details-content .title-two {
  margin-bottom: 15px;
  font-size: 30px;
  text-transform: capitalize;
}

.pd-optimized-wrap {
  margin-top: 50px;
  margin-bottom: 60px;
}

.pd-optimized-wrap p {
  margin-bottom: 0;
}

.pd-inner-wrap .row .col-41 {
  width: 41.3%;
  flex: 0 0 auto;
}

.pd-inner-wrap .row .col-59 {
  width: 58.7%;
  flex: 0 0 auto;
}

.pd-inner-wrap .content {
  margin-inline-end: 20px;
}

.pd-inner-wrap .content p {
  margin-bottom: 0;
}

.pd-inner-wrap .content .info-one {
  margin-bottom: 30px;
}

.pd-inner-wrap .content .list-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 0;
  margin-bottom: 25px;
}

.pd-inner-wrap .content .list-wrap li {
  display: flex;
  align-items: flex-start;
  line-height: 1.3;
  font-weight: 600;
  font-size: 18px;
  font-family: var(--tg-heading-font-family);
  color: var(--tg-paragraph-color);
  width: 50%;
}

.pd-inner-wrap .content .list-wrap li img {
  margin-inline-end: 10px;
}

.pd-inner-wrap .thumb {
  position: relative;
}

.pd-inner-wrap .thumb img {
  border-radius: 10px;
}

.pd-inner-wrap .thumb .play-btn {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-white);
  border-radius: 50%;
}

.pd-inner-wrap .thumb .play-btn::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid var(--tg-white);
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
  animation: pulse-border 1500ms ease-out infinite;
}

/*=============================
	18. Faq
===============================*/
.faq-area {
  position: relative;
  z-index: 1;
  padding: 0 0 120px;
}

.faq-bg-shape {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 100%;
  width: 40.3%;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.faq-shape-wrap img {
  position: absolute;
  z-index: -1;
}

.faq-shape-wrap img:nth-child(1) {
  inset-inline-end: 0;
  bottom: 0;
}

.faq-shape-wrap img:nth-child(2) {
  inset-inline-start: 14%;
  bottom: 12%;
  animation: alltuchtopdown 8s infinite linear;
}

.faq-img-wrap {
  text-align: end;
  position: relative;
  margin-inline-end: 45px;
}

.faq-img-wrap img:nth-child(1) {
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  border: 8px solid var(--tg-white);
}

.faq-img-wrap img:nth-child(2) {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  position: absolute;
  inset-inline-start: 0;
  bottom: 20%;
}

.faq-content > p {
  margin-bottom: 30px;
  width: 85%;
}

.faq-content .accordion-wrap {
  width: 90%;
}

.faq-content .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.faq-content .accordion-item {
  background-color: transparent;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}

.faq-content .accordion-item:last-child {
  margin-bottom: 0;
}

.faq-content .accordion-button {
  position: relative;
  padding: 17px 50px 17px 30px;
  font-weight: 700;
  font-size: 18px;
  color: var(--tg-secondary-color);
  text-align: start;
  background-color: var(--tg-gray-two);
  font-family: var(--tg-heading-font-family);
  border: 1px solid #dfdfdf;
}

.faq-content .accordion-button.collapsed {
  border: transparent;
}

.faq-content .accordion-button:not(.collapsed) {
  color: var(--tg-primary-color);
  background-color: transparent;
  box-shadow: none;
}

.faq-content .accordion-button:focus {
  border-color: #dfdfdf;
  box-shadow: none;
}

.faq-content .accordion-body {
  padding: 20px 30px 30px;
  border: 1px solid #dfdfdf;
  border-top: none;
}

.faq-content .accordion-body p {
  margin-bottom: 0;
  color: var(--tg-gray-four);
}

.faq-content .accordion-button::after {
  content: "\f102";
  width: auto;
  height: auto;
  background-image: none;
  font-family: "flaticon";
  font-size: 16px;
  position: absolute;
  inset-inline-end: 25px;
  top: 18px;
  color: var(--tg-primary-color);
}

.faq-content .accordion-button:not(.collapsed)::after {
  background-image: none;
  transform: rotate(-180deg);
}

/*=============================
	19. Request
===============================*/
.request-area.request-bg {
  background-position: center;
  background-size: cover;
  padding: 80px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.request-content .title {
  font-size: 32px;
  margin-bottom: 0;
  color: var(--tg-white);
  font-weight: 800;
}

.request-content-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.request-contact {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 5px 22px;
}

.request-contact .icon {
  font-size: 30px;
  line-height: 0;
  color: var(--tg-white);
  margin-inline-end: 10px;
}

.request-contact .content span {
  display: block;
  line-height: 1;
  font-size: 13px;
  color: var(--tg-white);
  margin-bottom: 2px;
}

.request-contact .content a {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--tg-heading-font-family);
  color: var(--tg-white);
  line-height: 1;
}

.request-contact .content a:hover {
  color: var(--tg-primary-color);
}

.request-shape {
  position: absolute;
  inset-inline-start: 6%;
  top: 10%;
  animation: animationFramesOne 15s linear infinite;
  z-index: -1;
}

/* request-two */
.request-area-two {
  background: var(--tg-secondary-color);
  padding: 120px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.request-shape-wrap img {
  position: absolute;
  z-index: -1;
}

.request-shape-wrap img:nth-child(1) {
  inset-inline-start: 13%;
  top: 45%;
  animation: alltuchtopdown 8s infinite linear;
}

.request-shape-wrap img:nth-child(2) {
  right: 0;
  top: 0;
}

.request-content-two p {
  margin-bottom: 0;
  color: #d0d0dd;
  width: 90%;
}

.request-form-wrap .form-grp input {
  width: 100%;
  border: none;
  font-weight: 500;
  font-size: 13px;
  color: var(--tg-secondary-color);
  padding: 15px 20px;
  border-radius: 4px;
  background: var(--tg-white);
  height: 50px;
}

.request-form-wrap .form-grp input::-moz-placeholder {
  font-weight: 500;
  font-size: 13px;
  color: var(--tg-paragraph-color);
}

.request-form-wrap .form-grp input::placeholder {
  font-weight: 500;
  font-size: 13px;
  color: var(--tg-paragraph-color);
}

.request-form-wrap .row {
  gap: 15px 0;
  margin: 0 -7px;
}

.request-form-wrap .row [class*=col-] {
  padding: 0 7px;
}

.request-form-wrap button {
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  border: none;
  width: 100%;
  text-align: center;
  padding: 10px 20px;
  background: var(--tg-primary-color);
  color: var(--tg-white);
  border-radius: 4px;
  height: 50px;
}

.request-form-wrap button:hover {
  background: var(--tg-white);
  color: var(--tg-primary-color);
}

/*=============================
	20. Team
===============================*/
.team-bg {
  background-size: cover;
  background-position: center;
  padding: 120px 0 90px;
}

.team-item {
  border: 1px solid #dfe3ec;
  border-radius: 10px;
  background: var(--tg-white);
  margin-bottom: 30px;
  transition: 0.3s linear;
}

.team-item:hover {
  filter: drop-shadow(0px 14px 30px #dde1eb);
  border-color: var(--tg-white);
}

.team-thumb {
  position: relative;
}

.team-thumb img {
  border-radius: 8px 8px 180px;
}

.team-social .list-wrap {
  display: flex;
  flex-direction: column-reverse;
  position: absolute;
  border-radius: 0px 0px 50px 50px;
  background: var(--tg-paragraph-color);
  inset-inline-end: 17px;
  top: 0;
  padding: 16px 13px;
  transition: 0.3s linear;
}

.team-social .list-wrap li a {
  display: block;
  transform: rotate(-90deg);
  color: var(--tg-white);
  font-size: 16px;
}

.team-item:hover .team-social .list-wrap {
  background: var(--tg-primary-color);
}

.team-content {
  padding: 20px 25px 25px;
}

.team-content .title {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 3px;
}

.team-content span {
  font-size: 13px;
  display: block;
  position: relative;
  padding-bottom: 15px;
  color: var(--tg-gray-four);
}

.team-content span::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 30px;
  height: 4px;
  border-radius: 4px;
  background: var(--tg-primary-color);
}

/* team-two */
.team-area-two {
  padding: 120px 0 90px;
  position: relative;
  overflow: hidden;
}

.team-shape {
  position: absolute;
  left: 0;
  top: 30%;
  z-index: -1;
}

.section-top-content p {
  margin-bottom: 0;
  width: 90%;
  margin-inline-start: auto;
  color: var(--tg-paragraph-color);
}

.team-item-two {
  position: relative;
  margin-bottom: 30px;
  transition: 0.3s;
}

.team-item-two:hover {
  transform: translateY(-5px);
}

.team-thumb-two {
  position: relative;
}

.team-thumb-two img {
  border-radius: 10px;
}

.team-social-two .list-wrap {
  display: flex;
  flex-direction: column-reverse;
  background: #0045ce;
  position: absolute;
  inset-inline-start: 30px;
  bottom: 25px;
  border-radius: 50px;
  padding: 16px 13px;
}

.team-social-two .list-wrap li a {
  display: block;
  transform: rotate(-90deg);
  color: var(--tg-white);
  font-size: 16px;
  transition: 0.3s;
}

.team-social-two .list-wrap li a:hover {
  transform: rotate(0);
}

.team-content-two {
  position: absolute;
  inset-inline-start: 30px;
  top: 25px;
  inset-inline-end: 30px;
}

.team-content-two .title {
  font-size: 24px;
  margin-bottom: 5px;
  color: var(--tg-white);
}

.team-content-two .title a:hover {
  color: var(--tg-secondary-color);
}

.team-content-two span {
  font-weight: 500;
  font-size: 14px;
  display: block;
  color: var(--tg-lavender);
  position: relative;
}

.team-content-two span::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -10px;
  width: 30px;
  height: 4px;
  background: var(--tg-white);
  border-radius: 2px;
}

/* team-three */
.team-area-three {
  position: relative;
  padding: 120px 0 90px;
  overflow: hidden;
}

.team-area-three::before {
  content: "";
  position: absolute;
  inset-inline-start: 50px;
  bottom: 0;
  width: 600px;
  height: 600px;
  background: #ced0ff;
  opacity: 0.2;
  filter: blur(75px);
  z-index: -1;
}

.team-item-three {
  background: var(--tg-section-background);
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
}

.team-thumb-three {
  position: relative;
  z-index: 1;
  padding-top: 25px;
}

.team-thumb-three::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 450px;
  background: rgba(var(--primary-color-rgb)/20%);
  inset-inline-end: -68px;
  bottom: -31px;
  z-index: -1;
  border-radius: 115px;
  transform: rotate(45deg);
  transition: 0.3s ease-in-out;
}

.team-item-three:hover .team-thumb-three::before {
  background: var(--tg-primary-color);
}

.team-content-three {
  padding: 20px 30px 25px;
}

.team-content-three .title {
  margin-bottom: 8px;
  font-size: 24px;
}

.team-content-three span {
  display: block;
  color: var(--tg-primary-color);
}

.team-social-three {
  position: absolute;
  inset-inline-start: 20px;
  top: 20px;
  background: rgba(var(--primary-color-rgb)/20%);
  border-radius: 30px;
}

.team-social-three .list-wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  padding: 0 0 15px;
  display: none;
  text-align: center;
}

.team-social-three .social-toggle-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--tg-primary-color);
  font-size: 20px;
  line-height: 0;
  cursor: pointer;
  transition: all 0.3s ease-out 0s;
}

.team-social-three .list-wrap a {
  font-size: 18px;
}

.team-social-three .list-wrap a:hover {
  color: var(--tg-secondary-color);
}

/* team-four */
.team-item-four {
  margin-bottom: 30px;
}

.team-thumb-four {
  position: relative;
  margin-bottom: 20px;
}

.team-thumb-four img {
  border-radius: 10px;
}

.team-content-four .title {
  font-size: 24px;
  margin-bottom: 5px;
}

.team-content-four span {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-primary-color);
}

.team-item-four .team-social-three {
  inset-inline-end: 20px;
  bottom: 20px;
  top: auto;
  inset-inline-start: auto;
  display: flex;
  flex-direction: column-reverse;
}

.team-item-four .team-social-three .list-wrap {
  padding: 15px 0 0;
}

/* team-five */
.team-item-five {
  border: 1px solid #d4dced;
  border-radius: 30px;
  text-align: center;
  margin-bottom: 30px;
  padding: 40px 40px 50px;
}

.team-thumb-five {
  margin-bottom: 20px;
}

.team-thumb-five img {
  border-radius: 50%;
}

.team-content-five .title {
  font-size: 22px;
  margin-bottom: 5px;
}

.team-content-five span {
  display: block;
  color: var(--tg-gray-four);
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.team-content-five span::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 30px;
  height: 5px;
  border-radius: 5px;
  background: var(--tg-primary-color);
}

.team-social-four .list-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.team-social-four .list-wrap li a {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--primary-color-rgb)/20%);
  font-size: 15px;
}

.team-social-four .list-wrap li a:hover {
  color: var(--tg-white);
  background: var(--tg-primary-color);
}

/* team-six */
.team-area-six {
  background: var(--tg-section-background);
  padding: 220px 0 90px;
  margin-top: -100px;
}

/* team-details */
.team-details-info-wrap {
  margin-inline-end: 30px;
}

.team-details-thumb {
  margin-bottom: 30px;
}

.team-details-thumb img {
  border-radius: 10px;
}

.team-details-info .list-wrap {
  margin-bottom: 30px;
}

.team-details-info .list-wrap li {
  display: flex;
  align-items: flex-start;
  font-weight: 600;
  font-size: 18px;
  font-family: var(--tg-heading-font-family);
  margin-bottom: 10px;
}

.team-details-info .list-wrap li:last-child {
  margin-bottom: 0;
}

.team-details-info .list-wrap li i {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 0;
  color: var(--tg-primary-color);
  font-size: 20px;
  background: rgba(var(--primary-color-rgb)/20%);
  transform: translateY(-4px);
  margin-inline-end: 10px;
}

.td-info-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.td-info-bottom .share-btn {
  background: rgba(var(--primary-color-rgb)/20%);
  border-radius: 30px;
  text-transform: uppercase;
  padding: 13px 24px;
  display: block;
  height: 52px;
}

.td-info-bottom .share-btn img {
  margin-inline-end: 10px;
  transition: all 0.3s ease-out 0s;
}

.td-info-bottom .share-btn:hover {
  background: var(--tg-primary-color);
  color: var(--tg-white);
}

.td-info-bottom .share-btn:hover img {
  filter: brightness(0) invert(1);
}

.team-details-content > .title {
  margin-bottom: 8px;
  font-size: 36px;
  text-transform: capitalize;
}

.team-details-content > span {
  display: block;
  line-height: 1;
  color: var(--tg-gray-four);
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 25px;
}

.team-details-content > span::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 30px;
  height: 4px;
  border-radius: 4px;
  background: var(--tg-primary-color);
}

.team-details-content p {
  margin-bottom: 0;
}

.team-skill-wrap {
  margin-top: 45px;
}

.team-skill-wrap > .title-two {
  margin-bottom: 15px;
  font-size: 30px;
  text-transform: capitalize;
  position: relative;
  padding-bottom: 20px;
}

.team-skill-wrap > .title-two::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 30px;
  height: 4px;
  border-radius: 4px;
  background: var(--tg-primary-color);
}

.team-skill-wrap p {
  margin-bottom: 0;
}

.team-skill-wrap .progress-wrap {
  margin: 25px 0 40px;
}

/*=============================
	21. Testimonial
===============================*/
.testimonial-bg {
  background-size: cover;
  background-position: left center;
  padding: 120px 0;
}

.testimonial-img {
  position: relative;
  text-align: center;
}

.testimonial-img > img {
  border-radius: 30px 85px 30px 95px;
  border: 6px solid var(--tg-white);
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.25);
}

.testimonial-img .review-wrap {
  background: var(--tg-white);
  max-width: 180px;
  border-radius: 20px;
  padding: 20px 25px 20px;
  position: absolute;
  inset-inline-start: -30px;
  bottom: 17%;
}

.testimonial-img .review-wrap img {
  margin-bottom: 15px;
}

.testimonial-img .review-wrap .content {
  display: flex;
  align-items: center;
}

.testimonial-img .review-wrap .content .title {
  margin-bottom: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--tg-primary-color);
  margin-inline-end: 10px;
}

.testimonial-img .review-wrap .content p {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--tg-secondary-color);
  line-height: 1.2;
}

.testimonial-content {
  width: 82%;
}

.testimonial-content .content-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.testimonial-content .content-top .rating {
  display: flex;
  align-items: center;
  color: var(--tg-yellow);
  font-size: 20px;
  gap: 5px;
}

.testimonial-content p {
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 25px;
  color: var(--tg-white);
  font-family: var(--tg-heading-font-family);
}

.testimonial-info .title {
  color: var(--tg-white);
  font-size: 22px;
  margin-bottom: 8px;
}

.testimonial-info span {
  display: block;
  font-family: var(--tg-heading-font-family);
  color: var(--tg-lavender);
  position: relative;
  padding-bottom: 16px;
  line-height: 1;
}

.testimonial-info span::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: var(--tg-primary-color);
}

.testimonial-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}

.testimonial-nav button {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #0f2d6a;
  color: var(--tg-white);
  font-size: 22px;
  line-height: 0;
  border-radius: 50%;
}

.testimonial-nav button.slick-prev {
  transform: rotate(-180deg);
}

.testimonial-nav button:hover {
  background: var(--tg-primary-color);
}

/* testimonial-two */
.testimonial-bg-two {
  background-size: cover;
  background-position: center;
  padding: 120px 0;
}

.section-title-two.white-title .sub-title {
  background: #1e376a;
  color: var(--tg-white);
}

.testimonial-item-wrap-two {
  padding: 0 30px;
  position: relative;
}

.testimonial-item-two {
  background: var(--tg-white);
  border-radius: 10px;
  padding: 40px 40px;
}

.testimonial-content-two .rating {
  display: flex;
  align-items: center;
  color: var(--tg-yellow);
  font-size: 20px;
  gap: 5px;
  margin-bottom: 20px;
}

.testimonial-content-two > p {
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--tg-paragraph-color);
  font-family: var(--tg-heading-font-family);
  line-height: 1.5;
}

.testimonial-avatar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.testimonial-avatar .avatar-thumb {
  width: 65px;
  flex: 0 0 auto;
  margin-inline-end: 30px;
}

.testimonial-avatar .avatar-thumb img {
  border-radius: 50%;
}

.testimonial-avatar .avatar-info {
  position: relative;
}

.testimonial-avatar .avatar-info::before {
  content: "";
  position: absolute;
  inset-inline-start: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 36px;
  border-radius: 2px;
  background: var(--tg-primary-color);
}

.testimonial-avatar .avatar-info .title {
  font-size: 22px;
  margin-bottom: 5px;
  color: var(--tg-paragraph-color);
}

.testimonial-avatar .avatar-info span {
  font-family: var(--tg-heading-font-family);
  line-height: 1;
  display: block;
  font-weight: 400;
}

.testimonial-active-two [class*=col-] {
  padding: 0 15px;
}

.testimonial-nav-two .slick-arrow {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50px;
  line-height: 0;
  color: var(--tg-white);
  font-size: 22px;
  background: #0f2d6a;
  position: absolute;
  inset-inline-start: -40px;
  top: 50%;
  transform: translateY(-50%);
}

.testimonial-nav-two .slick-arrow.slick-next {
  inset-inline-start: auto;
  inset-inline-end: -40px;
}

.testimonial-nav-two .slick-arrow.slick-prev i {
  transform: rotate(-180deg);
}

.testimonial-nav-two .slick-arrow:hover {
  color: #0f2d6a;
  background: var(--tg-white);
}

/* testimonial-three */
.testimonial-area-three .row .col-37 {
  width: 37%;
  flex: 0 0 auto;
}

.testimonial-area-three .row .col-63 {
  width: 63%;
  flex: 0 0 auto;
}

.testimonial-img-three img {
  -webkit-clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
          clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
  width: 100%;
}

.testimonial-item-wrap-three {
  background: var(--tg-section-background);
  border-radius: 10px;
  padding: 100px 80px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.testimonial-content-three .rating {
  display: flex;
  align-items: center;
  font-size: 20px;
  gap: 5px;
  color: var(--tg-yellow);
  margin-bottom: 30px;
}

.testimonial-content-three p {
  font-weight: 600;
  font-size: 20px;
  color: var(--tg-secondary-color);
  font-style: italic;
  font-family: var(--tg-heading-font-family);
  line-height: 1.5;
  margin-bottom: 35px;
}

.testimonial-content-three .testimonial-info .title {
  color: var(--tg-secondary-color);
}

.testimonial-content-three .testimonial-info span {
  color: var(--tg-paragraph-color);
}

.testimonial-nav-three {
  position: absolute;
  display: flex;
  align-items: center;
  inset-inline-start: 45%;
  bottom: 25%;
  gap: 10px;
}

.testimonial-nav-three .slick-arrow {
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-white);
  background: var(--tg-secondary-color);
  line-height: 0;
  font-size: 22px;
}

.testimonial-nav-three .slick-arrow:hover {
  background: var(--tg-primary-color);
}

.testimonial-nav-three .slick-arrow.slick-prev {
  transform: rotate(-180deg);
}

/* testimonial-four */
.testimonial-bg-four {
  background-size: cover;
  background-position: center;
  padding: 120px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.testimonial-img-four {
  position: relative;
  z-index: 1;
  padding-inline-start: 42px;
}

.testimonial-img-four::before {
  content: "";
  position: absolute;
  width: 335px;
  height: 335px;
  inset-inline-start: 10.2%;
  bottom: 1px;
  background: #fff9e4;
  border-radius: 50%;
  z-index: -1;
}

.testimonial-img-four .icon {
  position: absolute;
  inset-inline-start: 7%;
  top: 18%;
  width: 80px;
  height: 80px;
  background: var(--tg-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 59% 41% 28% 72%/38% 37% 63% 62%;
}

.testimonial-img-four .shape {
  position: absolute;
  inset-inline-start: 0;
  bottom: -20px;
  z-index: -2;
}

.testimonial-item-wrap-four {
  position: relative;
  padding-inline-end: 125px;
}

.testimonial-content-four .rating {
  display: flex;
  align-items: center;
  color: var(--tg-yellow);
  gap: 5px;
  margin-bottom: 35px;
}

.testimonial-content-four > p {
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 30px;
  font-style: italic;
  color: var(--tg-white);
  font-family: var(--tg-heading-font-family);
}

.testimonial-content-four .testimonial-info span::before {
  display: none;
}

.testimonial-content-four .testimonial-info span {
  padding-bottom: 0;
}

.testimonial-content-four .testimonial-info {
  position: relative;
  padding-inline-start: 16px;
}

.testimonial-content-four .testimonial-info::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 40px;
  border-radius: 4px;
  background: var(--tg-primary-color);
}

.testimonial-nav-four {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset-inline-end: 25px;
  top: 50%;
  transform: translateY(-50%);
  gap: 15px;
}

.testimonial-nav-four .slick-arrow {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f2d6a;
  border: none;
  border-radius: 50%;
  color: var(--tg-white);
  font-size: 22px;
  line-height: 0;
}

.testimonial-nav-four .slick-arrow:hover {
  background: var(--tg-primary-color);
}

.testimonial-nav-four .slick-arrow.slick-next {
  transform: rotate(180deg);
}

.testimonial-shape-wrap-four img {
  position: absolute;
  z-index: -1;
}

.testimonial-shape-wrap-four img:nth-child(1) {
  inset-inline-start: 0;
  bottom: 0;
}

.testimonial-shape-wrap-four img:nth-child(2) {
  inset-inline-end: 0;
  top: 0;
}

/* testimonial-five */
.testimonial-area-five {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}

.testimonial-area-five::before {
  content: "";
  position: absolute;
  inset-inline-end: 22%;
  bottom: 22%;
  width: 350px;
  height: 350px;
  background: #fae7ff;
  filter: blur(200px);
  z-index: -1;
  border-radius: 50%;
}

.testimonial-img-five {
  position: relative;
  text-align: center;
}

.testimonial-img-five img:not(:nth-child(1)) {
  position: absolute;
  z-index: -1;
}

.testimonial-img-five .shape-one {
  inset-inline-start: 3%;
  bottom: 7px;
}

.testimonial-img-five .shape-two {
  inset-inline-start: 17%;
  top: 35%;
  animation: alltuchtopdown 8s infinite linear;
}

.testimonial-img-five .shape-three {
  inset-inline-start: 11%;
  bottom: 12%;
  animation: rotateme 8s infinite linear;
}

.testimonial-content-five {
  padding-inline-end: 112px;
}

.testimonial-item-wrap-five {
  position: relative;
}

.testimonial-item-wrap-five .testimonial-content p {
  color: var(--tg-paragraph-color);
}

.testimonial-item-wrap-five .testimonial-content {
  width: 100%;
}

.testimonial-item-wrap-five .testimonial-quote img {
  opacity: 0.4;
}

.testimonial-active-five {
  margin: -15px 0;
}

.testimonial-active-five .testimonial-item {
  padding: 15px 0;
}

.testimonial-nav-five {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  inset-inline-end: -120px;
  top: 50%;
  transform: translateY(-50%);
  justify-content: center;
  gap: 15px;
}

.testimonial-nav-five .slick-arrow {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c2c2c2;
  transform: rotate(-90deg);
  color: var(--tg-primary-color);
  font-size: 20px;
  line-height: 0;
  background: transparent;
  border-radius: 50%;
}

.testimonial-nav-five .slick-arrow.slick-next {
  transform: rotate(90deg);
}

.testimonial-nav-five .slick-arrow:hover {
  background: var(--tg-primary-color);
  color: var(--tg-white);
  border-color: var(--tg-primary-color);
}

/*=============================
	22. Pricing
===============================*/
.pricing-area {
  position: relative;
  overflow: hidden;
  padding: 120px 0 90px;
}

.pricing-area::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  top: -35%;
  width: 760px;
  height: 760px;
  background: linear-gradient(154.68deg, #8894ff 11.62%, #ff8585 90.47%);
  opacity: 0.1;
  filter: blur(75px);
  border-radius: 50%;
  z-index: -1;
}

.pricing-item-wrap .pricing-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 40px;
}

.pricing-item-wrap .pricing-tab .tab-btn {
  cursor: pointer;
  color: var(--tg-paragraph-color);
  font-weight: 600;
  font-size: 18px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: var(--tg-heading-font-family);
  transition: 0.3s;
}

.pricing-item-wrap .pricing-tab .tab-btn.monthly_tab_title {
  color: var(--tg-primary-color);
}

.pricing-item-wrap .pricing-tab .tab-btn.monthly_tab_title.active {
  color: var(--tg-paragraph-color);
}

.pricing-item-wrap .pricing-tab .annual_tab_title.active {
  color: var(--tg-primary-color);
}

.pricing-tab .pricing-tab-switcher {
  height: 30px;
  width: 70px;
  display: inline-block;
  border-radius: 30px;
  position: relative;
  margin: 0 15px;
  transform: translateY(0px);
  cursor: pointer;
  background: var(--tg-primary-color);
}

.pricing-tab .pricing-tab-switcher:before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 2px;
  bottom: 2px;
  width: 26px;
  border-radius: 50%;
  background: var(--tg-white);
  transition: 0.3s;
}

.pricing-tab .pricing-tab-switcher.active:before {
  inset-inline-start: calc(100% - 28px);
}

.pricing-price.change-subs-duration .monthly_price {
  display: none;
}

.pricing-price.change-subs-duration .annual_price {
  display: flex;
}

.pricing-box {
  border: 1px solid #e1e1e9;
  border-radius: 10px;
  text-align: center;
  padding: 40px 40px;
  background: var(--tg-white);
  margin-bottom: 30px;
  position: relative;
  margin-top: 16px;
}

.pricing-box .popular-tag {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  background: var(--tg-red);
  color: var(--tg-white);
  line-height: 1.2;
  padding: 7px 18px;
  border-radius: 30px;
  position: absolute;
  top: -16px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.pricing-head .title {
  font-size: 24px;
  margin-bottom: 10px;
}

.pricing-head p {
  margin-bottom: 24px;
  color: var(--tg-gray-four);
}

.pricing-price {
  margin-bottom: 25px;
}

.pricing-price .price {
  margin-bottom: 0;
  font-size: 30px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: #f3f6fe;
  border-radius: 30px;
  padding: 15px 20px;
}

.pricing-price .price strong {
  font-weight: 500;
  font-size: 16px;
  font-family: var(--tg-body-font-family);
  margin: 4px 3px auto 0;
}

.pricing-price .price span {
  color: #798eb9;
  text-transform: lowercase;
  font-weight: 500;
  font-size: 13px;
  font-family: var(--tg-body-font-family);
  margin-inline-start: 5px;
  margin-bottom: 7px;
}

.pricing-price .annual_price {
  display: none;
}

.pricing-list .list-wrap {
  margin-bottom: 25px;
}

.pricing-list .list-wrap li {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-paragraph-color);
  margin-bottom: 15px;
}

.pricing-list .list-wrap li:last-child {
  margin-bottom: 0;
}

.pricing-list .list-wrap li img {
  margin-inline-end: 10px;
}

.pricing-btn .btn {
  background: rgba(var(--primary-color-rgb)/20%);
  color: var(--tg-primary-color);
}

.pricing-btn .btn::before {
  background: var(--tg-cornflower-blue);
}

.pricing-box.active .pricing-btn .btn {
  background: var(--tg-primary-color);
  color: var(--tg-white);
}

.pricing-box.active .pricing-btn .btn::before {
  background: rgba(var(--primary-color-rgb)/20%);
}

/* pricing-two */
.pricing-area-two {
  position: relative;
  padding: 120px 0 90px;
  overflow: hidden;
}

.pricing-shape {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.pricing-box-two {
  border: 1px solid #e1e1e9;
  border-radius: 10px;
  margin-bottom: 30px;
  position: relative;
}

.pricing-box-two .popular {
  font-weight: 600;
  font-size: 15px;
  background: var(--tg-red);
  color: var(--tg-white);
  display: block;
  line-height: 1;
  position: absolute;
  inset-inline-end: 0;
  top: 80px;
  border-radius: 30px 0 0 30px;
  padding: 8px 18px;
  z-index: -1;
}

.pricing-head-two {
  padding: 50px 50px 40px;
  border-bottom: 1px solid #e1e1e9;
}

.pricing-head-two .title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 10px;
}

.pricing-price-two .price {
  font-weight: 800;
  font-size: 40px;
  margin-bottom: 0;
  display: flex;
  align-items: flex-end;
  line-height: 1;
}

.pricing-price-two .price strong {
  font-weight: 600;
  font-size: 20px;
  margin: 4px 3px auto 0;
}

.pricing-price-two .price span {
  color: #798eb9;
  text-transform: lowercase;
  font-weight: 500;
  font-size: 13px;
  font-family: var(--tg-body-font-family);
  margin-inline-start: 2px;
  margin-bottom: 7px;
}

.pricing-price-two .annual_price {
  display: none;
}

.pricing-price-two.change-subs-duration .annual_price {
  display: flex;
}

.pricing-price-two.change-subs-duration .monthly_price {
  display: none;
}

.pricing-bottom {
  padding: 30px 50px 50px;
}

.pricing-box-two .pricing-list .list-wrap {
  margin-bottom: 30px;
}

.pricing-box-two .pricing-list .list-wrap li {
  justify-content: start;
}

.pricing-btn-two {
  text-align: center;
}

/* pricing-three */
.pricing-area-three {
  position: relative;
  padding: 120px 0 90px;
  overflow: hidden;
  background: #f8f8fa;
  z-index: 1;
}

.pricing-box-three {
  border: 1px solid #e1e1e9;
  border-radius: 20px;
  padding: 50px 50px 60px;
  text-align: center;
  background: var(--tg-white);
  margin-bottom: 30px;
}

.pricing-box-three .pricing-icon {
  font-size: 65px;
  line-height: 0;
  color: var(--tg-primary-color);
  margin-bottom: 20px;
}

.pricing-box-three .pricing-plan .title {
  color: var(--tg-gray-four);
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 20px;
}

.pricing-box-three .pricing-price-two {
  margin-bottom: 30px;
}

.pricing-box-three .pricing-price-two .price {
  justify-content: center;
}

.pricing-box-three .pricing-list .list-wrap {
  margin-bottom: 35px;
}

/*=============================
	23. Contact
===============================*/
.contact-bg {
  background-size: cover;
  background-position: center;
  padding: 120px 0;
  position: relative;
  z-index: 1;
}

.contact-content p {
  margin-bottom: 0;
}

.contact-form {
  margin: 0 30px 0 80px;
}

.contact-form .form-grp {
  margin-bottom: 15px;
}

.contact-form .form-grp textarea,
.contact-form .form-grp input {
  width: 100%;
  border: 1px solid #d5dae4;
  border-radius: 4px;
  background: var(--tg-white);
  color: var(--tg-secondary-color);
  font-weight: 500;
  font-size: 13px;
  padding: 14px 18px;
  height: 50px;
  display: block;
}

.contact-form .form-grp textarea::-moz-placeholder, .contact-form .form-grp input::-moz-placeholder {
  color: var(--tg-paragraph-color);
  font-weight: 500;
  font-size: 13px;
}

.contact-form .form-grp textarea::placeholder,
.contact-form .form-grp input::placeholder {
  color: var(--tg-paragraph-color);
  font-weight: 500;
  font-size: 13px;
}

.contact-form .form-grp textarea {
  min-height: 96px;
  max-height: 96px;
}

.contact-form form button {
  border: none;
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--tg-white);
  text-transform: uppercase;
  background: var(--tg-primary-color);
  border-radius: 30px;
  padding: 14px 20px;
}

.contact-form form button:hover {
  background: var(--tg-secondary-color);
}

.contact-shape {
  position: absolute;
  z-index: -1;
  top: 10%;
  inset-inline-start: 31%;
  animation: animationFramesOne 15s linear infinite;
}

/* inner-contact */
.inner-contact-info {
  padding-inline-start: 80px;
}

.inner-contact-info .title {
  margin-bottom: 25px;
  position: relative;
  font-weight: 800;
  font-size: 36px;
  padding-bottom: 20px;
}

.inner-contact-info .title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 30px;
  height: 4px;
  background: var(--tg-primary-color);
  border-radius: 4px;
}

.contact-info-item {
  margin-bottom: 50px;
}

.contact-info-item:last-child {
  margin-bottom: 0;
}

.contact-info-item .title-two {
  font-size: 24px;
  margin-bottom: 20px;
}

.contact-info-item .list-wrap li {
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.33;
  font-family: var(--tg-heading-font-family);
}

.contact-info-item .list-wrap li:last-child {
  margin-bottom: 0;
}

.contact-map {
  width: 100%;
  height: 500px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  mix-blend-mode: luminosity;
}

/*=============================
	24. Blog
===============================*/
.blog-post-area {
  position: relative;
  z-index: 1;
  padding: 120px 0 90px;
}

.blog-post-area .blog-bg {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 62%;
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  z-index: -1;
}

.blog-post-item {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  background: var(--tg-white);
  border-radius: 10px;
  margin-bottom: 30px;
}

.blog-post-thumb {
  position: relative;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.blog-post-thumb img {
  width: 100%;
  transform: scale(1);
}

.blog-post-item:hover .blog-post-thumb img {
  transform: scale(1.1);
}

.blog-post-thumb .date {
  background: var(--tg-primary-color);
  display: block;
  font-weight: 500;
  font-size: 16px;
  color: var(--tg-white);
  line-height: 1;
  position: absolute;
  inset-inline-start: 30px;
  top: 0;
  padding: 15px 20px;
  border-radius: 0 0 30px 30px;
  text-align: center;
}

.blog-post-thumb .date strong {
  font-weight: 700;
  font-size: 24px;
  font-family: var(--tg-heading-font-family);
  display: block;
  line-height: 1;
}

.blog-post-content {
  padding: 25px 30px 30px;
  border-radius: 0 0 10px 10px;
}

.blog-post-content .tag {
  font-size: 14px;
  display: inline-block;
  margin-bottom: 8px;
}

.blog-post-content .tag:hover {
  color: var(--tg-secondary-color);
}

.blog-post-content .title {
  font-size: 24px;
  margin-bottom: 10px;
}

.blog-post-content p {
  margin-bottom: 20px;
}

.blog-post-content .link-btn {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  color: var(--tg-paragraph-color);
}

.blog-post-content .link-btn i {
  line-height: 0;
  font-size: 22px;
  margin-inline-start: 10px;
  color: var(--tg-primary-color);
}

.blog-post-content .link-btn:hover {
  color: var(--tg-primary-color);
}

/* blog-two */
.blog-bg-two {
  background-size: cover;
  background-position: center;
  padding: 120px 0 90px;
}

.section-title-two p {
  color: var(--tg-paragraph-color);
  width: 90%;
  margin: 15px auto 0;
}

.blog-post-item-two {
  margin-bottom: 30px;
}

.blog-post-thumb-two {
  position: relative;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.blog-post-thumb-two img {
  transition: 0.3s linear;
  width: 100%;
  min-height: 275px;
}

.blog-post-item-two:hover .blog-post-thumb-two img {
  transform: scale(1.1);
}

.blog-post-thumb-two .tag {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--tg-white);
  background: var(--tg-primary-color);
  padding: 9px 16px;
  display: block;
}

.blog-post-thumb-two .tag:hover {
  background: var(--tg-secondary-color);
}

.blog-post-content-two {
  border: 1px solid #e7e7e7;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 35px 30px;
  background: var(--tg-white);
}

.blog-post-content-two .title {
  font-size: 24px;
  margin-bottom: 10px;
}

.blog-post-content-two p {
  margin-bottom: 25px;
}

.blog-meta .list-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px 10px;
}

.blog-meta .list-wrap li {
  color: var(--tg-paragraph-color);
  font-size: 13px;
  display: flex;
  align-items: center;
}

.blog-meta .list-wrap li i {
  font-size: 20px;
  color: var(--tg-primary-color);
  margin-inline-end: 8px;
}

.blog-meta .list-wrap li a {
  color: var(--tg-paragraph-color);
  font-size: 16px;
}

.blog-meta .list-wrap li a:hover {
  color: var(--tg-primary-color);
}

.blog-meta .list-wrap li a img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-inline-end: 10px;
  flex: 0 0 auto;
}

/* blog-three */
.blog-post-thumb-two .tag-two {
  position: absolute;
  inset-inline-start: 30px;
  top: 25px;
  bottom: auto;
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-white);
  background: var(--tg-primary-color);
  padding: 6px 16px;
  display: block;
  border-radius: 30px;
}

.blog-post-thumb-two .tag-two:hover {
  background: var(--tg-secondary-color);
}

/* blog-four */
.blog-post-thumb-four {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.blog-post-thumb-four img {
  width: 100%;
}

.blog-post-content-four {
  border: 1px solid #e7e7e7;
  border-radius: 0 0 10px 10px;
  border-top: none;
  padding: 40px 35px 35px;
  position: relative;
  margin-bottom: 30px;
}

.blog-post-content-four .tag {
  font-size: 14px;
  font-weight: 700;
  display: block;
  text-transform: capitalize;
  background: var(--tg-primary-color);
  color: var(--tg-white);
  position: absolute;
  inset-inline-start: 30px;
  top: -18px;
  padding: 8px 16px;
  border-radius: 30px;
}

.blog-post-content-four .tag:hover {
  background: var(--tg-secondary-color);
}

.blog-meta-two .list-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 25px;
  margin-bottom: 20px;
}

.blog-meta-two .list-wrap li {
  font-weight: 600;
  font-size: 13px;
  text-transform: capitalize;
  display: flex;
  align-items: center;
}

.blog-meta-two .list-wrap li i {
  font-size: 20px;
  margin-inline-end: 8px;
  color: var(--tg-primary-color);
}

.blog-meta-two .list-wrap li a {
  color: var(--tg-paragraph-color);
  margin-inline-start: 5px;
}

.blog-meta-two .list-wrap li a:hover {
  color: var(--tg-primary-color);
}

.blog-post-content-four .title {
  font-size: 24px;
  margin-bottom: 15px;
}

.blog-post-content-four .link-btn {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tg-paragraph-color);
}

.blog-post-content-four .link-btn i {
  line-height: 0;
  font-size: 20px;
  color: var(--tg-primary-color);
  margin-inline-start: 10px;
}

.blog-post-content-four .link-btn:hover {
  color: var(--tg-primary-color);
}

/* inner-blog */
.inner-blog-wrap .row .col-71 {
  width: 71%;
  flex: 0 0 auto;
}

.inner-blog-wrap .row .col-29 {
  width: 29%;
  flex: 0 0 auto;
}

.pagination-wrap .pagination {
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.pagination-wrap .pagination .page-link {
  margin-inline-start: 0;
  padding: 0 0;
  color: var(--tg-gray-four);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  width: 52px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  background: transparent;
  font-family: var(--tg-heading-font-family);
}

.pagination-wrap .pagination .page-item.active .page-link,
.pagination-wrap .pagination .page-link:hover {
  background: var(--tg-primary-color);
  border-color: var(--tg-primary-color);
  color: var(--tg-white);
}

.pagination-wrap .pagination .page-link:focus {
  color: var(--tg-white);
  background-color: var(--tg-primary-color);
  border-color: var(--tg-primary-color);
  outline: 0;
  box-shadow: none;
}

.blog-sidebar {
  margin-inline-start: 15px;
}

.sidebar-search {
  margin-bottom: 30px;
}

.sidebar-search form {
  position: relative;
}

.sidebar-search form input {
  width: 100%;
  background: transparent;
  border: 1px solid #e0e6f2;
  border-radius: 10px;
  padding: 20px 55px 20px 28px;
  font-weight: 400;
  font-size: 14px;
  color: var(--tg-paragraph-color);
  height: 65px;
}

.sidebar-search form input::-moz-placeholder {
  font-weight: 400;
  font-size: 14px;
  color: var(--tg-gray-four);
}

.sidebar-search form input::placeholder {
  font-weight: 400;
  font-size: 14px;
  color: var(--tg-gray-four);
}

.sidebar-search form button {
  position: absolute;
  inset-inline-end: 24px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  font-size: 24px;
  color: var(--tg-primary-color);
  line-height: 0;
}

.blog-widget {
  border: 1px solid #e0e6f2;
  border-radius: 10px;
  padding: 25px 30px 30px;
  margin-bottom: 30px;
}

.blog-widget:last-child {
  margin-bottom: 0;
}

.blog-widget .bw-title {
  margin-bottom: 25px;
  font-size: 22px;
  position: relative;
  padding-bottom: 12px;
}

.blog-widget .bw-title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 30px;
  height: 4px;
  border-radius: 4px;
  background: var(--tg-primary-color);
}

.bs-cat-list .list-wrap li {
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 15px;
  padding-bottom: 12px;
}

.bs-cat-list .list-wrap li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}

.bs-cat-list .list-wrap li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 16px;
  color: var(--tg-paragraph-color);
}

.bs-cat-list .list-wrap li a span {
  font-size: 14px;
  color: var(--tg-gray-four);
  transition: all 0.3s ease-out 0s;
}

.bs-cat-list .list-wrap li a:hover span,
.bs-cat-list .list-wrap li a:hover {
  color: var(--tg-primary-color);
}

.rc-post-item {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.rc-post-item:last-child {
  margin-bottom: 0;
}

.rc-post-item .thumb {
  width: 75px;
  flex: 0 0 auto;
  margin-inline-end: 15px;
}

.rc-post-item .thumb img {
  border-radius: 8px;
}

.rc-post-item .content .date {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--tg-gray-four);
  margin-bottom: 8px;
}

.rc-post-item .content .date i {
  margin-inline-end: 8px;
  color: var(--tg-primary-color);
  font-size: 20px;
}

.rc-post-item .content .title {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 16px;
  text-transform: capitalize;
  color: var(--tg-paragraph-color);
}

.bs-tag-list .list-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.bs-tag-list .list-wrap li a {
  font-weight: 500;
  font-size: 16px;
  background: rgba(var(--primary-color-rgb)/20%);
  display: block;
  border-radius: 4px;
  padding: 5px 15px;
}

.bs-tag-list .list-wrap li a:hover {
  color: var(--tg-white);
  background: var(--tg-primary-color);
}

/* blog-details */
.blog-details-wrap .row .col-71 {
  width: 71%;
  flex: 0 0 auto;
}

.blog-details-wrap .row .col-29 {
  width: 29%;
  flex: 0 0 auto;
}

.blog-details-thumb {
  margin-bottom: 30px;
}

.blog-details-thumb img {
  border-radius: 10px;
}

.blog-details-content > .title {
  font-size: 36px;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.blog-meta-three .list-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 25px;
}

.blog-meta-three .list-wrap li {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--tg-paragraph-color);
  gap: 5px;
}

.blog-meta-three .list-wrap li i {
  line-height: 0;
  color: var(--tg-primary-color);
  font-size: 20px;
  margin-inline-end: 5px;
}

.blog-meta-three .list-wrap li img {
  border-radius: 50%;
  margin-inline-end: 5px;
}

.blog-meta-three .list-wrap li a {
  color: var(--tg-paragraph-color);
}

.blog-meta-three .list-wrap li a:hover {
  color: var(--tg-primary-color);
}

.blog-details-content > p {
  margin-bottom: 15px;
}

.blog-details-content blockquote {
  margin: 50px 50px 60px;
  background: var(--tg-section-background);
  padding: 50px 120px 50px 50px;
  position: relative;
  z-index: 1;
}

.blog-details-content blockquote::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: var(--tg-primary-color);
}

.blog-details-content blockquote::after {
  content: "\f10e";
  font-weight: 700;
  font-size: 52px;
  color: #e2e5f7;
  line-height: 1;
  font-family: "Font Awesome 5 Free";
  position: absolute;
  inset-inline-end: 33px;
  top: 27px;
  z-index: -1;
}

.blog-details-content blockquote p {
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  font-family: var(--tg-heading-font-family);
}

.blog-details-content .title-two {
  font-size: 30px;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.bd-inner-wrap {
  margin: 35px 0;
}

.bd-inner-wrap .row .col-46 {
  width: 46%;
  flex: 0 0 auto;
}

.bd-inner-wrap .row .col-54 {
  width: 54%;
  flex: 0 0 auto;
}

.bd-inner-wrap .thumb {
  position: relative;
}

.bd-inner-wrap .thumb img {
  width: 100%;
  border-radius: 10px;
}

.bd-inner-wrap .thumb .play-btn {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-white);
  border-radius: 50%;
}

.bd-inner-wrap .thumb .play-btn::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid var(--tg-white);
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
  animation: pulse-border 1500ms ease-out infinite;
}

.bd-inner-wrap .content p {
  margin-bottom: 15px;
}

.bd-inner-wrap .content .list-wrap li {
  display: flex;
  align-items: flex-start;
  font-weight: 600;
  font-size: 18px;
  font-family: var(--tg-heading-font-family);
  color: var(--tg-secondary-color);
  line-height: 1.3;
  margin-bottom: 15px;
}

.bd-inner-wrap .content .list-wrap li:last-child {
  margin-bottom: 0;
}

.bd-inner-wrap .content .list-wrap li img {
  margin-inline-end: 10px;
}

.bd-content-bottom {
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  padding: 15px 0;
  margin-top: 40px;
  margin-bottom: 70px;
}

.bd-content-bottom .post-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.bd-content-bottom .post-tags .title {
  margin-bottom: 0;
  font-size: 18px;
  color: var(--tg-paragraph-color);
}

.bd-content-bottom .post-tags .list-wrap li {
  display: inline-block;
  margin: 0 7px 10px 0;
}

.bd-content-bottom .post-tags .list-wrap li a {
  background: rgba(var(--primary-color-rgb)/20%);
  padding: 9px 22px;
  display: block;
  border-radius: 4px;
}

.bd-content-bottom .post-tags .list-wrap li a:hover {
  background: var(--tg-primary-color);
  color: var(--tg-white);
}

.bd-content-bottom .blog-post-share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.bd-content-bottom .blog-post-share .title {
  margin-bottom: 0;
  font-size: 18px;
  color: var(--tg-paragraph-color);
}

.bd-content-bottom .blog-post-share .list-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bd-content-bottom .blog-post-share .list-wrap li a {
  color: var(--tg-gray-four);
}

.bd-content-bottom .blog-post-share .list-wrap li a:hover {
  color: var(--tg-primary-color);
}

.blog-avatar-wrap {
  border: 1px solid #e6eeff;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  padding: 42px 42px;
  background: var(--tg-section-background);
}

.blog-avatar-img {
  width: 115px;
  flex: 0 0 auto;
  margin-inline-end: 30px;
}

.blog-avatar-img img {
  border-radius: 50%;
}

.blog-avatar-info .designation {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: var(--tg-primary-color);
  line-height: 1;
  margin-bottom: 10px;
}

.blog-avatar-info .name {
  margin-bottom: 10px;
  font-size: 20px;
}

.blog-avatar-info p {
  margin-bottom: 0;
}

.latest-comments {
  margin-bottom: 80px;
}

.comments-wrap-title {
  font-size: 24px;
  margin-bottom: 25px;
}

.comments-box {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #d6dce9;
  padding-bottom: 30px;
  margin-bottom: 35px;
}

.latest-comments .children {
  margin: 0 0 0 45px;
  padding: 0;
}

.comments-avatar {
  width: 115px;
  flex: 0 0 auto;
  margin-inline-end: 25px;
}

.comments-avatar img {
  border-radius: 50%;
}

.comments-text .avatar-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.comments-text .avatar-name .name {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
}

.comments-text .avatar-name span {
  font-weight: 500;
  font-size: 15px;
  display: block;
  color: var(--tg-primary-color);
}

.comments-text p {
  margin-bottom: 15px;
}

.comments-text .reply-btn {
  background: rgba(var(--primary-color-rgb)/20%);
  font-weight: 500;
  font-size: 14px;
  display: inline-block;
  padding: 6px 17px;
  text-transform: uppercase;
  border-radius: 5px;
}

.comments-text .reply-btn:hover {
  background: var(--tg-primary-color);
  color: var(--tg-white);
}

.comment-respond {
  border: 1px solid #b3ccff;
  border-radius: 8px;
  padding: 35px 40px 50px;
  background: var(--tg-section-background);
}

.comment-reply-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.comment-form .comment-notes {
  margin-bottom: 15px;
}

.comment-form .form-grp {
  margin-bottom: 15px;
}

.comment-form .form-grp textarea,
.comment-form .form-grp input {
  width: 100%;
  border: 1px solid var(--tg-lavender);
  background: var(--tg-white);
  font-weight: 400;
  font-size: 15px;
  color: var(--tg-paragraph-color);
  padding: 12px 15px;
  height: 50px;
  display: block;
  border-radius: 5px;
}

.comment-form .form-grp textarea::-moz-placeholder, .comment-form .form-grp input::-moz-placeholder {
  font-weight: 400;
  font-size: 15px;
  color: var(--tg-gray-four);
}

.comment-form .form-grp textarea::placeholder,
.comment-form .form-grp input::placeholder {
  font-weight: 400;
  font-size: 15px;
  color: var(--tg-gray-four);
}

.comment-form .form-grp textarea {
  min-height: 130px;
  max-height: 130px;
}

.comment-form .checkbox-grp {
  display: flex;
  align-items: center;
  margin: 25px 0;
}

.comment-form .checkbox-grp input {
  width: 22px;
  margin-inline-end: 9px;
  height: 22px;
  cursor: pointer;
}

.comment-form .checkbox-grp label {
  font-weight: 400;
  font-size: 14px;
  color: var(--tg-paragraph-color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.comment-form .submit-btn {
  width: auto;
  text-transform: uppercase;
  border-radius: 30px;
  letter-spacing: 0.02em;
  padding: 13px 25px;
}

.comment-form .row {
  margin: 0 -10px;
}

.comment-form .row [class*=col-] {
  padding: 0 10px;
}

/*=============================
	25. Brand
===============================*/
.brand-active [class*=col-] {
  padding: 0 15px;
}

.brand-item {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-item:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* brand-two */
.brand-item-wrap {
  padding-bottom: 80px;
}

.brand-item-wrap .title {
  font-weight: 800;
  margin-bottom: 25px;
  color: var(--tg-paragraph-color);
  font-family: var(--tg-body-font-family);
}

.brand-item-wrap-two {
  border-top: 1px solid #dee4f0;
  padding: 70px 0;
}

.brand-area-seven {
  border-top: 1px solid #dee4f0;
  padding: 70px 0;
}

.brand-grid {
  display: flex; /* Use flexbox */
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  justify-content: center; /* Center items in the row */
  gap: 16px; /* Space between items */
}

.brand-grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 220px; /* Fixed width for consistency */
  height: 100px; /* Fixed height to maintain image size */
  flex-shrink: 0; /* Prevent items from shrinking */
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .brand-grid-item {
    width: 80%;
    height: 100%;
  }
}
.brand-item img {
  width: 100%;
  height: auto;
}

#sky-cont {
  padding-top: 50px;
  padding-bottom: 50px;
  position: relative;
}

#sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
  z-index: -1;
}

.star {
  opacity: 0;
  position: absolute;
  background: white;
  box-shadow: 0px 0px 20px 0px #fff;
  border-radius: 100%;
  transform-origin: 0, 0;
  animation-timing-function: linear, linear !important;
  animation-iteration-count: infinite, infinite !important;
  animation-delay: -30s, -30s !important;
}

.size-1 {
  width: 1px;
  height: 1px;
}

.size-2 {
  width: 2px;
  height: 2px;
}

.axis-1 {
  animation: anim0 27195ms, fade10 27195ms;
}

.axis-2 {
  animation: anim0 37154ms, fade3 37154ms;
}

.axis-3 {
  animation: anim0 44587ms, fade9 44587ms;
}

.axis-4 {
  animation: anim4 31628ms, fade9 31628ms;
}

.axis-5 {
  animation: anim4 35914ms, fade3 35914ms;
}

.axis-6 {
  animation: anim4 23411ms, fade10 23411ms;
}

.axis-7 {
  animation: anim4 14708ms, fade2 14708ms;
}

.axis-8 {
  animation: anim8 19225ms, fade8 19225ms;
}

.axis-9 {
  animation: anim8 16828ms, fade1 16828ms;
}

.axis-10 {
  animation: anim8 20448ms, fade8 20448ms;
}

.axis-11 {
  animation: anim8 19455ms, fade2 19455ms;
}

.axis-12 {
  animation: anim12 26923ms, fade7 26923ms;
}

.axis-13 {
  animation: anim12 35297ms, fade4 35297ms;
}

.axis-14 {
  animation: anim12 18822ms, fade7 18822ms;
}

.axis-15 {
  animation: anim12 22264ms, fade6 22264ms;
}

.axis-16 {
  animation: anim16 36098ms, fade9 36098ms;
}

.axis-17 {
  animation: anim16 38904ms, fade7 38904ms;
}

.axis-18 {
  animation: anim16 6216ms, fade4 6216ms;
}

.axis-19 {
  animation: anim16 40166ms, fade8 40166ms;
}

.axis-20 {
  animation: anim20 35950ms, fade5 35950ms;
}

.axis-21 {
  animation: anim20 8946ms, fade1 8946ms;
}

.axis-22 {
  animation: anim20 32363ms, fade1 32363ms;
}

.axis-23 {
  animation: anim20 29325ms, fade10 29325ms;
}

.axis-24 {
  animation: anim24 16504ms, fade6 16504ms;
}

.axis-25 {
  animation: anim24 14303ms, fade7 14303ms;
}

.axis-26 {
  animation: anim24 9567ms, fade9 9567ms;
}

.axis-27 {
  animation: anim24 25189ms, fade1 25189ms;
}

.axis-28 {
  animation: anim28 7144ms, fade2 7144ms;
}

.axis-29 {
  animation: anim28 22443ms, fade6 22443ms;
}

.axis-30 {
  animation: anim28 38448ms, fade9 38448ms;
}

.axis-31 {
  animation: anim28 5025ms, fade8 5025ms;
}

.axis-32 {
  animation: anim32 5718ms, fade8 5718ms;
}

.axis-33 {
  animation: anim32 14093ms, fade2 14093ms;
}

.axis-34 {
  animation: anim32 17533ms, fade4 17533ms;
}

.axis-35 {
  animation: anim32 21656ms, fade6 21656ms;
}

.axis-36 {
  animation: anim36 29491ms, fade2 29491ms;
}

.axis-37 {
  animation: anim36 39553ms, fade4 39553ms;
}

.axis-38 {
  animation: anim36 22843ms, fade4 22843ms;
}

.axis-39 {
  animation: anim36 10497ms, fade4 10497ms;
}

.axis-40 {
  animation: anim40 35599ms, fade8 35599ms;
}

.axis-41 {
  animation: anim40 18319ms, fade2 18319ms;
}

.axis-42 {
  animation: anim40 34499ms, fade9 34499ms;
}

.axis-43 {
  animation: anim40 18815ms, fade2 18815ms;
}

.axis-44 {
  animation: anim44 43048ms, fade2 43048ms;
}

.axis-45 {
  animation: anim44 23731ms, fade3 23731ms;
}

.axis-46 {
  animation: anim44 30277ms, fade4 30277ms;
}

.axis-47 {
  animation: anim44 16093ms, fade3 16093ms;
}

.axis-48 {
  animation: anim48 34727ms, fade8 34727ms;
}

.axis-49 {
  animation: anim48 9313ms, fade5 9313ms;
}

.axis-50 {
  animation: anim48 38355ms, fade3 38355ms;
}

.axis-51 {
  animation: anim48 40582ms, fade4 40582ms;
}

.axis-52 {
  animation: anim52 21905ms, fade2 21905ms;
}

.axis-53 {
  animation: anim52 23842ms, fade9 23842ms;
}

.axis-54 {
  animation: anim52 18943ms, fade10 18943ms;
}

.axis-55 {
  animation: anim52 11871ms, fade4 11871ms;
}

.axis-56 {
  animation: anim56 32995ms, fade2 32995ms;
}

.axis-57 {
  animation: anim56 41150ms, fade4 41150ms;
}

.axis-58 {
  animation: anim56 26001ms, fade8 26001ms;
}

.axis-59 {
  animation: anim56 25458ms, fade4 25458ms;
}

.axis-60 {
  animation: anim60 36229ms, fade4 36229ms;
}

.axis-61 {
  animation: anim60 8803ms, fade3 8803ms;
}

.axis-62 {
  animation: anim60 19259ms, fade3 19259ms;
}

.axis-63 {
  animation: anim60 17732ms, fade10 17732ms;
}

.axis-64 {
  animation: anim64 12103ms, fade6 12103ms;
}

.axis-65 {
  animation: anim64 41131ms, fade4 41131ms;
}

.axis-66 {
  animation: anim64 21331ms, fade7 21331ms;
}

.axis-67 {
  animation: anim64 20998ms, fade10 20998ms;
}

.axis-68 {
  animation: anim68 7984ms, fade1 7984ms;
}

.axis-69 {
  animation: anim68 36645ms, fade1 36645ms;
}

.axis-70 {
  animation: anim68 17267ms, fade1 17267ms;
}

.axis-71 {
  animation: anim68 29805ms, fade4 29805ms;
}

.axis-72 {
  animation: anim72 37072ms, fade7 37072ms;
}

.axis-73 {
  animation: anim72 22006ms, fade5 22006ms;
}

.axis-74 {
  animation: anim72 24435ms, fade9 24435ms;
}

.axis-75 {
  animation: anim72 5388ms, fade6 5388ms;
}

.axis-76 {
  animation: anim76 15053ms, fade10 15053ms;
}

.axis-77 {
  animation: anim76 26069ms, fade3 26069ms;
}

.axis-78 {
  animation: anim76 28624ms, fade7 28624ms;
}

.axis-79 {
  animation: anim76 26762ms, fade4 26762ms;
}

.axis-80 {
  animation: anim80 18479ms, fade5 18479ms;
}

.axis-81 {
  animation: anim80 35494ms, fade1 35494ms;
}

.axis-82 {
  animation: anim80 6530ms, fade7 6530ms;
}

.axis-83 {
  animation: anim80 6276ms, fade6 6276ms;
}

.axis-84 {
  animation: anim84 33368ms, fade2 33368ms;
}

.axis-85 {
  animation: anim84 29172ms, fade2 29172ms;
}

.axis-86 {
  animation: anim84 35431ms, fade6 35431ms;
}

.axis-87 {
  animation: anim84 12559ms, fade2 12559ms;
}

.axis-88 {
  animation: anim88 17062ms, fade4 17062ms;
}

.axis-89 {
  animation: anim88 35013ms, fade5 35013ms;
}

.axis-90 {
  animation: anim88 20630ms, fade8 20630ms;
}

.axis-91 {
  animation: anim88 33675ms, fade3 33675ms;
}

.axis-92 {
  animation: anim92 25432ms, fade7 25432ms;
}

.axis-93 {
  animation: anim92 8190ms, fade10 8190ms;
}

.axis-94 {
  animation: anim92 27806ms, fade10 27806ms;
}

.axis-95 {
  animation: anim92 33019ms, fade7 33019ms;
}

.axis-96 {
  animation: anim96 41873ms, fade6 41873ms;
}

.axis-97 {
  animation: anim96 13581ms, fade9 13581ms;
}

.axis-98 {
  animation: anim96 11360ms, fade8 11360ms;
}

.axis-99 {
  animation: anim96 33526ms, fade7 33526ms;
}

.axis-100 {
  animation: anim100 21451ms, fade5 21451ms;
}

.axis-101 {
  animation: anim100 42944ms, fade2 42944ms;
}

.axis-102 {
  animation: anim100 19246ms, fade8 19246ms;
}

.axis-103 {
  animation: anim100 40851ms, fade8 40851ms;
}

.axis-104 {
  animation: anim104 18242ms, fade5 18242ms;
}

.axis-105 {
  animation: anim104 12092ms, fade8 12092ms;
}

.axis-106 {
  animation: anim104 13657ms, fade9 13657ms;
}

.axis-107 {
  animation: anim104 7647ms, fade6 7647ms;
}

.axis-108 {
  animation: anim108 9468ms, fade10 9468ms;
}

.axis-109 {
  animation: anim108 24435ms, fade7 24435ms;
}

.axis-110 {
  animation: anim108 11166ms, fade6 11166ms;
}

.axis-111 {
  animation: anim108 11949ms, fade6 11949ms;
}

.axis-112 {
  animation: anim112 30648ms, fade4 30648ms;
}

.axis-113 {
  animation: anim112 44496ms, fade3 44496ms;
}

.axis-114 {
  animation: anim112 39945ms, fade3 39945ms;
}

.axis-115 {
  animation: anim112 21872ms, fade9 21872ms;
}

.axis-116 {
  animation: anim116 41667ms, fade5 41667ms;
}

.axis-117 {
  animation: anim116 43562ms, fade10 43562ms;
}

.axis-118 {
  animation: anim116 41717ms, fade9 41717ms;
}

.axis-119 {
  animation: anim116 7663ms, fade1 7663ms;
}

.axis-120 {
  animation: anim120 28823ms, fade7 28823ms;
}

.axis-121 {
  animation: anim120 33250ms, fade7 33250ms;
}

.axis-122 {
  animation: anim120 15466ms, fade10 15466ms;
}

.axis-123 {
  animation: anim120 36834ms, fade5 36834ms;
}

.axis-124 {
  animation: anim124 40915ms, fade1 40915ms;
}

.axis-125 {
  animation: anim124 31721ms, fade6 31721ms;
}

.axis-126 {
  animation: anim124 25080ms, fade8 25080ms;
}

.axis-127 {
  animation: anim124 15817ms, fade1 15817ms;
}

.axis-128 {
  animation: anim128 29540ms, fade2 29540ms;
}

.axis-129 {
  animation: anim128 24998ms, fade6 24998ms;
}

.axis-130 {
  animation: anim128 21156ms, fade10 21156ms;
}

.axis-131 {
  animation: anim128 37740ms, fade8 37740ms;
}

.axis-132 {
  animation: anim132 43092ms, fade6 43092ms;
}

.axis-133 {
  animation: anim132 42816ms, fade4 42816ms;
}

.axis-134 {
  animation: anim132 34663ms, fade7 34663ms;
}

.axis-135 {
  animation: anim132 9412ms, fade3 9412ms;
}

.axis-136 {
  animation: anim136 27324ms, fade4 27324ms;
}

.axis-137 {
  animation: anim136 40486ms, fade6 40486ms;
}

.axis-138 {
  animation: anim136 8609ms, fade4 8609ms;
}

.axis-139 {
  animation: anim136 12331ms, fade6 12331ms;
}

.axis-140 {
  animation: anim140 31820ms, fade6 31820ms;
}

.axis-141 {
  animation: anim140 25141ms, fade6 25141ms;
}

.axis-142 {
  animation: anim140 28478ms, fade8 28478ms;
}

.axis-143 {
  animation: anim140 10707ms, fade5 10707ms;
}

.axis-144 {
  animation: anim144 22185ms, fade5 22185ms;
}

.axis-145 {
  animation: anim144 42294ms, fade7 42294ms;
}

.axis-146 {
  animation: anim144 10666ms, fade7 10666ms;
}

.axis-147 {
  animation: anim144 16840ms, fade8 16840ms;
}

.axis-148 {
  animation: anim148 39800ms, fade9 39800ms;
}

.axis-149 {
  animation: anim148 36246ms, fade10 36246ms;
}

.axis-150 {
  animation: anim148 5437ms, fade5 5437ms;
}

.axis-151 {
  animation: anim148 42654ms, fade2 42654ms;
}

.axis-152 {
  animation: anim152 17642ms, fade2 17642ms;
}

.axis-153 {
  animation: anim152 41118ms, fade8 41118ms;
}

.axis-154 {
  animation: anim152 18560ms, fade9 18560ms;
}

.axis-155 {
  animation: anim152 15150ms, fade10 15150ms;
}

.axis-156 {
  animation: anim156 25527ms, fade8 25527ms;
}

.axis-157 {
  animation: anim156 22737ms, fade1 22737ms;
}

.axis-158 {
  animation: anim156 23767ms, fade8 23767ms;
}

.axis-159 {
  animation: anim156 9213ms, fade4 9213ms;
}

.axis-160 {
  animation: anim160 20447ms, fade8 20447ms;
}

.axis-161 {
  animation: anim160 19766ms, fade8 19766ms;
}

.axis-162 {
  animation: anim160 38574ms, fade4 38574ms;
}

.axis-163 {
  animation: anim160 42905ms, fade7 42905ms;
}

.axis-164 {
  animation: anim164 44159ms, fade4 44159ms;
}

.axis-165 {
  animation: anim164 39917ms, fade5 39917ms;
}

.axis-166 {
  animation: anim164 36396ms, fade7 36396ms;
}

.axis-167 {
  animation: anim164 12249ms, fade2 12249ms;
}

.axis-168 {
  animation: anim168 24792ms, fade7 24792ms;
}

.axis-169 {
  animation: anim168 9709ms, fade7 9709ms;
}

.axis-170 {
  animation: anim168 18152ms, fade4 18152ms;
}

.axis-171 {
  animation: anim168 5278ms, fade9 5278ms;
}

.axis-172 {
  animation: anim172 40007ms, fade6 40007ms;
}

.axis-173 {
  animation: anim172 22953ms, fade7 22953ms;
}

.axis-174 {
  animation: anim172 44749ms, fade10 44749ms;
}

.axis-175 {
  animation: anim172 10365ms, fade3 10365ms;
}

.axis-176 {
  animation: anim176 8183ms, fade5 8183ms;
}

.axis-177 {
  animation: anim176 10753ms, fade2 10753ms;
}

.axis-178 {
  animation: anim176 19987ms, fade9 19987ms;
}

.axis-179 {
  animation: anim176 37749ms, fade7 37749ms;
}

.axis-180 {
  animation: anim180 38619ms, fade7 38619ms;
}

.axis-181 {
  animation: anim180 16952ms, fade9 16952ms;
}

.axis-182 {
  animation: anim180 24877ms, fade7 24877ms;
}

.axis-183 {
  animation: anim180 10698ms, fade9 10698ms;
}

.axis-184 {
  animation: anim184 40328ms, fade2 40328ms;
}

.axis-185 {
  animation: anim184 39415ms, fade4 39415ms;
}

.axis-186 {
  animation: anim184 29525ms, fade4 29525ms;
}

.axis-187 {
  animation: anim184 30284ms, fade7 30284ms;
}

.axis-188 {
  animation: anim188 40632ms, fade8 40632ms;
}

.axis-189 {
  animation: anim188 13479ms, fade7 13479ms;
}

.axis-190 {
  animation: anim188 42354ms, fade1 42354ms;
}

.axis-191 {
  animation: anim188 6949ms, fade3 6949ms;
}

.axis-192 {
  animation: anim192 12267ms, fade10 12267ms;
}

.axis-193 {
  animation: anim192 14198ms, fade8 14198ms;
}

.axis-194 {
  animation: anim192 14364ms, fade10 14364ms;
}

.axis-195 {
  animation: anim192 14458ms, fade4 14458ms;
}

.axis-196 {
  animation: anim196 9356ms, fade7 9356ms;
}

.axis-197 {
  animation: anim196 8793ms, fade3 8793ms;
}

.axis-198 {
  animation: anim196 21241ms, fade9 21241ms;
}

.axis-199 {
  animation: anim196 23899ms, fade3 23899ms;
}

.axis-200 {
  animation: anim200 23784ms, fade8 23784ms;
}

.axis-201 {
  animation: anim200 16947ms, fade7 16947ms;
}

.axis-202 {
  animation: anim200 23508ms, fade8 23508ms;
}

.axis-203 {
  animation: anim200 38509ms, fade8 38509ms;
}

.axis-204 {
  animation: anim204 21947ms, fade7 21947ms;
}

.axis-205 {
  animation: anim204 28149ms, fade5 28149ms;
}

.axis-206 {
  animation: anim204 31127ms, fade3 31127ms;
}

.axis-207 {
  animation: anim204 15050ms, fade10 15050ms;
}

.axis-208 {
  animation: anim208 8890ms, fade2 8890ms;
}

.axis-209 {
  animation: anim208 29679ms, fade10 29679ms;
}

.axis-210 {
  animation: anim208 29836ms, fade10 29836ms;
}

.axis-211 {
  animation: anim208 20689ms, fade4 20689ms;
}

.axis-212 {
  animation: anim212 6121ms, fade9 6121ms;
}

.axis-213 {
  animation: anim212 25430ms, fade5 25430ms;
}

.axis-214 {
  animation: anim212 5221ms, fade10 5221ms;
}

.axis-215 {
  animation: anim212 32734ms, fade7 32734ms;
}

.axis-216 {
  animation: anim216 27319ms, fade3 27319ms;
}

.axis-217 {
  animation: anim216 31891ms, fade3 31891ms;
}

.axis-218 {
  animation: anim216 10884ms, fade6 10884ms;
}

.axis-219 {
  animation: anim216 28759ms, fade5 28759ms;
}

.axis-220 {
  animation: anim220 34931ms, fade5 34931ms;
}

.axis-221 {
  animation: anim220 42478ms, fade6 42478ms;
}

.axis-222 {
  animation: anim220 44773ms, fade7 44773ms;
}

.axis-223 {
  animation: anim220 42195ms, fade5 42195ms;
}

.axis-224 {
  animation: anim224 26616ms, fade8 26616ms;
}

.axis-225 {
  animation: anim224 9156ms, fade3 9156ms;
}

.axis-226 {
  animation: anim224 22861ms, fade8 22861ms;
}

.axis-227 {
  animation: anim224 18661ms, fade10 18661ms;
}

.axis-228 {
  animation: anim228 5239ms, fade2 5239ms;
}

.axis-229 {
  animation: anim228 44311ms, fade7 44311ms;
}

.axis-230 {
  animation: anim228 32869ms, fade6 32869ms;
}

.axis-231 {
  animation: anim228 9350ms, fade10 9350ms;
}

.axis-232 {
  animation: anim232 33114ms, fade8 33114ms;
}

.axis-233 {
  animation: anim232 32493ms, fade4 32493ms;
}

.axis-234 {
  animation: anim232 12939ms, fade2 12939ms;
}

.axis-235 {
  animation: anim232 24658ms, fade10 24658ms;
}

.axis-236 {
  animation: anim236 8543ms, fade8 8543ms;
}

.axis-237 {
  animation: anim236 37504ms, fade3 37504ms;
}

.axis-238 {
  animation: anim236 26507ms, fade10 26507ms;
}

.axis-239 {
  animation: anim236 29189ms, fade9 29189ms;
}

.axis-240 {
  animation: anim240 19927ms, fade2 19927ms;
}

.axis-241 {
  animation: anim240 32643ms, fade10 32643ms;
}

.axis-242 {
  animation: anim240 6508ms, fade1 6508ms;
}

.axis-243 {
  animation: anim240 18386ms, fade6 18386ms;
}

.axis-244 {
  animation: anim244 9990ms, fade10 9990ms;
}

.axis-245 {
  animation: anim244 34137ms, fade4 34137ms;
}

.axis-246 {
  animation: anim244 21861ms, fade8 21861ms;
}

.axis-247 {
  animation: anim244 32231ms, fade3 32231ms;
}

.axis-248 {
  animation: anim248 9174ms, fade10 9174ms;
}

.axis-249 {
  animation: anim248 26695ms, fade7 26695ms;
}

.axis-250 {
  animation: anim248 18627ms, fade2 18627ms;
}

.axis-251 {
  animation: anim248 19438ms, fade8 19438ms;
}

.axis-252 {
  animation: anim252 14746ms, fade6 14746ms;
}

.axis-253 {
  animation: anim252 39903ms, fade7 39903ms;
}

.axis-254 {
  animation: anim252 33770ms, fade4 33770ms;
}

.axis-255 {
  animation: anim252 27036ms, fade1 27036ms;
}

.axis-256 {
  animation: anim256 21212ms, fade6 21212ms;
}

.axis-257 {
  animation: anim256 23703ms, fade10 23703ms;
}

.axis-258 {
  animation: anim256 22342ms, fade7 22342ms;
}

.axis-259 {
  animation: anim256 10500ms, fade1 10500ms;
}

.axis-260 {
  animation: anim260 44491ms, fade10 44491ms;
}

.axis-261 {
  animation: anim260 39165ms, fade7 39165ms;
}

.axis-262 {
  animation: anim260 7412ms, fade5 7412ms;
}

.axis-263 {
  animation: anim260 44147ms, fade9 44147ms;
}

.axis-264 {
  animation: anim264 42599ms, fade8 42599ms;
}

.axis-265 {
  animation: anim264 43271ms, fade10 43271ms;
}

.axis-266 {
  animation: anim264 27089ms, fade1 27089ms;
}

.axis-267 {
  animation: anim264 41628ms, fade8 41628ms;
}

.axis-268 {
  animation: anim268 8704ms, fade9 8704ms;
}

.axis-269 {
  animation: anim268 10617ms, fade10 10617ms;
}

.axis-270 {
  animation: anim268 41155ms, fade9 41155ms;
}

.axis-271 {
  animation: anim268 20041ms, fade3 20041ms;
}

.axis-272 {
  animation: anim272 29283ms, fade2 29283ms;
}

.axis-273 {
  animation: anim272 30514ms, fade2 30514ms;
}

.axis-274 {
  animation: anim272 17335ms, fade5 17335ms;
}

.axis-275 {
  animation: anim272 13809ms, fade5 13809ms;
}

.axis-276 {
  animation: anim276 13969ms, fade4 13969ms;
}

.axis-277 {
  animation: anim276 32009ms, fade3 32009ms;
}

.axis-278 {
  animation: anim276 35371ms, fade1 35371ms;
}

.axis-279 {
  animation: anim276 15386ms, fade6 15386ms;
}

.axis-280 {
  animation: anim280 36266ms, fade4 36266ms;
}

.axis-281 {
  animation: anim280 41754ms, fade1 41754ms;
}

.axis-282 {
  animation: anim280 14484ms, fade9 14484ms;
}

.axis-283 {
  animation: anim280 33532ms, fade3 33532ms;
}

.axis-284 {
  animation: anim284 5403ms, fade7 5403ms;
}

.axis-285 {
  animation: anim284 15711ms, fade7 15711ms;
}

.axis-286 {
  animation: anim284 30612ms, fade3 30612ms;
}

.axis-287 {
  animation: anim284 18009ms, fade9 18009ms;
}

.axis-288 {
  animation: anim288 17905ms, fade6 17905ms;
}

.axis-289 {
  animation: anim288 17702ms, fade6 17702ms;
}

.axis-290 {
  animation: anim288 20197ms, fade7 20197ms;
}

.axis-291 {
  animation: anim288 16931ms, fade6 16931ms;
}

.axis-292 {
  animation: anim292 31246ms, fade2 31246ms;
}

.axis-293 {
  animation: anim292 41907ms, fade9 41907ms;
}

.axis-294 {
  animation: anim292 37879ms, fade3 37879ms;
}

.axis-295 {
  animation: anim292 42010ms, fade6 42010ms;
}

.axis-296 {
  animation: anim296 12161ms, fade7 12161ms;
}

.axis-297 {
  animation: anim296 13885ms, fade4 13885ms;
}

.axis-298 {
  animation: anim296 37736ms, fade2 37736ms;
}

.axis-299 {
  animation: anim296 21827ms, fade4 21827ms;
}

.axis-300 {
  animation: anim300 26932ms, fade7 26932ms;
}

.axis-301 {
  animation: anim300 40129ms, fade2 40129ms;
}

.axis-302 {
  animation: anim300 15221ms, fade6 15221ms;
}

.axis-303 {
  animation: anim300 30013ms, fade8 30013ms;
}

.axis-304 {
  animation: anim304 8375ms, fade7 8375ms;
}

.axis-305 {
  animation: anim304 34480ms, fade3 34480ms;
}

.axis-306 {
  animation: anim304 23458ms, fade4 23458ms;
}

.axis-307 {
  animation: anim304 22013ms, fade8 22013ms;
}

.axis-308 {
  animation: anim308 33317ms, fade2 33317ms;
}

.axis-309 {
  animation: anim308 9106ms, fade4 9106ms;
}

.axis-310 {
  animation: anim308 26028ms, fade1 26028ms;
}

.axis-311 {
  animation: anim308 10563ms, fade3 10563ms;
}

.axis-312 {
  animation: anim312 6291ms, fade6 6291ms;
}

.axis-313 {
  animation: anim312 40558ms, fade5 40558ms;
}

.axis-314 {
  animation: anim312 33908ms, fade1 33908ms;
}

.axis-315 {
  animation: anim312 28922ms, fade4 28922ms;
}

.axis-316 {
  animation: anim316 26352ms, fade1 26352ms;
}

.axis-317 {
  animation: anim316 14830ms, fade1 14830ms;
}

.axis-318 {
  animation: anim316 34255ms, fade1 34255ms;
}

.axis-319 {
  animation: anim316 34543ms, fade7 34543ms;
}

.axis-320 {
  animation: anim320 18421ms, fade3 18421ms;
}

.axis-321 {
  animation: anim320 29309ms, fade6 29309ms;
}

.axis-322 {
  animation: anim320 26441ms, fade8 26441ms;
}

.axis-323 {
  animation: anim320 14082ms, fade10 14082ms;
}

.axis-324 {
  animation: anim324 23908ms, fade5 23908ms;
}

.axis-325 {
  animation: anim324 37191ms, fade7 37191ms;
}

.axis-326 {
  animation: anim324 40687ms, fade10 40687ms;
}

.axis-327 {
  animation: anim324 10613ms, fade5 10613ms;
}

.axis-328 {
  animation: anim328 43804ms, fade7 43804ms;
}

.axis-329 {
  animation: anim328 19617ms, fade5 19617ms;
}

.axis-330 {
  animation: anim328 32897ms, fade8 32897ms;
}

.axis-331 {
  animation: anim328 16215ms, fade7 16215ms;
}

.axis-332 {
  animation: anim332 37659ms, fade5 37659ms;
}

.axis-333 {
  animation: anim332 24755ms, fade5 24755ms;
}

.axis-334 {
  animation: anim332 15008ms, fade6 15008ms;
}

.axis-335 {
  animation: anim332 7603ms, fade6 7603ms;
}

.axis-336 {
  animation: anim336 33383ms, fade7 33383ms;
}

.axis-337 {
  animation: anim336 32328ms, fade1 32328ms;
}

.axis-338 {
  animation: anim336 6446ms, fade5 6446ms;
}

.axis-339 {
  animation: anim336 16423ms, fade3 16423ms;
}

.axis-340 {
  animation: anim340 36666ms, fade2 36666ms;
}

.axis-341 {
  animation: anim340 12641ms, fade4 12641ms;
}

.axis-342 {
  animation: anim340 15737ms, fade6 15737ms;
}

.axis-343 {
  animation: anim340 16990ms, fade8 16990ms;
}

.axis-344 {
  animation: anim344 31422ms, fade7 31422ms;
}

.axis-345 {
  animation: anim344 11944ms, fade3 11944ms;
}

.axis-346 {
  animation: anim344 37178ms, fade1 37178ms;
}

.axis-347 {
  animation: anim344 26483ms, fade9 26483ms;
}

.axis-348 {
  animation: anim348 26302ms, fade2 26302ms;
}

.axis-349 {
  animation: anim348 40308ms, fade8 40308ms;
}

.axis-350 {
  animation: anim348 44360ms, fade3 44360ms;
}

.axis-351 {
  animation: anim348 39338ms, fade5 39338ms;
}

.axis-352 {
  animation: anim352 9361ms, fade3 9361ms;
}

.axis-353 {
  animation: anim352 21362ms, fade1 21362ms;
}

.axis-354 {
  animation: anim352 8162ms, fade7 8162ms;
}

.axis-355 {
  animation: anim352 13715ms, fade7 13715ms;
}

.axis-356 {
  animation: anim356 33124ms, fade1 33124ms;
}

.axis-357 {
  animation: anim356 10683ms, fade4 10683ms;
}

.axis-358 {
  animation: anim356 32833ms, fade1 32833ms;
}

.axis-359 {
  animation: anim356 39745ms, fade7 39745ms;
}

.axis-360 {
  animation: anim360 22779ms, fade5 22779ms;
}

@keyframes fade1 {
  6% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade2 {
  17% {
    opacity: 0;
  }
  27% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade3 {
  4% {
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade4 {
  8% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade5 {
  2% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade6 {
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade7 {
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade8 {
  2% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade9 {
  12% {
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade10 {
  8% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anim4 {
  100% {
    transform: translate(79.8051240208vw, 5.5805178995vh);
  }
}
@keyframes anim8 {
  100% {
    transform: translate(79.2214454993vw, 11.1338480768vh);
  }
}
@keyframes anim12 {
  100% {
    transform: translate(78.2518080587vw, 16.6329352654vh);
  }
}
@keyframes anim16 {
  100% {
    transform: translate(76.9009356751vw, 22.0509884654vh);
  }
}
@keyframes anim20 {
  100% {
    transform: translate(75.1754096629vw, 27.3616114661vh);
  }
}
@keyframes anim24 {
  100% {
    transform: translate(73.0836366114vw, 32.5389314461vh);
  }
}
@keyframes anim28 {
  100% {
    transform: translate(70.6358074287vw, 37.5577250229vh);
  }
}
@keyframes anim32 {
  100% {
    transform: translate(67.8438476925vw, 42.3935411387vh);
  }
}
@keyframes anim36 {
  100% {
    transform: translate(64.72135955vw, 47.0228201834vh);
  }
}
@keyframes anim40 {
  100% {
    transform: translate(61.2835554495vw, 51.4230087749vh);
  }
}
@keyframes anim44 {
  100% {
    transform: translate(57.5471840271vw, 55.5726696367vh);
  }
}
@keyframes anim48 {
  100% {
    transform: translate(53.5304485087vw, 59.4515860382vh);
  }
}
@keyframes anim52 {
  100% {
    transform: translate(49.252918026vw, 63.0408602885vh);
  }
}
@keyframes anim56 {
  100% {
    transform: translate(44.7354322777vw, 66.3230058044vh);
  }
}
@keyframes anim60 {
  100% {
    transform: translate(40vw, 69.2820323028vh);
  }
}
@keyframes anim64 {
  100% {
    transform: translate(35.0696917431vw, 71.9035237039vh);
  }
}
@keyframes anim68 {
  100% {
    transform: translate(29.9685274733vw, 74.1747083653vh);
  }
}
@keyframes anim72 {
  100% {
    transform: translate(24.72135955vw, 76.0845213036vh);
  }
}
@keyframes anim76 {
  100% {
    transform: translate(19.353751648vw, 77.6236581021vh);
  }
}
@keyframes anim80 {
  100% {
    transform: translate(13.8918542133vw, 78.784620241vh);
  }
}
@keyframes anim84 {
  100% {
    transform: translate(8.3622770614vw, 79.5617516295vh);
  }
}
@keyframes anim88 {
  100% {
    transform: translate(2.7919597362vw, 79.9512661615vh);
  }
}
@keyframes anim92 {
  100% {
    transform: translate(-2.7919597362vw, 79.9512661615vh);
  }
}
@keyframes anim96 {
  100% {
    transform: translate(-8.3622770614vw, 79.5617516295vh);
  }
}
@keyframes anim100 {
  100% {
    transform: translate(-13.8918542134vw, 78.784620241vh);
  }
}
@keyframes anim104 {
  100% {
    transform: translate(-19.353751648vw, 77.6236581021vh);
  }
}
@keyframes anim108 {
  100% {
    transform: translate(-24.72135955vw, 76.0845213036vh);
  }
}
@keyframes anim112 {
  100% {
    transform: translate(-29.9685274733vw, 74.1747083653vh);
  }
}
@keyframes anim116 {
  100% {
    transform: translate(-35.0696917431vw, 71.9035237039vh);
  }
}
@keyframes anim120 {
  100% {
    transform: translate(-40vw, 69.2820323027vh);
  }
}
@keyframes anim124 {
  100% {
    transform: translate(-44.7354322777vw, 66.3230058044vh);
  }
}
@keyframes anim128 {
  100% {
    transform: translate(-49.2529180261vw, 63.0408602885vh);
  }
}
@keyframes anim132 {
  100% {
    transform: translate(-53.5304485087vw, 59.4515860382vh);
  }
}
@keyframes anim136 {
  100% {
    transform: translate(-57.5471840271vw, 55.5726696367vh);
  }
}
@keyframes anim140 {
  100% {
    transform: translate(-61.2835554495vw, 51.4230087749vh);
  }
}
@keyframes anim144 {
  100% {
    transform: translate(-64.72135955vw, 47.0228201834vh);
  }
}
@keyframes anim148 {
  100% {
    transform: translate(-67.8438476924vw, 42.3935411387vh);
  }
}
@keyframes anim152 {
  100% {
    transform: translate(-70.6358074286vw, 37.5577250229vh);
  }
}
@keyframes anim156 {
  100% {
    transform: translate(-73.0836366112vw, 32.5389314461vh);
  }
}
@keyframes anim160 {
  100% {
    transform: translate(-75.1754096624vw, 27.3616114661vh);
  }
}
@keyframes anim164 {
  100% {
    transform: translate(-76.9009356743vw, 22.0509884654vh);
  }
}
@keyframes anim168 {
  100% {
    transform: translate(-78.2518080574vw, 16.6329352656vh);
  }
}
@keyframes anim172 {
  100% {
    transform: translate(-79.2214454971vw, 11.1338480771vh);
  }
}
@keyframes anim176 {
  100% {
    transform: translate(-79.8051240171vw, 5.5805179vh);
  }
}
@keyframes anim180 {
  100% {
    transform: translate(-79.9999999939vw, 0.0000000008vh);
  }
}
@keyframes anim184 {
  100% {
    transform: translate(-79.805124011vw, -5.5805178982vh);
  }
}
@keyframes anim188 {
  100% {
    transform: translate(-79.2214454836vw, -11.1338480746vh);
  }
}
@keyframes anim192 {
  100% {
    transform: translate(-78.2518080337vw, -16.6329352618vh);
  }
}
@keyframes anim196 {
  100% {
    transform: translate(-76.9009356358vw, -22.0509884595vh);
  }
}
@keyframes anim200 {
  100% {
    transform: translate(-75.1754096017vw, -27.3616114568vh);
  }
}
@keyframes anim204 {
  100% {
    transform: translate(-73.0836365169vw, -32.5389314314vh);
  }
}
@keyframes anim208 {
  100% {
    transform: translate(-70.6358072839vw, -37.557725vh);
  }
}
@keyframes anim212 {
  100% {
    transform: translate(-67.8438474725vw, -42.3935411032vh);
  }
}
@keyframes anim216 {
  100% {
    transform: translate(-64.7213592185vw, -47.022820129vh);
  }
}
@keyframes anim220 {
  100% {
    transform: translate(-61.2835549536vw, -51.423008692vh);
  }
}
@keyframes anim224 {
  100% {
    transform: translate(-57.5471832906vw, -55.5726695113vh);
  }
}
@keyframes anim228 {
  100% {
    transform: translate(-53.5304474226vw, -59.4515858499vh);
  }
}
@keyframes anim232 {
  100% {
    transform: translate(-49.2529164353vw, -63.0408600078vh);
  }
}
@keyframes anim236 {
  100% {
    transform: translate(-44.735429963vw, -66.3230053889vh);
  }
}
@keyframes anim240 {
  100% {
    transform: translate(-39.9999966533vw, -69.2820316917vh);
  }
}
@keyframes anim244 {
  100% {
    transform: translate(-35.0696869337vw, -71.9035228111vh);
  }
}
@keyframes anim248 {
  100% {
    transform: translate(-29.9685206026vw, -74.1747070689vh);
  }
}
@keyframes anim252 {
  100% {
    transform: translate(-24.721349791vw, -76.0845194323vh);
  }
}
@keyframes anim256 {
  100% {
    transform: translate(-19.3537378633vw, -77.6236554167vh);
  }
}
@keyframes anim260 {
  100% {
    transform: translate(-13.891834847vw, -78.7846164089vh);
  }
}
@keyframes anim264 {
  100% {
    transform: translate(-8.362249995vw, -79.5617461908vh);
  }
}
@keyframes anim268 {
  100% {
    transform: translate(-2.7919220994vw, -79.9512584836vh);
  }
}
@keyframes anim272 {
  100% {
    transform: translate(2.7920118149vw, -79.951255378vh);
  }
}
@keyframes anim276 {
  100% {
    transform: translate(8.3623487803vw, -79.5617365594vh);
  }
}
@keyframes anim280 {
  100% {
    transform: translate(13.8919525223vw, -78.7845992823vh);
  }
}
@keyframes anim284 {
  100% {
    transform: translate(19.3538857994vw, -77.6236290907vh);
  }
}
@keyframes anim288 {
  100% {
    transform: translate(24.7215418116vw, -76.0844813291vh);
  }
}
@keyframes anim292 {
  100% {
    transform: translate(29.9687740459vw, -74.1746535294vh);
  }
}
@keyframes anim296 {
  100% {
    transform: translate(35.0700239391vw, -71.9034488065vh);
  }
}
@keyframes anim300 {
  100% {
    transform: translate(40.0004457508vw, -69.2819304349vh);
  }
}
@keyframes anim304 {
  100% {
    transform: translate(44.7360280553vw, -66.3228678216vh);
  }
}
@keyframes anim308 {
  100% {
    transform: translate(49.2537112853vw, -63.0406741325vh);
  }
}
@keyframes anim312 {
  100% {
    transform: translate(53.5315007796vw, -59.4513358667vh);
  }
}
@keyframes anim316 {
  100% {
    transform: translate(57.5485748204vw, -55.5723347095vh);
  }
}
@keyframes anim320 {
  100% {
    transform: translate(61.2853871724vw, -51.4225620336vh);
  }
}
@keyframes anim324 {
  100% {
    transform: translate(64.7237636756vw, -47.0222264458vh);
  }
}
@keyframes anim328 {
  100% {
    transform: translate(67.8469924807vw, -42.39275481vh);
  }
}
@keyframes anim332 {
  100% {
    transform: translate(70.6399075605vw, -37.5566872034vh);
  }
}
@keyframes anim336 {
  100% {
    transform: translate(73.0889651791vw, -32.5375662873vh);
  }
}
@keyframes anim340 {
  100% {
    transform: translate(75.1823130503vw, -27.3598215917vh);
  }
}
@keyframes anim344 {
  100% {
    transform: translate(76.9098519779vw, -22.0486492345vh);
  }
}
@keyframes anim348 {
  100% {
    transform: translate(78.2632898269vw, -16.6298876035vh);
  }
}
@keyframes anim352 {
  100% {
    transform: translate(79.2361877464vw, -11.1298895415vh);
  }
}
@keyframes anim356 {
  100% {
    transform: translate(79.8239986358vw, -5.5753915744vh);
  }
}
@keyframes anim360 {
  100% {
    transform: translate(80.0240979233vw, 0.0066192762vh);
  }
}
/*=============================
	26. Error
===============================*/
.error-area {
  padding: 210px 0;
}

.error-content {
  text-align: center;
}

.error-content .error-404 {
  font-size: 400px;
  margin-bottom: 50px;
  line-height: 0.74;
  font-weight: 800;
}

.error-content .error-404 span {
  color: var(--tg-primary-color);
}

.error-content .title {
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 36px;
  text-transform: capitalize;
}

.error-content p {
  margin-bottom: 35px;
  color: var(--tg-gray-four);
  font-weight: 400;
}

/*=============================
	27. Footer
===============================*/
.footer-bg {
  background-position: center;
  background-size: cover;
}

.footer-top {
  padding: 100px 0 40px;
}

.footer-widget {
  margin-bottom: 40px;
}

.footer-widget .fw-title {
  font-size: 24px;
  margin-bottom: 0;
  color: var(--tg-white);
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 16px;
}

.footer-widget .fw-title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 30px;
  height: 4px;
  border-radius: 4px;
  background: var(--tg-primary-color);
}

.footer-info .list-wrap li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
}

.footer-info .list-wrap li:last-child {
  margin-bottom: 0;
}

.footer-info .list-wrap li .icon {
  font-size: 22px;
  line-height: 0;
  color: var(--tg-lavender);
  margin-top: 3px;
  margin-inline-end: 12px;
}

.footer-info .list-wrap li .content a,
.footer-info .list-wrap li .content p {
  color: var(--tg-gray-three);
  margin-bottom: 0;
}

.footer-info .list-wrap li .content p span {
  font-weight: 700;
  color: var(--tg-white);
}

.footer-info .list-wrap li .content a:hover {
  color: var(--tg-white);
}

.footer-link .list-wrap li {
  margin-bottom: 10px;
}

.footer-link .list-wrap li:last-child {
  margin-bottom: 0;
}

.footer-link .list-wrap li a {
  color: var(--tg-gray-three);
  position: relative;
}

.footer-link .list-wrap li a:hover {
  color: var(--tg-white);
}

.footer-link .list-wrap li a::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--tg-white);
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24);
}

.footer-link .list-wrap li a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.footer-top .row [class*=col-]:nth-child(3) .footer-widget {
  margin-inline-start: 40px;
}

.footer-newsletter p {
  margin-bottom: 20px;
  color: var(--tg-gray-three);
  width: 90%;
}

.footer-newsletter form {
  position: relative;
  margin-bottom: 15px;
}

.footer-newsletter form input {
  width: 100%;
  border: none;
  background: #1e2e4e;
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-white);
  border-radius: 30px;
  padding: 12px 125px 12px 22px;
  height: 46px;
}

.footer-newsletter form input::-moz-placeholder {
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-white);
  text-transform: capitalize;
}

.footer-newsletter form input::placeholder {
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-white);
  text-transform: capitalize;
}

.footer-newsletter form button {
  border: none;
  background: var(--tg-primary-color);
  color: var(--tg-white);
  font-weight: 700;
  font-size: 14px;
  border-radius: 30px;
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  padding: 12px 23px;
  height: 46px;
}

.footer-newsletter form button:hover {
  background: var(--tg-secondary-color);
}

.footer-newsletter span {
  display: block;
  color: var(--tg-gray-three);
  font-size: 15px;
}

.footer-bottom {
  border-top: 1px solid;
  border-color: var(--footer-border-color);
  padding: 48px 0;
}

.footer-bottom .f-logo {
  margin-bottom: 10px;
}

.copyright-text p {
  margin-bottom: 0px;
  font-size: 14px;
  color: #7c8db1;
}

.footer-social .list-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.footer-social .list-wrap li a {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a2948;
  border-radius: 50%;
  color: var(--tg-white);
  font-size: 20px;
}

.footer-social .list-wrap li a:hover {
  background: var(--tg-primary-color);
}

/* footer-two */
.footer-bg-two {
  background-size: cover;
  background-position: center;
}

.footer-top-two {
  padding: 0px;
}

.footer-top-two .fw-logo {
  margin-bottom: 30px;
}

.footer-content > p {
  margin-bottom: 20px;
  width: 90%;
}

.footer-top-two .footer-info .list-wrap li .icon {
  color: var(--tg-primary-color);
}

.footer-top-two .footer-info .list-wrap li .content a,
.footer-top-two .footer-info .list-wrap li .content p {
  color: var(--tg-paragraph-color);
}

.footer-top-two .footer-info .list-wrap li .content a:hover {
  color: var(--tg-primary-color);
}

.footer-top-two .footer-info .list-wrap li .content p span {
  color: var(--tg-primary-color);
}

.footer-top-two .footer-widget .fw-title {
  color: var(--tg-secondary-color);
}

.footer-top-two .footer-link .list-wrap li a {
  color: var(--tg-paragraph-color);
}

.footer-top-two .footer-link .list-wrap li a:hover {
  color: var(--tg-primary-color);
}

.footer-top-two .footer-link .list-wrap li a::before {
  background: var(--tg-primary-color);
}

.footer-top-two .footer-newsletter p {
  color: var(--tg-paragraph-color);
}

.footer-top-two .footer-newsletter form input {
  background: #eef1f5;
  color: var(--tg-paragraph-color);
}

.footer-top-two .footer-newsletter form input::-moz-placeholder {
  color: var(--tg-paragraph-color);
}

.footer-top-two .footer-newsletter form input::placeholder {
  color: var(--tg-paragraph-color);
}

.footer-top-two .footer-newsletter form {
  margin-bottom: 20px;
}

.footer-social.footer-social-two .list-wrap {
  justify-content: flex-start;
}

.footer-social.footer-social-two .list-wrap li a {
  background: #f1f1f1;
  color: var(--tg-paragraph-color);
}

.footer-social.footer-social-two .list-wrap li a:hover {
  background: var(--tg-paragraph-color);
  color: var(--tg-white);
}

.footer-bottom-two {
  border-top: 1px solid #182b4f;
  padding: 27px 0;
}

.copyright-text-two p {
  margin-bottom: 0;
  font-size: 14px;
}

/* footer-three */
.footer-area-three {
  background: #051433;
}

.footer-top-three {
  padding: 100px 0 55px;
}

.footer-top-three .fw-logo {
  margin-bottom: 30px;
}

.footer-top-three .footer-content > p {
  color: #96a1b8;
}

.footer-social.footer-social-three .list-wrap {
  justify-content: flex-start;
}

.footer-bottom-three {
  border-top: 1px solid #1a264f;
  padding: 27px 0;
}

/*=============================
	28. Preloader
===============================*/
#preloader {
  background-color: var(--tg-white);
  height: 100%;
  width: 100%;
  position: fixed;
  margin-top: 0px;
  top: 0px;
  z-index: 999;
}

#loading-center {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 75px;
  display: inline-block;
  vertical-align: middle;
}

.loader .loader-outter {
  position: absolute;
  border: 4px solid var(--tg-primary-color);
  border-left-color: transparent;
  border-bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.loader .loader-inner {
  position: absolute;
  border: 4px solid var(--tg-primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  inset-inline-start: calc(50% - 20px);
  top: calc(50% - 20px);
  border-right: 0;
  border-top-color: transparent;
  animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}
@keyframes loader-outter {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loader-inner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.show-admin-bar .sticky-menu,
.show-admin-bar .mobile-menu {
  margin-top: 40px;
}

.request-form-wrap .form-grp textarea::-moz-placeholder {
  font-size: 13px;
  font-weight: 500;
}

.request-form-wrap .form-grp textarea,
.request-form-wrap .form-grp textarea::placeholder {
  font-size: 13px;
  font-weight: 500;
}
.request-form-wrap .contact-form .contact-form-group {
  margin-bottom: unset;
}

.overview-area .overview-content {
  width: 100%;
}

.action-header-style-1 ul {
  margin: 0;
}

.action-header-style-1:not(:last-child) {
  align-self: stretch;
}
.action-header-style-1:not(:last-child) ul {
  border-right: 1px solid #d9d9d9;
  height: 100%;
}

.header-top-right {
  gap: 20px;
}

#sticky-header .custom-header {
  display: flex !important;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 991.8px) {
  #sticky-header .custom-header {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

.menu-nav {
  width: 100%;
}

.btn-404 i {
  margin-inline-start: 20px;
}
.btn-404:after {
  display: none !important;
}

.rc-post-item {
  height: 75px;
}
.rc-post-item .thumb {
  align-self: stretch;
}
.rc-post-item img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.rc-post-item h2.title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.blog-post-content-two h2.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.blog-post-content-two p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.blog-meta .list-wrap li span {
  color: var(--tg-paragraph-color);
  font-size: 16px;
}
.blog-meta .list-wrap li span img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-inline-end: 10px;
  flex: 0 0 auto;
}

.blog-details-wrap .blog-meta-three img {
  width: 40px;
}
.blog-details-wrap .section .container {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.blog-details-thumb img {
  width: 100%;
  aspect-ratio: 16/10;
  -o-object-fit: cover;
     object-fit: cover;
}

.blog-details-content .thumb img {
  width: 100%;
  aspect-ratio: 16/10;
  -o-object-fit: cover;
     object-fit: cover;
}
.blog-details-content .bd-inner-wrap ul.list-wrap li {
  align-items: center;
  gap: 10px;
}
.blog-details-content .bd-inner-wrap ul.list-wrap li i {
  color: var(--tg-primary-color);
}
.blog-details-content .blog-post-share .list-wrap li a {
  color: var(--tg-paragraph-color);
}

.services-thumb img {
  height: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}

.services-content-two .icon img {
  width: 40px;
}

.features-icon-three img {
  width: 40px;
}

.features-content-three i {
  margin-inline-start: 20px;
}

.truncate-2-custom {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.truncate-3-custom {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.services-thumb-three img {
  aspect-ratio: 16/10;
  -o-object-fit: cover;
     object-fit: cover;
}

.features-content-three svg,
.transparent-btn-two svg {
  margin-inline-start: 10px;
}
.features-content-three:after,
.transparent-btn-two:after {
  display: none;
}

.btn.btn-three:after {
  display: none;
}
.btn.btn-three svg {
  margin-inline-start: 10px;
}

.services-item-three .services-icon img {
  transition: 0.3s linear;
}
.services-item-three:hover .services-icon img {
  transform: rotateY(180deg);
}

.services-details-thumb img {
  aspect-ratio: 429/241;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.menu-area .mobile-nav-toggler {
  margin-top: unset !important;
  margin-bottom: unset !important;
}

.list-wrap li {
  gap: 6px;
  align-items: center !important;
}

.sd-inner-wrap img {
  aspect-ratio: 16/10;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  border-radius: 10px;
}

.services-thumb-two img {
  aspect-ratio: 269/333;
  -o-object-fit: cover;
     object-fit: cover;
}

.services-content-three {
  padding-bottom: 65px;
}

.services-list-style-1 img {
  aspect-ratio: 317/237;
}

.footer-style {
  background: var(background-color);
}
.footer-style .footer-widget .fw-title {
  color: var(--footer-text-color);
}
.footer-style .footer-widget .fw-title:before {
  background: var(--footer-border-color);
}
.footer-style .footer-widget .footer-content p {
  color: var(--footer-text-muted-color);
}
.footer-style .footer-widget .footer-content .footer-info {
  color: var(--footer-text-muted-color);
}
.footer-style .footer-widget .footer-content .footer-info p {
  color: var(--footer-text-muted-color);
}
.footer-style .footer-widget .footer-content .footer-info ul li .content p,
.footer-style .footer-widget .footer-content .footer-info ul li .content a {
  color: var(--footer-text-muted-color);
}
.footer-style .footer-widget .footer-link ul li a {
  color: var(--footer-text-muted-color);
}
.footer-style .footer-top-two .footer-newsletter p {
  color: var(--footer-text-color);
}
.footer-style .footer-bottom-two p {
  color: var(--footer-text-muted-color);
}

.header-style-four .header-top-wrap .header-top-btn a {
  padding: 17px 24px;
}

.project-details-wrap img {
  aspect-ratio: 857/440;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.item-shape img {
  width: 75px;
  aspect-ratio: auto !important;
}

.team-details-info {
  position: relative;
}
.team-details-info .list-wrap a {
  color: inherit !important;
}
.team-details-info .list-wrap i {
  transform: translateY(0) !important;
}
.team-details-info .team-social-three {
  top: 0;
  inset-inline-end: 0;
  inset-inline-start: auto;
}
.team-details-info .team-social-three .social-toggle-icon {
  width: 36px;
  height: 36px;
  font-size: 18px;
}
.team-details-info .team-social-three .list-wrap {
  margin-bottom: 0;
  padding-bottom: 0;
}
.team-details-info .team-social-three .list-wrap li {
  justify-content: center;
  margin-bottom: 5px;
}
.team-details-info .team-social-three .list-wrap li i {
  margin-inline-end: 0;
  font-size: 18px;
  background: unset !important;
}

.team-details-thumb img {
  width: 100%;
  aspect-ratio: 46/59;
  -o-object-fit: cover;
     object-fit: cover;
}

.header-top-btn a {
  justify-content: center;
}

.header-style-two .header-action ul > li > a {
  padding: 25px 25px;
}

@media (max-width: 1800px) {
  .faq-shape-wrap img:nth-child(2) {
    left: 9%;
  }
}
@media (max-width: 1199.98px) {
  .about-img-two {
    padding-left: 75px;
  }
  .about-img-two .sub-image {
    border: 5px solid #ffffff !important;
    left: 0;
    max-width: 215px;
  }
}
@media (max-width: 991.8px) {
  .header-top-wrap {
    display: none;
  }
  .header-style-two .menu-area {
    box-shadow: none;
  }
  .mobile-nav-toggler {
    display: block !important;
  }
  .custom-container {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .about-shape-wrap img:nth-child(1) {
    right: auto;
    left: 25%;
  }
}
@media (min-width: 992px) {
  .header-style-three .custom-header {
    justify-content: center !important;
  }
}
@media (max-width: 1199.8px) and (min-width: 992px) {
  .header-style-three .container {
    max-width: 100%;
  }
  .header-style-three .container .header-action > ul {
    margin-inline-start: 12px;
  }
}
.about-img-two .main-image {
  aspect-ratio: 463/570;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.about-img-two .sub-image {
  aspect-ratio: 267/287;
  width: 267px;
  -o-object-fit: cover;
     object-fit: cover;
}

.faq-img-wrap img:first-child {
  aspect-ratio: 416/489;
  width: 80%;
  -o-object-fit: cover;
     object-fit: cover;
}

.services-area .services-thumb img {
  aspect-ratio: 317/238;
}

.language-switcher a.dropdown-toggle {
  line-height: 1;
}
.language-switcher a.dropdown-toggle img {
  width: 20px;
}
.language-switcher .language-switcher-list li a.language-item {
  padding: 9px 15px 9px 25px;
  line-height: 1.4;
  font-size: 16px;
  font-weight: 500;
  color: var(--tg-secondary-color);
  text-transform: capitalize;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  gap: 5px;
}
.language-switcher .language-switcher-list li a.language-item:hover {
  color: var(--tg-primary-color);
}
.language-switcher .language-switcher-list.show {
  inset: 20px auto auto -10px !important;
}

@media only screen and (max-width: 991px) {
  .menu-nav .language-switcher {
    display: none !important;
  }
}
.mobile-menu .menu-title {
  font-weight: bold;
  font-size: 20px;
  margin-inline-start: 10px;
}
.mobile-menu .menu-title span {
  border-bottom: 3px solid var(--tg-primary-color);
  padding-bottom: 4px;
}

.language-switcher-sidebar ul {
  list-style-type: none;
}
.language-switcher-sidebar ul li a {
  position: relative;
  display: block;
  line-height: 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tg-heading-font-color);
  text-transform: capitalize;
  transition: all 500ms ease;
  border: none;
  margin-bottom: 5px;
}
.language-switcher-sidebar ul li a:hover {
  color: var(--tg-primary-color);
}

.team-area-two .team-item-two .team-social-two .list-wrap {
  background: rgba(var(--secondary-color-rgb)/40%);
  padding-left: 0;
  padding-right: 0;
}
.team-area-two .team-item-two .team-social-two .list-wrap li {
  text-align: center;
  padding: 2px 13px;
}
.team-area-two .team-item-two .team-social-two .list-wrap li:hover {
  cursor: pointer;
}
.team-area-two .team-item-two .team-social-two .list-wrap li:hover a {
  color: var(--primary-color) !important;
}
.team-area-two .team-item-two .team-social-two .list-wrap li a {
  transform: unset;
}

.team-area .team-social .list-wrap li a {
  transform: unset;
}

.no-fixed header {
  position: unset;
}

.navbar-wrap ul.sub-menu li.menu-item-has-children:hover > a:after {
  color: var(--tg-primary-color);
}
.navbar-wrap ul.sub-menu li.menu-item-has-children > a:after {
  position: absolute;
  content: "\f105";
  font-weight: 700;
  font-family: "Font Awesome 5 Free";
  color: var(--tg-paragraph-color);
  margin-inline-start: 8px;
  transition: all 0.3s ease-out 0s;
  inset-inline-end: 1.5rem;
}

.project-content-two > span {
  line-height: 1.5rem;
}

.section-title-two .sub-title {
  background: rgba(var(--primary-color-rgb)/20%) !important;
  color: var(--tg-primary-color) !important;
}

.testimonial-nav-two .slick-arrow {
  background: rgba(var(--primary-color-rgb)/20%) !important;
  color: var(--tg-primary-color) !important;
}

.testimonial-nav button {
  background: rgba(var(--primary-color-rgb)/20%) !important;
  color: var(--tg-primary-color) !important;
}

.project-link i {
  color: #fff;
}

.menu-wrap {
  width: 100%;
}

.circle-content .percentage {
  text-wrap: nowrap;
}

.svg-color {
  color: var(--tg-primary-color);
}

.button-loading {
  border: 1px solid #c4cdd5;
  color: transparent !important;
  cursor: default;
  position: relative;
  text-shadow: none;
  transition: border-color 0.2s ease-out;
}
@keyframes button-loading-spinner {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
.button-loading:before {
  animation: button-loading-spinner 1s linear infinite;
  border: 3px solid;
  border-color: #fff #fff transparent;
  border-radius: 50%;
  content: "";
  height: 18px;
  left: 50%;
  margin-left: -9px;
  margin-top: -9px;
  position: absolute;
  top: 50%;
  width: 18px;
}

.button-loading,
.button-loading:active,
.button-loading:focus,
.button-loading:hover {
  color: transparent;
}

.gallery-wrap {
  display: flex;
  flex-wrap: wrap;
}

.side-instagram.list-wrap a {
  height: 100%;
}
.side-instagram.list-wrap img {
  aspect-ratio: 1/1;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#list-photo {
  height: 200px;
}
#list-photo div {
  height: 200px;
}
#list-photo div img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.header-style-two .header-action ul li a,
.header-style-three .header-action ul li a,
.header-style-four .header-action ul li a {
  color: var(--tg-paragraph-color);
}

.choose-area-two {
  background: var(--tg-secondary-color);
}

.pricing-list .text-line-through {
  text-decoration: line-through;
}

.team-area-four .team-social-three {
  border-radius: 30px;
}
.team-area-four .team-social-three .bg-social {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 30px;
}
.team-area-four .team-social-three .fg-social {
  background: rgba(var(--primary-color-rgb)/20%);
}
.team-area-four .team-social-three .social-toggle-icon,
.team-area-four .team-social-three .list-wrap {
  z-index: 2;
}
.team-area-four .team-social-three .list-wrap {
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
}
.main > .ck-content > section, .main > .ck-content div > section {
  overflow-x: hidden;
}

.request-form-wrap .button-loading {
  background-color: var(--tg-primary-color) !important;
}

.header-top-sidebar-style-2 .header-action ul {
  margin-inline-start: 25px;
}
.header-top-sidebar-style-2 .header-action ul .offcanvas-menu a {
  padding: unset;
}

.estimate-form-wrap .form-select {
  border: 1px solid #d0d6e1;
  border-radius: 5px;
  width: 100%;
  padding: 0 20px;
  font-weight: 500;
  font-size: 14px;
  color: var(--tg-secondary-color);
  height: 50px;
}
.estimate-form-wrap textarea {
  font-size: 14px;
  font-weight: 500;
  color: var(--tg-secondary-color);
}
.estimate-form-wrap textarea::-moz-placeholder {
  font-size: 14px;
}
.estimate-form-wrap textarea::placeholder {
  font-size: 14px;
}

.header-top-style-2 .header-contact, .header-top-wrap .header-contact {
  padding: 12px 0;
}

.about-author-info .thumb img {
  border-radius: 50%;
}

.header-top-wrap .header-top-btn {
  width: 70%;
  margin-inline-start: auto;
}

@media (max-width: 1200px) {
  .header-top-wrap .header-top-btn {
    width: 90%;
  }
}
.btn-brand-1-big.button-loading.btn::before {
  transition: unset;
  width: 18px;
}

.header-style-three .header-contact-two {
  padding: 20px 0;
}

.header-top-left .list-wrap {
  padding: 15px 0;
}

.gallery-wrap .gallery-item .gallery-detail {
  bottom: -60px;
}

.breadcrumb-bg.breadcrumb-bg-transparent::before {
  background: transparent;
}

.banner-content-two .banner-btn {
  margin-bottom: 80px;
}/*# sourceMappingURL=style.css.map */