/*：源代码唯一下载地址: https://www.17sucai.com*//*-----------------------------------------------------------------------------------

    Theme Name: Eurtech - IT Solutions HTML5 Template
    bootstrapģ���:https://www.17sucai.com
    Description: Eurtech - IT Solutions HTML5 Template
    Version: 1.0
	Developer: Sagor Khan Omi

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

/************ 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. OFFCANVAS CSS START
	08. PRELODER CSS START
	09. SECTION TITLE CSS START
	10. ABOUT CSS START
	11. ACCORDIONG CSS START
	12.	BRAND CSS START
	13.	CONTACT CSS START
	14.	COUNTER CSS START
	15.	CTA CSS START
	16.	ERROR CSS START
	17. FAQ CSS START
	18. FEATURES CSS START
	19.	FOOTER CSS START
	20. HEADER CSS START
	21.	HERO CSS START
	22.	HISTORY CSS START
	20.	GALLERY CSS START
	21.	GOOGLE CSS START
	22.	HEADER CSS START
	23.	MEAN MENU CSS START
	24. NEWS CSS START
	25. NEWSLETTTER CSS START
	26.	PORTFOLIO CSS START
	27. PRICING CSS START
	28.	SERVICCE CSS START
	29. SKILL CSS STAR
	30. TEAM CSS STARTT
	30.	SKILL CSS START
	31. TESTIMONIAL CSS START
**********************************************/
/*----------------------------------------*/
/*  01. THEME DEFAULT CSS START
/*----------------------------------------*/
/*---------------------------------
 Google Fonts
---------------------------------*/
@import url("css2.css");
:root {
  /**
  @font family declaration
  */
  --bd-ff-body: 'Rubik', sans-serif;;
  --bd-ff-heading: 'Poppins', sans-serif;;
  --bd-ff-p: font-family: 'Rubik', sans-serif;;
  --bd-ff-fontawesome: "Font Awesome 6 Pro";
  /**
  @color declaration
  */
  --clr-common-white: #ffffff;
  --clr-common-black: #000;
  --clr-common-placeholder: #c6c6c6;
  --clr-common-heading: #1f242c;
  --clr-common-body-text: #1f242c;
  --clr-theme-1: #43baff;
  --clr-theme-2: #0a0a09;
  --clr-theme-3: #6f6abf;
  --clr-text-1: #999999;
  --clr-text-2: #aaaaaa;
  --clr-text-3: #141d38;
  --clr-text-4: #777777;
  --clr-text-5: #bdbdbd;
  --clr-text-6: #e4e4e5;
  --clr-text-7: #7b818d;
  --clr-text-8: #8f96a0;
  --clr-text-9: #a7adb8;
  --clr-bg-black-russian: #1a1e25;
  --clr-bg-grey-1: #f7f7f7;
  --clr-bg-grey-2: #f8f8f8;
  --clr-bg-grey-3: #f3f3f3;
  --clr-bg-grey-4: #f2f3f5;
  --clr-bg-charcoal: #232932;
  --clr-bg-footer: #1a1e25;
  --clr-border-1: #344166;
  --clr-border-2: #ebeff3;
  --clr-border-3: #f6f6f6;
  --clr-border-4: #22262e;
  --clr-border-5: #f4f4f4;
  --clr-border-6: #f9f9f9;
  --clr-border-7: #ececec;
  --clr-border-8: #5ca1df;
  --clr-border-9: #eeeeee;
  --clr-border-10: #ededed;
  --clr-border-11: #f0f0f5;
  --clr-footer-1: #9ba1ad;
  /**
  @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: 60px;
  --bd-fs-h2: 50px;
  --bd-fs-h3: 24px;
  --bd-fs-h4: 20px;
  --bd-fs-h5: 16px;
  --bd-fs-h6: 14px;
}

* {
  margin: 0;
  padding: 0;
  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-body-text);
  line-height: 26px;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bd-ff-heading);
  color: var(--clr-common-heading);
  margin-top: 0px;
  font-weight: var(--bd-fw-bold);
  line-height: 1.3;
  margin-bottom: 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;
  color: var(--clr-common-heading);
}

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;
}

li {
  list-style: none;
}

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

a,
.btn,
span,
p,
input,
select,
textarea,
li,
img,
svg path,
*::after,
*::before,
.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;
  border: 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 #e8e8e8;
}

/*----------------------------------------
    Body Overlay 
-----------------------------------------*/
.body-overlay {
  background-color: rgba(var(--clr-common-heading), 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  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;
}
.body-overlay:hover {
  cursor: pointer;
}

.body-overlay.opened {
  opacity: 1;
  visibility: visible;
}

/*----------------------------------------
    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-medium);
  font-size: 16px;
  border: 1px solid var(--clr-border-11);
  overflow: hidden;
  z-index: 5;
}
.bd-basic__pagination ul li a:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  color: var(--clr-common-heading);
  z-index: -1;
  opacity: 0;
}
.bd-basic__pagination ul li a:hover {
  background-position: 0% 100%;
  color: var(--clr-common-white);
}
.bd-basic__pagination ul li a:hover::after {
  opacity: 1;
  color: var(--clr-common-white);
  border-color: 1px solid 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: 14px;
  border: 1px solid var(--clr-border-11);
  overflow: hidden;
  color: var(--clr-common-white);
  z-index: 5;
}
.bd-basic__pagination ul li span:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  color: var(--clr-common-heading);
  background-position: 100% 100%;
  background-size: 300% 100%;
  z-index: -1;
}

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

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

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

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

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

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

/*----------------------------------------*/
/*  05. BUTTTON CSS START
/*----------------------------------------*/
.header__btn-1 {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--bd-fw-sbold);
  height: 50px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  color: var(--clr-common-heading);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  padding-left: 20px;
  padding-right: 60px;
  background-image: none;
  background-color: var(--clr-common-white);
  border: 2px solid #f2f2f2;
  z-index: 5;
}
.header__btn-1 i {
  background-color: var(--clr-theme-1);
  position: absolute;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 40px;
  color: var(--clr-common-white);
  font-size: 14px;
  right: 10px;
  top: 50%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header__btn-1::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-size: auto;
  background-size: 300% 100%;
  background-position: 100% 100%;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}
.header__btn-1:hover {
  color: var(--clr-common-white);
  border-color: transparent;
}
.header__btn-1:hover:after {
  opacity: 1;
  visibility: visible;
}
.header__btn-1:hover i {
  background: var(--clr-common-white);
  color: var(--clr-text-3);
}
.header__btn-1.s-2 {
  padding: 0 30px;
}

.header__btn-2 {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--bd-fw-sbold);
  height: 50px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  color: var(--clr-common-white);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  padding-left: 20px;
  padding-right: 60px;
  background-image: none;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-size: auto;
  background-size: 300% 100%;
  background-position: 100% 100%;
}
.header__btn-2 i {
  background-color: var(--clr-common-white);
  position: absolute;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 40px;
  color: var(--clr-common-heading);
  font-size: 14px;
  right: 10px;
  top: 50%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header__btn-2:hover {
  color: var(--clr-common-white);
  background-position: 0% 100%;
}

.it__btn-2 {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--bd-fw-sbold);
  height: 60px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  color: var(--clr-common-heading);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  padding-left: 20px;
  padding-right: 70px;
  background-image: none;
  background-position: 100% 100%;
  background-size: 300% 100%;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  color: var(--clr-common-white);
}
.it__btn-2 i {
  background: var(--clr-theme-1);
  position: absolute;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: var(--clr-common-heading);
  font-size: 14px;
  right: 10px;
  top: 50%;
  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-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.it__btn-2.radius {
  border-radius: 50px;
  padding-left: 30px;
  padding-right: 70px;
  font-size: 16px;
}
.it__btn-2.radius i {
  border-radius: 50px;
  right: 10px;
}
.it__btn-2:hover {
  background-position: 0% 100%;
  color: var(--clr-common-white);
}
.it__btn-2:hover i {
  background: var(--clr-common-white);
  color: var(--clr-text-3);
}

.it__btn-3 {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--bd-fw-sbold);
  height: 60px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  color: var(--clr-common-heading);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  padding-left: 20px;
  padding-right: 70px;
  background-image: none;
  background-color: var(--clr-common-white);
  border: 2px solid #f2f2f2;
  z-index: 5;
}
.it__btn-3 i {
  background-color: var(--clr-theme-1);
  position: absolute;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: var(--clr-common-white);
  font-size: 14px;
  right: 10px;
  top: 50%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  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;
  align-items: center;
  justify-content: center;
}
.it__btn-3::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-size: auto;
  background-size: 300% 100%;
  background-position: 100% 100%;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  -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;
}
.it__btn-3.radius {
  border-radius: 50px;
  padding-left: 30px;
  padding-right: 70px;
  font-size: 16px;
  -webkit-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.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;
  border: 0;
}
.it__btn-3.radius i {
  border-radius: 50px;
  right: 10px;
  background-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 1000);
}
.it__btn-3.radius i:hover:after {
  opacity: 1;
  visibility: visible;
}
.it__btn-3.radius span {
  transition: 0.5s;
}
.it__btn-3 .s-2 {
  font-size: 16px;
}
.it__btn-3:hover {
  color: var(--clr-common-white);
  border-color: transparent;
}
.it__btn-3:hover:after {
  opacity: 1;
  visibility: visible;
}
.it__btn-3:hover i {
  background: var(--clr-common-white);
  color: var(--clr-text-3);
}

.it__btn-4 {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--bd-fw-sbold);
  height: 60px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  border-radius: 6px;
  color: var(--clr-common-white);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  padding-left: 20px;
  padding-right: 100px;
  background-image: none;
  background-color: transparent;
  border: 2px solid #272d36;
  z-index: 5;
}
.it__btn-4 i {
  background-color: var(--clr-theme-1);
  position: absolute;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: var(--clr-common-white);
  font-size: 14px;
  right: 10px;
  top: 50%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.it__btn-4:hover {
  border-color: transparent;
  color: var(--clr-common-white);
}
.it__btn-4:hover::after {
  opacity: 1;
  visibility: visible;
}
.it__btn-4::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-size: auto;
  background-size: 300% 100%;
  background-position: 100% 100%;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}

.contact__btn {
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
  width: 100%;
  display: inline-flex;
  height: 60px;
  color: var(--clr-common-white);
  font-size: 14px;
  text-transform: uppercase;
  font-weight: var(--bd-fw-sbold);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  justify-content: center;
  align-items: 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;
}
.contact__btn.s-2 {
  -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;
  font-size: 16px;
}
.contact__btn:hover {
  background-position: 0% 100%;
  color: var(--clr-common-white);
}

.pricing__btn {
  padding: 0px 39px;
  height: 60px;
  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;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  border: none;
  color: var(--clr-common-white);
  background-position: 100% 100%;
  background-size: 300% 100%;
}
.pricing__btn:hover {
  background-position: 0% 100%;
  color: var(--clr-common-white);
}

.comment__btn {
  padding: 0px 30px;
  height: 60px;
  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;
  -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: uppercase;
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  border: none;
  color: var(--clr-common-white);
  background-position: 100% 100%;
  background-size: 300% 100%;
}
.comment__btn:hover {
  background-position: 0% 100%;
  color: var(--clr-common-white);
}

/*----------------------------------------*/
/* 06. CAROUSEL CSS START
/*----------------------------------------*/
.case__study-nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  gap: 15px;
  position: absolute;
  top: -125px;
  right: 0;
  z-index: 55;
  border: 2px solid var(--clr-border-2);
  padding: 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
@media (max-width: 575px) {
  .case__study-nav {
    display: none;
  }
}
.case__study-nav button {
  width: 40px;
  height: 40px;
  font-size: 18px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  background-color: var(--clr-border-2);
  color: var(--clr-common-heading);
}
.case__study-nav button:hover {
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.case-study__active-2.swiper-container {
  padding-bottom: 120px;
}
.case-study__active-2 .swiper-scrollbar-drag {
  width: 400px !important;
  background-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  box-shadow: 0px 8px 16px 0px rgba(104, 75, 177, 0.3) !important;
}
.case-study__active-2 .swiper-scrollbar {
  height: 10px !important;
  background: var(--clr-border-5);
  opacity: 1 !important;
  width: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  position: inherit !important;
  margin-top: 50px;
}

.portfolio__navigation {
  display: flex;
  gap: 10px;
  position: relative;
  z-index: 66;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .portfolio__navigation {
    display: none;
  }
}
.portfolio__navigation button {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  position: relative;
  background-color: var(--clr-bg-grey-4);
  color: var(--clr-common-heading);
  z-index: -1;
}
.portfolio__navigation button::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #141f2b, #141f2b, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
}
.portfolio__navigation button:hover {
  color: var(--clr-common-white);
}
.portfolio__navigation button:hover:after {
  opacity: 1;
}
.portfolio__navigation.style-2 button {
  background-color: var(--clr-common-white);
}

.testimonial__navigation {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: end;
  gap: 10px;
  position: relative;
  z-index: 55;
  margin-top: 25px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .testimonial__navigation {
    display: none;
  }
}
.testimonial__navigation button {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  position: relative;
  color: var(--clr-common-white);
  background-color: transparent;
  z-index: -1;
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.testimonial__navigation button::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 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;
  left: 0;
  top: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
}
.testimonial__navigation button:hover {
  background-color: transparent;
  color: var(--clr-common-white);
  border: 2px solid transparent;
}
.testimonial__navigation button:hover:after {
  opacity: 1;
}
.testimonial__navigation.style-2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #f5f5f5;
  padding: 10px 10px;
  border-radius: 50px;
  bottom: -30px;
}
.testimonial__navigation.style-2 button {
  width: 50px;
  height: 50px;
  background-color: var(--clr-common-white);
  color: var(--clr-common-heading);
}
.testimonial__navigation.style-2 button:hover {
  border-color: transparent;
  color: var(--clr-common-white);
}

