:root {
  /**
  @font family declaration
  */
  --bd-ff-body: 'Montserrat', sans-serif;;
  --bd-ff-heading: 'Montserrat', sans-serif;;
  --bd-ff-fontawesome: "Font Awesome 6 Pro";
  /**
  @color declaration
  */
  --clr-common-white: #ffffff;
  --clr-common-black: #000;
  --clr-common-placeholder: #c3c3c3;
  --clr-common-heading: #0a1405;
  --clr-common-body-text: #000;
  --clr-common-yellow: #eaff95;
  --clr-theme-1: #936dd5;
  --clr-theme-2: #faee67;
  --clr-theme-3: #946ed6;
  --clr-theme-4: #0a1405;
  --clr-theme-5: #f7ff82;
  --clr-theme-6: #2CD68A;
  --clr-text-1: #999999;
  --clr-text-2: #777777;
  --clr-text-3: #cdcdcd;
  --clr-text-4: #b4b4c1;
  --clr-text-5: #6f6f6f;
  --clr-text-6: #dfebd9;
  --clr-text-7: #899384;
  --clr-text-8: #B4B4C1;
  --clr-bg-gray-1: #f5f5f9;
  --clr-bg-gray-2: #f3f3f3;
  --clr-bg-gray-3: #eaedf1;
  --clr-bg-gray-4: #e2e2eb;
  --clr-bg-gray-5: #e8e8f1;
  --clr-bg-gray-6: #eaeaf0;
  --clr-bg-mediumpurple: #7251ac;
  --clr-border-1: #344166;
  --clr-border-2: #f0f0f0;
  --clr-border-3: #d7c8f0;
  --clr-border-4: #f2f2f2;
  --clr-border-5: #e1e1eb;
  --clr-border-6: #8060b8;
  --clr-border-7: #e8e8ef;
  --clr-border-8: #4e4e4e;
  --clr-border-9: #14200e;
  --clr-border-10: #ececec;
  --clr-border-11: #eaeaea;
  --clr-border-12: #1B2C13;
  --clr-footer-1: #9898a2;
  --clr-footer-2: #585858;
  --clr-footer-3: #707070;
  /**
  @font weight declaration
  */
  --bd-fw-normal: normal;
  --bd-fw-thin: 100;
  --bd-fw-elight: 200;
  --bd-fw-light: 300;
  --bd-fw-regular: 400;
  --bd-fw-medium: 500;
  --bd-fw-sbold: 600;
  --bd-fw-bold: 700;
  --bd-fw-ebold: 800;
  --bd-fw-black: 900;
  /**
  @font size declaration
  */
  --bd-fs-body: 16px;
  --bd-fs-p: 16px;
  --bd-fs-h1: 80px;
  --bd-fs-h2: 60px;
  --bd-fs-h3: 24px;
  --bd-fs-h4: 20px;
  --bd-fs-h5: 16px;
  --bd-fs-h6: 14px;
}

/*-----------------------------------------------------------------------------------

    Theme Name: Rido - Creative Agency & Business HTML5 Template
    Author: Portraittheme
    Support: https://www.devsnews.com/support/
    Description: Rido - Creative Agency & Business HTML5 Template
    Version: 1.0


-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	01. THEME DEFAULT CSS START
  	02. ANIMATION CSS START
	03. BACKGROUND COLOR CSS START
	04. BREAADCRUMB CSS START
	05. BUTTTON CSS START
	06. CAROUSEL CSS START
	07. MEAN MENU CSS START
	08. OFFCANVAS CSS START
	09. PRELODER CSS START
	10. SECTION TITLE CSS START
	11. ABOUT CSS START
	12. ACCORDIONG CSS START
	13.	BANNER CSS START
	14.	BRAND CSS START
	15.	CONTACT CSS START
	16.	CTA CSS START
	17.	ERROR CSS START
	18. FACT CSS START
	19. FAQ CSS START
	20. FEATURES CSS START
	21. FEEDBACK CSS START
	22.	FOOTER CSS START
	23. HEADER CSS START
	24. HISTORY CSS START
	25. NEWS CSS START
	26. NEWSLETTTER CSS START
	27.	PORTFOLIO CSS START
	28. PRICING CSS START
	29. PROCESS CSS START
	30.	SERVICCE CSS START
	31.	SIGN CSS START
	32. SKILL CSS STAR
	33. TEAM CSS START
	34. TESTIMONIAL CSS START
	35. UPGRADE CSS START
	36. VIDEO CSS START
**********************************************/
/*----------------------------------------*/
/*  01. THEME DEFAULT CSS START
/*----------------------------------------*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*---------------------------------
    Typography css start 
---------------------------------*/
body {
  font-family: var(--bd-ff-body);
  font-size: var(--bd-fs-body);
  font-weight: normal;
  color: var(--clr-common-black);
  line-height: 26px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bd-ff-heading);
  color: var(--clr-common-heading);
  font-weight: var(--bd-fw-sbold);
  margin-top: 0px;
  line-height: 1.3;
  margin-bottom: 0;
}

h1 {
  font-size: var(--bd-fs-h1);
}

h2 {
  font-size: var(--bd-fs-h2);
}

h3 {
  font-size: var(--bd-fs-h3);
}

h4 {
  font-size: var(--bd-fs-h4);
}

h5 {
  font-size: var(--bd-fs-h5);
}

h6 {
  font-size: var(--bd-fs-h6);
}

ul {
  margin: 0px;
  padding: 0px;
}

p {
  font-size: var(--bd-fs-p);
  font-weight: var(--bd-fw-normal);
  color: var(--clr-text-2);
  margin-bottom: 15px;
  line-height: 26px;
}

a {
  text-decoration: none;
}

a,
.btn,
button,
span,
p,
input,
select,
textarea,
li,
img,
svg path,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

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

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

input {
  outline: none;
}

input[type=color] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  padding: 0;
  border-radius: 50%;
}

*::-moz-selection {
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
  text-shadow: none;
}

::selection {
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--clr-common-placeholder);
  opacity: 1;
  font-size: 16px;
}

*::placeholder {
  color: var(--clr-common-placeholder);
  opacity: 1;
  font-size: 16px;
}

/*---------------------------------
    common classes css start 
---------------------------------*/
.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.z-index-1 {
  z-index: 1;
}

.z-index-11 {
  z-index: 11;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.include__bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hr-1 {
  border-top: 1px solid rgb(232, 232, 232);
}

/*----------------------------------------
    Progress Wrap
-----------------------------------------*/
@media (max-width: 575px) {
  .progress-wrap {
    right: 15px;
    bottom: 15px;
  }
}

/*----------------------------------------
   Basic-pagaination
-----------------------------------------*/
.bd-basic__pagination ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .bd-basic__pagination ul {
    justify-content: start;
  }
}
.bd-basic__pagination ul li {
  list-style: none;
}
.bd-basic__pagination ul li a {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  right: 0;
  top: 50%;
  font-weight: var(--bd-fw-sbold);
  font-size: 16px;
  border: 1px solid var(--clr-border-11);
  overflow: hidden;
  z-index: 5;
  background-color: transparent;
}
.bd-basic__pagination ul li a:hover {
  background-color: var(--clr-theme-1);
  border-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}
.bd-basic__pagination ul li span {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  position: relative;
  right: 0;
  top: 50%;
  font-weight: var(--bd-fw-sbold);
  font-size: 16px;
  background-color: var(--clr-theme-1);
  overflow: hidden;
  color: var(--clr-common-white);
  z-index: 5;
}

input.e-check-input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 18px;
  min-width: 18px;
  height: 18px;
  background: var(--clr-common-white);
  border: 1px solid #b9bac1;
  outline: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
input.e-check-input:checked {
  position: relative;
  background-color: var(--clr-theme-1);
  border-color: transparent;
}
input.e-check-input:checked::after {
  box-sizing: border-box;
  content: "\f00c";
  position: absolute;
  font-family: var(--bd-ff-fontawesome);
  font-size: 12px;
  color: var(--clr-common-white);
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*----------------------------------------*/
/*  03. BACKGROUND COLOR CSS START
/*----------------------------------------*/
/*--- Background color
-----------------------------------------*/
.white__bg {
  background-color: var(--clr-common-white);
}

.black__bg {
  background-color: var(--clr-common-black);
}

.dark__bg {
  background-color: var(--clr-common-heading);
}

.grey__bg {
  background-color: var(--clr-bg-gray-1);
}

.grey__bg-2 {
  background-color: var(--clr-bg-gray-2);
}

.grey__bg-3 {
  background-color: var(--clr-bg-gray-5);
}

.grey__bg-4 {
  background-color: var(--clr-bg-gray-6);
}

.yellow__bg {
  background-color: var(--clr-common-yellow);
}

.mediumpurple__bg {
  background-color: var(--clr-theme-1);
}

.mediumpurple__bg-2 {
  background-color: var(--clr-bg-mediumpurple);
}

.footer__bg {
  background-color: var(--clr-bg-footer);
}

/*----------------------------------------*/
/*  05. BUTTTON CSS START
/*----------------------------------------*/
.border__btn {
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-theme-1);
  padding: 0 28px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.border__btn i {
  margin-left: 20px;
  font-size: 16px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.border__btn:hover {
  border-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}
.border__btn.s-2 {
  height: 60px;
}
.border__btn.s-3 {
  height: 60px;
}
.border__btn.s-4 {
  height: 50px;
  border: 1px solid rgb(45, 45, 45);
  color: var(--clr-common-white);
  font-weight: var(--bd-fw-bold);
}
.border__btn.s-4:hover {
  border-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}
.border__btn.s-5 {
  border: 1px solidvar(--clr-common-black);
  color: var(--clr-common-black);
}
.border__btn.s-5:hover {
  border-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}
.border__btn.s-6 {
  color: var(--clr-common-white);
  border: 2px solid var(--clr-border-9);
  height: 60px;
}
.border__btn.s-6:hover {
  border-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.fill__btn {
  height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-theme-1);
  padding: 0 30px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
  display: inline-flex;
  gap: 20px;
}
.fill__btn i {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  font-size: 16px;
}
.fill__btn:hover {
  color: var(--clr-common-heading);
  background-color: var(--clr-common-white);
  border: 1px solid var(--clr-common-heading);
}
.fill__btn.s-2 {
  height: 50px;
}
.fill__btn.s-2:hover {
  background-color: transparent;
  color: var(--clr-common-white);
  border-color: rgb(45, 45, 45);
}
.fill__btn.s-3 {
  height: 50px;
}
.fill__btn.s-4 {
  height: 60px;
  background-color: var(--clr-theme-1);
  border: 2px solid var(--clr-theme-1);
  color: var(--clr-common-white);
}
.fill__btn.s-4:hover {
  background-color: transparent;
  border-color: var(--clr-border-9);
  color: var(--clr-common-white);
}
.fill__btn.s-5 {
  height: 60px;
  background-color: var(--clr-theme-1);
  border: 1px solid var(--clr-theme-1);
  color: var(--clr-common-white);
}
.fill__btn.s-5:hover {
  background-color: transparent;
  border-color: var(--clr-common-black);
  color: var(--clr-common-black);
}

.animation__btn {
  position: relative;
  z-index: 9;
  overflow: hidden;
}
.animation__btn b {
  position: absolute;
  width: 0px;
  height: 0px;
  background-color: var(--clr-theme-1);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  z-index: -1;
}
.animation__btn:hover b {
  width: 900px;
  height: 800px;
  display: inline-block;
}

.newsletter__btn {
  height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-common-heading);
  padding: 0 30px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background-color: transparent;
  color: var(--clr-common-heading);
  display: inline-flex;
  gap: 20px;
}
.newsletter__btn:hover {
  color: var(--clr-common-white);
  border-color: var(--clr-theme-1);
}
.newsletter__btn button {
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--clr-theme-1);
  height: 60px;
  padding: 0 30px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-common-white);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 15px;
}
.newsletter__btn button i {
  font-size: 16px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.text__btn {
  font-size: 14px;
  font-weight: var(--bd-fw-bold);
  color: var(--clr-common-heading);
  text-transform: capitalize;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  line-height: 1;
  overflow: hidden;
}
.text__btn i {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.text__btn:hover {
  color: var(--clr-theme-1);
}
.text__btn:hover i:first-child {
  margin-left: 0;
}
.text__btn:hover i:last-child {
  font-size: 0;
}
.text__btn i:first-child {
  margin-left: -22px;
}

.service__btn {
  height: 60px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 0 40px;
  background-color: var(--clr-common-white);
  font-size: 14px;
  font-weight: var(--bd-fw-bold);
  color: var(--clr-common-black);
}
.service__btn i {
  font-size: 18px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.service__btn:hover {
  color: var(--clr-common-white);
}

.input__btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--clr-theme-1);
  height: 60px;
  padding: 0 28px;
  font-size: 14px;
  color: var(--clr-common-white);
  display: flex;
  gap: 20px;
  align-items: center;
  font-weight: var(--bd-fw-bold);
}
.input__btn i {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media (max-width: 575px) {
  .input__btn {
    position: static;
    margin-top: 50px;
  }
}

.play__btn {
  width: 120px;
  height: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-theme-2);
  font-size: 20px;
  border-radius: 50%;
}
.play__btn:hover {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-1);
}
.play__btn.s-2 {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}
.play__btn.s-2:hover {
  background-color: var(--clr-common-white);
  color: var(--clr-theme-3);
}

.pricing__btn {
  height: 60px;
  display: inline-flex;
  border: 2px solid var(--clr-border-4);
  padding: 0 30px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--clr-common-heading);
  border-radius: 6px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
}
.pricing__btn i {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.pricing__btn:hover {
  border-color: var(--clr-theme-3);
  color: var(--clr-common-white);
  background-color: var(--clr-theme-3);
}

.team__btn {
  height: 60px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-theme-1);
  padding: 0 30px;
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background-color: transparent;
  color: var(--clr-common-black);
  display: inline-flex;
  gap: 20px;
}
.team__btn i {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  font-size: 16px;
}
.team__btn:hover {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-1);
  border: 1px solid var(--clr-theme-1);
}

.solid__btn {
  height: 60px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-theme-1);
  padding: 0 30px;
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
  display: inline-flex;
  gap: 20px;
}
.solid__btn i {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  font-size: 16px;
}
.solid__btn:hover {
  color: var(--clr-common-heading);
  background-color: transparent;
  border: 1px solid var(--clr-theme-1);
}

.upgrade__btn {
  height: 60px;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background-color: var(--clr-common-heading);
  color: var(--clr-common-white);
  display: inline-flex;
  gap: 20px;
}
.upgrade__btn i {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  font-size: 16px;
}
.upgrade__btn:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.contact__btn {
  height: 60px;
  border: 1px solid var(--clr-common-heading);
  padding: 0 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
}
.contact__btn i {
  margin-left: 20px;
  font-size: 16px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.contact__btn:hover {
  color: var(--clr-common-white);
  border-color: var(--clr-theme-1);
}

.sign__btn {
  height: 55px;
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
  border: 1px solid var(--clr-theme-1);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.sign__btn i {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/*----------------------------------------*/
/*  07. MEAN MENU CSS START
/*----------------------------------------*/
/* Mean menu customize */
.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: var(--clr-common-heading);
  border-top: 1px solid var(--clr-border-3);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  text-transform: capitalize;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--clr-theme-1);
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 5px;
  padding: 0 !important;
  border: 1px solid var(--clr-border-3) !important;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-common-heading);
  line-height: 30px;
  top: 0;
  font-weight: 400;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.mean-container .mean-nav ul li > a > i {
  display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-1);
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

/*----------------------------------------*/
/* 08. OFFCANVAS CSS START
/*----------------------------------------*/
.offcanvas__close button {
  height: 45px;
  width: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-common-heading);
  font-size: 18px;
  background-color: var(--clr-theme-1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.offcanvas__close button i {
  color: var(--clr-common-white);
}
.offcanvas__info {
  background: var(--clr-common-white) none repeat scroll 0 0;
  border-left: 3px solid var(--clr-theme-1);
  position: fixed;
  right: 0;
  top: 0;
  width: 370px;
  height: 100%;
  -webkit-transform: translateX(calc(100% + 80px));
  -moz-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -o-transform: translateX(calc(100% + 80px));
  transform: translateX(calc(100% + 80px));
  -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  background-color: var(--clr-bg-gray-4);
}
@media (max-width: 575px) {
  .offcanvas__info {
    width: 300px;
  }
}
.offcanvas__info.info-open {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.offcanvas__logo a img {
  max-width: 180px;
}
.offcanvas__wrapper {
  position: relative;
  height: 100%;
  padding: 30px 30px;
}
@media (max-width: 575px) {
  .offcanvas__wrapper {
    padding: 20px;
  }
}
.offcanvas__top {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--clr-border-3);
}
.offcanvas__color {
  margin-bottom: 40px;
}
.offcanvas__color h5 {
  font-size: 22px;
  margin-bottom: 15px;
}
.offcanvas__color input {
  display: none;
}
.offcanvas__color label {
  width: 100%;
  height: 60px;
  background-color: var(--clr-theme-1);
}
.offcanvas__color label:hover {
  cursor: pointer;
}
.offcanvas__color-2 label {
  background-color: var(--bd-theme-2);
}
.offcanvas__search {
  position: relative;
}
.offcanvas__search input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-right: 20px;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid var(--clr-border-3);
  font-size: 16px;
  color: var(--clr-common-heading);
}
.offcanvas__search input::placeholder {
  color: var(--clr-common-heading);
}
.offcanvas__search input:focus {
  border-color: var(--clr-common-heading);
}
.offcanvas__search button {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--clr-common-heading);
}
.offcanvas__search button:hover {
  color: var(--clr-theme-1);
}
.offcanvas__text p {
  margin-bottom: 25px;
}
.offcanvas__contact h4 {
  font-size: 22px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: var(--bd-fw-bold);
  color: var(--clr-common-heading);
}
.offcanvas__contact ul li:not(:last-child) {
  margin-bottom: 20px;
}
.offcanvas__contact ul li:hover i {
  color: var(--clr-common-white);
  border-color: var(--clr-theme-1);
  background-color: var(--clr-theme-1);
}
.offcanvas__contact-icon i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  border: 1px solid var(--clr-border-1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: var(--clr-common-heading);
  position: relative;
  z-index: 5;
}
.offcanvas__contact-text a {
  font-size: 16px;
  font-weight: 500;
  color: var(--clr-common-heading);
}
.offcanvas__contact-text a:hover {
  color: var(--clr-theme-1);
}
.offcanvas__social {
  margin-bottom: 30px;
}
.offcanvas__social ul li {
  display: inline-block;
}
.offcanvas__social ul li:not(:last-child) {
  margin-right: 5px;
}
.offcanvas__social ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-border-1);
  color: var(--clr-theme-1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 5;
  background-color: transparent;
}
.offcanvas__social ul li a:hover {
  color: var(--clr-common-white);
  border: 1px solid var(--clr-theme-1);
  background-color: var(--clr-theme-1);
}
.offcanvas__notification-icon a {
  font-size: 14px;
  color: var(--clr-common-heading);
  position: relative;
}
.offcanvas__notification-icon a .notification-count {
  position: absolute;
  top: -4px;
  right: -13px;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 22px;
  font-size: 12px;
  font-weight: 600;
  background-color: var(--clr-theme-1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  color: var(--clr-common-heading);
  text-align: center;
}
.offcanvas__notification-text p {
  margin-bottom: 0;
  font-weight: 500;
  color: var(--clr-common-heading);
  font-size: 14px;
}
.offcanvas__notification-text p .notification-number {
  color: var(--clr-theme-1);
}
.offcanvas__notification-text p a {
  color: var(--clr-theme-1);
}
.offcanvas__overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: var(--clr-common-black);
  z-index: 900;
  top: 0;
  opacity: 0;
  visibility: hidden;
  right: 0;
}
.offcanvas__overlay.overlay-open {
  opacity: 0.5;
  visibility: visible;
}
.offcanvas .sign__area.open {
  opacity: 0.6;
  visibility: visible;
}

