@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: #071642;
  --yellow-color: #2563eb;
  --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: Georgia, serif;
  --roboto-fonts: Georgia, 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-color: rgba(7, 17, 49, 0.9);
  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: 2rem;
  }
}
@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__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__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;
    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: 3rem;
  }
}
@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: 2.2rem;
  }
}
.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: 10%;
}
.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: 1.5rem;
  padding-left: 1.5rem;
}
.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 #dee2e6;
}
.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: #dee2e6;
  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: linear-gradient(135deg, #02081b 0%, #071642 50%, #062467 100%) !important;
  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: 500px;
  }
}
@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: 4rem;
    line-height: 6rem;
	color: #fff;
  }
}
@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 #dee2e6;
  background: #dee2e6;
  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: #dee2e6;
  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 */


/* Disable all decorative shapes */
.about__section--shape--bg,
.featured__section--shape--bg,
.team__section--shape--bg,
.services__section--shape--bg,
.testimonial__section--shape--bg,
.hero__section--shape--bg,
.pricing__card--shape1,
.pricing__card--shape2,
.project__section--shape--bg {
  display: none !important;
}

/* Disable decorative pseudo elements */
.about__thumbnail::before,
.about__thumbnail::after,
.featured__card::before,
.featured__card::after,
.team__card--thumbnail::before,
.team__card--thumbnail::after,
.services__card--thumbnail::before,
.services__card--thumbnail::after,
.testimonial__card::before,
.testimonial__card::after,
.pricing__card::before,
.pricing__card::after,
.project__card::before,
.project__card::after,
.counterup__box::before,
.counterup__box::after,
.blog__card--thumbnail::before,
.blog__card--thumbnail::after {
  display: none !important;
}

/* Hero centered layout adjustments */
.hero__section {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  min-height: auto !important;
}
.hero__content--desc {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 1.6rem !important;
  line-height: 2.8rem !important;
}