/*----------------------------------------*/
/* 07. OFFCANVAS CSS START
/*----------------------------------------*/
.offcanvas__close button {
  height: 45px;
  width: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-common-white);
  font-size: 18px;
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  -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-black-russian);
}
@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-1);
}
.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-1);
  font-size: 14px;
  color: var(--clr-common-white);
}
.offcanvas__search input::placeholder {
  color: var(--clr-common-white);
}
.offcanvas__search input:focus {
  border-color: var(--clr-common-white);
}
.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-white);
}
.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-white);
}
.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-bg-black-russian);
}
.offcanvas__contact ul li:hover i::after {
  opacity: 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-white);
  position: relative;
  z-index: 5;
}
.offcanvas__contact-icon i::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  z-index: -1;
  opacity: 0;
}
.offcanvas__contact-text a {
  font-size: 16px;
  font-weight: 500;
  color: var(--clr-common-white);
}
.offcanvas__contact-text a:hover {
  color: var(--clr-theme-1);
}
.offcanvas__wallet-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-common-white);
  padding: 0;
  background-color: var(--clr-theme-1);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  padding: 5px 22px;
  padding-right: 24px;
}
.offcanvas__wallet-btn svg {
  width: 16px;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
  margin-right: 2px;
}
.offcanvas__wallet-btn svg path {
  fill: none;
}
.offcanvas__wallet-btn:hover {
  color: var(--clr-common-white);
  background-color: var(--clr-common-heading);
}
.offcanvas__wallet-btn:hover svg path {
  stroke: var(--clr-common-white);
}
.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;
}
.offcanvas__social ul li a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  z-index: -1;
  opacity: 0;
  top: 0;
  left: 0;
  z-index: -1;
}
.offcanvas__social ul li a:hover {
  color: var(--clr-common-white);
  border: 1px solid var(--clr-bg-black-russian);
}
.offcanvas__social ul li a:hover::after {
  opacity: 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-white);
  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.overlay-open {
  opacity: 0.5;
  visibility: visible;
  width: 100%;
}

.offcanvas-overlay {
  position: fixed;
  height: 100%;
  width: 0%;
  background: var(--clr-common-black);
  z-index: 900;
  top: 0;
  opacity: 0;
  visibility: hidden;
  right: 0;
  -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;
}

/*----------------------------------------*/
/*  09. SECTION TITLE CSS START
/*----------------------------------------*/
.section__title-one h2 {
  font-size: 50px;
  line-height: 1.2;
}
@media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section__title-one h2 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section__title-one h2 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-one h2 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .section__title-one h2 {
    font-size: 30px;
  }
}
.section__title-one.s-2 h2 {
  color: var(--clr-common-white);
}
.section__title-one.s-3 h2 {
  letter-spacing: -1px;
}
.section__title-one span {
  color: var(--clr-theme-1);
  font-size: 14px;
  margin-bottom: 15px;
  display: block;
  font-weight: var(--bd-fw-sbold);
  text-transform: capitalize;
  line-height: 1;
}

.section__title-two span {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  background-image: -webkit-linear-gradient(0deg, #0ed5fa 0%, #684cb1 100%);
  font-size: 14px;
  font-weight: var(--bd-fw-bold);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  padding: 0px 15px;
  height: 27px;
  line-height: 27px;
  display: inline-block;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  font-family: var(--bd-ff-heading);
  text-transform: capitalize;
  margin-bottom: 15px;
}
.section__title-two.s-2 h2 {
  letter-spacing: -1.5px;
  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-two.s-2 h2 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .section__title-two.s-2 h2 {
    font-size: 36px;
  }
}
.section__title-two.s-3 h2 {
  color: var(--clr-common-white);
  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-two.s-3 h2 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .section__title-two.s-3 h2 {
    font-size: 35px;
  }
}
.section__title-two.s-3 p {
  background-image: linear-gradient(to right, #141f2b, #141f2b, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
  color: var(--clr-common-white);
  font-size: 14px;
  font-weight: var(--bd-fw-bold);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  padding: 0px 15px;
  height: 27px;
  line-height: 27px;
  display: inline-block;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  font-family: var(--bd-ff-heading);
  text-transform: capitalize;
}

.section__subtitle-3 p {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  background-image: linear-gradient(90deg, #0ed5fa 0%, #684cb1 100%);
  font-weight: 500;
  margin-bottom: 20px;
  -webkit-text-fill-color: transparent;
}
.section__subtitle-3 span::after {
  position: absolute;
  content: "";
  left: 0;
  width: 5px;
  height: 5px;
  background: #0bd9fd;
  bottom: -9px;
  border-radius: 10px;
  z-index: 2;
}

.gradient__subtitle {
  display: inline-block;
  padding-right: 18px;
}
.gradient__subtitle::before {
  position: absolute;
  content: "";
  width: 40px;
  height: 1px;
  left: 100%;
  bottom: 0;
  transform: rotate(-45deg) translateY(5px) translateX(-5px);
  background-image: linear-gradient(to right, #0ed5fa, #684cb1);
  background-position: 100%;
  background-size: 300% 100%;
  transform-origin: left;
}
.gradient__subtitle::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, #0ed5fa, #684cb1, #0ed5fa, #684cb1);
  background-size: 350%;
}

.section__title-3.s-2 h2 {
  color: var(--clr-common-white);
}
.section__title-3 h2 {
  font-size: 50px;
}
@media 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) {
  .section__title-3 h2 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-3 h2 {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  .section__title-3 h2 {
    font-size: 36px;
  }
  .section__title-3 h2 br {
    display: none;
  }
}

/*----------------------------------------*/
/*  04. BREAADCRUMB CSS START
/*----------------------------------------*/
.breadcrumb__area {
  padding-top: 155px;
  padding-bottom: 155px;
  position: relative;
  z-index: 1;
}
.breadcrumb__area:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: transparent;
  opacity: 0.92;
  background-image: linear-gradient(55deg, #684CB1 0%, #0ED5FA 115%);
}
.breadcrumb__menu ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  gap: 25px;
  justify-content: center;
}
.breadcrumb__menu ul li {
  list-style: none;
  position: relative;
  line-height: 1;
}
.breadcrumb__menu ul li:not(:last-child):after {
  display: inline-block;
  content: "\f101";
  position: absolute;
  right: -19px;
  top: 50%;
  font-family: var(--bd-ff-fontawesome);
  color: var(--clr-common-white);
  font-size: 14px;
  transform: translateY(-50%);
}
.breadcrumb__menu ul li span {
  font-size: 16px;
  color: var(--clr-common-white);
  text-transform: capitalize;
}
.breadcrumb__menu ul li span a {
  color: var(--clr-common-white);
}
.breadcrumb__menu ul li span a:hover {
  color: var(--clr-theme-1);
}
.breadcrumb__title h2 {
  font-size: 60px;
  color: var(--clr-common-white);
  line-height: 1.1;
  margin-bottom: 20px;
  text-transform: capitalize;
}
@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;
  }
}

/*----------------------------------------*/
/*  02.ANIMATION CSS START
/*----------------------------------------*/
@-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);
  }
}
@keyframes popupBtn {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
/* ========= video-ripple ========== */
@keyframes video-ripple {
  0%, 35% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}
@-webkit-keyframes video-ripple {
  0%, 35% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}
/*----------------------------------------*/
/*  08. PRELODER CSS START
/*----------------------------------------*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
}

.preloader .color-1 {
  background-color: #43baff !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: #43baff;
  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. 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-black);
  border-top: 1px solid #344166;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
}
.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 #ebebeb !important;
  height: 30px;
  width: 30px;
  color: #fff;
  top: 0;
  font-weight: 400;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
  border: 1px solid var(--clr-theme-1) !important;
}

.mean-container .mean-nav ul li > a > i {
  display: none;
  font-size: 16px;
  font-weight: 500;
}

.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);
  border: 1px solid var(--clr-theme-1) !important;
}

.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);
  color: var(--clr-common-white);
}

/*----------------------------------------*/
/*  20. HEADER CSS START
/*----------------------------------------*/
.sticky {
  position: fixed;
  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: 300ms ease-in-out 0s normal none 1 running fadeInDown;
}
.sticky .header__widget-wrapper {
  display: none;
}
.sticky .header__widget-main {
  padding: 0px 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) {
  .sticky .header__widget-main {
    padding: 20px 0;
  }
}
.sticky .hidden__header {
  display: block;
}
.sticky .main-menu ul li a {
  padding: 38px 0;
}

.hidden__header {
  display: none;
}

.hidden__header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@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) {
  .hidden__header-inner {
    justify-content: end;
  }
}

.sticky.sticky__header-area {
  display: block !important;
  background-color: var(--clr-common-heading);
}

.sticky__header-area .bar-icon span {
  background: var(--clr-common-white);
}

.header__transparent {
  position: absolute;
  left: 0;
  margin: auto;
  top: 130px;
  width: 100%;
  z-index: 99;
  background: transparent;
}
.header__transparent-2 {
  position: absolute;
  left: 0;
  margin: auto;
  top: 0;
  width: 100%;
  z-index: 99;
  background: transparent;
}

.header-top__area {
  background-color: var(--clr-bg-black-russian);
}

.topbar__social ul {
  display: flex;
  align-items: center;
  gap: 15px;
}
.topbar__social ul li a {
  color: var(--clr-text-1);
  font-size: 14px;
}
.topbar__social ul li a:hover {
  color: var(--clr-theme-1);
}
.topbar__link {
  display: flex;
  align-items: center;
  gap: 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) {
  .topbar__link {
    gap: 30px;
  }
}
.topbar__link a {
  color: var(--clr-common-white);
  font-size: 14px;
}
.topbar__link a:hover {
  color: var(--clr-theme-1);
}
.topbar__link a:not(:last-child) {
  position: relative;
}
.topbar__link a:not(:last-child)::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 1px;
  background: var(--clr-border-1);
  left: 60px;
  top: 50%;
  transform: translateY(-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) {
  .topbar__link a:not(:last-child)::before {
    left: 40px;
  }
}
.topbar__text p {
  font-size: 14px;
  margin-bottom: 0;
}
.topbar__text strong {
  color: var(--clr-common-heading);
}
.topbar__style-2 .header-top__area {
  background: var(--clr-common-white);
  padding: 6.5px 1px;
  border-bottom: 1px solid var(--clr-border-5);
}
.topbar__style-2 .topbar__link {
  gap: 30px;
}
.topbar__style-2 .topbar__link a {
  color: var(--clr-common-heading);
  font-weight: var(--bd-fw-sbold);
}
.topbar__style-2 .topbar__link a:not(:last-child)::before {
  position: inherit;
}

.header__widget-main {
  padding: 20px 0;
}
.header__widget-main-2 {
  padding: 20px 40px;
  background-color: var(--clr-common-white);
  -webkit-box-shadow: 0px 0px 80px 20px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 80px 20px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0px 0px 80px 20px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0px 0px 80px 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 80px 20px rgba(0, 0, 0, 0.1);
}
@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__widget-main-2 {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
  }
}
@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__widget-main-2 {
    padding: 20px 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__widget-main-2 {
    padding: 20px 20px;
  }
}
.header__widget-wrapper {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__widget-wrapper {
    gap: 20px;
  }
}
.header__widget-info {
  display: flex;
  align-items: center;
  gap: 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) {
  .header__widget-info {
    display: none;
  }
}
.header__widget-content span {
  color: #aaa;
  line-height: 1;
  display: block;
  margin-bottom: 3px;
}
.header__widget-content h4 {
  font-size: 18px;
  font-weight: var(--bd-fw-bold);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__widget-content h4 {
    font-size: 16px;
  }
}
.header__widget-content h4 a:hover {
  color: var(--clr-theme-1);
}

.header__lang-selected {
  font-size: 14px;
  height: 40px;
  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;
  content: "\f063";
  font-family: var(--bd-ff-fontawesome);
  right: 20px;
  font-size: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.header__lang-list {
  background-color: var(--clr-common-white);
  position: absolute;
  top: 100%;
  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;
}
.header__lang:hover .header__lang-list {
  visibility: visible;
  opacity: 1;
}

.header__main-wrapper {
  -webkit-box-shadow: 0 -40px 40px 25px rgba(0, 0, 0, 0.04);
  -moz-box-shadow: 0 -40px 40px 25px rgba(0, 0, 0, 0.04);
  -ms-box-shadow: 0 -40px 40px 25px rgba(0, 0, 0, 0.04);
  -o-box-shadow: 0 -40px 40px 25px rgba(0, 0, 0, 0.04);
  box-shadow: 0 -40px 40px 25px rgba(0, 0, 0, 0.04);
  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;
}
.header__main-wrapper-2 {
  background-color: var(--clr-common-heading);
  border-radius: 0px 0px 6px 6px;
  padding: 0px 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__main-wrapper-2 {
    padding: 0px 20px;
  }
}
.header__main-wrapper-3 {
  -webkit-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
  -moz-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
  -ms-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
  -o-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
  background-color: var(--clr-common-white);
}
@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__main-wrapper-3 {
    padding: 20px 0;
  }
}
.header__toggle button {
  background-color: #ebebeb;
  -webkit-border-radius: 6px 0px 0px 6px;
  -moz-border-radius: 6px 0px 0px 6px;
  -o-border-radius: 6px 0px 0px 6px;
  -ms-border-radius: 6px 0px 0px 6px;
  border-radius: 6px 0px 0px 6px;
  width: 70px;
  height: 70px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header__toggle button i {
  font-size: 20px;
  position: relative;
  top: 4px;
}
.header__toggle.style-2 button {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  color: var(--clr-common-white);
}

@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__area-2 {
    background: var(--clr-common-white);
    -webkit-box-shadow: 0px 0px 80px 20px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 80px 20px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px 0px 80px 20px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px 0px 80px 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 80px 20px rgba(0, 0, 0, 0.1);
  }
}

.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: #000;
  display: inline-block;
}

.bar-icon span:nth-child(2) {
  margin-left: 9px;
  transition: 0.3s;
}

.bar-icon:hover span:nth-child(2) {
  margin-left: 0;
}

