<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Theme Name: Documy - Online Documentation HTML5 Template
    更多精品模板：Http://www.bootstrapmb.com
    Description: Documy - Online Documentation HTML5 Template
    Version: 1.0

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

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

01. common CSS
02. banner CSS
03. header CSS
04. brand CSS
05. services CSS
06. featureds CSS
07. about CSS
08. blog CSS
09. forum CSS
10. testimonial CSS
11. price CSS
12. video CSS
13. faq CSS
14. team CSS
15. terms CSS
16. cta CSS
17. documy CSS
18. docs CSS
19. sidebar CSS
20. component CSS
21. list-widgets CSS
22. message-widgets CSS
23. button-widgets CSS
24. tabs-widgets CSS
25. notice-highlight CSS
26. according-widgets CSS
27. quotation CSS
28. tooltip CSS
29. table-widgets CSS
30. form-widgets CSS
31. audio-widgets CSS
32. progressbar-widgets CSS
33. video-widgets CSS
34. code-block CSS
35. layout CSS
36. dashboard-info CSS
37. info-card CSS
38. animation-heading CSS
39. newsletter CSS
40. information-chart CSS
41. countdown CSS
42. keyboard-shortcut CSS
43. changelog CSS
44. contact CSS
45. footer CSS


**********************************************/
/*----------------------------------------*/
/*  01. common CSS
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300&amp;display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: normal;
  color: var(--clr-common-text);
  line-height: 26px;
}

a {
  text-decoration: none !important;
}

.w-img img {
  width: 100%;
}

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

a,
.btn,
button,
span,
p,
i,
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;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", sans-serif;
  color: var(--clr-common-heading);
  margin-top: 0px;
  font-weight: 600;
  line-height: 1.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;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

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

li {
  list-style: none;
}

p {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: var(--clr-common-text);
  margin-bottom: 15px;
  line-height: 26px;
}

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

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

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

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

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

/*--
    - Common Classes
-----------------------------------------*/
.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;
}

.pos-rel {
  position: relative;
}

.pos-abs {
  position: absolute;
}

/*--
    - Background color
-----------------------------------------*/
.theme-bg {
  background-color: var(--clr-theme-1);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*--
    - color
-----------------------------------------*/
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: var(--clr-common-white) !important;
}

.white-color {
  color: var(--clr-common-white);
}

.tcolor {
  color: var(--clr-common-black) !important;
}

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

.body-overlay {
  background-color: rgba(0, 0, 0, 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;
}

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

.theme-btn {
  font-size: 16px;
  color: var(--clr-common-white);
  height: 55px;
  line-height: 55px;
  text-align: center;
  padding: 0px 45px;
  border-radius: 5px;
  display: inline-block;
  background: var(--clr-common-blue);
  font-weight: 500;
  border: 1px solid var(--clr-theme-1);
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.theme-btn:before {
  background-color: var(--cl-bg-white);
  content: "";
  height: 150px;
  left: -75px;
  position: absolute;
  top: -35px;
  transform: rotate(35deg);
  transition: all 1600ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 40px;
  opacity: 0;
}
.theme-btn.theme-btn-white {
  background-color: var(--cl-bg-white);
  color: var(--clr-common-blue);
}
.theme-btn.theme-btn-white:hover {
  background: var(--clr-common-blue);
  color: var(--clr-common-white);
}
.theme-btn:hover {
  background: transparent;
  color: var(--clr-theme-1);
  border: 1px solid var(--clr-theme-1);
}
.theme-btn:hover:before {
  left: 120%;
  transition: all 1300ms cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0.25;
}

/* link btn */
.link-btn {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--clr-common-black);
  text-transform: uppercase;
  padding-right: 15px;
}
.link-btn i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
}
.link-btn i:first-child {
  left: -100%;
  visibility: hidden;
  opacity: 0;
}
.link-btn i:last-child {
  right: 0;
}
.link-btn:hover {
  color: var(--clr-common-black);
}
.link-btn:hover i:first-child {
  left: 0;
  visibility: visible;
  opacity: 1;
}
.link-btn:hover i:last-child {
  right: -100%;
  visibility: hidden;
  opacity: 0;
}

.link-btn-2 {
  position: relative;
  font-size: 14px;
  color: var(--clr-common-black);
  font-weight: 500;
  padding-right: 22px;
  display: inline-block;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
}
.link-btn-2 i {
  position: absolute;
  top: 45%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  font-size: 12px;
}
.link-btn-2 i:first-child {
  right: 10%;
  visibility: hidden;
  opacity: 0;
}
.link-btn-2 i:last-child {
  right: 0;
}
.link-btn-2:hover {
  color: var(--clr-common-black);
}
.link-btn-2:hover i:first-child {
  right: 0;
  visibility: visible;
  opacity: 1;
}
.link-btn-2:hover i:last-child {
  right: -10%;
  visibility: hidden;
  opacity: 0;
}
.link-btn-2.pink {
  color: var(--clr-common-black);
}
.link-btn-2.pink:hover {
  color: var(--clr-common-black);
}