.hero__section {
  height: auto !important;
  min-height: auto !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* Blue hero section */
.hero__section--blue {
  background: linear-gradient(135deg, #0f172a 0%, #071642 50%, #3b82f6 100%) !important;
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
  min-height: 600px !important;
}
.hero__content--left {
  text-align: left !important;
}
.hero__content--subtitle--tag {
  font-size: 1.2rem !important;
  letter-spacing: 0.2rem !important;
  text-transform: uppercase !important;
  color: #93c5fd !important;
  margin-bottom: 2rem !important;
}
.hero__content--maintitle {
  color: #ffffff !important;
  font-size: 4rem !important;
  line-height: 1.1 !important;
  margin-bottom: 3rem !important;
}
.text-gradient {
  background: linear-gradient(90deg, #93c5fd, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__content--desc {
  color: #cbd5e1 !important;
  font-size: 1.6rem !important;
  line-height: 2.6rem !important;
  margin-bottom: 4rem !important;
}
.hero__thumbnail--tilt {
  position: relative;
  animation: float 6s ease-in-out infinite;
}
.hero__thumbnail--doc {
  background: #f8fafc;
  border-radius: 8px;
  padding: 3rem;
  transform: rotate(3deg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  position: relative;
}
.hero__thumbnail--doc--lines {
  height: 300px;
  background: repeating-linear-gradient(
    0deg,
    #e2e8f0,
    #e2e8f0 2px,
    transparent 2px,
    transparent 20px
  );
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.hero__section--blue {
  background: #0f172a !important;
}

/* Document style */
.hero__thumbnail--doc {
  background: #f8fafc;
  border-radius: 8px;
  padding: 3rem;
  transform: rotate(3deg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  position: relative;
  font-family: Georgia,  serif;
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: #1e293b;
}
.doc-line {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.3rem;
}
.line-num {
  color: #94a3b8;
  width: 2rem;
  text-align: right;
  flex-shrink: 0;
}
.line-text {
  flex: 1;
}
.doc-stamp {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 100px;
  height: 100px;
  border: 3px solid rgba(30, 58, 138, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: rgba(30, 58, 138, 0.6);
  transform: rotate(-15deg);
}

/* Typewriter effect */
.doc-line {
  opacity: 0;
  animation: typeLine 0.5s forwards;
}
@keyframes typeLine {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.doc-line:nth-child(1) { animation-delay: 0.2s; }
.doc-line:nth-child(2) { animation-delay: 0.4s; }
.doc-line:nth-child(3) { animation-delay: 0.6s; }
.doc-line:nth-child(4) { animation-delay: 0.8s; }
.doc-line:nth-child(5) { animation-delay: 1.0s; }
.doc-line:nth-child(6) { animation-delay: 1.2s; }
.doc-line:nth-child(7) { animation-delay: 1.4s; }
.doc-line:nth-child(8) { animation-delay: 1.6s; }
.doc-line:nth-child(9) { animation-delay: 1.8s; }
.doc-line:nth-child(10) { animation-delay: 2.0s; }
.doc-line:nth-child(11) { animation-delay: 2.2s; }
.doc-line:nth-child(12) { animation-delay: 2.4s; }
.doc-line:nth-child(13) { animation-delay: 2.6s; }
.doc-line:nth-child(14) { animation-delay: 2.8s; }
.doc-line:nth-child(15) { animation-delay: 3.0s; }
.doc-line:nth-child(16) { animation-delay: 3.2s; }
.doc-line:nth-child(17) { animation-delay: 3.4s; }
.doc-line:nth-child(18) { animation-delay: 3.6s; }
.doc-line:nth-child(19) { animation-delay: 3.8s; }
.doc-line:nth-child(20) { animation-delay: 4.0s; }
.doc-line:nth-child(21) { animation-delay: 4.2s; }
.doc-line:nth-child(22) { animation-delay: 4.4s; }
.doc-line:nth-child(23) { animation-delay: 4.6s; }

/* Nyla style hero */
.hero__section--blue {
  background: #071642  !important;
  padding-top: 4rem !important;
  padding-bottom: 1rem !important;
  min-height: 600px !important;
}
.btn-white {
  background: #ffffff !important;
  color: #071642 !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 1.2rem 2.5rem !important;
  font-weight: 600 !important;
}
.btn-outline {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 50px !important;
  padding: 1.2rem 2.5rem !important;
  font-weight: 600 !important;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.5) !important;
}
.doc-line {
  opacity: 0;
  animation: typeLine 0.3s forwards;
}
.doc-line:nth-child(1) { animation-delay: 0.5s; }
.doc-line:nth-child(2) { animation-delay: 0.8s; }
.doc-line:nth-child(3) { animation-delay: 1.0s; }
.doc-line:nth-child(4) { animation-delay: 1.3s; }
.doc-line:nth-child(5) { animation-delay: 1.5s; }
.doc-line:nth-child(6) { animation-delay: 1.8s; }
.doc-line:nth-child(7) { animation-delay: 2.1s; }
.doc-line:nth-child(8) { animation-delay: 2.4s; }
.doc-line:nth-child(9) { animation-delay: 2.7s; }
.doc-line:nth-child(10) { animation-delay: 2.9s; }
.doc-line:nth-child(11) { animation-delay: 3.2s; }
.doc-line:nth-child(12) { animation-delay: 3.5s; }
.doc-line:nth-child(13) { animation-delay: 3.8s; }
.doc-line:nth-child(14) { animation-delay: 4.0s; }
.doc-line:nth-child(15) { animation-delay: 4.3s; }
.doc-line:nth-child(16) { animation-delay: 4.6s; }
.doc-line:nth-child(17) { animation-delay: 4.9s; }
.doc-line:nth-child(18) { animation-delay: 5.1s; }
.doc-line:nth-child(19) { animation-delay: 5.4s; }
.doc-line:nth-child(20) { animation-delay: 5.7s; }
.doc-line:nth-child(21) { animation-delay: 6.0s; }
.doc-line:nth-child(22) { animation-delay: 6.3s; }
.doc-line:nth-child(23) { animation-delay: 6.6s; }
@keyframes typeLine {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero__section--blue {
  padding-top: 0 !important;
}

.hero__section--blue {
  padding-top: 8rem !important;
}

.hero__section--blue {
  padding-top: 5rem !important;
}

.hero__thumbnail--doc {
  transform: rotate(3deg) scale(0.7) !important;
  transform-origin: top left !important;
}

.hero__thumbnail--doc {
  margin-top: 30px !important;
}

.hero__thumbnail--doc {
  margin-top: 80px !important;
}

.hero__thumbnail--doc {
  margin-left: 50px !important;
}

.hero__thumbnail--doc {
  width: calc(100% + 80px) !important;
}

.hero__thumbnail--doc {
  min-height: calc(100% + 20px) !important;
}

.hero__thumbnail--doc {
  min-height: calc(100% + 50px) !important;
}

.hero__thumbnail--doc {
  transform: rotate(3deg) scale(0.85) !important;
}

/* Nav white text */
.header__menu--link {
  color: #ffffff !important;
}
.header__logo--text {
  color: #ffffff !important;
}

/* Sub menu dark text */
.header__sub--menu {
  background: #ffffff !important;
}
.header__sub--menu__link {
  color: #071642 !important;
}
.header__sub--menu__link:hover {
  color: #4338ca !important;
}

/* Header dark background */
.header, .header__bottom {
  background: #071642 !important;
}

/* Header hover dark background */
.header:hover, .header__bottom:hover {
  background: #071642 !important;
}
.header:hover .header__menu--link,
.header:hover .header__logo--text {
  color: #ffffff !important;
}


.header__section .header__menu--link {
  color: #ffffff !important;
}
.header__section .header__logo--text {
  color: #ffffff !important;
}



/* Restore header */
.header__section {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  background: #ffffff !important;
}
.header__section .header__menu--link {
  color: #1e293b !important;
}
.header__section .header__logo--text {
  color: #1e293b !important;
}

.header__section {
  background: #040e2c !important;
}
.header__section .header__menu--link {
  color: #ffffff !important;
}
.header__section .header__logo--text {
  color: #ffffff !important;
}

/* Get Started button style */
.header__get--started__btn {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 50px !important;
  padding: 1.2rem 2.5rem !important;
  font-weight: 600 !important;
}
.header__get--started__btn:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.5) !important;
}

.header__get--started__btn {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 50px !important;
  padding: 1.2rem 2.5rem !important;
  font-weight: 600 !important;
}

.hero__content--footer {
  justify-content: flex-start !important;
}
.hero__content--btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.header__get--started__btn {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 50px !important;
  padding: 1.2rem 2.5rem !important;
  font-weight: 600 !important;
}

.header__logo--text {
  font-size: 3.2rem !important;
  font-weight: bold !important;
  color: #ffffff !important;
}

/* Nav hover underline */
.header__menu--link {
  position: relative;
}
.header__menu--link:hover {
  color: #d6d3d3 !important;
}
.header__menu--link:hover::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #d6d3d3;
}

.header__menu--link {
  font-weight: 600 !important;
}

/* About section style */
.about__content--title {
  color: #071642 !important;
  font-size: 2.6rem !important;
  line-height: 1.2 !important;
}
.hero__content--subtitle--tag {
  color: #4338ca !important;
}

/* Learn More button style — pill outline, matches Get Started */
.btn-blue {
  background: transparent !important;
  color: #071642 !important;
  border: 1px solid #f2f7fb !important;
  border-radius: 50px !important;
  padding: 1.2rem 2.5rem !important;
  font-weight: 600 !important;
  width: 33.33% !important;
  margin-left: auto !important;
  text-align: center !important;
}
.btn-blue:hover {
  background: #071642 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.5) !important;
}


/* Get Started button vertical center fix */
.header__get--started__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  height: auto !important;
}

/* === Blog section swiper fix === */
.blog__swiper--activation { position: relative; }
.blog__swiper--activation .swiper__nav--btn {
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}
.blog__swiper--activation:hover .swiper__nav--btn {
    opacity: 1;
    visibility: visible;
}
.blog__swiper--activation .swiper__nav--btn.swiper-button-prev { left: 10px; }
.blog__swiper--activation .swiper__nav--btn.swiper-button-next { right: 10px; }
.blog__card--meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.blog__card--meta__text { display: flex; align-items: center; gap: 0.3rem; }
.blog__card--meta__icon { width: 14px; height: 14px; flex-shrink: 0; }
.blog__card--thumbnail { position: relative; overflow: hidden; }
.blog__card--thumbnail__img { width: 100%; transition: transform 0.4s ease; }
.blog__card:hover .blog__card--thumbnail__img { transform: scale(1.05); }

/* === Blog section full styles === */
.blog__section--bg {
    background: #ffffff;
}
.blog__card--btn.primary__btn {
    background: var(--secondary-color);
    color: #fff;
    border: none;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.3rem;
    padding: 0 1.5rem;
    height: 3.8rem;
    line-height: 3.8rem;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.3s ease;
}
.blog__card--btn.primary__btn:hover {
    background: var(--primary-color);
    color: #fff;
}
.blog__card--meta__icon {
    color: var(--secondary-color);
    margin-right: 5px;
}
.blog__swiper--activation .swiper-slide {
    height: auto;
}
/* === Tighten gap below News section: remove blog section bottom padding === */
.blog__section {
  padding-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .blog__section {
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 992px) {
  .blog__section {
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .blog__section {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 1600px) {
  .blog__section {
    padding-bottom: 0;
  }
}

/* === Shrink footer top padding to tighten the gap below News section === */
.main__footer {
  padding-top: 2rem;
}
@media only screen and (min-width: 768px) {
  .main__footer {
    padding-top: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .main__footer {
    padding-top: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .main__footer {
    padding-top: 3rem;
  }
}
@media only screen and (min-width: 1600px) {
  .main__footer {
    padding-top: 3.5rem;
  }
}

/* === Fix: swiper-slide height:100% stretches slides; force auto height to remove blank gap below News cards === */
.blog__section .swiper-slide {
  height: auto !important;
}
.blog__section .swiper-wrapper {
  height: auto !important;
}

/* === Footer background: replace footer-bg.webp with solid blue #071642, lighten footer text === */
.footer__bg {
  background: #071642 !important;
  background-image: none !important;
}
.main__footer,
.main__footer p,
.main__footer a,
.main__footer li,
.main__footer span,
.main__footer h3,
.main__footer h4,
.footer__bottom,
.footer__bottom p,
.footer__bottom a {
  color: #ffffff !important;
}

/* === Footer logo: text "YouthSync" matching header logo === */
.footer__logo--text {
  font-size: 3.2rem;
  font-weight: bold;
  font-family: var(--rubik-fonts);
  color: #ffffff !important;
  line-height: 1;
}

/* === About page: Mission section background solid blue #071642, white text === */
.counterup__section--bg2 {
  background: #071642 !important;
  background-image: none !important;
}
.counterup__section--bg2,
.counterup__section--bg2 h1,
.counterup__section--bg2 h2,
.counterup__section--bg2 h3,
.counterup__section--bg2 h4,
.counterup__section--bg2 p,
.counterup__section--bg2 span,
.counterup__section--bg2 a {
  color: #ffffff !important;
}



/* === About page: Our Values and Our Partners sections === */
.our__values__section {
  background: #f8f9fc;
}
.values__card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 3rem 2.5rem;
  height: 100%;
  box-shadow: 0 0.5rem 2rem rgba(30, 58, 138, 0.06);
  transition: all 0.3s ease;
}
.values__card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 1rem 2.5rem rgba(30, 58, 138, 0.12);
}
.values__card--icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.8rem;
  background: #071642;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.8rem;
}
.values__card--title {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
}
.values__card--desc {
  color: #475569;
  line-height: 2.6rem;
  margin-bottom: 0;
}

.our__partners__section {
  background: #071642;
}
.our__partners__section .section__heading--maintitle {
  color: #ffffff;
}
.partner__card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  min-height: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}
.partner__card:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* === Testimonial card hover: frosted blue glass === */
.testimonial__card {
  transition: all 0.4s ease;
}
.testimonial__card:hover {
  background: rgba(30, 58, 138, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(30, 58, 138, 0.92) !important;
}
.testimonial__card:hover .testimonial__content--title,
.testimonial__card:hover .testimonial__content--subtitle,
.testimonial__card:hover .testimonial__content--desc,
.testimonial__card:hover .rating__list--icon {
  color: #ffffff !important;
}
/* hide the old ::before overlay since we use card bg directly */
.testimonial__card::before {
  display: none !important;
}

/* === Testimonial swiper: shrink slide height to match cards === */
.testimonial__inner.swiper,
.testimonial__inner .swiper-wrapper,
.testimonial__inner .swiper-slide {
  height: auto !important;
}
.testimonial__inner .swiper-slide {
  min-height: 0 !important;
}
.testimonial__section--bg.section--padding {
  padding-top: 4rem !important;
  padding-bottom: 3rem !important;
}

/* === Testimonial section: blue gradient background === */
.testimonial__section--bg {
  background: linear-gradient(135deg, #02081b 0%, #071642 50%, #062467 100%) !important;
}
.testimonial__section--bg .section__heading--maintitle,
.testimonial__section--bg .section__heading--subtitle {
  color: #ffffff !important;
}
.testimonial__section--bg .section__heading--subtitle {
  color: rgba(255,255,255,0.85) !important;
}

/* === Offcanvas mobile logo text === */
.offcanvas__logo--text {
  font-size: 2.8rem;
  font-weight: bold;
  color: #071642;
  font-family: Georgia, "Times New Roman", serif;
}

/* === Hamburger menu icon white === */
.offcanvas__header--menu__open--svg path {
  stroke: #ffffff !important;
}
.offcanvas__header--menu__open--btn {
  color: #ffffff !important;
}

/* === About page content: wider letter spacing === */
.about__content,
.about__content p,
.about__content--desc,
.about__details,
.single__details,
.single__details p,
.paragraph,
.entry__content,
.entry__content p {
  letter-spacing: 0.08em !important;
}

/* === About Mission section: reduce whitespace, constrain text width === */
.counterup__section--bg2 .section__heading--desc {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.counterup__section--bg2.section--padding {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

/* === Mission section: larger font === */
.counterup__section--bg2 .section__heading--desc {
  font-size: 1.8rem !important;
  line-height: 1.9 !important;
}
.counterup__section--bg2 .section__heading--maintitle {
  font-size: 3.6rem !important;
}

/* === Mission section: indent each paragraph === */
.counterup__section--bg2 .section__heading--desc {
  text-indent: 2em;
  text-align: center;
  padding-left: 1rem;
}

/* === Fix: footer widget title underline divider === */
.footer__widget--title::before {
  background: #071642 !important;
  width: 5rem !important;
  height: 0.2rem !important;
}

/* === Fix: footer bottom divider line === */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* === Fix: testimonial cards on dark blue bg need visible card frame + white text === */
.testimonial__section--bg .testimonial__card {
  background: rgba(255, 255, 255, 0.08) !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}
.testimonial__section--bg .testimonial__card:hover {
  background: rgba(30, 58, 138, 0.92) !important;
  border-color: #f99746 !important;
}
.testimonial__section--bg .testimonial__content--title,
.testimonial__section--bg .testimonial__content--subtitle,
.testimonial__section--bg .testimonial__content--desc,
.testimonial__section--bg .rating__list--icon {
  color: #ffffff !important;
}


/* === Fix: blog list page left/right padding === */
.blog__section .container-fluid {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* === Fix: blog sidebar match html746 exactly === */
.blog__sidebar--widget .widget__search--form input.widget__search--form__input.border-0 {
  width: 100% !important;
  height: 4.5rem !important;
  padding: 0 6rem 0 1.2rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid var(--border-color2) !important;
  background: var(--white-color) !important;
  border-top-width: 1px !important;
  border-right-width: 1px !important;
  border-bottom-width: 1px !important;
  border-left-width: 1px !important;
}
.blog__sidebar--widget .widget__search--form__input:focus {
  border-color: var(--secondary-color) !important;
  outline: none !important;
}
.blog__sidebar--widget .widget__search--form__btn {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  border: 0 !important;
  background: var(--secondary-color) !important;
  color: var(--white-color) !important;
  padding: 0 !important;
  width: 4.5rem !important;
  height: 100% !important;
  border-radius: 0 0.5rem 0.5rem 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.blog__sidebar--widget .widget__categories--menu__list {
  margin-bottom: 0.8rem !important;
}
.blog__sidebar--widget .widget__categories--menu__label {
  cursor: pointer !important;
  padding: 0.8rem 1rem !important;
  background: var(--white-color) !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 0.5rem !important;
  transition: var(--transition) !important;
  margin-bottom: 0 !important;
}
.blog__sidebar--widget .widget__categories--menu__label:hover {
  color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}
.blog__sidebar--widget .widget__title {
  font-weight: 700 !important;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid var(--border-color2) !important;
  padding-bottom: 1rem !important;
}
.blog__sidebar--widget .single__widget {
  background: var(--white-color) !important;
  border-radius: 0.5rem !important;
  padding: 2rem !important;
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 2.5rem !important;
}


/* === Force: search input style override border-0 === */
div.blog__sidebar--widget form.widget__search--form input.widget__search--form__input {
  width: 100% !important;
  height: 4.5rem !important;
  padding: 0 6rem 0 1.2rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid #dee2e6 !important;
  background: #ffffff !important;
}

/* === Fix: blog details page left/right padding === */
.blog__details--section .container-fluid {
  padding-left: 40px !important;
  padding-right: 40px !important;
}


/* ===== Testimonial 图片大小调整为 150px ===== */
.testimonial__card--thumbnail {
  width: 180px !important;
}
.testimonial__author {
  width: calc(100% - 150px) !important;
}

/* === Fix: 分页样式统一 === */
.product__pagination--area {
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1) !important;
  padding: 2rem 0 !important;
  margin-top: 3rem !important;
  border-radius:10px;
}
.pagination .product__pagination--wrapper {
  gap: 0.8rem !important;
}
.pagination .product__pagination--wrapper li a,
.pagination .product__pagination--wrapper li span {
  width: 3.5rem !important;
  height: 3.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #dee2e6 !important;
  font-weight: 600 !important;
  transition: all 0.3s !important;
}
.pagination .product__pagination--wrapper li a:hover,
.pagination .product__pagination--wrapper li span:hover {
  background: var(--secondary-color) !important;
  color: #ffffff !important;
  border-color: var(--secondary-color) !important;
}
.pagination .product__pagination--wrapper li.active a,
.pagination .product__pagination--wrapper li.active span {
  background: #071642 !important;
  color: #ffffff !important;
  border-color: #071642 !important;
}



/* === Fix: 分页 Previous/Next 改成左右箭头 === */
.pagination li.previous a,
.pagination li.next a,
.pagination li.previous span,
.pagination li.next span {
  font-size: 0 !important;
  position: relative !important;
}
.pagination li.previous a::before,
.pagination li.previous span::before {
  content: "←" !important;
  font-size: 1.6rem !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.pagination li.next a::before,
.pagination li.next span::before {
  content: "→" !important;
  font-size: 1.6rem !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* === Fix: 分页 Previous/Next 改成箭头（强制） === */
.product__pagination--wrapper li:first-child a,
.product__pagination--wrapper li:last-child a {
  font-size: 0 !important;
  position: relative !important;
}
.product__pagination--wrapper li:first-child a::before {
  content: "‹" !important;
  font-size: 2.5rem !important;
  font-weight: bold !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #000000 !important;
}
.product__pagination--wrapper li:last-child a::before {
  content: "›" !important;
  font-size: 2.5rem !important;
  font-weight: bold !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #000000 !important;
}

/* === Fix: 分页选中后字体不要变白 === */
.product__pagination--wrapper li.active a {
  color: #000000 !important;
}

/* === Fix: 分页所有字体强制黑色 === */
.product__pagination--wrapper li a,
.product__pagination--wrapper li span,
.product__pagination--wrapper li.active a,
.product__pagination--wrapper li.active span {
  color: #000000 !important;
}

/* === Fix: Project 页面样式 === */
.project__section .container {
  padding-left: 30px !important;
  padding-right: 30px !important;
  max-width: 100% !important;
}
.project__page--section__inner .row {
  margin: 0 !important;
}
.project__page--section__inner .col-lg-6,
.project__page--section__inner .col-lg-3,
.project__page--section__inner .col-md-6,
.project__page--section__inner .col-md-3,
.project__page--section__inner .col-sm-8,
.project__page--section__inner .col-sm-4,
.project__page--section__inner .col-sm-6,
.project__page--section__inner .col-8,
.project__page--section__inner .col-4,
.project__page--section__inner .col-6 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.project__card--thumbnail__link {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}
.project__card--thumbnail__img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.project__card--content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 2rem !important;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent) !important;
}

/* === Team 页面样式 === */
.team__member--card {
  background: #ffffff;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
}
.team__member--card:hover {
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transform: translateY(-5px);
}
.team__member--thumbnail {
  width: 100%;
  overflow: hidden;
}
.team__member--img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.team__member--info {
  padding: 1.5rem;
}
.team__member--name {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.5rem;
}
.team__member--position {
  font-size: 1.4rem;
  color: #666666;
  margin: 0;
}

/* === Team 页面样式更新 === */
.team__page__section .section__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 4rem;
  margin-bottom: 8rem;
}
.team__page__section .section__heading::before,
.team__page__section .section__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}
.team__member--card {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
}
.team__member--card:hover {
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transform: translateY(-5px);
}
.team__member--thumbnail {
  width: 100%;
  overflow: hidden;
  padding: 1.5rem 1.5rem 0 1.5rem;
}
.team__member--img {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: cover;
  border-radius: 0.25rem;
}
.team__member--info {
  padding: 1.5rem;
  background-color: #f8f7f7;
}
.team__member--position {
  font-size: 1.2rem;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}
.team__member--name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333333;

}
.team__member--desc {
  font-size: 1.4rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

/* === Project 页面左右边距 30px === */
.project__section .container {
  padding-left: 30px !important;
  padding-right: 30px !important;
  max-width: 100% !important;
}

/* === Program 页面样式 === */
.program__card {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
}
.program__card:hover {
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transform: translateY(-5px);
}
.program__card--thumbnail {
  width: 100%;
  overflow: hidden;
  padding: 1.5rem 1.5rem 0 1.5rem;
}
.program__card--thumbnail a {
  display: block;
  width: 100%;
}
.program__card--thumbnail img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}
.program__card--content {
  padding: 1.5rem;
  background-color: #f8f7f7;
}
.program__card--item {
  margin-bottom: 1rem;
}
.program__card--label {
  font-size: 1.3rem;
  color: #666666;
  display: block;
  margin-bottom: 0.3rem;
}
.program__card--title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
}
.program__card--title a {
  color: #333333;
  text-decoration: none;
}
.program__card--time {
  font-size: 1.4rem;
  color: #333333;
  font-weight: 500;
}
.program__card--desc {
  font-size: 1.3rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

/* === 首页 News & Article 三个卡片加灰色线条框（与 Programs 页一致） === */
.blog__section--bg .blog__card {
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    background: #f2f7fb !important;
    overflow: hidden !important;
}

/* === 首页 News & Article 三张图片固定 300x400 === */
.blog__section--bg .blog__card--thumbnail {
    width: 300px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}
.blog__section--bg .blog__card--thumbnail__img,
.blog__section--bg .blog__card--thumbnail img {
    width: 300px !important;
    height: 400px !important;
    object-fit: cover !important;
}

/* === 首页 News & Article 图片：高度400px，宽度自适应 === */
.blog__section--bg .blog__card--thumbnail {
    width: 100% !important;
    margin: 0 !important;
}
.blog__section--bg .blog__card--thumbnail__img,
.blog__section--bg .blog__card--thumbnail img {
    width: 100% !important;
    height: 400px !important;
    object-fit: cover !important;
}

/* === 首页 News & Article 图片缩小5%（高度400->380） === */
.blog__section--bg .blog__card--thumbnail__img,
.blog__section--bg .blog__card--thumbnail img {
    height: 380px !important;
}

/* Program heading with side lines */
.program-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 4rem;
  margin-bottom: 8rem;
}
.program-heading::before,
.program-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}
.program-heading > span {
  display: none !important;
}
/* Breadcrumb competition title */
.breadcrumb-competition-title {
  font-size: 28px !important;
  font-weight: 400;
  margin-top: 10px;
}
/* Essay submit button center alignment */
.essay-submit-wrapper {
  justify-content: center !important;
}
/* Read Article Button */
.read-article-btn-wrap {
  margin-top: 20px;
}
.read-article-btn {
  display: inline-block;
  padding: 7px 24px;
  background: #071642;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.read-article-btn:hover {
  background: #1e3a8a;
  color: #fff;
  transform: translateY(-2px);
}
/* Contact breadcrumb title decoration line */
.contact-breadcrumb-title {
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
}
.contact-breadcrumb-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: #38bdf8;
}
/* Contact page border fixes */
.contact__address--items {
  border: 1px solid #e5e7eb !important;
}
.contact__form--input,
.contact__form--textarea {
  border: 1px solid #d1d5db !important;
  background: #fff !important;
}
.contact__form--input:focus,
.contact__form--textarea:focus {
  border-color: #3b82f6 !important;
  outline: none;
}
.contact__form--btn {
  background: #071642 !important;
  border: none !important;
  color: #fff !important;

  border-radius: 8px !important;
  font-weight: 600 !important;
}
/* Contact form label spacing fix */
.contact__form--label {
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
  color: #1a1a2e !important;
}
.contact__form--label__star {
  color: #ef4444 !important;
  margin-left: 2px;
}
/* Contact address cards style */
.contact__address--items {
  background: #f8fafc !important;
  border: 1px solid #3b82f6 !important;
}
.contact__address--icon svg {
  stroke: #3b82f6 !important;
}
/* Contact address cards style v2 */
.contact__address--items {
  background: #f1f5f9 !important;
  border: 1px solid #4b5563 !important;
}
.contact__address--icon svg {
  stroke: #4b5563 !important;
}
/* Contact address section background */
.contact__address--section {
  background: #e5e7eb !important;
  padding: 60px 0 !important;
}
/* Contact address cards color - dark blue */
.contact__address--items {
  border: 1px solid #071642 !important;
}
.contact__address--icon svg {
  stroke: #071642 !important;
}
/* Contact form button spacing */
.contact__form--btn {
  margin-top: 10px !important;
}
/* Hide swiper loading spinner flash */
.swiper::before,
.swiper::after {
    display: none !important;
}
.swiper-button-next,
.swiper-button-prev {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.swiper.swiper-initialized .swiper-button-next,
.swiper.swiper-initialized .swiper-button-prev {
    opacity: 1;
}
/* === Fix: mobile offcanvas drawer: translucent blue bg, white text === */
.offcanvas-header {
  background: rgba(7, 22, 66, 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  height: auto !important;
  max-height: 100vh;
  padding-bottom: 0 !important;
}
.offcanvas__menu_item {
  color: #ffffff !important;
  font-weight: 600;
}
.offcanvas__menu_item:hover {
  color: #7dd3fc !important;
}
.offcanvas__close--btn {
  color: #ffffff !important;
}
.offcanvas__close--btn::before,
.offcanvas__close--btn::after {
  background: #ffffff !important;
}
.offcanvas__menu_li {
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
body.mobile_menu_open::before {
  position: fixed !important;
  content: "";
  background: #000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9998 !important;
  opacity: 0.4;
}

/* Move hero doc card further left via transform */
.hero__thumbnail--doc {
  transform: rotate(3deg) scale(0.85) translateX(-30px) !important;
}