.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: 14px;
  color: var(--clr-common-heading);
  padding: 27.5px 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: uppercase;
  line-height: 1;
}
.main-menu ul li a:before {
  position: absolute;
  content: "";
  height: 0px;
  width: 2px;
  left: auto;
  right: 0;
  background: var(--clr-theme-1);
  top: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.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;
}
.main-menu ul li .submenu {
  position: absolute;
  top: 120%;
  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);
  -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;
  visibility: hidden;
  opacity: 0;
  z-index: 11;
}
.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-medium);
  text-transform: uppercase;
  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: 120%;
  top: 0;
  visibility: hidden;
  opacity: 0;
}
.main-menu ul li .submenu li:hover > a {
  color: var(--clr-theme-1);
}
.main-menu ul li .submenu li:hover > a::after {
  color: var(--clr-theme-1);
  -webkit-transform: translateY(-6px) rotate(45deg);
  -moz-transform: translateY(-6px) rotate(45deg);
  -ms-transform: translateY(-6px) rotate(45deg);
  -o-transform: translateY(-6px) rotate(45deg);
  transform: translateY(-6px) rotate(45deg);
}
.main-menu ul li .submenu li:hover > a::before {
  left: 0;
  right: auto;
  width: 100%;
}
.main-menu ul li .submenu li:hover > .submenu {
  left: 100%;
  visibility: visible;
  opacity: 1;
}
.main-menu ul li:hover > a {
  color: var(--clr-theme-1);
}
.main-menu ul li:hover > 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:hover > a:before {
  height: 20px;
}
.main-menu ul li:hover > .submenu {
  top: 100%;
  visibility: visible;
  opacity: 1;
}
.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);
  padding: 33px 0;
}
.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 {
  margin-right: 85px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu-3 {
    margin-right: 40px;
  }
}
.main-menu-3 ul li a {
  padding: 38px 0;
}

.search__button {
  position: relative;
}
.search__button a {
  height: 70px;
  width: 70px;
  background-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-common-white);
  -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;
}

.bd-search__toggle {
  position: absolute;
  top: 50px;
  right: 50%;
  padding: 16px 40px 40px 40px;
  background-color: var(--clr-theme-1);
  z-index: 555;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
}
.bd-search__form {
  position: absolute;
  top: 80px;
  right: 0;
  padding: 10px 30px 30px 30px;
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
  z-index: 9;
}
.bd-search__form input {
  height: 50px;
  width: 270px;
  background: transparent;
  padding-right: 25px;
  border: none;
  border-bottom: 1px solid var(--clr-common-white);
  color: var(--clr-common-white);
}
.bd-search__form input::placeholder {
  color: var(--clr-common-white);
  opacity: 1;
  font-size: 16px;
}
.bd-search__form input::selection {
  color: var(--clr-common-white);
  opacity: 1;
  font-size: 16px;
}
.bd-search__form input:focus {
  border-color: var(--clr-common-white);
}
.bd-search__form button {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  right: 30px;
}
.bd-search__form button i {
  color: var(--clr-common-white);
}

.search__open .bd-search__form {
  opacity: 1;
  visibility: visible;
}
.search__open .header-search__btn {
  opacity: 0;
  transform: scale(0);
}
.search__open .header-search__close {
  transform: scale(1);
  opacity: 1;
}
.search__button {
  position: relative;
}

.header-search__btn {
  font-size: 20px;
  cursor: pointer;
  -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;
  transform: scale(1);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.header-search__close {
  cursor: pointer;
  font-size: 20px;
  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;
  transform: scale(0);
}

/*----------------------------------------*/
/*  21. HERO CSS START
/*----------------------------------------*/
.hero__height {
  min-height: 144px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__height {
    min-height: 44px;
  }
}
.hero__height-2 {
  min-height: 970px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__height-2 {
    min-height: 680px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__height-2 {
    min-height: 600px;
  }
}
@media (max-width: 575px) {
  .hero__height-2 {
    min-height: 550px;
  }
}
.hero__bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__bg {
    background-position: left;
  }
}
.hero__content {
  margin-top: 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) {
  .hero__content {
    margin-top: 0;
  }
}
.hero__content > span {
  font-size: 20px;
  font-weight: var(--bd-fw-light);
  margin-bottom: 6px;
  display: block;
}
.hero__content h2 {
  font-size: 120px;
  line-height: 1.2;
  letter-spacing: -1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content h2 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__content h2 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__content h2 {
    font-size: 80px;
  }
}
@media (max-width: 575px) {
  .hero__content h2 {
    font-size: 50px;
  }
}
.hero__content p {
  margin-bottom: 45px;
  font-size: 18px;
  opacity: 70%;
}
.hero__content-2 h2 {
  font-size: 80px;
  line-height: 1.1;
  margin-bottom: 35px;
  letter-spacing: -2px;
}
@media 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) {
  .hero__content-2 h2 {
    font-size: 65px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__content-2 h2 {
    font-size: 55px;
  }
}
@media (max-width: 575px) {
  .hero__content-2 h2 {
    font-size: 40px;
  }
}
.hero__content-2 > span {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(0deg, #0ed5fa 0%, #684cb1 100%);
  font-size: 14px;
  font-weight: var(--bd-fw-bold);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  padding: 0px 22px;
  height: 26px;
  line-height: 26px;
  display: inline-block;
  margin-bottom: 20px;
  border-radius: 10px;
}
.hero__content-3 span {
  font-size: 80px;
  font-family: var(--bd-ff-heading);
  font-weight: var(--bd-fw-thin);
  margin-bottom: 25px;
  display: block;
  color: var(--clr-common-heading);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content-3 span {
    font-size: 65px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__content-3 span {
    font-size: 55px;
  }
}
@media (max-width: 575px) {
  .hero__content-3 span {
    font-size: 40px;
  }
}
.hero__content-3 h2 {
  font-size: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content-3 h2 {
    font-size: 65px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__content-3 h2 {
    font-size: 55px;
  }
}
@media (max-width: 575px) {
  .hero__content-3 h2 {
    font-size: 40px;
  }
}
.hero__btn-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 575px) {
  .hero__btn-wrapper {
    flex-wrap: wrap;
  }
}
.hero__btn-link ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero__video-intro {
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
  text-transform: uppercase;
  color: var(--clr-common-heading);
}
.hero__video-intro:hover {
  color: var(--clr-theme-1);
}
.hero__video-btn {
  position: relative;
  background: var(--clr-common-white);
  -webkit-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 16px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  text-align: center;
  z-index: 1;
  animation: pulseBig infinite 5s linear;
  -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;
}
.hero__video-btn i {
  color: var(--bd-theme-1);
  color: var(--clr-common-heading);
}
.hero__video-btn:hover {
  background-color: var(--clr-theme-1);
}
.hero__video-btn:hover i {
  color: var(--clr-common-white);
}
.hero__video-btn::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid #eaeaea;
  animation: popupBtn 1.8s linear infinite;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb {
    display: none;
  }
}
.hero__thumb img {
  position: absolute;
  right: 0;
  top: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb img {
    width: 680px;
    top: 170px;
  }
}
.hero__thumb-shape {
  z-index: -1;
}
.hero__overlay {
  position: relative;
  z-index: 5;
}
.hero__overlay:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--clr-common-white);
  opacity: 0.902;
  z-index: -1;
  top: 0;
}

.hero__contact-wrapper {
  padding: 55px 55px;
  background-color: var(--clr-common-white);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  position: relative;
  top: -15px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__contact-wrapper {
    padding: 55px 25px;
  }
}
@media (max-width: 575px) {
  .hero__contact-wrapper {
    padding: 55px 20px;
  }
}