/* pulse btn */
.pulse-btn {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 84px;
  text-align: center;
  background-color: var(--clr-common-white);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: var(--clr-common-black);
  animation: pulse 2s infinite;
}
.pulse-btn:hover {
  background-color: var(--clr-common-black);
  color: var(--clr-common-white);
}
.pulse-btn i {
  padding-left: 2px;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(95, 64, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(95, 64, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(95, 64, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(95, 64, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(95, 64, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(95, 64, 255, 0);
    box-shadow: 0 0 0 45px rgba(95, 64, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(95, 64, 255, 0);
    box-shadow: 0 0 0 0 rgba(95, 64, 255, 0);
  }
}
.border-left {
  position: relative;
}
.border-left:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background: #eaebee;
  left: 0;
  top: 0;
}

.border-none {
  border: none;
}

:root {
  /**
     @color declaration
     */
  --clr-common-white: #fff;
  --clr-common-black: #000;
  --clr-common-blue: #3817E3;
  --clr-common-blue2: #348CFF;
  --clr-common-tb-color: #4F32E2;
  --clr-common-td-color: #6B51F1;
  --clr-common-heading: #1D1D1D;
  --clr-common-body: #666;
  --clr-common-text: #666;
  --clr-common-border: #eaebee;
  --clr-common-placeholder: #707070;
  --clr-common-breadcrumb-bg: #F9F9FB;
  --clr-common-nselect: #0f1d39;
  --clr-common-f-social: #95989b;
  --clr-common-f-border: #ebebeb;
  --clr-common-fcopy-border: #f1f1f1;
  --clr-common-box-bg: #f9fbff;
  --clr-common-du-color: #9A85FF;
  --clr-common-typed-text: #D4AD2F;
  --clr-common-hover: #2F92D4;
  --clr-common-shrik-text: #2F92D4;
  --clr-common-slide-text: #a22bdc;
  --clr-common-newsletter-form: #e7ebf5;
  --clr-common-newsletter-input: #F4F4F6;
  --clr-common-newsletter-btn: #D19631;
  --clr-common-table-default: #a5a5a5;
  --clr-common-table-black: #1d1d1d;
  --clr-common-code-block: #D41F63;
  --clr-common-green1: #2bcc6c;
  --clr-common-green2: #08FF00;
  --clr-common-green3: #4BC273;
  --clr-common-green4: #31CF8B;
  --clr-common-red1: #f22828;
  --clr-common-red2: #D93535;
  --clr-common-red3: #D62323;
  --clr-common-fborder: #ebeff2;
  --clr-common-blockquote: #F8F8F8;
  --clr-theme-1: #3817E3;
  --clr-theme-2: #fb5050;
  --clr-bg-gray: #EFEDF5;
  --clr-bg-black: #000;
  --clr-bg-white: #fff;
  --clr-bg-bselect: #f6f6f6;
  --clr-bg-tcolor: #3817E3;
  --clr-bg-btag: #381bcf;
  --clr-bg-manu-bar: #442AC8;
  --clr-bg-features-bg: #F3F2ED;
  --clr-bg-features-bg2: #EAF0F8;
  --clr-bg-features-bg3: #EAF6F2;
  --clr-bg-grey-bg: #f6f8f9;
  --clr-bg-grey2-bg: #F9F9FB;
  --clr-bg-grey3-bg: #fcfcfc;
  --clr-bg-off-green-bg: #eefbf3;
  --clr-bg-warning-bg: #fcf9f2;
  --clr-bg-danger-bg: #fef2f2;
  --clr-bg-information-bg: #f6f6ff;
  --clr-bg-brand2-bg: #f8f5f4;
  --clr-bg-secondary: #1e1e20;
  --clr-bg-success: #16c149;
  --clr-bg-warning: #efa904;
  --clr-bg-danger: #d82525;
  --clr-bg-information: #17a2b8;
  --clr-bg-notice-success: #dbffe9;
  --clr-bg-notice-warning: #fff9eb;
  --clr-bg-notice-danger: #ffecec;
}

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

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

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

.fill-btn {
  font-size: 16px;
  color: var(--clr-common-white);
  font-weight: 600;
  background: var(--clr-common-heading);
  border: 1px solid var(--clr-common-heading);
  height: 60px;
  display: inline-block;
  line-height: 58px;
  border-radius: 5px;
  padding: 0 52px;
  position: relative;
  overflow: hidden;
}
.fill-btn:hover {
  color: var(--clr-common-heading);
  background: var(--clr-common-white);
}

.border-btn {
  font-size: 16px;
  color: var(--clr-common-heading);
  border: 1px solid var(--clr-common-heading);
  padding: 0 40px;
  height: 50px;
  border-radius: 5px;
  display: inline-block;
  line-height: 48px;
  font-weight: 600;
}
.border-btn:hover {
  color: var(--clr-common-white);
  background: var(--clr-common-heading);
}

.section-title {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--clr-common-heading);
  margin-bottom: 23px;
}
@media (max-width: 450px) {
  .section-title {
    font-size: 24px;
  }
  .section-title br {
    display: none;
  }
}

.section-subtitle {
  font-size: 16px;
}

.hr1 {
  border-bottom: 1px solid #dcdcdc;
}

@media (max-width: 575px) {
  .error-thumb img {
    width: 100%;
  }
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  width: 100%;
  padding-right: var(--bs-gutter-x, 15px);
  padding-left: var(--bs-gutter-x, 15px);
  margin-right: auto;
  margin-left: auto;
}

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

@media (min-width: 1400px) {
  .header-container {
    max-width: 1820px;
    overflow: hidden;
  }
}
@media (min-width: 992px) {
  .header-container {
    overflow: hidden;
  }
}
.page__title-wrapper h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 60px;
  color: var(--clr-common-heading);
}
@media (max-width: 575px) {
  .page__title-wrapper h3 {
    font-size: 30px;
    line-height: 40px;
  }
}

.breadcurms-area {
  border-bottom: 1px solid var(--clr-common-fcopy-border);
}

.trail-items li {
  position: relative;
  display: inline-block;
  margin-right: 25px;
}
.trail-items li:not(:last-child)::after {
  display: inline-block;
  color: #707070;
  content: "";
  position: absolute;
  right: -17px;
  top: 0px;
  font-family: "Font Awesome 5 Pro";
  font-size: 18px;
}
.trail-items a {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  line-height: 25px;
  color: var(--clr-common-body);
  -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;
}
.trail-items a:hover {
  color: var(--clr-theme-1);
}
.trail-items a i {
  margin-right: 10px;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .breadcrumb__dates {
    text-align: left !important;
  }
}
.breadcrumb__dates p {
  margin-bottom: 0px;
  font-size: 15px;
}
.breadcrumb__dates p i {
  margin-right: 10px;
}

/*----------------------------------------*/
/*   02. banner CSS
/*----------------------------------------*/
.banner1-height {
  min-height: 750px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.dbanner-title {
  color: var(--clr-common-white);
  font-weight: 700;
  font-size: 50px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .dbanner-title {
    font-size: 38px;
  }
}

.banner-subtitle {
  color: var(--clr-common-white);
  margin-bottom: 42px;
  font-size: 16px;
}

.banner__input.banner-niceselect {
  height: 60px;
  line-height: 60px;
  border: none;
  width: 100px;
}

.single-banner__img {
  position: absolute;
  right: 40px;
  bottom: 0;
  width: 23%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) {
  .single-banner__img {
    display: none;
  }
}
.single-banner__img img {
  width: 100%;
}
.single-banner__shape1 {
  position: absolute;
  top: 105px;
  right: 35%;
  filter: blur(2px);
  animation: hero-circle-1 7s linear 0s infinite alternate;
}
@media (max-width: 575px) {
  .single-banner__shape1 {
    display: none;
  }
}
.single-banner__shape2 {
  position: absolute;
  left: 23.5%;
  animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .single-banner__shape2 {
    display: none;
  }
}
.single-banner__shape3 {
  position: absolute;
  bottom: 0;
  left: 20px;
}
.single-banner__shape4 {
  position: absolute;
  right: 0px;
  top: 315px;
  filter: blur(3px);
}
@media (max-width: 575px) {
  .single-banner__shape4 {
    display: none;
  }
}

.search-form {
  position: relative;
  width: 100%;
  max-width: 765px;
  margin: 0 auto;
  margin-bottom: 30px;
}
.search-form input {
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 135px 0 30px;
  color: var(--clr-common-heading);
  border-radius: 5px;
  background: var(--clr-common-white);
  border: none;
}
@media (max-width: 575px) {
  .search-form input {
/*    padding: 0 56px 0 115px;*/
  }
}
.search-form input::placeholder {
  font-size: 14px;
  color: #b1b1b1;
}
.search-form input::focus {
  border: 0;
}
.search-form button {
  font-size: 16px;
  font-weight: 700;
  text-transform: inherit;
  line-height: 50px;
  text-align: center;
  height: 50px;
  color: var(--clr-common-black);
  border: none;
  position: absolute;
  top: 7px;
  right: -5px;
  bottom: 0;
  border-radius: 5px;
  overflow: hidden;
  padding: 0 30px;
}
.search-form button i {
  color: var(--clr-common-black);
  margin-left: 10px;
}
.search-form .nice-select::after {
  border-bottom: 2px solid #0f1d39;
  border-right: 2px solid #0f1d39;
  content: "";
  display: block;
  height: 6px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  -ms-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  width: 6px;
}

.banner-niceselect {
  position: absolute;
  left: 0;
  height: 60px;
  line-height: 60px;
  color: var(--clr-common-nselect);
  width: auto;
  min-width: 100px;
  border: none;
  border-radius: 5px 0px 0px 5px;
  background-color: var(--clr-bg-bselect);
  font-weight: 500;
}
@media (max-width: 575px) {
  .banner-niceselect {
    width: 75px;
  }
}
.banner-niceselect span {
  font-size: 15px;
  font-weight: 500;
}

.banner-tag {
  text-align: center;
}
.banner-tag span {
  font-size: 14px;
  color: var(--clr-common-white);
  margin-right: 5px;
}
.banner-tag a {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 0 13px;
  font-size: 14px;
  margin-left: 8px;
  background-color: var(--clr-bg-btag);
  color: var(--clr-common-white);
  border-radius: 2px;
  margin-bottom: 5px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.banner-tag a:hover {
  background-color: var(--clr-common-hover);
}
@media (max-width: 575px) {
  .banner-tag a {
    padding: 0px 10px;
    margin-left: 2px;
  }
}

.search-form input:focus-visible {
  outline: none;
}

@keyframes hero-thumb-sm-animation {
  0% {
    -webkit-transform: translateY(-20px) translateX(50px);
    -moz-transform: translateY(-20px) translateX(50px);
    -ms-transform: translateY(-20px) translateX(50px);
    transform: translateY(-20px) translateX(50px);
  }
  100% {
    -webkit-transform: translateY(-20px) translateX(0px);
    -moz-transform: translateY(-20px) translateX(0px);
    -ms-transform: translateY(-20px) translateX(0px);
    transform: translateY(-20px) translateX(0px);
  }
}
@keyframes hero-thumb-sm-2-animation {
  0% {
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes hero-circle-2 {
  0% {
    -webkit-transform: translateX(-200px);
    -moz-transform: translateX(-200px);
    -ms-transform: translateX(-200px);
    transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes hero-circle-1 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes hero-triangle-1 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes services-triangle {
  0% {
    -webkit-transform: rotate(0deg) translateX(-50px);
    -moz-transform: rotate(0deg) translateX(-50px);
    -ms-transform: rotate(0deg) translateX(-50px);
    transform: rotate(0deg) translateX(-50px);
  }
  100% {
    -webkit-transform: rotate(360deg) translateY(100px);
    -moz-transform: rotate(360deg) translateY(100px);
    -ms-transform: rotate(360deg) translateY(100px);
    transform: rotate(360deg) translateY(100px);
  }
}
.banner2-height {
  padding: 195px 0px 100px 0px;
  background: linear-gradient(#edecff 0%, rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 575px) {
  .banner2-height {
    padding: 200px 0px 100px 0px;
  }
}

.dbanner2-title {
  color: var(--clr-common-heading);
}

.banner2-subtitle {
  color: var(--clr-common-heading);
}

.banner2-tag {
  min-width: 450px;
  margin: 0 auto;
  margin-bottom: 15px;
/*  border: 1px solid #ddd;*/
  border-radius: 30px;
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .banner2-tag {
    min-width: 285px;
  }
}
@media (max-width: 575px) {
  .banner2-tag {
    border: none;
  }
}
.banner2-tag a {
  border: 1px solid #ddd;
  height: 40px;
  display: inline-block;
  padding: 0px 20px;
  background: transparent;
  line-height: 40px;
  border-radius: 30px;
  -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;
}
.banner2-tag a:hover {
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.banner2-tag .active {
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
  position: relative;
}
.banner2-tag .active:before {
  position: absolute;
  content: "";
  width: 11px;
  height: 5px;
  background-color: var(--clr-theme-1);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  left: 45%;
  bottom: -5px;
}

.search2-form input {
  height: 70px;
  border-radius: 50px;
/*  padding: 0 60px 0 160px;*/
  box-shadow: 0px 5px 30px rgba(6, 21, 62, 0.1);
}
@media (max-width: 575px) {
  .search2-form input {
/*    padding: 0 45px 0 143px;*/
  }
}
.search2-form button {
  font-size: 15px;
  top: 12px;
  right: 0px;
  bottom: 0;
  border-radius: 5px;
  padding: 0 23px;
}
.search2-form button i {
  margin-left: 0;
}
.search2-form .nice-select::after {
  content: "";
  display: block;
  height: 6px;
  margin-top: -4px;
  right: 30px;
  top: 50%;
  width: 6px;
}
@media (max-width: 575px) {
  .search2-form .nice-select::after {
    right: 20px;
  }
}

.banner2-niceselect {
  left: 5px;
  height: 60px;
  width: 130px;
  border-radius: 30px 0px 0px 30px;
  top: 5px;
}

/*----------------------------------------*/
/*   03. header CSS
/*----------------------------------------*/
.header-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  overflow-x: clip;
}

.header1.du-sticky-header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--clr-common-tb-color);
  z-index: 999;
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  display: block;
  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
}

.header2.du-sticky-header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--clr-common-white);
  z-index: 999;
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  display: block;
  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
}

.bar-icon {
  width: 20px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.bar-icon span {
  width: 100%;
  height: 2px;
  background: var(--clr-common-white);
  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;
}

.menu-bar a {
  height: 50px;
  width: 50px;
  background: var(--clr-bg-manu-bar);
  padding: 17px 0px 0px 15px;
  border-radius: 50%;
  display: inline-block;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu {
    margin-right: 0px;
  }
}
.main-menu ul li {
  display: inline-block;
  margin: 0px 18px;
  position: relative;
  /*submenu start*/
  /*submenu end*/
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .main-menu ul li {
    margin: 0px 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu ul li {
    margin: 0px 13px;
  }
}
.main-menu ul li a {
  font-size: 15px;
  color: var(--clr-common-heading);
  display: block;
  padding: 32px 0px;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1;
}
.main-menu ul li .sub-menu {
  background: var(--clr-common-white) none repeat scroll 0 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 120%;
  transition: all 0.3s ease 0s;
  visibility: hidden;
  width: 240px;
  z-index: 9;
  border-top: 3px solid var(--clr-theme-1);
  text-align: left;
  padding: 15px 0;
}
.main-menu ul li .sub-menu li {
  display: block;
  margin: 0px;
  padding: 8px 25px 8px 25px;
}
.main-menu ul li .sub-menu li:hover &gt; .sub-menu {
  top: 0%;
}
.main-menu ul li .sub-menu li .sub-menu {
  left: 100%;
  top: 20%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.main-menu ul li .sub-menu li a {
  padding: 0px;
  display: inline-block;
  color: #212237;
  position: relative;
}
.main-menu ul li .sub-menu li a:hover {
  color: var(--clr-theme-1);
}
.main-menu ul li .sub-menu li a:before {
  width: 100%;
  left: 0;
  right: auto;
}
.main-menu ul li:hover a {
  color: var(--clr-theme-1);
}
.main-menu ul li:hover.menu-item-has-children::after {
  color: var(--clr-theme-1);
}
.main-menu ul li:hover &gt; .sub-menu {
  opacity: 1;
  visibility: visible;
  top: 100%;
}
.main-menu ul li ul li.menu-item-has-children::after {
  right: 14px;
}

.duheader-btn {
  font-size: 15px;
  color: var(--clr-theme-1);
  height: 45px;
  line-height: 44px;
  text-align: center;
  padding: 0px 28px;
  display: inline-block;
  background: transparent;
  font-weight: 500;
  border: 1px solid var(--clr-theme-1);
  outline: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease-out 0s;
  border-radius: 30px;
}
.duheader-btn:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.sidebar-toggle-btn:hover {
  cursor: pointer;
}

.offcanvas-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  z-index: 1000;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.offcanvas-overlay.overlay-open {
  opacity: 0.3;
  visibility: visible;
}

.offcanvas-overlay-white {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #ffffff;
  z-index: 1000;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.offcanvas-overlay-white.overlay-open {
  opacity: 0;
  visibility: visible;
}

.side-info-close {
  background: none;
  border: 0;
  color: var(--clr-common-heading);
  font-size: 20px;
  padding: 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;
}

.side-info {
  background: #f5f5f5;
  height: 100%;
  position: fixed;
  z-index: 99999;
  right: -100%;
  top: 0;
  width: 365px;
  padding: 45px 35px 45px 45px;
  transition: 0.6s;
  overflow-y: scroll;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .side-info {
    width: 300px;
    padding: 15px 25px;
  }
}

.side-info.info-open {
  right: 0;
}

div.mean-container .mean-nav {
  background: none;
  margin-bottom: 40px;
  overflow: hidden;
}
div.mean-container .mean-nav &gt; ul {
  display: block !important;
}
div.mean-container .mean-nav ul li a {
  width: 100%;
  color: var(--clr-common-heading);
  border-top: 1px solid var(--clr-common-border);
  font-size: 16px;
  text-transform: capitalize;
  opacity: 1;
  color: var(--clr-common-heading);
}
div.mean-container .mean-nav ul li a i {
  display: none;
}
div.mean-container .mean-nav ul li a.mean-expand {
  height: 26px;
  border: none;
}
div.mean-container .mean-nav ul li a.mean-expand::before {
  position: absolute;
  content: "+";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
div.mean-container .mean-nav ul li a.mean-expand.mean-clicked::before {
  content: "-";
}
div.mean-container a.meanmenu-reveal {
  display: none !important;
}

.header-menu-top-icon a {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
}
.header-menu-top-icon a:hover {
  color: var(--clr-theme-1);
}
.header-menu-top-icon i {
  margin-right: 10px;
  color: var(--clr-theme-1);
  width: 16px;
}

.bar-icon {
  width: 26px;
  height: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.bar-icon span {
  width: 100%;
  height: 2px;
  background: var(--clr-common-white);
  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;
}

.filter-search-input input {
  width: 100%;
  height: 55px;
  padding: 0 35px 0 15px;
  font-size: 14px;
  color: var(--clr-common-body);
  outline: none;
  border: 1px solid #edeef2;
  border-radius: 5px;
}

.filter-search-input button {
  position: absolute;
  top: 50%;
  right: 15px;
  content: "";
  background: #fff;
  transform: translateY(-50%);
  color: var(--clr-theme-1);
  font-size: 14px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header2 {
    padding: 25px 0px;
  }
}

.bar2-icon span {
  background-color: var(--clr-common-heading);
  display: inline-block;
}

/*----------------------------------------*/
/*   04. brand CSS
/*----------------------------------------*/
.brand2-bg {
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 15px;
}

.f-shape-1 {
  position: absolute;
  right: 29.1%;
  bottom: 29%;
}

.f-shape-2 {
  position: absolute;
  top: 0;
  left: 29.5%;
}

.brand-subtitle p {
  font-size: 18px;
  color: #666;
}
.brand-subtitle p span {
  color: black;
  font-weight: 700;
}

.brand-shape {
  position: absolute;
  top: 0;
  right: 250px;
  z-index: -1;
}
@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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .brand-shape {
    right: 0px;
  }
}

/*----------------------------------------*/
/*  05. services CSS
/*----------------------------------------*/
.duservices__single {
  padding: 38px 25px 43px 30px;
  background: linear-gradient(#f1f4fe 0%, #fff 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;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .duservices__single {
    padding: 43px 25px 40px 30px;
  }
}
.duservices__single-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--clr-common-heading);
  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;
}
.duservices__single-title:hover {
  color: var(--clr-theme-1);
}
.duservices__single p {
  font-size: 15px;
}
.duservices__single .read-more {
  font-size: 15px;
  color: var(--clr-theme-1);
  font-weight: 500;
  -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;
}
.duservices__single .read-more:hover {
  color: var(--clr-common-hover);
}
.duservices__single-icon {
  -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: 992px) and (max-width: 1199px), (max-width: 575px) {
  .duservices__single-icon {
    margin-right: 20px;
  }
}
.duservices__single:hover {
  box-shadow: 0px 3px 2px 0px #D0D4F3;
}
.duservices__single:hover .duservices__single-icon {
  transform: translateY(-10px);
}
.duservices__single2 {
  background: linear-gradient(#f1fef8 0%, #fff 100%);
}
.duservices__single2:hover {
  box-shadow: 0px 6px 2px 2px #F2FEF9;
}
.duservices__single3 {
  background: linear-gradient(#fef8f1 0%, #fff 100%);
}
.duservices__single3:hover {
  box-shadow: 0px 6px 2px 0px #FEF8F1;
}

.duservices2__single {
  box-shadow: 0px 20px 30px rgba(8, 25, 74, 0.08);
  filter: drop-shadow(0px 20px 30px rgba(8, 25, 74, 0.08));
  background: 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;
}
.duservices2__single:hover {
  box-shadow: 0px 70px 60px rgba(8, 25, 74, 0.08);
  filter: drop-shadow(0px 70px 60px rgba(8, 25, 74, 0.08));
}

/*----------------------------------------*/
/*  06. featureds CSS
/*----------------------------------------*/
.featured-area {
  z-index: 2;
}

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

.featured-shape {
  position: absolute;
  right: 14%;
  top: 23%;
  z-index: -1;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .featured-shape {
    right: 6%;
    top: 21%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .featured-shape {
    right: 0%;
    top: 22%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .featured-shape {
    right: 0%;
    top: 15%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .featured-shape {
    right: 0%;
    top: 15%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .featured-shape {
    display: none;
  }
}

.featureds {
  padding: 35px 30px 30px 30px;
  background: var(--clr-bg-gray);
  border-radius: 10px;
}
.featureds__img {
  margin-bottom: 25px;
  -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;
}
.featureds__title {
  font-size: 20px;
  color: var(--clr-common-heading);
  margin-bottom: 20px;
  font-weight: 700;
  -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;
}
.featureds__title:hover {
  color: var(--clr-theme-1);
}
.featureds__content ul li {
  list-style: none;
  margin-bottom: 2px;
  font-size: 15px;
}
.featureds__content ul li a {
  -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;
}
.featureds__content ul li a:hover {
  color: var(--clr-theme-1);
}
.featureds__content ul li a:hover i {
  color: var(--clr-theme-1);
}
.featureds__content ul li:last-child {
  margin-bottom: 0px;
}
.featureds__content ul li i {
  margin-right: 12px;
  vertical-align: middle;
  color: var(--clr-common-heading);
}
.featureds:hover .featureds__img {
  transform: translateY(-10px);
}

.featureds:hover .featureds__img {
  transform: translateY(-10px);
}

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

.featureds3 {
  background-color: var(--clr-bg-features-bg2);
}

.featureds4 {
  background-color: var(--clr-bg-features-bg3);
}

@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), (max-width: 575px) {
  .single-featured2 {
    margin-left: 0;
  }
}

.featured2 {
  padding: 42px 35px 42px 35px;
  border-radius: 10px;
}
.featured2-title {
  font-size: 28px;
}
.featured2 p {
  font-size: 16px;
}

.featured2-item-left-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0px 20px 30px rgba(8, 25, 74, 0.08);
  line-height: 90px;
  text-align: center;
}
.featured2-item-right-title {
  font-size: 20px;
}
.featured2-item-right-title a {
  -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;
}
.featured2-item-right-title a:hover {
  color: var(--clr-theme-1);
}
.featured2-item-right p {
  font-size: 15px;
  margin-bottom: 0px;
}
.featured2-item:hover .featured2-item-left .featured2-item-left-icon img {
  transform: translateY(-10px);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .features-tabs {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .features-tabs {
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .features-tabs {
    padding-bottom: 80px;
  }
}

.fearured-tabs-menu {
  text-align: center;
  margin: 0 auto;
}
.fearured-tabs-menu .nav-tabs {
  border-bottom: 1px solid var(--clr-theme-1);
  display: flex;
  justify-content: center;
}
.fearured-tabs-menu .nav-tabs .nav-link {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.fearured-tabs-menu .nav-tabs {
  border-bottom: 1px solid var(--clr-theme-1);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .fearured-tabs-menu .nav-tabs {
    border-bottom: none;
  }
}

.fearured-tabs-menu .nav-link.active {
  border-color: var(--clr-theme-1) var(--clr-theme-1) #fff;
  position: relative;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .fearured-tabs-menu .nav-link.active {
    border: 1px solid var(--clr-theme-1);
    border-radius: 5px;
  }
}

.fearured-tabs-menu .nav-link.active:before {
  position: absolute;
  content: "";
  width: 11px;
  height: 5px;
  background-color: var(--clr-theme-1);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  left: 45%;
  bottom: -5px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .fearured-tabs-menu .nav-link.active:before {
    display: none;
  }
}

.fearured-tabs-menu .nav-tabs .nav-link {
  height: 50px;
  padding: 0px 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .fearured-tabs-menu .nav-tabs .nav-link {
    padding: 0px 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .fearured-tabs-menu .nav-tabs .nav-link:hover {
    border-radius: 5px;
  }
}

.featureds-3 {
  padding: 40px 50px 32px;
  box-shadow: 0px 20px 50px rgba(8, 25, 74, 0.08);
  border-radius: 10px;
}
@media (max-width: 450px) {
  .featureds-3 {
    padding: 40px 30px 32px;
  }
}
.featureds-3__img {
  -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;
}
.featureds-3__title {
  font-size: 24px;
  font-family: "Roboto", sans-serif;
  -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;
}
.featureds-3__title:hover {
  color: var(--clr-theme-1);
}
.featureds-3__content ul li {
  list-style: none;
  margin-bottom: 7px;
  font-size: 15px;
}
.featureds-3__content ul li a {
  font-size: 16px;
  color: var(--clr-common-body);
  -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;
}
.featureds-3__content ul li a:hover {
  color: var(--clr-theme-1);
}
.featureds-3__content ul li:last-child {
  margin-bottom: 0px;
}
.featureds-3__content ul li i {
  margin-right: 12px;
  vertical-align: middle;
}
.featureds-3:hover .featureds-3__img {
  transform: translateY(-10px);
}

/*----------------------------------------*/
/*  07. about CSS 
/*----------------------------------------*/
.about-main-img img {
  width: 100%;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .about-content {
    margin-left: 0px;
  }
}

.about-choose-list ul li {
  list-style: none;
  margin-bottom: 6px;
  font-size: 16px;
}
.about-choose-list ul li i {
  margin-right: 8px;
  color: var(--clr-common-blue);
}

.about-shape {
  position: absolute;
  left: -3px;
  top: 9px;
  animation: hero-circle-1 7s linear 0s infinite alternate;
}

.about-shape2 {
  position: absolute;
  top: 34%;
  left: 12%;
  animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about-shape2 {
    top: 40%;
    left: 6%;
  }
}
@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), (max-width: 575px) {
  .about-shape2 {
    display: none;
  }
}

.about-shape3 {
  position: absolute;
  right: 9%;
  top: -18%;
  animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about-shape3 {
    top: -9%;
  }
}
@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) {
  .about-shape3 {
    top: 0;
  }
}
@media (max-width: 575px) {
  .about-shape3 {
    display: none;
  }
}

/*----------------------------------------*/
/*  08. blog CSS
/*----------------------------------------*/
.blog__wrapper {
  margin-bottom: 50px;
}

.blog__item {
  border: 1px solid #f6f6f8;
  border-radius: 10px;
}
.blog__item-thumb {
  overflow: hidden;
  border-radius: 10px 10px 0px 0px;
}
.blog__item-thumb img {
  border-radius: 10px 10px 0 0;
  width: 100%;
  transform: scale(1);
  transition: 0.4s ease-in-out;
}
.blog__item-content {
  padding: 32px 40px 32px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .blog__item-content {
    padding: 25px 20px;
  }
}
@media (max-width: 450px) {
  .blog__item-content {
    padding: 20px 15px;
  }
}
.blog__item-title {
  font-size: 30px;
  margin-bottom: 20px;
  text-transform: capitalize;
  -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;
  line-height: 40px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .blog__item-title {
    font-size: 24px;
    line-height: 34px;
  }
}
@media (max-width: 450px) {
  .blog__item-title {
    font-size: 20px;
    line-height: 30px;
  }
}
.blog__item-title:hover {
  color: var(--clr-theme-1);
}
.blog__item:hover .blog__item-thumb img {
  transform: scale(1.1);
}

.post-meta span {
  transition: 0.3s;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--clr-common-body);
  margin-right: 20px;
  font-size: 15px;
  display: inline-block;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
@media (max-width: 575px) {
  .post-meta span {
    margin-right: 5px;
  }
}
.post-meta span a {
  -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;
}
.post-meta span a:hover {
  color: var(--clr-theme-1);
}
.post-meta span i {
  color: var(--clr-common-heading);
  font-size: 14px;
  margin-right: 5px;
  color: var(--clr-theme-1);
}

.post-text p span {
  background: var(--clr-common-heading);
  color: var(--clr-common-heading);
}
.post-text p img {
  width: 100%;
}
.post-text h3 {
  text-transform: capitalize;
  font-size: 27px;
}
@media (max-width: 575px) {
  .post-text h3 {
    font-size: 25px;
  }
}

.post-text blockquote {
  margin: 35px 0px !important;
  padding: 40px 40px 35px 40px;
  color: var(--clr-common-body);
  position: relative;
  background: var(--clr-common-blockquote);
  font-style: normal;
  text-align: left;
  clear: both;
  font-weight: 400;
  border-radius: 10px;
  box-shadow: 0 1px 2px 0 rgba(10, 0, 58, 0.14);
  border: 1px solid #f6f6f8;
}
@media (max-width: 575px) {
  .post-text blockquote {
    padding: 40px 20px 35px 20px;
  }
}
.post-text blockquote::before {
  content: "";
  position: static;
  font-family: "Font Awesome 5 Pro";
  font-size: 32px;
  color: var(--clr-theme-1);
  line-height: 1;
  margin-bottom: 18px;
  display: inline-block;
}
.post-text blockquote cite {
  font-size: 18px;
  display: block;
  margin-top: 10px;
  color: var(--clr-common-heading);
  font-style: inherit;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
}
.post-text blockquote cite::before {
  content: "";
  font-size: 28px;
  color: #ff5421;
  padding-bottom: 0;
  display: inline-block;
  background: var(--clr-theme-1);
  height: 2px;
  width: 40px;
  font-weight: 400;
  text-align: center;
  top: -4px;
  margin-right: 10px;
  position: relative;
}

.blog__tag {
  overflow: hidden;
  clear: both;
}
.blog__tag span {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  color: var(--clr-common-heading);
  margin-right: 5px;
  font-weight: 700;
}
.blog__tag a {
  display: inline-block;
  height: 30px;
  line-height: 26px;
  text-align: center;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid #e8e7ec;
  border-radius: 6px;
  margin-right: 8px;
  margin-bottom: 10px;
  text-transform: capitalize;
}
.blog__tag a:hover {
  color: var(--clr-common-white);
  background: var(--clr-theme-1);
  border-color: var(--clr-theme-1);
}

.blog__share span {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  color: var(--clr-common-heading);
  margin-right: 5px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 5px;
}

.blog__social ul {
  display: inline-block;
}
.blog__social ul li {
  display: inline-block;
  margin-right: 8px;
}
.blog__social ul li a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
  background: #f1f1f1;
  display: inline-block;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.blog__social ul li a:hover {
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.blog__author {
  padding: 30px 40px;
  box-shadow: 0px 1px 4px 0px rgba(10, 0, 58, 0.14);
  border-radius: 10px;
}
@media (max-width: 575px) {
  .blog__author {
    padding: 30px 15px;
  }
}
@media (max-width: 575px) {
  .blog__author-img {
    margin-right: 0px;
  }
}
.blog__author-img img {
  border-radius: 5px;
}
@media (max-width: 575px) {
  .blog__author-img img {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .blog__author-content {
    margin-top: 30px;
  }
}
.blog__author-content h5 {
  font-size: 18px;
  margin-bottom: 0;
  text-transform: capitalize;
}
.blog__author-content span {
  display: inline-block;
  margin-bottom: 5px;
}
@media (max-width: 575px) {
  .blog__author-content span {
    margin-bottom: 17px;
  }
}
.blog__author-content p {
  margin-bottom: 0px;
}

.post-comment-title h3 {
  font-size: 22px;
  text-transform: capitalize;
}

.comments-avatar {
  float: left;
  margin-right: 20px;
}
.comments-avatar img {
  border-radius: 50%;
}

.avatar-name {
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
}
.avatar-name h5 {
  font-size: 18px;
  margin-bottom: 0px;
  text-transform: capitalize;
}
.avatar-name span {
  font-size: 14px;
  font-weight: 500;
}

.comments-text {
  overflow: hidden;
  border-bottom: 1px solid #f1f0f7;
  padding-bottom: 30px;
  margin-bottom: 30px;
}
.comments-text p {
  margin-bottom: 20px;
}

.comment-reply {
  font-weight: 600;
  font-size: 14px;
  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;
}
.comment-reply:hover {
  color: var(--clr-theme-1);
}
.comment-reply i {
  padding-right: 4px;
}

.latest-comments li.children {
  margin-left: 105px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .latest-comments li.children {
    margin-left: 60px;
  }
}
@media (max-width: 575px) {
  .latest-comments li.children {
    margin-left: 15px;
  }
}

.latest-comments li:first-child .comments-box {
  border-top: 0;
  padding-top: 0;
}

/* post comment */
.post-input input {
  color: var(--clr-common-body);
  font-size: 16px;
  display: block;
  width: 100%;
  height: 55px;
  background: var(--clr-common-white);
  font-weight: 400;
  outline: none;
  padding: 0px 20px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid var(--clr-common-fcopy-border);
}
.post-input input:focus {
  border-color: none;
  outline: none;
  background: var(--clr-common-white);
}
.post-input input:focus::placeholder {
  opacity: 0;
}
.post-input textarea {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #f5f5f5;
  background: #f5f5f5;
}
.post-input textarea::placeholder {
  font-weight: 500;
  color: #686777;
}
.post-input textarea:focus {
  border-color: none;
  outline: none;
  background: var(--clr-common-white);
}
.post-input textarea:focus::placeholder {
  opacity: 0;
}
.post-input textarea {
  height: 170px;
  width: 100%;
  background: var(--clr-common-white);
  border: none;
  padding: 15px 20px;
  border-radius: 4px;
  resize: none;
  outline: 0;
  border: 1px solid var(--clr-common-fcopy-border);
}
.post-input textarea:focus {
  outline: none;
}

.post-comment-form h4 {
  font-size: 22px;
  margin-bottom: 0;
  text-transform: capitalize;
}

.post-comment-form &gt; span {
  display: inline-block;
  margin-bottom: 50px;
}

/* basic pagination */
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .basic-pagination {
    margin-bottom: 60px;
  }
}
.basic-pagination ul {
  padding-left: 0;
  line-height: 1;
}
.basic-pagination ul li {
  display: inline-block;
  margin-right: 10px;
}
.basic-pagination ul li span.current {
  color: #ffffff;
  background: var(--clr-theme-1);
}
.basic-pagination ul li a,
.basic-pagination ul li span {
  position: relative;
  overflow: hidden;
  background: #f1f1f1;
  color: var(--clr-common-heading);
  font-size: 20px;
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.basic-pagination ul li a:hover,
.basic-pagination ul li span.current {
  background: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.basic-pagination ul li a:hover i:first-child,
.basic-pagination ul li a:hover span:first-child {
  left: -130%;
}

.basic-pagination ul li a:hover i:last-child,
.basic-pagination ul li a:hover span:last-child {
  left: 50%;
}

.basic-pagination ul li a i,
.basic-pagination ul li a span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease-out 0s;
}

.basic-pagination ul li a i:last-child,
.basic-pagination ul li a span:last-child {
  left: 130%;
}

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

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

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

.blog__sidebar ul,
.blog__sidebar ol li {
  list-style: none;
}

.sidebar__widget ul li {
  margin-bottom: 15px;
  list-style: none;
}
.sidebar__widget ul li:last-child {
  margin-bottom: 0;
}
.sidebar__widget ul li a {
  padding-left: 20px;
  position: relative;
  font-weight: 500;
  color: var(--clr-common-body);
}
.sidebar__widget ul li a::after {
  position: absolute;
  content: "";
  left: 0;
  top: -4px;
  font-family: "Font Awesome 5 Pro";
  font-size: 16px;
  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;
}
.sidebar__widget ul li a:hover {
  color: var(--clr-theme-1);
}
.sidebar__widget ul li a:hover::after {
  left: 5px;
  color: var(--clr-theme-1);
}
.sidebar__widget-title {
  font-size: 22px;
  position: relative;
  padding-bottom: 12px;
  text-transform: capitalize;
}
.sidebar__widget-title::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 60px;
  height: 2px;
  background: var(--clr-common-heading);
}
.sidebar__widget select {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid #ddd;
}
.sidebar__widget-content .search {
  position: relative;
}
.sidebar__widget-content .search input {
  width: 100%;
  height: 50px;
  line-height: 50px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: none;
  outline: none;
  padding: 0px 40px 0px 15px;
  background: #f7f7f7;
  color: var(--clr-common-heading);
}
.sidebar__widget-content .search input::placeholder {
  color: #8f8f9a;
}
.sidebar__widget-content .search button {
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
  line-height: 50px;
  color: var(--clr-common-heading);
  background: transparent;
  border: none;
}

.sidebar__widget.widget_recent_comments ul li a::after,
.widget_rss ul li a::after,
.sidebar__widget.widget_recent_entries ul li a::after {
  display: none;
}

.sidebar__widget.widget_recent_comments ul li a,
.sidebar__widget.widget_recent_entries ul li a,
.widget_rss ul li a {
  padding-left: 0;
}

/* recent post */
.du-thumb img {
  border-radius: 10px;
}

.sidebar-posts-bg-thumb {
  height: 100px;
  width: 120px;
  border-radius: 10px;
  background-size: cover;
  background-position: left;
}

.du-text h6 {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 5px;
  text-transform: capitalize;
}
@media (max-width: 450px) {
  .du-text h6 {
    font-size: 16px;
  }
}

.du-text h6 a:hover {
  color: var(--clr-theme-1);
}

.du-meta span {
  font-weight: 500;
}

.du__comments ul li:hover .rc__comments-icon i {
  background: var(--clr-theme-1);
  border-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.du__comments-icon i {
  display: inline-block;
  font-size: 22px;
  width: 70px;
  height: 70px;
  line-height: 66px;
  text-align: center;
  color: #4636ff;
  border: 2px solid #dbdae0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.du__comments-content h6 {
  font-size: 14px;
  color: #1b133f;
  margin-bottom: 7px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}

.du__comments-content p {
  margin-bottom: 2px;
}

/* tags */
.tagcloud a {
  display: inline-block;
  height: 34px;
  line-height: 30px;
  text-align: center;
  padding: 0 19px;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid #e8e7ec;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  margin-right: 8px;
  margin-bottom: 10px;
  -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;
}
.tagcloud a:hover {
  color: var(--clr-common-white);
  background: var(--clr-theme-1);
  border-color: var(--clr-theme-1);
}

.footer__widget .tagcloud a {
  background: var(--clr-theme-1);
}

/*----------------------------------------*/
/*   09. forum CSS
/*----------------------------------------*/
.forum-search-bar .filter-by-search {
  display: grid;
  grid-template-columns: 220px auto;
}
@media (max-width: 575px) {
  .forum-search-bar .filter-by-search {
    display: inherit;
  }
}
.forum-search-bar .question-category-select {
  height: 60px;
  line-height: 60px;
  z-index: 1;
}
@media (max-width: 575px) {
  .forum-search-bar .question-category-select {
    margin-bottom: 30px;
  }
}
.forum-search-bar .filter-search-input-forum {
  position: relative;
}
.forum-search-bar .filter-search-input-forum input {
  width: 100%;
  height: 60px;
  padding: 0 35px 0 15px;
  font-size: 14px;
  color: var(--clr-common-body);
  outline: none;
  border: 1px solid #edeef2;
  border-radius: 0 10px 10px 0;
  z-index: -1;
}
@media (max-width: 575px) {
  .forum-search-bar .filter-search-input-forum input {
    border-radius: 10px;
  }
}
.forum-search-bar .filter-search-input-forum button {
  position: absolute;
  top: 50%;
  right: 15px;
  content: "";
  background: #fff;
  transform: translateY(-50%);
  color: var(--clr-theme-1);
  font-size: 14px;
}
@media (max-width: 575px) {
  .forum-search-bar .filter-search-input-forum button {
    top: 82%;
  }
}
.forum-search-bar .nice-select:hover {
  border-color: #edeef2;
}

.filter-by-search .nice-select:active,
.nice-select.open,
.nice-select:focus {
  border-color: #edeef2;
}

.filter-by-search .nice-select::after {
  width: 8px;
  height: 8px;
  right: 18px;
  margin-top: -5px;
}

.question-category-select {
  width: 223px;
  height: 50px;
  line-height: 50px;
  border: 1px solid var(--clr-common-fborder);
  border-radius: 10px 0 0 10px;
  color: var(--clr-common-heading);
  font-weight: 700;
}
@media (max-width: 575px) {
  .question-category-select {
    border-radius: 10px;
  }
}

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

.create-question-btn {
  height: 60px;
  background: var(--clr-theme-1);
  width: 100%;
  display: block;
  text-align: center;
  border: 1px solid var(--clr-theme-1);
  border-radius: 10px;
  line-height: 58px;
  color: var(--clr-common-white);
  font-weight: 700;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.create-question-btn:focus {
  color: var(--clr-common-white);
}
.create-question-btn:before {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  width: 40px;
  height: 40px;
  left: 10px;
  top: 10px;
  background: #4756e3;
  border-radius: 5px;
  font-weight: 500;
  line-height: 40px;
}
.create-question-btn:hover {
  background-color: var(--clr-common-hover);
  color: var(--clr-common-white);
  border-color: var(--clr-common-hover);
}

.q-single-wrapper {
  border: 1px solid var(--clr-common-fborder);
  border-radius: 10px;
}

.q-single-content {
  padding: 40px 40px 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .q-single-content {
    padding: 30px 20px 15px;
  }
}
@media (max-width: 575px) {
  .q-single-content {
    padding: 30px 15px 15px;
  }
}
.q-single-content .profile-img img {
  width: 70px;
  border: 0;
}

.author-name-time {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}

.name-post-time .artist-name {
  font-size: 20px;
  margin-bottom: 7px;
}

.post-date-time {
  display: flex;
  gap: 20px;
}

.post-date {
  font-size: 14px;
  color: var(--clr-common-body);
  line-height: 1;
}

.post-time {
  font-size: 14px;
  color: var(--clr-common-body);
  line-height: 1;
}

.item-border-before {
  position: relative;
}
.item-border-before:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background: #b9b9b9;
  left: -10px;
  top: -1px;
}

.post-question {
  font-size: 24px;
  margin-bottom: 13px;
}
@media (max-width: 575px) {
  .post-question {
    font-size: 22px;
  }
}

.post-inner-tags .tag {
  color: var(--clr-theme-1);
  font-size: 15px;
  font-weight: 400;
  padding: 0;
  height: inherit;
  border: 0;
  background: none;
  line-height: 1;
  border-radius: 0;
}

.tags-list.post-inner-tags {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 25px;
  margin-bottom: 8px;
}

.q-meta-type {
  font-size: 15px;
  color: var(--clr-common-heading);
  line-height: 1;
}

.q-meta-likes {
  font-size: 15px;
  color: var(--clr-common-heading);
  line-height: 1;
}

.q-meta-comments {
  font-size: 15px;
  color: var(--clr-common-heading);
  line-height: 1;
}

.q-meta-shares {
  font-size: 15px;
  color: var(--clr-common-heading);
  line-height: 1;
}

.q-meta-icon {
  font-size: 15px;
  color: var(--clr-common-heading);
  line-height: 1;
  margin-right: 5px;
}

.q-meta-item {
  display: flex;
  gap: 5px;
  align-items: center;
}
.q-meta-item a {
  display: flex;
  gap: 5px;
  align-items: center;
}
.q-meta-item button {
  display: flex;
  gap: 5px;
  align-items: center;
}

.q-meta-views {
  font-size: 15px;
  color: var(--clr-common-heading);
  line-height: 1;
}

.profile-img img {
  border: 5px solid var(--clr-bg-white);
  border-radius: 50%;
  background: var(--clr-bg-white);
}

.q-meta-viewed-member {
  padding-left: 19px;
  line-height: 1;
  margin-right: 5px;
}
.q-meta-viewed-member .profile-img {
  display: inline-block;
}
.q-meta-viewed-member .profile-img img {
  width: 32px;
  border-width: 3px;
  margin-left: -19px;
  border: 3px solid var(--clr-common-white);
  border-radius: 50%;
}

.q-meta-content {
  display: flex;
  flex-wrap: wrap;
}
.q-meta-content .q-meta-item {
  border-top: 1px solid var(--clr-common-fborder);
  border-right: 1px solid var(--clr-common-fborder);
  height: 50px;
  flex-grow: 1;
  justify-content: center;
  padding: 0 10px;
}
.q-meta-content .q-meta-item:last-child {
  border-right: 0;
}

.comments-show .q-meta-content .q-meta-item {
  border-bottom: 1px solid var(--clr-common-fborder);
}

.q-write-answer {
  padding: 30px 40px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .q-write-answer {
    padding: 30px 20px;
  }
}
@media (max-width: 575px) {
  .q-write-answer {
    padding: 30px 15px;
  }
}
.q-write-answer .profile-img img {
  width: 60px;
  border: 0;
}
.q-write-answer .answer-submit {
  flex-grow: 1;
}

.answer-submit textarea {
  border: 1px solid var(--clr-common-fborder);
  border-radius: 10px;
  height: 150px;
  width: 100%;
  resize: none;
  padding: 15px 20px;
  margin-bottom: 20px;
}

.answer-submit-btn {
  text-align: right;
}

.q-answers {
  padding: 0 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .q-answers {
    padding: 0 20px;
  }
}
@media (max-width: 575px) {
  .q-answers {
    padding: 0 15px;
  }
}
.q-answers .q-single-answer:last-child {
  border-bottom: 0;
}

.q-single-answer {
  border-bottom: 1px solid var(--clr-common-fborder);
  margin-bottom: 30px;
}
.q-single-answer .profile-img img {
  width: 50px;
  border: 0;
}
.q-single-answer .name-post-time .artist-name {
  font-size: 18px;
}
.q-single-answer .post-date {
  font-size: 12px;
}
.q-single-answer .post-time {
  font-size: 12px;
}
.q-single-answer .author-name-time {
  gap: 10px;
}

.ans-meta-content {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.ans-meta-content .q-meta-item {
  padding-right: 20px;
  border-right: 1px solid #e3e3e3;
}
.ans-meta-content .q-meta-item:last-child {
  padding-right: 0;
  border-right: 0;
}
.ans-meta-content .q-meta-item button * {
  color: var(--clr-theme-1);
}
.ans-meta-content .q-meta-icon {
  font-size: 15px;
}
.ans-meta-content .q-meta-likes {
  font-size: 14px;
}
.ans-meta-content .q-meta-type {
  font-size: 14px;
}

.answer-text {
  margin-bottom: 15px;
}

.q-answers-btn {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 30px;
}

/*----------------------------------------*/
/*  10. Testimonial
/*----------------------------------------*/
.grey-bg {
  background-color: var(--clr-bg-grey-bg);
}

.du-testimonial-item .du-testimonial-icon i {
  font-size: 50px;
  line-height: 1;
  display: inline-block;
  color: var(--clr-theme-1);
}
.du-testimonial-item p {
  font-size: 20px;
  line-height: 1.6;
  font-style: italic;
}
@media (max-width: 575px) {
  .du-testimonial-item p {
    font-size: 18px;
  }
}
.du-testimonial-item .du-testimonial-title {
  font-size: 20px;
  line-height: 1.12;
  font-weight: 700;
  margin-bottom: 3px;
}
.du-testimonial-item span {
  font-size: 14px;
  display: block;
}

.testimonial-nav {
  width: 350px;
  margin: 0 auto;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-nav {
    width: 300px;
  }
}
.testimonial-nav .swiper-slide {
  width: 90px;
  text-align: center;
}
.testimonial-nav .swiper-slide .du-testimonial-img {
  height: 80px;
  width: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid var(--clr-common-white);
  display: inline-block;
}
.testimonial-nav .swiper-slide .du-testimonial-img img {
  cursor: pointer;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.testimonial-nav .swiper-slide.swiper-slide-prev + .swiper-slide-active .du-testimonial-img {
  height: 104px;
  width: 104px;
  border: 7px solid var(--clr-common-white);
  transform: translateX(-12px);
}

.testimonial-nav .swiper-slide.swiper-slide-prev .du-testimonial-img,
.testimonial-nav .swiper-slide.swiper-slide-next .du-testimonial-img {
  margin-top: 13px;
}

.du-testimonial2 p {
  font-size: 24px;
  line-height: 1.4;
  font-family: "Roboto", sans-serif;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .du-testimonial2 p {
    font-size: 18px;
  }
}
.du-testimonial2-icon i {
  font-size: 35px;
  color: var(--clr-theme-1);
}
.du-testimonial2__client-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.du-testimonial2__client-info-title {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--clr-common-heading);
  margin-bottom: 3px;
}
.du-testimonial2__client-info span {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: var(--clr-common-body);
}

.swiper-pagination-team {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 20px;
}
.swiper-pagination-team span {
  display: inline-block;
  margin-right: 15px;
  width: 10px;
  height: 10px;
}
.swiper-pagination-team .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--clr-theme-1);
}

/*----------------------------------------*/
/*   11. price CSS
/*----------------------------------------*/
.price-tabs {
  background-color: transparent;
}

.price__tab ul li {
  margin-right: 20px;
  margin-bottom: 9px;
}
@media (max-width: 575px) {
  .price__tab ul li {
    margin-right: 10px;
  }
}
.price__tab ul li:last-child {
  margin-right: 0px;
}
.price__tab .nav-pills .nav-link {
  border-radius: 0.25rem;
  padding: 7px 30px;
  font-size: 15px;
  color: var(--clr-common-heading);
  border: 1px solid var(--clr-common-fcopy-border);
  background-color: var(--clr-bg-white);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.price__tab .nav-pills .nav-link:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-bg-white);
  border-color: var(--clr-theme-1);
}
.price__tab .nav-pills .nav-link.active {
  border: 1px solid transparent;
}
.price__tab .nav-pills .nav-link.active,
.price__tab .nav-pills .show &gt; .nav-link {
  color: #fff;
  background-color: var(--clr-theme-1);
}

.duprice {
  padding: 30px 35px;
  box-shadow: 0px 10px 80px rgba(8, 18, 71, 0.08);
  border-radius: 10px;
  background: var(--clr-common-white);
  box-shadow: 0px 10px 80px rgba(8, 18, 71, 0.08);
}
.duprice__top {
  text-align: center;
  border-bottom: 1px solid var(--clr-common-fcopy-border);
  padding-bottom: 24px;
}
.duprice__top span {
  color: var(--clr-common-heading);
  margin-bottom: 6px;
  display: inline-block;
}
.duprice__top .price-title {
  font-size: 36px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}
.duprice__bottom {
  margin-top: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .duprice__bottom ul {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}
.duprice__bottom ul li {
  margin-bottom: 7px;
  font-size: 15px;
}
.duprice__bottom ul li i {
  margin-right: 12px;
  color: var(--clr-theme-1);
}
.duprice .price-btn {
  padding: 0px 55px;
  height: 50px;
  line-height: 50px;
}

.duprice-color {
  background: linear-gradient(#8067ff 0%, #3817e3 100%);
}
.duprice-color .duprice__top span {
  color: var(--clr-common-white);
}
.duprice-color .duprice__top .price-title {
  color: var(--clr-common-white);
}
.duprice-color .bottom-ulcolor li {
  color: var(--clr-common-white);
}
.duprice-color .bottom-ulcolor li i {
  color: var(--clr-common-white);
}
.duprice-color .price-color-white .price-btn {
  background-color: var(--clr-bg-white);
  color: var(--clr-common-heading);
  border: 1px solid var(--clr-common-white);
}
.duprice-color .price-color-white .price-btn:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
  border: 1px solid var(--clr-common-white);
}

.price-shape1 {
  position: absolute;
  right: 0;
  animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .price-shape1 {
    display: none;
  }
}

.price-shape2 {
  position: absolute;
  top: 67%;
  left: -28%;
  animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .price-shape2 {
    display: none;
  }
}

.price-shape3 {
  position: absolute;
  right: 0;
  top: 42%;
  z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .price-shape3 {
    display: none;
  }
}

.duprice-icon {
  position: absolute;
  right: 13px;
  top: 9px;
}
.duprice-icon i {
  color: var(--clr-common-white);
}

/*----------------------------------------*/
/*   12. video CSS
/*----------------------------------------*/
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .video__left {
    margin-bottom: 30px;
  }
}

.video__left-shape {
  position: absolute;
  left: 10%;
  top: 4%;
  z-index: -1;
}
@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) {
  .video__left-shape {
    left: 0%;
    top: -15%;
  }
}
@media (max-width: 575px) {
  .video__left-shape {
    display: none;
  }
}

.video__right {
  box-shadow: 0px 20px 80px rgba(8, 18, 71, 0.2);
  border-radius: 10px;
  margin-left: -30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .video__right {
    margin-left: 0px;
  }
}
.video__right img {
  width: 100%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .video__right {
    margin-top: 0px;
  }
}
.video__right .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  background: linear-gradient(#5f40ff 0%, #905bfa 55.3%, #b870f6 100%);
  display: block;
  line-height: 70px;
  border-radius: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  animation: pulse 2s infinite;
  color: var(--clr-common-white);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.video__right .play-btn:hover {
  color: var(--clr-bg-information);
}

.video__left-item {
  padding: 20px 20px 18px 20px;
  max-width: 275px;
  box-shadow: 0px 20px 30px rgba(8, 18, 71, 0.08);
  -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-radius: 5px;
}
.video__left-item-title {
  font-size: 16px;
  color: var(--clr-common-heading);
  font-weight: 500;
  margin-bottom: 0px;
  line-height: 26px;
}

.video__left-item2,
.video__left-item2,
.video__left-item3 {
  box-shadow: none;
}
.video__left-item2:hover,
.video__left-item2:hover,
.video__left-item3:hover {
  box-shadow: 0px 20px 30px rgba(8, 18, 71, 0.08);
}

/*----------------------------------------*/
/*   13. faq CSS
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .faq-area {
    padding-top: 100px;
  }
}

.faq-content .accordion-body {
  padding: 20px 30px 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq-content .accordion-body {
    padding: 20px 20px 20px;
  }
}
@media (max-width: 575px) {
  .faq-content .accordion-body {
    padding: 20px 15px 20px;
  }
}
.faq-content .accordion-body p {
  margin-bottom: 0px;
  font-size: 16px;
}

.faq-content .accordion-item {
  background: #fff;
  box-shadow: 0px 0px 30px rgba(10, 31, 90, 0.08);
  border-radius: 10px;
  margin-bottom: 15px;
}

.faq-content .accordion-item .accordion-header {
  padding: 0px 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq-content .accordion-item .accordion-header {
    padding: 0px 20px;
  }
}
@media (max-width: 575px) {
  .faq-content .accordion-item .accordion-header {
    padding: 0px 15px;
  }
}

.faq-content .accordion-item .accordion-button {
  border-radius: 0;
  font-size: 18px;
  font-weight: 500;
  height: 70px;
  padding: 0px 0px;
  color: var(--clr-common-heading);
  text-align: left;
}
@media (max-width: 575px) {
  .faq-content .accordion-item .accordion-button {
    font-size: 16px;
  }
}

.faq-white .accordion-button {
  color: #222429;
  background: #ffffff;
  border: 1px solid transparent;
  font-size: 18px;
  font-weight: 500;
  color: #1a1c20;
}

.faq-white .accordion-button:focus {
  z-index: 3;
  border-color: none;
  outline: 0;
  box-shadow: none;
}

.accordion-button::after {
  font-family: "Font Awesome 5 pro";
  width: auto;
  height: auto;
  margin-left: auto;
  content: "";
  background: none !important;
  color: var(--clr-common-heading);
  font-size: 16px;
}

.accordion-button:not(.collapsed)::after {
  content: "";
  font-family: "Font Awesome 5 Pro";
  color: var(--clr-common-heading);
  font-size: 16px;
}

.faq-content .accordion-collapse {
  border: none;
}

.accordion-button:not(.collapsed) {
  border-bottom: 1px solid #f1f1f1;
}

.course-tabs {
  margin-right: -30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) {
  .course-tabs {
    margin-right: 0px;
  }
}

.home2-faq {
  padding: 30px 30px 30px;
  border-radius: 10px;
  background: var(--clr-common-white);
  margin-left: 70px;
  background: var(--clr-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .home2-faq {
    padding: 20px 20px;
    margin-left: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .home2-faq {
    padding: 30px 20px 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) {
  .home2-faq {
    margin-left: 0px;
  }
}
@media (max-width: 575px) {
  .home2-faq {
    padding: 15px;
  }
}
.home2-faq .nav-pills .nav-link.active,
.home2-faq .nav-pills .show &gt; .nav-link {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-1);
  font-weight: 500;
}
.home2-faq .nav-pills .nav-link {
  text-align: left;
  color: var(--clr-common-heading);
  font-size: 16px;
  font-weight: 400;
  height: 55px;
  position: relative;
  padding-left: 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;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .home2-faq .nav-pills .nav-link {
    padding-left: 15px;
  }
}
.home2-faq .nav-pills .nav-link:hover:before {
  opacity: 1;
  visibility: visible;
}
.home2-faq .nav-pills .nav-link::before {
  position: absolute;
  content: "";
  height: 30px;
  width: 3px;
  left: 0;
  background: var(--clr-theme-1);
  opacity: 0;
  visibility: hidden;
}

/*----------------------------------------*/
/*   14. team CSS
/*----------------------------------------*/
.duteam-social a {
  color: var(--clr-common-f-social);
  font-size: 15px;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  background: var(--clr-common-white);
  display: inline-block;
  border-radius: 100%;
  margin: 0 2px;
  -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;
}
.duteam-social a:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}
.duteam-img {
  overflow: hidden;
  border-radius: 10px;
}
.duteam-img img {
  border-radius: 10px;
  width: 100%;
  transform: scale(1);
  transition: 0.4s ease-in-out;
  overflow: hidden;
}
.duteam-img::before {
  position: absolute;
  background: linear-gradient(rgba(26, 28, 32, 0.02) 60%, #352874 100%);
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  border-radius: 10px;
}
.duteam-thumb-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 30px;
  padding-bottom: 10px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .duteam-thumb-info {
    padding: 20px 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .duteam-thumb-info {
    padding: 0px;
  }
}
.duteam:hover .duteam-thumb-info {
  opacity: 1;
  visibility: visible;
  padding-bottom: 30px;
}
.duteam:hover .duteam-img::before {
  opacity: 1;
  visibility: visible;
}
.duteam-info-author {
  margin-bottom: 3px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--clr-common-heading);
  margin-bottom: 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;
}
.duteam-info-author:hover {
  color: var(--clr-theme-1);
}
.duteam-info span {
  font-size: 14px;
  color: var(--clr-common-body);
}
.duteam:hover .duteam-img img {
  transform: scale(1.1);
}

.du_team-right {
  margin-bottom: 20px;
}
.du_team-right-btn {
  background-color: transparent;
  color: var(--clr-theme-1);
}
.du_team-right-btn:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.duteam__sidebar-widget-single {
  padding: 20px 20px 10px 20px;
  background-color: #f6f7f8;
  border-radius: 10px;
}

.team__sidebar--widget__info li {
  margin-bottom: 10px;
}
.team__sidebar--widget__info-text h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}
.team__sidebar--widget__info-text h5 i {
  margin-right: 10px;
}
.team__sidebar--widget__info-text span {
  padding-left: 26px;
}
.team__sidebar--widget__info-text span a:hover {
  color: var(--clr-theme-1);
}

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

.team-details-subtitle {
  font-size: 26px;
  text-transform: capitalize;
}

.team-single-portfolio-img img {
  width: 100%;
}

.team__qualification-single-title {
  font-size: 18px;
  text-transform: capitalize;
  color: var(--clr-theme-1);
}
.team__qualification-single span {
  margin-bottom: 3px;
  display: inline-block;
}

/*----------------------------------------*/
/*   15. terms CSS
/*----------------------------------------*/
.terms-bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
}

.terms-shape {
  position: absolute;
  top: -89%;
  z-index: -1;
  left: 5%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .terms-shape {
    top: -23%;
    width: 50%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .terms-shape {
    display: none;
  }
}

@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), (max-width: 575px) {
  .terms__section {
    padding: 0px 50px;
  }
}
@media (max-width: 575px) {
  .terms__section {
    padding: 0px 15px;
  }
}
.terms__section-img img {
  margin-top: 25px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .terms__section-img img {
    width: 100%;
  }
}

.terms-content {
  padding: 90px 0px 72px 0px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .terms-content {
    padding: 50px 0px 60px 0px;
  }
}

/*----------------------------------------*/
/*   16. cta CSS
/*----------------------------------------*/
.cta-btn {
  text-align: right;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cta-btn {
    text-align: inherit;
    margin-top: 30px;
  }
}

.cta-title h2 {
  font-size: 30px;
  color: var(--clr-common-white);
  margin-bottom: 0px;
}
@media (max-width: 450px) {
  .cta-title h2 {
    font-size: 24px;
  }
}

.theme_btn_bg {
  border: 1px solid var(--clr-common-white);
}
.theme_btn_bg:hover {
  border: 1px solid var(--clr-common-white);
  color: var(--clr-theme-1);
  background-color: var(--clr-common-white);
}

.cta__shape1 {
  position: absolute;
  top: 0;
  left: 48.2%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cta__shape1 {
    left: 38%;
  }
}

.cta__shape2 {
  position: absolute;
  bottom: 0;
  left: 10.5%;
}

/*----------------------------------------*/
/*   17. documy CSS
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .documy-pb {
    padding-bottom: 45px;
  }
}

@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), (max-width: 575px) {
  .sidebar-du-featured {
    margin-right: 0px;
  }
}

.search-common {
  max-width: 630px;
}
.search-common input {
  border-radius: 30px;
  padding: 0 50px 0 30px;
  box-shadow: 0px 5px 20px rgba(6, 21, 62, 0.1);
}

/*----------------------------------------*/
/*   18. docs CSS
/*----------------------------------------*/
.du__docs {
  border-left: 1px solid var(--clr-common-fcopy-border);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .du__docs {
    padding-left: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .du__docs {
    padding-left: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .du__docs {
    padding-left: 0px;
    border-left: none;
  }
}
.du__docs-right-title h2 {
  font-size: 30px;
}
@media (max-width: 450px) {
  .du__docs-right-title h2 {
    font-size: 24px;
  }
}
.du__docs-tag {
  border-bottom: 1px solid var(--clr-common-fcopy-border);
}
.du__docs-tag span {
  font-size: 16px;
  color: var(--clr-common-body);
  margin-right: 5px;
  font-weight: 500;
}
.du__docs-tag a {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 0 13px;
  font-size: 14px;
  margin-left: 8px;
  background-color: #f3f2f6;
  color: var(--clr-common-body);
  border-radius: 5px;
  margin-bottom: 5px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.du__docs-tag a:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.du__docs-suppport-left p {
  font-size: 16px;
}
.du__docs-suppport-left p i {
  margin-right: 10px;
}
.du__docs-suppport-left p a {
  color: var(--clr-theme-1);
  margin-left: 10px;
  -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;
}
.du__docs-suppport-left p a:hover {
  color: var(--clr-common-hover);
}

@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .du__docs-suppport-right {
    text-align: left !important;
  }
}
.du__docs-suppport-right span {
  font-size: 16px;
  color: var(--clr-common-body);
}
.du__docs-suppport-right a {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 0 22px;
  font-size: 14px;
  margin-left: 16px;
  background-color: var(--clr-common-green3);
  color: var(--clr-common-white);
  border-radius: 3px;
  margin-bottom: 5px;
}
.du__docs-suppport-right a:last-child {
  background-color: var(--clr-common-red2);
}

.du__docs-bottom-box {
  padding: 30px 30px 22px 30px;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
}
.du__docs-bottom-box h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}
.du__docs-bottom-box-author-img img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.du__docs-bottom-box-author-content h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 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;
}
.du__docs-bottom-box-author-content h4:hover {
  color: var(--clr-theme-1);
}
.du__docs-bottom-box-author-content span {
  font-size: 14px;
}
.du__docs-bottom-box-author-content ul li {
  margin-bottom: 5px;
}
.du__docs-bottom-box-author-content ul li:last-child {
  margin-bottom: 0px;
}
.du__docs-bottom-box-author-content ul li i {
  margin-right: 10px;
  vertical-align: middle;
}
.du__docs-bottom-box-author-content ul li a {
  -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-body);
  text-decoration: none;
}
.du__docs-bottom-box-author-content ul li a:hover {
  color: var(--clr-theme-1);
}

.box-color {
  background: var(--clr-common-box-bg);
  border: 1px solid #ebeffe;
}

/*----------------------------------------*/
/*   19. sidebar CSS
/*----------------------------------------*/
.du__sidebar-left {
  margin-right: -15px;
}
.du__sidebar-left-topics h4 {
  font-size: 24px;
  font-family: "Roboto", sans-serif;
}
@media (max-width: 450px) {
  .du__sidebar-left-topics h4 {
    font-size: 22px;
  }
}

.sidebar-nav ul {
  list-style: none;
}
.sidebar-nav .metismenu {
  display: flex;
  flex-direction: column;
}
.sidebar-nav .metismenu &gt; li {
  display: flex;
  flex-direction: column;
  position: relative;
}
.sidebar-nav .metismenu .mm-active &gt; a {
  background: transparent;
  border-radius: 3px;
  color: var(--clr-theme-1);
}
.sidebar-nav .metismenu .mm-active &gt; a:hover {
  color: var(--clr-theme-1);
}
.sidebar-nav .metismenu .mm-active &gt; a:focus {
  color: var(--clr-theme-1);
}
.sidebar-nav .metismenu li + li:first-child {
  margin-top: 5px;
}
.sidebar-nav .metismenu a {
  position: relative;
  display: block;
  padding: 11px 0px;
  font-size: 16px;
  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;
  text-decoration: none;
}
.sidebar-nav .metismenu a:hover {
  color: var(--clr-theme-1) !important;
}
.sidebar-nav .metismenu a img {
  margin-right: 15px;
}
.sidebar-nav .metismenu ul li {
  margin-bottom: 2px;
  padding-left: 5px;
  padding-right: 10px;
}
.sidebar-nav .metismenu ul li:first-child {
  padding-top: 15px;
}
.sidebar-nav .metismenu ul li:last-child {
  padding-bottom: 5px;
}
.sidebar-nav .metismenu ul a {
  padding: 0px;
  font-size: 15px;
  color: var(--clr-common-body);
  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;
  display: flex;
}
.sidebar-nav .metismenu ul a:hover {
  color: var(--clr-theme-1);
}
.sidebar-nav .metismenu ul a:hover i {
  color: var(--clr-theme-1);
  vertical-align: middle;
}
.sidebar-nav .metismenu ul a i {
  margin-right: 13px;
  vertical-align: middle;
  color: var(--clr-common-heading);
}
.sidebar-nav .metismenu ul ul a {
  padding: 10px 15px 10px 45px;
}

.sidebar-nav .metismenu a:hover,
.sidebar-nav .metismenu a:focus,
.sidebar-nav .metismenu a:active,
.sidebar-nav .metismenu .mm-active &gt; a {
  color: #0c63e4;
  text-decoration: none;
}

/*----------------------------------------*/
/*   20. component CSS
/*----------------------------------------*/
.component-wigdets-items ul li {
  min-width: 300px;
  margin-right: 30px;
  margin-bottom: 30px;
  display: inline-block;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .component-wigdets-items ul li {
    margin-right: 0px;
    min-width: 290px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .component-wigdets-items ul li {
    margin-right: 5px;
  }
}
.component-wigdets-items ul li a {
  height: 80px;
  display: inline-block;
  line-height: 80px;
  padding: 0px 30px;
  background: var(--clr-bg-grey2-bg);
  color: var(--clr-common-body);
  font-size: 16px;
  width: 100%;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.component-wigdets-items ul li a:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
  box-shadow: 0px 30px 50px rgba(6, 21, 62, 0.1);
}
.component-wigdets-items ul li a:hover i {
  color: var(--clr-common-white);
}
.component-wigdets-items ul li a i {
  margin-right: 10px;
  vertical-align: middle;
  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;
}

/*----------------------------------------*/
/*   21. list-widgets CSS
/*----------------------------------------*/
.list__widgets-title h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--clr-common-heading);
}
.list__widgets-items ul {
  margin-left: 45px;
}
.list__widgets-items ul li {
  font-size: 16px;
  margin-bottom: 8px;
}
.list__widgets .order-list li {
  list-style-type: decimal;
}
.list__widgets .unorder-list li {
  list-style-type: disc;
}
.list__widgets .roman-list li {
  list-style-type: upper-roman;
}
.list__widgets .check-list li i {
  margin-left: -24px;
  margin-right: 9px;
  color: var(--clr-theme-1);
}

/*----------------------------------------*/
/*   22. message-widgets CSS
/*----------------------------------------*/
.message__widgets {
  padding: 30px 40px 20px;
  border: 1.5px solid #e8e8e8;
  border-radius: 10px;
  margin-bottom: 30px;
}
@media (max-width: 450px) {
  .message__widgets {
    padding: 30px 19px 20px;
  }
}
.message__widgets-title h4 {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 500;
}
.message__widgets-icons i {
  font-size: 25px;
  margin-right: 15px;
}

.message__widgets-2 {
  border: 1.5px solid #25b55f;
}
.message__widgets-2 i {
  color: #25b55f;
}

.message__widgets-nborder {
  border: none !important;
}

.message__widgets-3 {
  border: 1.5px solid #f8b61b;
}
.message__widgets-3 i {
  color: #f8b61b;
}

.message__widgets-4 {
  border: 1.5px solid #db1a1a;
}
.message__widgets-4 i {
  color: #db1a1a;
}

.message__widgets-5 {
  border: 1.5px solid #1a47db;
}
.message__widgets-5 i {
  color: #1a47db;
}

.message__widgets-alert-icon {
  position: absolute;
  right: 18px;
  top: 19px;
}
.message__widgets-alert-icon i {
  font-size: 20px;
}

/*----------------------------------------*/
/*   23. button-widgets CSS
/*----------------------------------------*/
.button__widets-title h4 {
  font-size: 20px;
  font-weight: 500;
}
.button__widets-group {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.primary-btn {
  font-size: 16px;
  color: var(--clr-common-white);
  height: 55px;
  line-height: 55px;
  text-align: center;
  width: 160px;
  border-radius: 3px;
  display: inline-block;
  background: var(--clr-common-blue);
  font-weight: 500;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  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;
}
.primary-btn:hover {
  color: var(--clr-theme-1);
  background-color: transparent;
  border: 1px solid var(--clr-theme-1);
}

.primary-btn-radius {
  font-size: 16px;
  color: var(--clr-common-white);
  height: 55px;
  line-height: 55px;
  text-align: center;
  width: 160px;
  border-radius: 30px;
  display: inline-block;
  background: var(--clr-common-blue);
  font-weight: 500;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}
.primary-btn-radius:hover {
  color: var(--clr-theme-1);
  background-color: transparent;
  border: 1px solid var(--clr-theme-1);
}

.primary-btn-transparent {
  font-size: 16px;
  color: var(--clr-theme-1);
  height: 55px;
  line-height: 55px;
  text-align: center;
  width: 160px;
  border-radius: 30px;
  display: inline-block;
  background: transparent;
  font-weight: 500;
  border: 1px solid var(--clr-theme-1);
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.primary-btn-transparent:hover {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.primary-btn-text {
  font-size: 16px;
  color: var(--clr-common-heading);
  height: 55px;
  line-height: 55px;
  text-align: center;
  border-radius: 30px;
  display: inline-block;
  background: none;
  font-weight: 500;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.primary-btn-text:hover {
  color: var(--clr-theme-1);
}

.primary-btn-border-btm:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 75px;
  bottom: 15px;
  background-color: var(--clr-theme-1);
}

.secondary-btn-border-btm:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 75px;
  bottom: 15px;
  background-color: var(--clr-bg-secondary);
}
.secondary-btn-border-btm:hover {
  color: var(--clr-common-heading);
}

.success-btn-border-btm:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 75px;
  bottom: 15px;
  background-color: var(--clr-bg-success);
}
.success-btn-border-btm:hover {
  color: var(--clr-bg-success);
}

.warning-btn-border-btm:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 75px;
  bottom: 15px;
  background-color: var(--clr-bg-warning);
}
.warning-btn-border-btm:hover {
  color: var(--clr-bg-warning);
}

.danger-btn-border-btm:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 75px;
  bottom: 15px;
  background-color: var(--clr-bg-danger);
}
.danger-btn-border-btm:hover {
  color: var(--clr-bg-danger);
}

.information-btn-border-btm:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 75px;
  bottom: 15px;
  background-color: var(--clr-bg-information);
}
.information-btn-border-btm:hover {
  color: var(--clr-bg-information);
}

.secondary-btn {
  background-color: var(--clr-bg-secondary);
}
.secondary-btn:hover {
  background-color: transparent;
  color: var(--clr-common-heading);
  border: 1px solid var(--clr-common-heading);
}

.secondary-btn-radius {
  background-color: var(--clr-bg-secondary);
  border-radius: 30px;
}
.secondary-btn-radius:hover {
  background-color: transparent;
  color: var(--clr-common-heading);
  border: 1px solid var(--clr-common-heading);
}

.secondary-btn-transparent {
  border: 1px solid var(--clr-common-heading);
  color: var(--clr-common-heading);
}
.secondary-btn-transparent:hover {
  background-color: var(--clr-common-heading);
  color: var(--clr-common-white);
  border: 1px solid var(--clr-common-heading);
}

.success-btn {
  background-color: var(--clr-bg-success);
}
.success-btn:hover {
  background-color: transparent;
  border: 1px solid var(--clr-bg-success);
  color: var(--clr-bg-success);
}

.success-btn-radius {
  background-color: var(--clr-bg-success);
  border-radius: 30px;
}
.success-btn-radius:hover {
  background-color: transparent;
  border: 1px solid var(--clr-bg-success);
  color: var(--clr-bg-success);
}

.success-btn-transparent {
  border: 1px solid var(--clr-bg-success);
  color: var(--clr-bg-success);
}
.success-btn-transparent:hover {
  background-color: var(--clr-bg-success);
  border: 1px solid var(--clr-bg-success);
  color: var(--clr-common-white);
}

.warning-btn {
  background-color: var(--clr-bg-warning);
}
.warning-btn:hover {
  background-color: transparent;
  border: 1px solid var(--clr-bg-warning);
  color: var(--clr-bg-warning);
}

.warning-btn-radius {
  background-color: var(--clr-bg-warning);
  border-radius: 30px;
}
.warning-btn-radius:hover {
  background-color: transparent;
  border: 1px solid var(--clr-bg-warning);
  color: var(--clr-bg-warning);
}

.warning-btn-transparent {
  border: 1px solid var(--clr-bg-warning);
  color: var(--clr-bg-warning);
}
.warning-btn-transparent:hover {
  background-color: var(--clr-bg-warning);
  border: 1px solid var(--clr-bg-warning);
  color: var(--clr-common-white);
}

.danger-btn {
  background-color: var(--clr-bg-danger);
}
.danger-btn:hover {
  background-color: transparent;
  color: var(--clr-bg-danger);
  border: 1px solid var(--clr-bg-danger);
}

.danger-btn-radius {
  background-color: var(--clr-bg-danger);
  border-radius: 30px;
}
.danger-btn-radius:hover {
  background-color: transparent;
  color: var(--clr-bg-danger);
  border: 1px solid var(--clr-bg-danger);
}

.danger-btn-transparent {
  border: 1px solid var(--clr-bg-danger);
  color: var(--clr-bg-danger);
}
.danger-btn-transparent:hover {
  background-color: var(--clr-bg-danger);
  color: var(--clr-common-white);
  border: 1px solid var(--clr-bg-danger);
}

.information-btn {
  background-color: var(--clr-bg-information);
}
.information-btn:hover {
  background-color: transparent;
  border: 1px solid var(--clr-bg-information);
  color: var(--clr-bg-information);
}

.information-btn-radius {
  background-color: var(--clr-bg-information);
  border-radius: 30px;
}
.information-btn-radius:hover {
  background-color: transparent;
  border: 1px solid var(--clr-bg-information);
  color: var(--clr-bg-information);
}

.information-btn-transparent {
  border: 1px solid var(--clr-bg-information);
  color: var(--clr-bg-information);
}
.information-btn-transparent:hover {
  background-color: var(--clr-bg-information);
  border: 1px solid var(--clr-bg-information);
  color: var(--clr-common-white);
}

/*----------------------------------------*/
/*   24. tabs-widgets CSS
/*----------------------------------------*/
.tabs__widgets-title h4 {
  font-size: 20px;
  font-weight: 500;
}

.tabs__widets-default-menu-link {
  border-bottom: 1px solid var(--clr-common-fcopy-border);
  width: 511px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tabs__widets-default-menu-link {
    width: auto;
    border-bottom: none;
  }
}
.tabs__widets-default-menu-link .nav-link {
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--clr-common-heading);
  padding: 8px 23px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tabs__widets-default-menu-link .nav-link {
    padding: 8px 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tabs__widets-default-menu-link .nav-link {
    padding: 8px 14px;
  }
}

@media (max-width: 575px) {
  .default-tabs {
    flex-direction: column;
    align-items: start !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .default-tabs-img {
    margin-right: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .default-tabs-img {
    margin-right: 0px;
    margin-bottom: 20px;
  }
}

.tabs__widets-default-menu-link .nav-link.active {
  border-bottom: 1px solid var(--clr-theme-1);
  color: var(--clr-common-heading);
}

.tabs__widets-box-menu-link .nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--clr-common-heading);
  padding: 7px 23px;
  background-color: #f4f4f9;
  border-left: 1px solid #e4e4f5;
  border-radius: 0px;
  z-index: 1;
  margin-bottom: 0px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tabs__widets-box-menu-link .nav-link {
    padding: 7px 16px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tabs__widets-box-menu-link .nav-link {
    padding: 7px 20px;
  }
}
@media (max-width: 575px) {
  .tabs__widets-box-menu-link .nav-link {
    padding: 7px 19px;
    margin-bottom: 5px;
  }
}
.tabs__widets-box-menu-link .nav-link.active {
  border-color: var(--clr-theme-1) var(--clr-theme-1) var(--clr-common-white);
  position: relative;
  border-radius: 0px 0px 0px 0px;
}
@media (max-width: 575px) {
  .tabs__widets-box-menu-link .nav-link.active {
    border: 1px solid var(--clr-theme-1);
  }
}

.tabs__widets-box-menu-link .nav-link:first-child {
  border-radius: 5px 0px 0px 0px;
}
@media (max-width: 575px) {
  .tabs__widets-box-menu-link .nav-link:first-child {
    border-radius: 0px;
  }
}

.tabs__widets-box-menu-link .nav-link:last-child {
  border-radius: 0px 5px 0px 0px;
}
@media (max-width: 575px) {
  .tabs__widets-box-menu-link .nav-link:last-child {
    border-radius: 0px;
  }
}

.tabs__widets-box-menu-link {
  border-bottom: none;
}

.box-tabs-content {
  padding: 40px 30px 22px 30px;
  border: 1px solid var(--clr-theme-1);
  margin-top: -1px;
  z-index: -1;
  border-radius: 0px 5px 5px 5px;
}
@media (max-width: 450px) {
  .box-tabs-content {
    padding: 30px 20px 12px;
    border-radius: 5px;
  }
}

.tabs__widgets-standard-menu .nav-pills .nav-link.active,
.nav-pills .show &gt; .nav-link {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-1);
}

.tabs__widgets-standard-menu .nav-link {
  padding: 8px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--clr-common-heading);
  margin-right: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tabs__widgets-standard-menu .nav-link {
    padding: 8px 15px;
    margin-right: 5px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tabs__widgets-standard-menu .nav-link {
    margin-bottom: 5px;
  }
}

.tabs__widgets-processing-menu .nav-pills .nav-link.active,
.nav-pills .show &gt; .nav-link {
  color: var(--clr-theme-1);
  background-color: transparent;
}

.tabs__widgets-processing-menu .nav-link {
  padding: 0px 0px;
  font-size: 15px;
  font-weight: 500;
  color: var(--clr-common-heading);
  margin-right: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tabs__widgets-processing-menu .nav-link {
    margin-right: 27px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tabs__widgets-processing-menu .nav-link {
    margin-right: 6px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tabs__widgets-processing-menu .nav-link {
    margin-right: 6px;
  }
}
@media (max-width: 450px) {
  .tabs__widgets-processing-menu .nav-link {
    margin-bottom: 5px;
  }
}
.tabs__widgets-processing-menu .nav-link span {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: #f1f1f1;
  display: inline-block;
  line-height: 22px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 5px;
}
.tabs__widgets-processing-menu .nav-link.active span {
  background-color: var(--clr-theme-1);
  color: var(--clr-common-white);
}

.processing-author {
  border-radius: 5px;
  background: #f9f9fb;
  padding: 40px 40px 40px;
}
@media (max-width: 450px) {
  .processing-author {
    padding: 20px 20px 20px;
  }
}
.processing-author ul li {
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  list-style: none;
  color: var(--clr-common-body);
}
.processing-author ul li span {
  color: var(--clr-theme-1);
}
/*----------------------------------------*/
/*   25. notice-highlight CSS
/*----------------------------------------*/
.notice__highlight-items-first {
  padding: 40px 80px 25px 80px;
  border-left: 8px solid var(--clr-common-green1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .notice__highlight-items-first {
    padding: 40px 50px 25px 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .notice__highlight-items-first {
    padding: 20px 30px 5px 30px;
  }
}
@media (max-width: 450px) {
  .notice__highlight-items-first {
    padding: 20px 20px 5px 20px;
  }
}
.notice__highlight-items-first p {
  font-size: 16px;
}
.notice__highlight-items-first p span {
  background-color: var(--clr-common-green1);
  padding: 0px 7px;
  color: var(--clr-common-white);
  border-radius: 4px;
  height: 25px;
  line-height: 25px;
  display: inline-block;
  text-align: center;
}

.notice__highlight-items-second {
  padding: 20px 80px 5px 80px;
  border-left: 8px solid #ff8a24;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .notice__highlight-items-second {
    padding: 40px 50px 25px 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .notice__highlight-items-second {
    padding: 20px 30px 5px 30px;
  }
}
@media (max-width: 450px) {
  .notice__highlight-items-second {
    padding: 20px 20px 5px 20px;
  }
}
.notice__highlight-items-second span {
  font-weight: 500;
}

.notice__highlight-items-third {
  padding: 40px 80px 25px 80px;
  border-left: 8px solid #e11c1c;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .notice__highlight-items-third {
    padding: 40px 50px 25px 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .notice__highlight-items-third {
    padding: 20px 30px 5px 30px;
  }
}
@media (max-width: 450px) {
  .notice__highlight-items-third {
    padding: 20px 20px 5px 20px;
  }
}
.notice__highlight-items-third span {
  font-weight: 500;
}

.notice__highlight-items-highlight {
  padding: 25px 40px 11px 45px;
  border: 1px solid #eee;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .notice__highlight-items-highlight {
    padding: 25px 30px 11px 30px;
  }
}
@media (max-width: 450px) {
  .notice__highlight-items-highlight {
    padding: 25px 20px 11px 20px;
  }
}
.notice__highlight-items-highlight-title h4 {
  font-size: 18px;
  font-weight: 500;
}
.notice__highlight-items-highlight span {
  background-color: #fe0;
  color: var(--clr-common-heading);
}

.notice__highlight-items-highlight2 span {
  background-color: var(--clr-common-green2);
  color: var(--clr-common-heading);
}

.notice__highlight-items-highlight3 span {
  background-color: var(--clr-common-red1);
  color: var(--clr-common-heading);
}

.notice__explanation {
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #8bd6fc;
}
.notice__explanation-items {
  padding: 35px 35px 20px 40px;
  background: linear-gradient(#9addff 0%, #ecf9ff 100%);
  border-radius: 5px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .notice__explanation-items {
    padding: 35px 30px 20px 30px;
  }
}
@media (max-width: 450px) {
  .notice__explanation-items {
    padding: 35px 20px 20px 20px;
  }
}
.notice__explanation-items p {
  color: var(--clr-common-heading);
}
.notice__explanation-title {
  position: absolute;
  top: -8px;
  background: var(--clr-common-white);
  padding: 0px 8px;
}
.notice__explanation-title h4 {
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 0px;
}

.notice__explanation2 {
  border: 1px solid #97ffcb;
}
.notice__explanation2-title h4 {
  color: #15cf72;
}

.notice__explanation-items2 {
  background: linear-gradient(#cbf8d4 0%, #ebfff9 100%);
}

.notice__explanation3 {
  border: 1px solid #ffe1e1;
}
.notice__explanation3-title h4 {
  color: #cf1515;
}

.notice__explanation-items3 {
  background: linear-gradient(#ffe1e1 0%, #fff8eb 100%);
}

/*----------------------------------------*/
/*   26. according-widgets CSS
/*----------------------------------------*/
.according-tabs-title {
  font-size: 20px;
  color: var(--clr-common-heading);
}

.faq__content-widgets .accordion-item:first-of-type .accordion-button {
  border-radius: 0;
  font-size: 18px;
  font-weight: 500;
  border-radius: 5px 5px 0px 0px;
  height: 55px;
}
.faq__content-widgets .accordion-button::after {
  font-family: "Font Awesome 5 pro";
  width: auto;
  height: auto;
  margin-left: auto;
  content: "";
  background: #666;
  color: #666;
  font-size: 17px;
}
.faq__content-widgets .accordion-button:not(.collapsed)::after {
  content: "";
  font-family: "Font Awesome 5 Pro";
  color: #666;
  background-color: #666;
}
.faq__content-widgets .accordion-button:not(.collapsed) {
  background: #f5f7f9;
  border-radius: 5px 5px 0px 0px;
}
.faq__content-widgets .accordion-button {
  background: #f5f7f9;
  border: none;
  font-size: 18px;
  font-weight: 500;
  color: var(--clr-common-heading);
  border-radius: 5px;
  height: 55px;
  padding: 0px 30px;
}
@media (max-width: 450px) {
  .faq__content-widgets .accordion-button {
    font-size: 16px;
    text-align: left;
    padding: 0px 15px;
  }
}
.faq__content-widgets .accordion-item {
  margin-bottom: 10px;
}
.faq__content-widgets .accordion-button:focus {
  z-index: 3;
  border-color: none;
  outline: 0;
  box-shadow: none;
}
.faq__content-widgets .accordion-collapse {
  border: none;
}
.faq__content-widgets .accordion-body {
  background: var(--clr-common-white);
  padding: 30px 30px 28px 30px;
  font-weight: 400;
  font-size: 16px;
  border-radius: 0px 0px 5px 5px;
  border: 1px solid #f1f1f1;
}

.faq__content-widgets2 .accordion-button:not(.collapsed)::after {
  content: "";
  font-family: "Font Awesome 5 Pro";
  color: var(--clr-common-heading);
  background-color: var(--clr-common-heading);
  font-size: 15px;
}
.faq__content-widgets2 .accordion-button::after {
  font-family: "Font Awesome 5 pro";
  width: auto;
  height: auto;
  margin-left: auto;
  content: "";
  background: var(--clr-common-heading);
  color: var(--clr-common-heading);
  font-size: 15px;
}

/*----------------------------------------*/
/*   27. quotation CSS
/*----------------------------------------*/
.quotation_style-one-title {
  font-size: 20px;
  font-weight: 500;
}
.quotation_style-one blockquote p {
  font-size: 28px;
  font-style: italic;
  font-weight: 300;
  line-height: 38px;
  color: var(--clr-common-heading);
}
@media (max-width: 575px) {
  .quotation_style-one blockquote p {
    font-size: 20px;
  }
}
.quotation_style-one blockquote i {
  font-size: 30px;
  color: #E8E8E8;
  margin-bottom: 25px;
}
.quotation_style-one blockquote h4 {
  font-size: 18px;
  line-height: 38px;
  font-weight: 500;
}

.quotation_style-two-items {
  background: #f3f8ff;
  padding: 38px 40px 20px 40px;
  border-left: 5px solid var(--clr-theme-1);
  position: relative;
  z-index: 1;
}
.quotation_style-two-items blockquote p {
  font-size: 22px;
  font-style: italic;
  line-height: 32px;
  color: var(--clr-common-heading);
}
@media (max-width: 575px) {
  .quotation_style-two-items blockquote p {
    font-size: 20px;
  }
}
.quotation_style-two-items blockquote p cite {
  font-size: 18px;
  display: block;
  color: var(--clr-common-heading);
  font-weight: 500;
  font-style: normal;
}
.quotation_style-two-items blockquote p cite::before {
  content: "";
  display: inline-block;
  background: var(--clr-theme-1);
  height: 2px;
  width: 63px;
  top: -4px;
  margin-right: 10px;
  position: relative;
}
.quotation_style-two-items-icon {
  z-index: -1;
  position: absolute;
  left: 30px;
  top: 30px;
}
.quotation_style-two-items-icon i {
  font-size: 82px;
  color: #e5eafb;
}

.quotation_style-three-items {
  padding: 93px 70px 70px 40px;
  background: #ffd500;
  width: 418px;
  margin: 0 auto;
  z-index: 1;
}
@media (max-width: 575px) {
  .quotation_style-three-items {
    padding: 30px 30px 30px 9px;
    width: 250px;
  }
}
.quotation_style-three-items p {
  font-size: 32px;
  color: var(--clr-common-heading);
  line-height: 38px;
  font-weight: 700;
  margin-bottom: 40px;
}
@media (max-width: 575px) {
  .quotation_style-three-items p {
    font-size: 20px;
    line-height: 30px;
  }
}
.quotation_style-three-items p cite {
  font-size: 18px;
  display: block;
  color: var(--clr-common-heading);
  font-weight: 500;
  font-style: normal;
  text-align: right;
}
@media (max-width: 575px) {
  .quotation_style-three-items p cite {
    font-size: 16px;
  }
}
.quotation_style-three-items p cite::before {
  content: "";
  display: inline-block;
  background: var(--clr-common-heading);
  height: 3px;
  width: 22px;
  top: -4px;
  margin-right: 10px;
  position: relative;
}
.quotation_style-three-items-border {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 5px solid var(--clr-common-heading);
  position: absolute;
  top: -30px;
  left: -30px;
  z-index: -1;
}
@media (max-width: 575px) {
  .quotation_style-three-items-border {
    top: -25px;
    left: -15px;
  }
}

.quotation_style-three-items-border::after {
  content: "";
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  font-size: 50px;
  color: var(--clr-common-heading);
  left: 33px;
  background: var(--clr-common-white);
  top: -26px;
  padding: 0px 11px;
  font-weight: 900;
}

.quotation_style-three-items-border::before {
  content: "";
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  font-size: 50px;
  right: 35px;
  background: #ffd500;
  bottom: -20px;
  padding: 0px 11px;
  color: var(--clr-common-heading);
  font-weight: 900;
}

/*----------------------------------------*/
/*   28. tooltip CSS
/*----------------------------------------*/
.tooltip__content p a {
  position: relative;
}
.tooltip__content p a:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 4px;
  background-color: #9494f7;
  bottom: 2px;
  z-index: -1;
}

.direction_steps {
  display: inline-flex;
  align-items: center;
  text-align: center;
}
.direction_steps .direction_step {
  margin-right: 23px;
  font-weight: 500;
}
.direction_steps .direction_step:last-child {
  margin-right: 0px;
}
@media (max-width: 575px) {
  .direction_steps {
    display: block;
  }
}

.direction_step + .direction_step {
  position: relative;
}
.direction_step + .direction_step:before {
  content: "";
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  left: -18px;
  font-weight: 400;
  font-size: 13px;
  top: 1px;
}
@media (max-width: 575px) {
  .direction_step + .direction_step:before {
    top: -3px;
  }
}

.direction_steps-bg {
  border-radius: 3px;
  background: #9494f7;
  padding: 0px 9px;
  color: var(--clr-common-white);
}

.direction_steps-button .direction_step {
  height: 22px;
  border-radius: 3px;
  background: #9494f7;
  line-height: 22px;
  padding: 0px 9px;
  color: var(--clr-common-white);
}
.direction_steps-button .direction_step:before {
  color: var(--clr-common-body);
}

/*----------------------------------------*/
/*   29. table-widgets CSS
/*----------------------------------------*/
.documentation__table {
  overflow-x: auto;
}
.documentation__table .table-control th {
  padding: 9px 20px 9px 30px;
  font-size: 18px;
  font-weight: 500;
  color: var(--clr-common-heading);
}
.documentation__table .table-control th:first-child {
  width: 6%;
  text-align: center;
  padding-left: 21px;
}
.documentation__table .table-control td {
  padding: 9px 20px 9px 30px;
  font-size: 16px;
  color: var(--clr-common-body);
}
.documentation__table .table-control td:first-child {
  text-align: center;
  padding-left: 21px;
}

.documentation__table .table-control th:nth-child(2) {
  padding: 9px 20px 9px 30px;
  font-size: 18px;
  font-weight: 500;
  color: var(--clr-common-heading);
  width: 34%;
  min-width: 100px;
  width: 33%;
}

.documentation__table .table-control th:nth-child(3) {
  width: 22%;
  min-width: 100px;
}

.documentation__table .table-control th:nth-child(4) {
  width: 20%;
  min-width: 100px;
}

.documentation__table .table-control th:nth-child(5) {
  width: 22%;
  min-width: 100px;
}

.documentation__table-bg .table &gt; :not(caption) &gt; * &gt; * {
  background-color: var(--bs-table-bg);
  background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
  border-bottom-width: 0px;
}

.documentation__table-bg .table-striped &gt; tbody &gt; tr:nth-child(1) {
  background: var(--clr-common-body);
}
.documentation__table-bg .table-striped &gt; tbody &gt; tr:nth-child(1) th {
  color: var(--clr-common-white);
}

.documentation__table-bg .table-control th:nth-child(2) {
  color: var(--clr-common-white);
}

.documentation__table-modern {
  overflow-x: auto;
}

.documentation__table-modern .table-control th {
  line-height: 53px;
  background-color: var(--clr-common-tb-color);
  color: var(--clr-common-white);
  font-size: 18px;
  font-weight: 500;
}

.documentation__table-modern .table-control th:nth-child(1) {
  min-width: 100px;
  width: 33%;
  padding-left: 30px;
}

.documentation__table-modern .table-control th:nth-child(2) {
  min-width: 100px;
  width: 25%;
  padding-left: 80px;
}

.documentation__table-modern .table-control th:nth-child(3) {
  min-width: 100px;
  width: 17%;
}

.documentation__table-modern .table-control th:nth-child(4) {
  min-width: 100px;
}

.documentation__table-modern .table-control td {
  height: 55px;
  line-height: 55px;
  color: var(--clr-common-body);
}

.documentation__table-modern .table-control td:nth-child(1) {
  width: 33%;
  height: 55px;
  line-height: 55px;
  background-color: var(--clr-common-td-color);
  color: var(--clr-common-white);
  padding-left: 30px;
}

.documentation__table-modern .table-control td:nth-child(2) {
  min-width: 100px;
  width: 34%;
  padding-left: 80px;
}

.documentation__table-modern .table-control td:nth-child(3) {
  min-width: 100px;
  width: 17%;
}

.documentation__table-modern .table &gt; :not(caption) &gt; * &gt; * {
  background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
  border-bottom-width: 0px;
}

.default-table-bg {
  overflow-x: auto;
}
.default-table-bg .table.table-bordered {
  border: 1px solid #272727 !important;
}
.default-table-bg .table-control th {
  color: var(--clr-common-white) !important;
}
.default-table-bg .table &gt; :not(caption) &gt; * &gt; * {
  color: var(--clr-common-table-default);
  background-color: #000;
}

.default-table-bg &gt; .table &gt; .table-bordered {
  border: 1px solid #272727;
}

.default-table-striped .table-striped &gt; tbody &gt; tr:nth-of-type(2n+1) {
  --bs-table-accent-bg: var(--clr-common-table-black);
}
.default-table-striped .table &gt; :not(caption) &gt; * &gt; * {
  border-bottom-width: 0px !important;
}

.mordern-dark-style {
  overflow-x: auto;
}
.mordern-dark-style .table-control {
  background: var(--clr-common-table-black);
}
.mordern-dark-style .table-control td {
  color: var(--clr-common-white);
}

/*----------------------------------------*/
/*   30. form-widgets CSS
/*----------------------------------------*/
.du-contact-form-field input, .du-contact-form-field textarea {
  color: var(--clr-common-body);
  font-size: 16px;
  display: block;
  width: 100%;
  height: 55px;
  background: var(--clr-common-white);
  font-weight: 400;
  outline: none;
  padding: 0px 20px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid var(--clr-common-fcopy-border);
}
.du-contact-form-field textarea {
  height: 180px;
  padding: 20px;
  resize: none;
}

.du-contact-form-field input::-moz-placeholder, .du-contact-form-field input::placeholder, .du-contact-form-field select::placeholder, .du-contact-form-field textarea::-moz-placeholder, .du-contact-form-field textarea::placeholder {
  color: var(--clr-common-body);
  font-weight: 400;
  font-size: 16px;
  opacity: 1;
  color: var(--clr-common-body);
}

.du-contact-form-field-bg input, .du-contact-form-field-bg textarea {
  background-color: var(--clr-bg-grey2-bg);
  border: 1px solid var(--clr-bg-grey2-bg);
  resize: none;
}

.form-border-heading-field input:focus {
  border: 1px solid var(--clr-theme-1);
}
.form-border-heading-field textarea:focus {
  border: 1px solid var(--clr-theme-1);
}

.form__label {
  position: absolute;
  left: 14px;
  top: 14px;
  cursor: text;
  -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;
  padding: 0px 5px;
}

.form-border-heading-field input:focus ~ .form__label {
  top: -11px;
  background-color: var(--clr-common-white);
  padding: 0px 5px;
}

.form-border-heading-field textarea:focus ~ .form__label {
  top: -11px;
  background-color: var(--clr-common-white);
  padding: 0px 5px;
}

/*----------------------------------------*/
/*   31. audio-widgets CSS
/*----------------------------------------*/
.full_width_audio {
  z-index: 10;
  border: 1px solid #e8effc;
  color: inherit;
  min-height: 120px;
  max-height: inherit;
  display: flex;
  gap: 25px;
  border-radius: 25px;
  flex-direction: row;
  padding: 22px 25px 24px 25px;
}
@media (max-width: 450px) {
  .full_width_audio {
    height: auto;
    width: auto;
    padding: 17px 20px 19px 20px;
    flex-direction: column;
  }
}
.full_width_audio_img {
  justify-content: center;
}
.full_width_audio .player-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.full_width_audio .player-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
}
.full_width_audio .player-info h4 {
  font-size: 18px;
  margin-bottom: 0px;
}
.full_width_audio .player-info a {
  color: var(--clr-theme-1);
  font-size: 15px;
}
.full_width_audio audio {
  flex-grow: 1;
  height: 40px;
}
@media (max-width: 575px) {
  .full_width_audio audio {
    width: 100%;
  }
}
.full_width_audio audio::-webkit-media-controls-play-button {
  background-color: #b1d4e0;
  border-radius: 50%;
}
.full_width_audio audio::-webkit-media-controls-play-button:hover {
  background-color: rgba(177, 212, 224, 0.7);
}
.full_width_audio audio::-webkit-media-controls-panel {
  background: #e9e8f2;
}

.song-name {
  font-size: 18px;
  font-weight: 600;
}

.audio_player {
  display: flex;
}

.box__audio-player {
  width: 330px;
  display: inherit;
  min-height: inherit;
  max-height: inherit;
  max-width: 330px;
  background-color: #f8f9fe;
  padding: 30px 30px 30px;
}
@media (max-width: 450px) {
  .box__audio-player {
    width: 100%;
    padding: 20px 20px 20px;
  }
}
.box__audio-player_img {
  margin-right: 0px !important;
}
@media (max-width: 575px) {
  .box__audio-player_img img {
    width: 100%;
  }
}

.full_width_audio audio {
  flex-grow: 1;
  height: 40px;
  width: 100%;
  border-radius: 5px;
}

/*----------------------------------------*/
/*   32. progressbar-widgets CSS
/*----------------------------------------*/
.progress-basic .progress-bar {
  background-color: var(--clr-theme-1);
  transition: width 0.6s ease;
  height: 5px;
}
.progress-basic-1 {
  width: 40%;
}
.progress-basic-2 {
  width: 50%;
}
.progress-basic-3 {
  width: 63%;
}
.progress-basic-4 {
  width: 76%;
}
.progress-basic-5 {
  width: 88%;
}
.progress-basic .progress {
  background-color: #eeedf3;
  border-radius: 0px;
  height: 5px;
}

.progress-labels .progress {
  background-color: #eeedf3;
  border-radius: 0px;
  height: 25px;
}
.progress-labels .progress-bar {
  background-color: var(--clr-theme-1);
  transition: width 0.6s ease;
  height: 25px;
  font-size: 15px;
}

.skill-warp__single-skill {
  margin-right: 28px;
  display: inline-block;
  margin-bottom: 10px;
}
.skill-warp__single-skill .skill-box {
  text-align: center;
  position: relative;
}
.skill-warp__single-skill .skill-box h2 {
  position: absolute;
  top: 50px;
  right: 40px;
  color: var(--clr-common-heading);
  font-size: 24px;
  display: inline-block;
  font-weight: 500;
}
.skill-warp__single-skill .skill-box h2 span {
  font-size: 24px;
  margin-left: -5px;
}

/*----------------------------------------*/
/*  33. video-widgets CSS
/*----------------------------------------*/
.vimeo__video iframe {
  width: 100%;
  height: 456px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .vimeo__video iframe {
    height: 430px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .vimeo__video iframe {
    height: 345px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .vimeo__video iframe {
    height: 273px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .vimeo__video iframe {
    height: 296px;
  }
}
@media (max-width: 575px) {
  .vimeo__video iframe {
    height: 173px;
  }
}

.youtube__video iframe {
  width: 100%;
  height: 456px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .youtube__video iframe {
    height: 430px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .youtube__video iframe {
    height: 345px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .youtube__video iframe {
    height: 250px;
  }
}
@media (max-width: 450px) {
  .youtube__video iframe {
    height: 180px;
  }
}

/*----------------------------------------*/
/*  34. code-block CSS
/*----------------------------------------*/
.list__widgets-subtile .bg-border {
  color: var(--clr-common-code-block);
  background-color: var(--clr-common-fcopy-border);
  padding: 5px 8px;
  border-radius: 2px;
}
.list__widgets-subtile span {
  color: var(--clr-common-code-block);
}

.block-common {
  padding: 15px 50px 0px 50px;
  border: 1px solid var(--clr-common-fcopy-border);
  background-color: #fbfbfb;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .block-common {
    padding: 15px 30px 0px 30px;
  }
}
@media (max-width: 450px) {
  .block-common {
    padding: 15px 20px 0px 20px;
  }
}
.block-common pre code {
  font-size: 15px;
  color: var(--clr-common-heading);
}

/*----------------------------------------*/
/*  35. layout CSS
/*----------------------------------------*/
.layout__structure-img img {
  width: 100%;
}
.layout__structure-responsive {
  text-align: center;
}
.layout__structure-responsive img {
  width: inherit;
}
@media (max-width: 575px) {
  .layout__structure-responsive {
    text-align: left;
  }
}
.layout__structure-featurs ul li {
  list-style: disc;
  font-size: 16px;
  margin-bottom: 6px;
  margin-left: 13px;
}
.layout__structure-featurs ul li span:nth-child(1) {
  font-weight: 500;
}

/*----------------------------------------*/
/*  36. dashboard-info CSS
/*----------------------------------------*/
.dashboard__info-img img {
  width: 100%;
}
.dashboard__info-img-csscode img {
  width: inherit;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .dashboard__info-img-csscode img {
    width: 100%;
  }
}
.dashboard__info ul li {
  position: relative;
  padding-left: 36px;
  color: var(--clr-common-body);
  counter-increment: li;
  font-size: 16px;
  margin-left: 0px;
  margin-bottom: 13px;
}
.dashboard__info ul li:last-child {
  margin-bottom: 0;
}
.dashboard__info ul li:before {
  content: counter(li);
  width: 26px;
  height: 26px;
  background: var(--clr-common-du-color);
  color: var(--clr-common-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  font-size: 14px;
  position: absolute;
  left: 0px;
  top: 0px;
}

/*----------------------------------------*/
/*  37. info-card CSS
/*----------------------------------------*/
.normal-card-single {
  padding: 15px 20px;
  border: 1px solid var(--clr-common-fcopy-border);
  border-radius: 5px;
}
.normal-card-single ul li span {
  font-weight: 700;
  font-size: 18px;
  color: var(--clr-common-heading);
  position: relative;
  top: 2px;
  margin-left: 10px;
}

.cardwith__text-single {
  padding: 40px 30px 35px 30px;
  border-radius: 5px;
  background: var(--clr-common-white);
  box-shadow: 0px 20px 60px rgba(6, 21, 59, 0.08);
}
.cardwith__text-single-title h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--clr-common-heading);
}
.cardwith__text-single-subtitle p {
  font-size: 15px;
}
.cardwith__text-single-btn a {
  font-size: 15px;
  color: var(--clr-theme-1);
  font-weight: 500;
}
.cardwith__text-single-btn a:hover {
  color: var(--clr-common-hover);
}
.cardwith__text-single-btn a i {
  margin-left: 7px;
  vertical-align: middle;
}

/*----------------------------------------*/
/*  38. animation-heading CSS
/*----------------------------------------*/
.heading__item .heading__item-single {
  padding: 70px 70px 45px 70px;
  border-radius: 10px;
  border: 1px solid #e9e9e9;
}
.heading__item .heading__item-single h4 {
  font-size: 30px;
  font-weight: 500;
}
@media (max-width: 450px) {
  .heading__item .heading__item-single {
    padding: 50px 30px 40px 30px;
  }
}
.heading__item .heading__item-single span {
  font-size: 30px;
  color: var(--clr-common-heading);
  font-weight: 500;
  margin-bottom: 10px;
  display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .heading__item .heading__item-single span {
    font-size: 24px;
  }
}
@media (max-width: 450px) {
  .heading__item .heading__item-single span {
    font-size: 20px;
  }
}
.heading__item .heading__item-single h2 {
  font-size: 60px;
  color: var(--clr-common-heading);
  font-weight: 700;
  color: var(--clr-theme-1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .heading__item .heading__item-single h2 {
    font-size: 40px;
  }
}
@media (max-width: 450px) {
  .heading__item .heading__item-single h2 {
    font-size: 30px;
  }
}
.heading__item .heading__item-single h2 span {
  font-size: 60px;
  color: var(--clr-common-heading);
  font-weight: 700;
  color: var(--clr-theme-1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .heading__item .heading__item-single h2 span {
    font-size: 40px;
  }
}
.heading__item .typed-color h2 {
  color: var(--clr-common-typed-text);
  margin-bottom: 0px;
}
.heading__item .typed-color h2 span {
  font-size: 60px;
  color: var(--clr-common-typed-text);
  font-weight: 700;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .heading__item .typed-color h2 span {
    font-size: 40px;
    line-height: 52px;
  }
}
@media (max-width: 450px) {
  .heading__item .typed-color h2 span {
    font-size: 30px;
    line-height: 42px;
  }
}
.heading__item .shrik-color h2 {
  color: var(--clr-common-shrik-text);
}
.heading__item .shrik-color h2 span {
  color: var(--clr-common-shrik-text);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .heading__item .shrik-color h2 span {
    font-size: 40px;
  }
}
@media (max-width: 450px) {
  .heading__item .shrik-color h2 span {
    font-size: 30px;
  }
}

@keyframes jello {
  11.1% {
    transform: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
  100% {
    transform: none;
  }
}
.jello {
  animation: jello 2s infinite;
  transform-origin: center;
}

.heading__item-single-slide {
  padding: 70px 70px 55px 70px;
  border-radius: 10px;
  border: 1px solid #e9e9e9;
}
@media (max-width: 450px) {
  .heading__item-single-slide {
    padding: 50px 30px 40px 30px;
  }
}
.heading__item-single-slide p {
  font-size: 30px;
  color: var(--clr-common-heading);
  font-weight: 500;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .heading__item-single-slide p {
    font-size: 24px;
  }
}
@media (max-width: 450px) {
  .heading__item-single-slide p {
    font-size: 20px;
  }
}

.message {
  font-size: 60px;
  --height: 70px;
  min-height: var(--height);
  line-height: var(--height);
  color: var(--clr-common-slide-text);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .message {
    font-size: 40px;
    --height: 60px;
  }
}
@media (max-width: 450px) {
  .message {
    font-size: 30px;
    --height: 40px;
  }
}

.slides {
  display: inline-flex;
  height: var(--height);
  overflow: hidden;
  padding: 0 5px;
  margin: 0 -5px;
}

.slide1 {
  display: flex;
  flex-flow: column nowrap;
  transform: translateY(100%);
  animation: slide-up 9s ease infinite;
}

@keyframes slide-up {
  10%, 33% {
    transform: translateY(0%);
  }
  43%, 66% {
    transform: translateY(-100%);
  }
  76%, 100% {
    transform: translateY(-200%);
  }
}
/*----------------------------------------*/
/*  39. newsletter CSS
/*----------------------------------------*/
.newsletter-area {
  max-width: 530px;
  padding: 80px 75px 80px 75px;
  background-color: var(--clr-common-newsletter-form);
}
@media (max-width: 575px) {
  .newsletter-area {
    padding: 30px 20px 30px 20px;
  }
}

.newsletter__item {
  padding: 45px 35px 40px 35px;
  box-shadow: 0px 20px 50px rgba(7, 16, 61, 0.08);
}
@media (max-width: 575px) {
  .newsletter__item {
    padding: 30px 15px 25px 15px;
  }
}
.newsletter__item-content h2 {
  font-weight: 700;
  font-size: 28px;
  line-height: 38px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.newsletter__item-content p {
  margin-bottom: 20px;
}
.newsletter__item-form-field input {
  color: var(--clr-common-body);
  font-size: 16px;
  display: block;
  width: 100%;
  height: 55px;
  background: var(--clr-common-newsletter-input);
  font-weight: 400;
  outline: none;
  padding: 0px 20px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid var(--clr-common-fcopy-border);
}
.newsletter__item-form-field button {
  width: 100%;
  height: 55px;
  border-radius: 5px;
  background: var(--clr-common-newsletter-btn);
  display: inline-block;
  font-family: Roboto;
  font-weight: 500;
  font-size: 14px;
  line-height: 38px;
  color: var(--clr-common-white);
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border: 1px solid transparent;
}
.newsletter__item-form-field button:hover {
  background-color: transparent;
  border: 1px solid var(--clr-theme-1);
  color: var(--clr-theme-1);
}
.newsletter__item-form-field button i {
  margin-left: 5px;
  vertical-align: middle;
  font-size: 17px;
}
.newsletter__item-offer ul li {
  display: inline-block;
  margin-right: 30px;
  font-size: 14px;
  font-size: 14px;
}
@media (max-width: 575px) {
  .newsletter__item-offer ul li {
    display: block;
    margin-right: 0px;
  }
}
.newsletter__item-offer ul li:last-child {
  margin-right: 0px;
}
.newsletter__item-offer ul li i {
  margin-right: 10px;
}
.newsletter__item-offer ul li i:last-child {
  margin-right: 0px;
}

.newsletter-area-2 {
  background-color: var(--clr-common-newsletter-form);
  padding: 30px;
}
@media (max-width: 575px) {
  .newsletter-area-2 {
    padding: 20px;
  }
}

.newsletter__example2 {
  display: flex;
  align-items: center;
  background-color: var(--clr-common-white);
  padding: 55px 50px 40px 45px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .newsletter__example2 {
    padding: 40px 30px 25px 25px;
  }
}
@media (max-width: 575px) {
  .newsletter__example2 {
    padding: 40px 30px 25px 25px;
    text-align: center;
  }
}
@media (max-width: 575px) {
  .newsletter__example2 {
    display: inherit;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .newsletter__example2-left {
    margin-right: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .newsletter__example2-left {
    margin-right: 30px;
  }
}
@media (max-width: 575px) {
  .newsletter__example2-left {
    margin-right: 0px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .newsletter__example2-left img {
    width: 180px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .newsletter__example2-left img {
    width: 100px;
  }
}

.newsletter__item2 {
  box-shadow: none;
  padding: 0px;
}
.newsletter__item2 button {
  background-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;
}

/*----------------------------------------*/
/*  40. information-chart CSS
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .graph-area img {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .pie-area img {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .pie-area img {
    width: 100%;
  }
}

/*----------------------------------------*/
/*  41. countdown CSS
/*----------------------------------------*/
.default-countdown-items {
  display: flex;
}

.default-countdown {
  margin-right: 80px;
  text-align: center;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .default-countdown {
    margin-right: 70px;
  }
}
@media (max-width: 575px) {
  .default-countdown {
    margin-right: 30px;
  }
}
.default-countdown h2 {
  font-size: 60px;
  font-weight: 700;
  color: var(--clr-common-heading);
  margin-bottom: 5px;
  line-height: 70px;
}
@media (max-width: 575px) {
  .default-countdown h2 {
    font-size: 40px;
    line-height: 50px;
  }
}
.default-countdown span {
  display: block;
  font-size: 18px;
}
.default-countdown:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 62px;
  background-color: #E9E9E9;
  left: 110px;
  top: 20px;
}
@media (max-width: 575px) {
  .default-countdown:before {
    left: 60px;
    top: 10px;
  }
}
.default-countdown:last-child:before {
  display: none;
}

.border-countdown {
  overflow: hidden;
  margin-right: 40px;
  text-align: center;
  padding: 25px 40px 22px 40px;
  border-radius: 15px;
  border: 2px solid var(--clr-theme-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .border-countdown {
    margin-right: 20px;
    padding: 25px 25px 22px 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .border-countdown {
    margin-right: 20px;
    padding: 25px 30px 22px 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .border-countdown {
    margin-right: 20px;
    padding: 25px 25px 22px 25px;
  }
}
@media (max-width: 575px) {
  .border-countdown {
    margin-right: 5px;
    padding: 20px 15px 18px 15px;
  }
}
.border-countdown h2 {
  font-size: 60px;
  font-weight: 700;
  color: var(--clr-common-heading);
  margin-bottom: 5px;
  line-height: 70px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .border-countdown h2 {
    font-size: 40px;
    line-height: 50px;
  }
}
@media (max-width: 575px) {
  .border-countdown h2 {
    font-size: 24px;
    line-height: 34px;
  }
}
.border-countdown span {
  display: block;
  font-size: 18px;
}
@media (max-width: 575px) {
  .border-countdown span {
    font-size: 16px;
  }
}

.multicolor-countdown {
  margin-right: 40px;
  text-align: center;
  width: 150px;
  height: 150px;
  padding-top: 20px;
  border-radius: 50%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .multicolor-countdown {
    margin-right: 20px;
    width: 130px;
    height: 130px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .multicolor-countdown {
    margin-right: 20px;
    width: 100px;
    height: 100px;
  }
}
@media (max-width: 575px) {
  .multicolor-countdown {
    margin-right: 5px;
    width: 70px;
    height: 70px;
    padding-top: 10px;
  }
}
.multicolor-countdown h2 {
  font-size: 60px;
  font-weight: 700;
  color: var(--clr-common-white);
  margin-bottom: 5px;
  line-height: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .multicolor-countdown h2 {
    font-size: 40px;
    line-height: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .multicolor-countdown h2 {
    font-size: 30px;
    line-height: 40px;
  }
}
@media (max-width: 575px) {
  .multicolor-countdown h2 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 0px;
  }
}
.multicolor-countdown span {
  display: block;
  font-size: 18px;
  color: var(--clr-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .multicolor-countdown span {
    font-size: 16px;
  }
}
@media (max-width: 575px) {
  .multicolor-countdown span {
    font-size: 14px;
  }
}
.multicolor-countdown:nth-child(1) {
  background-color: #EE7F35;
}
.multicolor-countdown:nth-child(2) {
  background-color: #4DC873;
}
.multicolor-countdown:nth-child(3) {
  background-color: #4E92FF;
}
.multicolor-countdown:nth-child(4) {
  background-color: #D851AB;
}

/*----------------------------------------*/
/*  42. keyboard-shortcut CSS
/*----------------------------------------*/
.keyboard__table {
  overflow-x: auto;
}
.keyboard__table .table-control th {
  padding: 15px 30px 15px 30px;
  font-size: 18px;
  font-weight: 500;
}
.keyboard__table .table-control th:last-child {
  padding-right: 60px;
}
@media (max-width: 575px) {
  .keyboard__table .table-control th:last-child {
    padding-right: 0px;
  }
}
@media (max-width: 450px) {
  .keyboard__table .table-control th {
    padding: 10px 15px 10px 15px;
    font-size: 16px;
  }
}
.keyboard__table .table-control td {
  padding: 17px 30px 17px 30px;
  font-size: 16px;
  color: var(--clr-common-body);
}
@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), (max-width: 575px) {
  .keyboard__table .table-control td {
    white-space: nowrap;
  }
}
@media (max-width: 450px) {
  .keyboard__table .table-control td {
    padding: 10px 15px 10px 15px;
  }
}
.keyboard__table .table-control td:last-child {
  padding-right: 60px;
}
@media (max-width: 575px) {
  .keyboard__table .table-control td:last-child {
    padding-right: 10px;
  }
}
.keyboard__table .table-control td:nth-child(2) {
  padding-left: 50px;
}
@media (max-width: 575px) {
  .keyboard__table .table-control td:nth-child(2) {
    padding-left: 0px;
  }
}

.keyboard__table .table-control th:nth-child(1) {
  font-size: 18px;
  font-weight: 500;
  color: var(--clr-common-heading);
  width: 38%;
  min-width: 100px;
}
@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), (max-width: 575px) {
  .keyboard__table .table-control th:nth-child(1) {
    width: 38%;
  }
}

.keyboard__table .table-control th:nth-child(2) {
  font-size: 18px;
  font-weight: 500;
  color: var(--clr-common-heading);
  width: 36%;
  min-width: 100px;
  padding-left: 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) {
  .keyboard__table .table-control th:nth-child(2) {
    width: 25%;
  }
}
@media (max-width: 575px) {
  .keyboard__table .table-control th:nth-child(2) {
    width: 25%;
    padding-left: 0px;
  }
}

.keyboard__table .table-control th:nth-child(3) {
  width: 30%;
  min-width: 100px;
}
@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), (max-width: 575px) {
  .keyboard__table .table-control th:nth-child(3) {
    width: 37%;
  }
}

.keyboard__table .table &gt; :not(caption) &gt; * &gt; * {
  background-color: var(--bs-table-bg);
  background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
  border: none;
}

.keyboard__table .table-striped &gt; tbody &gt; tr:nth-child(1) {
  background: var(--clr-theme-1);
}
.keyboard__table .table-striped &gt; tbody &gt; tr:nth-child(1) th {
  color: var(--clr-common-white);
}

.web-browser .table-striped &gt; tbody &gt; tr:nth-child(1) {
  background: #e7e9eb;
}
.web-browser .table-striped &gt; tbody &gt; tr:nth-child(1) th {
  color: var(--clr-common-heading);
}
.web-browser .table-striped &gt; tbody &gt; tr:nth-child(1) td {
  background: #e7e9eb;
}

.web-browser {
  overflow-x: auto;
}
.web-browser .table-striped &gt; tbody &gt; tr:nth-of-type(2n + 1) {
  background: #e7e9eb !important;
}

.web-browser .table.table-striped {
  border-bottom: 1px solid #e3e5e6;
}

/*----------------------------------------*/
/*  43. changelog CSS
/*----------------------------------------*/
.du_changelog_info .version_info {
  position: relative;
  height: 100%;
  left: -20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .du_changelog_info .version_info {
    left: -7px;
  }
}
.du_changelog_info .line {
  height: 100%;
  width: 1px;
  background: #e2e5ee;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .du_changelog_info .line {
    display: none;
  }
}
.du_changelog_info .du_changelog_date {
  display: flex;
  text-align: right;
  padding-top: 53px;
  justify-content: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .du_changelog_info .du_changelog_date {
    justify-content: start;
    text-align: left;
    padding-top: 0px;
  }
}

.du_changelog_date-3 {
  margin-top: 20px;
}

.du_changelog_date-4 {
  padding-top: 30px !important;
}

.c_version-4 {
  position: absolute;
  top: 41%;
}

.c_version {
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: var(--clr-common-white);
  z-index: 2;
  border-radius: 50%;
  left: 6px;
  top: 27%;
  border: 1px solid #e9e9e9;
  text-align: center;
  line-height: 22px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .c_version {
    left: -2px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .c_version {
    display: none;
  }
}
.c_version span {
  width: 8px;
  height: 8px;
  background-color: var(--clr-common-heading);
  z-index: 3;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
}

.c_date h6 {
  margin-bottom: 15px;
  font-size: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .c_date h6 {
    font-size: 16px;
  }
}
.c_date span {
  height: 30px;
  line-height: 30px;
  display: inline-block;
  padding: 0px 20px;
  background: var(--clr-common-heading);
  color: var(--clr-common-white);
  border-radius: 3px;
}

.du_changelog_info .c_version {
  margin: 0 auto;
}

.du_changelog_content {
  margin-left: -15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .du_changelog_content {
    margin-left: 0px;
  }
}
.du_changelog_content p {
  display: flex;
  margin-bottom: 10px;
  font-size: 16px;
}
.du_changelog_content span {
  font-weight: 400;
  font-size: 12px;
  color: var(--clr-common-white);
  padding: 0 10px;
  text-transform: uppercase;
  min-width: 90px;
  display: inline-block;
  text-align: center;
  line-height: 26px;
  border-radius: 3px;
  margin-right: 20px;
  height: 25px;
  flex: 0;
  letter-spacing: 0.8px;
}

.du_changelog_content span.added {
  background: var(--clr-common-green4);
}

.du_changelog_content span.fixed,
.deleted {
  background-color: var(--clr-common-red3);
}

.du_changelog_content span.updated {
  background-color: var(--clr-common-blue2);
}

/*----------------------------------------*/
/*  44. contact CSS
/*----------------------------------------*/
.contact-title h2 {
  font-size: 30px;
}
@media (max-width: 575px) {
  .contact-title h2 {
    font-size: 24px;
  }
}

.contact-from-input input {
  color: var(--clr-common-body);
  font-size: 16px;
  display: block;
  width: 100%;
  height: 55px;
  background: var(--clr-common-white);
  font-weight: 400;
  outline: none;
  padding: 0px 20px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid var(--clr-common-fcopy-border);
}
.contact-from-input textarea {
  height: 170px;
  width: 100%;
  background: var(--clr-common-white);
  border: none;
  padding: 15px 20px;
  border-radius: 5px;
  resize: none;
  outline: 0;
  border: 1px solid var(--clr-common-fcopy-border);
}

.support-icon {
  min-width: 40px;
}
.support-icon i {
  font-size: 20px;
  color: var(--clr-theme-1);
  vertical-align: middle;
}

.support-item {
  display: flex;
  align-items: start;
  margin-bottom: 30px;
}
.support-item:last-child {
  margin-bottom: 0;
}

.support-contact {
  padding: 40px 30px 25px 30px;
  background: #f8f8f9;
  border-radius: 5px;
  border: 1px solid #f8f8f9;
}
@media (max-width: 575px) {
  .support-contact {
    padding: 25px 20px 25px 20px;
  }
}

.support-tittle h4 {
  margin-bottom: 30px;
}

.support-info-phone span {
  font-size: 18px;
  font-weight: 500;
  color: var(--clr-common-heading);
  margin-bottom: 10px;
  display: block;
}
.support-info-phone p {
  margin-bottom: 3px;
}
.support-info-phone p a {
  color: var(--clr-common-heading);
  font-weight: 500;
  -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;
}
.support-info-phone p a:hover {
  color: var(--clr-theme-1);
}

.support-info-email span {
  font-size: 18px;
  font-weight: 500;
  color: var(--clr-common-heading);
  margin-bottom: 10px;
  display: block;
}
.support-info-email a {
  margin-bottom: 2px;
  display: block;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.support-info-email a:hover {
  color: var(--clr-theme-1);
}

.support-info-location span {
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-common-heading);
  margin-bottom: 10px;
  display: block;
}

.contact-select .nice-select {
  height: 55px;
  width: 100%;
  background: #f8f8f9;
  border: none;
  padding: 15px 20px;
  line-height: 27px;
  background: var(--clr-common-white);
  border: 1px solid var(--clr-common-fcopy-border);
}
.contact-select .nice-select span {
  font-size: 16px;
  color: var(--clr-common-);
}
.contact-select .nice-select:after {
  width: 7px;
  height: 7px;
  right: 20px;
}

.contact-select .nice-select .list {
  width: 100%;
  background-color: #f8f8f9;
}

.contact-map iframe {
  height: 380px;
  width: 100%;
  border-radius: 4px;
}

/*----------------------------------------*/
/*  45. footer CSS
/*----------------------------------------*/
.footer-shape1 {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: -1;
}
@media (max-width: 575px) {
  .footer-shape1 {
    display: none;
  }
}

.footer__widget-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--clr-common-heading);
}
.footer__widget p {
  font-size: 16px;
  margin-bottom: 30px;
}
.footer__widget-social li {
  margin-right: 8px;
  display: inline-block;
}
.footer__widget-social li a {
  color: var(--clr-common-f-social);
  font-size: 15px;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  border-radius: 100%;
  border: 1px solid var(--clr-common-f-border);
  -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;
}
.footer__widget-social li a:hover {
  background-color: var(--clr-common-blue);
  color: var(--clr-common-white);
  border: 1px solid var(--clr-common-blue);
}
.footer__widget-links li {
  margin-bottom: 7px;
}
.footer__widget-links li:last-child {
  margin-bottom: 0;
}
.footer__widget-links li a {
  font-size: 15px;
  color: var(--clr-common-text);
  -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;
}
.footer__widget-links li a:hover {
  color: var(--clr-theme-1);
}
.footer__widget-subscribe .field:after {
  position: absolute;
  content: "";
  top: 16px;
  right: 25px;
  font-size: 15px;
  color: var(--clr-common-blue);
  font-family: "Font Awesome 5 Pro";
  cursor: pointer;
}
.footer__widget-subscribe .field input {
  height: 60px;
  width: 100%;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: normal;
  border-radius: 5px;
  color: var(--clr-common-body);
  display: block;
  padding: 0px 50px 0px 20px;
  outline: none;
  background: #f6f8f9;
  margin-bottom: 30px;
  transition: all 0.3s ease-out 0s;
}

.free__trial {
  line-height: 1;
}
.free__trial-text {
  font-size: 14px;
  color: var(--clr-common-heading);
  position: relative;
}
.free__trial img {
  position: absolute;
  top: -16px;
  right: -63px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-2 {
    margin-left: 78px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .footer-2 {
    margin-left: 0px;
  }
}

.footer__widget-subscribe .field2 input {
  background-color: var(--clr-common-white);
}

.footer-copyright {
  border-top: 1px solid var(--clr-common-fcopy-border);
}
.footer-copyright p {
  color: var(--clr-common-text);
  font-size: 16px;
  margin-bottom: 0px;
}

/*# sourceMappingURL=style.css.map */
.box-color2{
  background: #fff;
  border: 1px solid #ebeffe;
}
.wt100{
  width: 100%;
}
.floatleft{
  float: left;
}
.floatright{
  float: right;
}
.truncate-responsive {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* 电脑端：单行省略 */
@media (min-width: 768px) {
  .truncate-responsive {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: unset;
  }
}
@media (max-width: 767px) {
  .zxa {
    display: none;
  }
}
.system-error-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

@media (max-width: 768px) {
  .system-error-grid {
    grid-template-columns: 1fr;
  }
}
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;      /* 或 inline-block 都可以 */
  max-width: 100%;     /* 可选，限制最大宽度 */
}
.liststyle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* 电脑端：单行省略 */
@media (min-width: 768px) {
  .liststyle {
    display: block;
/*    white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: unset;
  }
}

.listintro{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.btline{
  border-bottom: 1px solid var(--clr-common-fcopy-border);
}

.content_likes a{
  background-color: #23b655 !important;
}
.content_likes{
  text-align: center;
}</pre></body></html>