@charset "UTF-8";
/*
  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.5rem;
  --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);
}
@media only screen and (max-width: 767px) {
  body {
    line-height: 2.4rem;
    font-size: 1.4rem;
  }
}

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: 1.8rem;
}
@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: 1200px;
  }
}
.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(../img/icon/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(../img/icon/right-arrow-angle.webp);
}

.swiper-pagination {
  bottom: 0 !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: 300px;
  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: 20px 15px;
}

.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: 380px;
}

.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: 1.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;
  }
}
.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(../img/hero/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(../img/hero/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 {
    text-align: center;
  }
}
.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(../img/other/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: 1.5rem;
  position: absolute;
  z-index: 9;
  bottom: 4rem;
  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: 2rem 2.2rem;
  }
}
.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: 2.3rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .team__card--content__title {
    font-size: 2.8rem;
    line-height: 3rem;
  }
}
.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(../img/other/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(../img/banner/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(../img/banner/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(../img/banner/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(../img/banner/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: 13rem 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;
  }
}
.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: 4rem 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(../img/banner/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(../img/banner/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: 460px;
  }
}

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

@media only screen and (max-width: 575px) {
  .blog__details--content {
    text-align: center;
  }
}
.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(../img/hero/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(../img/banner/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(../img/banner/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(../img/hero/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(../img/banner/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(../img/banner/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(../img/banner/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);
} /*# sourceMappingURL=style.css.map */