.contact__input {
  position: relative;
}
.contact__input input {
  width: 100%;
  height: 50px;
  padding: 0 40px 0px 20px;
  border: solid 1px var(--clr-border-9);
  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;
  font-size: 14px;
}
.contact__input input::placeholder {
  font-size: 14px;
}
.contact__input input:focus {
  border: double 1px transparent;
  background-image: linear-gradient(#f9f9f9, #f9f9f9), linear-gradient(to right, #0ed5fa, #684cb1);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.contact__input textarea {
  width: 100%;
  height: 50px;
  padding: 10px 40px 10px 20px;
  border: solid 1px var(--clr-border-9);
  border-radius: 6px;
  outline: none;
  min-height: 120px;
  resize: 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;
}
.contact__input textarea::placeholder {
  font-size: 14px;
}
.contact__input textarea:focus {
  border: double 1px transparent;
  background-image: linear-gradient(#f9f9f9, #f9f9f9), linear-gradient(to right, #0ed5fa, #684cb1);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.contact__input i {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 14px;
  color: var(--clr-common-heading);
}

.banner__height {
  min-height: 505px;
  position: relative;
  margin-top: -185px;
  z-index: -1;
}

/*----------------------------------------*/
/*  10. ABOUT CSS START
/*----------------------------------------*/
.about__right-content {
  padding-left: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__right-content {
    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) {
  .about__right-content {
    padding-left: 0px;
  }
}
.about__left-thumb {
  position: relative;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__left-thumb {
    text-align: left;
  }
}
.about__left-thumb img {
  margin-top: 50px;
  max-width: 520px;
  width: 100%;
}
@media (max-width: 575px) {
  .about__left-thumb img {
    width: 100%;
  }
}
.about__experience-shape {
  position: absolute;
  top: 0px;
  left: 0;
}
.about__experience-content {
  background-color: #1f242c;
  border-radius: 6px;
  text-align: center;
  padding: 40px 34px;
  position: relative;
  z-index: 9;
}
.about__experience-content h2 {
  color: var(--clr-common-white);
  font-size: 80px;
  line-height: 1.1;
  margin-bottom: 0;
}
.about__experience-content span {
  color: #999;
}
.about__experience-content i {
  font-size: 100px;
  position: absolute;
  left: 0;
  bottom: 1px;
  color: #252a32;
  z-index: -1;
}
.about__quote-content {
  position: relative;
  margin-left: 21px;
}
.about__quote-content h3 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  margin-bottom: 13px;
}
.about__quote-content::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  background: var(--clr-theme-1);
  top: 2px;
  left: -20px;
}
.about__quote-author h4 {
  font-size: 14px;
  font-weight: 600;
}
.about__quote-author h4 span {
  color: var(--clr-text-1);
  font-weight: var(--bd-fw-normal);
}
.about__description-text p {
  margin-bottom: 20px;
}

.about__contact__item {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-top: 40px;
  border-top: 1px solid #f0f0f0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .about__contact__item {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.about__contact__item.style-2 {
  border-top: 0;
  padding-top: 20px;
  padding-bottom: 40px;
  border-bottom: 1px solid #f0f0f0;
}
.about__contact-icon {
  width: 60px;
  height: 60px;
  background: var(--clr-common-white);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  min-width: 60px;
}
.about__contact-content h4 a {
  font-size: 18px;
  text-transform: uppercase;
}
.about__contact-content h4 a:hover {
  color: var(--clr-theme-1);
}
.about-content span {
  font-size: 14px;
  color: var(--clr-text-2);
  text-transform: capitalize;
}
.about__features-wrapper {
  margin-left: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__features-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), only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__features-wrapper {
    margin-left: 0;
  }
}
@media (max-width: 575px) {
  .about__features-thumb {
    padding-top: 0;
  }
}
.about__features-shape {
  position: absolute;
  z-index: -1;
  top: -27px;
  left: -49px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__features-shape {
    left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .about__features-shape {
    top: 0;
  }
}
@media (max-width: 575px) {
  .about__features-shape {
    display: none;
  }
}

.about__wrapper-3 {
  margin-left: 70px;
  margin-right: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__wrapper-3 {
    margin-left: 25px;
    margin-right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__wrapper-3 {
    margin-left: 30px;
    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) {
  .about__wrapper-3 {
    margin-left: 0px;
    margin-right: 0;
  }
}
.about__author-info {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  padding-top: 30px;
  flex-wrap: wrap;
}
@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) {
  .about__author-info {
    justify-content: start;
  }
}
@media (max-width: 575px) {
  .about__author-info {
    justify-content: start;
    gap: 15px 20px;
  }
}
.about__author-content {
  text-align: right;
}
.about__author-content h4 {
  font-size: 18px;
}
.about__author-content span {
  font-size: 14px;
  color: var(--clr-text-2);
}

/*----------------------------------------*/
/*  14. COUNTER CSS START
/*----------------------------------------*/
.counter__bg-area {
  position: relative;
  border-radius: 10px;
  z-index: 5;
}
.counter__bg-area::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.902;
  background-image: linear-gradient(to right, #141f2b, #141f2b, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
  border-radius: 10px;
}
.counter__item {
  position: relative;
  z-index: 9;
}
.counter__item-two {
  position: relative;
  z-index: 2;
}
.counter__item-two h2 {
  font-size: 80px;
  line-height: 1;
  margin-bottom: 0;
  display: inline-block;
  position: relative;
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
  background-clip: border-box;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.counter__item-two i {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  text-align: center;
  line-height: 40px;
  background: var(--clr-common-white);
  color: var(--clr-body-heading);
  margin-bottom: 20px;
}
.counter__item-two p {
  margin-top: -20px;
  color: var(--clr-common-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
}
.counter__item-number h2 {
  font-size: 80px;
  color: var(--clr-common-white);
  line-height: 1.2;
  margin-bottom: 0;
  display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter__item-number h2 {
    font-size: 68px;
  }
}
@media (max-width: 575px) {
  .counter__item-number h2 {
    font-size: 58px;
  }
}
.counter__item-number p {
  color: var(--clr-common-white);
  font-size: 14px;
  line-height: 1.2;
  font-weight: var(--bd-fw-sbold);
}
.counter__item-number span {
  display: inline-block;
  font-size: 80px;
  color: #fff;
  font-weight: 700;
  position: absolute;
  top: 30px;
}
@media (max-width: 575px) {
  .counter__item-number span {
    font-size: 58px;
    top: 15px;
  }
}
.counter__item-three {
  position: relative;
}
.counter__item-three span {
  color: var(--clr-common-white);
  font-size: 80px;
  position: relative;
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
  background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: 700;
  position: absolute;
  top: -25px;
}

.counter__overlay {
  position: relative;
  z-index: 5;
}
.counter__overlay:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  top: 0;
  left: 0;
  opacity: 0.902;
  z-index: -1;
}
.counter__main-wrapper {
  border-radius: 10px;
  overflow: hidden;
  padding-top: 60px;
}
.counter-icon button {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  text-align: center;
  line-height: 40px;
  background: var(--clr-common-white);
  color: var(--clr-common-heading);
  margin-bottom: 20px;
}
.counter__number {
  position: relative;
}
.counter__number h2 {
  font-size: 80px;
  line-height: 1;
  margin-bottom: 0;
  display: inline-block;
  position: relative;
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
  background-clip: border-box;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .counter__number h2 {
    font-size: 65px;
  }
}
.counter__title p {
  color: var(--clr-common-white);
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  margin-bottom: 0;
  transform: translateY(-22px);
}

/*----------------------------------------*/
/*  15. CTA CSS START
/*----------------------------------------*/
.cta__title-wrapper {
  max-width: 615px;
  line-height: 1;
}
.cta__paragraph {
  color: var(--clr-text-9);
  margin-bottom: 0;
}
.cta__contact-inner {
  padding: 60px 0px 52px 0px;
  background-color: var(--clr-common-white);
  text-align: center;
  border-radius: 10px 10px 0px 0px;
}
.cta__contact-icon {
  margin-bottom: 35px;
}
.cta__contact-icon figure {
  position: relative;
}
.cta__contact-icon figure:before {
  position: absolute;
  content: "";
  width: 100px;
  height: 100px;
  border: 1px solid #f3f3f3;
  border-radius: 50px;
  left: 50%;
  transform: translate(-50%, -15px);
  z-index: 2;
}
.cta__contact-icon i {
  position: relative;
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 50px;
  color: var(--clr-common-white);
  font-size: 22px;
  background-image: linear-gradient(to right, #141f2b, #141f2b, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
  box-shadow: 0px 16px 32px 0px rgba(69, 129, 206, 0.3);
  z-index: 2;
}
.cta__contact-content span {
  font-size: 14px;
}
.cta__contact-content h3 a {
  font-size: 24px;
}
.cta__contact-content h3 a:hover {
  color: var(--clr-theme-1);
}

/*----------------------------------------*/
/*  28. SERVICCE CSS START
/*----------------------------------------*/
.speed__input {
  position: relative;
  display: block;
}
.speed__input-item {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0px 20px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .speed__input-item {
    display: block;
  }
}
.speed__input input {
  position: relative;
  height: 60px;
  background-color: var(--clr-common-white);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  border: none;
  padding-left: 50px;
  padding-right: 25px;
  border-radius: 6px;
  width: 100%;
}
.speed__input i {
  position: absolute;
  top: 22px;
  left: 20px;
  color: var(--clr-common-heading);
}

.pt-250 {
  padding-top: 250px;
}

.service__area-one {
  position: relative;
  margin-top: -130px;
}

.service__item-thumb img {
  margin-bottom: 35px;
}

.service__item-content h3 {
  color: var(--clr-common-white);
  font-size: 24px;
  margin-bottom: 20px;
  display: block;
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__item-content h3 {
    font-size: 20px;
  }
}
.service__item-content h3:hover {
  color: var(--clr-theme-1);
}

.service__item-wrapper {
  background: #262c35;
  position: relative;
  z-index: 1;
  padding: 50px 49px 45px 49px;
  -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) {
  .service__item-wrapper {
    padding: 50px 25px;
  }
}

.service__item-content p {
  color: #8f96a0;
  margin-bottom: 25px;
  font-size: 14px;
}

.service__item-one {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  position: relative;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  z-index: 1;
  padding: 2px;
}
.service__item-one::after {
  content: "";
  position: absolute;
  content: "";
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background: #262c35;
  background: linear-gradient(90deg, #61C6FF 0%, #6a48af 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;
  opacity: 0;
  visibility: hidden;
}
.service__item-one:hover::after {
  opacity: 1;
  visibility: visible;
}

.service__btn {
  color: #535b66;
}
.service__btn:hover {
  color: var(--clr-theme-1);
}

.service__features-item {
  position: relative;
}
.service__features-item:hover .service__circle {
  opacity: 1;
  visibility: visible;
}

.service__features-main {
  position: relative;
  z-index: 5;
  margin-top: -70px;
  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) {
  .service__features-main {
    margin-top: 0;
    padding-top: 50px;
  }
}
.service__features-main::before {
  position: absolute;
  content: "";
  height: calc(100% - 70px);
  width: 100%;
  background: var(--clr-common-white);
  -webkit-border-radius: 0px 0px 10px 10px;
  -moz-border-radius: 0px 0px 10px 10px;
  -o-border-radius: 0px 0px 10px 10px;
  -ms-border-radius: 0px 0px 10px 10px;
  border-radius: 0px 0px 10px 10px;
  top: 49px;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .service__features-main::before {
    height: calc(100% - 69px);
    top: 70px;
  }
}

.service__features-icon {
  background: var(--clr-common-white);
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  display: inline-block;
  border-radius: 50%;
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  position: relative;
  margin-bottom: 45px;
}

.service__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

.service__features-content h3 a {
  font-size: 22px;
  margin-bottom: 20px;
  display: block;
}
.service__features-content h3 a:hover {
  color: var(--clr-theme-1);
}

.service__features-content p {
  margin-bottom: 28px;
}

.service__features-btn a {
  color: var(--clr-text-1);
  font-weight: var(--bd-fw-sbold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #bdbdbd;
  -webkit-text-fill-color: transparent;
  position: relative;
  background-image: -webkit-linear-gradient(0deg, #bdbdbd 0%, #bdbdbd 100%);
}
.service__features-btn a:hover {
  background-image: -webkit-linear-gradient(0deg, #0ed5fa 0%, #684cb1 100%);
  -webkit-text-fill-color: transparent;
}

.service__features-item::after {
  position: absolute;
  content: "";
  height: 200px;
  width: 1px;
  right: 0;
  top: 67%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #eee 30.04%, #eee 70.04%, rgba(0, 0, 0, 0) 100%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__features-item::after {
    right: -15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__features-item::after {
    right: -4%;
    top: 50%;
  }
}

.row [class*=col-]:last-child .service__features-item::after {
  display: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .row [class*=col-]:nth-child(2) .service__features-item::after {
    display: none;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .row [class*=col-] .service__features-item::after {
    display: none;
  }
}

.pt-235 {
  padding-top: 235px;
}

.services__sapcing {
  margin-top: -120px;
  position: relative;
}

.services__slider-item {
  border-radius: 6px;
  padding-top: 40px;
  padding-bottom: 35px;
  padding-left: 77px;
  padding-right: 40px;
  background-color: var(--clr-bg-charcoal);
  position: relative;
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .services__slider-item {
    padding-left: 70px;
    padding-right: 20px;
  }
}

.services__slider-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.services__slider-content h3 a {
  font-size: 24px;
  color: var(--clr-common-white);
  margin-bottom: 10px;
  display: block;
  letter-spacing: -0.3px;
}
.services__slider-content h3 a:hover {
  color: var(--clr-theme-1);
}
@media (max-width: 575px), 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) {
  .services__slider-content h3 a {
    font-size: 20px;
  }
}
.services__slider-content p {
  color: var(--clr-text-7);
  margin-bottom: 0;
}

.services__area .services__slider-active {
  overflow: visible;
}

@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) {
  .skill__item-right {
    margin-top: 0;
  }
}

.company__service-wrapper {
  position: relative;
}
.company__service-wrapper::before {
  position: absolute;
  content: "";
  background-image: linear-gradient(90deg, #61C6FF 0%, #6a48af 100%);
  border-radius: 6px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  right: -1px;
  top: -1px;
  opacity: 0;
}
.company__service-wrapper:hover::before {
  opacity: 1;
}

.company__service-item {
  background: var(--clr-common-white);
  position: relative;
  z-index: 1;
  padding: 50px 30px 40px 30px;
  border-radius: 6px;
  border: 1px solid var(--clr-border-9);
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .company__service-item {
    padding: 50px 20px 40px 20px;
  }
}

.company__service-icon img {
  margin-bottom: 25px;
}

.company__service-title h3 a {
  font-size: 24px;
}
.company__service-title h3 a:hover {
  color: var(--clr-theme-1);
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .company__service-title h3 a {
    font-size: 20px;
  }
}

.service__details-main {
  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) {
  .service__details-main {
    padding-right: 0;
  }
}
.service__details-main > h3 {
  font-size: 36px;
  text-transform: capitalize;
}

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

.service__features {
  background: var(--clr-common-body-text);
  border-radius: 10px;
  padding: 45px 50px 50px;
}
@media (max-width: 575px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__features {
    padding: 45px 20px 50px;
  }
}
.service__features h4 {
  font-size: 24px;
  color: var(--clr-common-white);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.service__sub-image img {
  border-radius: 6px;
  width: 100%;
}

.service__feature-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 20px;
}
.service__feature-list span {
  font-size: 15px;
  font-weight: 500;
  color: var(--clr-common-white);
  background: var(--clr-bg-footer);
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-radius: 10px;
  display: inline-block;
  position: relative;
  width: calc((100% - 60px) / 3);
  white-space: nowrap;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .service__feature-list span {
    width: calc((100% - 30px) / 2);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service__feature-list span {
    width: calc((100% - 0px) / 1);
  }
}
.service__feature-list span:after {
  position: absolute;
  content: "\f00c";
  font-family: var(--bd-ff-fontawesome);
  font-size: 14px;
  font-weight: 300;
  color: #aab3bd;
  right: 20px;
}

.sidebar__service-list a {
  font-size: 14px;
  color: var(--clr-common-heading);
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  padding-left: 34px;
  display: inline-flex;
  align-items: center;
}
.sidebar__service-list a:before {
  position: absolute;
  content: "\f178";
  left: 0;
  font-family: var(--bd-ff-fontawesome);
  font-weight: 400;
  color: #afafaf;
  -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;
}
.sidebar__service-list a:hover {
  color: var(--clr-theme-1);
}
.sidebar__service-list a:hover:before {
  color: var(--clr-theme-1);
}
.sidebar__service-list li {
  border-bottom: 1px solid var(--clr-border-10);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.sidebar__service-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.sidebar__materials-list a {
  height: 60px;
  display: inline-block;
  border: 2px solid var(--clr-common-heading);
  border-radius: 10px;
  padding: 0 25px;
  line-height: 56px;
  width: 100%;
  color: var(--clr-common-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sidebar__materials-list a {
    padding: 0 13px;
    padding-right: 13px;
    padding-right: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.sidebar__materials-list a i {
  margin-right: 15px;
  font-size: 18px;
}
.sidebar__materials-list a:after {
  position: absolute;
  content: "\f019";
  font-family: var(--bd-ff-fontawesome);
  font-weight: 900;
  font-size: 16px;
  color: #c6c6c6;
  right: 20px;
}
.sidebar__materials-list a:hover:after {
  color: var(--clr-theme-1);
}
.sidebar__materials-list ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidber__adv-thumb {
  position: relative;
}
.sidber__adv-thumb img {
  width: 100%;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.sidber__adv-thumb:before {
  position: absolute;
  content: "300 * 400";
  width: 150px;
  height: 60px;
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--clr-common-white);
  border-radius: 6px 6px 0px 0px;
}

/*----------------------------------------*/
/*  29. SKILL CSS START
/*----------------------------------------*/
.skill__bg {
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: cover;
}

@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) {
  .skill__image {
    padding-left: 0;
  }
}
.skill-thumb {
  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) {
  .skill-thumb {
    margin-left: 0;
  }
}
.skill-progress {
  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) {
  .skill-progress {
    padding-right: 0;
  }
}
.skill-title h3 {
  font-size: 26px;
}
.skill__video-btn {
  width: 120px;
  height: 120px;
  background-color: var(--clr-common-white);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  -ms-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  -o-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
}
.skill__video-btn:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}
@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) {
  .skill__video-btn {
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
  }
}

.progress-skill-item {
  position: relative;
  margin-bottom: 26px;
}
.progress-skill-item:last-child {
  margin-bottom: 0;
}
.progress-skill-item h4 {
  font-size: 16px;
  text-transform: capitalize;
  margin-bottom: 18px;
}
.progress-skill-item .progress-count {
  position: absolute;
  top: 0px;
  right: 0;
  font-weight: var(--bd-fw-bold);
  font-family: var(--bd-ff-heading);
  color: var(--clr-common-heading);
}
.progress-skill-item .progress {
  height: 14px;
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
  border-bottom: 2px solid #ececec;
  padding-bottom: 4px;
}
.progress-skill-item .progress-bar {
  background-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  overflow: visible;
}

.skill__progress-wrapper {
  margin-left: 50px;
  margin-right: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .skill__progress-wrapper {
    margin-right: 0;
    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), only screen and (min-width: 992px) and (max-width: 1199px) {
  .skill__progress-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
.skill__singel-item {
  position: relative;
  border-radius: 10px;
  background: var(--clr-common-white);
  padding: 30px 37px 35px 37px;
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .skill__singel-item {
    padding: 30px 20px 35px 20px;
  }
}
.skill__singel-item:hover .skill__item-arrow i {
  color: var(--clr-theme-1);
}
.skill__singel-content h2 {
  font-size: 100px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  background-image: linear-gradient(to right, #0ed5fa 0%, #684cb1 45%);
  line-height: 1;
  margin-bottom: 20px;
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .skill__singel-content h2 {
    font-size: 80px;
  }
}
.skill__singel-content p {
  margin-bottom: 0;
}
.skill__singel-content h4 {
  margin-bottom: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .skill__singel-content h4 {
    font-size: 18px;
  }
}
.skill__item-arrow {
  position: absolute;
  right: 24px;
  top: 20px;
}
.skill__item-arrow i {
  position: relative;
  transform: rotate(45deg);
  font-size: 20px;
  color: var(--clr-text-6);
}
.skill__info-icon {
  width: 140px;
  display: flex;
  align-items: center;
}
.skill__info-icon img {
  margin-right: -50px;
  align-items: center;
}
.skill__info-title h4 {
  font-size: 18px;
  line-height: 28px;
  margin-top: 10px;
}
.skill__info-content {
  display: flex;
  gap: 50px;
}
@media (max-width: 575px) {
  .skill__info-content {
    gap: 0px;
    flex-wrap: wrap;
  }
}

.bd-skill__thumb {
  padding-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .bd-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) {
  .bd-skill__thumb {
    padding-left: 0;
  }
}
.bd-skill__thumb img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}

/*----------------------------------------*/
/*  26. PORTFOLIO CSS START
/*----------------------------------------*/
.portfolio__area .case-study-active {
  overflow: visible;
}

.case__study-thumb {
  position: relative;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.case__study-thumb::before {
  position: absolute;
  height: 0%;
  width: 100%;
  content: "";
  background: linear-gradient(rgba(32, 37, 45, 0) 0%, #1f242c 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;
}
.case__study-thumb:hover::before {
  height: 100%;
}
.case__study-thumb:hover .case__study-content {
  opacity: 1;
  visibility: visible;
  z-index: 5;
}
.case__study-thumb img {
  width: 100%;
}

.case__study-content {
  position: absolute;
  bottom: 35px;
  padding: 0px 35px;
  opacity: 0;
  visibility: hidden;
  z-index: 9;
  -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: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .case__study-content {
    padding: 0 20px;
  }
}
.case__study-content h3 a {
  font-size: 20px;
  color: var(--clr-common-white);
  display: block;
  margin-bottom: 10px;
}
.case__study-content h3 a:hover {
  color: var(--clr-theme-1);
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .case__study-content h3 a {
    font-size: 20px;
  }
}
.case__study-content p {
  color: var(--clr-common-white);
  margin-bottom: 15px;
  opacity: 60%;
}

.case__study-btn {
  color: var(--clr-common-white);
  font-weight: var(--bd-fw-sbold);
  font-size: 14px;
}
.case__study-btn:hover {
  color: var(--clr-theme-1);
}

.case-study-item:nth-child(2n+1) {
  margin-top: 40px;
}

.case__study-item {
  border-radius: 6px;
  overflow: hidden;
}

.portfolio__tab-wrapper {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 35px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__tab-wrapper {
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__tab-wrapper {
    justify-content: start;
  }
}

.porfolio__tab .nav-tabs {
  border-bottom: 0;
  display: flex;
  gap: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .porfolio__tab .nav-tabs {
    gap: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .porfolio__tab .nav-tabs {
    gap: 13px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .porfolio__tab .nav-tabs {
    gap: 5px;
  }
}
.porfolio__tab .nav-tabs .nav-link {
  margin-bottom: 0;
  border: 0;
  font-size: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .porfolio__tab .nav-tabs .nav-link {
    font-size: 14px;
  }
}
.porfolio__tab .nav-tabs .nav-link.active {
  background: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(0deg, #0ed5fa 0%, #684cb1 100%);
}
.porfolio__tab .nav-tabs button {
  font-size: 16px;
  font-weight: var(--bd-fw-bold);
  color: var(--clr-common-heading);
  text-transform: uppercase;
  font-family: var(--bd-ff-heading);
}
.porfolio__tab .nav-link {
  padding: 5px;
}

.porfolio__tab .nav-link:focus, .nav-link:hover {
  color: var(--clr-common-heading);
}

.portfolio__area .swiper-container {
  overflow: visible;
}

.portfolio__bg {
  position: relative;
  z-index: 5;
}

.portfolio__bg::before {
  position: absolute;
  content: "";
  height: 485px;
  width: 100%;
  background-color: var(--clr-bg-grey-1);
  top: 0;
  left: 0;
  z-index: -1;
}

.portfolio__button a {
  width: 50px;
  height: 50px;
  background: var(--clr-bg-grey-3);
  background-image: none;
  display: block;
  border-radius: 50px;
  text-align: center;
  line-height: 50px;
  color: var(--clr-common-heading);
  font-size: 20px;
  position: relative;
  z-index: 2;
}
.portfolio__button a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
}
.portfolio__button a:hover {
  color: var(--clr-common-white);
}
.portfolio__button a:hover::after {
  opacity: 1;
}

.portfolio__slider-item {
  position: relative;
}
.portfolio__slider-item:hover .portfolio__slider-action {
  opacity: 1;
  visibility: visible;
  bottom: -50px;
}

.portfolio__slider-action {
  position: absolute;
  bottom: 0px;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  padding: 24px 30px 29px 30px;
  left: 40px;
  right: 40px;
  bottom: -100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  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;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .portfolio__slider-action {
    padding: 24px 20px 29px 20px;
  }
}

.portfolio__slider-content {
  padding-right: 10px;
}
.portfolio__slider-content span {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  font-weight: var(--bd-fw-sbold);
  display: block;
  font-size: 14px;
}
.portfolio__slider-content h3 a {
  font-size: 24px;
}
.portfolio__slider-content h3 a:hover {
  color: var(--clr-theme-1);
}
@media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__slider-content h3 a {
    font-size: 20px;
  }
}

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

.portfolio__pagination .swiper-pagination-bullet {
  width: 25px;
  height: 4px;
  border-radius: 6px;
  margin: 0px 5px;
  background: #e7e7e7;
  opacity: 1;
  transition: 0.5s;
}
.portfolio__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  width: 35px;
}

.case__filter-button {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  gap: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .case__filter-button {
    gap: 45px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .case__filter-button {
    flex-wrap: wrap;
    gap: 15px 20px;
  }
}
.case__filter-button button {
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  border: none;
  background: none;
  font-size: 16px;
  -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;
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(0deg, #1f242c 0%, #1f242c 100%);
}
.case__filter-button button::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 15px;
  background: #dbdfe4;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .case__filter-button button::after {
    display: none;
    gap: 20px;
  }
}
.case__filter-button button:last-child::after {
  display: none;
}
.case__filter-button .active {
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(0deg, #0ed5fa 0%, #684cb1 100%);
}

.case__filter-button button::after:last-child {
  display: none;
}

.case__filter-wrapper {
  position: relative;
  z-index: 5;
  overflow: hidden;
  border-radius: 10px;
}
.case__filter-wrapper:hover .case__filter-content {
  overflow: visible;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.case__filter-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  text-align: center;
  padding: 0 30px;
  transform: scale(0.8);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  justify-content: center;
}
@media (max-width: 575px) {
  .case__filter-content {
    padding: 0 15px;
  }
}
.case__filter-content h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.3;
  font-size: 24px;
  color: var(--clr-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .case__filter-content h3 {
    font-size: 22px;
  }
}
@media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) {
  .case__filter-content h3 {
    font-size: 20px;
  }
}
.case__filter-content p {
  color: var(--clr-common-white);
}

.case__filter-overlay {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #0ed5fa 0%, #684cb1 100%);
  opacity: 0.9;
  z-index: -1;
  top: 0;
  left: 0;
}

.case__filter-btn {
  width: 55px;
  height: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  display: inline-block;
  background: var(--clr-common-white);
  border-radius: 50%;
  color: var(--clr-theme-1);
}
.case__filter-btn:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.case__details-thumb img {
  border-radius: 6px;
  width: 100%;
}

.case__details-wrapper p span {
  font-weight: 700;
  color: var(--clr-theme-1);
}

.case__details-wrapper p {
  line-height: 28px;
}

.case__details-wrapper p a {
  color: var(--clr-theme-1);
}

.case__details-wrapper p span {
  font-weight: 700;
  color: var(--clr-theme-1);
}

.case__sub-image {
  margin-top: 50px;
  margin-bottom: 30px;
}

.case__sub-image img {
  border-radius: 10px;
  width: 100%;
}

.case__meta-wrapper {
  background: var(--clr-common-white);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  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) {
  .case__meta-wrapper {
    margin: -60px 0px 50px 0px;
    padding: 30px 20px 30px;
  }
}

.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: 992px) and (max-width: 1199px) {
  .case__meta .case__list {
    gap: 25px;
  }
}
@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: 700;
  text-transform: uppercase;
  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__quote {
  background: #f6f6f6;
  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 {
  idth: 120px;
  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__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: uppercase;
  font-family: "Poppins", sans-serif;
}
.case__quote .quote__content .author-name span {
  color: var(--clr-theme-2);
  font-size: 16px;
}

.case__faq-wrapper h4 {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 17px;
}

.case__faq-wrapper {
  margin-bottom: 20px;
  margin-top: 50px;
}

.case__nav-wrapper {
  border-top: 1px solid #f0f0f0;
  padding-top: 30px;
  padding-bottom: 30px;
}

.case__nav-items {
  gap: 30px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .case__nav-items {
    flex-direction: column;
  }
}
.case__nav-items .case__thumb {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}
.case__nav-items .case__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case__nav-items .case__single {
  display: flex;
  align-items: center;
  gap: 14px;
}
.case__nav-items .case__single:last-child {
  flex-direction: row-reverse;
  text-align: right;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .case__nav-items .case__single:last-child {
    flex-direction: row;
    text-align: left;
  }
}
.case__nav-items .case__content span {
  font-size: 14px;
  line-height: 1;
}
.case__nav-items .case__title {
  font-size: 24px;
  margin-bottom: 0;
  text-transform: uppercase;
}
.case__nav-items .case__title:hover {
  color: var(--clr-theme-1);
}
.case__nav-items .dot__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .case__nav-items .dot__icon {
    display: none;
  }
}
.case__nav-items .dot__icon i {
  color: var(--clr-theme-1);
  font-size: 40px;
  position: relative;
  top: 5px;
}

/*----------------------------------------*/
/*  31. TESTIMONIAL CSS START
/*----------------------------------------*/
.testimonial-author-img {
  margin-right: 20px;
}

.testimonial__item-one-content {
  background-color: white;
  -webkit-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  -ms-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  -o-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  padding: 30px 40px 30px 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__item-one-content {
    padding: 30px 20px 30px 20px;
  }
}
.testimonial__item-one-content::before {
  position: absolute;
  width: 60px;
  height: 35px;
  background: var(--clr-common-white);
  bottom: -20px;
  left: 100px;
  content: "";
  clip-path: polygon(0 31%, 0% 100%, 100% 33%);
}
.testimonial__item-one-content p {
  font-size: 20px;
  line-height: 34px;
  margin-bottom: 0;
}
@media (max-width: 575px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__item-one-content p {
    font-size: 18px;
  }
}

.testimonial-author {
  margin-left: 40px;
  margin-top: 40px;
}

.testimonial-author-content h4 {
  font-size: 20px;
}
@media (max-width: 575px) {
  .testimonial-author-content h4 {
    font-size: 18px;
  }
}
.testimonial-author-content span {
  font-size: 14px;
  text-transform: capitalize;
}

.testimonial__item {
  background: #14171d;
  padding: 45px 50px 50px 50px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -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;
  overflow: hidden;
  position: relative;
  z-index: 5;
}
@media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__item {
    padding: 30px 20px 35px 20px;
  }
}
.testimonial__item::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  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;
  z-index: -1;
  background-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  opacity: 0;
}
.testimonial__rating {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(13deg, #0ed5fa, #684cb1, #684cb1, #0ed5fa);
  margin-bottom: 15px;
  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;
}
.testimonial__text p {
  font-size: 20px;
  color: #888e9a;
  line-height: 34px;
  margin-bottom: 30px;
}
.testimonial__avater-info h4 {
  color: var(--clr-common-white);
}
@media (max-width: 575px) {
  .testimonial__avater-info h4 {
    font-size: 18px;
  }
}
.testimonial__avater-info span {
  font-size: 14px;
  color: var(--clr-text-7);
  text-transform: capitalize;
}
.testimonial__quote-icon img {
  position: absolute;
  bottom: 20px;
  right: 20px;
  opacity: 0;
}

.testimonial__active .swiper-slide-active .testimonial__item::before {
  opacity: 1;
}

.testimonial__active .swiper-slide-active .testimonial__text p {
  color: var(--clr-common-white);
}

.testimonial__active .swiper-slide-active .testimonial__rating {
  background-image: linear-gradient(13deg, #fff, #fff, #fff, #fff);
}

.testimonial__active .swiper-slide-active .testimonial__avater-info span {
  color: var(--clr-common-white);
}

.testimonial__active .swiper-slide-active .testimonial__avater-info span {
  color: var(--clr-common-white);
}

.testimonial__active .swiper-slide-active .testimonial__quote-icon img {
  opacity: 1;
}

.testimonial__main-wrapper {
  border-radius: 10px;
  padding: 65px 80px 105px 80px;
  background: var(--clr-common-white);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  margin-top: -140px;
  position: relative;
}
@media (max-width: 575px) {
  .testimonial__main-wrapper {
    padding: 65px 40px 105px 40px;
  }
}

.testimonial__text-2 p {
  font-size: 20px;
  line-height: 34px;
  margin-bottom: 33px;
  max-width: 325px;
}
@media (max-width: 575px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__text-2 p {
    font-size: 18px;
  }
}

.testimonial__item-2 .testimonial__avater-info h4 {
  color: var(--clr-common-heading);
}

/*----------------------------------------*/
/*  25. NEWSLETTTER CSS START
/*----------------------------------------*/
.newslatter__wrapper {
  background-color: var(--clr-common-white);
  -webkit-box-shadow: 0px -16px 32px 0px rgba(0, 0, 0, 0.04);
  -moz-box-shadow: 0px -16px 32px 0px rgba(0, 0, 0, 0.04);
  -ms-box-shadow: 0px -16px 32px 0px rgba(0, 0, 0, 0.04);
  -o-box-shadow: 0px -16px 32px 0px rgba(0, 0, 0, 0.04);
  box-shadow: 0px -16px 32px 0px rgba(0, 0, 0, 0.04);
  padding: 60px 60px 60px 60px;
  position: relative;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 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) {
  .newslatter__wrapper {
    padding: 55px 20px 50px 20px;
  }
}
.newslatter__wrapper:before {
  position: absolute;
  content: "";
  width: calc(100% - 20px);
  height: 20px;
  left: 50%;
  bottom: -10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  z-index: -1;
  background-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  padding: 0px 20px;
  -webkit-transform: translatex(-50%);
  -moz-transform: translatex(-50%);
  -ms-transform: translatex(-50%);
  -o-transform: translatex(-50%);
  transform: translatex(-50%);
}
.newslatter__area {
  position: relative;
  margin-bottom: -95px;
  z-index: 55;
}
.newslatter__form-wrapper {
  padding-left: 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) {
  .newslatter__form-wrapper {
    padding-left: 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) {
  .newslatter__form-wrapper {
    margin-top: 30px;
  }
}
.newslatter__input {
  position: relative;
}
.newslatter__input i {
  position: absolute;
  top: 22px;
  left: 20px;
  color: var(--bd-ff-heading);
}
.newslatter__input button {
  padding: 0px 35px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -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;
  -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;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
  color: var(--clr-common-white);
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
}
.newslatter__input button:hover {
  background-position: 0% 100%;
  color: var(--clr-common-white);
}
@media (max-width: 575px) {
  .newslatter__input button {
    position: static;
    margin-top: 45px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
  }
}
.newslatter__input input {
  border: 2px solid var(--clr-border-3);
  height: 60px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  width: 100%;
  position: relative;
  padding-left: 42px;
  padding-right: 180px;
}
@media (max-width: 575px) {
  .newslatter__input input {
    padding-right: 20px;
  }
}

/*----------------------------------------*/
/*  24. NEWS CSS START
/*----------------------------------------*/
.news__singel-item:hover .news__item-thumb img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}
.news__item-thumb {
  position: relative;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  overflow: hidden;
}
.news__item-thumb img {
  width: 100%;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.news__item-meta ul li {
  list-style: none;
  display: inline-block;
  margin-right: 25px;
  font-size: 14px;
}
.news__item-meta ul li i {
  margin-right: 5px;
}
.news__item-meta li span {
  color: var(--clr-text-4);
  text-transform: capitalize;
}
.news__item-meta li a {
  color: var(--clr-text-4);
  text-transform: capitalize;
  line-height: 28px;
}
.news__item-meta li a:hover {
  color: var(--clr-theme-1);
}
.news__title a {
  font-size: 24px;
  line-height: 1.4;
}
@media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) {
  .news__title a {
    font-size: 20px;
  }
}
.news__title a:hover {
  color: var(--clr-theme-1);
}
.news__tag {
  position: absolute;
  top: 30px;
  left: 30px;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
  color: var(--clr-common-white);
  padding: 2px 12px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
}
.news__tag:hover {
  background-position: 0% 100%;
  color: var(--clr-common-white);
}

.news__item-2 {
  -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-2:hover .news__content-2 {
  border-left: 2px solid var(--clr-common-white);
  border-right: 2px solid var(--clr-common-white);
  border-bottom: 2px solid var(--clr-common-white);
  -webkit-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  -ms-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  -o-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
}
.news__item-2:hover .news__thumb-2 img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}
.news__meta {
  display: flex;
  background-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  border-radius: 50px;
  padding: 7px 20px;
  width: calc(100% - 76px);
  position: absolute;
  top: -20px;
  left: 50%;
  flex-wrap: wrap;
  transform: translateX(-50%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .news__meta {
    width: calc(100% - 30px);
  }
}
@media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) {
  .news__meta {
    width: calc(100% - 15px);
  }
}
.news__meta span {
  color: var(--clr-common-white);
  position: relative;
  padding-right: 20px;
  margin-right: 20px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  text-transform: uppercase;
}
@media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .news__meta span {
    padding-right: 10px;
    margin-right: 10px;
  }
}
.news__meta span i {
  margin-right: 8px;
}
.news__meta span a:hover {
  color: var(--clr-theme-1);
}
.news__meta span:last-child {
  margin-right: 0;
  padding-right: 0;
}
.news__meta span:not(:last-child)::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 1px;
  background-color: var(--clr-border-8);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.news__content-2 {
  position: relative;
  border-radius: 0px 0px 10px 10px;
  padding: 55px 40px 35px 40px;
  border-left: 2px solid var(--clr-border-5);
  border-right: 2px solid var(--clr-border-5);
  border-bottom: 2px solid var(--clr-border-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;
}
@media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .news__content-2 {
    padding: 55px 20px 35px 20px;
  }
}
.news__content-2 h3 a {
  margin-bottom: 10px;
  display: block;
}
.news__content-2 h3 a:hover {
  color: var(--clr-theme-1);
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .news__content-2 h3 a {
    font-size: 20px;
  }
}
.news__content-2 p {
  margin-bottom: 0;
}
.news__thumb-2 {
  overflow: hidden;
  -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;
}
.news__thumb-2 img {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.news__btn {
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
  text-transform: uppercase;
  background-image: -webkit-linear-gradient(0deg, #c8c8c8 0%, #c8c8c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 1s ease-in-out;
}
.news__btn:hover {
  background-image: -webkit-linear-gradient(0deg, #0ed5fa 0%, #684cb1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 1s ease-in-out;
}

.news__style-3 .news__tag {
  right: 30px;
  left: auto;
  top: -50px;
}

.news__item-content {
  position: relative;
}

.blog__main-wrapper {
  margin-right: 60px;
  position: relative;
}
@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) {
  .blog__main-wrapper {
    margin-right: 0px;
  }
}
.blog__main-wrapper:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background: var(--clr-border-10);
  right: -45px;
  top: 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) {
  .blog__main-wrapper:after {
    display: none;
  }
}
.blog__item {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -moz-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -ms-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -o-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
}
.blog__item:hover .blog__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);
}
.blog__content {
  padding: 30px;
  padding-bottom: 35px;
}
.blog__tag {
  margin-bottom: 13px;
}
.blog__tag-2 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.blog__tag-2 a {
  padding: 2px 13px;
  font-size: 15px;
  color: var(--clr-text-4);
  background: var(--clr-common-white);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  text-transform: capitalize;
  text-transform: capitalize;
  border: 1px solid #EFEFEF;
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.blog__tag-2 a::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
  opacity: 0;
  visibility: hidden;
}
.blog__tag-2 a:hover {
  color: var(--clr-common-white);
  background: var(--clr-theme-1);
}
.blog__tag-2 a:hover:after {
  opacity: 1;
  visibility: visible;
}
.blog__author-thumb img {
  width: 35px;
  height: 35px;
  border: 2px solid var(--clr-common-white);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  -moz-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  -ms-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  -o-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
}
.blog__author-thumb-3 img {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.blog__author-3 {
  padding: 30px;
  padding-bottom: 35px;
  padding-right: 60px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
@media (max-width: 575px) {
  .blog__author-3 {
    padding-right: 30px;
  }
}
@media (max-width: 575px) {
  .blog__author-content {
    margin-top: 25px;
  }
}
.blog__author-content h4 {
  font-size: 16px;
  margin-bottom: 0;
}
.blog__author-content span {
  display: inline-block;
  margin-bottom: 10px;
}
.blog__author-content p {
  font-size: 20px;
  line-height: 1.2;
  color: var(--clr-common-black);
  margin-bottom: 0;
}
.blog__text h3 {
  font-size: 30px;
  margin-bottom: 12px;
}
.blog__text p {
  font-size: 18px;
  line-height: 28px;
  color: var(--clr-text-4);
  margin-bottom: 27px;
}
.blog__quote {
  padding: 40px 50px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
@media (max-width: 575px) {
  .blog__quote {
    padding: 20px 30px;
  }
}
.blog__quote blockquote {
  margin-bottom: 0;
}
.blog__quote p {
  font-size: 24px;
  color: var(--clr-common-black);
  line-height: 1.3;
  margin-bottom: 25px;
}
.blog__quote h4 {
  font-size: 20px;
  padding-left: 30px;
  position: relative;
  margin-bottom: 0;
}
.blog__quote h4::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%);
  width: 19px;
  height: 2px;
  background: var(--clr-common-black);
}
.blog__quote img.quote {
  position: absolute;
  bottom: -34px;
  right: 50px;
}
.blog__link p {
  font-size: 26px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--clr-common-black);
}
@media (max-width: 575px) {
  .blog__link p {
    font-size: 24px;
  }
}
.blog__link p a {
  color: var(--clr-theme-1);
}
.blog__img img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.blog__social h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0px;
  margin-right: 10px;
}
.blog__social ul li {
  display: inline-block;
  margin-left: 5px;
}
.blog__social ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  text-align: center;
  font-size: 16px;
  color: var(--clr-common-black);
  background: var(--clr-bg-grey-1);
  color: var(--clr-common-black);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  z-index: 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;
}
.blog__social ul li a:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
  z-index: -1;
  opacity: 0;
}
.blog__social ul li a:hover {
  color: var(--clr-common-white);
}
.blog__social ul li a:hover::after {
  opacity: 1;
}
.blog__line {
  margin-bottom: 28px;
  width: 100%;
  height: 1px;
  background: var(--clr-border-10);
}
.blog__comment h3 {
  font-size: 26px;
  margin-bottom: 35px;
}
.blog__comment-input input, .blog__comment-input textarea {
  width: 100%;
  height: 56px;
  line-height: 56px;
  border: 2px solid var(--clr-bg-grey-2);
  background: var(--clr-bg-grey-2);
  color: var(--clr-common-black);
  font-size: 15px;
  outline: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  margin-bottom: 20px;
  padding: 0 24px;
  border: 1px solid transparent;
}
.blog__comment-input input::placeholder, .blog__comment-input textarea::placeholder {
  font-size: 15px;
  color: var(--clr-text-4);
}
.blog__comment-input input:focus, .blog__comment-input textarea:focus {
  border: double 1px transparent;
  background-image: linear-gradient(#f9f9f9, #f9f9f9), linear-gradient(to right, #0ed5fa, #684cb1);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.blog__comment-input textarea {
  height: 180px;
  resize: none;
  line-height: 1.2;
  padding: 23px;
  padding-top: 19px;
  border: 1px solid transparent;
  margin-bottom: 13px;
}
.blog__comment-input textarea:focus {
  border: double 1px transparent;
  background-image: linear-gradient(#f9f9f9, #f9f9f9), linear-gradient(to right, #0ed5fa, #684cb1);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.blog__comment-agree {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.blog__comment-agree input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  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;
}
.blog__comment-agree input:checked {
  position: relative;
  background-color: var(--clr-theme-1);
  border-color: transparent;
}
.blog__comment-agree input:checked::after {
  box-sizing: border-box;
  content: "\f00c";
  position: absolute;
  font-family: var(--bd-ff-fontawesome);
  font-size: 14px;
  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%);
}
.blog__comment-agree input:hover {
  cursor: pointer;
}
.blog__comment-agree label {
  color: var(--clr-text-4);
}
.blog__comment-agree label a {
  color: var(--clr-common-black);
  font-weight: 600;
  padding-left: 4px;
}
.blog__comment-agree label a:hover {
  color: var(--clr-theme-1);
}
.blog__comment-agree label:hover {
  cursor: pointer;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__sidebar {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__sidebar {
    padding-left: 0;
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog__sidebar {
    padding-left: 0;
    margin-top: 50px;
  }
}
@media (max-width: 575px) {
  .blog__sidebar {
    padding-left: 0;
    margin-top: 50px;
  }
}
.blog__meta-3 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.sidebar__widget-title {
  font-size: 20px;
  padding-bottom: 16px;
  position: relative;
}
.sidebar__widget-title::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background: var(--clr-border-10);
  left: 0;
  bottom: 0;
}
.sidebar__widget-title::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 1px;
  background: var(--clr-theme-1);
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
}
.sidebar__search input {
  width: 100%;
  height: 60px;
  line-height: 56px;
  background: var(--clr-bg-grey-2);
  border: 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding-left: 20px;
  padding-right: 72px;
}
.sidebar__search input::placeholder {
  color: var(--clr-text-4);
}
.sidebar__search button {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -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;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
  font-size: 14px;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  border: none;
  color: var(--clr-common-white);
  background-position: 100% 100%;
  background-size: 300% 100%;
}
.sidebar__search button:hover {
  color: var(--clr-common-white);
}
.sidebar__category ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.sidebar__category ul li a {
  font-size: 16px;
  color: var(--clr-text-4);
  padding-left: 20px;
  position: relative;
}
.sidebar__category ul li a::after {
  position: absolute;
  content: "\f054";
  font-family: var(--bd-ff-fontawesome);
  left: 0;
  top: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-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;
  font-size: 14px;
}
.sidebar__category ul li a:hover {
  color: var(--clr-theme-1);
}
.sidebar__category ul li a:hover::after {
  left: 5px;
}
.sidebar__tag {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}
.sidebar__tag a {
  display: inline-block;
  padding: 3px 13px;
  font-size: 15px;
  color: var(--clr-text-4);
  background: var(--clr-common-white);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #EFEFEF;
  margin-bottom: 10px;
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.sidebar__tag a::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
  opacity: 0;
  visibility: hidden;
}
.sidebar__tag a:hover {
  color: var(--clr-common-white);
  background: var(--clr-theme-1);
}
.sidebar__tag a:hover:after {
  opacity: 1;
  visibility: visible;
}

.rc__post:not(:last-child) {
  margin-bottom: 30px;
}
.rc__meta span {
  color: var(--clr-text-4);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  display: inline-block;
  margin-bottom: 10px;
}
.rc__thumb img {
  width: 80px;
  height: 80px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.rc__title {
  font-size: 16px;
  color: var(--clr-common-black);
  margin-bottom: 0px;
  font-weight: 600;
}
.rc__title a:hover {
  color: var(--clr-theme-1);
}

.latest__comments h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 35px;
}
.latest__comments ul li {
  margin-bottom: 15px;
}
.latest__comments ul li .children {
  margin-left: 100px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .latest__comments ul li .children {
    margin-left: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .latest__comments ul li .children {
    margin-left: 50px;
  }
}
.latest__comments ul li .children-2 {
  margin-left: 100px;
  margin-top: 10px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .latest__comments ul li .children-2 {
    margin-left: 0px;
  }
}

.comments__box {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding: 30px 30px;
}

.comments__avatar img {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

@media (max-width: 575px) {
  .comments__text {
    margin-left: 0;
    margin-top: 15px;
  }
}
.comments__text p {
  font-size: 16px;
  color: var(--clr-text-4);
  margin-bottom: 15px;
}

.comments__replay {
  margin-top: 10px;
}
.comments__replay a {
  color: var(--clr-theme-1);
  height: 25px;
  padding: 0 8px;
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.comments__replay a:hover {
  color: var(--clr-common-white);
  background: var(--clr-theme-1);
}

.avatar__name {
  margin-bottom: 5px;
}
.avatar__name h5 {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 0;
}
.avatar__name span {
  font-size: 14px;
  color: var(--clr-text-4);
}

/*----------------------------------------*/
/*  18. FEATURES CSS START
/*----------------------------------------*/
.features__thunb-warpper {
  position: relative;
  z-index: 5;
}
.features__thunb-warpper img {
  margin-left: -310px;
}
@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) {
  .features__thunb-warpper img {
    margin-left: 0;
    width: 100%;
  }
}

.custom__container {
  max-width: 1530px;
}

.features__thunb-1 {
  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) {
  .features__thunb-1 {
    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) {
  .features__thunb-1 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
  }
}

.features__thunb-2 {
  position: absolute;
  left: 0px;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .features__thunb-2 {
    position: static;
    margin-top: -120px;
    transform: translate(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) {
  .features__thunb-2 {
    width: 100%;
  }
}

.features__content-wrapper {
  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) {
  .features__content-wrapper {
    margin-right: 0px;
  }
}

/*----------------------------------------*/
/*  11. ACCORDIONG CSS START
/*----------------------------------------*/
.custom-gx-5 {
  --bs-gutter-x: 50px;
}
@media (max-width: 575px) {
  .custom-gx-5 {
    --bs-gutter-x: 0px;
  }
}

.bd-faq__accordion .accordion-button {
  font-size: 18px;
  font-weight: var(--bd-fw-bold);
  padding-right: 55px;
  height: 60px;
  padding-left: 30px;
  background: var(--clr-common-white);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
}
@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-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  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%;
  height: 40px;
  width: 40px;
  background-color: var(--clr-common-white);
  color: var(--clr-common-heading);
  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-common-white);
  content: "+";
  position: absolute;
  right: 10px;
  top: 50%;
  height: 40px;
  width: 40px;
  background-color: var(--clr-common-heading);
  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: 400;
  -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%;
}
@media (max-width: 575px) {
  .bd-faq__accordion .accordion-button::after {
    right: 15px;
  }
}
.bd-faq__accordion .accordion-item {
  margin-bottom: 20px;
  border: 0;
}
.bd-faq__accordion .accordion-item:first-of-type .accordion-button {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
  -moz-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
  -ms-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
  -o-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
}
.bd-faq__accordion .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
}
.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;
}

/*----------------------------------------*/
/*  22. HISTORY CSS START
/*----------------------------------------*/
.history__thunb img {
  border-radius: 10px;
}

.history__tab .nav-tabs {
  border-bottom: 0;
  border-bottom: 0;
  justify-content: center;
  gap: 155px;
  display: inline-flex;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .history__tab .nav-tabs {
    gap: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .history__tab .nav-tabs {
    gap: 70px;
  }
}
@media (max-width: 575px) {
  .history__tab .nav-tabs {
    gap: 45px 60px;
  }
}
.history__tab .nav-tabs .nav-link {
  margin-bottom: 0;
  border: 0;
  font-size: 16px;
  font-weight: var(--bd-fw-bold);
}
.history__tab .nav-tabs::before {
  position: absolute;
  content: "";
  width: calc(100% - 35px);
  height: 2px;
  background: #f3f3f3;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 575px) {
  .history__tab .nav-tabs::before {
    width: calc(90% - 35px);
  }
}
@media (max-width: 575px) {
  .history__tab .nav-tabs::before {
    gap: 60px;
  }
}
.history__tab .nav-link {
  position: relative;
  color: #cdcecf;
  padding: 0;
  border: none;
  font-weight: 500;
}
.history__tab .nav-link::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50px;
  left: 50%;
  transform: translateX(-50%);
  top: -23px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #1f242c, #1f242c) border-box;
  border: 2px solid transparent;
  border-radius: 50px;
}
.history__tab .nav-link.active::after {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #0ed5fa, #684cb1) border-box;
  border: 2px solid transparent;
  border-radius: 50px;
}

.history__content-wrapper {
  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) {
  .history__content-wrapper {
    margin-right: 0px;
  }
}
.history__content h2 {
  font-size: 40px;
  margin-bottom: 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), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .history__content h2 br {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .history__content h2 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .history__content h2 {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .history__content h2 {
    font-size: 26px;
  }
}
.history__content p {
  max-width: 550px;
  margin-bottom: 35px;
}
.history__thunb {
  position: relative;
}
@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) {
  .history__thunb-wrapper {
    margin-right: 0;
  }
}

.play__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.play__btn a {
  width: 100px;
  height: 100px;
  background-color: var(--clr-common-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
  font-size: 20px;
  border-radius: 50%;
  color: var(--clr-common-heading);
}
.play__btn a:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

/*----------------------------------------*/
/*  27. PRICING CSS START
/*----------------------------------------*/
.pricing-tab .nav-tabs {
  border: none;
}
.pricing-tab .nav-tabs .nav-link {
  margin-bottom: 0;
  border: 0;
}
.pricing-tab .nav .nav-item {
  padding-left: 0px;
}
.pricing-tab .nav .nav-item .nav-link {
  padding: 7px 60px;
  background: transparent;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  font-weight: 600;
  text-transform: capitalize;
  color: #f000;
  position: relative;
  outline: none;
  font-size: 16px;
  border: none;
  z-index: 2;
  color: var(--clr-common-heading);
}
.pricing-tab .nav .nav-item .nav-link.active {
  color: var(--clr-theme-1);
}
.pricing-tab .nav .nav-item .nav-link.active::after {
  right: 10px;
}
.pricing-tab .nav .nav-item .nav-link::after {
  position: absolute;
  content: "";
  right: -32px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  background-position: 100% 100%;
  background-size: 300% 100%;
  z-index: 1;
}
.pricing-tab .nav .nav-item .nav-link::before {
  position: absolute;
  content: "";
  right: 0px;
  top: 50%;
  transform: translateY(-50%) translateX(50%);
  background: var(--clr-border-2);
  width: 80px;
  height: 40px;
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  border-radius: 20px;
  border: 1px solid var(--clr-theme-1);
}
.pricing-tab .nav .nav-item:last-child .nav-link {
  padding-right: 0;
}
.pricing-tab .nav .nav-item:last-child .nav-link::after {
  display: none;
}
.pricing-tab .nav .nav-item:last-child .nav-link::before {
  display: none;
}
.pricing-tab .nav .nav-item:first-child .nav-link {
  padding-left: 0;
}

.membership__box {
  padding: 40px 40px;
  box-shadow: 0px 10px 40px rgba(12, 29, 74, 0.08);
  border-radius: 8px;
  background: var(--clr-common-white);
  border: 1px solid #ddd;
  overflow: hidden;
  position: relative;
  height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) {
  .membership__box {
    padding: 40px 30px;
  }
}
.membership__tittle p {
  color: #f000;
  margin-bottom: 50px;
}
.membership__info h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}
.membership__info span {
  font-size: 28px;
  font-weight: 900;
  color: var(--clr-theme-1);
}
.membership__price p {
  font-size: 15px;
  color: #f000;
}
.membership__list {
  padding: 15px 0;
}
.membership__list ul li {
  margin-bottom: 5px;
}
.membership__list ul li i {
  color: var(--clr-theme-1);
  margin-right: 15px;
}

.Popular__plan {
  position: absolute;
  background: var(--clr-theme-1)-2;
  top: -30px;
  right: -84px;
  font-size: 14px;
  font-weight: 600;
  color: #f000;
  text-align: center;
  padding: 62px 72px 6px;
  transform: rotate(48deg);
}
.Popular__plan span {
  width: 70px;
  display: inline-block;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  font-family: "Raleway", sans-serif;
}

.bd-pricing {
  background: var(--clr-common-white);
  padding: 45px 50px 50px 50px;
  -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: 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), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .bd-pricing {
    padding: 45px 25px 50px 25px;
  }
}
.bd-pricing-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-common-heading);
  -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: uppercase;
}
.bd-pricing-price {
  font-size: 60px;
  line-height: 1.16;
  color: 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;
}
@media (max-width: 575px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .bd-pricing-price {
    font-size: 50px;
  }
}
.bd-pricing-price span {
  font-size: 24px;
  font-weight: 500;
  color: var(--clr-common-heading);
  -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;
}
.bd-pricing ul li {
  font-size: 16px;
  line-height: 1;
  list-style: none;
  margin-bottom: 20px;
  -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;
}
.bd-pricing ul li i {
  font-size: 16px;
  color: var(--clr-theme-1);
  margin-right: 13px;
  -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;
}
.bd-pricing-btn .theme-btn,
.bd-pricing-btn .theme-btn-black {
  width: 100%;
}
.bd-pricing.bd-pricing-active {
  background: var(--clr-theme-1);
}
.bd-pricing.bd-pricing-active .bd-pricing-subtitle,
.bd-pricing.bd-pricing-active .bd-pricing-price,
.bd-pricing.bd-pricing-active .bd-pricing-price span,
.bd-pricing.bd-pricing-active ul li,
.bd-pricing.bd-pricing-active ul li i {
  color: var(--clr-common-white);
}
.bd-pricing.bd-pricing-active .theme-btn {
  background: var(--clr-body-heading);
}

/*----------------------------------------*/
/*  12. BRAND CSS START
/*----------------------------------------*/
.pt-405 {
  padding-top: 405px;
}

.brand__area {
  position: relative;
  margin-top: -290px;
  z-index: 5;
}
.brand__overlay {
  position: relative;
}
.brand__overlay:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  background-color: #1f242c;
  opacity: 0.961;
  top: 0;
  left: 0;
  z-index: -1;
}
.brand__title span {
  color: var(--clr-common-white);
  font-weight: var(--bd-fw-sbold);
  margin-bottom: 45px;
  display: block;
}
@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) {
  .brand__title span {
    margin-top: 20px;
  }
}

.singel__brand a img {
  opacity: 20%;
}
.singel__brand:hover a img {
  opacity: 100%;
}

.partner__area {
  border-top: 1px solid var(--clr-border-10);
}

.brand__title {
  font-size: 16px;
  line-height: 26px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .brand__title {
    margin-bottom: 30px;
    text-align: center;
  }
}
.brand__item a img {
  opacity: 0.4;
}
.brand__item a img:hover {
  opacity: 1;
}

/*----------------------------------------*/
/*  17. FAQ CSS START
/*----------------------------------------*/
.faq__banner-area {
  min-height: 450px;
  position: relative;
  background: var(--clr-bg-grey-3);
  z-index: 5;
}
.faq__banner-thumb {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
@media (max-width: 575px) {
  .faq__banner-thumb {
    display: none;
  }
}
.faq__banner-title h2 {
  font-size: 60px;
  margin-bottom: 50px;
  color: var(--clr-common-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .faq__banner-title h2 {
    font-size: 55px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .faq__banner-title h2 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .faq__banner-title h2 {
    font-size: 45px;
  }
}
@media (max-width: 575px) {
  .faq__banner-title h2 {
    font-size: 36px;
  }
}
.faq__info-warapper {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.faq__search-input {
  position: relative;
}
.faq__search-input input {
  height: 60px;
  width: 100%;
  background: var(--clr-common-white);
  border: 0;
  padding-left: 20px;
  padding-right: 150px;
  position: relative;
  font-size: 16px;
  outline: none;
  text-transform: capitalize;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
@media (max-width: 575px) {
  .faq__search-input input {
    padding-right: 20px;
  }
}
.faq__search-input input::placeholder {
  color: var(--clr-text-4);
}
.faq__search-input button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0px 39px;
  height: 60px;
  -webkit-border-radius: 0px 4px 4px 0px;
  -moz-border-radius: 0px 4px 4px 0px;
  -o-border-radius: 0px 4px 4px 0px;
  -ms-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: var(--bd-fw-sbold);
  background-image: linear-gradient(to right, #684cb1, #0ed5fa, #0ed5fa, #684cb1);
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--clr-common-white);
  background-position: 100% 100%;
  background-size: 300% 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;
}
.faq__search-input button:hover {
  background-position: 0% 100%;
  color: var(--clr-common-white);
}
@media (max-width: 575px) {
  .faq__search-input button {
    position: static;
    margin-top: 20px;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -o-border-radius: 4px 4px 4px 4px;
    -ms-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
  }
}

.faq__topic-items {
  background: transparent;
  border: 1px solid #edeef2;
  padding: 50px 25px 35px 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;
  -webkit-box-shadow: 0 30px 60px rgba(10, 25, 87, 0.07);
  -moz-box-shadow: 0 30px 60px rgba(10, 25, 87, 0.07);
  -ms-box-shadow: 0 30px 60px rgba(10, 25, 87, 0.07);
  -o-box-shadow: 0 30px 60px rgba(10, 25, 87, 0.07);
  box-shadow: 0 30px 60px rgba(10, 25, 87, 0.07);
  background-color: var(--clr-common-white);
}
.faq__topic-icon {
  transition: 0.3s;
}
.faq__topic-icon img {
  margin-bottom: 33px;
}
.faq__topic-content h4 a {
  font-size: 24px;
  margin-bottom: 20px;
  display: block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .faq__topic-content h4 a {
    font-size: 20px;
  }
}
.faq__topic-content h4 a:hover {
  color: var(--clr-theme-1);
}
.faq__topic-content p {
  margin-bottom: 0;
}

/*----------------------------------------*/
/*  30. TEAM CSS START
/*----------------------------------------*/
.singel__team-thumb {
  position: relative;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  overflow: hidden;
}
.singel__team-thumb img {
  width: 100%;
}
.singel__team-thumb:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: transparent;
  background-image: linear-gradient(180deg, #684CB1 35%, #0ED5FA 100%);
  z-index: 1;
}

.singel__team-content {
  position: absolute;
  content: "";
  bottom: 50%;
  left: 0;
  right: 0;
  max-width: 300px;
  padding: 20px 15px 20px;
  text-align: center;
  margin: auto;
  transform: translateY(50%);
  opacity: 0;
  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;
  margin-bottom: -60px;
  z-index: 5;
}

.singel__team-item:hover .singel__team-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);
}
.singel__team-item:hover .singel__team-thumb::before {
  opacity: 0.8;
  visibility: visible;
}
.singel__team-item:hover .singel__team-content {
  opacity: 1;
  visibility: visible;
  margin-bottom: 0;
}

.singel__team-content h3 a {
  color: var(--clr-common-white);
  display: block;
  margin-bottom: 5px;
}
.singel__team-content h3 a:hover {
  color: var(--clr-theme-1);
}
.singel__team-content span {
  color: var(--clr-common-white);
  margin-bottom: 10px;
  display: block;
  text-transform: capitalize;
}

.singel__team-social {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.singel__team-social a {
  color: var(--clr-common-white);
  font-size: 18px;
}
.singel__team-social a:hover {
  color: var(--clr-theme-1);
}

.singel__team-thumb:hover::before {
  opacity: 0.8;
  visibility: visible;
}
.singel__team-thumb:hover .singel__team-content {
  opacity: 1;
  visibility: visible;
  margin-bottom: 0;
}

.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;
  overflow: hidden;
  position: relative;
  color: var(--clr-common-white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(0deg, #0ed5fa 0%, #684cb1 100%);
}
.team__founder-item-icon:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: var(--clr-bg-grey-4);
}
.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);
}

.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;
  }
}

/*----------------------------------------*/
/*  16. ERROR CSS START
/*----------------------------------------*/
.error__content h2 {
  font-size: 250px;
  font-weight: 700;
  color: var(--clr-theme-1);
  line-height: 1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .error__content h2 {
    font-size: 200px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .error__content h2 {
    font-size: 150px;
  }
}
@media (max-width: 575px) {
  .error__content h2 {
    font-size: 120px;
  }
}
.error__content h3 {
  font-size: 36px;
}
@media (max-width: 575px) {
  .error__content h3 {
    font-size: 28px;
  }
}
.error__content p {
  font-size: 16px;
  margin-bottom: 33px;
}

/*----------------------------------------*/
/*  13. COUNTER CSS START
/*----------------------------------------*/
.contact__info-wrapper {
  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), only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__info-wrapper {
    margin-right: 0px;
  }
}
.contact__info-item {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--clr-border-10);
  padding-top: 30px;
  padding-bottom: 30px;
}
@media (max-width: 575px) {
  .contact__info-item {
    flex-wrap: wrap;
    gap: 10px 20px;
  }
}
.contact__info-item:last-child {
  border-bottom: 0;
}
.contact__info-icon {
  height: 60px;
  width: 60px;
  min-width: 60px;
  display: inline-block;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  font-size: 20px;
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(0deg, #0ed5fa 0%, #684cb1 100%);
  position: relative;
}
.contact__info-icon::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: var(--clr-bg-grey-4);
}
@media (max-width: 575px) {
  .contact__info-content {
    margin-top: 20px;
  }
}
.contact__info-content span {
  font-size: 16px;
  color: #777a7e;
  font-weight: 500;
  margin-bottom: 5px;
  display: inline-block;
  text-transform: capitalize;
}
.contact__info-content h5 a {
  font-size: 20px;
}
.contact__info-content h5 a:hover {
  color: var(--clr-theme-1);
}
.contact__from-input {
  margin-bottom: 20px;
}
.contact__from-input input {
  height: 60px;
  width: 100%;
  background: var(--clr-bg-grey-4);
  border: none;
  padding: 15px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  outline: 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;
  color: #777a7e;
}
.contact__from-input input::placeholder {
  color: #777a7e;
}
.contact__from-input input:focus {
  border: double 1px transparent;
  background-image: linear-gradient(#f9f9f9, #f9f9f9), linear-gradient(to right, #0ed5fa, #684cb1);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.contact__from-input textarea {
  height: 60px;
  width: 100%;
  background: var(--clr-bg-grey-4);
  border: none;
  padding: 15px 20px;
  border-radius: 6px;
  outline: 0;
  min-height: 170px;
  color: #777a7e;
  resize: none;
  border: 1px solid transparent;
  -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::placeholder {
  color: #777a7e;
}
.contact__from-input textarea:focus {
  border: double 1px transparent;
  background-image: linear-gradient(#f9f9f9, #f9f9f9), linear-gradient(to right, #0ed5fa, #684cb1);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.contact__select {
  position: relative;
}
.contact__select select {
  height: 60px;
  width: 100%;
  background: var(--clr-bg-grey-4);
  border: none;
  padding: 15px 15px;
  border-radius: 6px;
  outline: 0;
  color: #777a7e;
  position: relative;
  appearance: none;
}
.contact__select::after {
  position: absolute;
  content: "\f107";
  background-color: transparent;
  top: 18px;
  right: 27px;
  width: 0;
  height: 0;
  font-family: var(--bd-ff-fontawesome);
  color: #777a7e;
  font-size: 16px;
}

.contact__cta-wrapper {
  padding: 65px 70px 35px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  z-index: 22;
  position: relative;
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact__cta-wrapper {
    padding: 65px 30px 35px;
  }
}
.contact__cta-content {
  display: flex;
  align-items: center;
  gap: 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) {
  .contact__cta-content {
    flex-wrap: wrap;
    gap: 30px;
  }
}

.cta__description {
  position: relative;
  padding-left: 45px;
  max-width: 450px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__description {
    padding-left: 0;
  }
}
.cta__description p {
  color: var(--clr-common-white);
  font-size: 18px;
  margin-bottom: 0;
}
.cta__description::before {
  height: 70px;
  width: 1px;
  background: var(--clr-common-white);
  opacity: 0.2;
  position: absolute;
  content: "";
  top: -8px;
  left: 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) {
  .cta__description::before {
    display: none;
  }
}
.cta-contact__info {
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 575px) {
  .cta-contact__info {
    flex-wrap: wrap;
  }
}
.cta__number-icon {
  height: 60px;
  width: 60px;
  min-height: 60px;
  display: inline-block;
  line-height: 60px;
  background-color: var(--clr-common-white);
  text-align: center;
  border-radius: 50%;
}
.cta__number-text span {
  color: #8f96a0;
  margin-bottom: 3px;
  display: block;
}
.cta__number-text h3 a {
  color: var(--clr-common-white);
}
.cta__number-text h3 a:hover {
  color: var(--clr-theme-1);
}

.google__map-inner {
  position: relative;
  margin-top: -80px;
}
.google__map-inner iframe {
  min-height: 550px;
  width: 100%;
  margin-bottom: -8px;
}

/*----------------------------------------*/
/*  19. FOOTER CSS START
/*----------------------------------------*/
.pt-205 {
  padding-top: 205px;
}

.footer__overlay {
  position: relative;
  z-index: 5;
}

.footer__overlay:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--clr-common-white);
  opacity: 0.961;
  z-index: -1;
}

.footer-col-2 {
  padding-left: 45px;
  padding-right: 20px;
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-col-2 {
    padding: 0;
  }
}

.footer-col-3 {
  padding-left: 50px;
  margin-right: -20px;
}
@media (max-width: 575px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-col-3 {
    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) {
  .footer-col-3 {
    padding-left: 0px;
    margin-right: 0px;
  }
}

.footer-col-4 {
  margin-left: -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) {
  .footer-col-4 {
    margin-left: 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-col-6 {
    margin-left: 50px;
  }
}

.footer-col-7 {
  margin-left: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-col-7 {
    margin-left: 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) {
  .footer-col-7 {
    margin-left: 0;
  }
}

.footer__title h4 {
  font-size: 20px;
  color: var(--clr-common-white);
  margin-bottom: 35px;
}
.footer__content p {
  color: var(--clr-footer-1);
  max-width: 285px;
}
.footer__link ul {
  display: grid;
  gap: 0px 30px;
  grid-template-columns: 100px 100px;
}
.footer__link ul li {
  line-height: 1;
  margin-bottom: 29px;
  position: relative;
}
.footer__link ul li a {
  color: var(--clr-footer-1);
}
.footer__link ul li a:hover {
  color: var(--clr-theme-1);
}
.footer__link ul li:after {
  position: absolute;
  content: "";
  height: 1px;
  width: 100px;
  background-color: #22262e;
  left: 0;
  bottom: -14px;
}
.footer__link-2 ul li {
  line-height: 1;
  margin-bottom: 29px;
  position: relative;
}
.footer__link-2 ul li:after {
  position: absolute;
  content: "";
  height: 1px;
  width: 160px;
  background-color: #22262e;
  left: 0;
  bottom: -14px;
}
.footer__link-2 ul li a {
  color: var(--clr-footer-1);
}
.footer__link-2 ul li a:hover {
  color: var(--clr-theme-1);
}
.footer__link-3 ul li {
  display: inline-block;
  margin-left: 50px;
  font-size: 14px;
  font-weight: var(--bd-fw-sbold);
  text-transform: uppercase;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .footer__link-3 ul li {
    margin-left: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__link-3 ul li {
    margin-left: 40px;
  }
}
.footer__link-3 ul li:first-child {
  margin-left: 0;
}
.footer__link-3 ul li a {
  color: var(--clr-common-white);
}
.footer__link-3 ul li a:hover {
  color: var(--clr-theme-1);
}
@media (max-width: 575px) {
  .footer__link-3 {
    text-align: center;
  }
}
.footer__contact-item span {
  color: var(--clr-footer-1);
}
.footer__contact-item p {
  color: var(--clr-common-white);
  font-weight: var(--bd-fw-bold);
  font-family: var(--bd-ff-heading);
  margin-bottom: 16px;
}
.footer__support-inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 20px;
  border-top: 1px solid #22262e;
  max-width: 205px;
  padding-top: 15px;
}
.footer__support-title span {
  display: block;
  color: var(--clr-common-white);
}
.footer__support-title a {
  color: var(--clr-common-white);
  font-weight: var(--bd-fw-bold);
}
.footer__support-title a:hover {
  color: var(--clr-theme-1);
}

.custom__link {
  margin-bottom: 0px !important;
  position: initial !important;
}

li.custom__link::after {
  display: none;
}

.footer__info-area {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background-image: -moz-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -webkit-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  background-image: -ms-linear-gradient(0deg, #0bdafd 0%, #6a48af 100%);
  padding: 20px 40px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .footer__info-area {
    padding: 20px 20px;
  }
}
@media (max-width: 575px) {
  .footer__logo {
    text-align: center;
    margin-bottom: 20px;
  }
}

.footer__copyright {
  padding: 22px 0;
}
.footer__copyright.style-2 .copyright__text p a {
  color: var(--clr-common-heading);
}
.footer__copyright.style-2 .copyright__text p a:hover {
  color: var(--clr-theme-1);
}

.copyright__text p {
  text-align: center;
  margin-bottom: 0;
  color: var(--clr-footer-1);
}
.copyright__text p a {
  color: var(--clr-common-white);
  font-weight: var(--bd-fw-sbold);
}
.copyright__text p a:hover {
  color: var(--clr-theme-1);
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: end;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__social {
    margin-top: 25px;
    justify-content: center;
  }
}
.footer__social a {
  width: 50px;
  height: 50px;
  background-color: var(--clr-theme-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--clr-common-white);
  font-size: 16px;
}
.footer__social a:hover {
  background-color: var(--clr-common-white);
  color: var(--clr-theme-3);
}

.footer__style-2 .footer__title h4 {
  color: var(--clr-common-heading);
}
.footer__style-2 .footer__contact-item p {
  color: var(--clr-common-heading);
}
.footer__style-2 .footer__contact-item span {
  color: var(--clr-text-4);
}
.footer__style-2 .footer__link ul li a {
  color: var(--clr-text-4);
}
.footer__style-2 .footer__link ul li a:hover {
  color: var(--clr-theme-1);
}
.footer__style-2 .footer__link ul li::after {
  background-color: rgba(0, 0, 0, 0.102);
}
.footer__style-2 .footer__link-2 ul li a {
  color: var(--clr-text-4);
}
.footer__style-2 .footer__link-2 ul li a:hover {
  color: var(--clr-theme-1);
}
.footer__style-2 .footer__link-2 ul li::after {
  background-color: rgba(0, 0, 0, 0.102);
}
.footer__style-2 .footer__support-title span {
  color: var(--clr-text-4);
}
.footer__style-2 .footer__support-title a {
  color: var(--clr-common-heading);
}
.footer__style-2 .footer__support-title a:hover {
  color: var(--clr-theme-1);
}
.footer__style-2 .meta__content span {
  font-size: 14px;
  color: var(--clr-text-4);
  margin-bottom: 4px;
  display: block;
}
.footer__style-2 .meta__content span i {
  margin-right: 6px;
}
.footer__style-2 .meta__content h5 a {
  font-size: 16px;
}
.footer__style-2 .meta__content h5 a:hover {
  color: var(--clr-theme-1);
}
@media (max-width: 575px) {
  .footer__style-2 .footer__social {
    justify-content: center;
  }
}
.footer__style-2 .footer__content p {
  color: var(--clr-text-4);
}

.footer__info-area.style-2 {
  transform: translateY(-45px);
  margin-bottom: 50px;
}

/*# sourceMappingURL=main.css.map */
/*：源代码唯一下载地址: https://www.17sucai.com*/