/*----------------------------------------*/
/*  10. SECTION TITLE CSS START
/*----------------------------------------*/
.section__subtitle {
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-theme-1);
  border-bottom: 2px solid var(--clr-border-3);
  line-height: 1;
  display: inline-block;
  position: relative;
  top: -7px;
}
.section__title {
  font-size: 60px;
  font-weight: var(--bd-fw-sbold);
  line-height: 1.2;
  color: var(--clr-common-heading);
}
.section__title.s-2 {
  color: var(--clr-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section__title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title {
    font-size: 45px;
  }
}
@media (max-width: 575px) {
  .section__title {
    font-size: 40px;
  }
}

.section__subtitle-2 {
  display: inline-block;
  margin-bottom: 35px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-theme-1);
  line-height: 1;
  position: relative;
  left: 55px;
  margin-top: 15px;
}
.section__subtitle-2.middle {
  left: 0;
}
.section__title-2 {
  font-size: 60px;
  letter-spacing: -1px;
  line-height: 1.2;
}
.section__title-2.s-2 {
  color: var(--clr-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section__title-2 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-2 {
    font-size: 45px;
  }
}
@media (max-width: 575px) {
  .section__title-2 {
    font-size: 40px;
  }
}

.subtitle__highlight svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.subtitle__highlight svg path {
  font-size: 65px;
  stroke: #936dd5;
  fill: #936dd5;
  fill-opacity: 0;
  stroke-width: 1;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  -moz-animation: section-highlight 2.5s ease-in-out 1s forwards infinite alternate;
  -webkit-animation: section-highlight 2.5s ease-in-out 1s forwards infinite alternate;
  animation: section-highlight 2.5s ease-in-out 1s forwards infinite alternate;
}

.section__title-wrapper {
  position: relative;
  z-index: 55;
}
.section__title-3 {
  font-size: 60px;
  line-height: 1.1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .section__title-3 {
    font-size: 50px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-3 {
    font-size: 45px;
  }
}
@media (max-width:450px) {
  .section__title-3 {
    font-size: 40px;
  }
}
.section__title-3.s-2 {
  color: var(--clr-common-white);
}
.section__subtitle-3 {
  font-size: 14px;
  font-weight: var(--bd-fw-bold);
  color: var(--clr-theme-1);
  text-transform: capitalize;
  top: -8px;
  position: relative;
}
.section__subtitle-3.s-2 {
  color: var(--clr-common-white);
}
.section__backtitle {
  font-size: 160px;
  font-weight: var(--bd-fw-sbold);
  position: absolute;
  left: 50%;
  top: -5%;
  transform: translate(-50%, -50%);
  z-index: -1;
  height: auto;
  width: 100%;
  background: -webkit-linear-gradient(90deg, #fff 0%, #d8d8e6 100%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  line-height: 0.85;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section__backtitle {
    font-size: 140px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .section__backtitle {
    font-size: 125px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section__backtitle {
    font-size: 100px;
  }
}
@media (max-width: 575px) {
  .section__backtitle {
    font-size: 65px;
  }
}
.section__backtitle.s-2 {
  left: -15px;
  transform: translateY(-50%);
  letter-spacing: -9px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section__backtitle.s-2 {
    font-size: 90px;
  }
}
.section__backtitle.s-3 {
  background: -webkit-linear-gradient(268deg, #aa88e5 0%, #936dd5 100%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section__subtitle-4 {
  font-size: 14px;
  font-weight: var(--bd-fw-bold);
  color: var(--clr-theme-3);
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}
.section__subtitle-4.s-2 {
  color: var(--clr-common-white);
}
.section__suptitle-4 {
  color: var(--clr-common-white);
}
.section__title-4 {
  font-size: 60px;
  line-height: 1.2;
  letter-spacing: -2px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section__title-4 {
    font-size: 45px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-4 {
    font-size: 45px;
  }
}
@media (max-width:450px) {
  .section__title-4 {
    font-size: 40px;
  }
}
.section__title-4.s-2 {
  color: var(--clr-common-white);
}

.title__highlight {
  position: relative;
}
.title__highlight svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.title__highlight svg path {
  font-size: 65px;
  stroke: rgb(232, 189, 231);
  fill: rgb(232, 189, 231);
  fill-opacity: 0;
  stroke-width: 1;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  -moz-animation: section-highlight 2.5s ease-in-out 1s forwards infinite alternate;
  -webkit-animation: section-highlight 2.5s ease-in-out 1s forwards infinite alternate;
  animation: section-highlight 2.5s ease-in-out 1s forwards infinite alternate;
}

@-webkit-keyframes section-highlight {
  0% {
    stroke-dashoffset: 800;
  }
  80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}
@-moz-keyframes section-highlight {
  0% {
    stroke-dashoffset: 800;
  }
  80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}
@-ms-keyframes section-highlight {
  0% {
    stroke-dashoffset: 800;
  }
  80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}
@keyframes section-highlight {
  0% {
    stroke-dashoffset: 800;
  }
  80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}
@-webkit-keyframes section-highlight-2 {
  0%, 100% {
    stroke-dashoffset: 800;
    fill-opacity: 0;
  }
  50% {
    fill-opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    fill-opacity: 1;
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes section-highlight-2 {
  0%, 100% {
    stroke-dashoffset: 800;
    fill-opacity: 0;
  }
  50% {
    fill-opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    fill-opacity: 1;
    stroke-dashoffset: 0;
  }
}
@-ms-keyframes section-highlight-2 {
  0%, 100% {
    stroke-dashoffset: 800;
    fill-opacity: 0;
  }
  50% {
    fill-opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    fill-opacity: 1;
    stroke-dashoffset: 0;
  }
}
@keyframes section-highlight-2 {
  0%, 100% {
    stroke-dashoffset: 800;
    fill-opacity: 0;
  }
  50% {
    fill-opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    fill-opacity: 1;
    stroke-dashoffset: 0;
  }
}
/*----------------------------------------*/
/* 04. BREAADCRUMB CSS START
/*----------------------------------------*/
.breadcrumb__area {
  padding-top: 120px;
  padding-bottom: 120px;
  position: relative;
  z-index: 1;
}
.breadcrumb__menu ul {
  display: inline-flex;
  gap: 30px;
  justify-content: center;
  padding: 7px 20px;
}
.breadcrumb__menu ul li {
  list-style: none;
  position: relative;
  line-height: 1;
}
.breadcrumb__menu ul li:not(:last-child):after {
  display: inline-block;
  content: "\f054";
  position: absolute;
  right: -19px;
  top: 50%;
  font-family: var(--bd-ff-fontawesome);
  font-size: 14px;
  transform: translateY(-50%);
}
.breadcrumb__menu ul li span {
  font-size: 16px;
  text-transform: capitalize;
  font-weight: var(--bd-fw-medium);
}
.breadcrumb__menu ul li span a {
  font-weight: 600;
}
.breadcrumb__menu ul li span a:hover {
  color: var(--clr-theme-1);
}
.breadcrumb__title h2 {
  font-size: 70px;
  line-height: 1.1;
  margin-bottom: 15px;
  text-transform: capitalize;
  letter-spacing: -1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb__title h2 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb__title h2 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .breadcrumb__title h2 {
    font-size: 50px;
  }
}
@media (max-width: 575px) {
  .breadcrumb__title h2 {
    font-size: 45px;
  }
}

/*----------------------------------------*/
/*  06. CAROUSEL CSS START
/*----------------------------------------*/
.testimonial__navigation {
  position: absolute;
  right: -90px;
  top: 50%;
  -webkit-transition: all translateY(-50%) ease-out 0s;
  -moz-transition: all translateY(-50%) ease-out 0s;
  -ms-transition: all translateY(-50%) ease-out 0s;
  -o-transition: all translateY(-50%) ease-out 0s;
  transition: all translateY(-50%) ease-out 0s;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__navigation {
    right: -70px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__navigation {
    display: none;
  }
}
.testimonial__navigation button {
  font-size: 30px;
  color: var(--clr-text-5);
}
.testimonial__navigation button:hover {
  color: var(--clr-common-heading);
}
.testimonial__navigation-4 {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--clr-common-white);
}
.testimonial__navigation-4 button {
  width: 60px;
  height: 60px;
  border: 2px solid var(--clr-border-6);
  border-radius: 6px;
}
.testimonial__navigation-4 button:hover {
  color: var(--clr-border-6);
  background-color: var(--clr-common-white);
  border-color: var(--clr-common-white);
}
.testimonial__wrapper-2 .slick-slide {
  padding: 0 15px;
}

.portfolio__active .slick-slide {
  padding: 0 25px;
}
.portfolio__intro-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}
.portfolio__navigation {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.portfolio__navigation button {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--clr-theme-3);
  font-size: 18px;
  color: var(--clr-theme-3);
}
.portfolio__navigation button:hover {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-3);
}

.swiper.testimonial-2 {
  overflow: visible;
}

.hero__title .slick-slide {
  overflow: hidden;
  padding: 25px 0;
}

.testimonial__slide .slick-slide {
  margin: 0 15px;
}

/*----------------------------------------*/
/* 02. ANIMATION CSS START
/*----------------------------------------*/
/* ========= sticky-animation ========== */
@keyframes headerSticky {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
/* ========= pluse-btn-animation ========== */
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
/* ========= scaleUpUser-animation ========== */
@keyframes scaleUpUser {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
.scaleup__animation {
  animation-name: scaleUpUser;
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* ========= play-btn-animation ========== */
.play__effect {
  position: relative;
}
.play__effect::before, .play__effect::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid #eaeaea;
  animation: popupBtn 1.8s linear infinite;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.play__effect.s-2::before, .play__effect.s-2::after {
  border: 1px solid var(--clr-common-white);
  opacity: 0.6;
}

/* ========= popup-btn-animation ========== */
@keyframes popupBtn {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
/* ========= popup-btn-animation ========== */
@keyframes hero-thumb-animation {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@-webkit-keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-ms-keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes hero-thumb-sm-3-animation {
  0% {
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}
/*----------------------------------------*/
/* 09. PRELODER CSS STAR
/*----------------------------------------*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
}

.preloader .color-1 {
  background-color: #936dd5 !important;
}

.rubix-cube {
  border: 1px solid #FFF;
  width: 48px;
  height: 48px;
  background-color: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.rubix-cube .layer {
  width: 14px;
  height: 14px;
  background-color: #936dd5;
  border: 1px solid #FFF;
  position: absolute;
}

.rubix-cube .layer-1 {
  left: 0px;
  top: 0px;
  -webkit-animation: rubixcube4 2s infinite linear;
  animation: rubixcube4 2s infinite linear;
}

.rubix-cube .layer-2 {
  left: 16px;
  top: 0px;
  -webkit-animation: rubixcube3 2s infinite linear;
  animation: rubixcube3 2s infinite linear;
}

.rubix-cube .layer-3 {
  left: 32px;
  top: 0px;
}

.rubix-cube .layer-4 {
  left: 0px;
  top: 16px;
  -webkit-animation: rubixcube5 2s infinite linear;
  animation: rubixcube5 2s infinite linear;
}

.rubix-cube .layer-5 {
  left: 16px;
  top: 16px;
  -webkit-animation: rubixcube2 2s infinite linear;
  animation: rubixcube2 2s infinite linear;
}

.rubix-cube .layer-6 {
  left: 32px;
  top: 16px;
  -webkit-animation: rubixcube1 2s infinite linear;
  animation: rubixcube1 2s infinite linear;
}

.rubix-cube .layer-7 {
  left: 0px;
  top: 32px;
  -webkit-animation: rubixcube6 2s infinite linear;
  animation: rubixcube6 2s infinite linear;
}

.rubix-cube .layer-8 {
  left: 16px;
  top: 32px;
  -webkit-animation: rubixcube7 2s infinite linear;
  animation: rubixcube7 2s infinite linear;
}

@-webkit-keyframes rubixcube1 {
  20% {
    top: 16px;
    left: 32px;
  }
  30% {
    top: 32px;
    left: 32px;
  }
  40% {
    top: 32px;
    left: 32px;
  }
  50% {
    top: 32px;
    left: 32px;
  }
  60% {
    top: 32px;
    left: 32px;
  }
  70% {
    top: 32px;
    left: 32px;
  }
  80% {
    top: 32px;
    left: 32px;
  }
  90% {
    top: 32px;
    left: 32px;
  }
  100% {
    top: 32px;
    left: 16px;
  }
}
@keyframes rubixcube1 {
  20% {
    top: 16px;
    left: 32px;
  }
  30% {
    top: 32px;
    left: 32px;
  }
  40% {
    top: 32px;
    left: 32px;
  }
  50% {
    top: 32px;
    left: 32px;
  }
  60% {
    top: 32px;
    left: 32px;
  }
  70% {
    top: 32px;
    left: 32px;
  }
  80% {
    top: 32px;
    left: 32px;
  }
  90% {
    top: 32px;
    left: 32px;
  }
  100% {
    top: 32px;
    left: 16px;
  }
}
@-webkit-keyframes rubixcube2 {
  30% {
    left: 16px;
  }
  40% {
    left: 32px;
  }
  50% {
    left: 32px;
  }
  60% {
    left: 32px;
  }
  70% {
    left: 32px;
  }
  80% {
    left: 32px;
  }
  90% {
    left: 32px;
  }
  100% {
    left: 32px;
  }
}
@keyframes rubixcube2 {
  30% {
    left: 16px;
  }
  40% {
    left: 32px;
  }
  50% {
    left: 32px;
  }
  60% {
    left: 32px;
  }
  70% {
    left: 32px;
  }
  80% {
    left: 32px;
  }
  90% {
    left: 32px;
  }
  100% {
    left: 32px;
  }
}
@-webkit-keyframes rubixcube3 {
  30% {
    top: 0px;
  }
  40% {
    top: 0px;
  }
  50% {
    top: 16px;
  }
  60% {
    top: 16px;
  }
  70% {
    top: 16px;
  }
  80% {
    top: 16px;
  }
  90% {
    top: 16px;
  }
  100% {
    top: 16px;
  }
}
@keyframes rubixcube3 {
  30% {
    top: 0px;
  }
  40% {
    top: 0px;
  }
  50% {
    top: 16px;
  }
  60% {
    top: 16px;
  }
  70% {
    top: 16px;
  }
  80% {
    top: 16px;
  }
  90% {
    top: 16px;
  }
  100% {
    top: 16px;
  }
}
@-webkit-keyframes rubixcube4 {
  50% {
    left: 0px;
  }
  60% {
    left: 16px;
  }
  70% {
    left: 16px;
  }
  80% {
    left: 16px;
  }
  90% {
    left: 16px;
  }
  100% {
    left: 16px;
  }
}
@keyframes rubixcube4 {
  50% {
    left: 0px;
  }
  60% {
    left: 16px;
  }
  70% {
    left: 16px;
  }
  80% {
    left: 16px;
  }
  90% {
    left: 16px;
  }
  100% {
    left: 16px;
  }
}
@-webkit-keyframes rubixcube5 {
  60% {
    top: 16px;
  }
  70% {
    top: 0px;
  }
  80% {
    top: 0px;
  }
  90% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}
@keyframes rubixcube5 {
  60% {
    top: 16px;
  }
  70% {
    top: 0px;
  }
  80% {
    top: 0px;
  }
  90% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}
@-webkit-keyframes rubixcube6 {
  70% {
    top: 32px;
  }
  80% {
    top: 16px;
  }
  90% {
    top: 16px;
  }
  100% {
    top: 16px;
  }
}
@keyframes rubixcube6 {
  70% {
    top: 32px;
  }
  80% {
    top: 16px;
  }
  90% {
    top: 16px;
  }
  100% {
    top: 16px;
  }
}
@-webkit-keyframes rubixcube7 {
  80% {
    left: 16px;
  }
  90% {
    left: 0px;
  }
  100% {
    left: 0px;
  }
}
@keyframes rubixcube7 {
  80% {
    left: 16px;
  }
  90% {
    left: 0px;
  }
  100% {
    left: 0px;
  }
}
/*----------------------------------------*/
/*  23. HEADER CSS START
/*----------------------------------------*/
.header__transparent {
  position: absolute;
  left: 0;
  margin: auto;
  width: 100%;
  z-index: 99;
}

.sticky {
  position: fixed !important;
  top: 0;
  background: var(--clr-common-white);
  z-index: 800;
  right: 0;
  left: 0;
  width: 100%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-box-shadow: 0 0 60px 0 rgba(53, 57, 69, 0.15);
  -moz-box-shadow: 0 0 60px 0 rgba(53, 57, 69, 0.15);
  -ms-box-shadow: 0 0 60px 0 rgba(53, 57, 69, 0.15);
  -o-box-shadow: 0 0 60px 0 rgba(53, 57, 69, 0.15);
  box-shadow: 0 0 60px 0 rgba(53, 57, 69, 0.15);
  animation: headerSticky 0.95s ease forwards;
}
.sticky .header__line {
  border-bottom: 0;
  padding: 0;
}
.sticky .header__line::after {
  display: none;
}
.sticky .header__main-wrapper-2 {
  margin-top: 0;
}

#header-sticky.black__header {
  background: var(--clr-common-black);
}

.header__top-area {
  background-color: var(--clr-theme-1);
  padding: 7px 0;
}
.header__top-area .container {
  max-width: 1550px;
}

.topbar__info {
  display: flex;
  gap: 37px;
}
.topbar__info span:not(:last-child) {
  position: relative;
}
.topbar__info span:not(:last-child)::before {
  position: absolute;
  content: "";
  height: 2px;
  width: 4px;
  background-color: var(--clr-common-white);
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: -20px;
}
.topbar__info span a {
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-common-white);
}
.topbar__right {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 50px;
}
.topbar__social {
  position: relative;
}
.topbar__social ul {
  display: flex;
  gap: 15px;
}
.topbar__social ul li {
  list-style: none;
}
.topbar__social ul li a {
  font-size: 14px;
  color: var(--clr-common-white);
}
.topbar__social::before {
  position: absolute;
  content: "";
  height: 2px;
  width: 4px;
  background-color: var(--clr-common-white);
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -37px;
  opacity: 50%;
}

.header__area .container {
  max-width: 1550px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .header__inner {
    padding: 22px 0;
  }
}
.header__line {
  border-bottom: 1px solid var(--clr-common-heading);
  position: relative;
}
.header__line:after {
  position: absolute;
  content: "";
  height: 1px;
  width: 22%;
  background-color: var(--clr-theme-1);
  bottom: -1px;
}
.header__main-wrapper-2 {
  margin-top: 5px;
}

.header__lang-selected {
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  background: var(--clr-theme-1);
  display: inline-flex;
  padding: 0 37px 0 20px;
  color: var(--clr-common-white);
  align-items: center;
  line-height: 1;
  text-transform: capitalize;
  position: relative;
  cursor: pointer;
}
.header__lang-selected:after {
  position: absolute;
  font-weight: var(--bd-fw-medium);
  content: "\f063";
  font-family: var(--bd-ff-fontawesome);
  right: 20px;
  font-size: 14px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.header__lang-list {
  background-color: var(--clr-common-white);
  position: absolute;
  top: 30px;
  right: 0;
  padding: 9px 18px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  -moz-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  -ms-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  -o-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
}
.header__lang-list li {
  font-size: 14px;
  line-height: 1;
  padding: 5px 0;
  cursor: pointer;
  list-style: none;
}
.header__lang:hover .header__lang-list {
  visibility: visible;
  opacity: 1;
}

.main-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-right: 50px;
}
.main-menu ul li:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu ul li {
    margin-right: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu ul li {
    margin-right: 35px;
  }
}
.main-menu ul li a {
  display: inline-block;
  font-size: 16px;
  color: var(--clr-common-heading);
  padding: 47px 0;
  font-weight: var(--bd-fw-sbold);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  text-transform: capitalize;
  line-height: 1;
}
.main-menu ul li a:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 0%;
  left: auto;
  right: 0;
  background: var(--clr-theme-1);
  bottom: 43px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.main-menu ul li.has-dropdown > a {
  position: relative;
}
.main-menu ul li.has-dropdown > a::after {
  content: "+";
  -webkit-transform: translateY(1px);
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -o-transform: translateY(1px);
  transform: translateY(1px);
  font-size: 14px;
  color: var(--clr-text-5);
  font-family: var(--bd-ff-fontawesome);
  font-weight: 400;
  margin-left: 5px;
  color: var(--clr-common-heading);
  display: inline-block;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.main-menu ul li .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 220px;
  padding: 15px 0;
  padding-bottom: 15px;
  background: var(--clr-common-white);
  border-top: 3px solid var(--clr-theme-1);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -ms-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -o-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  z-index: 50;
}
.main-menu ul li .submenu li {
  display: block;
  width: 100%;
  margin: 0;
}
.main-menu ul li .submenu li.has-dropdown > a::after {
  position: absolute;
  top: 50%;
  right: 25px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.main-menu ul li .submenu li > a {
  width: 100%;
  display: block;
  padding: 10px 25px;
  text-transform: capitalize;
  color: var(--clr-common-heading);
  font-weight: var(--bd-fw-sbold);
  position: relative;
}
.main-menu ul li .submenu li > a::after {
  right: 30px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.main-menu ul li .submenu li > a::before {
  display: none;
}
.main-menu ul li .submenu li .submenu {
  left: 100%;
  top: 0;
}
.main-menu ul li.active > a {
  color: var(--clr-theme-1);
}
.main-menu ul li.active > a::after {
  color: var(--clr-theme-1);
  -webkit-transform: translateY(-1px) rotate(45deg);
  -moz-transform: translateY(-1px) rotate(45deg);
  -ms-transform: translateY(-1px) rotate(45deg);
  -o-transform: translateY(-1px) rotate(45deg);
  transform: translateY(-1px) rotate(45deg);
}
.main-menu ul li.active > a:before {
  width: 100%;
  left: 0;
  right: auto;
}
.main-menu-2 ul li .submenu {
  background-color: var(--clr-common-heading);
}
.main-menu-2 ul li .submenu li > a {
  color: var(--clr-common-white);
}
.main-menu-2 ul li a {
  color: var(--clr-common-white);
}
.main-menu-2 ul li.has-dropdown > a::after {
  color: var(--clr-common-white);
}
.main-menu-2 ul li:hover > a::after {
  color: var(--clr-theme-1);
}
.main-menu-3 ul.submenu li:hover:hover > a {
  color: var(--clr-theme-3);
}
.main-menu-3 ul li:hover.has-dropdown > a::after {
  color: var(--clr-theme-3);
}
.main-menu-3 ul li a {
  color: var(--clr-common-black);
}
.main-menu-3 ul li a:hover {
  color: var(--clr-theme-3);
}
.main-menu-3 ul li.has-dropdown > a::after {
  color: var(--clr-common-black);
}

.bar__icon {
  width: 20px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.bar__icon span {
  width: 100%;
  height: 2px;
  background: var(--clr-common-heading);
  display: inline-block;
}
.bar__icon span:nth-child(2) {
  margin-left: 9px;
  transition: 0.3s;
}
.bar__icon.s-2 span {
  background: var(--clr-common-white);
}
.bar__icon:hover span:nth-child(2) {
  margin-left: 0;
}

#mobile-menu .submenu {
  display: none;
}

/*----------------------------------------*/
/*  13.	BANNER CSS START
/*----------------------------------------*/
.banner__area-4 {
  padding: 0 80px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__area-4 {
    padding: 0 0px;
  }
}
.banner__area-5 {
  min-height: 820px;
  position: relative;
  overflow: hidden;
}
.banner__overlay {
  position: relative;
}
.banner__overlay::before {
  position: absolute;
  content: "";
  width: 100%;
  background-color: var(--clr-bg-gray-3);
  top: 0;
  left: 0;
  z-index: -1;
  height: 975px;
  clip-path: polygon(50% 0%, 100% 0px, 100% 35%, 99.89% 94.18%, 75.74% 98.46%, 50.1% 100%, 19.47% 97.84%, 0px 94.26%, 0px 0px, 24% 0px);
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), md, only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__overlay::before {
    clip-path: none;
  }
}
.banner__btn {
  display: inline-flex;
  width: 120px;
  height: 120px;
  background-color: var(--clr-common-white);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  text-transform: uppercase;
}
.banner__btn:hover {
  color: var(--clr-theme-1);
}
.banner__batch-shape {
  display: inline-block;
  width: 210px;
  height: 210px;
  background: var(--clr-theme-2);
  border-radius: 50%;
  position: relative;
}
.banner__batch-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.banner__batch img {
  -webkit-animation: rotate-infinite 15s linear infinite;
  animation: rotate-infinite 15s linear infinite;
}
.banner__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.banner__bg img {
  width: 100%;
}
.banner__title h2 {
  font-size: 80px;
  font-weight: var(--bd-fw-sbold);
  line-height: 1.12;
  letter-spacing: -2px;
  margin-bottom: 50px;
  color: var(--clr-common-heading);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__title h2 {
    font-size: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__title h2 {
    font-size: 66px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .banner__title h2 {
    font-size: 55px;
  }
}
@media (max-width:450px) {
  .banner__title h2 {
    font-size: 45px;
  }
}
.banner__title-2 {
  color: var(--clr-common-white);
  font-size: 80px;
  font-weight: var(--bd-fw-sbold);
  letter-spacing: -2px;
  line-height: 1.1;
  position: relative;
  z-index: 5;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner__title-2 {
    font-size: 65px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .banner__title-2 {
    font-size: 50px;
  }
}
@media (max-width:450px) {
  .banner__title-2 {
    font-size: 40px;
  }
}
.banner__title-3 {
  padding-top: 55px;
  padding-bottom: 80px;
}
.banner__title-3 span {
  font-size: 14px;
  font-weight: var(--bd-fw-bold);
  color: #946ed6;
  margin-bottom: 5px;
  display: block;
}
.banner__title-3 h2 {
  font-size: 80px;
  line-height: 1.1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__title-3 h2 {
    font-size: 65px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .banner__title-3 h2 {
    font-size: 50px;
  }
}
@media (max-width: 575px) {
  .banner__title-3 h2 {
    font-size: 45px;
  }
}
.banner__title-4 span {
  font-size: 14px;
  color: var(--clr-theme-3);
  font-weight: var(--bd-fw-bold);
  margin-bottom: 5px;
  display: block;
}
.banner__title-4 h2 {
  font-size: 80px;
  color: var(--clr-common-white);
  margin-bottom: 50px;
  line-height: 1.15;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .banner__title-4 h2 {
    font-size: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__title-4 h2 {
    font-size: 65px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .banner__title-4 h2 {
    font-size: 55px;
  }
}
@media (max-width: 575px) {
  .banner__title-4 h2 {
    font-size: 50px;
  }
}
@media (max-width:450px) {
  .banner__title-4 h2 {
    font-size: 45px;
  }
}
.banner__title-5 span {
  font-size: 18px;
  color: var(--clr-theme-3);
  font-weight: var(--bd-fw-sbold);
  display: block;
  margin-bottom: 25px;
}
.banner__title-5 h2 {
  font-size: 80px;
  line-height: 1.12;
  margin-bottom: 55px;
  letter-spacing: -3px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner__title-5 h2 {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__title-5 h2 {
    font-size: 65px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .banner__title-5 h2 {
    font-size: 50px;
  }
}
@media (max-width:450px) {
  .banner__title-5 h2 {
    font-size: 45px;
  }
}
.banner__height-2 {
  min-height: 930px;
}
.banner__thumb-2 {
  padding-left: 25px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__thumb-2 {
    padding-left: 0;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .banner__thumb-2 {
    margin-right: -80px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .banner__thumb-2 img {
    width: 100%;
  }
}
.banner__thumb-4 img {
  margin-left: 50px;
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .banner__thumb-4 img {
    margin-left: 0;
    width: 100%;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__thumb-4 img {
    display: none;
  }
}
.banner__illustration img {
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__sponser-wrapper {
    margin-bottom: 30px;
  }
}
.banner__btn-inner {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}
.banner__btn-inner.s-2 {
  gap: 30px;
}
.banner__content-wrapper {
  margin-bottom: 170px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner__content-wrapper {
    margin-bottom: 100px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__content-wrapper {
    margin-bottom: 50px;
  }
}
.banner__content-4 {
  margin-top: -110px;
}
.banner__content-5 {
  padding: 125px 0 60px;
}
.banner__user {
  position: absolute;
  bottom: 0;
  max-width: 595px;
  padding-right: 15px;
}
.banner__user-wrapper {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  background-color: #141d0f;
  padding: 25px 50px 25px 30px;
  -webkit-border-radius: 6px 6px 0px 0px;
  -moz-border-radius: 6px 6px 0px 0px;
  -o-border-radius: 6px 6px 0px 0px;
  -ms-border-radius: 6px 6px 0px 0px;
  border-radius: 6px 6px 0px 0px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__user-wrapper {
    -webkit-border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -o-border-radius: 0px 0px 0px 0px;
    -ms-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
  }
}
@media (max-width:450px), (max-width: 575px) {
  .banner__user-wrapper {
    padding: 25px 30px 25px 30px;
  }
}
.banner__user-content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.banner__user-content h2 {
  font-size: 50px;
  line-height: 1;
  color: var(--clr-common-white);
  font-weight: var(--bd-fw-sbold);
}
@media (max-width:450px), (max-width: 575px) {
  .banner__user-content h2 {
    font-size: 40px;
  }
}
.banner__user-content p {
  color: var(--clr-common-white);
  margin-bottom: 0;
  opacity: 50%;
  max-width: 210px;
  font-size: 14px;
}
.banner__user-thumb {
  margin-left: 20px;
}
.banner__user-thumb img {
  z-index: 555;
  margin-left: -20px;
}
.banner__inner-4 {
  position: relative;
  overflow: hidden;
  z-index: 20;
  min-height: 880px;
  -webkit-border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -o-border-radius: 10px 10px 0px 0px;
  -ms-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__inner-4 {
    min-height: 650px;
  }
}
@media (max-width: 575px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__inner-4 {
    min-height: 800px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__inner-4 {
    -webkit-border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -o-border-radius: 0px 0px 0px 0px;
    -ms-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
  }
}
.banner__inner-4::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: rgb(10, 20, 5);
  z-index: -1;
  top: 0;
  left: 0;
}
.banner__shape {
  position: absolute;
  top: -10%;
  left: -6%;
  z-index: -1;
}
.banner__shape-5-1 {
  position: absolute;
  top: 110px;
  left: -15px;
}
.banner__shape-5-2 {
  position: absolute;
  bottom: 220px;
  left: 0;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .banner__shape-5-2 {
    display: none;
  }
}
.banner__shape-5-3 {
  position: absolute;
  bottom: -105px;
  right: 0;
  left: 20px;
  z-index: -1;
}
.banner__shape-5-4 {
  position: absolute;
  bottom: 32%;
  right: -100px;
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__shape-5-4 {
    right: 0;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .banner__shape-5-4 {
    bottom: 0;
    right: 0;
  }
}
.banner__shape-5-5 img {
  width: 100%;
}
.banner__video-btn {
  width: 60px;
  height: 60px;
  background-color: var(--clr-common-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  color: var(--clr-theme-3);
  filter: drop-shadow(0px 8px 30px rgba(0, 0, 0, 0.06));
}
.banner__video-btn:hover {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-3);
}
.banner__btn-link ul {
  display: flex;
  gap: 20px;
  align-items: center;
}
.banner__btn-link li {
  list-style: none;
}
.banner__btn-intro {
  font-size: 16px;
  font-weight: var(--bd-fw-bold);
  color: var(--clr-theme-3);
  background-image: linear-gradient(#936dd5, #936dd5), linear-gradient(#936dd5, #936dd5);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
  color: var(--clr-theme-1);
}
.banner__btn-intro:hover {
  background-size: 0 1px, 100% 1px;
  color: var(--clr-theme-1);
}
.banner__wrapper-5 {
  position: absolute;
  bottom: 0;
  padding-left: 110px;
  z-index: 5;
  padding-right: 110px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), md, only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__wrapper-5 {
    padding-left: 0;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__wrapper-5 {
    position: sticky;
  }
}
@media (max-width: 575px) {
  .banner__sponser-item {
    text-align: center;
  }
}
.banner__sponser-item a i {
  font-size: 85px;
  color: var(--clr-text-5);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.banner__sponser-item:hover a i {
  color: var(--clr-common-white);
}
.banner__sponser-title span {
  font-size: 16px;
  font-weight: var(--bd-fw-bold);
  color: var(--clr-theme-1);
  position: relative;
  top: 5px;
}

/*----------------------------------------*/
/*  18. FACT CSS START
/*----------------------------------------*/
.fact__pattern {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.fact__pattern img {
  max-width: 100%;
}
.fact__thumb {
  min-height: 560px;
  border-radius: 0px 0px 0px 15px;
  margin-right: -315px;
  overflow: hidden;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .fact__thumb {
    border-radius: 0px;
    margin-right: 0px;
  }
}
.fact__content {
  min-width: 150px;
}
@media (max-width: 575px) {
  .fact__content {
    min-width: 130px;
  }
}
.fact__content span {
  font-size: 60px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-common-white);
  line-height: 1;
}
@media (max-width:450px) {
  .fact__content span {
    font-size: 50px;
  }
}
.fact__content .plus {
  position: relative;
  top: -13px;
  color: var(--clr-theme-2);
  font-weight: var(--bd-fw-medium);
  font-size: 50px;
}
.fact__content-2 span {
  font-size: 120px;
  color: var(--clr-common-white);
  font-weight: var(--bd-fw-sbold);
  line-height: 0.8;
}
@media (max-width:450px) {
  .fact__content-2 span {
    font-size: 100px;
  }
}
.fact__item {
  display: flex;
  gap: 20px;
  align-items: center;
}
.fact__item-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.fact__title p {
  color: var(--clr-common-white);
  opacity: 50%;
  font-size: 14px;
  margin-bottom: 0;
}
.fact__title-2 {
  background: -webkit-linear-gradient(0deg, #936dd5 0%, #000000 100%);
  background-clip: border-box;
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fact__title-2 p {
  font-size: 24px;
  color: var(--clr-common-white);
  font-weight: var(--bd-fw-sbold);
  margin-bottom: 0;
  line-height: 1.4;
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .fact__title-2 p {
    font-size: 20px;
  }
}
.fact__reating {
  position: relative;
  margin-top: -147px;
  min-width: 200px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .fact__reating {
    margin-top: 0;
  }
}
.fact__reating-inner {
  background: var(--clr-common-white);
  text-align: center;
  padding: 35px 30px 35px;
  border-radius: 10px;
}
.fact__reating-content h4 {
  font-size: 20px;
  font-weight: var(--bd-fw-sbold);
  margin-bottom: 20px;
}
.fact__reating-content h5 {
  font-size: 12px;
  font-weight: var(--bd-fw-sbold);
  margin-top: 8px;
}
.fact__reating-content h5 span {
  color: var(--clr-theme-1);
}
.fact__user-icon {
  margin-left: -20px;
}
.fact__user-icon img {
  margin-right: -20px;
}
.fact__inner {
  display: flex;
  justify-content: space-between;
  gap: 70px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .fact__inner {
    flex-wrap: wrap;
    gap: 0px;
  }
}
.fact__map {
  position: absolute;
  right: 7%;
  z-index: -1;
  top: 65px;
}
.fact__info-features {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  gap: 48px;
  flex-wrap: wrap;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .fact__info-features {
    flex-direction: row;
  }
}
.fact__info-content span {
  font-size: 60px;
  color: #eaff95;
  font-weight: var(--bd-fw-sbold);
  display: inline-block;
  margin-bottom: 13px;
  line-height: 1;
  margin-bottom: 8px;
}
.fact__info-content p {
  margin-bottom: 0;
  color: var(--clr-common-white);
  line-height: 30px;
  opacity: 70%;
}
.fact__info-content.s-2 span {
  color: #e8bde7;
}

/*----------------------------------------*/
/* 11. ABOUT CSS START
/*----------------------------------------*/
.about__spacing {
  padding-top: 140px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .about__spacing {
    padding-bottom: 115px;
  }
}
.about__bg {
  position: relative;
  z-index: 5;
}
.about__bg:before {
  position: absolute;
  content: "";
  width: 100%;
  background-color: var(--clr-bg-gray-1);
  min-height: 650px;
  top: 0;
  left: 0;
  z-index: -1;
}
.about__left {
  margin-right: 60px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__left {
    margin-right: 0px;
  }
}
.about__thumb-1 {
  margin-right: -20px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb-2 img {
    width: 100%;
  }
}
.about__thumb-5 img {
  border-radius: 6px;
  max-width: 100%;
}
.about__thumb-wrapper {
  position: relative;
  margin-right: 70px;
  margin-top: -20px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .about__thumb-wrapper {
    margin-bottom: 60px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb-wrapper {
    margin-right: 0;
  }
}
.about__thumb-wrapper-5 {
  position: relative;
  padding-right: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb-wrapper-5 {
    padding-right: 30px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .about__thumb-wrapper-5 {
    padding-right: 0px;
  }
}
.about__features-wrapper {
  display: flex;
  flex-direction: column;
  gap: 35px;
  margin-bottom: 135px;
  padding-left: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__features-wrapper {
    padding-left: 0;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__features-wrapper {
    padding-left: 0px;
    margin-bottom: 30px;
  }
}
.about__features-item {
  display: flex;
  gap: 30px;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 35px;
}
.about__features-item:last-child {
  padding-bottom: 0;
  border: 0;
}
.about__features-content h3 a {
  font-size: 24px;
  margin-bottom: 15px;
  display: block;
}
.about__features-content h3 a:hover {
  color: var(--clr-theme-1);
}
@media (max-width:450px) {
  .about__features-content h3 a {
    font-size: 20px;
  }
}
.about__features-content p {
  margin-bottom: 0;
  font-size: 14px;
}
.about__features-icon {
  margin-top: 5px;
  position: relative;
}
.about__experience {
  display: flex;
  align-items: center;
  max-width: 400px;
  justify-content: space-between;
}
.about__experience-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.about__experience-inner span {
  font-size: 120px;
  line-height: 1;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-theme-1);
  min-width: 150px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .about__experience-inner span {
    font-size: 100px;
  }
}
.about__experience-inner h3 {
  font-size: 24px;
}
.about__experience-arrrow i {
  transform: rotate(45deg);
  color: var(--clr-theme-1);
  font-size: 18px;
}
.about__card img {
  position: absolute;
  top: 50%;
  left: -110px;
  transform: translateY(-50%);
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .about__card img {
    left: 0;
  }
}
@media (max-width: 575px) {
  .about__card img {
    display: none;
  }
}
.about__shape {
  position: absolute;
  top: 100px;
  right: 0;
  z-index: 5;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__shape {
    display: none;
  }
}
.about__shape span {
  width: 100px;
  height: 100px;
  background-color: var(--clr-common-yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  border-radius: 50%;
  position: relative;
}
.about__shape span:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--clr-common-white);
  z-index: -1;
  border-radius: 50%;
  left: -10px;
  top: -10px;
}
.about__shape-1 {
  position: absolute;
  right: 60px;
  bottom: 70px;
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .about__shape-1 {
    right: 0;
    bottom: 0;
  }
}
.about__discount-item {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
}
.about__discount-text h2 {
  font-size: 60px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-theme-1);
  line-height: 1;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .about__discount-text h2 {
    font-size: 50px;
  }
}
.about__discount-text span {
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
}
.about__award {
  background-color: var(--clr-common-white);
  display: inline-block;
  padding: 40px 25px 35px;
  text-align: center;
  position: absolute;
  top: 47px;
  left: -70px;
  border-radius: 10px;
  z-index: 5;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .about__award {
    display: none;
  }
}
.about__cercle {
  width: 98px;
  height: 98px;
  background-color: #F5EFFF;
  border-radius: 50%;
  z-index: -1;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}
.about__content h2 {
  font-size: 60px;
  line-height: 1;
  padding: 12px 0 5px;
}
.about__content span {
  font-size: 16px;
  color: var(--clr-text-2);
}
.about__content-wrapper-5 {
  padding-left: 15px;
  padding-right: 45px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__content-wrapper-5 {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.about__content-wrapper-5 > p {
  font-size: 18px;
  margin-bottom: 40px;
}
.about__service-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 575px) {
  .about__service-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
.about__service-icon {
  width: 50px;
  height: 50px;
  background-color: var(--clr-theme-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.about__service-content h5 {
  font-size: 16px;
  display: inline-block;
  line-height: 1.5;
}
@media (max-width: 575px) {
  .about__service-content h5 br {
    display: none;
  }
}
.about__service-item {
  background-color: var(--clr-common-white);
  align-items: center;
  border-radius: 6px;
  display: flex;
  padding: 20px 20px;
  justify-content: space-between;
}
.about__service-item:nth-child(n+3) {
  margin-right: -20px;
  margin-left: 20px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .about__service-item:nth-child(n+3) {
    margin-left: 0;
    margin-right: 0;
  }
}

/*----------------------------------------*/
/*  27.	PORTFOLIO CSS START
/*----------------------------------------*/
.portfolio__item {
  border-top: 1px solid var(--clr-border-2);
  border-bottom: 1px solid var(--clr-border-2);
  padding-top: 36px;
  padding-bottom: 36px;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.portfolio__item:hover {
  border-bottom: 1px solid var(--clr-theme-1);
}
.portfolio__item:hover .portfolio__number {
  color: var(--clr-theme-1);
}
.portfolio__item:hover .portfolio__thumb {
  opacity: 1;
  visibility: visible;
}
.portfolio__item-2 {
  position: relative;
}
.portfolio__item-2:hover .portfolio__arrow i {
  color: var(--clr-theme-3);
}
.portfolio__item-5 {
  position: relative;
}
.portfolio__item-5:hover .portfolio__thumb-5:after {
  opacity: 0.8;
  visibility: visible;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.portfolio__item-5:hover .portfolio__content-5 {
  opacity: 1;
  visibility: visible;
}
.portfolio__item-5 .portfolio__tag {
  justify-content: center;
  margin-bottom: 10px;
}
.portfolio__item-5 .portfolio__tag:hover {
  color: var(--clr-theme-3);
}
.portfolio__inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: last baseline;
  gap: 30px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .portfolio__inner {
    display: block;
    margin-bottom: 30px;
  }
}
.portfolio__number span {
  font-size: 18px;
  font-weight: var(--bd-fw-sbold);
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .portfolio__number span {
    margin-bottom: 25px;
    display: block;
  }
}
.portfolio__tag {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}
.portfolio__tag span a {
  background-color: var(--clr-bg-gray-2);
  border-radius: 4px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  height: 20px;
  padding: 0 10px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portfolio__tag span a:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}
.portfolio__content {
  padding-right: 10px;
}
.portfolio__content h3 a {
  font-size: 40px;
}
.portfolio__content h3 a:hover {
  color: var(--clr-theme-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__content h3 a {
    font-size: 36px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .portfolio__content h3 a {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__content h3 a {
    font-size: 28px;
  }
}
@media (max-width: 575px) {
  .portfolio__content h3 a {
    font-size: 26px;
  }
}
.portfolio__content-2 span {
  font-size: 14px;
  color: var(--clr-theme-1);
  display: block;
  margin-bottom: 5px;
}
.portfolio__content-2 h3 a {
  color: var(--clr-common-white);
}
@media (max-width:450px) {
  .portfolio__content-2 h3 a {
    font-size: 20px;
  }
}
.portfolio__content-2 h3 a:hover {
  color: var(--clr-theme-3);
}
.portfolio__content-5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.portfolio__thumb {
  position: absolute;
  top: 40px;
  right: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 5;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
  z-index: 10;
  border-radius: 6px;
  overflow: hidden;
  -webkit-box-shadow: 0px 120px 240px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 120px 240px 0px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0px 120px 240px 0px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0px 120px 240px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 120px 240px 0px rgba(0, 0, 0, 0.3);
  opacity: 0;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .portfolio__thumb {
    position: static;
    opacity: 1;
    visibility: visible;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__thumb img {
    max-width: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__thumb img {
    max-width: 250px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .portfolio__thumb img {
    width: 100%;
  }
}
.portfolio__thumb-5 {
  position: relative;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.portfolio__thumb-5 img {
  width: 100%;
}
.portfolio__thumb-5:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--clr-common-heading);
  top: 0;
  left: 0;
  opacity: 0.8;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.portfolio__action-2 {
  display: flex;
  justify-content: space-between;
  background-color: var(--clr-common-black);
  padding: 35px 40px 35px;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}
@media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__action-2 {
    padding: 35px 20px 35px;
  }
}
.portfolio__arrow i {
  font-size: 18px;
  color: var(--clr-common-white);
  transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.portfolio__title {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.portfolio__title-5 {
  color: var(--clr-common-white);
  font-size: 40px;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
  color: var(--clr-common-white);
}
.portfolio__title-5:hover {
  background-size: 0 1px, 100% 1px;
}
@media (max-width: 575px) {
  .portfolio__title-5 {
    font-size: 30px;
  }
}
@media (max-width:450px) {
  .portfolio__title-5 {
    font-size: 26px;
  }
}

.portfolio__filter-button {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  gap: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__filter-button {
    gap: 45px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .portfolio__filter-button {
    flex-wrap: wrap;
    gap: 15px 20px;
  }
}
.portfolio__filter-button button {
  text-transform: capitalize;
  font-weight: var(--bd-fw-sbold);
  position: relative;
  border: none;
  background: none;
  font-size: 14px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  height: 50px;
  padding: 0 30px;
  background-color: transparent;
  color: var(--clr-common-black);
  border: 1px solid var(--clr-border-1);
  border-radius: 6px;
}
.portfolio__filter-button .active {
  background-color: var(--clr-theme-1);
  border-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}
.portfolio__filter-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.portfolio__filter-item:hover .portfolio__filter-content {
  opacity: 1;
  visibility: visible;
}
.portfolio__filter-item:hover .portfolio__filter-thumb::before {
  opacity: 0.92;
  visibility: visible;
}
.portfolio__filter-item-2 {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}
.portfolio__filter-item-2:before {
  position: absolute;
  height: 0%;
  width: 100%;
  content: "";
  background: linear-gradient(rgba(22, 22, 22, 0.06) 0%, #7747cb 100%);
  opacity: 0.85;
  left: 0px;
  bottom: 0px;
  z-index: 1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.portfolio__filter-item-2:hover .portfolio__filter-content-2 {
  bottom: 23px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width:450px) {
  .portfolio__filter-item-2:hover .portfolio__filter-content-2 {
    bottom: 13px;
  }
}
.portfolio__filter-item-2:hover:before {
  height: 100%;
}
.portfolio__filter-item-2 img {
  width: 100%;
}
.portfolio__filter-item-2:hover img {
  transform: scale3d(1.1, 1.1, 1.1);
}
.portfolio__filter-thumb {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.portfolio__filter-thumb img {
  border-radius: 6px;
}
.portfolio__filter-thumb:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--clr-theme-1);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.portfolio__filter-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  text-align: center;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  width: 100%;
  padding: 50px;
}
.portfolio__filter-content span {
  font-size: 16px;
  color: var(--clr-common-white);
  margin-bottom: 5px;
  display: block;
}
.portfolio__filter-content h3 a {
  font-size: 26px;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
  color: #fff;
}
.portfolio__filter-content h3 a:hover {
  background-size: 0 1px, 100% 1px;
}
@media (max-width:450px), only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__filter-content h3 a {
    font-size: 20px;
  }
}
.portfolio__filter-content-2 {
  position: absolute;
  left: 40px;
  bottom: -100px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  z-index: 2;
  right: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width:450px) {
  .portfolio__filter-content-2 {
    left: 25px;
  }
}
.portfolio__filter-content-2 span {
  font-size: 14px;
  color: var(--clr-common-white);
  display: block;
  font-weight: 500;
}
.portfolio__filter-content-2 h5 a {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
  color: var(--clr-common-white);
}
.portfolio__filter-content-2 h5 a:hover {
  background-size: 0 1px, 100% 1px;
}
.portfolio__filter-content-2 p {
  color: var(--clr-common-white);
}

.case__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.case__meta .case__list {
  display: flex;
  gap: 75px;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .case__meta .case__list {
    gap: 10px;
    justify-content: space-between;
    flex-grow: 1;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .case__meta .case__list {
    gap: 20px;
  }
}
.case__meta .meta__item {
  display: block;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .case__meta .meta__item {
    width: calc((100% - 20px) / 2);
  }
}
.case__meta .meta__item span {
  font-size: 20px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}
.case__meta .meta__item p {
  font-size: 14px;
  margin-bottom: 0;
}
.case__meta-wrapper {
  background: var(--clr-common-white);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  margin: -60px 40px 50px 40px;
  padding: 30px 40px 30px;
  z-index: 5;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .case__meta-wrapper {
    padding: 30px 30px 30px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .case__meta-wrapper {
    margin: -60px 0px 50px 0px;
    padding: 30px 20px 30px;
    border-radius: 0px 0px 6px 6px;
  }
}

.case__sub-image {
  margin-top: 50px;
  margin-bottom: 30px;
}
.case__sub-image img {
  border-radius: 10px;
  width: 100%;
}
.case__details-thumb img {
  border-radius: 6px;
  width: 100%;
}
.case__details-wrapper p {
  line-height: 28px;
}
.case__details-wrapper p span {
  font-weight: 700;
  color: var(--clr-theme-1);
  font-weight: 700;
  color: var(--clr-theme-1);
}
.case__details-wrapper p a {
  color: var(--clr-theme-1);
}

.case__quote {
  background: var(--clr-bg-gray-1);
  padding: 40px 50px 40px;
  display: flex;
  gap: 30px;
  align-items: center;
  border-radius: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .case__quote {
    padding: 40px 30px 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .case__quote {
    padding: 40px 20px 40px;
    flex-direction: column;
    align-items: flex-start;
  }
}
.case__quote .quote__icon {
  height: 120px;
  background: var(--clr-common-white);
  border-radius: 50%;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: var(--clr-theme-1);
}
.case__quote .quote__icon img {
  height: 50px;
  width: 50px;
}
.case__quote .quote__content p {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .case__quote .quote__content p {
    font-size: 22px;
  }
}
.case__quote .quote__content .author-name {
  font-size: 18px;
  font-weight: 700;
  text-transform: capitalize;
  font-family: "Poppins", sans-serif;
}
.case__quote .quote__content .author-name span {
  color: var(--clr-theme-1);
  font-size: 16px;
}
.case__faq-wrapper {
  margin-bottom: 20px;
  margin-top: 50px;
}
.case__faq-wrapper h4 {
  font-size: 30px;
  text-transform: capitalize;
  margin-bottom: 17px;
}

.project__details-nav {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ddd;
  padding-top: 30px;
}

.details__nav-item {
  display: flex;
  align-items: center;
}
.details__nav-item a {
  font-size: 16px;
  text-transform: capitalize;
  font-weight: var(--bd-fw-sbold);
  display: inline-block;
}
.details__nav-item a i {
  font-size: 20px;
  margin: 0 8px;
  position: relative;
  top: 2px;
}
.details__nav-item a:hover {
  color: var(--clr-theme-1);
}

/*----------------------------------------*/
/*  16.	CTA CSS START
/*----------------------------------------*/
.cta__wrapper {
  position: relative;
  z-index: 5;
}
.cta__wrapper:before {
  position: absolute;
  content: "";
  width: 696px;
  height: 696px;
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background-color: rgba(245, 245, 249, 0);
  opacity: 0.102;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  z-index: -1;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cta__wrapper:before {
    width: 500px;
    height: 500px;
  }
}
.cta__wrapper::after {
  position: absolute;
  content: "";
  width: 466px;
  height: 466px;
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background-color: rgba(245, 245, 249, 0);
  opacity: 0.059;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
  left: 50%;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cta__wrapper::after {
    width: 380px;
    height: 380px;
  }
}
.cta__user {
  text-align: center;
}
.cta__user img {
  margin-left: -20px;
}
.cta__meta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
  margin-left: 20px;
  flex-wrap: wrap;
}
.cta__meta-title span {
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  line-height: 1.3;
  display: block;
}
.cta__btn {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.cta__cercle {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: rgb(10, 20, 5);
  opacity: 0.039;
  border-radius: 50%;
  width: 262px;
  height: 262px;
  border-style: solid;
  border-width: 1px;
  z-index: -1;
}

/*----------------------------------------*/
/*  33. TEAM CSS START
/*----------------------------------------*/
.team__item:hover .team__thumb img {
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
}
.team__item-2:hover .team__thumb-2::before {
  opacity: 0.902;
  visibility: visible;
  bottom: 0;
}
.team__item-2:hover .team__social-link-2 {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}
.team__thumb {
  position: relative;
  overflow: hidden;
}
.team__thumb img {
  width: 100%;
}
.team__thumb-2 {
  position: relative;
  margin-bottom: 35px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  overflow: hidden;
}
.team__thumb-2 img {
  width: 100%;
}
.team__thumb-2:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--clr-theme-1);
  bottom: -100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.team__content {
  padding-top: 30px;
  padding-left: 40px;
  max-width: 395px;
}
@media (max-width: 575px) {
  .team__content {
    padding-left: 30px;
  }
}
.team__content span {
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-theme-1);
  border-bottom: 2px solid var(--clr-border-3);
  line-height: 1;
  display: inline-block;
  margin-bottom: 10px;
}
.team__content h3 a {
  font-size: 30px;
  font-weight: var(--bd-fw-bold);
  margin-bottom: 15px;
  display: block;
}
.team__content h3 a:hover {
  color: var(--clr-theme-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) {
  .team__content h3 a {
    font-size: 26px;
  }
}
.team__content p {
  margin-bottom: 0;
}
.team__content-2 span {
  font-size: 14px;
  color: var(--clr-theme-3);
  margin-bottom: 3px;
  display: block;
}
.team__content-2 h3 a {
  font-size: 24px;
}
.team__content-2 h3 a:hover {
  color: var(--clr-theme-3);
}
.team__social-wrapper {
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 5;
}
.team__social-wrapper:hover .team__social-link {
  opacity: 1;
  visibility: visible;
  bottom: 60px;
}
.team__social-wrapper:hover .team__social-btn button {
  -webkit-border-radius: 0px 0px 6px 6px;
  -moz-border-radius: 0px 0px 6px 6px;
  -o-border-radius: 0px 0px 6px 6px;
  -ms-border-radius: 0px 0px 6px 6px;
  border-radius: 0px 0px 6px 6px;
}
.team__social-wrapper:hover .team__social-btn button i {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  font-size: 18px;
}
.team__social-btn button {
  width: 60px;
  height: 60px;
  background-color: var(--clr-common-white);
  -webkit-border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  -o-border-radius: 6px 6px 6px 6px;
  -ms-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
}
.team__social-btn button i {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  font-size: 18px;
}
.team__social-link {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  z-index: -1;
  flex-direction: column;
  text-align: center;
  background: var(--clr-common-white);
  gap: 15px 0;
  padding-top: 20px;
  -webkit-border-radius: 6px 6px 0px 0px;
  -moz-border-radius: 6px 6px 0px 0px;
  -o-border-radius: 6px 6px 0px 0px;
  -ms-border-radius: 6px 6px 0px 0px;
  border-radius: 6px 6px 0px 0px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: 0px;
  width: 100%;
}
.team__social-link a {
  font-size: 18px;
}
.team__social-link a:hover {
  color: var(--clr-theme-1);
}
.team__social-link-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  display: flex;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.team__social-link-2 a {
  font-size: 16px;
  color: var(--clr-common-white);
}
.team__social-link-2 a:hover {
  color: var(--clr-common-black);
}

.founder__sub-title {
  font-size: 14px;
  font-weight: var(--bd-fw-bold);
  color: var(--clr-theme-1);
}
.founder__section-title {
  font-size: 50px;
}

.team__founder-main {
  margin-left: 50px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__founder-main {
    margin-left: 0;
  }
}
.team__founder-thumb {
  padding-right: 20px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .team__founder-thumb {
    padding-right: 0;
  }
}
.team__founder-thumb img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.team__founder-info {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 40px;
}
.team__founder-item {
  display: flex;
  gap: 25px;
  align-items: center;
}
.team__founder-item-icon {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  position: relative;
  background-color: var(--clr-bg-gray-2);
  color: var(--clr-theme-1);
}
.team__founder-text .contact a {
  font-weight: var(--bd-fw-bold);
  font-size: 20px;
}
.team__founder-text .contact a:hover {
  color: var(--clr-theme-1);
}
.team__founder-text .title {
  font-size: 14px;
  color: var(--clr-text-4);
}
.team__skill-thumb {
  padding-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__skill-thumb {
    padding-left: 30px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .team__skill-thumb {
    padding-left: 0;
  }
}
.team__skill-thumb img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}

.archivement__thumb > img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.archivement__box {
  padding-left: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .archivement__box {
    padding-left: 30px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .archivement__box {
    padding-left: 0px;
  }
}
.archivement__title h3 {
  font-size: 26px;
  margin-bottom: 25px;
}
.archivement__title p {
  margin-bottom: 33px;
  font-size: 18px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .archivement__title p {
    font-size: 16px;
  }
}

/*----------------------------------------*/
/* 34. TESTIMONIAL CSS START
/*----------------------------------------*/
.testimonial__main-wrapper {
  background: var(--clr-common-white);
  padding: 100px 100px 90px;
  border-radius: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__main-wrapper {
    padding: 100px 50px 90px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__main-wrapper {
    padding: 50px 30px 40px;
  }
}
.testimonial__inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  gap: 60px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial__inner {
    flex-wrap: wrap;
    gap: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 575px) and (min-width: 768px) and (max-width: 991px) {
  .testimonial__inner {
    gap: 45px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__icon img {
    max-width: 120px;
  }
}
.testimonial__content p {
  font-size: 36px;
  font-weight: var(--bd-fw-sbold);
  line-height: 1.3;
  color: var(--clr-common-heading);
  margin-bottom: 55px;
  letter-spacing: -1px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__content p {
    font-size: 34px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__content p {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .testimonial__content p {
    font-size: 28px;
  }
}
@media (max-width: 575px) {
  .testimonial__content p {
    font-size: 24px;
  }
}
.testimonial__avater {
  padding-top: 40px;
  border-top: 1px solid var(--clr-border-4);
}
.testimonial__avater-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
  border-top: 1px solid var(--clr-border-4);
  align-items: center;
  flex-wrap: wrap;
}
.testimonial__avater-wrapper-3 {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 575px) {
  .testimonial__avater-wrapper-3 {
    flex-wrap: wrap;
  }
}
.testimonial__avater-item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 20px;
}
.testimonial__avater-info span {
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-theme-1);
  border-bottom: 2px solid var(--clr-border-3);
  margin-bottom: 5px;
  display: inline-block;
  line-height: 1;
}
.testimonial__avater-info h3 {
  font-size: 24px;
}
@media (max-width: 575px) {
  .testimonial__avater-info h3 {
    font-size: 18px;
  }
}
.testimonial__avater-info.s-2 span {
  border-bottom: none;
}
@media (max-width: 575px) {
  .testimonial__avater-signature {
    margin-left: 66px;
    margin-top: 15px;
  }
}
.testimonial__wrapper-2 {
  background-color: var(--clr-common-white);
  padding: 45px 50px 45px;
}
@media (max-width: 575px) {
  .testimonial__wrapper-2 {
    padding: 45px 20px 45px;
  }
}
@media (max-width: 575px) {
  .testimonial__wrapper-2 {
    padding: 45px 20px 45px;
  }
}
.testimonial__wrapper-2.style-2 {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__wrapper-2.style-2 {
    padding: 45px 30px 45px;
  }
}
.testimonial__wrapper-3 {
  background-color: var(--clr-common-white);
  border-radius: 6px;
  padding: 60px 60px 45px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__wrapper-3 {
    padding: 60px 45px 45px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__wrapper-3 {
    padding: 50px 30px 35px;
  }
}
@media (max-width: 575px) {
  .testimonial__wrapper-3 {
    padding: 60px 20px 45px;
  }
}
.testimonial__reating span {
  font-size: 14px;
  color: var(--clr-theme-1);
  margin-bottom: 15px;
  display: inline-block;
}
.testimonial__title-2 {
  font-size: 20px;
  color: var(--clr-common-black);
  line-height: 36px;
  margin-bottom: 20px;
}
.testimonial__title-3 {
  font-size: 36px;
  line-height: 1.4;
  color: var(--clr-common-black);
  font-weight: var(--bd-fw-sbold);
  margin-bottom: 25px;
  letter-spacing: -1px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .testimonial__title-3 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .testimonial__title-3 {
    font-size: 28px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .testimonial__title-3 {
    font-size: 24px;
  }
}
.testimonial__area-gap {
  margin: 0 80px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__area-gap {
    margin: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -o-border-radius: 0px;
    -ms-border-radius: 0px;
    border-radius: 0px;
    padding-top: 120px;
    padding-bottom: 100px;
  }
}
.testimonial__user-wrapper {
  margin-right: 70px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__user-wrapper {
    margin-right: 0;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__user-wrapper {
    margin-bottom: 40px;
  }
}
.testimonial__user-slide {
  margin-left: 40px;
  margin-top: -75px;
  margin-bottom: -75px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__user-slide {
    margin-left: 0;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__user-slide {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/*----------------------------------------*/
/*  14.	BRAND CSS START
/*----------------------------------------*/
.brand__title {
  min-width: 110px;
}
.brand__title span {
  font-size: 14px;
  font-weight: var(--bd-fw-bold);
  color: var(--clr-theme-4);
}
@media (max-width:450px) {
  .brand__title {
    margin-bottom: 20px;
  }
}
.brand__wrapper {
  padding: 35px 0;
  border-top: 1px solid var(--clr-border-5);
  border-bottom: 1px solid var(--clr-border-5);
}
.brand__wrapper-2 {
  padding-top: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid var(--clr-border-5);
  margin-bottom: 40px;
}
.brand__wrapper-2 .brand__item {
  text-align: center;
}
.brand__wrapper-3 {
  padding: 48px 0;
}
.brand__wrapper-4 {
  padding: 48px 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background-color: var(--clr-common-white);
  box-shadow: 0px 60px 120px 0px rgba(0, 0, 0, 0.024);
  border-top: 2px solid #946ed6;
  position: relative;
  z-index: 9;
}
.brand__wrapper-5 {
  background-color: var(--clr-common-white);
  margin: 0 80px;
  padding: 54px 0;
  border-radius: 0px 0px 10px 10px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .brand__wrapper-5 {
    border-radius: 0px 0px 10px 10px;
    margin: 0;
  }
}
.brand__item img {
  opacity: 30%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  text-align: center;
}
.brand__item:hover img {
  opacity: 100%;
}
.brand__inner {
  display: flex;
  gap: 20px;
  align-items: center;
}
@media (max-width:450px) {
  .brand__inner {
    display: block;
    text-align: center;
  }
}

/*----------------------------------------*/
/*  36. VIDEO CSS START
/*----------------------------------------*/
.pt-210 {
  padding-top: 210px;
}

.video__bg {
  position: relative;
  z-index: 5;
}
.video__bg-2 {
  position: relative;
  z-index: 5;
}
.video__bg-2:before {
  position: absolute;
  content: "";
  width: 100%;
  background-color: var(--clr-common-black);
  min-height: 890px;
  z-index: -1;
  bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .video__bg-2:before {
    min-height: 85%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .video__bg-2:before {
    min-height: 90%;
  }
}
.video__bg:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--clr-common-black);
  top: 0;
  left: 0;
  opacity: 0.6;
  z-index: -1;
}
.video__user-1 {
  position: absolute;
  top: -90px;
  left: 5px;
}
.video__user-2 {
  position: absolute;
  bottom: -70px;
  left: 9.2%;
}
.video__user-3 {
  position: absolute;
  right: 22%;
  top: -120px;
}
.video__user-4 {
  position: absolute;
  right: -12.5%;
  top: -10px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .video__user-4 {
    right: 0;
  }
}
.video__user-5 {
  position: absolute;
  bottom: -100px;
  right: -16%;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .video__user-5 {
    right: 0;
  }
}
.video__wrapper-2 {
  margin-top: -120px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .video__wrapper-2 {
    margin-top: 0;
  }
}
.video__illustraion {
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}

/*----------------------------------------*/
/*  12. ACCORDIONG CSS START
/*----------------------------------------*/
.answer__accordion .accordion-button {
  padding: 21.5px 30px;
  font-weight: var(--bd-fw-sbold);
  font-size: 18px;
  color: var(--clr-text-3);
  border-top: 1px solid var(--clr-common-heading);
  background: var(--clr-bg-gray-1);
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .answer__accordion .accordion-button {
    padding: 21.5px 0px;
  }
}
.answer__accordion .accordion-button:focus {
  box-shadow: none;
  border-color: var(--clr-theme-1);
}
.answer__accordion .accordion-button:not(.collapsed) {
  background-color: var(--clr-bg-gray-1);
  box-shadow: none;
  color: var(--clr-theme-1);
  border-top: 1px solid var(--clr-theme-1);
}
.answer__accordion .accordion-button::after {
  margin-left: auto;
  content: "\f107";
  font-family: var(--bd-ff-fontawesome);
  font-size: 20px;
  color: var(--clr-common-heading);
  background-image: none;
  background-size: 0;
  width: auto;
  height: auto;
  font-weight: 300;
}
.answer__accordion .accordion-button:not(.collapsed)::after {
  content: "\f107";
  font-family: var(--bd-ff-fontawesome);
  font-size: 20px;
  color: var(--clr-theme-1);
  background-image: none;
  transform: rotate(180deg);
}
.answer__accordion .accordion-item {
  border: 0;
  background-color: var(--clr-bg-gray-1);
}
.answer__accordion .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.answer__accordion .accordion-item:last-child {
  border-bottom: 1px solid var(--clr-common-heading);
}
.answer__accordion .accordion-item:last-of-type {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.answer__accordion .accordion-body {
  padding: 0px 30px 12px;
}
@media (max-width: 575px), sm {
  .answer__accordion .accordion-body {
    padding: 0px 15px 12px;
  }
}
.answer__accordion.style-2 .accordion-item {
  background-color: var(--clr-common-white);
}
.answer__accordion.style-2 .accordion-button {
  background-color: var(--clr-common-white);
}

.accordion__content-2 .accordion-button {
  padding: 21.5px 30px;
  font-weight: var(--bd-fw-sbold);
  font-size: 18px;
  color: var(--clr-text-3);
  border-top: 1px solid var(--clr-common-heading);
  background: var(--clr-bg-gray-1);
}
@media (max-width: 575px) {
  .accordion__content-2 .accordion-button {
    padding: 21.5px 15px;
  }
}
.accordion__content-2 .accordion-button:focus {
  box-shadow: none;
  border-color: var(--clr-theme-1);
}
.accordion__content-2 .accordion-button:not(.collapsed) {
  background-color: var(--clr-bg-gray-1);
  box-shadow: none;
  color: var(--clr-theme-1);
  border-top: 1px solid var(--clr-theme-1);
}
.accordion__content-2 .accordion-button::after {
  margin-left: auto;
  content: "\f107";
  font-family: var(--bd-ff-fontawesome);
  font-size: 20px;
  color: var(--clr-common-heading);
  background-image: none;
  background-size: 0;
  width: auto;
  height: auto;
  font-weight: 300;
}
.accordion__content-2 .accordion-button:not(.collapsed)::after {
  content: "\f107";
  font-family: var(--bd-ff-fontawesome);
  font-size: 20px;
  color: var(--clr-theme-1);
  background-image: none;
  transform: rotate(180deg);
}
.accordion__content-2 .accordion-item {
  border: 0;
  background-color: var(--clr-bg-gray-1);
}
.accordion__content-2 .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.accordion__content-2 .accordion-item:last-child {
  border-bottom: 1px solid var(--clr-common-heading);
}
.accordion__content-2 .accordion-item:last-of-type {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion-body {
  padding: 0px 30px 12px;
}

.accordion__number {
  padding-right: 15px;
}
.accordion__title {
  color: var(--clr-common-heading);
  font-size: 18px;
  font-weight: var(--bd-fw-sbold);
}

.bd-faq__accordion .accordion-button {
  font-size: 18px;
  font-weight: var(--bd-fw-bold);
  height: 60px;
  padding-left: 30px;
  background: var(--clr-common-white);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
@media (max-width: 575px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .bd-faq__accordion .accordion-button {
    padding-left: 20px;
    font-size: 16px;
  }
}
.bd-faq__accordion .accordion-button:focus {
  z-index: 3;
  border: none;
  outline: 0;
  box-shadow: none;
}
.bd-faq__accordion .accordion-button:not(.collapsed) {
  content: "\f067";
  box-shadow: none;
  border: 0;
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}
.bd-faq__accordion .accordion-button:not(.collapsed)::after {
  background: none;
  transform: rotate(180deg);
  content: "\f068";
  position: absolute;
  right: 10px;
  top: 50%;
  color: var(--clr-common-theme-1);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: var(--bd-ff-fontawesome);
}
@media (max-width: 575px) {
  .bd-faq__accordion .accordion-button:not(.collapsed)::after {
    right: 15px;
  }
}
.bd-faq__accordion .accordion-button::after {
  background: none;
  color: var(--clr-theme-1);
  content: "+";
  position: absolute;
  right: 10px;
  top: 50%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: var(--bd-ff-fontawesome);
  font-weight: 600;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  padding-right: 0px;
}
@media (max-width: 575px) {
  .bd-faq__accordion .accordion-button::after {
    right: 15px;
  }
}
.bd-faq__accordion .accordion-item {
  margin-bottom: 20px;
  border: 0;
  background-color: transparent;
}
.bd-faq__accordion .accordion-item:first-of-type .accordion-button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding-right: 30px;
}
.bd-faq__accordion .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.bd-faq__accordion .accordion-collapse {
  border: 0;
}
.bd-faq__accordion .accordion-body {
  padding: 20px 30px 5px 30px;
}
@media (max-width: 575px) {
  .bd-faq__accordion .accordion-body {
    padding: 20px 15px 5px 15px;
  }
}
.bd-faq__accordion .accordion-body p {
  margin-bottom: 0;
  margin-top: 3px;
}

.answer__tab-content .nav-tabs {
  border-bottom: 0;
  display: flex;
  justify-content: end;
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 55px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .answer__tab-content .nav-tabs {
    justify-content: start;
    margin-top: 0;
  }
}
.answer__tab-content .nav-tabs .nav-link {
  border: 1px solid var(--clr-theme-1);
  border-radius: 6px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-common-heading);
}
.answer__tab-content .nav-tabs .nav-link.active {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-1);
  border-color: transparent;
}
.answer__tab-content .nav-link {
  padding: 11px 25px;
}

.answer__tab-content .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
  border-color: transparent;
  border: 1px solid var(--clr-theme-1);
}

/*----------------------------------------*/
/*  29. PROCESS CSS START
/*----------------------------------------*/
.process__icon {
  margin-bottom: 35px;
}
.process__icon span {
  width: 100px;
  height: 100px;
  background-color: var(--clr-theme-1);
  display: inline-block;
  text-align: center;
  line-height: 100px;
  border-radius: 50%;
}
.process__content h3 {
  font-size: 24px;
  margin-bottom: 15px;
}
@media (max-width:450px), only screen and (min-width: 576px) and (max-width: 767px) {
  .process__content h3 {
    font-size: 20px;
  }
}
.process__content p {
  padding-right: 25px;
  margin-bottom: 0;
}
.process__content-2 span {
  font-size: 14px;
  color: var(--clr-text-1);
}
.process__content-2 h3 {
  font-size: 24px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .process__content-2 h3 {
    font-size: 22px;
  }
}
@media (max-width:450px) {
  .process__content-2 h3 {
    font-size: 20px;
  }
}
.process__grid {
  background-color: var(--clr-common-white);
  border-radius: 6px;
  display: grid;
  align-items: center;
  padding: 40px 40px;
  grid-template-columns: repeat(4, auto);
  row-gap: 30px;
  justify-content: space-between;
}
@media (max-width: 575px) {
  .process__grid {
    padding: 40px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .process__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .process__grid {
    grid-template-columns: repeat(2, auto);
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .process__grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
.process__item-2 {
  display: flex;
  gap: 20px;
}

/*----------------------------------------*/
/*  25. NEWS CSS START
/*----------------------------------------*/
.news__spacing {
  position: relative;
  margin-top: -293px;
  padding-top: 420px;
}
.news__item:hover .news__thumb img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.news__item-3 {
  position: relative;
  z-index: 1;
  padding: 45px 40px 45px;
  overflow: hidden;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
@media (max-width:450px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .news__item-3 {
    padding: 45px 20px 45px;
  }
}
.news__item-3::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--clr-common-white);
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.news__item-3:hover:before {
  opacity: 0;
}
.news__item-3:hover .news__title {
  color: var(--clr-common-white);
}
.news__item-3:hover .news__meta-text {
  color: var(--clr-common-white);
}
.news__item-3:hover .news__meta-text span b {
  color: #7e7e7e;
  font-weight: var(--bd-fw-sbold);
  margin-right: 5px;
}
.news__item-3:hover .text__btn {
  color: var(--clr-common-white);
}
.news__item-3:hover .text__btn:hover {
  color: var(--clr-theme-3);
}
.news__item-3 .news__title {
  line-height: 1.5;
}
.news__item-3 .news__title a:hover {
  color: var(--clr-theme-3);
}
.news__item-4 {
  position: relative;
  z-index: 45;
}
.news__content-3 {
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.news__content-4 {
  padding: 92px 40px 35px;
  border-radius: 6px;
  background-color: var(--clr-common-white);
  position: relative;
  margin-top: -60px;
  z-index: -1;
}
@media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) {
  .news__content-4 {
    padding: 92px 30px 35px;
  }
}
@media (max-width:450px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .news__content-4 {
    padding: 92px 20px 35px;
  }
}
.news__thumb {
  margin-bottom: 32px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  overflow: hidden;
}
.news__thumb img {
  width: 100%;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.news__thumb-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.news__thumb-3::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--clr-common-black);
  opacity: 0.8;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.news__thumb-4 {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.news__thumb-4 img {
  width: 100%;
  padding: 0 20px;
}
.news__meta {
  display: flex;
  gap: 35px;
  margin-bottom: 5px;
}
.news__meta-category a {
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-theme-1);
  border-bottom: 2px solid var(--clr-border-3);
}
.news__meta-text {
  position: relative;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-common-heading);
}
.news__meta-text::before {
  position: absolute;
  content: "";
  height: 15px;
  width: 1px;
  background: var(--clr-text-8);
  left: -20px;
  top: 55%;
  transform: rotate(20deg) translateY(-50%);
}
.news__meta-text span b {
  color: var(--clr-text-8);
  font-weight: var(--bd-fw-sbold);
  margin-right: 5px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.news__meta-text span a:hover {
  color: var(--clr-theme-1);
}
.news__title a {
  font-size: 24px;
  margin-bottom: 30px;
  display: block;
}
.news__title a:hover {
  color: var(--clr-theme-1);
}
@media (max-width:450px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .news__title a {
    font-size: 22px;
  }
}

.style-4 .news__title {
  color: var(--clr-common-black);
}
.style-4 .news__title:hover {
  color: var(--clr-theme-3);
}
.style-4 .news__meta-category a {
  border-bottom: 0;
}
.style-4 .news__meta-category a:hover {
  color: var(--clr-theme-3);
}
.style-4 .text__btn {
  color: var(--clr-common-black);
}
.style-4 .text__btn:hover {
  color: var(--clr-theme-3);
}

@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__wrapper {
    padding-right: 0;
  }
}
.postbox__thumb {
  position: relative;
}
.postbox__thumb img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.postbox__thumb .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: var(--clr-theme-1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  color: var(--clr-common-white);
  animation: pulse 2s infinite;
  z-index: 1;
}
.postbox__item {
  position: relative;
}
.postbox__item .bd-arrow-style button.slick-arrow {
  left: 0;
}
.postbox__item .bd-arrow-style button.slick-arrow.bd-slick-next {
  left: auto;
  right: 0;
}
.postbox__item .bd-arrow-style button.slick-arrow {
  background: var(--clr-common-white);
  height: 50px;
  width: 50px;
  line-height: 50px;
  font-size: 20px;
  border-radius: 0;
  border: none;
  outline: none;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  margin: 0px;
  box-shadow: 0px 0px 30px 0px rgba(0, 5, 63, 0.1);
  position: absolute;
  transition: 0.3s;
  z-index: 1;
}
.postbox__item .bd-arrow-style button.slick-arrow:hover {
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
}
.postbox__title {
  font-size: 36px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox__title {
    font-size: 25px;
  }
}
@media (max-width: 575px) {
  .postbox__title {
    font-size: 20px;
  }
}
.postbox__title a:hover {
  color: var(--clr-theme-1);
}
.postbox__title-df {
  font-size: 45px;
  line-height: 1.2;
  font-weight: var(--bd-fw-sbold);
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__title-df {
    font-size: 35px;
  }
}
@media (max-width: 575px) {
  .postbox__title-df {
    font-size: 30px;
  }
}
.postbox__title-sm {
  font-size: 28px;
  font-weight: var(--bd-fw-sbold);
  line-height: 1.2;
}
.postbox__meta {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.postbox__meta span {
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-text-8);
  text-transform: capitalize;
  display: inline-block;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__meta span {
    margin-right: 20px;
  }
}
@media (max-width: 575px) {
  .postbox__meta span {
    font-size: 14px;
  }
}
.postbox__meta span i {
  color: var(--clr-theme-1);
  margin-right: 3px;
}
.postbox__meta span a:hover {
  color: var(--clr-common-white);
}
.postbox__meta .postdetails-tag {
  font-size: 12px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-common-white);
  background: var(--clr-theme-1);
  padding: 2px 10px;
  border-radius: 5px;
}
.postbox__meta .postdetails-tag:hover {
  color: var(--clr-common-white);
}
.postbox__text img {
  max-width: 100%;
}
.postbox__text p {
  margin-bottom: 28px;
}
.postbox__text-single p {
  margin-bottom: 15px;
}
.postbox__slider button {
  position: absolute;
  left: 50px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  font-size: 30px;
  color: var(--clr-common-white);
}
.postbox__slider button.postbox-slider-button-next {
  left: auto;
  right: 50px;
}
@media (max-width: 575px) {
  .postbox__slider button.postbox-slider-button-next {
    right: 10px;
  }
}
@media (max-width: 575px) {
  .postbox__slider button {
    left: 10px;
  }
}
.postbox__comment ul li {
  margin-bottom: 40px;
  list-style: none;
}
.postbox__comment ul li.children {
  margin-left: 100px;
}
@media (max-width: 575px) {
  .postbox__comment ul li.children {
    margin-left: 15px;
  }
}
.postbox__comment-form-title {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 40px;
}
.postbox__comment-input {
  position: relative;
  margin-bottom: 30px;
}
.postbox__comment-input span {
  font-weight: 600;
  color: var(--clr-common-black);
  margin-bottom: 12px;
  display: block;
}
.postbox__comment-input input, .postbox__comment-input textarea {
  width: 100%;
  height: 56px;
  line-height: 54px;
  padding: 0 23px;
  background: #f3f4f8;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  border: 2px solid #f3f4f8;
  color: var(--clr-common-black);
  font-size: 15px;
}
.postbox__comment-input input::placeholder, .postbox__comment-input textarea::placeholder {
  font-size: 15px;
  color: #6d6e75;
}
.postbox__comment-input input:focus, .postbox__comment-input textarea:focus {
  border-color: var(--clr-theme-1);
  outline: none;
  background: var(--clr-common-white);
}
.postbox__comment-input textarea {
  height: 180px;
  padding: 23px 25px;
  line-height: 1.1;
  resize: none;
}
.postbox__comment-title {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
}
.postbox__comment-avater img {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  object-fit: cover;
}
.postbox__comment-name {
  margin-bottom: 5px;
}
.postbox__comment-name h5 {
  font-size: 18px;
  font-weight: var(--bd-fw-sbold);
  line-height: 1.2;
  margin-bottom: 0;
}
.postbox__comment-name span {
  font-size: 14px;
  color: var(--clr-theme-1);
  margin-top: 10px;
  display: block;
}
@media (max-width: 575px) {
  .postbox__comment-text {
    margin-left: 0;
    margin-top: 15px;
  }
}
.postbox__comment-text p {
  font-size: 16px;
  color: var(--tp-text-11);
  margin-bottom: 15px;
}
.postbox__comment-reply {
  margin-top: 10px;
}
.postbox__comment-reply a {
  display: inline-block;
  color: var(--clr-theme-1);
  background: rgba(148, 120, 225, 0.18);
  height: 22px;
  line-height: 22px;
  padding: 0 10px;
  font-weight: 500;
  font-size: 14px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.postbox__comment-reply a:hover {
  color: var(--clr-common-white);
  background: var(--clr-theme-1);
}
.postbox__comment-agree {
  padding-left: 5px;
}
.postbox__comment-agree input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 14px;
  height: 14px;
  background: var(--clr-common-white);
  border: 1px solid #b9bac1;
  outline: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  flex: 0 0 auto;
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
  margin-top: 5px;
}
.postbox__comment-agree input:checked {
  position: relative;
  background-color: var(--clr-theme-1);
  border-color: transparent;
}
.postbox__comment-agree input:checked::after {
  box-sizing: border-box;
  content: "\f00c";
  position: absolute;
  font-family: var(--tp-ff-fontawesome);
  font-size: 10px;
  color: var(--clr-common-white);
  top: 46%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.postbox__comment-agree input:hover {
  cursor: pointer;
}
.postbox__comment-agree label {
  padding-left: 8px;
  line-height: 26px;
}
.postbox__comment-agree label a {
  color: var(--clr-common-black);
  font-weight: 600;
  padding-left: 4px;
}
.postbox__comment-agree label a:hover {
  color: var(--clr-theme-1);
}
.postbox__comment-agree label:hover {
  cursor: pointer;
}
.postbox__tag {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: var(--bd-fw-medium);
  color: var(--clr-common-white);
  background: var(--clr-theme-1);
  display: block;
  padding: 3px 10px;
  line-height: 20px;
  letter-spacing: 1px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
@media (max-width:450px) {
  .postbox__tag {
    display: none;
  }
}
.postbox__tag-wrapper {
  position: absolute;
  top: 30px;
  left: -30px;
}
@media (max-width: 575px) {
  .postbox__tag-wrapper {
    left: 10px;
  }
}

.postd-text {
  line-height: 30px;
}
.postd-text b {
  font-weight: var(--bd-fw-medium);
  color: var(--tp-heading-primary);
}

.bolgd-tags-wrapper {
  display: flex;
  border-bottom: 1px solid var(--clr-border-2);
  padding-bottom: 60px;
}

.blogd-tag-title {
  font-size: 24px;
  font-weight: var(--bd-fw-sbold);
  margin-right: 35px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blogd-tag-title {
    margin-right: 20px;
  }
}

.tags-list {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tags-list a {
  border: 1px solid var(--clr-border-2);
  padding: 3px 22px;
  border-radius: 6px;
  font-size: 14px;
  text-transform: capitalize;
  font-weight: var(--bd-fw-sbold);
  text-align: center;
}
.tags-list a:hover {
  background: var(--clr-theme-1);
  border-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.rcpost-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: var(--bd-fw-sbold);
}

.postbox-meta {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 575px) {
  .postbox-meta {
    display: block;
  }
}

.postshare-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.postshare-option a {
  font-size: 18px;
  display: inline-block;
  margin-right: 15px;
}
.postshare-option a .fa-linkedin {
  color: #0072AC;
}
.postshare-option a .fa-pinterest {
  color: #DA0021;
}
.postshare-option a .fa-facebook {
  color: #0072AC;
}
.postshare-option a .fa-twitter {
  color: #3AC4FF;
}

.postbox-share-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: var(--bd-fw-sbold);
  margin-right: 20px;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .news-sidebar {
    padding-left: 0;
  }
}

.widget {
  padding: 35px 38px;
  border: 1.5px solid var(--clr-border-11);
  margin-bottom: 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .widget {
    padding: 25px 25px;
  }
}
@media (max-width: 575px) {
  .widget {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.sidebar-title {
  font-size: 22px;
  margin-bottom: 30px;
  line-height: 1;
  font-weight: var(--bd-fw-sbold);
}

.n-sidebar-search {
  position: relative;
}
.n-sidebar-search a {
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
  font-size: 14px;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-border-radius: 0px 6px 6px 0px;
  -moz-border-radius: 0px 6px 6px 0px;
  -o-border-radius: 0px 6px 6px 0px;
  -ms-border-radius: 0px 6px 6px 0px;
  border-radius: 0px 6px 6px 0px;
}
.n-sidebar-search input {
  padding-left: 30px;
  padding-right: 80px;
  background: #f3f4f8;
  height: 60px;
  width: 100%;
  border: 0;
  outline: none;
  font-size: 14px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.n-sidebar-search input::placeholder {
  color: #999999;
  font-size: 14px;
}
.n-sidebar-feed ul li {
  display: flex;
  gap: 20px;
  align-items: center;
  padding-top: 30px;
  list-style: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .n-sidebar-feed ul li {
    flex-wrap: wrap;
  }
}
.n-sidebar-feed ul li:first-child {
  padding-top: 0;
}
.n-sidebar-feed ul li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.n-sidebar-categories li {
  list-style: none;
}
.n-sidebar-categories li:hover .single-category {
  background: var(--clr-theme-1);
  border-color: var(--clr-theme-1);
  color: var(--clr-common-white);
  transition: 0.3s;
}

.feed-content h6 {
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--bd-fw-sbold);
}
.feed-content h6:hover {
  color: var(--clr-theme-1);
}
.feed-number img {
  width: 100px;
  object-fit: cover;
}
.feed-date {
  font-size: 14px;
  color: var(--clr-text-2);
}
.feed-date i {
  margin-right: 5px;
}

.single-category {
  font-size: 14px;
  width: 100%;
  height: 50px;
  padding: 0 20px;
  line-height: 50px;
  border: 1px solid var(--clr-border-2);
  transition: all 0.5s ease-out 0s;
  display: flex;
  justify-content: space-between;
  font-weight: var(--bd-fw-sbold);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

.stags {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.stags a {
  border: 1px solid var(--clr-border-2);
  padding: 3px 22px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  font-size: 14px;
  text-transform: capitalize;
  font-weight: var(--bd-fw-sbold);
  text-align: center;
}
.stags a:hover {
  background: var(--clr-theme-1);
  border-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.tagcloud a {
  background: var(--tp-grey-1);
  color: var(--clr-common-black);
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 21px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  margin-right: 5px;
  text-transform: uppercase;
  border-radius: 40px;
  border: 0;
}
.tagcloud a:hover {
  background: var(--clr-common-black);
  color: var(--clr-common-white);
}

blockquote {
  padding-left: 20px;
  border-left: 3px solid var(--clr-theme-1);
  margin-bottom: 60px;
}

/*----------------------------------------*/
/* 26. NEWSLETTTER CSS START
/*----------------------------------------*/
.newsletter__content p {
  margin-bottom: 0;
  color: var(--clr-common-white);
  opacity: 70%;
}
.newsletter__input {
  position: relative;
  margin-top: 20px;
}
.newsletter__input::before {
  position: absolute;
  content: "\f2b6";
  left: 20px;
  top: 16px;
  font-size: 16px;
  text-align: left;
  font-family: var(--bd-ff-fontawesome);
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-theme-3);
}
.newsletter__input input {
  width: 100%;
  height: 60px;
  background-color: var(--clr-common-white);
  border: 0;
  padding-left: 50px;
  padding-right: 213px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
}
@media (max-width: 575px) {
  .newsletter__input input {
    padding-right: 20px;
  }
}
.newsletter__input input::placeholder {
  font-size: 14px;
}

/*----------------------------------------*/
/*  30.	SERVICCE CSS START
/*----------------------------------------*/
.service__area-5 {
  margin-top: -50px;
}
.service__item {
  padding: 55px 30px 50px;
  border-bottom: 1px solid var(--clr-border-7);
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__item {
    padding: 55px 20px 50px;
  }
}
.service__item-wrapper {
  background-color: var(--clr-common-white);
  border-radius: 6px;
  overflow: hidden;
}
.service__item-5 {
  background-color: var(--clr-common-white);
  padding: 50px 50px 45px;
  position: relative;
  border-radius: 6px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
@media (max-width:450px), only screen and (min-width: 576px) and (max-width: 767px) {
  .service__item-5 {
    padding: 50px 20px 45px;
  }
}
.service__item-5:hover {
  background-color: var(--clr-theme-6);
}
.service__item-5:hover .service__check-5 i {
  color: var(--clr-common-white);
}
.service__item-5:hover .service__content-5 h3 a {
  color: var(--clr-common-white);
}
.service__icon img {
  margin-bottom: 35px;
}
.service__icon-5 {
  margin-bottom: 30px;
}
.service__icon-5.green__icon i {
  color: #32E2CF;
}
.service__icon-5.purple__icon i {
  color: #601FD3;
  background-color: #E7D9F8;
}
.service__icon-5.orange__icon i {
  background-color: #E7D9F8;
}
.service__icon-5.Orange__icon.red__icon i {
  color: #FB895B;
  background-color: #FEE1E9;
  background-color: #FEEDE6;
}
.service__icon-5.bule__icon i {
  background-color: #DBEDFE;
  color: #2789FA;
}
.service__icon-5.yellow__icon i {
  background-color: #FEFAD9;
  color: #FCDC32;
}
.service__icon-5 i {
  height: 70px;
  width: 70px;
  background-color: #DDFBF8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 30px;
  color: #32E2CF;
}
.service__content h3 a {
  margin-bottom: 13px;
  display: block;
}
@media (max-width:450px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__content h3 a {
    font-size: 22px;
  }
}
.service__content h3 a:hover {
  color: var(--clr-theme-1);
}
.service__content p {
  margin-bottom: 0;
}
.service__content-5 h3 a {
  line-height: 1.5;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
}
@media (max-width:450px) {
  .service__content-5 h3 a {
    font-size: 20px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .service__content-5 h3 a br {
    display: none;
  }
}
.service__content-5 h3 a:hover {
  background-size: 0 1px, 100% 1px;
}
.service__check-5 {
  position: absolute;
  right: 30px;
  top: 25px;
}
.service__check-5 i {
  color: #E8E8E8;
  font-size: 20px;
  transform: rotate(-45deg);
}
.service__user-1 {
  position: absolute;
  top: 17%;
  left: 6%;
}
@media (max-width: 575px) {
  .service__user-1 {
    display: none;
  }
}
.service__user-2 {
  position: absolute;
  bottom: 30px;
  left: 11%;
}
@media (max-width: 575px) {
  .service__user-2 {
    display: none;
  }
}
.service__user-3 {
  position: absolute;
  right: 23%;
  top: 100px;
}
@media (max-width: 575px) {
  .service__user-3 {
    display: none;
  }
}
.service__user-4 {
  position: absolute;
  top: 50%;
  right: 9%;
  transform: translateY(-50%);
}
@media (max-width: 575px) {
  .service__user-4 {
    display: none;
  }
}
.service__request {
  position: relative;
  z-index: 5;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  overflow: hidden;
}
.service__request:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--clr-common-heading);
  z-index: -1;
  opacity: 70%;
}
.service__request p {
  margin-bottom: 0;
  padding: 27px;
  text-align: center;
  font-size: 24px;
  color: var(--clr-common-white);
  line-height: 1.5;
}
@media (max-width: 575px) {
  .service__request p {
    font-size: 20px;
  }
}
.service__request p span a {
  font-size: 16px;
  font-weight: var(--bd-fw-bold);
}
.service__request p span a:hover {
  color: var(--clr-theme-1);
}

.services__details-title h3 {
  font-size: 40px;
  line-height: 1.1;
  margin-bottom: 30px;
}

.service__sm-thumb img {
  border-radius: 6px;
}

/*----------------------------------------*/
/*  20. FEATURES CSS START
/*----------------------------------------*/
.features__thumb img {
  width: 100%;
  max-width: 420px;
}
.features__thumb-1 img {
  width: 100%;
  max-width: 420px;
}
.features__thumb-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .features__thumb-2 {
    width: calc(100% - 30px);
    position: static;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features__thumb-2 {
    top: 50%;
    transform: translateY(-50%);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .features__thumb-2 {
    padding-right: 50px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .features__thumb-2 img {
    width: 100%;
  }
}
.features__thumb-3 {
  position: absolute;
  top: 0px;
  right: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features__thumb-3 {
    top: 50%;
    transform: translateY(-50%);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .features__thumb-3 {
    padding-left: 50px;
    width: 50%;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .features__thumb-3 {
    margin-left: 30px;
    position: static;
  }
}
.features__thumb-3 img {
  width: 100%;
}
.features__inner > .row > :nth-child(2n) {
  margin-top: 55px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .features__inner > .row > :nth-child(2n) {
    margin-top: 0;
  }
}
.features__item {
  position: relative;
  z-index: 1;
  padding: 50px 30px 45px;
  border-radius: 6px;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .features__item {
    padding: 50px 20px 45px;
  }
}
.features__item:hover::before {
  opacity: 1;
}
.features__item:hover .features__shapebox {
  opacity: 1;
}
.features__item:hover .features__content h3 a {
  color: var(--clr-common-white);
}
.features__item:hover .features__content h3 a:hover {
  color: var(--clr-theme-3);
}
.features__shapebox {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  background-color: var(--clr-theme-4);
}
.features__icon {
  height: 100px;
  width: 100px;
  display: inline-block;
  text-align: center;
  background-color: var(--clr-theme-3);
  line-height: 95px;
  border-radius: 50%;
  box-shadow: 0px 16px 32px 0px rgba(148, 110, 214, 0.4);
  margin-bottom: 35px;
}
.features__content h3 a {
  margin-bottom: 15px;
  display: block;
}
@media (max-width:450px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .features__content h3 a {
    font-size: 20px;
  }
}
.features__content p {
  margin-bottom: 0;
}

.why__choose-features {
  padding: 44px 45px;
  background-color: var(--clr-common-white);
  position: relative;
  overflow: hidden;
}
@media (max-width:450px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .why__choose-features {
    padding: 44px 25px;
  }
}
.why__choose-icon {
  margin-bottom: 40px;
  display: inline-block;
}
.why__choose-content h3 {
  font-size: 20px;
  margin-bottom: 15px;
}
.why__choose-check {
  position: absolute;
  top: 0px;
  right: 0;
  height: 80px;
  width: 80px;
  background-color: #f2ebff;
  text-align: center;
  line-height: 80px;
  color: var(--clr-theme-1);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.why__choose-check i {
  font-size: 18px;
  color: var(--clr-theme-1);
  position: absolute;
  top: 15px;
  right: 15px;
}
.why__choose-user img {
  margin-right: -20px;
  border-radius: 50%;
}
.why__choose-meta {
  display: flex;
  gap: 35px;
  flex-wrap: wrap;
}
@media (max-width: 575px) {
  .why__choose-meta {
    gap: 35px;
  }
}
.why__choose-meta h6 span {
  color: var(--clr-theme-1);
}

.choose__credit-item {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .choose__credit-item {
    flex-wrap: wrap;
  }
}

/*----------------------------------------*/
/*  24. HISTORY CSS START
/*----------------------------------------*/
.history__content p {
  margin-bottom: 35px;
}
.history__content-wrapper {
  margin-left: 50px;
  margin-right: 70px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .history__content-wrapper {
    margin-right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .history__content-wrapper {
    margin-left: 30px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .history__content-wrapper {
    margin-left: 0px;
  }
}
.history__award {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.history__thumb img {
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}

.history__tab .nav-tabs {
  border-bottom: 0;
  border: 1px solidvar(--clr-common-black);
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 30px;
  max-width: 418px;
}
.history__tab .nav-tabs .nav-link {
  margin-bottom: 0;
  border: 0;
  padding: 0 30px;
  height: 50px;
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--bd-fw-bold);
  color: var(--clr-common-black);
  border-radius: 6px;
}
.history__tab .nav-tabs .nav-link.active {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-3);
  border-color: #dee2e6 #dee2e6 #fff;
}
.history__tab .nav-tabs .nav-link:hover {
  border-color: transparent;
  border: 0;
}

/*----------------------------------------*/
/*  21. FEEDBACK CSS START
/*----------------------------------------*/
.feedback__thumb img {
  max-width: 100%;
  text-align: right;
}
.feedback__thumb-wrapper {
  min-height: 525px;
  position: relative;
  margin-right: 80px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .feedback__thumb-wrapper {
    margin-right: 0;
  }
}
.feedback__user-1 {
  position: absolute;
  top: 15%;
  left: -90px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .feedback__user-1 {
    left: 0;
  }
}
.feedback__user-2 {
  position: absolute;
  top: -35px;
  right: -15px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .feedback__user-2 {
    right: 0;
  }
}
.feedback__user-3 {
  position: absolute;
  top: 9%;
  right: 32%;
}
.feedback__user-4 {
  position: absolute;
  bottom: 5px;
  left: 16%;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .feedback__user-4 {
    bottom: 12%;
  }
}
.feedback__user-5 {
  position: absolute;
  right: 30px;
  bottom: 0;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .feedback__user-5 {
    bottom: 7%;
  }
}

/*----------------------------------------*/
/* 15.	CONTACT CSS START
/*----------------------------------------*/
.contact__from-wrapper {
  margin-right: 70px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__from-wrapper {
    margin-right: 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__from-wrapper {
    margin-right: 30px;
  }
}
.contact__from-input {
  position: relative;
  margin-bottom: 20px;
}
.contact__from-input input {
  width: 100%;
  height: 60px;
  padding-left: 45px;
  padding-right: 25px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border: 1px solid var(--clr-common-heading);
  background-color: var(--clr-common-white);
  font-size: 14px;
  font-weight: var(--bd-fw-medium);
}
.contact__from-input input:focus {
  border-color: var(--clr-theme-1);
}
.contact__from-input input:focus + i {
  color: var(--clr-theme-1);
}
.contact__from-input i {
  position: absolute;
  top: 22px;
  left: 25px;
  font-size: 14px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.contact__from-input textarea {
  width: 100%;
  min-height: 160px;
  resize: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: var(--bd-fw-medium);
  outline: none;
  padding: 12px 25px 12px 45px;
  background-color: var(--clr-common-white);
  border: 1px solid var(--clr-common-heading);
}
.contact__from-input textarea:focus {
  border-color: var(--clr-theme-1);
}
.contact__from-input textarea:focus + i {
  color: var(--clr-theme-1);
}
.contact__address-wrapper {
  display: flex;
  gap: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__address-wrapper {
    gap: 30px;
  }
}
@media (max-width: 575px) {
  .contact__address-wrapper {
    gap: 30px;
    flex-wrap: wrap;
  }
}
.contact__address-content p {
  margin-bottom: 0;
}
.contact__address-content p:hover {
  color: var(--clr-theme-1);
}
.contact__address-title h4 {
  font-size: 18px;
  margin-bottom: 30px;
  border-bottom: 1px solid #575b56;
  display: inline-block;
  line-height: 1;
}

.contact__us-content {
  padding: 33px 20px;
  text-align: center;
  background-color: var(--clr-common-white);
  border-radius: 6px;
  position: relative;
  z-index: 55;
}
.contact__us-content h3 {
  font-size: 26px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .contact__us-content h3 {
    font-size: 20px;
  }
}
.contact__us-content span {
  color: var(--clr-theme-3);
}

.google__map-inner iframe {
  width: 100%;
  min-height: 600px;
  border-radius: 20px;
  position: relative;
  margin-bottom: -15px;
}
.google__map-area iframe {
  min-height: 600px;
  width: 100%;
  border-radius: 6px;
}

/*----------------------------------------*/
/*  35. UPGRADE CSS START
/*----------------------------------------*/
.upgrade__content-wrapper {
  padding-right: 55px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .upgrade__content-wrapper {
    padding-right: 0;
  }
}
.upgrade__features {
  margin-bottom: 50px;
}
.upgrade__features il li {
  display: grid;
  grid-template-columns: 1fr auto;
}
.upgrade__features ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .upgrade__features ul {
    grid-template-columns: repeat(2, auto);
  }
}
@media (max-width:450px), (max-width: 575px) {
  .upgrade__features ul {
    grid-template-columns: repeat(1, 1fr);
  }
}
.upgrade__features ul li {
  background-color: var(--clr-common-white);
  height: 60px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: var(--bd-fw-bold);
  padding: 0 20px;
  border-radius: 6px;
  gap: 10px;
  list-style: none;
}
.upgrade__features ul li i {
  color: var(--clr-theme-3);
}
.upgrade__info {
  display: flex;
  align-items: center;
  gap: 20px;
}
.upgrade__text span {
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
}
.upgrade__btn-wrapper {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.upgrade__app {
  display: flex;
  gap: 20px;
  align-items: center;
}
.upgrade__app span a {
  color: #a9a9b7;
  font-size: 25px;
}
.upgrade__app span a:hover {
  color: var(--clr-theme-3);
}
.upgrade__thumb {
  margin-right: -110px;
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .upgrade__thumb {
    margin-right: 0px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .upgrade__thumb {
    padding-left: 30px;
  }
}
.upgrade__thumb img {
  width: 100%;
}

/*----------------------------------------*/
/*  28. PRICING CSS START
/*----------------------------------------*/
.pricing__item {
  background-color: var(--clr-common-white);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  overflow: hidden;
}
.pricing__plan {
  background-color: var(--clr-bg-gray-4);
}
.pricing__plan h3 {
  padding: 19.5px 0;
}
@media (max-width:450px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .pricing__plan h3 {
    font-size: 20px;
  }
}
.pricing__plan.active h3 {
  background-color: var(--clr-theme-3);
  color: var(--clr-common-white);
}
.pricing__body {
  padding: 50px 60px;
}
@media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .pricing__body {
    padding: 50px 30px;
  }
}
@media (max-width:450px) {
  .pricing__body {
    padding: 50px 20px;
  }
}
.pricing__price h2 {
  line-height: 1;
  position: relative;
  padding-bottom: 35px;
}
.pricing__price h2:before {
  position: absolute;
  content: "";
  width: 100px;
  height: 1px;
  background-color: var(--clr-border-10);
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.pricing__list {
  padding-top: 40px;
  padding-bottom: 50px;
}
.pricing__list ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pricing__list ul li {
  font-size: 18px;
  color: var(--clr-theme-4);
  text-align: left;
  position: relative;
  padding-left: 40px;
  list-style: none;
}
.pricing__list ul li:after {
  position: absolute;
  content: "\f058";
  font-size: 18px;
  font-family: var(--bd-ff-fontawesome);
  left: 0;
  top: 0;
  color: var(--clr-theme-3);
}

.pricing__switch .nav-tabs {
  border: none;
  margin-bottom: 40px;
}
.pricing__switch .nav-tabs .nav-link {
  margin-bottom: 0;
  border: 0;
}
.pricing__switch .nav .nav-item {
  padding-left: 0px;
}
.pricing__switch .nav .nav-item .nav-link {
  padding: 5px 48px;
  background: transparent;
  border-radius: 0;
  font-weight: 700;
  text-transform: capitalize;
  position: relative;
  outline: none;
  font-size: 14px;
  border: none;
  color: var(--clr-common-heading);
}
@media (max-width:450px) {
  .pricing__switch .nav .nav-item .nav-link {
    padding: 5px 40px;
  }
}
.pricing__switch .nav .nav-item .nav-link.active {
  color: var(--clr-theme-3);
}
.pricing__switch .nav .nav-item .nav-link.active::after {
  right: 4px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.pricing__switch .nav .nav-item .nav-link::after {
  position: absolute;
  content: "";
  right: -18px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  background-color: var(--clr-theme-3);
  z-index: 1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.pricing__switch .nav .nav-item .nav-link::before {
  position: absolute;
  content: "";
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(50%);
  -moz-transform: translateY(-50%) translateX(50%);
  -ms-transform: translateY(-50%) translateX(50%);
  -o-transform: translateY(-50%) translateX(50%);
  transform: translateY(-50%) translateX(50%);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
  background: var(--clr-border-2);
  width: 50px;
  height: 30px;
  background-color: var(--clr-common-white);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.pricing__switch .nav .nav-item:last-child .nav-link {
  padding-right: 0;
}
.pricing__switch .nav .nav-item:last-child .nav-link::after {
  display: none;
}
.pricing__switch .nav .nav-item:last-child .nav-link::before {
  display: none;
}
.pricing__switch .nav .nav-item:first-child .nav-link {
  padding-left: 0;
}

/*----------------------------------------*/
/*  32. SKILL CSS STAR
/*----------------------------------------*/
.skill__thumb-bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50%;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .skill__thumb-bg {
    width: 100%;
    position: relative;
    min-height: 670px;
  }
}
.skill__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.skill__btn .play__btn {
  background-color: var(--clr-common-white);
  color: var(--clr-theme-3);
}
.skill__btn .play__btn:hover {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-3);
}
.skill__content {
  padding-left: 80px;
  padding-right: 40px;
  padding-top: 120px;
  padding-bottom: 120px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .skill__content {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .skill__content {
    padding-left: 30px;
    padding-right: 0px;
  }
}

.bd-progress__skill-item {
  position: relative;
  margin-bottom: 35px;
}
.bd-progress__skill-item:last-child {
  margin-bottom: 0;
}
.bd-progress__skill-item h4 {
  font-size: 18px;
  margin-bottom: 13px;
  padding-right: 50px;
}
.bd-progress__skill-item .progress-count {
  position: absolute;
  top: 0px;
  right: 0;
  font-size: 18px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-theme-1);
  font-family: var(--bd-ff-heading);
}
.bd-progress__skill-item .progress {
  height: 10px;
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.bd-progress__skill-item .progress::after {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 100%;
  width: 100%;
  background-color: var(--clr-common-white);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  z-index: -1;
}
.bd-progress__skill-item .progress-bar {
  background-color: var(--clr-theme-1);
  overflow: visible;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

.style__2 .bd-progress__skill-item .progress::after {
  background-color: #eee;
}

/*----------------------------------------*/
/*  19. FAQ CSS START
/*----------------------------------------*/
.faq__title h3 {
  font-size: 30px;
  margin-bottom: 30px;
}
.faq__thumb-wrapper {
  position: relative;
  z-index: 5;
  margin-right: 50px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .faq__thumb-wrapper {
    margin-right: 0;
  }
}
.faq__thumb-1 {
  position: absolute;
  z-index: -1;
  top: -70px;
  -webkit-animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
  -moz-animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
  -o-animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
  animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
}
.faq__thumb-2 {
  margin-left: -60px;
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .faq__thumb-2 {
    margin-left: 0px;
  }
}
.faq__thumb-2 img {
  width: 100%;
}
.faq__shape {
  position: absolute;
  bottom: 16%;
  right: 60px;
  z-index: -1;
}
.faq__content-wrapper {
  padding-right: 40px;
  position: relative;
  z-index: 5;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .faq__content-wrapper {
    padding-right: 0px;
  }
}

/*----------------------------------------*/
/*  17.	ERROR CSS START
/*----------------------------------------*/
.error__thumb img {
  max-width: 550px;
}
.error__content h2 {
  font-size: 36px;
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .error__content h2 {
    font-size: 30px;
  }
}
.error__content p {
  margin-bottom: 30px;
}

/*----------------------------------------*/
/*  31.	SIGN CSS START
/*----------------------------------------*/
.signin__area {
  position: fixed;
  z-index: 999;
  top: 50%;
  margin: 0 auto;
  left: 0;
  right: 0;
  display: none;
  max-width: 900px;
  transform: translateY(-50%);
}
.signin__area.open {
  display: inline-block;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) {
  .signin__area {
    max-width: 360px;
  }
}

.signup__area {
  position: fixed;
  z-index: 99999;
  top: 50%;
  margin: 0 auto;
  left: 0;
  right: 0;
  display: none;
  max-width: 900px;
  transform: translateY(-50%);
}
.signup__area.open {
  display: inline-block;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) {
  .signup__area {
    max-width: 360px;
  }
}
.signup__input-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.sign__main {
  display: flex;
  justify-content: center;
}
.sign__title h3 {
  font-size: 28px;
  margin-bottom: 106px;
}
.sign__thumb-box {
  background: var(--clr-bg-gray-1);
  padding: 45px 30px;
}
.sign__thumb img {
  max-width: 100%;
}
.sign__message img {
  max-width: 100%;
  margin-bottom: 5px;
}
.sign__input input {
  width: 100%;
  height: 55px;
  background: var(--clr-bg-gray-1);
  border: 0;
  border-radius: 4px;
  margin-bottom: 30px;
  display: flex;
  padding: 10px 20px;
  outline: none;
  color: var(--clr-common-heading);
  font-size: 16px;
}
.sign__input input::placeholder {
  color: #666464;
}
.sign__check a {
  font-weight: 600;
  text-decoration: underline;
}
.sign__check a:hover {
  color: var(--clr-theme-1);
}
.sign__content-wrapper {
  padding: 45px 30px;
  background: var(--clr-common-white);
}
.sign__action {
  margin-bottom: 25px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.sign__register a {
  font-weight: 600;
  text-decoration: revert;
  margin-left: 5px;
}
.sign__register a:hover {
  color: var(--clr-theme-1);
}
.sign__social {
  position: relative;
  z-index: 2;
  margin-bottom: 25px;
}
.sign__social span {
  background: var(--clr-common-white);
  display: inline-block;
  padding: 0 10px;
}
.sign__social:before {
  position: absolute;
  height: 1px;
  background: #edeef2;
  content: "";
  width: 100%;
  top: 15px;
  left: 0;
  z-index: -1;
}
.sign__social-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 19px;
}
.sign__social-icon a {
  font-weight: 500;
  border: 1px solid #edeef2;
  padding: 11px 20px;
  border-radius: 4px;
  display: inline-block;
}
.sign__social-icon a:hover {
  color: var(--clr-theme-1);
  border-color: var(--clr-theme-1);
}
.sign__social-icon i {
  margin-right: 5px;
}

.registered__wrapper {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.forget__password a:hover {
  color: var(--clr-theme-1);
}

.account__login {
  margin-bottom: 30px;
}
.account__login a {
  font-weight: 600;
  color: var(--clr-theme-1);
  margin-left: 5px;
  text-decoration: underline;
}
.account__login a:hover {
  color: var(--clr-theme-1);
}

.sign__main > :nth-child(2) {
  flex: 0 0 calc(100% - 360px);
}

@media (min-width: 992px) and (max-width: 1199px) {
  .sign__main > *:nth-child(1) {
    flex: 0 0 360px;
  }
  .sign__main > :nth-child(2) {
    flex: 0 0 calc(100% - 360px);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .sign__main {
    max-width: 750px;
    max-height: 530px;
    transform: none;
    overflow: auto;
    overflow-y: auto;
    display: inline-block;
  }
  .sign__area.open {
    display: flex;
    justify-content: center;
  }
  .sign__main > * {
    flex: 0 0 100% !important;
  }
}
@media (max-width: 767px) {
  .sign__main {
    max-width: 750px;
    max-height: 530px;
    transform: none;
    overflow: auto;
    overflow-y: auto;
    display: inline-block;
  }
  .sign__area.open {
    display: flex;
    justify-content: center;
  }
  .sign__main > * {
    flex: 0 0 100% !important;
  }
}
/*----------------------------------------*/
/*  22.	FOOTER CSS START
/*----------------------------------------*/
.footer__col-2 {
  padding-left: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .footer__col-2 {
    padding-left: 0;
  }
}
.footer__col-3 {
  padding-left: 20px;
  margin-right: -15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__col-3 {
    padding-left: 0;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .footer__col-3 {
    padding-left: 0;
  }
}
.footer__col-4 {
  margin-left: 80px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__col-4 {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__col-5 {
    margin-right: -50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__col-6 {
    margin-left: 30px;
  }
}
.footer__col-7 {
  margin-left: 80px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__col-7 {
    margin-left: 0;
  }
}
.footer__widget > p {
  color: var(--clr-common-heading);
  font-weight: var(--bd-fw-medium);
}
.footer__contact span {
  font-weight: var(--bd-fw-medium);
}
.footer__contact p {
  font-weight: var(--bd-fw-medium);
  color: var(--clr-common-heading);
}
.footer__contact p a:hover {
  color: var(--clr--theme-1);
}
.footer__border {
  border-top: 1px solid var(--clr-common-heading);
}
.footer__border-2 {
  border-top: 1px solid var(--clr-border-8);
}
.footer__border-3 {
  border-top: 1px solid var(--clr-border-11);
}
.footer__border-3 {
  border-top: 1px solid var(--clr-border-12);
}
.footer__social {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer__social a {
  width: 50px;
  height: 50px;
  background-clip: var(--clr-common-white);
  border: 1px solid var(--clr-common-heading);
  align-items: center;
  justify-content: center;
  display: inline-flex;
  border-radius: 6px;
  font-weight: var(--bd-fw-medium);
}
.footer__social a:hover {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-1);
  border-color: var(--clr-theme-1);
}
.footer__title h3 {
  line-height: 1;
  margin-bottom: 30px;
}
.footer__link ul {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
}
.footer__link ul li {
  list-style: none;
}
.footer__link ul li a {
  color: var(--clr-common-heading);
  font-weight: var(--bd-fw-medium);
  font-size: 16px;
}
.footer__link ul li a:hover {
  color: var(--clr-theme-1);
}
.footer__link.s-2 ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 16px;
}
.footer__newsletter P {
  color: var(--clr-common-heading);
  font-weight: var(--bd-fw-medium);
  margin-bottom: 35px;
}
.footer__newsletter-input {
  position: relative;
}
.footer__newsletter-input input {
  height: 60px;
  border: 1px solid var(--clr-common-heading);
  width: 100%;
  border-radius: 6px;
  padding-left: 45px;
  padding-right: 65px;
  font-size: 14px;
}
.footer__newsletter-input input::placeholder {
  font-size: 14px;
  font-weight: var(--bd-fw-medium);
}
.footer__newsletter-input span i {
  position: absolute;
  top: 50%;
  left: 25px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 14px;
}
.footer__newsletter-input button {
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
  height: 60px;
  border: 1px solid var(--clr-common-heading);
  z-index: 1;
  border-radius: 0px 6px 6px 0px;
}
.footer__newsletter-input button i {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  font-size: 18px;
  position: relative;
  top: 3px;
}
.footer__newsletter-input button:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
  border-color: var(--clr-theme-1);
}
.footer__note span {
  color: var(--clr-footer-1);
  margin-top: 10px;
  display: block;
  font-weight: var(--bd-fw-medium);
}
.footer__contact-2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.footer__contact-2 span a {
  font-size: 16px;
  font-weight: var(--bd-fw-medium);
  color: var(--clr-text-2);
}
.footer__contact-2 span a:hover {
  color: var(--clr-theme-1);
}
.footer__instagram {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.footer__instagram img {
  width: 100%;
}
.footer__social-2 {
  display: flex;
  column-gap: 25px;
  flex-wrap: wrap;
  row-gap: 10px;
}
.footer__social-2 a {
  color: var(--clr-text-2);
}
.footer__social-2 a:hover {
  color: var(--clr-theme-1);
}
.footer__signup-content {
  margin-bottom: 45px;
}
.footer__signup-content p {
  font-size: 16px;
  font-weight: var(--bd-fw-medium);
}
.footer__signup-content h3 {
  font-size: 30px;
  color: var(--clr-common-white);
  margin-bottom: 10px;
}
.footer__signup-input {
  position: relative;
  z-index: 5;
}
.footer__signup-input input {
  width: 100%;
  height: 60px;
  background-color: var(--clr-common-black);
  border: 1px solid var(--clr-theme-3);
  padding-left: 45px;
  padding-right: 180px;
  color: var(--clr-common-white);
}
.footer__signup-input input::placeholder {
  font-size: 14px;
}
.footer__signup-input::before {
  position: absolute;
  content: "\f2b6";
  left: 20px;
  top: 16px;
  text-align: left;
  font-family: var(--bd-ff-fontawesome);
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-theme-3);
}
.footer__signup-input button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--clr-theme-1);
  height: 60px;
  padding: 0 28px;
  font-size: 14px;
  color: var(--clr-common-white);
  display: flex;
  gap: 20px;
  align-items: center;
  font-weight: var(--bd-fw-bold);
}
.footer__signup-input button i {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media (max-width: 575px) {
  .footer__signup-input button {
    position: sticky;
    margin-top: 50px;
  }
}
.footer__style-2 .footer__link ul a {
  color: var(--clr-text-2);
}
.footer__style-2 .footer__link ul a:hover {
  color: var(--clr-theme-1);
}
.footer__style-2 .footer__link.s-2 ul {
  column-gap: 45px;
}
.footer__style-2 .footer__border {
  border-top: 1px solid var(--clr-border-7);
}
.footer__style-2 .footer__social-2 a {
  color: #bdbdbd;
}
.footer__style-2 .footer__social-2 a:hover {
  color: var(--clr-theme-1);
}
.footer__style-2 .copyright__text p {
  font-weight: var(--bd-fw-bold);
  color: var(--clr-text-2);
}
.footer__style-3 .footer__title h3 {
  color: var(--clr-common-white);
}
.footer__style-3 .footer__link ul a {
  color: var(--clr-text-1);
  font-weight: var(--bd-fw-medium);
  font-size: 16px;
}
.footer__style-3 .footer__link ul a:hover {
  color: var(--clr-theme-3);
}
.footer__style-3 .footer__social-2 a {
  color: var(--clr-footer-2);
}
.footer__style-3 .footer__social-2 a:hover {
  color: var(--clr-theme-3);
}
.footer__style-3 .copyright__text p {
  color: var(--clr-text-1);
  font-weight: var(--bd-fw-bold);
}
.footer__style-4 .footer__title h3 {
  font-size: 20px;
  margin-bottom: 35px;
}
.footer__style-4 .footer__contact-2 span {
  display: block;
  color: var(--clr-common-heading);
}
.footer__style-4 .footer__contact-2 p a {
  color: var(--clr-common-heading);
  padding-right: 30px;
  padding-left: 5px;
  font-weight: var(--bd-fw-sbold);
}
.footer__style-4 .footer__contact-2 p a:hover {
  color: var(--clr-theme-3);
}
.footer__style-4 .footer__social-2 a {
  color: var(--clr-common-heading);
}
.footer__style-4 .footer__social-2 a:hover {
  color: var(--clr-theme-1);
}
.footer__style-5 .footer__title h3 {
  line-height: 1;
  margin-bottom: 30px;
  color: var(--clr-common-white);
}
.footer__style-5 .footer__link ul a {
  color: var(--clr-common-white);
}
.footer__style-5 .footer__newsletter P {
  color: var(--clr-common-white);
}
.footer__style-5 .footer__contact span {
  color: var(--clr-common-white);
}
.footer__style-5 .footer__contact p {
  color: var(--clr-common-white);
}
.footer__style-5 .footer__contact p a:hover {
  color: var(--clr-theme-3);
}
.footer__style-5 .footer__widget-content > p {
  color: var(--clr-common-white);
  opacity: 0.6;
}
.footer__style-5 .footer__note span {
  color: var(--clr-common-white);
  opacity: 0.6;
}
.footer__style-5 .footer__social-2 a {
  color: var(--clr-common-white);
}
.footer__style-5 .footer__social-2 a:hover {
  color: var(--clr-theme-3);
}
.footer__style-5 .copyright__text p {
  color: var(--clr-common-white);
}
.footer__style-5 .copyright__link ul li a {
  font-size: 16px;
  color: var(--clr-common-white);
}

.copyright__text p {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-common-heading);
}
.copyright__text p a:hover {
  color: var(--clr-theme-1);
}
.copyright__wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 32px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .copyright__wrapper {
    justify-content: center;
  }
}
.copyright__link ul {
  display: flex;
  align-items: center;
  gap: 70px;
  flex-wrap: wrap;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .copyright__link ul {
    gap: 15px;
  }
}
.copyright__link ul li {
  list-style: none;
}
.copyright__link ul li a {
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
}
.copyright__link ul li a:hover {
  color: var(--clr-theme-1);
}

/*# sourceMappingURL=main.css.map */