/*
  Template Name: Lory - Digital Agency HTML Template

  ----------------------------
  [Table of contents CSS] 
  ----------------------------

    1. Base CSS
    2. Header CSS
    3. Hero CSS
    4. About CSS
    5. Accordion Css
    6. project css here
    7. Services CSS
    8. Services details css
    9. Blog css
    10. Blog Details Css
    11. Breadcrumb Css
    12. Contact Page Css
    13. Counterup css
    14. Faq Page Css
    15. Featured CSS
    16. Footer Page Css
    17. Login Page css 
    18. Newslette Css
    19. Preloader css 
    20. pricing Css
    21. Privacy Policy css 
    22. Team css
    23. Testimonial Css
    24. Theme dark color css here
    25. 404 page css 
*/
/*
    1. Base CSS
*/ :root {
  --primary-color: #222222;
  --secondary-color: #f99746;
  --yellow-color: #ffc107;
  --text-gray-color: #4a4c59;
  --white-color: #ffffff;
  --ofwhite-color: #e6e6e6;
  --black-color: #000000;
  --light-color: #a5a5a5;
  --light-color2: #aaaaaa;
  --dark-color: #09080d;
  --sky-color: #647589;
  --border-color: #d7d2d2;
  --border-color2: #e4e4e4;
  --border-color3: #dddddd;
  --border-dark: #383434;
  --bg-gray-color: #f5f5f5;
  --gray-color: #ebebeb;
  --gray-color2: #f5f5f5;
  --rubik-fonts: "Rubik", sans-serif;
  --roboto-fonts: "Roboto", sans-serif;
  --body-font-size: 1.65rem;
  --body-font-weight: 400;
  --body-line-height: 2.5rem;
  --headings-weight: 700;
  --transition: all 0.4s ease 0s;
  --container-fluid-offset: 16rem;
}
.color-scheme-1 {
  --secondary-color: #d72323;
}
.color-scheme-2 {
  --secondary-color: #bf0d3e;
}
.color-dark-1 {
  --dark-color: #09080d;
}
.color-dark-2 {
  --dark-color: #202028;
}
/* Common Style */
*, *::after, *::before {
  box-sizing: border-box;
}
html, body {
  min-height: 100%;
  margin: 0;
  font-size: 62.5%;
  padding: 0;
}
body {
  font-family: var(--roboto-fonts);
  font-size: var(--body-font-size, 1.5rem);
  font-weight: var(--body-font-weight);
  font-style: normal;
  line-height: var(--body-line-height, 25px);
  position: relative;
  visibility: visible;
  overflow-x: hidden;
  color: var(--black-color);
  background-color: var(--white-color);
}
body{-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;}
@media only screen and (max-width: 767px) {
  body {
    line-height: 2.4rem;
    font-size: 1.5rem;
  }
}
/* 连续字体大小：10px ~ 65px 全尺寸 | 1rem = 10px */
.fs-10 { font-size: 1rem; }    /* 10px */
.fs-11 { font-size: 1.1rem; }  /* 11px */
.fs-12 { font-size: 1.2rem; }  /* 12px */
.fs-13 { font-size: 1.3rem; }  /* 13px */
.fs-14 { font-size: 1.4rem; }  /* 14px */
.fs-15 { font-size: 1.5rem; }  /* 15px */
.fs-16 { font-size: 1.6rem; }  /* 16px */
.fs-17 { font-size: 1.7rem; }  /* 17px */
.fs-18 { font-size: 1.8rem; }  /* 18px */
.fs-19 { font-size: 1.9rem; }  /* 19px */
.fs-20 { font-size: 2rem; }    /* 20px */
.fs-21 { font-size: 2.1rem; }  /* 21px */
.fs-22 { font-size: 2.2rem; }  /* 22px */
.fs-23 { font-size: 2.3rem; }  /* 23px */
.fs-24 { font-size: 2.4rem; }  /* 24px */
.fs-25 { font-size: 2.5rem; }  /* 25px */
.fs-26 { font-size: 2.6rem; }  /* 26px */
.fs-27 { font-size: 2.7rem; }  /* 27px */
.fs-28 { font-size: 2.8rem; }  /* 28px */
.fs-29 { font-size: 2.9rem; }  /* 29px */
.fs-30 { font-size: 3rem; }    /* 30px */
.fs-31 { font-size: 3.1rem; }  /* 31px */
.fs-32 { font-size: 3.2rem; }  /* 32px */
.fs-33 { font-size: 3.3rem; }  /* 33px */
.fs-34 { font-size: 3.4rem; }  /* 34px */
.fs-35 { font-size: 3.5rem; }  /* 35px */
.fs-36 { font-size: 3.6rem; }  /* 36px */
.fs-37 { font-size: 3.7rem; }  /* 37px */
.fs-38 { font-size: 3.8rem; }  /* 38px */
.fs-39 { font-size: 3.9rem; }  /* 39px */
.fs-40 { font-size: 4rem; }    /* 40px */
.fs-41 { font-size: 4.1rem; }  /* 41px */
.fs-42 { font-size: 4.2rem; }  /* 42px */
.fs-43 { font-size: 4.3rem; }  /* 43px */
.fs-44 { font-size: 4.4rem; }  /* 44px */
.fs-45 { font-size: 4.5rem; }  /* 45px */
.fs-46 { font-size: 4.6rem; }  /* 46px */
.fs-47 { font-size: 4.7rem; }  /* 47px */
.fs-48 { font-size: 4.8rem; }  /* 48px */
.fs-49 { font-size: 4.9rem; }  /* 49px */
.fs-50 { font-size: 5rem; }    /* 50px */
.fs-51 { font-size: 5.1rem; }  /* 51px */
.fs-52 { font-size: 5.2rem; }  /* 52px */
.fs-53 { font-size: 5.3rem; }  /* 53px */
.fs-54 { font-size: 5.4rem; }  /* 54px */
.fs-55 { font-size: 5.5rem; }  /* 55px */
.fs-56 { font-size: 5.6rem; }  /* 56px */
.fs-57 { font-size: 5.7rem; }  /* 57px */
.fs-58 { font-size: 5.8rem; }  /* 58px */
.fs-59 { font-size: 5.9rem; }  /* 59px */
.fs-60 { font-size: 6rem; }    /* 60px */
.fs-61 { font-size: 6.1rem; }  /* 61px */
.fs-62 { font-size: 6.2rem; }  /* 62px */
.fs-63 { font-size: 6.3rem; }  /* 63px */
.fs-64 { font-size: 6.4rem; }  /* 64px */
.fs-65 { font-size: 6.5rem; }  /* 65px */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-weight: var(--headings-weight);
  margin: 0;
  font-family: var(--rubik-fonts);
}
h1, .h1 {
  font-size: 2.4rem;
  line-height: 3rem;
  font-weight: 700;
}
@media only screen and (min-width: 480px) {
  h1, .h1 {
    font-size: 2.6rem;
    line-height: 3.5rem;
  }
}
@media only screen and (min-width: 576px) {
  h1, .h1 {
    font-size: 3rem;
    line-height: 3.8rem;
  }
}
@media only screen and (min-width: 768px) {
  h1, .h1 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  h1, .h1 {
    font-size: 4rem;
    line-height: 4.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  h1, .h1 {
    font-size: 4.2rem;
    line-height: 5rem;
  }
}
@media only screen and (min-width: 1366px) {
  h1, .h1 {
    font-size: 5rem;
    line-height: 5.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  h1, .h1 {
    font-size: 6.5rem;
    line-height: 7.5rem;
  }
}
h2, .h2 {
  font-size: 2rem;
  line-height: 2.6rem;
  font-weight: 700;
}
@media only screen and (min-width: 480px) {
  h2, .h2 {
    font-size: 2.2rem;
  }
}
@media only screen and (min-width: 576px) {
  h2, .h2 {
    font-size: 2.4rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 768px) {
  h2, .h2 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  h2, .h2 {
    font-size: 2.8rem;
    line-height: 3.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  h2, .h2 {
    font-size: 3.2rem;
    line-height: 3.8rem;
  }
}
@media only screen and (min-width: 1600px) {
  h2, .h2 {
    font-size: 4.8rem;
    line-height: 6rem;
  }
}
h3, .h3 {
  font-size: 1.7rem;
  line-height: 2.4rem;
  font-weight: 500;
}
@media only screen and (min-width: 992px) {
  h3, .h3 {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }
}
@media only screen and (min-width: 1200px) {
  h3, .h3 {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1366px) {
  h3, .h3 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}
h4, .h4 {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
@media only screen and (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
}
h5, .h5 {
  font-weight: 400;
}
h6, .h6 {
  font-weight: 400;
}
p, .p {
  margin-top: 0;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 767px) {
  p, .p {
    font-size: 1.4rem;
    line-height: 2.5rem;
  }
}
p:last-child {
  margin-bottom: 0;
}
a, button {
  display: inline-block;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}
a, button, img, input, textarea {
  transition: var(--transition);
}
*:focus {
  outline: none;
  box-shadow: none;
}
:focus-visible {
  box-shadow: 0 0 5px 2px rgba(19, 19, 19, 0.15);
}
a:focus {
  text-decoration: none;
  outline: none;
}
a:hover {
  text-decoration: none;
  color: var(--secondary-color);
}
button, input[type="submit"] {
  cursor: pointer;
  font-family: var(--font-lato);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}
input[type="number"] {
  -moz-appearance: textfield;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
span {
  display: inline-block;
  transition: var(--transition);
}
label {
  transition: var(--transition);
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  opacity: 1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  opacity: 1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 1;
}
ul {
  margin: 0;
  padding: 0;
}
ul:last-child {
  margin-bottom: 0;
}
li {
  list-style: none;
  line-height: 1;
}
hr {
  border-top-width: 2px;
}
.container, .container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.container {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
.container-fluid {
  --offset-fluid: 1.5rem;
  padding-right: var(--offset-fluid);
  padding-left: var(--offset-fluid);
}
@media only screen and (min-width: 992px) {
  .container-fluid {
    --offset-fluid: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .container-fluid {
    --offset-fluid: calc(var(--container-fluid-offset) / 4.5);
  }
}
@media only screen and (min-width: 1600px) {
  .container-fluid {
    --offset-fluid: calc(var(--container-fluid-offset) / 2.5);
  }
}
@media only screen and (min-width: 1800px) {
  .container-fluid {
    --offset-fluid: var(--container-fluid-offset);
  }
}
.container-fluid.width-100 {
  --offset-fluid: 0;
}
@media only screen and (min-width: 576px) {
  .container {
    max-width: 576px;
  }
}
@media only screen and (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media only screen and (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}
@media only screen and (min-width: 1400px) {
  .container {
    max-width: 1300px;
  }
}

@media only screen and (min-width: 1600px) {
  .container {
    max-width: 1450px;
  }
}

@media only screen and (min-width: 1900px) {
  .container {
    max-width: 1650px;
  }
}
.row {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-bottom: var(--bs-gutter-y);
}
.col {
  flex: 1 0 0%;
}
.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}
.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}
.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}
.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}
.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}
.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}
@media only screen and (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
}
@media only screen and (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
}
@media only screen and (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
}
@media only screen and (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
}
@media only screen and (min-width: 1600px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
}
.col-auto {
  flex: 0 0 auto;
  width: auto;
}
.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}
.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}
.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}
.col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}
.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}
.col-12 {
  flex: 0 0 auto;
  width: 100%;
}
@media only screen and (min-width: 576px) {
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width: 1400px) {
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
}
@media (min-width: 992px) {
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
}
@media (min-width: 992px) {
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
}
@media (min-width: 1200px) {
  .offset-xl-0 {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .row {
    margin-right: -10px;
    margin-left: -10px;
  }
  .row > * {
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media only screen and (max-width: 479px) {
  .row {
    margin-right: -8px;
    margin-left: -8px;
  }
  .row > * {
    padding-right: 8px;
    padding-left: 8px;
  }
  .custom-col {
    width: 100%;
  }
}
.row-reverse {
  flex-direction: column-reverse;
}
@media only screen and (max-width: 991px) {
  .row-md-reverse {
    flex-direction: column-reverse;
  }
}
@media only screen and (max-width: 767px) {
  .row-sm-reverse {
    flex-direction: column-reverse;
  }
}
.d-flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.align-items-center {
  align-items: center;
}
.align-self-center {
  align-self: center;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-between {
  justify-content: space-between;
}
.d-none {
  display: none;
}
@media only screen and (min-width: 992px) {
  .d-lg-block {
    display: block;
  }
  .d-lg-flex {
    display: flex;
  }
}
@media only screen and (min-width: 1200px) {
  .d-xl-none {
    display: none;
  }
  .d-xl-block {
    display: block;
  }
  .d-xl-flex {
    display: flex;
  }
}
@media only screen and (min-width: 1600px) {
  .d-xxl-none {
    display: none;
  }
  .d-xxl-block {
    display: block;
  }
  .d-xxl-flex {
    display: flex;
  }
}
@media only screen and (max-width: 1199px) {
  .col-lg-order {
    order: 1;
  }
  .d-lg-none {
    display: none;
  }
}
@media only screen and (max-width: 991px) {
  .d-md-none {
    display: none;
  }
  .d-md-flex {
    display: flex;
  }
  .col-md-order {
    order: 1;
  }
  .d-md-block {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .d-sm-none {
    display: none;
  }
  .d-sm-block {
    display: block;
  }
  .d-sm-flex {
    display: flex;
  }
  .col-sm-order {
    order: 1;
  }
}
@media only screen and (max-width: 575px) {
  .d-sm-2-none {
    display: none;
  }
  .d-sm-2-block {
    display: block;
  }
  .d-sm-2-flex {
    display: flex;
  }
  .col-sm-2-order {
    order: 1;
  }
}
.display-block {
  display: block;
}
.primary__btn {
  font-weight: 400;
  display: inline-block;
  font-size: 1.4rem;
  line-height: 3.2rem;
  height: 3.4rem;
  padding: 0 1.2rem;
  letter-spacing: 0.2px;
  border-radius: 0.5rem;
  background: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  color: var(--white-color);
}
.primary__btn svg {
  margin-left: 3px;
}
.primary__btn:hover {
  background: inherit;
  color: var(--secondary-color);
}
@media only screen and (min-width: 480px) {
  .primary__btn {
    padding: 0 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .primary__btn {
    line-height: 3.8rem;
    height: 4rem;
    padding: 0 1.8rem;
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .primary__btn {
    line-height: 4.2rem;
    height: 4.4rem;
    padding: 0 2.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .primary__btn {
    line-height: 4.8rem;
    height: 5rem;
    font-size: 1.5rem;
    padding: 0 2.8rem;
  }
}
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.swiper:hover .swiper__nav--btn {
  opacity: 1;
  visibility: visible;
}
.swiper__nav--btn {
  width: 4rem;
  height: 4rem;
  background: var(--secondary-color);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 9;
}
@media only screen and (max-width: 767px) {
  .swiper__nav--btn {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.swiper__nav--btn:hover {
  background: var(--primary-color);
}
.swiper__nav--btn::after {
  background: url(../images/left-arrow-angle.webp);
  width: 9px;
  height: 17px;
  font-size: 0;
}
.swiper__nav--btn.swiper-button-prev {
  left: 0;
}
.swiper__nav--btn.swiper-button-next {
  right: 0;
}
.swiper__nav--btn.swiper-button-next::after {
  background: url(../images/right-arrow-angle.webp);
}
.swiper-pagination {
  bottom: 10px !important;
}
.swiper-pagination-bullet {
  width: 1.5rem;
  height: 1.5rem;
  opacity: 1;
  vertical-align: middle;
  transition: var(--transition);
  background: #afafaf;
  margin: 0 3px !important;
  position: relative;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--secondary-color);
}
select {
  word-wrap: normal;
  font-family: var(--font-lato);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}
#scroll__top {
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 99;
  outline: none;
  background-color: var(--secondary-color);
  color: var(--white-color);
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transform: translateY(50px);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  line-height: 1;
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#scroll__top:hover {
  background: var(--primary-color);
}
#scroll__top.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
#scroll__top svg {
  width: 25px;
  line-height: 1;
}
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
}
.line-height-1 {
  line-height: 1;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.overflow-hidden {
  overflow: hidden;
}
.break {
  word-break: break-word;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.text-white {
  color: var(--white-color) !important;
}
.text-ofwhite {
  color: var(--ofwhite-color);
}
.text-black {
  color: var(--black-color) !important;
}
.body__background {
  background: var(----gray-color);
}
.bg__primary {
  background: var(--primary-color);
}
.bg__secondary {
  background: var(--secondary-color);
}
.bg__secondary2 {
  background: var(--secondary-color2);
}
.bg__gray--color {
  background: var(--bg-gray-color);
}
.bg__white {
  background: var(--white-color);
}
.bg__black {
  background: #1d1c1c;
}
.text__primary {
  color: var(--primary-color) !important;
}
.text__secondary {
  color: var(--secondary-color);
}
.text__secondary2 {
  color: var(--secondary-color2);
}
.position__relative {
  position: relative;
}
.border-bottom {
  border-bottom: 1px solid var(--border-color);
}
.border {
  border: 1px solid var(--border-color);
}
.border-0 {
  border: none;
}
.border-radius-5 {
  border-radius: 0.5rem;
}
.border-radius-10 {
  border-radius: 1rem;
}
.border-radius-20 {
  border-radius: 2rem;
}
.border-radius-30 {
  border-radius: 3rem;
}
.border-radius-50 {
  border-radius: 50%;
}
.width-100 {
  width: 100%;
}
@media only screen and (max-width: 991px) {
  .md-width-100 {
    width: 100%;
  }
}
/* Tab */
.tab_content {
  display: block;
}
.tab_pane {
  display: none;
  transition: var(--transition);
}
.tab_pane:not(.show) {
  opacity: 0;
}
.tab_pane.show {
  opacity: 1;
}
.tab_pane.active {
  display: block;
}
body.overlay__active, .mobile_menu_open, .predictive__search--box_active, .offCanvas__minicart_active, .offcanvas__filter--sidebar_active {
  overflow-y: hidden;
}
body.overlay__active::before, .predictive__search--box_active::before, .mobile_menu_open::before, .offCanvas__minicart_active::before, .offcanvas__filter--sidebar_active::before {
  position: absolute;
  content: "";
  background: #000;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0.5;
  cursor: crosshair;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
.animate-fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
/* Section padding */
.section--padding {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media only screen and (min-width: 768px) {
  .section--padding {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
@media only screen and (min-width: 992px) {
  .section--padding {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .section--padding {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
}
@media only screen and (min-width: 1600px) {
  .section--padding {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}
/* Section margin */
.section--nargin {
  margin-top: 6rem;
  margin-bottom: 6rem;
}
@media only screen and (min-width: 768px) {
  .section--nargin {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
}
@media only screen and (min-width: 992px) {
  .section--nargin {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
}
@media only screen and (min-width: 1200px) {
  .section--nargin {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
}
/* Padding */
.p-0 {
  padding: 0;
}
.pt-0 {
  padding-top: 0;
}
.pb-0 {
  padding-bottom: 0;
}
/* Margin */
.m-0 {
  margin: 0;
}
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mb-60 {
  margin-bottom: 3.5rem;
}
@media only screen and (min-width: 768px) {
  .mb-60 {
    margin-bottom: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .mb-60 {
    margin-bottom: 6rem;
  }
}
.mb-55 {
  margin-bottom: 3.5rem;
}
@media only screen and (min-width: 992px) {
  .mb-55 {
    margin-bottom: 5.5rem;
  }
}
.mb-50 {
  margin-bottom: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .mb-50 {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb-50 {
    margin-bottom: 4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .mb-50 {
    margin-bottom: 5rem;
  }
}
.mb--n50 {
  margin-bottom: -2.5rem;
}
@media only screen and (min-width: 768px) {
  .mb--n50 {
    margin-bottom: -3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb--n50 {
    margin-bottom: -4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .mb--n50 {
    margin-bottom: -5rem;
  }
}
.mb-40 {
  margin-bottom: 2.5rem;
}
@media only screen and (min-width: 992px) {
  .mb-40 {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb-40 {
    margin-bottom: 4rem;
  }
}
.mb--n40 {
  margin-bottom: -2.5rem;
}
@media only screen and (min-width: 992px) {
  .mb--n40 {
    margin-bottom: -3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb--n40 {
    margin-bottom: -4rem;
  }
}
.mb-35 {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 576px) {
  .mb-35 {
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .mb-35 {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb-35 {
    margin-bottom: 3.5rem;
  }
}
.mb--n35 {
  margin-bottom: -2rem;
}
@media only screen and (min-width: 576px) {
  .mb--n35 {
    margin-bottom: -2.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .mb--n35 {
    margin-bottom: -3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb--n35 {
    margin-bottom: -3.5rem;
  }
}
.mb-30 {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 992px) {
  .mb-30 {
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .mb-30 {
    margin-bottom: 3rem;
  }
}
.mb--n30 {
  margin-bottom: -2rem;
}
@media only screen and (min-width: 992px) {
  .mb--n30 {
    margin-bottom: -2.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .mb--n30 {
    margin-bottom: -3rem;
  }
}
.mb-28 {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 992px) {
  .mb-28 {
    margin-bottom: 2.3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb-28 {
    margin-bottom: 2.8rem;
  }
}
.mb--n28 {
  margin-bottom: -2rem;
}
@media only screen and (min-width: 992px) {
  .mb--n28 {
    margin-bottom: -2.3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb--n28 {
    margin-bottom: -2.8rem;
  }
}
.mb--n25 {
  margin-bottom: -1.8rem;
}
@media only screen and (min-width: 992px) {
  .mb--n25 {
    margin-bottom: -2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb--n25 {
    margin-bottom: -2.5rem;
  }
}
.mb-25 {
  margin-bottom: 1.8rem;
}
@media only screen and (min-width: 992px) {
  .mb-25 {
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb-25 {
    margin-bottom: 2.5rem;
  }
}
.mb-20 {
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .mb-20 {
    margin-bottom: 2rem;
  }
}
.mb-18 {
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .mb-18 {
    margin-bottom: 1.8rem;
  }
}
.mb-15 {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .mb-15 {
    margin-bottom: 1.5rem;
  }
}
.mb-12 {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 992px) {
  .mb-12 {
    margin-bottom: 1.2rem;
  }
}
.mb-10 {
  margin-bottom: 0.8rem;
}
@media only screen and (min-width: 992px) {
  .mb-10 {
    margin-bottom: 1rem;
  }
}
.mb-5 {
  margin-bottom: 0.5rem;
}
.mb-8 {
  margin-bottom: 0.8rem;
}
.mr-30 {
  margin-right: 3rem;
}
/*
    2. Header CSS
*/
.offcanvas__header--menu__open {
  line-height: 1;
  display: none;
}
@media only screen and (max-width: 991px) {
  .offcanvas__header--menu__open {
    display: block;
  }
}
.offcanvas__header--menu__open--svg {
  width: 32px;
}
.offcanvas__header--menu__open--btn > * {
  pointer-events: none;
}
.offcanvas-header {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 75%;
  height: 100vh;
  transition: var(--transition);
  transform: translateX(-100%);
  background-color: var(--white-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  padding-bottom: 110px;
}
@media only screen and (min-width: 480px) {
  .offcanvas-header {
    max-width: 320px;
  }
}
.offcanvas-header.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
.offcanvas-header.open ~ .offcanvas-overlay {
  visibility: visible;
  opacity: 0.75;
}
.offcanvas-overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  transition: var(--transition);
  opacity: 0;
  background-color: var(--black-color);
}
.offcanvas__inner {
  position: relative;
  height: 100%;
}
/* Offacnvas Logo */
.offcanvas__logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 10px;
}
.offcanvas__close--btn {
  position: relative;
  align-self: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  text-indent: -9999px;
  border: none;
  background-color: transparent;
}
.offcanvas__close--btn::before, .offcanvas__close--btn::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  content: "";
  transform: rotate(45deg);
  background-color: var(--black-color);
}
.offcanvas__close--btn::after {
  transform: rotate(-45deg);
}
/* Mobile Menu */
.offcanvas__menu {
  overflow-y: auto;
  height: 100%;
}
.offcanvas__menu_ul {
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 100vh;
}
.offcanvas__menu_li {
  position: relative;
  border-bottom: 1px solid var(--border-color2);
}
.offcanvas__menu_li:first-child {
  border-top: 1px solid var(--border-color2);
}
.offcanvas__menu_item {
  line-height: 1;
  display: block;
  padding: 15px 20px;
  text-transform: uppercase;
}
/* Mobile Sub Menu */
.offcanvas__sub_menu {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.offcanvas__sub_menu_li {
  position: relative;
  border-top: 1px solid var(--border-color2);
}
.offcanvas__sub_menu_item {
  line-height: 1;
  display: block;
  padding: 15px 0 15px 30px;
}
.offcanvas__sub_menu_item ~ .offcanvas__sub_menu .offcanvas__sub_menu_item {
  padding-left: 40px;
}
.offcanvas__sub_menu_toggle {
  font-size: 20px;
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4.6rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
}
.offcanvas__sub_menu_toggle::before, .offcanvas__sub_menu_toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  content: "";
  transition: var(--transition);
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--black-color);
}
.offcanvas__sub_menu_toggle:not(.active)::after {
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
.header__section.border-bottom {
  border-bottom: 1px solid var(--secondary-color);
}
.header__sticky.sticky {
  position: fixed;
  width: 100%;
  top: 0;
  background: var(--white-color);
  left: 0;
  z-index: 99;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
}
.header__transparent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
@media only screen and (max-width: 991px) {
  .main__header {
    padding: 0.5rem 0;
  }
}
@media only screen and (max-width: 991px) {
  .main__logo {
    margin-right: -80px;
  }
}
@media only screen and (max-width: 767px) {
  .main__logo {
    margin-right: -70px;
  }
}
@media only screen and (max-width: 575px) {
  .main__logo {
    margin-right: -60px;
  }
}
@media only screen and (max-width: 400px) {
  .main__logo {
    margin-right: -25px;
  }
}
.main__logo--title {
  line-height: 2rem;
}
.header__account--items {
  margin-right: 2rem;
}
.header__account--items:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 575px) {
  .header__account--items {
    margin-right: 1rem;
  }
}
@media only screen and (min-width: 992px) {
  .header__account--search__items.mobile__d--block {
    display: none;
  }
}
.header__account--btn {
  position: relative;
  color: var(--text-gray-color);
  text-align: center;
}
.header__account--btn:hover {
  color: var(--secondary-color);
}
.header__account--btn > * {
  pointer-events: none;
}
.items__count {
  position: absolute;
  right: -1.4rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  line-height: 2rem;
  background: var(--secondary-color);
  text-align: center;
  border-radius: 50%;
  color: var(--white-color);
}
.items__count.style2 {
  right: -1.4rem;
}
.items__count.wishlist__count {
  right: -0.7rem;
}
.predictive__search--title {
  margin-bottom: 15px;
}
@media only screen and (min-width: 992px) {
  .predictive__search--title {
    margin-bottom: 20px;
    font-size: 2.7rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 1600px) {
  .predictive__search--title {
    margin-bottom: 2.5rem;
    font-size: 3rem;
    line-height: 3.5rem;
  }
}
.predictive__search--box {
  background: var(--white-color);
  box-shadow: 0 -4px 27px rgba(62, 70, 120, 0.16);
  position: relative;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
  transition: all 0.3s ease 0s;
  transform: translateY(-100%);
}
.predictive__search--box.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.predictive__search--box__inner {
  padding: 20px 16px;
  text-align: center;
}
@media only screen and (min-width: 576px) {
  .predictive__search--box__inner {
    padding: 22px 50px;
  }
}
@media only screen and (min-width: 768px) {
  .predictive__search--box__inner {
    padding: 30px 80px;
  }
}
@media only screen and (min-width: 992px) {
  .predictive__search--box__inner {
    padding: 30px 150px;
  }
}
.predictive__search--form {
  width: 100%;
  position: relative;
}
.predictive__search--input {
  width: 100%;
  height: 5rem;
  border: 1px solid var(--border-color2);
  padding: 0 80px 0 15px;
  font-size: 1.6rem;
  font-weight: 400;
  border-radius: 5px;
}
.predictive__search--input:focus {
  border-color: var(--secondary-color);
}
.predictive__search--input:focus::-webkit-input-placeholder {
  color: #000000;
}
@media only screen and (max-width: 576px) {
  .predictive__search--input {
    height: 45px;
  }
}
.predictive__search--button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0;
  background: var(--secondary-color);
  border: 0;
  width: 6rem;
  text-align: center;
  color: var(--white-color);
  border-radius: 0 5px 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.predictive__search--button:hover {
  background: var(--primary-color);
}
.predictive__search--close__btn {
  position: absolute;
  top: 20px;
  right: 40px;
  padding: 0;
  border: 0;
  background: inherit;
}
@media only screen and (max-width: 576px) {
  .predictive__search--close__btn {
    right: 15px;
  }
}
.predictive__search--close__btn:hover {
  color: var(--primary-color);
  transform: scale(1.3);
}
.predictive__search--close__btn > * {
  pointer-events: none;
}
.header__bottom {
  box-shadow: 0 3px 8px rgba(71, 71, 71, 0.16);
}
.header__menu--items {
  margin-right: 3rem;
  position: relative;
  padding: 2rem 0;
}
@media only screen and (min-width: 992px) {
  .header__menu--items {
    margin-right: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .header__menu--items {
    margin-right: 3.8rem;
    padding: 2.5rem 0;
  }
}
@media only screen and (min-width: 1366px) {
  .header__menu--items {
    margin-right: 4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .header__menu--items {
    padding: 3rem 0;
      margin-right: 6rem;
  }
}
.header__menu--items:last-child {
  margin-right: 0;
}
.header__menu--items:hover .header__menu--link {
  color: var(--secondary-color);
}
.header__menu--items:hover .header__menu--link::before {
  width: 100%;
  left: 0;
  right: 0;
}
.header__menu--items:hover .header__sub--menu {
  visibility: visible;
  margin-top: 0;
  opacity: 1;
}
.header__menu--items:hover .header__mega--menu {
  visibility: visible;
  margin-top: 0;
  opacity: 1;
}
.header__menu--link {
  font-size: 1.6rem;
  line-height: 2.7rem;
  font-weight: 500;
  color: var(--text-gray-color);
  position: relative;
}
@media only screen and (min-width: 1200px) {
  .header__menu--link {
    font-size: 1.8rem;
  }
}
.header__menu--link::before {
  position: absolute;
  content: "";
  width: 0;
  height: 2px;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: var(--secondary-color);
  transition: var(--transition);
}
.header__sub--menu {
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 0;
  visibility: hidden;
  width: 230px;
  margin: 0;
  margin-top: 20px;
  padding: 20px;
  list-style: none;
  transition: var(--transition);
  opacity: 0;
  background-color: var(--white-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}
.header__sub--menu__items {
  position: relative;
}
.header__sub--menu__items:hover .header__multi--label__sub--menu {
  opacity: 1;
  visibility: visible;
  top: 0;
}
.header__sub--menu__link {
  font-size: 1.5rem;
  display: block;
  padding: 10px 0;
}
.header__multi--label__sub--menu {
  position: absolute;
  left: 110%;
  top: 15px;
  width: 210px;
  background-color: var(--white-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 15px 2rem;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
}
.header__multi--label__sub--menu__link {
  font-size: 1.5rem;
  display: block;
  padding: 8px 0;
}
.header__submenu__plus--icon {
  position: absolute;
  right: 0;
  top: 50%;
  font-size: 1.8rem;
  transform: translatey(-50%);
}
.offCanvas__minicart {
  position: fixed;
  width: 310px;
  height: 100%;
  padding: 18px 15px 30px;
  background: var(--white-color);
  z-index: 999;
  right: 0;
  top: 0;
  transition: 0.4s;
  transform: translateX(100%);
  overflow-y: auto;
  box-shadow: 0 0 15px rgba(5, 0, 0, 0.1);
  visibility: hidden;
}
.offCanvas__minicart.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
@media only screen and (min-width: 480px) {
  .offCanvas__minicart {
    width: 375px;
  }
}
@media only screen and (min-width: 1600px) {
  .offCanvas__minicart {
    padding: 20px 15px 33px;
  }
}
.minicart__header--top {
  margin-bottom: 10px;
}
.minicart__header--desc {
  font-size: 1.6rem;
  color: var(--text-gray-color);
}
@media only screen and (min-width: 480px) {
  .minicart__header--desc {
    font-size: 1.7rem;
  }
}
.minicart__title {
  font-weight: 600;
}
.minicart__close--btn {
  padding: 0;
  background: inherit;
  border: 0;
  line-height: 1.5rem;
  color: var(--black-color);
}
.minicart__close--btn:hover {
  color: var(--primary-color);
  transform: scale(1.3);
}
.minicart__close--btn > * {
  pointer-events: none;
}
.minicart__close--icon {
  width: 26px;
}
.minicart__product {
  margin-bottom: 17px;
}
.minicart__product--items {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color2);
}
@media only screen and (min-width: 1600px) {
  .minicart__product--items {
    margin-top: 22px;
    padding-top: 22px;
  }
}
.minicart__product--remove {
  border: 0;
  padding: 0;
  background: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-decoration: underline;
  font-weight: 700;
  opacity: 0.7;
}
.minicart__product--remove:hover {
  color: var(--secondary-color);
}
.minicart__thumbnail {
  width: 100px;
  line-height: 1;
}
@media only screen and (min-width: 480px) {
  .minicart__thumbnail {
    width: 120px;
  }
}
.minicart__thumbnail a {
  display: block;
}
.minicart__thumbnail a img {
  display: block;
}
.minicart__text {
  width: calc(100% - 100px);
  padding-left: 10px;
}
@media only screen and (min-width: 480px) {
  .minicart__text {
    width: calc(100% - 120px);
    padding-left: 13px;
  }
}
.minicart__subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 2px;
}
@media only screen and (min-width: 480px) {
  .minicart__subtitle {
    font-size: 1.6rem;
  }
}
.color__variant {
  opacity: 0.8;
  margin-bottom: 4px;
  line-height: 20px;
  font-size: 1.4rem;
}
.minicart__price {
  margin-bottom: 9px;
}
.minicart__price .current__price {
  font-size: 1.5rem;
}
.minicart__price .old__price {
  font-size: 1.4rem;
}
.minicart__quantity {
  margin-right: 15px;
}
.quantity__box {
  text-align: center;
  display: flex;
}
.quantity__value {
  display: inline-block;
  border: 1px solid var(--border-color2);
  margin: 0px;
  width: 3.3rem;
  height: 3rem;
  text-align: center;
  padding: 0;
  background: var(--gray-color2);
  cursor: pointer;
  font-size: 2rem;
  font-weight: 500;
}
.quantity__value.decrease {
  margin-right: -4px;
  border-radius: 13px 0 0 13px;
}
.quantity__value.increase {
  margin-left: -4px;
  border-radius: 0 13px 13px 0;
}
input.quantity__number {
  text-align: center;
  border: none;
  border-top: 1px solid var(--border-color2);
  border-bottom: 1px solid var(--border-color2);
  margin: 0px;
  width: 3.3rem;
  height: 3rem;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.minicart__amount {
  padding: 13px 0;
  border-top: 1px solid var(--border-color2);
  border-bottom: 1px solid var(--border-color2);
}
.minicart__amount_list {
  margin-bottom: 10px;
}
.minicart__amount_list:last-child {
  margin-bottom: 0;
}
.minicart__conditions {
  padding: 20px 0;
}
.minicart__conditions--input {
  vertical-align: middle;
}
.minicart__conditions--label {
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-gray-color);
}
.minicart__conditions--link {
  color: var(--secondary-color);
  text-decoration: underline;
}
.minicart__conditions--link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
.minicart__button--link {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 4.5rem;
  height: 4.5rem;
  margin-right: 14px;
}
.minicart__button--link:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 991px) {
  .main__header--style2 {
    padding: 0 1.5rem;
  }
}
.main__logo--style2 {
  background: #2a2a2a;
  padding: 0 2rem;
  height: 7rem;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 1200px) {
  .main__logo--style2 {
    padding: 0 3rem;
    height: 7.8rem;
  }
}
@media only screen and (min-width: 1366px) {
  .main__logo--style2 {
    padding: 0 4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .main__logo--style2 {
    padding: 0 7rem;
    height: 8.8rem;
  }
}
@media only screen and (max-width: 991px) {
  .main__logo--style2 {
    margin-right: -50px;
  }
}
@media only screen and (max-width: 575px) {
  .main__logo--style2 {
    margin-right: 0;
    padding: 0 1.5rem;
    height: 6rem;
  }
}
.header__contact--text {
  color: var(--white-color);
  background: var(--secondary-color);
  padding: 0 1.5rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  height: 7rem;
  line-height: 7rem;
}
.header__contact--text:hover {
  background: var(--primary-color);
  color: var(--white-color);
}
@media only screen and (min-width: 1200px) {
  .header__contact--text {
    padding: 0 2.5rem;
    font-size: 1.6rem;
    height: 7.8rem;
    line-height: 7.8rem;
  }
}
@media only screen and (min-width: 1366px) {
  .header__contact--text {
    padding: 0 3rem;
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 1600px) {
  .header__contact--text {
    padding: 0 5rem;
    height: 8.8rem;
  }
}
@media only screen and (max-width: 991px) {
  .header__contact--text {
    display: none;
  }
}
.search__open--btn.style2 {
  width: 3.5rem;
  height: 3.5rem;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.minicart__open--btn.style2 {
  display: flex;
  align-items: center;
}
.minicart__open--btn__style2 {
  width: 3.5rem;
  height: 3.5rem;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.minicart__items--count2 {
  left: 25px;
}
.minicart__open--price__count {
  font-size: 1.8rem;
  font-weight: 500;
  color: #767676;
  margin-left: 1.4rem;
}
@media only screen and (max-width: 1199px) {
  .minicart__open--price__count {
    display: none;
  }
}
.header__menu--items.style2 {
  margin-right: 2rem;
}
@media only screen and (min-width: 992px) {
  .header__menu--items.style2 {
    margin-right: 2.3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .header__menu--items.style2 {
    margin-right: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .header__menu--items.style2 {
    margin-right: 4rem;
  }
}
.header__menu--items.style2:last-child {
  margin-right: 0;
}
.header__menu--link.style2 {
  font-size: 1.5rem;
}
@media only screen and (min-width: 1200px) {
  .header__menu--link.style2 {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 1366px) {
  .header__menu--link.style2 {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 479px) {
  .header__contact--info.style3 {
    flex-direction: column;
  }
}
@media only screen and (max-width: 479px) {
  .header__contact--info.style3 .header__contact--info__list {
    margin-right: 0;
    margin-bottom: 1.5rem;
  }
  .header__contact--info.style3 .header__contact--info__list:last-child {
    margin-bottom: 0;
  }
}
.header__social {
  margin-left: 3rem;
}
@media only screen and (max-width: 767px) {
  .header__social {
    display: none;
  }
}
.header__social--list {
  margin-right: 1.5rem;
}
.header__social--list:last-child {
  margin-right: 0;
}
.header__social--list__icon {
  color: var(--white-color);
}
.header__social--list__icon:hover {
  color: var(--primary-color);
}
/*
    3. Hero CSS
*/
.hero__section {
  background: url(../images/hero-bg-banner.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  height: auto;
  display: flex;
  align-items: flex-end;
}
@media only screen and (min-width: 768px) {
  .hero__section {
    height: 530px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__section {
    height: 610px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__section {
    height: 710px;
  }
}
@media only screen and (min-width: 1366px) {
  .hero__section {
    height: 715px;
  }
}
@media only screen and (min-width: 1600px) {
  .hero__section {
    height: 880px;
  }
}
.hero__section--inner {
  padding-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .hero__section--inner {
    padding-top: 12rem;
  }
}
.hero__section--inner.pb-0 {
  padding-bottom: 0;
}
.hero__section--shape--bg {
  position: absolute;
  left: 0;
  bottom: 40px;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media only screen and (min-width: 992px) {
  .hero__thumbnail {
    margin: 0 1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__thumbnail {
    margin: 0 3rem;
  }
}
@media only screen and (min-width: 1600px) {
  .hero__thumbnail {
    margin: 0;
  }
}
@media only screen and (max-width: 767px) {
  .hero__thumbnail {
    margin: 0 5rem;
  }
}
@media only screen and (max-width: 575px) {
  .hero__thumbnail {
    margin: 0 4rem;
  }
}
@media only screen and (max-width: 479px) {
  .hero__thumbnail {
    margin: 0 3rem;
  }
}
@media only screen and (max-width: 399px) {
  .hero__thumbnail {
    margin: 0 1.5rem;
  }
}
.hero__thumbnail--img {
  position: absolute;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateLeftRight;
  animation-name: animateLeftRight;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  left: 0;
  bottom: 4px;
  margin: 0 auto;
  padding: 0 20px;
}
@-webkit-keyframes animateUpDown {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes animateUpDown {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
  }
  100% {
    transform: translateY(0px);
  }
}
@-webkit-keyframes animateLeftRight {
  0% {
    transform: translatex(0px);
    -webkit-transform: translatex(0px);
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
  }
  50% {
    transform: translatex(-40px);
    -webkit-transform: translatex(-40px);
    -moz-transform: translatex(-40px);
    -ms-transform: translatex(-40px);
    -o-transform: translatex(-40px);
  }
  100% {
    transform: translatex(0px);
    -webkit-transform: translatex(0px);
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
  }
}
@keyframes animateLeftRight {
  0% {
    transform: translatex(0px);
    -webkit-transform: translatex(0px);
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
  }
  50% {
    transform: translatex(-40px);
    -webkit-transform: translatex(-40px);
    -moz-transform: translatex(-40px);
    -ms-transform: translatex(-40px);
    -o-transform: translatex(-40px);
  }
  100% {
    transform: translatex(0px);
    -webkit-transform: translatex(0px);
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
  }
}
@media only screen and (max-width: 767px) {
  .hero__content {
    text-align: center;
    margin-bottom: 3rem;
  }
}
.hero__content--subtitle {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-family: var(--rubik-fonts);
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .hero__content--subtitle {
    font-size: 1.7rem;
    margin-bottom: 1.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .hero__content--subtitle {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }
}
.hero__content--maintitle {
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .hero__content--maintitle {
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .hero__content--maintitle {
    margin-bottom: 2.2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .hero__content--maintitle {
    margin-bottom: 3rem;
  }
}
.hero__content--desc {
  font-size: 1.5rem;
  line-height: 2.6rem;
  margin-bottom: 1.8rem;
}
@media only screen and (min-width: 576px) {
  .hero__content--desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .hero__content--desc {
    font-size: 1.7rem;
    line-height: 3rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .hero__content--desc {
    font-size: 1.8rem;
    line-height: 3.2rem;
    margin-bottom: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__content--desc {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .hero__content--desc {
    margin-bottom: 3.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .hero__content--footer {
    justify-content: center;
  }
}
.hero__content--btn {
  margin-right: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .hero__content--btn {
    margin-right: 2rem;
  }
}
.hero__content--btn:last-child {
  margin-right: 0;
}
.hero__content--btn.hover__active {
  background: inherit;
  color: var(--secondary-color);
}
.hero__content--btn.hover__active:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}
.hero__section--two {
  background: url(../images/hero-bg-banner2.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .hero__section--two {
    height: 470px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__section--two {
    height: 570px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__section--two {
    height: 630px;
  }
}
@media only screen and (min-width: 1366px) {
  .hero__section--two {
    height: 648px;
  }
}
@media only screen and (min-width: 1600px) {
  .hero__section--two {
    height: 880px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__section--two {
    flex-direction: column;
  }
}
.hero__thumbnail--style2 {
  position: absolute;
  bottom: 0;
  right: 8%;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .hero__thumbnail--style2 {
    right: 4%;
    max-width: 610px;
  }
}
@media only screen and (min-width: 1366px) and (max-width: 1599px) {
  .hero__thumbnail--style2 {
    right: 4%;
    max-width: 500px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .hero__thumbnail--style2 {
    right: 2%;
    max-width: 480px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumbnail--style2 {
    right: 2%;
    max-width: 415px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumbnail--style2 {
    right: 2%;
    max-width: 330px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__thumbnail--style2 {
    position: inherit;
    max-width: 380px;
    margin: 0 auto;
    right: inherit;
    left: inherit;
  }
}
@media only screen and (max-width: 575px) {
  .hero__thumbnail--style2 {
    max-width: 350px;
  }
}
@media only screen and (max-width: 479px) {
  .hero__thumbnail--style2 {
    max-width: 300px;
  }
}
@media only screen and (max-width: 399px) {
  .hero__thumbnail--style2 {
    max-width: 270px;
  }
}
.hero__thumbnail--style2__img {
  position: absolute;
  bottom: 0;
  right: 1rem;
  left: 1rem;
  margin: 0 auto;
  padding: 0 2rem;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateLeftRight;
  animation-name: animateLeftRight;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media only screen and (min-width: 768px) {
  .hero__content.style2 {
    padding-top: 6rem;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__content.style2 {
    padding-top: 7rem;
  }
}
@media only screen and (min-width: 1600px) {
  .hero__content.style2 {
    padding-top: 5rem;
  }
}
/*
    4. About CSS
*/
@media only screen and (max-width: 767px) {
  .section__heading--subtitle {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 991px) {
  .section__heading--subtitle.mb-15 {
    margin-bottom: 1.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .section__heading--subtitle.mb-15 {
    margin-bottom: 1rem;
  }
}
.section__heading--subtitle.border__style {
  position: relative;
  display: inline-block;
}
.section__heading--subtitle.border__style::before {
  position: absolute;
  content: "";
  width: 2rem;
  height: 3px;
  background: var(--secondary-color);
  right: -25px;
  bottom: 8px;
}
@media only screen and (min-width: 768px) {
  .section__heading--subtitle.border__style::before {
    bottom: 5px;
  }
}
@media only screen and (max-width: 767px) {
  .section__heading--maintitle.mb-30 {
    margin-bottom: 1.5rem;
  }
}
.section__heading--desc {
  font-weight: 500;
  color: var(--text-gray-color);
  font-size: 1.5rem;
  line-height: 2.7rem;
  max-width: 100%;
  margin: 1.3rem auto 0;
}
@media only screen and (min-width: 576px) {
  .section__heading--desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
    max-width: 92%;
    margin: 1.5rem auto 0;
  }
}
@media only screen and (min-width: 768px) {
  .section__heading--desc {
    max-width: 70%;
  }
}
@media only screen and (min-width: 1200px) {
  .section__heading--desc {
    font-size: 1.8rem;
    line-height: 3rem;
    max-width: 49%;
    margin: 1.5rem auto 0;
  }
}
.about__section--inner {
  position: relative;
  z-index: 1;
}
.about__section--shape--bg {
  position: absolute;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  left: 0;
  bottom: 0;
}
@media only screen and (max-width: 767px) {
  .about__section--shape--bg {
    top: 40%;
    bottom: auto;
  }
}
@media only screen and (max-width: 767px) {
  .about__thumbnail {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .about__content.padding_left60 {
    padding-left: 6rem;
  }
}
@media only screen and (max-width: 767px) {
  .about__content {
  
  }
}
.about__content--desc {
  font-size: 1.5rem;
  line-height: 2.6rem;
}
@media only screen and (min-width: 576px) {
  .about__content--desc {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 768px) {
  .about__content--desc {
    font-size: 1.7rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .about__content--desc {
    font-size: 1.8rem;
    line-height: 3rem;
  }
}
.about__content--desc__list {
  font-size: 1.5rem;
  line-height: 2.4rem;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .about__content--desc__list {
    font-size: 1.6rem;
    line-height: 2.6rem;
  }
}
@media only screen and (min-width: 992px) {
  .about__content--desc__list {
    font-size: 1.7rem;
    margin-bottom: 1.2rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .about__content--desc__list {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 1366px) {
  .about__content--desc__list {
    font-size: 2rem;
    line-height: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .about__content--desc__list {
    padding-left: 0;
  }
}
.about__content--desc__list:last-child {
  margin-bottom: 0;
}
.about__content--desc__list::before {
  position: absolute;
  content: "";
  width: 0.7rem;
  height: 0.2rem;
  background: var(--secondary-color);
  left: 0;
  top: 50%;
  transform: translatery(-50%);
}
@media only screen and (max-width: 767px) {
  .about__content--desc__list::before {
    display: none;
  }
}
.about__calling {
  background-color: var(--white-color);
  box-shadow: 0 6px 11px rgba(112, 112, 112, 0.15);
  position: absolute;
  top: 50%;
  right: 0;
  padding: 1.2rem 2rem;
  transform: translatey(-50%);
  border-radius: 5px;
}
@media only screen and (min-width: 992px) {
  .about__calling {
    padding: 2rem 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .about__calling {
    right: -20px;
  }
}
.about__calling--icon {
  margin-right: 0.8rem;
}
@media only screen and (min-width: 992px) {
  .about__calling--icon {
    margin-right: 1.2rem;
  }
}
.about__calling--text {
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 992px) {
  .about__calling--text {
    font-size: 1.8rem;
    line-height: 3rem;
  }
}
.brand__section--wrapper {
  align-items: center;
}
.brand__logo--thumbnail {
  overflow: hidden;
  padding: 0 1rem;
}
.brand__logo--thumbnail.mb-50 {
  margin-bottom: 3rem;
}
@media only screen and (min-width: 576px) {
  .brand__logo--thumbnail.mb-50 {
    margin-bottom: 4rem;
  }
}
@media only screen and (min-width: 1200px) {
  .brand__logo--thumbnail.mb-50 {
    margin-bottom: 5rem;
  }
}
.brand__logo--thumbnail.mb-60 {
  margin-bottom: 5rem;
}
@media only screen and (min-width: 576px) {
  .brand__logo--thumbnail.mb-60 {
    margin-bottom: 6.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .brand__logo--thumbnail.mb-60 {
    margin-bottom: 8rem;
  }
}
.brand__logo--thumbnail:hover .brand__logo--thumbnail__img {
  opacity: 1;
  transform: scale(1.05);
}
.brand__logo--thumbnail__img {
  margin: 0 auto;
  opacity: 0.43;
}
.img__width--text__section {
  background: var(--bg-gray-color);
  padding-top: 6rem;
}
@media only screen and (min-width: 768px) {
  .img__width--text__section {
    padding-top: 7rem;
  }
}
@media only screen and (min-width: 992px) {
  .img__width--text__section {
    padding-top: 8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .img__width--text__section {
    padding-top: 9rem;
  }
}
@media only screen and (min-width: 1366px) {
  .img__width--text__section {
    padding-top: 10rem;
  }
}
.img__width--text__thumbnail {
  position: relative;
  z-index: 9;
}
.img__width--text__content {
  position: relative;
  z-index: 9;
}
@media only screen and (max-width: 767px) {
  .img__width--text__content {
    text-align: center;
    margin-bottom: 3rem;
  }
}
.img__width--text__content--desc {
  line-height: 2.8rem;
  margin-bottom: 1.8rem;
  color: var(--text-gray-color);
}
@media only screen and (min-width: 768px) {
  .img__width--text__content--desc {
    margin-bottom: 2.5rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .img__width--text__content--desc {
    font-size: 1.6rem;
    margin-bottom: 4rem;
  }
}
.img__width--text__content--maintitle {
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 992px) {
  .img__width--text__content--maintitle.mb-30 {
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .img__width--text__content--maintitle.mb-30 {
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .img__width--text__content--maintitle.mb-30 {
    margin-bottom: 3rem;
  }
}
.img__width--text__small--shape {
  position: absolute;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.img__width--text__small--shape.one {
  top: 4rem;
  left: 0;
}
@media only screen and (max-width: 991px) {
  .img__width--text__small--shape.one {
    max-width: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .img__width--text__small--shape.one {
    max-width: 20px;
  }
}
.img__width--text__small--shape.two {
  bottom: 0;
  right: 0;
}
@media only screen and (max-width: 991px) {
  .img__width--text__small--shape.two {
    max-width: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .img__width--text__small--shape.two {
    max-width: 20px;
  }
}
.img__width--text__small--shape.three {
  bottom: 3rem;
  left: 9rem;
  max-width: 120px;
}
@media only screen and (max-width: 991px) {
  .img__width--text__small--shape.three {
    max-width: 60px;
    left: 2rem;
  }
}
@media only screen and (max-width: 575px) {
  .img__width--text__small--shape.three {
    max-width: 30px;
  }
}
.img__width--text__small--shape.four {
  top: 5rem;
  right: 9rem;
  max-width: 120px;
}
@media only screen and (max-width: 991px) {
  .img__width--text__small--shape.four {
    max-width: 60px;
    right: 2rem;
  }
}
@media only screen and (max-width: 575px) {
  .img__width--text__small--shape.four {
    max-width: 30px;
  }
}
.bideo__play--position {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translatey(-50%);
}
.bideo__play--icon {
  width: 5.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--secondary-color);
  background: var(--white-color);
  border: 1px solid var(--secondary-color);
  position: relative;
  transition: 0.5s;
  -webkit-animation: animate 2s linear infinite;
  animation: animate 2s linear infinite;
  transform: scale(1);
}
.bideo__play--icon:hover {
  background: var(--secondary-color);
  color: var(--white-color);
  transform: scale(1.2);
}
@media only screen and (min-width: 992px) {
  .bideo__play--icon {
    width: 5.8rem;
    height: 5.8rem;
  }
}
@media only screen and (max-width: 767px) {
  .bideo__play--icon svg {
    width: 2.2rem;
  }
}
@-webkit-keyframes animate {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 151, 70, 0.7);
  }
  40% {
    box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
  }
  80% {
    box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 193, 7, 0);
  }
}
@keyframes animate {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 151, 70, 0.7);
  }
  40% {
    box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
  }
  80% {
    box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 193, 7, 0);
  }
}
.img__width--text__shape--bg {
  position: absolute;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  top: 30%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
/*
    15. Featured CSS
*/
.featured__section--bg {
  background: url(../images/bg-shape1-full.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
.featured__section--inner {
  position: relative;
  z-index: 1;
}
.featured__section--shape--bg {
  position: absolute;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  left: 0;
  bottom: 0;
}
.featured__card {
  border: 1px solid var(--secondary-color);
  background: var(--white-color);
  text-align: center;
  border-radius: 5px;
  padding: 2rem 1.5rem;
  transition: var(--transition);
  position: relative;
}
@media only screen and (min-width: 768px) {
  .featured__card {
    padding: 2.5rem 1.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .featured__card.mt-40 {
    margin-top: 4rem;
  }
}
.featured__card:hover {
  transform: translatey(-20px);
}
.featured__card:hover .featured__card--icon {
  color: var(--white-color);
}
.featured__card:hover .featured__card--content__title {
  color: var(--white-color);
}
.featured__card:hover .featured__card--content__desc {
  color: var(--white-color);
}
.featured__card:hover .featured__card--content__btn {
  color: var(--white-color);
}
.featured__card:hover::before {
  opacity: 1;
  left: 0;
  right: 0;
  width: 100%;
}
.featured__card::before {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  background: var(--secondary-color);
  top: 0;
  left: 50%;
  right: 50%;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 5px;
  transition: var(--transition);
}
.featured__card--icon {
  margin-bottom: 1rem;
  transition: var(--transition);
}
@media only screen and (min-width: 768px) {
  .featured__card--icon {
    margin-bottom: 1.5rem;
  }
}
.featured__card--content__title {
  margin-bottom: 1.2rem;
  transition: var(--transition);
}
@media only screen and (min-width: 768px) {
  .featured__card--content__title {
    margin-bottom: 1.5rem;
  }
}
.featured__card--content__desc {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  transition: var(--transition);
}
@media only screen and (min-width: 768px) {
  .featured__card--content__desc {
    margin-bottom: 1.2rem;
  }
}
.featured__card--content__btn {
  text-align: right;
  display: block;
}
.featured__section--bg2 {
  background: var(--bg-gray-color);
}
.featured__card.style2 {
  border: 0;
}
@media only screen and (min-width: 768px) {
  .featured__card.style2 {
    padding: 2.5rem 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .featured__card.style2 {
    padding: 3rem 2.5rem;
  }
}
.featured__card.style2::before {
  background: linear-gradient(109.6deg, #f32b2b 11.2%, #ff00ee 91.2%);
}
/*
   22. Team css
*/
.team__section--shape--bg {
  position: absolute;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  left: 0;
  bottom: 0;
}
.team__section--shape--bg.two {
  left: 0;
  right: 0;
  margin: 0 auto;
}
.team__section--wrapper {
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .team__section--heading {
    text-align: center;
  }
}
.team__section--heading__desc {
  font-size: 1.5rem;
  line-height: 2.6rem;
}
@media only screen and (min-width: 576px) {
  .team__section--heading__desc {
    font-size: 1.6rem;
    line-height: 2.7rem;
  }
}
@media only screen and (min-width: 992px) {
  .team__section--heading__desc {
    font-size: 1.7rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .team__section--heading__desc {
    font-size: 1.8rem;
    line-height: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .team__section--right {
    margin-bottom: 3rem;
  }
}
.social__shear--list {
  margin-right: 0.8rem;
}
.social__shear--list:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 575px) {
  .social__shear--list {
    margin-right: 1rem;
  }
}
.social__shear--list__icon {
  width: 3rem;
  height: 3rem;
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.social__shear--list__icon.facebook {
  background: #4867aa;
}
.social__shear--list__icon.twitter {
  background: #00b6f1;
}
.social__shear--list__icon.instagram {
  background: #9e3baf;
}
.social__shear--list__icon.linkedin {
  background: #0077b5;
}
.social__shear--list__icon:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}
@media only screen and (min-width: 1200px) {
  .team__card.left__sidebar {
    margin-right: 3rem;
  }
}
.team__card:hover .team__card--thumbnail::before {
  opacity: 0.6;
}
.team__card:hover .team__card--thumbnail img {
  transform: scale(1.06) rotate(2deg);
}
.team__card:hover .team__card--content {
  bottom: 5rem;
}
.team__card--thumbnail {
  position: relative;
  overflow: hidden;
}
.team__card--thumbnail::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--secondary-color);
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 9;
  pointer-events: none;
  transition: var(--transition);
}
.team__card--thumbnail__img {
  width: 100%;
}
@media only screen and (max-width: 575px) {
  .team__card--thumbnail__img {
    width: 100%;
  }
}
.team__card--content {
  padding: 1rem;
  position: absolute;
  z-index: 9;
  bottom: 2rem;
  left: 10%;
  right: 10%;
  background: var(--white-color);
  border: 1px solid var(--secondary-color);
  border-radius: 5px;
  transition: var(--transition);
}
@media only screen and (min-width: 768px) {
  .team__card--content {
    padding: 1rem;
  }
}
.team__card--content__title {
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 576px) {
  .team__card--content__title {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}
@media only screen and (min-width: 992px) {
  .team__card--content__title {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .team__card--content__title {
    font-size: 2rem;
  }
}
.team__card--content__subtitle {
  color: var(--primary-color);
}
/*
    team details css here
*/
.team__details--content__title {
  font-size: 2rem;
  line-height: 2.8rem;
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 576px) {
  .team__details--content__title {
    font-size: 2.2rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .team__details--content__title {
    font-size: 2.4rem;
  }
}
@media only screen and (min-width: 1200px) {
  .team__details--content__title {
    font-size: 2.5rem;
    line-height: 3.2rem;
    margin-bottom: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .team__details--content__desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}
@media only screen and (max-width: 479px) {
  .team__details--years__list {
    flex-direction: column;
    margin-bottom: 1.5rem;
  }
  .team__details--years__list:last-child {
    margin-bottom: 0;
  }
}
.team__details--years__date {
  position: relative;
  font-size: 1.6rem;
  min-width: 11.5rem;
  margin-right: 2.5rem;
  padding-bottom: 5rem;
  margin-bottom: 2.2rem;
}
@media only screen and (min-width: 992px) {
  .team__details--years__date {
    min-width: 12rem;
    margin-right: 2.8rem;
    padding-bottom: 6rem;
  }
}
@media only screen and (min-width: 1200px) {
  .team__details--years__date {
    font-size: 1.7rem;
    min-width: 13rem;
    margin-right: 3.2rem;
  }
}
@media only screen and (max-width: 479px) {
  .team__details--years__date {
    min-width: 100%;
    margin-right: 0;
    margin-bottom: 1.2rem;
    padding-bottom: 0;
  }
  .team__details--years__date::before {
    display: none;
  }
  .team__details--years__date::after {
    display: none;
  }
}
.team__details--years__date.three {
  margin-bottom: 0;
  padding-bottom: 0;
}
.team__details--years__date.three::after {
  display: none;
}
.team__details--years__date.active::before {
  background: var(--secondary-color);
}
.team__details--years__date::before {
  position: absolute;
  content: "";
  width: 1.7rem;
  height: 1.7rem;
  background: #707070;
  right: 0;
  top: 2px;
  border-radius: 50%;
}
.team__details--years__date::after {
  position: absolute;
  content: "";
  height: 95%;
  border: 2px dashed #707070;
  right: 0;
  right: 6px;
  top: 23px;
}
.team__details--years__desc {
  color: var(--text-gray-color);
}
@media only screen and (min-width: 1200px) {
  .team__details--years__desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}
.team__details--contact__title {
  font-size: 2.2rem;
  line-height: 2.8rem;
  margin-bottom: 1.8rem;
}
@media only screen and (min-width: 992px) {
  .team__details--contact__title {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .team__details--contact__title {
    font-size: 2.8rem;
    line-height: 3.2rem;
    margin-bottom: 2.5rem;
  }
}
.team__details--author {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}
@media only screen and (max-width: 767px) {
  .team__details--author {
    margin-bottom: 5.5rem;
  }
}
.team__details--author__content {
  box-shadow: 0 9px 9px rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  position: relative;
  padding: 7.5rem 2rem 2.5rem;
  background: var(--white-color);
}
@media only screen and (min-width: 992px) {
  .team__details--author__content {
    padding: 8rem 3rem 2.8rem;
  }
}
.team__details--author__name {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
  display: inline-block;
  border-radius: 5px;
  text-align: center;
  background: var(--white-color);
  position: absolute;
  padding: 1.5rem 2rem;
  top: -40px;
  left: 10%;
  right: 10%;
}
@media only screen and (min-width: 992px) {
  .team__details--author__name {
    padding: 2rem 5rem;
    top: -44px;
    left: 15%;
    right: 15%;
  }
}
.team__details--author__name--title {
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 0.6rem;
}
@media only screen and (min-width: 1200px) {
  .team__details--author__name--title {
    font-size: 2.3rem;
    line-height: 2.8rem;
  }
}
.team__details--author__name--subtitle {
  color: var(--text-gray-color);
}
.team__details--author__info--list {
  margin-bottom: 1rem;
  position: relative;
  padding-left: 3.8rem;
}
.team__details--author__info--list:last-child {
  margin-bottom: 0;
}
.team__details--author__info--icon {
  position: absolute;
  left: 0;
  top: 3px;
  width: 2rem;
  height: 2rem;
  background: var(--bg-gray-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.team__details--author__info--title {
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: inline-block;
}
@media only screen and (min-width: 1200px) {
  .team__details--author__info--title {
    margin-bottom: 0.7rem;
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
.team__details--author__info--text {
  font-size: 1.5rem;
  color: var(--text-gray-color);
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) {
  .team__details--author__info--text {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}
/*
    7. Services CSS
*/
.services__section .section__heading {
  position: relative;
  z-index: 1;
}
.services__section--shape--bg {
  position: absolute;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
}
.services__section--wrapper {
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .services__left--sidebar {
    margin-bottom: 3rem;
  }
}
.services__card--content {
  background: var(--white-color);
  border: 1px solid var(--secondary-color);
  text-align: center;
  padding: 1rem 0.8rem 2.2rem;
  border-radius: 5px;
  max-width: 94%;
  margin: -25px auto 0;
  position: relative;
  z-index: 9;
}
@media only screen and (min-width: 576px) {
  .services__card--content {
    padding: 1.1rem 1rem 2.5rem;
    max-width: 92%;
    margin: -32px auto 0;
  }
}
@media only screen and (min-width: 992px) {
  .services__card--content {
    padding: 1.3rem 1.6rem 2.8rem;
    max-width: 88%;
  }
}
@media only screen and (min-width: 1600px) {
  .services__card--content {
    padding: 1.3rem 2rem 2.8rem;
    max-width: 80%;
  }
}
.services__card--content__title {
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 576px) {
  .services__card--content__title {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}
@media only screen and (min-width: 992px) {
  .services__card--content__title {
    font-size: 1.8rem;
  }
}
.services__card--content__readmore {
  float: right;
  color: var(--primary-color);
  background: var(--white-color);
  border: 1px solid var(--secondary-color);
  font-size: 1.3rem;
  line-height: 1.8rem;
  padding: 0.4rem 0.8rem;
  border-radius: 5px;
  margin-top: 1.2rem;
}
.services__card--content__readmore:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}
@media only screen and (min-width: 576px) {
  .services__card--content__readmore {
    font-size: 1.4rem;
  }
}
.services__card:hover .services__card--thumbnail::before {
  opacity: 0.6;
}
.services__card:hover .services__card--thumbnail__img {
  transform: scale(1.06) rotate(2deg);
}
.services__card--thumbnail {
  position: relative;
  overflow: hidden;
}
.services__card--thumbnail.style2::before {
  background: var(--black-color);
  opacity: 0.58;
}
.services__card--thumbnail::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--secondary-color);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  z-index: 9;
}
.services__card--thumbnail__link {
  display: block;
}
.services__card--thumbnail__img {
  width: 100%;
}
.services__card--content2 {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  padding: 0 2rem;
  z-index: 9;
}
@media only screen and (min-width: 992px) {
  .services__card--content2 {
    bottom: 3rem;
    padding: 0 3rem;
  }
}
@media only screen and (max-width: 575px) {
  .services__card--content2 {
    text-align: center;
  }
}
.services__card--content2__title {
  font-size: 2rem;
  line-height: 2.2rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .services__card--content2__title {
    font-size: 2.2rem;
    line-height: 2.5rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .services__card--content2__title {
    font-size: 2.5rem;
    line-height: 2.8rem;
  }
}
.services__card--content2__desc {
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .services__card--content2__desc {
    margin-bottom: 2rem;
  }
}
.services__card--content2__readmore {
  float: right;
  color: var(--white-color);
}
.services__card--content2__readmore:hover {
  color: var(--secondary-color);
}
@media only screen and (max-width: 575px) {
  .services__card--content2__readmore {
    float: inherit;
  }
}
@media only screen and (min-width: 1200px) {
  .services__col--7 {
    width: 55%;
  }
}
@media only screen and (min-width: 1200px) {
  .services__col--5 {
    width: 45%;
  }
}
.services__small--shape {
  position: absolute;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.services__small--shape.one {
  top: 4rem;
  left: 3rem;
}
@media only screen and (max-width: 991px) {
  .services__small--shape.one {
    max-width: 80px;
  }
}
@media only screen and (max-width: 575px) {
  .services__small--shape.one {
    max-width: 40px;
  }
}
.services__small--shape.two {
  bottom: 4rem;
  right: 3rem;
}
@media only screen and (max-width: 991px) {
  .services__small--shape.two {
    max-width: 80px;
  }
}
@media only screen and (max-width: 575px) {
  .services__small--shape.two {
    max-width: 40px;
  }
}
.services__small--shape.three {
  bottom: 0;
  left: 0;
}
@media only screen and (max-width: 991px) {
  .services__small--shape.three {
    max-width: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .services__small--shape.three {
    max-width: 20px;
  }
}
.services__small--shape.four {
  top: 4rem;
  right: 0;
}
@media only screen and (max-width: 991px) {
  .services__small--shape.four {
    max-width: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .services__small--shape.four {
    max-width: 20px;
  }
}
/*
   23. Testimonial Css
*/
.testimonial__section--bg {
  background: url(../images/bg-shape2-full.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
.testimonial__section--shape--bg {
  position: absolute;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  left: 0;
  right: 0;
  bottom: 10%;
  margin: 0 auto;
}
.testimonial__section .section__heading {
  position: relative;
  z-index: 1;
}
.testimonial__inner {
  padding: 0.8rem;
}
.testimonial__card {
  padding: 2rem 1.5rem;
  border: 1px solid var(--secondary-color);
  background: var(--white-color);
  border-radius: 0.5rem;
  position: relative;
  transition: var(--transition);
}
@media only screen and (min-width: 768px) {
  .testimonial__card {
    padding: 3rem 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial__card {
    padding: 3.5rem 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial__card {
    padding: 5rem 4.5rem;
  }
}
.testimonial__card:hover {
  transform: translatey(-15px);
}
.testimonial__card:hover::before {
  opacity: 1;
  left: 0;
  right: 0;
  width: 100%;
}
.testimonial__card:hover .testimonial__content--title {
  color: var(--white-color);
}
.testimonial__card:hover .testimonial__content--subtitle {
  color: var(--white-color);
}
.testimonial__card:hover .testimonial__content--desc {
  color: var(--white-color);
}
.testimonial__card:hover .rating__list--icon {
  color: var(--white-color);
}
.testimonial__card::before {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  background: var(--secondary-color);
  top: 0;
  left: 50%;
  right: 50%;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}
.testimonial__card--thumbnail {
  width: 7rem;
}
@media only screen and (min-width: 768px) {
  .testimonial__card--thumbnail {
    width: 7.3rem;
  }
}
.testimonial__card--thumbnail__img {
  border: 1px solid var(--secondary-color);
  border-radius: 50%;
}
.testimonial__card--topbar {
  margin-bottom: 2rem;
  position: relative;
}
@media only screen and (min-width: 1200px) {
  .testimonial__card--topbar {
    margin-bottom: 2.3rem;
  }
}
.testimonial__swiper--activation {
  padding: 1.5rem 0 4rem;
}
@media only screen and (min-width: 576px) {
  .testimonial__swiper--activation {
    padding: 1.5rem 0 5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial__swiper--activation {
    padding: 1.5rem 0 7rem;
  }
}
.testimonial__author {
  width: calc(100% - 7rem);
  padding-left: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .testimonial__author {
    width: calc(100% - 7.3rem);
    padding-left: 2rem;
  }
}
.rating__list {
  margin-right: 0.6rem;
}
.rating__list:last-child {
  margin-right: 0;
}
.rating__list--icon {
  color: var(--yellow-color);
}
.testimonial__content {
  position: relative;
}
.testimonial__content--title {
  margin-bottom: 0.6rem;
  transition: var(--transition);
}
@media only screen and (min-width: 768px) {
  .testimonial__content--title {
    margin-bottom: 1rem;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial__content--title {
    margin-bottom: 1.3rem;
  }
}
.testimonial__content--subtitle {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 400;
  font-family: var(--roboto-fonts);
  margin-bottom: 0.8rem;
  transition: var(--transition);
}
@media only screen and (min-width: 768px) {
  .testimonial__content--subtitle {
    margin-bottom: 1rem;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial__content--subtitle {
    margin-bottom: 1.2rem;
  }
}
.testimonial__content--desc {
  transition: var(--transition);
}
@media only screen and (max-width: 767px) {
  .testimonial__wrapper {
    margin-bottom: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__maintitle--style2 {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__content--style2 {
    text-align: center;
  }
}
.testimonial__content--style2__desc {
  font-size: 1.5rem;
  line-height: 2.8rem;
  margin-bottom: 1.2rem;
  font-weight: 500;
}
@media only screen and (min-width: 480px) {
  .testimonial__content--style2__desc {
    font-size: 1.6rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 576px) {
  .testimonial__content--style2__desc {
    font-size: 1.7rem;
    line-height: 3.2rem;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial__content--style2__desc {
    font-size: 1.8rem;
    line-height: 3.5rem;
    margin-bottom: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial__content--style2__desc {
    font-size: 2.2rem;
    line-height: 4rem;
    margin-bottom: 2.2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .testimonial__content--style2__desc {
    font-size: 2.4rem;
    margin-bottom: 3rem;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 1600px) {
  .testimonial__content--style2__desc {
    font-size: 2.8rem;
    line-height: 4.5rem;
  }
}
.testimonial__pagination2 {
  position: inherit;
  text-align: left;
  margin-top: 15px;
}
@media only screen and (max-width: 767px) {
  .testimonial__pagination2 {
    text-align: center;
  }
}
.testimonial__incarnation--thumbnail {
  position: relative;
  max-width: 280px;
  min-height: 280px;
  margin: 0 auto;
  z-index: 9;
}
@media only screen and (min-width: 400px) {
  .testimonial__incarnation--thumbnail {
    max-width: 310px;
    min-height: 310px;
  }
}
@media only screen and (min-width: 576px) {
  .testimonial__incarnation--thumbnail {
    max-width: 330px;
    min-height: 330px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial__incarnation--thumbnail {
    max-width: 340px;
    min-height: 340px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial__incarnation--thumbnail {
    max-width: 400px;
    min-height: 400px;
  }
}
@media only screen and (min-width: 1366px) {
  .testimonial__incarnation--thumbnail {
    max-width: 430px;
    min-height: 430px;
  }
}
.testimonial__incarnation--thumbnail::before {
  position: absolute;
  content: "";
  border: 1px solid var(--secondary-color);
  border-radius: 50%;
  left: 25px;
  top: 25px;
  right: 25px;
  bottom: 25px;
  opacity: 0.3;
  z-index: -1;
}
.testimonial__incarnation--thumbnail::after {
  position: absolute;
  content: "";
  border: 1px solid var(--secondary-color);
  border-radius: 50%;
  left: 28%;
  top: 28%;
  right: 28%;
  bottom: 28%;
  opacity: 0.3;
  z-index: -1;
}
.testimonial__incarnation--thumbnail__list {
  position: absolute;
}
.testimonial__incarnation--thumbnail__list:nth-child(1) {
  left: 50%;
  top: 50%;
  transform: translatey(-50%) translatex(-50%);
}
.testimonial__incarnation--thumbnail__list:nth-child(2) {
  top: 0;
  left: 50%;
  transform: translatex(-50%);
}
.testimonial__incarnation--thumbnail__list:nth-child(3) {
  top: 12%;
  left: 11%;
}
.testimonial__incarnation--thumbnail__list:nth-child(4) {
  top: 50%;
  left: 0;
  transform: translatey(-50%);
}
.testimonial__incarnation--thumbnail__list:nth-child(5) {
  bottom: 12%;
  left: 10%;
}
.testimonial__incarnation--thumbnail__list:nth-child(6) {
  bottom: 0;
  left: 50%;
  transform: translatex(-50%);
}
.testimonial__incarnation--thumbnail__list:nth-child(7) {
  bottom: 12%;
  right: 10%;
}
.testimonial__incarnation--thumbnail__list:nth-child(8) {
  top: 50%;
  right: 0;
  transform: translatey(-50%);
}
.testimonial__incarnation--thumbnail__list:nth-child(9) {
  top: 12%;
  right: 11%;
}
.testimonial__section--shape--bg.style2 {
  bottom: 22%;
}
/*
   20. pricing Css
*/
.pricing__card {
  border: 1px solid var(--secondary-color);
  background: var(--white-color);
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-radius: 5px;
  position: relative;
  transition: var(--transition);
}
@media only screen and (min-width: 768px) {
  .pricing__card {
    padding: 3rem 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .pricing__card {
    padding: 4rem 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .pricing__card {
    padding: 5rem 3rem;
  }
}
.pricing__card:hover {
  transform: translatey(-15px);
}
.pricing__card:hover::before {
  opacity: 1;
  left: 0;
  right: 0;
  width: 100%;
}
.pricing__card:hover .pricing__card--topbar::before {
  background: var(--white-color);
}
.pricing__card:hover .pricing__card--title {
  color: var(--white-color);
}
.pricing__card:hover .pricing__card--desc {
  color: var(--white-color);
}
.pricing__card:hover .pricing__card--menu__text {
  color: var(--white-color);
}
.pricing__card:hover .pricing__card--price {
  color: var(--white-color);
}
.pricing__card:hover .pricing__card--btn {
  background: var(--white-color);
  color: var(--secondary-color);
}
.pricing__card::before {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  background: var(--secondary-color);
  top: 0;
  left: 50%;
  right: 50%;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  z-index: -1;
}
.pricing__card--topbar {
  position: relative;
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .pricing__card--topbar {
    padding-bottom: 1.8rem;
    margin-bottom: 1.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .pricing__card--topbar {
    padding-bottom: 2rem;
    margin-bottom: 2.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .pricing__card--topbar {
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .pricing__card--topbar {
    padding-bottom: 2.5rem;
    margin-bottom: 3rem;
  }
}
.pricing__card--topbar::before {
  position: absolute;
  content: "";
  width: 90%;
  background: #707070;
  height: 1px;
  bottom: 0;
  left: 50%;
  opacity: 0.4;
  transform: translatex(-50%);
  transition: var(--transition);
}
@media only screen and (min-width: 1200px) {
  .pricing__card--topbar::before {
    width: 70%;
  }
}
.pricing__card--title {
  font-size: 2rem;
  line-height: 2.2rem;
  margin-bottom: 1.2rem;
  transition: var(--transition);
}
@media only screen and (min-width: 768px) {
  .pricing__card--title {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .pricing__card--title {
    font-size: 2.5rem;
    line-height: 2.8rem;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .pricing__card--title {
    font-size: 2.8rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .pricing__card--title {
    font-size: 3rem;
    line-height: 3.2rem;
    margin-bottom: 1.8rem;
  }
}
.pricing__card--desc {
  transition: var(--transition);
}
@media only screen and (min-width: 1200px) {
  .pricing__card--desc {
    padding: 0 3rem;
  }
}
.pricing__card--menu {
  margin-bottom: 1.8rem;
}
@media only screen and (min-width: 768px) {
  .pricing__card--menu {
    margin-bottom: 2.2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .pricing__card--menu {
    margin-bottom: 3rem;
  }
}
.pricing__card--menu__text {
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 500;
  margin-bottom: 1rem;
  transition: var(--transition);
}
.pricing__card--menu__text:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) {
  .pricing__card--menu__text {
    font-size: 1.6rem;
    line-height: 3rem;
    margin-bottom: 1.2rem;
  }
}
.pricing__card--price {
  display: block;
  font-weight: 500;
  font-family: var(--rubik-fonts);
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .pricing__card--price {
    font-size: 2.2rem;
    line-height: 2.2rem;
    margin-bottom: 2.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .pricing__card--price {
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .pricing__card--price {
    font-size: 2.8rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1366px) {
  .pricing__card--price {
    margin-bottom: 3.5rem;
    font-size: 3rem;
    line-height: 3rem;
  }
}
.pricing__card--shape1 {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.pricing__card--shape2 {
  position: absolute;
  top: 4rem;
  right: 1rem;
  z-index: 1;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/*
    6. Project CSS
*/
.project__section--inner {
  padding: 32px 76px 72px 50px;
}
@media only screen and (min-width: 400px) {
  .project__section--inner {
    padding: 32px 42px 65px 0;
  }
}
@media only screen and (min-width: 576px) {
  .project__section--inner {
    padding: 32px 42px 70px 0;
  }
}
@media only screen and (min-width: 992px) {
  .project__section--inner {
    padding: 38px 54px 80px 0;
  }
}
@media only screen and (min-width: 1200px) {
  .project__section--inner {
    padding: 34px 70px 80px 0;
  }
}
@media only screen and (min-width: 1366px) {
  .project__section--inner {
    padding: 55px 95px 110px 0;
  }
}
.project__section--inner .swiper-slide {
  transform: scale(1);
}
.project__section--inner .swiper-slide.swiper-slide-active {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  margin: 0 35px 0 16px !important;
}
@media only screen and (min-width: 480px) {
  .project__section--inner .swiper-slide.swiper-slide-active {
    margin: 0 40px 0 20px !important;
  }
}
@media only screen and (min-width: 576px) {
  .project__section--inner .swiper-slide.swiper-slide-active {
    margin: 0 46px 0 20px !important;
  }
}
@media only screen and (min-width: 992px) {
  .project__section--inner .swiper-slide.swiper-slide-active {
    margin: 0 54px 0 24px !important;
  }
}
@media only screen and (min-width: 1366px) {
  .project__section--inner .swiper-slide.swiper-slide-active {
    margin: 0 60px 0 28px !important;
  }
}
@media only screen and (min-width: 1600px) {
  .project__section--inner .swiper-slide.swiper-slide-active {
    margin: 0 65px 0 35px !important;
  }
}
@media only screen and (min-width: 1700px) {
  .project__section--inner .swiper-slide.swiper-slide-active {
    margin: 0 72px 0 40px !important;
  }
}
.project__section--inner .swiper-slide.swiper-slide-active .project__card::after {
  opacity: 0.7;
  left: 0;
  right: 0;
  width: 100%;
}
.project__card {
  position: relative;
}
.project__card:hover::after {
  opacity: 0.7;
  left: 0;
  right: 0;
  width: 100%;
}
.project__card:hover .project__card--thumbnail__img {
  transform: scale(1.06) rotate(2deg);
}
.project__card:hover .project__card--content {
  transform: translatey(-15px);
}
.project__card::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  left: 0;
  top: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.35;
  border-radius: 5px;
}
.project__card::after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  background: linear-gradient(109.6deg, #f32b2b 11.2%, #ff00ee 91.2%);
  left: 50%;
  right: 50%;
  top: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.35;
  transition: var(--transition);
  border-radius: 5px;
}
.project__card--thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}
.project__card--thumbnail__img {
  border-radius: 5px;
}
.project__card--content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  padding: 0 1.2rem;
  z-index: 99;
  transition: var(--transition);
}
@media only screen and (min-width: 992px) {
  .project__card--content {
    bottom: 2rem;
    padding: 0 2rem;
  }
}
@media only screen and (min-width: 1600px) {
  .project__card--content {
    bottom: 3rem;
    padding: 0 4rem;
  }
}
.project__card--content__subtitle {
  margin-bottom: 0.4rem;
}
@media only screen and (min-width: 1366px) {
  .project__card--content__subtitle {
    margin-bottom: 0.6rem;
  }
}
@media only screen and (max-width: 575px) {
  .project__card--content__subtitle {
    font-size: 1.3rem;
    line-height: 2rem;
  }
}
@media only screen and (max-width: 399px) {
  .project__card--content__subtitle {
    font-size: 1.2rem;
  }
}
.project__card--content__maintitle {
  margin-bottom: 0.6rem;
  font-size: 1.6rem;
}
@media only screen and (min-width: 992px) {
  .project__card--content__maintitle {
    margin-bottom: 0.8rem;
    line-height: 2.2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .project__card--content__maintitle {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
}
@media only screen and (max-width: 575px) {
  .project__card--content__maintitle {
    margin-bottom: 0.5rem;
    line-height: 2.2rem;
  }
}
@media only screen and (max-width: 399px) {
  .project__card--content__maintitle {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
    line-height: 2rem;
  }
}
.project__card--content__desc {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .project__card--content__desc {
    font-size: 1.4rem;
    line-height: 2.3rem;
  }
}
@media only screen and (min-width: 992px) {
  .project__card--content__desc {
    font-size: 1.4rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .project__card--content__desc {
    width: 90%;
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .project__card--content__desc {
    font-size: 1.3rem;
    line-height: 2.2rem;
  }
}
@media only screen and (max-width: 399px) {
  .project__card--content__desc {
    font-size: 1.2rem;
    line-height: 2rem;
  }
}
.project__card--content__readmore {
  float: right;
  margin-top: 1.2rem;
}
@media only screen and (max-width: 575px) {
  .project__card--content__readmore {
    margin-top: 1rem;
    font-size: 1.3rem;
    line-height: 2rem;
  }
}
@media only screen and (max-width: 399px) {
  .project__card--content__readmore {
    font-size: 1.2rem;
  }
}
.project__card.style2::before {
  display: none;
}
.project__card.style2::after {
  background: var(--secondary-color);
}
.project__card.style2:hover .project__card--content.style2 {
  top: 50%;
  transform: translatey(-50%);
  opacity: 1;
  visibility: visible;
}
.project__card.style2:hover::after {
  opacity: 0.8;
}
.project__card.style2:hover .project__card--arrow__btn {
  transform: scale(1);
}
.project__card--content.style2 {
  top: 58%;
  bottom: auto;
  transform: translatey(-50%);
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (max-width: 479px) {
  .project__card--content.style2 {
    padding: 0 0.5rem;
  }
}
.project__card--content__maintitle.style2 {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}
@media only screen and (min-width: 480px) {
  .project__card--content__maintitle.style2 {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 576px) {
  .project__card--content__maintitle.style2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
}
@media only screen and (min-width: 992px) {
  .project__card--content__maintitle.style2 {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 1.2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .project__card--content__maintitle.style2 {
    font-size: 2.3rem;
    line-height: 2.5rem;
    margin-bottom: 1.5rem;
  }
}
.project__card--content--subtitle {
  font-size: 1.3rem;
  line-height: 2rem;
  font-weight: 400;
  font-family: var(--roboto-fonts);
  color: var(--white-color);
}
@media only screen and (min-width: 576px) {
  .project__card--content--subtitle {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 479px) {
  .project__card--content--subtitle {
    display: none;
  }
}
.project__card--arrow__btn {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--white-color);
  color: var(--secondary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 99;
  transform: scale(0);
}
.project__card--arrow__btn:hover {
  background: var(--primary-color);
  color: var(--white-color);
}
@media only screen and (min-width: 480px) {
  .project__card--arrow__btn {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 2.8rem;
    height: 2.8rem;
  }
}
@media only screen and (min-width: 576px) {
  .project__card--arrow__btn {
    bottom: 1.8rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .project__card--arrow__btn {
    bottom: 3rem;
    right: 3rem;
  }
}
/*
  6. project css here

*/
.project__details--card {
  margin-bottom: 4.7rem;
}
@media only screen and (min-width: 768px) {
  .project__details--card {
    margin-bottom: 4.2rem;
  }
}
.project__details--card__thumbnail {
  margin-bottom: 2.2rem;
}
@media only screen and (min-width: 768px) {
  .project__details--card__thumbnail {
    margin-bottom: 2.7rem;
  }
}
@media only screen and (max-width: 575px) {
  .project__details--card__content {
    text-align: center;
  }
}
.project__details--card__content--step {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .project__details--card__content--step {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .project__details--card__content--step {
    margin-bottom: 4rem;
  }
}
.project__details--card__content--step:last-child {
  margin-bottom: 0;
}
.project__details--card__content--title {
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 1.3rem;
}
@media only screen and (min-width: 576px) {
  .project__details--card__content--title {
    font-size: 2.2rem;
    line-height: 3rem;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .project__details--card__content--title {
    margin-bottom: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .project__details--card__content--title {
    font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .project__details--card__content--title {
    font-size: 2.8rem;
    line-height: 3.5rem;
  }
}
.project__details--card__content--desc {
  color: var(--text-gray-color);
  line-height: 2.6rem;
}
@media only screen and (min-width: 576px) {
  .project__details--card__content--desc {
    line-height: 2.7rem;
  }
}
@media only screen and (min-width: 1200px) {
  .project__details--card__content--desc {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }
}
.related__project--title {
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 2.3rem;
}
@media only screen and (max-width: 575px) {
  .related__project--title {
    text-align: center;
  }
}
@media only screen and (min-width: 576px) {
  .related__project--title {
    font-size: 2.2rem;
    line-height: 3rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .related__project--title {
    font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .related__project--title {
    font-size: 2.8rem;
    line-height: 3.5rem;
  }
}
/*
   13. Counterup css
*/
.counterup__section--bg {
  background: var(--bg-gray-color);
}
.counterup__section--inner {
  position: relative;
  z-index: 9;
}
.counterup__section .section__heading {
  position: relative;
  z-index: 9;
}
.counterup__box {
  background: var(--white-color);
  border-radius: 5px;
  text-align: center;
  padding: 2rem 1rem;
  height: 100%;
  position: relative;
  transition: var(--transition);
}
@media only screen and (min-width: 992px) {
  .counterup__box {
    padding: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .counterup__box {
    padding: 4rem 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .counterup__box {
    padding: 5rem 3rem;
  }
}
.counterup__box:hover {
  transform: translatey(-15px);
}
.counterup__box:hover::before {
  opacity: 1;
  left: 0;
  right: 0;
  width: 100%;
}
.counterup__box:hover .counterup__box--icon {
  color: var(--white-color);
}
.counterup__box:hover .counterup__box--count__number {
  color: var(--white-color);
}
.counterup__box:hover .counterup__box--count__number span {
  color: var(--white-color);
}
.counterup__box:hover .counterup__box--subtitle {
  color: var(--white-color);
}
.counterup__box::before {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  background: linear-gradient(109.6deg, #f32b2b 11.2%, #ff00ee 91.2%);
  left: 50%;
  right: 50%;
  top: 0;
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
  border-radius: 5px;
  z-index: -1;
}
.counterup__box--icon {
  color: var(--secondary-color);
  transition: var(--transition);
  margin-bottom: 0.4rem;
}
@media only screen and (min-width: 576px) {
  .counterup__box--icon {
    margin-bottom: 0.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .counterup__box--icon {
    margin-bottom: 1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .counterup__box--icon {
    margin-bottom: 1.2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .counterup__box--icon {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (max-width: 991px) {
  .counterup__box--icon svg {
    width: 3.7rem;
  }
}
@media only screen and (max-width: 479px) {
  .counterup__box--icon svg {
    width: 3.2rem;
  }
}
.counterup__box--icon.style2 {
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 576px) {
  .counterup__box--icon.style2 {
    margin-bottom: 1.7rem;
  }
}
@media only screen and (min-width: 1200px) {
  .counterup__box--icon.style2 {
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .counterup__box--icon.style2 {
    margin-bottom: 2.5rem;
  }
}
.counterup__box--icon__img {
  margin: 0 auto;
}
@media only screen and (max-width: 991px) {
  .counterup__box--icon__img {
    max-width: 4.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .counterup__box--icon__img {
    max-width: 4rem;
  }
}
.counterup__box--count__number {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 2.2rem;
  margin-bottom: 1rem;
  transition: var(--transition);
}
@media only screen and (min-width: 576px) {
  .counterup__box--count__number {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .counterup__box--count__number {
    font-size: 3rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .counterup__box--count__number {
    font-size: 3.2rem;
    line-height: 3.2rem;
    margin-bottom: 1.2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .counterup__box--count__number {
    font-size: 3.5rem;
    line-height: 3.5rem;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .counterup__box--count__number {
    font-size: 4rem;
    line-height: 4rem;
  }
}
.counterup__box--subtitle {
  color: #707070;
}
.counterup__small--shape {
  position: absolute;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.counterup__small--shape.one {
  top: 4rem;
  left: 0;
}
@media only screen and (max-width: 991px) {
  .counterup__small--shape.one {
    max-width: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .counterup__small--shape.one {
    max-width: 25px;
  }
}
.counterup__small--shape.two {
  bottom: 0;
  right: 0;
}
@media only screen and (max-width: 991px) {
  .counterup__small--shape.two {
    max-width: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .counterup__small--shape.two {
    max-width: 25px;
  }
}
.counterup__section--bg2 {
  background: url(../images/counterup-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
.counterup__box.style2 {
  border: 1px solid var(--secondary-color);
}
.counterup__box.style2:hover .counterup__box--subtitle {
  color: var(--white-color);
}
.counterup__box.style2 .counterup__box--subtitle {
  color: var(--primary-color);
}
@media only screen and (min-width: 992px) {
  .counterup__box.style2 .counterup__box--subtitle {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 1200px) {
  .counterup__box.style2 .counterup__box--subtitle {
    font-size: 1.7rem;
  }
}
@media only screen and (min-width: 1366px) {
  .counterup__box.style2 .counterup__box--subtitle {
    font-size: 1.8rem;
  }
}
/*
   9. Blog css
*/
.blog__card:hover .blog__card--thumbnail::before {
  opacity: 0.7;
}
.blog__card:hover .blog__card--thumbnail__img {
  transform: scale(1.06) rotate(2deg);
}
.blog__card--thumbnail {
  position: relative;
  overflow: hidden;
}
.blog__card--thumbnail::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--secondary-color);
  z-index: 9;
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
}
.blog__card--thumbnail__img {
  width: 100%;
}
.blog__card--content {
  padding-top: 2rem;
}
.blog__card--meta {
  margin-bottom: 1rem;
}
.blog__card--meta__icon {
  color: var(--secondary-color);
  margin-right: 0.5rem;
  vertical-align: middle;
}
.blog__card--meta__text {
  color: var(--text-gray-color);
  margin-right: 1.2rem;
}
.blog__card--meta__text:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  .blog__card--meta__text {
    margin-right: 2rem;
  }
}
@media only screen and (max-width: 575px) {
  .blog__card--meta__text {
    margin-right: 1rem;
    font-size: 1.2rem;
  }
}
.blog__card--title {
  font-size: 1.6rem;
  line-height: 2.6rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .blog__card--title {
    font-size: 1.7rem;
    line-height: 2.7rem;
  }
}
@media only screen and (min-width: 768px) {
  .blog__card--title {
    font-size: 1.8rem;
    line-height: 2.8rem;
    margin-bottom: 1.2rem;
  }
}
.blog__card--desc {
  color: var(--text-gray-color);
  margin-bottom: 1.4rem;
}
@media only screen and (min-width: 768px) {
  .blog__card--desc {
    margin-bottom: 1.6rem;
  }
}
.blog__card--btn {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.3rem;
  height: 3.8rem;
  line-height: 3.8rem;
  padding: 0 1.2rem;
}
.blog__card--btn svg {
  vertical-align: middle;
  margin-left: 3px;
}
@media only screen and (min-width: 576px) {
  .blog__card--btn {
    height: 4rem;
    line-height: 4rem;
    padding: 0 1.6rem;
  }
}
@media only screen and (min-width: 992px) {
  .blog__card--btn {
    font-size: 1.4rem;
  }
}
/*
   blog page sidebar css here
*/
.blog__sidebar--widget {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}
@media only screen and (max-width: 991px) {
  .blog__sidebar--widget.left {
    margin-top: 8rem;
  }
}
@media only screen and (max-width: 767px) {
  .blog__sidebar--widget.left {
    margin-top: 6rem;
  }
}
.single__widget {
  margin-bottom: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .single__widget {
    margin-bottom: 3rem;
  }
}
.single__widget:last-child {
  margin-bottom: 0;
}
.single__widget.widget__bg {
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
}
.widget__title {
  font-weight: 600;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color2);
  padding-bottom: 1rem;
}
@media only screen and (min-width: 992px) {
  .widget__title {
    padding-bottom: 1.2rem;
    margin-bottom: 2.5rem;
  }
}
.widget__search--form {
  position: relative;
}
.widget__search--form__input {
  width: 100%;
  height: 4.5rem;
  padding: 0 6rem 0 1.2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color2);
}
@media only screen and (min-width: 992px) {
  .widget__search--form__input {
    font-size: 1.5rem;
  }
}
.widget__search--form__input:focus {
  border-color: var(--secondary-color);
}
.widget__search--form__btn {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  background: var(--secondary-color);
  color: var(--white-color);
  padding: 0;
  width: 4.5rem;
  height: 100%;
  border-radius: 0 0.5rem 0.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget__search--form__btn:hover {
  background: var(--primary-color);
}
.widget__categories--menu__list {
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
}
.widget__categories--menu__list.active .widget__categories--menu__label {
  margin-bottom: 0;
}
.widget__categories--menu__list.active .widget__categories--menu__arrowdown--icon {
  transform: rotate(180deg);
  top: 38%;
}
.widget__categories--menu__label {
  cursor: pointer;
  padding: 0.5rem 1rem;
  position: relative;
  transition: var(--transition);
}
.widget__categories--menu__label:hover {
  color: var(--secondary-color);
}
.widget__categories--menu__label > * {
  pointer-events: none;
}
.widget__categories--menu__text {
  padding-left: 1rem;
  font-size: 1.4rem;
}
@media only screen and (min-width: 992px) {
  .widget__categories--menu__text {
    font-size: 1.5rem;
  }
}
.widget__categories--menu__img {
  width: 3rem;
}
.widget__categories--menu__arrowdown--icon {
  position: absolute;
  right: 1.5rem;
  top: 43%;
  transition: var(--transition);
}
.widget__categories--sub__menu {
  display: none;
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
}
.widget__categories--sub__menu--list {
  margin-bottom: 0.8rem;
  padding: 0 1rem 0.8rem;
  border-bottom: 1px solid var(--border-color);
}
.widget__categories--sub__menu--list:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.widget__categories--sub__menu--img {
  width: 2.8rem;
}
.widget__categories--sub__menu--text {
  padding-left: 1rem;
  line-height: 2.8rem;
  font-size: 1.4rem;
}
@media only screen and (min-width: 992px) {
  .widget__categories--sub__menu--text {
    font-size: 1.5rem;
  }
}
.widget__tagcloud--list {
  display: inline-block;
  margin: 0 8px 8px 0;
}
@media only screen and (min-width: 576px) {
  .widget__tagcloud--list {
    margin: 0 10px 10px 0;
  }
}
.widget__tagcloud--link {
  background: var(--bg-gray-color);
  padding: 0 1rem;
  height: 3.6rem;
  line-height: 3.6rem;
  border-radius: 0.4rem;
  font-size: 1.3rem;
}
@media only screen and (min-width: 576px) {
  .widget__tagcloud--link {
    padding: 0 1.5rem;
    height: 3.8rem;
    line-height: 3.8rem;
    border-radius: 0.4rem;
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 992px) {
  .widget__tagcloud--link {
    font-size: 1.5rem;
  }
}
.widget__tagcloud--link:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}
.blog__small--artical:hover .small__product--img {
  transform: scale(1.04);
}
.blog__small--artical--thumbnail {
  width: 8.1rem;
  overflow: hidden;
}
.blog__small--artical__content {
  width: calc(100% - 8.1rem);
  padding-left: 1.5rem;
}
@media only screen and (min-width: 1600px) {
  .blog__small--artical__content {
    padding-left: 1.8rem;
  }
}
.blog__small--artical__title {
  font-size: 1.4rem;
  line-height: 2.2rem;
  margin-bottom: 0.6rem;
}
.blog__small--artical__date {
  font-size: 1.4rem;
  line-height: 2rem;
  color: var(--text-gray-color);
}
.product__pagination--area {
  padding: 1.5rem 2rem;
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .product__pagination--area {
    margin-top: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .product__pagination--area {
    margin-top: 5rem;
  }
}
.product__pagination--list {
  margin-right: 0.8rem;
}
.product__pagination--list:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  .product__pagination--list {
    margin-right: 1.2rem;
  }
}
.product__pagination--item {
  width: 3.5rem;
  height: 3.5rem;
  line-height: 3.3rem;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--border-color2);
  background: var(--white-color);
}
@media only screen and (min-width: 768px) {
  .product__pagination--item {
    width: 4rem;
    height: 4rem;
    line-height: 3.8rem;
  }
}
.product__pagination--item.current {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--white-color);
}
.product__pagination--item:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--white-color);
}
/*
   18. Newslette Css
*/
.newsletter__bg {
  background: url(../images/newsletter-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
@media only screen and (min-width: 992px) {
  .newsletter__bg {
    padding: 8rem 0;
  }
}
@media only screen and (min-width: 1200px) {
  .newsletter__bg {
    padding: 10rem 0;
  }
}
@media only screen and (min-width: 1366px) {
  .newsletter__bg {
    padding: 12rem 0;
  }
}
@media only screen and (min-width: 1600px) {
  .newsletter__bg {
    padding: 14rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .newsletter__content {
    text-align: center;
    margin-bottom: 2rem;
  }
}
.newsletter__content--title {
  font-weight: 500;
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .newsletter__content--title {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .newsletter__content--title {
    font-size: 4rem;
    line-height: 4.5rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .newsletter__content--desc {
    width: 90%;
  }
}
.newsletter__subscribe--input {
  width: 100%;
  height: 4.8rem;
  border: 0;
  background: var(--white-color);
  padding: 0 14.5rem 0 2rem;
  border-radius: 5px;
}
@media only screen and (min-width: 992px) {
  .newsletter__subscribe--input {
    padding: 0 15rem 0 2rem;
    height: 5.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .newsletter__subscribe--input {
    height: 5.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .newsletter__subscribe--input {
    height: 6rem;
  }
}
@media only screen and (max-width: 575px) {
  .newsletter__subscribe--input {
    padding: 0 12.5rem 0 1.2rem;
  }
}
.newsletter__subscribe--button {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  height: 3.8rem;
  line-height: 3.8rem;
  font-size: 1.4rem;
  transform: translatey(-50%);
  text-transform: uppercase;
  padding: 0 1.5rem;
}
@media only screen and (min-width: 768px) {
  .newsletter__subscribe--button {
    height: 4.2rem;
    line-height: 4.2rem;
    right: 1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .newsletter__subscribe--button {
    padding: 0 2rem;
  }
}
.newsletter__subscribe--button__icon {
  vertical-align: middle;
  margin-left: 0.4rem;
}
@media only screen and (max-width: 575px) {
  .newsletter__subscribe--button {
    padding: 0 1rem;
    font-size: 1.3rem;
  }
}
.newsletter__bg2 {
  background: url(../images/newsletter-bg2.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
/*
   16. Footer Page Css
*/
.footer__bg {
  background: url(../images/footer-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
.main__footer {
  border-bottom: 1px solid var(--secondary-color);
  padding: 5.8rem 0 4rem;
}
@media only screen and (min-width: 768px) {
  .main__footer {
    padding: 6.5rem 0 3.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .main__footer {
    padding: 8rem 0;
  }
}
@media only screen and (min-width: 1200px) {
  .main__footer {
    padding: 10rem 0;
  }
}
@media only screen and (min-width: 1600px) {
  .main__footer {
    padding: 6rem 0;
  }
}
.footer__social {
  margin-top: 1.5rem;
}
@media only screen and (min-width: 992px) {
  .footer__social {
    margin-top: 2rem;
  }
}
.footer__logo {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 992px) {
  .footer__logo {
    margin-bottom: 1.3rem;
  }
}
@media only screen and (max-width: 991px) {
  .footer__logo--img {
    max-width: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__logo--img {
    max-width: 90px;
  }
}
@media only screen and (max-width: 991px) {
  .footer__widget {
    margin-bottom: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .footer__widget {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .footer__widget--desc {
    padding-right: 5rem;
    line-height: 2.6rem;
  }
}
.footer__widget--title {
  position: relative;
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-weight: 500;
  font-family: var(--roboto-fonts);
  padding-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .footer__widget--title {
    font-size: 2rem;
    line-height: 2.4rem;
    padding-bottom: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .footer__widget--title {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .footer__widget--title {
    font-size: 2.6rem;
    line-height: 3rem;
    margin-bottom: 2.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .footer__widget--title {
    margin-bottom: 20px;
  }
}
.footer__widget--title::before {
  position: absolute;
  content: "";
  width: 7rem;
  height: 0.2rem;
  background: var(--secondary-color);
  left: 0;
  bottom: 0;
}
.footer__widget--title__arrowdown--icon {
  position: absolute;
  right: 0;
  top: 38%;
  transition: 0.3s;
  display: none;
}
@media only screen and (max-width: 767px) {
  .footer__widget--title__arrowdown--icon {
    display: block;    top: 6%;
  }
}
.footer__widget.active {
  padding-bottom: 3rem;
}
.footer__widget.active .footer__widget--title__arrowdown--icon {
  transform: rotate(180deg);
}
.footer__widget--menu__list {
  margin-bottom: 0.6rem;
}
.footer__widget--menu__list:last-child {
  margin-bottom: 0;
}
.footer__widget--menu__text {
  line-height: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .footer__widget--menu__text {
    line-height: 2.6rem;
  }
}
.footer__widget--info__list {
  margin-bottom: 1.2rem;
}
.footer__widget--info__list:last-child {
  margin-bottom: 0;
}
.footer__widget--info__icon {
  margin: 0.3rem 1.7rem 0 0;
}
.footer__widget--button {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  content: "";
  color: transparent;
  border: 0;
  background-color: transparent;
}
@media only screen and (max-width: 767px) {
  .footer__widget--button {
    visibility: visible;
  }
}
@media only screen and (max-width: 767px) {
  .footer__widget--inner {
    display: none;
  }
}
.footer__bottom {
  padding: 2rem 0;
  position: relative;
  z-index: 9;
}
@media only screen and (min-width: 768px) {
  .footer__bottom {
    padding: 3rem 0;
  }
}
@media only screen and (min-width: 1600px) {
  .footer__bottom {
    padding: 2rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .footer__bottom--inner {
    flex-direction: column;
  }
}
@media only screen and (max-width: 767px) {
  .copyright__content {
    text-align: center;
    margin-bottom: 1rem;
  }
}
.copyright__content--link:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}
.footer__shape--img {
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media only screen and (max-width: 767px) {
  .footer__shape--img {
    max-width: 70px;
  }
}
.footer__bg2 {
  background: url(../images/footer-bg2.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
/*
   5. Accordion Css
*/
@media only screen and (max-width: 767px) {
  .accordion__section--inner .row {
    flex-direction: column-reverse;
  }
}
@media only screen and (max-width: 767px) {
  .accordion__banner {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .accordion__wrapper {
    margin-bottom: 30px;
  }
}
.accordion__items.active {
  margin-bottom: 20px;
}
.accordion__items.active:last-child {
  margin-bottom: 0;
}
.accordion__items.active .accordion__items--button__icon--svg {
  transform: rotate(180deg);
}
.accordion__items--body {
  display: none;
  padding: 0 20px;
}
.accordion__items--body.display-block {
  display: block;
}
.accordion__items--body__desc {
  font-size: 1.5rem;
  line-height: 2.8rem;
}
.accordion__items--button {
  border: 0;
  background: var(--white-color);
  width: 100%;
  padding: 13px 60px 13px 25px;
  text-align: left;
  margin-bottom: 18px;
  font-size: 1.4rem;
  font-weight: 500;
  position: relative;
}
@media only screen and (min-width: 992px) {
  .accordion__items--button {
    padding: 13px 70px 13px 35px;
  }
}
@media only screen and (min-width: 1200px) {
  .accordion__items--button {
    padding: 24px 80px 24px 40px;
  }
}
.accordion__items--button__icon {
  width: 3rem;
  height: 3rem;
  background: var(--secondary-color);
  color: var(--white-color);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translatey(-50%);
}
@media only screen and (min-width: 768px) {
  .accordion__items--button__icon {
    right: 15px;
  }
}
@media only screen and (min-width: 992px) {
  .accordion__items--button__icon {
    right: 35px;
  }
}
.accordion__items--button__icon--svg {
  transition: var(--transition);
}
.accordion__items--button > * {
  pointer-events: none;
}
/*
   11. Breadcrumb Css
*/
.breadcrumb__bg {
  background: url(../images/breadcrumb-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  height: 220px;
  display: flex;
  align-items: center;
  position: relative;
}
@media only screen and (min-width: 480px) {
  .breadcrumb__bg {
    height: 230px;
  }
}
@media only screen and (min-width: 768px) {
  .breadcrumb__bg {
    height: 280px;
  }
}
@media only screen and (min-width: 992px) {
  .breadcrumb__bg {
    height: 340px;
  }
}
@media only screen and (min-width: 1200px) {
  .breadcrumb__bg {
    height: 400px;
  }
}
@media only screen and (min-width: 1600px) {
  .breadcrumb__bg {
    height: 420px;
  }
}
.breadcrumb__section--shape--bg {
  position: absolute;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  bottom: 3rem;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.breadcrumb__content {
  position: relative;
  z-index: 9;
  margin-top: 6rem;
}
@media only screen and (max-width: 575px) {
  .breadcrumb__content {
    text-align: center;
  }
}
@media only screen and (min-width: 768px) {
  .breadcrumb__content {
    margin-top: 5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .breadcrumb__content--title {
    font-size: 5rem;
    line-height: 6rem;
  }
}
@media only screen and (min-width: 1600px) {
  .breadcrumb__content--title {
    font-size: 6rem;
    line-height: 8rem;
  }
}
@media only screen and (max-width: 575px) {
  .breadcrumb__content--menu {
    justify-content: center;
  }
}
.breadcrumb__content--menu__items {
  position: relative;
  margin-right: 20px;
  padding-right: 22px;
  font-size: 15px;
  line-height: 24px;
}
@media only screen and (min-width: 768px) {
  .breadcrumb__content--menu__items {
    font-size: 17px;
  }
}
@media only screen and (min-width: 992px) {
  .breadcrumb__content--menu__items {
    font-size: 18px;
  }
}
.breadcrumb__content--menu__items:last-child {
  margin-right: 0;
  padding-right: 0;
}
.breadcrumb__content--menu__items:last-child::before {
  display: none;
}
.breadcrumb__content--menu__items::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 2px;
  background: var(--secondary-color);
  right: -4px;
  top: 50%;
  transform: translatey(-50%);
}
/*
   8. Services details css
*/
.services__details--thumbnail {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .services__details--thumbnail {
    margin-bottom: 3rem;
  }
}
.services__details--content__step {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .services__details--content__step {
    margin-bottom: 3rem;
  }
}
@media only screen and (max-width: 575px) {
  .services__details--content__step {
    text-align: center;
  }
}
.services__details--content__title {
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 1.3rem;
}
@media only screen and (min-width: 576px) {
  .services__details--content__title {
    font-size: 2.2rem;
    line-height: 3rem;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .services__details--content__title {
    margin-bottom: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .services__details--content__title {
    font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .services__details--content__title {
    font-size: 2.8rem;
    line-height: 3.5rem;
  }
}
.services__details--content__desc {
  color: var(--text-gray-color);
  line-height: 2.6rem;
}
@media only screen and (min-width: 576px) {
  .services__details--content__desc {
    line-height: 2.7rem;
  }
}
@media only screen and (min-width: 1200px) {
  .services__details--content__desc {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }
}
/*
  services sidebar css here
*/
.services__details--sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}
@media only screen and (max-width: 767px) {
  .services__details--sidebar {
    margin-top: 5.3rem;
  }
}
.services__details--widget {
  background: var(--primary-color);
  margin-bottom: 2.5rem;
  padding: 2rem 1.5rem 2rem 3.8rem;
  position: relative;
  border-radius: 5px;
  transition: var(--transition);
}
@media only screen and (min-width: 768px) {
  .services__details--widget {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .services__details--widget {
    padding: 2.5rem 2rem 2.5rem 6.5rem;
  }
}
.services__details--widget.two {
  width: 90%;
}
.services__details--widget:hover {
  background: var(--secondary-color);
}
.services__details--widget:hover::before {
  background: var(--primary-color);
}
.services__details--widget::before {
  position: absolute;
  content: "";
  width: 2rem;
  height: 100%;
  background: var(--secondary-color);
  left: 0;
  top: 0;
  border-radius: 5px 0 0 5px;
  transition: var(--transition);
}
@media only screen and (min-width: 992px) {
  .services__details--widget::before {
    width: 4rem;
  }
}
.services__details--widget__title {
  color: var(--white-color);
  font-size: 1.7rem;
  line-height: 2.3rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 576px) {
  .services__details--widget__title {
    font-size: 1.8rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .services__details--widget__title {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .services__details--widget__title {
    font-size: 2.3rem;
  }
}
.services__details--widget__desc {
  color: var(--white-color);
  line-height: 2.5rem;
}
@media only screen and (min-width: 576px) {
  .services__details--widget__desc {
    line-height: 2.6rem;
  }
}
@media only screen and (min-width: 1200px) {
  .services__details--widget__desc {
    width: 80%;
  }
}
.services__widget--info {
  margin-bottom: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .services__widget--info {
    margin-bottom: 3rem;
  }
}
.services__widget--info__title {
  font-size: 1.8rem;
  line-height: 2.8rem;
  padding-bottom: 1.2rem;
  margin-bottom: 2rem;
  position: relative;
}
@media only screen and (min-width: 576px) {
  .services__widget--info__title {
    font-size: 2rem;
    line-height: 2.8rem;
    padding-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .services__widget--info__title {
    font-size: 2.3rem;
  }
}
.services__widget--info__title::before {
  position: absolute;
  content: "";
  width: 70%;
  height: 1px;
  background: var(--secondary-color);
  left: 0;
  bottom: 0;
  opacity: 0.5;
}
.services__advice {
  background: var(--primary-color);
  text-align: center;
  border-radius: 5px;
  padding: 2.5rem 2rem;
}
@media only screen and (min-width: 768px) {
  .services__advice {
    padding: 3.5rem 3rem;
  }
}
.services__advice--title {
  color: var(--white-color);
  font-size: 2rem;
  line-height: 2.8rem;
  margin: 0 0 1.8rem;
}
@media only screen and (min-width: 576px) {
  .services__advice--title {
    font-size: 2.2rem;
    line-height: 3rem;
    margin: 0 0 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .services__advice--title {
    font-size: 2.4rem;
    line-height: 3.2rem;
    width: 80%;
    margin: 0 auto 2.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .services__advice--title {
    font-size: 2.6rem;
    line-height: 3.4rem;
  }
}
/*
   10. Blog Details Css
*/
.blog__wrapper--sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.blog__post--header.mb-30 {
  margin-bottom: 2.5rem;
}
@media only screen and (max-width: 575px) {
  .blog__post--header {
    text-align: center;
  }
}
@media only screen and (min-width: 992px) {
  .post__header--title {
    line-height: 3.2rem;
    font-size: 2.6rem;
  }
}
@media only screen and (min-width: 1366px) {
  .post__header--title {
    line-height: 3.8rem;
    font-size: 3.2rem;
  }
}
@media only screen and (min-width: 1600px) {
  .post__header--title {
    line-height: 4.2rem;
    font-size: 3.5rem;
  }
}
.blog__post--meta {
  text-transform: capitalize;
}
@media only screen and (min-width: 992px) {
  .blog__post--meta {
    font-size: 1.5rem;
  }
}
.blog__post--meta__link {
  color: var(--secondary-color);
}
.blog__post--meta__link:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}
.blog__thumbnail {
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .blog__thumbnail.mb-30 {
    margin-bottom: 2rem;
  }
}

.blog__details--content__subtitle {
  line-height: 3rem;
}
@media only screen and (min-width: 992px) {
  .blog__details--content__subtitle {
    line-height: 3.2rem;
    font-size: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .blog__details--content__subtitle {
    line-height: 3.2rem;
    font-size: 2.2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .blog__details--content__subtitle {
    line-height: 3.5rem;
    font-size: 2.5rem;
  }
}
.blockquote__content {
  padding: 20px 30px;
  text-align: center;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) {
  .blockquote__content {
    padding: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .blockquote__content {
    padding: 40px 50px;
  }
}
@media only screen and (max-width: 767px) {
  .blockquote__content {
    margin: 0 0 2.5rem;
    padding: 1.5rem 2rem;
  }
}
.blockquote__content--desc {
  font-size: 1.6rem;
  line-height: 3rem;
  font-style: italic;
  font-weight: 500;
}
@media only screen and (min-width: 992px) {
  .blockquote__content--desc {
    font-size: 1.8rem;
    line-height: 3.4rem;
  }
}
.blog__tags--social__media {
  padding: 5rem 0;
}
@media only screen and (max-width: 1199px) {
  .blog__tags--social__media {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media only screen and (max-width: 575px) {
  .blog__tags--social__media {
    align-items: center;
  }
}
@media only screen and (max-width: 1199px) {
  .blog__tags--media {
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 575px) {
  .blog__tags--media {
    flex-direction: column;
    align-items: flex-start;
  }
}
.blog__tags--media__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 1rem;
}
@media only screen and (min-width: 992px) {
  .blog__tags--media__title {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 575px) {
  .blog__tags--media__title {
    margin-right: 0;
    margin-bottom: 1rem;
    width: 100%;
    text-align: center;
  }
}
.blog__tags--media__list {
  margin-right: 0.7rem;
}
.blog__tags--media__list:last-child {
  margin-right: 0;
}
.blog__tags--media__link {
  border: 1px solid var(--border-color2);
  background: var(--white-color);
  padding: 0.5rem 1.2rem;
  line-height: 2.5rem;
  border-radius: 0.3rem;
  text-transform: capitalize;
}
.blog__tags--media__link:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
}
@media only screen and (max-width: 575px) {
  .blog__tags--media__link {
    padding: 0.4rem 0.8rem;
  }
}
.meta__deta {
  font-weight: 500;
  margin-top: 0.6rem;
  font-size: 1.5rem;
}
.blog__social--media__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 1rem;
}
@media only screen and (min-width: 992px) {
  .blog__social--media__title {
    font-size: 1.6rem;
  }
}
.blog__social--media__list {
  margin-right: 1rem;
}
.blog__social--media__list:last-child {
  margin-right: 0;
}
.blog__social--media__link {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary-color);
  color: var(--white-color);
  border-radius: 50%;
}
.blog__social--media__link:hover {
  background: var(--primary-color);
  color: var(--white-color);
}
.related__post--heading__maintitle {
  font-size: 2rem;
}
@media only screen and (min-width: 992px) {
  .related__post--heading__maintitle {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}
.related__post--items:hover .related__post--img {
  transform: scale(1.05);
}
.related__post--thumbnail {
  overflow: hidden;
}
@media only screen and (max-width: 575px) {
  .related__post--thumbnail a {
    width: 100%;
  }
}
@media only screen and (max-width: 575px) {
  .related__post--thumbnail a img {
    width: 100%;
  }
}
@media only screen and (max-width: 575px) {
  .related__post--text {
    text-align: center;
  }
}
.related__post--title {
  line-height: 2.2rem;
}
@media only screen and (min-width: 992px) {
  .related__post--title {
    line-height: 2.4rem;
  }
}
.related__post--deta {
  font-size: 1.5rem;
}
.comment__reply--btn {
  height: 3.4rem;
  line-height: 3.4rem;
  padding: 0 2rem;
  font-size: 1.4rem;
}
@media only screen and (min-width: 992px) {
  .comment__reply--btn {
    font-size: 1.6rem;
    height: 3.8rem;
    line-height: 3.8rem;
    padding: 0 2.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .comment__reply--btn {
    font-size: 1.6rem;
  }
}
.reviews__comment--content__title2 {
  font-weight: 600;
  line-height: 2.4rem;
  margin-bottom: 0.6rem;
}
@media only screen and (min-width: 992px) {
  .reviews__comment--content__title2 {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 1200px) {
  .reviews__comment--content__title2 {
    font-size: 1.7rem;
  }
}
.reviews__comment--content__date2 {
  font-size: 1.5rem;
  color: var(--text-gray-color);
  margin-bottom: 0.8rem;
}
.reviews__comment--reply__title {
  font-size: 2rem;
}
@media only screen and (min-width: 992px) {
  .reviews__comment--reply__title {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}
.reviews__comment--area {
  padding: 0 2rem;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 767px) {
  .reviews__comment--area {
    padding: 0;
  }
}
.reviews__comment--thumb {
  width: 85px;
}
@media only screen and (max-width: 575px) {
  .reviews__comment--thumb {
    margin-bottom: 1rem;
  }
}
.reviews__comment--thumb img {
  display: block;
}
.reviews__comment--top {
  margin-bottom: 1rem;
}
.reviews__comment--content {
  width: 100%;
  position: relative;
}
@media only screen and (min-width: 576px) {
  .reviews__comment--content {
    width: calc(100% - 85px);
    padding-left: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .reviews__comment--content {
    padding-left: 2.5rem;
  }
}
.reviews__comment--content__date {
  border: 1px solid var(--border-color);
  padding: 0 1rem;
  border-radius: 5px;
  color: var(--text-gray-color);
  height: 3.8rem;
  line-height: 3.8rem;
  font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
  .reviews__comment--content__date {
    height: 4.2rem;
    line-height: 4rem;
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 479px) {
  .reviews__comment--content__date {
    padding: 0 0.7rem;
    font-size: 1.2rem;
    height: 3.6rem;
    line-height: 3.6rem;
  }
}
.reviews__comment--content__title {
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.reviews__comment--content__desc {
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) {
  .reviews__comment--content__desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
@media only screen and (max-width: 575px) {
  .reviews__comment--content .reviews__ratting {
    justify-content: flex-start;
  }
}
.reviews__comment--list {
  border-bottom: 1px solid var(--border-color2);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}
.reviews__comment--list:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .reviews__comment--list {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .reviews__comment--list {
    flex-direction: column;
  }
}
.reviews__comment--list.margin__left {
  margin-left: 2.2rem;
}
@media only screen and (min-width: 400px) {
  .reviews__comment--list.margin__left {
    margin-left: 2.5rem;
  }
}
@media only screen and (min-width: 480px) {
  .reviews__comment--list.margin__left {
    margin-left: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .reviews__comment--list.margin__left {
    margin-left: 5rem;
  }
}
@media only screen and (max-width: 575px) {
  .reviews__comment--reply__title {
    text-align: center;
  }
}
.reviews__comment--reply__textarea {
  width: 100%;
  height: 100px;
  resize: none;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--border-color2);
  border-radius: 0.5rem;
}
@media only screen and (min-width: 768px) {
  .reviews__comment--reply__textarea {
    height: 150px;
  }
}
@media only screen and (min-width: 992px) {
  .reviews__comment--reply__textarea {
    font-size: 1.5rem;
  }
}
.reviews__comment--reply__textarea:focus {
  border-color: var(--secondary-color);
}
.reviews__comment--reply__input {
  width: 100%;
  border: 1px solid var(--border-color2);
  height: 5rem;
  border-radius: 0.5rem;
  padding: 0 1.5rem;
}
@media only screen and (min-width: 992px) {
  .reviews__comment--reply__input {
    font-size: 1.5rem;
  }
}
.reviews__comment--reply__input:focus {
  border-color: var(--secondary-color);
}
/*
   12. Contact Page Css
*/
@media only screen and (max-width: 767px) {
  .contact__thumbnail {
    margin-bottom: 3rem;
  }
}
.home__contact--title {
  font-size: 2rem;
  line-height: 2.6rem;
  font-weight: 500;
}
@media only screen and (min-width: 576px) {
  .home__contact--title {
    font-size: 2.3rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .home__contact--title {
    font-size: 2.5rem;
    line-height: 3.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .home__contact--title {
    font-size: 3rem;
    line-height: 4rem;
  }
}
@media only screen and (max-width: 767px) {
  .home__contact--title {
    text-align: center;
  }
}
.home__contact--form {
  box-shadow: 0 8px 13px rgba(0, 0, 0, 0.11);
  padding: 2.5rem 2rem;
  border-radius: 10px;
}
@media only screen and (min-width: 576px) {
  .home__contact--form {
    padding: 3rem 2.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .home__contact--form {
    padding: 3.5rem 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .home__contact--form {
    padding: 5rem 4rem;
  }
}
@media only screen and (max-width: 991px) {
  .home__contact--form__input.mb-20 {
    margin-bottom: 1.5rem;
  }
}
.home__contact--form__input--label {
  margin-bottom: 0.5rem;
  display: inline-block;
}
@media only screen and (min-width: 992px) {
  .home__contact--form__input--label {
    margin-bottom: 1rem;
  }
}
.home__contact--form__input--field {
  width: 100%;
  border: 1px solid var(--border-color);
  height: 4.2rem;
  padding: 0 1.5rem;
  border-radius: 5px;
}
.home__contact--form__input--field:focus {
  border-color: var(--secondary-color) !important;
}
@media only screen and (min-width: 576px) {
  .home__contact--form__input--field {
    height: 4.4rem;
    padding: 0 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .home__contact--form__input--field {
    height: 4.6rem;
  }
}
@media only screen and (min-width: 1200px) {
  .home__contact--form__input--field {
    height: 5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .home__contact--form__input--field {
    height: 5.5rem;
  }
}
.home__contact--form__input--btn {
  margin-top: 2rem;
  width: 100%;
  height: 4.2rem;
  line-height: 4.2rem;
}
@media only screen and (min-width: 576px) {
  .home__contact--form__input--btn {
    height: 4.4rem;
    line-height: 4.4rem;
  }
}
@media only screen and (min-width: 992px) {
  .home__contact--form__input--btn {
    height: 4.6rem;
    line-height: 4.6rem;
    margin-top: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .home__contact--form__input--btn {
    height: 5rem;
    line-height: 5rem;
    margin-top: 4rem;
  }
}
@media only screen and (min-width: 1366px) {
  .home__contact--form__input--btn {
    height: 5.5rem;
    line-height: 5.5rem;
    margin-top: 5rem;
  }
}
.contact__section--shape {
  position: absolute;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index: -1;
}
.contact__section--shape.one {
  left: 0;
  bottom: 7rem;
}
@media only screen and (max-width: 1500px) {
  .contact__section--shape.one {
    max-width: 50px;
  }
}
@media only screen and (max-width: 1199px) {
  .contact__section--shape.one {
    max-width: 35px;
  }
}
@media only screen and (max-width: 767px) {
  .contact__section--shape.one {
    max-width: 22px;
  }
}
@media only screen and (max-width: 479px) {
  .contact__section--shape.one {
    max-width: 15px;
  }
}
.contact__section--shape.two {
  right: 0;
  top: 8rem;
}
@media only screen and (max-width: 1500px) {
  .contact__section--shape.two {
    max-width: 90px;
  }
}
@media only screen and (max-width: 1199px) {
  .contact__section--shape.two {
    max-width: 60px;
  }
}
@media only screen and (max-width: 479px) {
  .contact__section--shape.two {
    max-width: 20px;
  }
}
/*
    contact page css here
*/
.contact__address--items {
  text-align: center;
  border: 1px solid var(--secondary-color);
  height: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 5px;
  position: relative;
  transition: var(--transition);
  background: var(--white-color);
  z-index: 9;
}
@media only screen and (min-width: 1200px) {
  .contact__address--items {
    padding: 3rem;
  }
}
.contact__address--items::before {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  background: var(--secondary-color);
  top: 0;
  left: 50%;
  right: 50%;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 5px;
  transition: var(--transition);
}
.contact__address--items:hover {
  transform: translatey(-20px);
}
.contact__address--items:hover::before {
  opacity: 1;
  left: 0;
  right: 0;
  width: 100%;
}
.contact__address--items:hover .contact__address--icon {
  color: var(--white-color);
}
.contact__address--items:hover .contact__address--title {
  color: var(--white-color);
}
.contact__address--items:hover .contact__address--desc {
  color: var(--white-color);
}
.contact__address--items:hover .contact__address--desc a {
  color: var(--white-color);
}
.contact__address--icon {
  margin-bottom: 0.4rem;
  transition: var(--transition);
}
@media only screen and (min-width: 576px) {
  .contact__address--icon {
    margin-bottom: 0.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .contact__address--icon {
    margin-bottom: 1.2rem;
  }
}
@media only screen and (max-width: 991px) {
  .contact__address--icon svg {
    max-width: 5rem;
  }
}
.contact__address--title {
  margin-bottom: 1.2rem;
  transition: var(--transition);
}
.contact__address--desc {
  transition: var(--transition);
}
.circle__shape--img {
  position: absolute;
  z-index: 1;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media only screen and (max-width: 1199px) {
  .circle__shape--img {
    max-width: 4rem;
  }
}
.circle__shape--img.one {
  left: 5rem;
  bottom: 0;
}
@media only screen and (max-width: 1365px) {
  .circle__shape--img.one {
    left: 2rem;
  }
}
.circle__shape--img.two {
  right: 5rem;
  top: 50%;
}
@media only screen and (max-width: 1365px) {
  .circle__shape--img.two {
    right: 2rem;
  }
}
.contact__address--items__shape {
  position: absolute;
  z-index: 9;
}
.contact__address--items__shape.one {
  top: 2rem;
  left: 1.5rem;
  max-width: 3.3rem;
}
@media only screen and (max-width: 767px) {
  .contact__address--items__shape.one {
    max-width: 2.5rem;
  }
}
.contact__address--items__shape.two {
  bottom: 0;
  right: 0;
  max-width: 6.5rem;
}
@media only screen and (max-width: 991px) {
  .contact__address--items__shape.two {
    max-width: 5rem;
  }
}
@media only screen and (max-width: 767px) {
  .contact__address--items__shape.two {
    max-width: 4rem;
  }
}
.contact__form {
  background: var(--white-color);
  border-radius: 10px;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16);
  padding: 2rem;
}
@media only screen and (min-width: 768px) {
  .contact__form {
    padding: 2.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .contact__form--thumbnail {
    margin-bottom: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .contact__form--thumbnail__img {
    margin: 0 auto;
  }
}
.contact__form--title {
  font-weight: 600;
}
@media only screen and (max-width: 1199px) {
  .contact__form--title.mb-30 {
    margin-bottom: 2rem;
  }
}
.contact__form--label {
  display: block;
  margin-bottom: 8px;
  font-size: 1.3rem;
}
.contact__form--label__star {
  color: var(--secondary-color);
}
@media only screen and (min-width: 768px) {
  .contact__form--label {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 991px) {
  .contact__form--list.mb-20 {
    margin-bottom: 1.5rem;
  }
}
.contact__form--input {
  width: 100%;
  height: 4rem;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.contact__form--input:focus {
  border-color: var(--secondary-color) !important;
}
@media only screen and (min-width: 992px) {
  .contact__form--input {
    height: 4.5rem;
    padding: 5px 13px;
  }
}
.contact__form--textarea {
  width: 100%;
  height: 10rem;
  padding: 12px 15px;
  border-radius: 8px;
  resize: none;
  border: 1px solid var(--border-color);
  font-family: var(--font-poppins);
}
.contact__form--textarea:focus {
  border-color: var(--secondary-color) !important;
}
@media only screen and (min-width: 992px) {
  .contact__form--textarea {
    height: 120px;
  }
}
@media only screen and (min-width: 1200px) {
  .contact__form--textarea {
    height: 130px;
  }
}
.contact__form--textarea.style2 {
  height: 100px;
}
@media only screen and (min-width: 992px) {
  .contact__form--textarea.style2 {
    height: 120px;
  }
}
@media only screen and (min-width: 1366px) {
  .contact__form--textarea.style2 {
    height: 150px;
  }
}
.contact__form--btn {
  width: 100%;
}
@media only screen and (min-width: 992px) {
  .contact__form--btn {
    font-size: 1.7rem;
  }
}
p#my-form-status {
  margin-top: 2rem;
  color: green;
  font-style: italic;
}
.contact__map--iframe {
  width: 100%;
  height: 200px;
  margin-bottom: -7px;
}
@media only screen and (min-width: 576px) {
  .contact__map--iframe {
    height: 250px;
  }
}
@media only screen and (min-width: 768px) {
  .contact__map--iframe {
    height: 300px;
  }
}
@media only screen and (min-width: 992px) {
  .contact__map--iframe {
    height: 400px;
  }
}
@media only screen and (min-width: 1200px) {
  .contact__map--iframe {
    height: 500px;
  }
}
@media only screen and (min-width: 1600px) {
  .contact__map--iframe {
    height: 600px;
  }
}
/* 
    25. 404 page css 
*/
.error__htumbnail--img {
  margin: 0 auto 3rem;
}
@media only screen and (min-width: 768px) {
  .error__htumbnail--img {
    margin: 0 auto 5rem;
  }
}
.error__content--title {
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  line-height: 3rem;
}
@media only screen and (min-width: 576px) {
  .error__content--title {
    margin-bottom: 1.5rem;
    font-size: 2.6rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 768px) {
  .error__content--title {
    margin-bottom: 1.8rem;
    font-size: 3.3rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .error__content--title {
    font-size: 4rem;
    line-height: 4.5rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .error__content--title {
    font-size: 4.5rem;
    line-height: 5rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .error__content--title {
    font-size: 5rem;
    line-height: 5.5rem;
  }
}
.error__content--desc {
  font-size: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .error__content--desc {
    font-size: 1.7rem;
    line-height: 2.5rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .error__content--desc {
    font-size: 1.8rem;
    line-height: 2.5rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .error__content--desc {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .error__content--btn {
    font-size: 1.6rem;
  }
}
/* 
    17. Login Page css 
*/
.account__login {
  background: var(--white-color);
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 576px) {
  .account__login {
    padding: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .account__login {
    padding: 3rem;
  }
}
.account__login--header__title {
  font-weight: 600;
}
.account__login--header__desc {
  font-size: 1.5rem;
  font-weight: 600;
}
.account__login--input {
  width: 100%;
  height: 4.8rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .account__login--input {
    height: 5rem;
  }
}
@media only screen and (min-width: 992px) {
  .account__login--input {
    font-size: 1.5rem;
    height: 5.2rem;
  }
}
.account__login--input:focus {
  border-color: var(--secondary-color);
}
.account__login--btn {
  width: 100%;
  border-radius: 0.5rem;
  font-size: 1.5rem;
}
@media only screen and (min-width: 992px) {
  .account__login--btn {
    font-size: 1.7rem;
  }
}
@media only screen and (max-width: 767px) {
  .account__login--btn {
    height: 4.5rem;
    line-height: 4.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .account__login--btn {
    height: 4rem;
    line-height: 4rem;
  }
}
.account__login--signup__text {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-gray-color);
}
.account__login--signup__text button {
  padding: 0;
  border: 0;
  background: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--secondary-color);
}
.account__login--signup__text button:hover {
  text-decoration: underline;
}
.account__login--forgot {
  font-weight: 600;
  color: var(--secondary-color);
  font-size: 1.5rem;
  padding: 0;
  border: 0;
  background: inherit;
}
@media only screen and (max-width: 575px) {
  .account__login--forgot {
    margin-top: 0.6rem;
  }
}
.account__login--forgot:hover {
  color: var(--primary-color);
}
@media only screen and (max-width: 767px) {
  .account__login.register {
    margin-top: 3rem;
  }
}
@media only screen and (max-width: 575px) {
  .account__login--remember__forgot {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media only screen and (max-width: 575px) {
  .account__login--remember .checkout__checkbox--checkmark {
    top: 0;
    top: 5px;
    transform: inherit;
  }
}
.login__remember--label {
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
}
@media only screen and (min-width: 992px) {
  .login__remember--label {
    font-size: 1.5rem;
  }
}
.account__login--divide {
  text-align: center;
  position: relative;
  padding: 1rem 0;
}
.account__login--divide::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.1rem;
  background: var(--border-color2);
  top: 50%;
  left: 0;
  transform: translatey(-50%);
}
.account__login--divide__text {
  padding: 0 0.8rem;
  background: var(--white-color);
  position: relative;
  font-weight: 500;
  color: var(--light-color);
}
@media only screen and (min-width: 992px) {
  .account__login--divide__text {
    font-size: 1.5rem;
  }
}
.account__social--link {
  height: 4.2rem;
  line-height: 4.2rem;
  padding: 0 2.5rem;
  color: var(--white-color);
  border-radius: 0.5rem;
  font-weight: 600;
  margin-right: 1rem;
}
.account__social--link.facebook {
  background: #4867aa;
}
.account__social--link.facebook:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}
.account__social--link.google {
  background: #e94235;
}
.account__social--link.google:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}
.account__social--link.twitter {
  background: #55adee;
}
.account__social--link.twitter:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}
.account__social--link:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  .account__social--link {
    padding: 0 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .account__social--link {
    padding: 0 3.2rem;
    margin-right: 1.2rem;
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .account__social--link {
    padding: 0 4.5rem;
    margin-right: 2rem;
  }
}
@media only screen and (max-width: 575px) {
  .account__social--link {
    height: 4rem;
    line-height: 4rem;
    padding: 0 1.4rem;
  }
}
@media only screen and (max-width: 479px) {
  .account__social--link {
    height: 3.6rem;
    line-height: 3.6rem;
    padding: 0 1.2rem;
    font-size: 1.3rem;
  }
}
/*
   14. Faq Page Css
*/
.face__step {
  margin-bottom: 3.5rem;
  padding-bottom: 3rem;
}
.face__step:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.face__step--title {
  font-weight: 600;
}
@media only screen and (max-width: 767px) {
  .face__step--title.mb-30 {
    margin-bottom: 2.2rem;
  }
}
.faq__accordion--btn {
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
  padding: 1.8rem 6rem 1.8rem 2rem;
  font-size: 1.5rem;
  border-radius: 0.5rem;
}
.faq__accordion--btn .accordion__items--button__icon {
  right: 1rem;
}
@media only screen and (min-width: 768px) {
  .faq__accordion--btn .accordion__items--button__icon {
    right: 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .faq__accordion--btn .accordion__items--button__icon {
    right: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .faq__accordion--btn {
    font-size: 1.6rem;
  }
}
/* 
    19. Preloader css 
*/
.ctn-preloader {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
}
.ctn-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}
.ctn-preloader .animation-preloader .spinner {
  -webkit-animation: spinner 1s infinite linear;
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 4px solid var(--light-color2);
  border-top-color: var(--black-color);
  height: 9em;
  margin: 0 auto 3.5em auto;
  width: 9em;
}
.ctn-preloader .animation-preloader .txt-loading {
  font-weight: 900;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--light-color2);
  font-size: 3.5rem;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
  animation: letters-loading 5s infinite;
  color: var(--black-color);
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: rotateY(-90deg);
  -webkit-animation: letters-loading 5s infinite;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading {
  color: rgba(0, 0, 0, 0.2);
  position: relative;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.ctn-preloader .loader-section {
  background: var(--white-color);
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}
.ctn-preloader .loader-section.section-left {
  left: 0;
}
.ctn-preloader .loader-section.section-right {
  right: 0;
}
.loaded .animation-preloader {
  opacity: 0;
  transition: 0.5s ease-out;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -ms-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
}
.loaded .loader-section.section-left {
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  transform: translateX(-101%);
}
.loaded .loader-section.section-right {
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  transform: translateX(101%);
}
/* Animación del preloader */
@-webkit-keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
/* Animación de las letras cargando del preloader */
@-webkit-keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
/* Tamaño de portatil hacia atras (portatil, tablet, celular) */
@media screen and (max-width: 767px) {
  /* Preloader */
  /* Spinner cargando */
  .ctn-preloader .animation-preloader .spinner {
    height: 8em;
    width: 8em;
  }
  /* Texto cargando */
  .ctn-preloader .animation-preloader .txt-loading {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 500px) {
  .ctn-preloader .animation-preloader .spinner {
    height: 7em;
    width: 7em;
  }
}
/* 
    21. Privacy Policy css 
*/
.privacy__policy--content {
  margin-bottom: 2rem;
}
.privacy__policy--content:last-child {
  margin-bottom: 0;
}
.privacy__policy--content__title {
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 0.8rem;
}
@media only screen and (min-width: 768px) {
  .privacy__policy--content__title {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .privacy__policy--content__title {
    font-size: 2.5rem;
    line-height: 2.8rem;
    margin-bottom: 1.2rem;
  }
}
.privacy__policy--content__subtitle {
  font-size: 1.8rem;
  line-height: 2.5rem;
  margin-bottom: 0.8rem;
}
@media only screen and (min-width: 1600px) {
  .privacy__policy--content__subtitle {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }
}
.privacy__policy--content__desc {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 1200px) {
  .privacy__policy--content__desc {
    font-size: 1.5rem;
  }
}
/*
   24. Theme dark color css here
*/
.theme__dark--color {
  background: var(--black-color);
  color: var(--white-color);
  /*
    home two dark css 
  */
  /*
      About page dark css
  */
  /*
      contact page dark css
  */
  /*
      services details dark css 
  */
  /*
      project details dark css 
  */
  /*
      team details dark css 
  */
  /*
      login dark css 
  */
  /*
      blog page css here
  */
  /*
      blog details dark css
  */
}
.theme__dark--color .header__sticky.sticky {
  background: var(--dark-color);
}
.theme__dark--color .offcanvas-header {
  background: var(--dark-color);
}
.theme__dark--color .offcanvas__close--btn::before {
  background: var(--white-color);
}
.theme__dark--color .offcanvas__close--btn::after {
  background: var(--white-color);
}
.theme__dark--color .offcanvas__sub_menu_toggle::before {
  background: var(--white-color);
}
.theme__dark--color .offcanvas__sub_menu_toggle::after {
  background: var(--white-color);
}
.theme__dark--color .header__menu--link {
  color: var(--white-color);
}
.theme__dark--color .header__sub--menu {
  background: var(--dark-color);
}
.theme__dark--color .header__multi--label__sub--menu {
  background: var(--dark-color);
}
.theme__dark--color .hero__section {
  background: url(../images/hero-dark-bg-banner.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
.theme__dark--color .featured__section--bg {
  background: var(--dark-color);
}
.theme__dark--color .featured__card {
  background: var(--dark-color);
}
.theme__dark--color .testimonial__section--bg {
  background: var(--dark-color);
}
.theme__dark--color .testimonial__card {
  background: var(--dark-color);
}
.theme__dark--color .pricing__card {
  background: var(--dark-color);
}
.theme__dark--color .newsletter__bg {
  background: url(../images/newsletter-dark-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
.theme__dark--color input::-webkit-input-placeholder {
  color: var(--white-color);
}
.theme__dark--color input::-moz-placeholder {
  color: var(--white-color);
}
.theme__dark--color input:-ms-input-placeholder {
  color: var(--white-color);
}
.theme__dark--color input:-moz-placeholder {
  color: var(--white-color);
}
.theme__dark--color .newsletter__subscribe {
  color: var(--white-color);
}
.theme__dark--color .newsletter__subscribe--input {
  background: var(--dark-color);
  color: var(--white-color);
}
.theme__dark--color .blog__card--meta__text {
  color: var(--white-color);
}
.theme__dark--color .blog__card--desc {
  color: var(--white-color);
}
.theme__dark--color .footer__bg {
  background: url(../images/footer-dark-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
.theme__dark--color .hero__section--two {
  background: url(../images/hero-dark-bg-banner2.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
.theme__dark--color .section__heading--desc {
  color: var(--white-color);
}
.theme__dark--color .home__contact--form__input--field {
  color: var(--white-color);
  background: var(--dark-color);
  border: 1px solid var(--dark-color);
}
.theme__dark--color .featured__section--bg2 {
  background: var(--dark-color);
}
.theme__dark--color .brand__logo--thumbnail__img {
  opacity: 1;
}
.theme__dark--color .counterup__section--bg {
  background: var(--dark-color);
}
.theme__dark--color .counterup__box {
  background: var(--dark-color);
}
.theme__dark--color .counterup__box--subtitle {
  color: var(--white-color);
}
.theme__dark--color .img__width--text__section {
  background: var(--dark-color);
}
.theme__dark--color .img__width--text__content--desc {
  color: var(--white-color);
}
.theme__dark--color .newsletter__bg2 {
  background: url(../images/newsletter-dark-bg2.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
.theme__dark--color .footer__bg2 {
  background: url(../images/footer-dark-bg2.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
.theme__dark--color .breadcrumb__bg {
  background: url(../images/breadcrumb-dark-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
.theme__dark--color .counterup__section--bg2 {
  background: var(--dark-color);
}
.theme__dark--color .counterup__box.style2 {
  border: none;
}
.theme__dark--color .counterup__box.style2 .counterup__box--subtitle {
  color: var(--white-color);
}
.theme__dark--color .contact__address--items {
  background: var(--dark-color);
}
.theme__dark--color .contact__form {
  background: var(--dark-color);
}
.theme__dark--color .contact__form--input {
  background: var(--dark-color);
  border: 1px solid var(--dark-color);
  color: var(--white-color);
}
.theme__dark--color textarea::-webkit-input-placeholder {
  color: var(--white-color);
}
.theme__dark--color textarea::-moz-placeholder {
  color: var(--white-color);
}
.theme__dark--color textarea:-ms-input-placeholder {
  color: var(--white-color);
}
.theme__dark--color textarea:-moz-placeholder {
  color: var(--white-color);
}
.theme__dark--color .contact__form--textarea {
  background: var(--dark-color);
  border: 1px solid var(--dark-color);
  color: var(--white-color);
}
.theme__dark--color .services__details--content__desc {
  color: var(--white-color);
}
.theme__dark--color .accordion__items--button {
  background: var(--dark-color);
}
.theme__dark--color .project__details--card__content--desc {
  color: var(--white-color);
}
.theme__dark--color .team__details--years__desc {
  color: var(--white-color);
}
.theme__dark--color .team__details--author__content {
  background: var(--dark-color);
}
.theme__dark--color .team__details--author__name {
  background: var(--dark-color);
}
.theme__dark--color .team__details--author__name--subtitle {
  color: var(--white-color);
}
.theme__dark--color .team__details--author__info--text {
  color: var(--white-color);
}
.theme__dark--color .account__login {
  background: var(--dark-color);
}
.theme__dark--color .account__login--input {
  background: var(--black-color);
  border: 1px solid var(--black-color);
  color: var(--white-color);
}
.theme__dark--color .account__login--input:focus {
  border-color: var(--secondary-color);
}
.theme__dark--color .account__login--signup__text {
  color: var(--white-color);
}
.theme__dark--color .account__login--forgot:hover {
  color: var(--white-color);
}
.theme__dark--color .single__widget.widget__bg {
  background: var(--dark-color);
}
.theme__dark--color .widget__title {
  border-bottom: 1px solid #5a5a5a;
}
.theme__dark--color .widget__search--form__input {
  background: var(--black-color);
  color: var(--white-color);
  border: 1px solid #5a5a5a;
}
.theme__dark--color .widget__search--form__input:hover {
  border-color: var(--secondary-color);
}
.theme__dark--color .widget__categories--menu__list {
  border: 1px solid #5a5a5a;
}
.theme__dark--color .widget__categories--sub__menu {
  border-top: 1px solid #5a5a5a;
}
.theme__dark--color .widget__categories--sub__menu--list {
  border-bottom: 1px solid #5a5a5a;
}
.theme__dark--color .widget__categories--sub__menu--list:last-child {
  border-bottom: 0;
}
.theme__dark--color .blog__small--artical__date {
  color: var(--white-color);
}
.theme__dark--color .widget__tagcloud--link {
  background: var(--black-color);
}
.theme__dark--color .widget__tagcloud--link:hover {
  background: var(--secondary-color);
}
.theme__dark--color .product__pagination--area {
  background: var(--dark-color);
}
.theme__dark--color .product__pagination--item {
  background: var(--black-color);
}
.theme__dark--color .product__pagination--item.current {
  background: var(--secondary-color);
}
.theme__dark--color .product__pagination--item:hover {
  background: var(--secondary-color);
}
.theme__dark--color .blog__tags--media__link {
  background: var(--dark-color);
}
.theme__dark--color .blog__tags--media__link:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
}
.theme__dark--color .reviews__comment--list {
  border-bottom: 1px solid #5a5a5a;
}
.theme__dark--color .reviews__comment--list:last-child {
  border-bottom: 0;
}
.theme__dark--color .reviews__comment--content__date2 {
  color: var(--white-color);
}
.theme__dark--color .reviews__comment--reply__input {
  background: var(--dark-color);
  border: 1px solid #5a5a5a;
}
.theme__dark--color .reviews__comment--reply__input:focus {
  border-color: var(--secondary-color);
}
.theme__dark--color .reviews__comment--reply__textarea {
  background: var(--dark-color);
  border: 1px solid #5a5a5a;
}
.theme__dark--color .reviews__comment--reply__textarea:focus {
  border-color: var(--secondary-color);
}
.theme__dark--color .blockquote__content.bg__gray--color {
  background: var(--dark-color);
} 
/* 圆形头像基础样式 + 阴影 */
.avatar-round {
  border-radius: 50%;
  max-width: 70%;
  display: block;
  margin: 0 auto;
      aspect-ratio: 1/1; object-fit: cover; /* 图片不变形、自动裁剪 */
  /* 柔和阴影（高级质感） */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 
              0 0 25px rgba(255, 255, 255, 0.3) inset;
  /* 旋转流光动画开关（默认开启） */
  animation: avatarRotateLight 6s linear infinite;
}

/* 流光旋转光效（360°渐变光环） */
@keyframes avatarRotateLight {
  0% {
    box-shadow: 0 0 10px rgba(255,255,255,0.2),
                0 8px 20px rgba(0,0,0,0.15),
                0 0 0 2px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(255,255,255,0.3),
                0 8px 20px rgba(0,0,0,0.15),
                0 0 0 4px rgba(255, 185, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 10px rgba(255,255,255,0.2),
                0 8px 20px rgba(0,0,0,0.15),
                0 0 0 2px rgba(255, 215, 0, 0.3);
  }
}
.flex{display: flex}

.flex2{display: flex;align-items: center}
/* 按钮容器 - 自动换行、居中、间距均匀 */
.featured__card--content__desc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 15px;
  justify-content: center;
  margin: 10px 0;
}

/* 产品按钮样式 - 美观、统一、质感强 */
.product-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 50px;
  background-color: #f5f5f5;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* 鼠标悬浮效果 */
.product-btn:hover {
  background-color: #ff8a00;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(255, 138, 0, 0.2);
}
.main__logo--link img{height: 70px;}

.pager {
  text-align: center;
  margin: 45px 0 0
}
.pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}
.pager ul li, .pager ul li a {
  display: inline-block
}
.pager ul li a {
  padding: 5px 15px;
  border: 1px solid #ddd;
  margin-left: -1px
}
.pager ul li a:hover {
  border-color: #f99746;
  background-color: #f99746;
  color: #fff;
}
.pager ul .active a {
  border: 1px solid #f99746;
  display: inline-block;
  background-color: #f99746;
  color: #fff
}
.pager ul a:not([href]):not([class]):hover {
  border: 1px solid #ddd;
  background-color: #fff;
  color: #333;
}
.pager ul .active a:hover {
  color: #fff;
  border: 1px solid #f99746 !important;
  background-color: #f99746 !important
}
.cpfw_xq_img {

  position: relative;

  padding-top: 90%;

  overflow: hidden;

}

.cpfw_xq_img img {

  position: absolute;

  top: 0;

  left: 0;

  -o-object-fit: cover;

  object-fit: cover;

  height: 100%;

  width: 100%;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  -moz-transition: all 1s;

  transition: all 1s;

}

.header__menu--items a.cur{color:#EA9B51}






.table th, .table td { padding:14px 18px; border-top:1px solid #ccc; }
.table th { background-color:#d9d9d9; font-size:16px; }
.table-row thead th { background-color:#d9d9d9; }
.table-row tbody th { background-color:#d9d9d9; }
.table-bordered th, .table-bordered td { border-left:1px solid #ccc; }*/
.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
.qhd-content table {
  width: 60% !important;
  max-width: 60%;
  border-collapse: collapse;
  overflow: visible;
}
.qhd-content table th, .qhd-content table td {
  padding: 14px 18px;
  text-align: left;
  border: 1px solid #ddd;
}
.qhd-content table tbody tr.trhover td {
  background-color: #f0f0f0;
}

.qhd-content table table tbody tr:first-child td {
  background-color: transparent;
  color: #333;
  font-size: 14px;
  font-weight: normal;
  border: none;
}
.qhd-content table table tbody tr td {
  padding: 0;
}
.qhd-content table tbody img[src*="file"] {
  
}
.qhd-content table tbody p {
  margin-bottom: 0;
}
.qhd-content table tbody tr.trhover table td {
  background-color: #f0f0f0;
}
.qhd-content table tbody tr:first-child table td {
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
}
.qhd-content .table {
  overflow: visible;
}
.qhd-content .table th, .qhd-content .table td {
  line-height: 1.8;
  padding: 14px 18px;
}
.qhd-content .table th {
  background-color: #0069cc;
  color: #fff;
}
.qhd-content .table td {}
.qhd-content .table tbody tr:first-child td {
  background-color: transparent;
  color: #333;
  font-size: 14px;
  font-weight: normal;
}
.qhd-content .table tbody tr.trhover td {
  background-color: #f0f0f0;
}
.qhd-content .table th {
  background-color: #0069cc;
  color: #fff;
  font-size: 16px;
}
.qhd-content .table-row thead th {
  background-color: #0069cc;
  color: #fff;
}
.qhd-content .table-row tbody th {
  background-color: #0069cc;
  color: #fff;
}
.qhd-content .table tbody .even-row td {
  background-color: #f0f0f0;
} 

/* 移动端：屏幕小于 768px 时变成 45px */
@media (max-width: 750px) {
.main__logo--link img{height: 45px;}

.wap{    height: 58px !important}

.qhd-content table {
  width: 100% !important;
  max-width: 100%;
  border-collapse: collapse;
  overflow: visible;
}

.qhd-content table th, .qhd-content table td {
  padding: 6px;
  text-align: left;
  border: 1px solid #ddd;
}


}

.cert-modal{display:none}