/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
:root {
  --theme-color: #C90F16;
  --body-bg: #ffffff;
  --body-color: #696969;
  --title-color: #16171A;
  --secondary-color: #F2EDEB;
  --smoke-color: #ECF0F8;
  --light-color: #f8f9fa;
  --black-color: #000000;
  --white-color: #ffffff;
  --yellow-color: #FFB303;
  --success-color: #28a745;
  --error-color: #dc3545;
  --border-color: #D8DDE1;
  --title-font: "Raleway", serif;
  --body-font: "DM Sans", serif;
  --icon-font: "Font Awesome 5 Pro";
  --main-container: 1320px;
  --container-gutters: 30px;
  --section-space: 120px;
  --section-space-mobile: 80px;
  --section-title-space: 60px;
  --ripple-ani-duration: 5s;
}

/*------------------- 1.2. Function -------------------*/
/*------------------- 1.3. Variable-------------------*/
/*------------------- 1.5. Typography -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
html,
body {
  scroll-behavior: auto !important;
}

body {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--body-color);
  background-color: var(--body-bg);
  line-height: 28px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

iframe {
  border: none;
  width: 100%;
}

.slick-slide:focus,
button:focus,
a:focus,
a:active,
input,
input:hover,
input:focus,
input:active,
textarea,
textarea:hover,
textarea:focus,
textarea:active {
  outline: none;
}

input:focus {
  outline: none;
  box-shadow: none;
}

img:not([draggable]),
embed,
object,
video {
  max-width: 100%;
  height: auto;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--border-color);
}

th {
  font-weight: 700;
  color: var(--title-color);
}

td,
th {
  border: 1px solid var(--border-color);
  padding: 9px 12px;
}

a {
  color: var(--theme-color);
  text-decoration: none;
  outline: 0;
  transition: all ease 0.4s;
}
a:hover {
  color: var(--title-color);
}
a:active, a:focus, a:hover, a:visited {
  text-decoration: none;
  outline: 0;
}

button {
  transition: all ease 0.4s;
}

img {
  border: none;
  max-width: 100%;
}

ins {
  text-decoration: none;
}

pre {
  background: #f5f5f5;
  color: #666;
  font-size: 14px;
  margin: 20px 0;
  overflow: auto;
  padding: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

span.ajax-loader:empty,
p:empty {
  display: none;
}

p {
  margin: 0 0 18px 0;
  color: var(--body-color);
  line-height: 1.63;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
p a,
span a {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5,
.h6,
h6 {
  font-family: var(--title-font);
  color: var(--title-color);
  text-transform: none;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 15px 0;
}

.h1,
h1 {
  font-size: 48px;
}

.h2,
h2 {
  font-size: 40px;
}

.h3,
h3 {
  font-size: 36px;
}

.h4,
h4 {
  font-size: 30px;
}

.h5,
h5 {
  font-size: 24px;
}

.h6,
h6 {
  font-size: 20px;
}

/* Large devices */
@media (max-width: 1199px) {
  .h1,
  h1 {
    font-size: 40px;
  }
  .h2,
  h2 {
    font-size: 36px;
  }
  .h3,
  h3 {
    font-size: 30px;
  }
  .h4,
  h4 {
    font-size: 24px;
  }
  .h5,
  h5 {
    font-size: 20px;
  }
  .h6,
  h6 {
    font-size: 16px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .h1,
  h1 {
    font-size: 36px;
  }
  .h2,
  h2 {
    font-size: 30px;
  }
  .h3,
  h3 {
    font-size: 26px;
  }
  .h4,
  h4 {
    font-size: 22px;
  }
  .h5,
  h5 {
    font-size: 18px;
  }
  .h6,
  h6 {
    font-size: 16px;
  }
}
/*------------------- 1.6. Extend -------------------*/
/*------------------- 1.7. Wordpress Default -------------------*/
/*=================================
    02. Reset
==================================*/
/*------------------- 2.1. Container -------------------*/
@media only screen and (min-width: 1300px) {
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: calc(var(--main-container) + var(--container-gutters));
    padding-left: calc(var(--container-gutters) / 2);
    padding-right: calc(var(--container-gutters) / 2);
  }
}
@media only screen and (max-width: 1600px) {
  .container-fluid.px-0 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .container-fluid.px-0 .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}
@media (min-width: 1700px) {
  .container-style1 {
    overflow: hidden;
    width: calc(var(--main-container) + 18rem);
  }
  .container-style1 .slick-list {
    padding-left: 0 !important;
  }
}
@media (min-width: 1199px) {
  .container-style2 {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
}
@media (max-width: 1199px) {
  .container-style3 {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
}
/*------------------- 2.2. Grid -------------------*/
@media (min-width: 767px) {
  .row:not([class*=gx-]) {
    --bs-gutter-x: 30px;
  }
}
.gy-gx {
  --bs-gutter-y: var(--bs-gutter-x);
}

.gy-30 {
  --bs-gutter-y: 30px;
}

@media (min-width: 1500px) {
  .gx-100 {
    --bs-gutter-x: 100px;
  }
  .gx-60 {
    --bs-gutter-x: 60px;
  }
  .gx-25 {
    --bs-gutter-x: 25px;
  }
  .gx-45 {
    --bs-gutter-x: 45px;
  }
  .gx-40 {
    --bs-gutter-x: 40px;
  }
  .gx-80 {
    --bs-gutter-x: 80px;
  }
  .gx-85 {
    --bs-gutter-x: 85px;
  }
}
/*------------------- 2.3. Input -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
select,
.form-control,
.form-select,
textarea,
input {
  height: 55px;
  padding: 0 45px 0 25px;
  border: none;
  color: var(--body-color);
  background-color: var(--secondary-color);
  border-radius: 9999px;
  border-radius: 0;
  font-size: 16px;
  width: 100%;
}
select:focus,
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
  outline: 0;
  box-shadow: none;
  background-color: var(--secondary-color);
}
select::-moz-placeholder,
.form-control::-moz-placeholder,
.form-select::-moz-placeholder,
textarea::-moz-placeholder,
input::-moz-placeholder {
  color: var(--body-color);
}
select::-moz-placeholder, .form-control::-moz-placeholder, .form-select::-moz-placeholder, textarea::-moz-placeholder, input::-moz-placeholder {
  color: var(--body-color);
}
select::placeholder,
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--body-color);
}

.form-select,
select {
  display: block;
  width: 100%;
  line-height: 1.5;
  vertical-align: middle;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 26px center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

textarea.form-control,
textarea {
  min-height: 150px;
  padding-top: 16px;
  padding-bottom: 17px;
  border-radius: 0;
}

input[type=checkbox] {
  visibility: hidden;
  opacity: 0;
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  display: none;
}
input[type=checkbox]:checked ~ label:before {
  content: "\f00c";
  color: var(--white-color);
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}
input[type=checkbox] ~ label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  display: block;
}
input[type=checkbox] ~ label:before {
  content: "";
  font-family: var(--icon-font);
  font-weight: 700;
  position: absolute;
  left: 0px;
  top: 3.5px;
  background-color: var(--body-bg);
  border: 1px solid var(--border-color);
  height: 18px;
  width: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
}

input[type=radio] {
  visibility: hidden;
  opacity: 0;
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  display: none;
}
input[type=radio] ~ label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  line-height: 1;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 0;
}
input[type=radio] ~ label::before {
  content: "\f111";
  position: absolute;
  font-family: var(--icon-font);
  left: 0;
  top: -2px;
  width: 20px;
  height: 20px;
  padding-left: 0.5px;
  font-size: 0.4em;
  line-height: 18.95px;
  text-align: center;
  border: 1px solid var(--theme-color);
  border-radius: 100%;
  font-weight: 700;
  background: var(--body-bg);
  color: transparent;
  transition: all 0.2s ease;
}
input[type=radio]:checked ~ label::before {
  border-color: var(--theme-color);
  background-color: var(--theme-color);
  color: var(--white-color);
}

label {
  margin-bottom: 0.5em;
  margin-top: -0.3em;
  display: block;
  color: var(--title-color);
  font-family: var(--body-font);
  font-size: 16px;
}

.form-group {
  margin-bottom: var(--bs-gutter-x);
  position: relative;
}
.form-group > i {
  position: absolute;
  right: calc(var(--bs-gutter-x) / 2 + 30px);
  top: 19px;
  font-size: 16px;
  color: #A0ABB4;
}
.form-group.has-label > i {
  top: 50px;
}

textarea.is-invalid,
select.is-invalid,
input.is-invalid,
.was-validated input:invalid {
  border: 1px solid var(--error-color) !important;
  background-position: right calc(0.375em + 0.8875rem) center;
  background-image: none;
}
textarea.is-invalid:focus,
select.is-invalid:focus,
input.is-invalid:focus,
.was-validated input:invalid:focus {
  outline: 0;
  box-shadow: none;
}

textarea.is-invalid {
  background-position: top calc(0.375em + 0.5875rem) right calc(0.375em + 0.8875rem);
}

.row.no-gutters > .form-group {
  margin-bottom: 0;
}

.form-messages {
  display: none;
  margin: 0;
  padding: 10px 15px;
  margin-top: 15px;
  border-radius: 4px;
}
.form-messages > pre:last-child {
  margin-bottom: 0;
}
.form-messages > pre:first-of-type {
  margin-top: 0;
}
.form-messages.success {
  background-color: var(--success-color);
  color: var(--white-color);
  display: block;
}
.form-messages.error {
  background-color: var(--error-color);
  color: var(--white-color);
  display: block;
}
.form-messages pre {
  padding: 0;
  background-color: transparent;
  color: inherit;
}

/*------------------- 2.4. Slick Slider -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.row > .slick-list {
  padding-left: 0;
  padding-right: 0;
}

.slick-track > [class*=col] {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

.slick-track {
  min-width: 100%;
}

.slick-slide img {
  display: inline-block;
}

.slick-dots {
  list-style-type: none;
  padding: 0;
  margin: 10px 0 40px 0;
  line-height: 0;
  text-align: center;
  height: -moz-max-content;
  height: max-content;
  line-height: 0;
}
.slick-dots li {
  display: inline-block;
  margin-right: 23px;
}
.slick-dots li:last-child {
  margin-right: 0;
}
.slick-dots button {
  position: relative;
  font-size: 0;
  padding: 0;
  background-color: var(--title-color);
  width: 12px;
  height: 12px;
  line-height: 0;
  border: none;
  transition: all ease 0.4s;
}
.slick-dots button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -15px;
  width: 30px;
  height: 30px;
  border: 2px solid var(--theme-color);
  transition: all ease 0.4s;
  opacity: 0;
  visibility: hidden;
}
.slick-dots .slick-active button,
.slick-dots button:hover {
  background-color: var(--theme-color);
}
.slick-dots .slick-active button:before {
  opacity: 1;
  visibility: visible;
}

.slick-arrow {
  display: inline-block;
  padding: 0;
  position: absolute;
  top: calc(50% - 30px);
  left: var(--pos-x, -80px);
  background-color: var(--title-color);
  color: var(--white-color);
  border: none;
  width: var(--icon-size, 60px);
  height: var(--icon-size, 60px);
  font-size: var(--icon-font-size, 22px);
  margin-top: calc(var(--icon-size, 60px) / -2);
  z-index: 2;
  border-radius: 0;
}
.slick-arrow.default {
  position: relative;
  --pos-x: 0;
  margin-top: 0;
  margin-right: 10px;
}
.slick-arrow.slick-next {
  right: var(--pos-x, -80px);
  left: auto;
  margin-right: 0;
}
.slick-arrow:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
  border-color: transparent;
}
.slick-arrow.style2 {
  background-color: var(--white-color);
  color: var(--theme-color);
}
.slick-arrow.style2:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}

.arrow-margin .slick-arrow {
  top: calc(50% - 30px);
}

.arrow-wrap .slick-arrow {
  opacity: 0;
  visibility: hidden;
}
.arrow-wrap:hover .slick-arrow {
  opacity: 1;
  visibility: visible;
}

/* Extra large devices */
@media (max-width: 1500px) {
  .slick-arrow {
    --arrow-horizontal: -20px;
  }
}
/* Medium Large devices */
@media (max-width: 1399px) {
  .slick-arrow {
    --arrow-horizontal: 40px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .slick-arrow {
    --icon-size: 40px;
    margin-right: 40px;
  }
  .slick-arrow.slick-next {
    margin-right: 0;
    margin-left: 40px;
  }
  .slick-dots {
    margin: 8px 0 38px 0;
  }
}
/*------------------- 2.5. Mobile Menu -------------------*/
.vs-menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  width: 0;
  width: 100%;
  height: 100%;
  transition: all ease 0.8s;
  opacity: 0;
  visibility: hidden;
}
.vs-menu-wrapper .mobile-logo {
  padding-bottom: 0;
  display: block;
  text-align: center;
  background-color: var(--body-bg);
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
}
.vs-menu-wrapper .mobile-logo svg {
  max-width: 185px;
}
.vs-menu-wrapper .vs-menu-toggle {
  border: none;
  font-size: 22px;
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 0;
  line-height: 1;
  width: 33px;
  height: 33px;
  line-height: 34px;
  font-size: 18px;
  z-index: 1;
  color: var(--white-color);
  background-color: var(--theme-color);
  border-radius: 50%;
}
.vs-menu-wrapper .vs-menu-toggle:hover {
  background-color: var(--secondary-color);
  color: var(--white-color);
}
.vs-menu-wrapper .vs-menu-area {
  width: 100%;
  max-width: 310px;
  background-color: var(--body-bg);
  border-right: 3px solid var(--theme-color);
  height: 100%;
  position: relative;
  left: -110%;
  opacity: 0;
  visibility: hidden;
  transition: all ease 1s;
  z-index: 1;
}
.vs-menu-wrapper.vs-body-visible {
  opacity: 1;
  visibility: visible;
}
.vs-menu-wrapper.vs-body-visible .vs-menu-area {
  left: 0;
  opacity: 1;
  visibility: visible;
}

.vs-mobile-menu {
  overflow-y: scroll;
  max-height: calc(100vh - 200px);
  padding-bottom: 40px;
  margin-top: 33px;
  text-align: left;
}
.vs-mobile-menu::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(242, 0, 58, 0.2);
  background-color: #000;
}
.vs-mobile-menu::-webkit-scrollbar {
  width: 6px;
  background-color: #000;
}
.vs-mobile-menu::-webkit-scrollbar-thumb {
  background-color: var(--theme-color);
}
.vs-mobile-menu ul {
  margin: 0;
  padding: 0 0;
}
.vs-mobile-menu ul li {
  border-bottom: 1px solid var(--border-color);
  list-style-type: none;
}
.vs-mobile-menu ul li li:first-child {
  border-top: 1px solid var(--border-color);
}
.vs-mobile-menu ul li a {
  display: block;
  position: relative;
  padding: 12px 0;
  line-height: 1;
  font-size: 16px;
  text-transform: capitalize;
  color: var(--title-color);
  font-weight: 700;
}
.vs-mobile-menu ul li a:before {
  content: "\f105";
  font-family: var(--icon-font);
  position: relative;
  left: 0;
  top: 0;
  margin-right: 10px;
  display: inline-block;
}
.vs-mobile-menu ul li a:hover {
  color: var(--theme-color);
}
.vs-mobile-menu ul li.vs-active > a {
  color: var(--theme-color);
}
.vs-mobile-menu ul li.vs-active > a:before {
  transform: rotate(90deg);
}
.vs-mobile-menu ul li ul li {
  padding-left: 20px;
}
.vs-mobile-menu ul li ul li:last-child {
  border-bottom: none;
}
.vs-mobile-menu ul .vs-item-has-children > a .vs-mean-expand {
  position: absolute;
  right: 0;
  top: 50%;
  font-weight: 400;
  font-size: 12px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  margin-top: -12.5px;
  display: inline-block;
  text-align: center;
  background-color: var(--smoke-color);
  color: var(--title-color);
  box-shadow: 0 0 20px -8px rgba(242, 0, 58, 0.5);
  border-radius: 50%;
}
.vs-mobile-menu ul .vs-item-has-children > a .vs-mean-expand:before {
  content: "\f067";
  font-family: var(--icon-font);
}
.vs-mobile-menu ul .vs-item-has-children.vs-active > a .vs-mean-expand:before {
  content: "\f068";
}
.vs-mobile-menu > ul {
  padding: 0 40px;
}
.vs-mobile-menu > ul > li:last-child {
  border-bottom: none;
}

.vs-menu-toggle {
  width: 50px;
  height: 50px;
  padding: 0;
  font-size: 24px;
  border: none;
  background-color: var(--theme-color);
  color: var(--white-color);
  display: inline-block;
  border-radius: 0;
}

@media (max-width: 400px) {
  .vs-menu-wrapper .vs-menu-area {
    width: 100%;
    max-width: 270px;
  }
  .vs-mobile-menu > ul {
    padding: 0 20px;
  }
}
/*=================================
    03. Utilities
==================================*/
/*------------------- 3.1. Preloader -------------------*/
.preloader {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  background-color: var(--white-color);
}
.preloader .vs-btn {
  padding: 15px 20px;
  border-radius: 0;
  font-size: 14px;
}

.preloader-inner {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.preloader-inner img {
  display: block;
  margin: 0 auto 10px auto;
}

.loader {
  animation: loaderspin 1.5s infinite;
  height: 50px;
  width: 50px;
  display: block;
}
.loader:before, .loader:after {
  border-radius: 50%;
  content: "";
  display: block;
  height: 20px;
  width: 20px;
}
.loader:before {
  animation: ball1 1.5s infinite;
  background-color: var(--title-color);
  box-shadow: 30px 0 0 var(--theme-color);
  margin-bottom: 10px;
}
.loader:after {
  animation: ball2 1.5s infinite;
  background-color: var(--theme-color);
  box-shadow: 30px 0 0 var(--title-color);
}

@keyframes loaderspin {
  0% {
    transform: rotate(0deg) scale(0.8);
  }
  50% {
    transform: rotate(360deg) scale(1);
  }
  100% {
    transform: rotate(720deg) scale(0.8);
  }
}
@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 var(--theme-color);
  }
  50% {
    box-shadow: 0 0 0 var(--theme-color);
    margin-bottom: 0;
    transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 var(--theme-color);
    margin-bottom: 10px;
  }
}
@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 var(--title-color);
  }
  50% {
    box-shadow: 0 0 0 var(--title-color);
    margin-top: -20px;
    transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 var(--title-color);
    margin-top: 0;
  }
}
/*------------------- 3.2. Buttons -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.vs-btn {
  position: relative;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border: none;
  text-transform: uppercase;
  color: var(--white-color);
  background-color: var(--theme-color);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 20.5px 44px;
  border-radius: 0;
  z-index: 1;
}
.vs-btn i {
  margin-left: 10px;
}
.vs-btn::after, .vs-btn::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: -1;
  margin: auto;
  background: var(--title-color);
  transition: all ease 0.5s;
  border-radius: inherit;
}
.vs-btn:before {
  transform: rotateX(90deg);
}
.vs-btn:after {
  transform: rotateY(90deg);
}
.vs-btn:hover {
  color: var(--white-color);
}
.vs-btn:hover:before {
  transform: rotateX(0);
}
.vs-btn:hover:after {
  transform: rotateY(0);
}
.vs-btn.style2 {
  padding: 22px 42px;
}
.vs-btn.style3 {
  padding: 23px 44px;
  background-color: var(--title-color);
}
.vs-btn.style3::after, .vs-btn.style3::before {
  background-color: var(--theme-color);
}
.vs-btn.style4 {
  outline: 2px solid var(--white-color);
  color: var(--white-color);
  background-color: transparent;
}
.vs-btn.style4:after, .vs-btn.style4:before {
  background-color: var(--white-color);
}
.vs-btn.style4:hover {
  color: var(--title-color) !important;
}
.vs-btn.hover-white:after, .vs-btn.hover-white:before {
  background-color: var(--white-color);
}
.vs-btn.hover-white:hover {
  color: var(--title-color);
}

.arrow-btn {
  display: inline-block;
  position: relative;
  color: var(--title-color);
  font-size: 16px;
  text-transform: uppercase;
  vertical-align: middle;
  border: 2px solid var(--theme-color);
  font-weight: 700;
  border-radius: 9999px;
  line-height: 1;
  padding: 9.5px 21.5px;
}
.arrow-btn i {
  position: absolute;
  right: -30px;
  top: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: var(--theme-color);
  color: var(--white-color);
  text-align: center;
  font-size: 20px;
  border-radius: 50%;
  margin-top: -20px;
  transform: rotate(-45deg);
  transition: all ease 0.4s;
}
.arrow-btn:hover {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
  color: var(--white-color);
}
.arrow-btn:hover:hover i {
  background-color: var(--title-color);
}

.play-btn {
  display: inline-block;
  position: relative;
  z-index: 1;
}
.play-btn > i {
  display: inline-block;
  width: var(--icon-size, 100px);
  height: var(--icon-size, 100px);
  line-height: var(--icon-size, 100px);
  text-align: center;
  background-color: var(--theme-color);
  color: var(--white-color);
  font-size: var(--icon-font-size, 1.5em);
  border-radius: 50%;
  z-index: 1;
  transition: all ease 0.4s;
}
.play-btn:after, .play-btn:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 2px solid var(--theme-color);
  animation-duration: var(--ripple-ani-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: ripple;
  z-index: -1;
  border-radius: 50%;
  transition: all ease 0.4s;
}
.play-btn:after {
  animation-delay: 2s;
}
.play-btn:hover i {
  background-color: var(--title-color);
  color: var(--white-color);
}
.play-btn:hover:after, .play-btn:hover::before {
  border-color: var(--white-color);
}
.play-btn.style2 i {
  --icon-size: 90px;
  background-color: var(--white-color);
  color: var(--theme-color);
}
.play-btn.style2::after, .play-btn.style2::before {
  border-color: var(--white-color);
}
.play-btn.style2:hover i {
  background-color: var(--theme-color);
  color: var(--white-color);
}
.play-btn.style2:hover::before, .play-btn.style2:hover:after {
  border-color: var(--theme-color);
}

.link-btn {
  font-weight: 600;
  font-size: 16px;
  display: inline-block;
  line-height: 0.8;
  position: relative;
  padding-bottom: 2px;
  margin-bottom: -2px;
  text-transform: capitalize;
}
.link-btn i {
  margin-left: 7px;
  font-size: 0.9rem;
}
.link-btn:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--theme-color);
  transition: all ease 0.4s;
}
.link-btn:hover {
  color: var(--theme-color);
}
.link-btn:hover::before {
  width: 100%;
}

.scroll-btn {
  position: fixed;
  bottom: 300px;
  right: 30px;
  z-index: 94;
  opacity: 0;
  visibility: hidden;
  display: inline-block;
  border-radius: 50%;
  /* Small devices */
}
.scroll-btn i {
  display: inline-block;
  background-color: var(--theme-color);
  color: var(--white-color);
  text-align: center;
  font-size: 16px;
  width: var(--btn-size, 50px);
  height: var(--btn-size, 50px);
  line-height: var(--btn-size, 50px);
  z-index: 2;
  border-radius: inherit;
  position: relative;
  transition: all ease 0.8s;
}
.scroll-btn:before {
  content: "";
  position: absolute;
  left: var(--extra-shape, -6px);
  top: var(--extra-shape, -6px);
  right: var(--extra-shape, -6px);
  bottom: var(--extra-shape, -6px);
  background-color: var(--body-bg);
  border-radius: inherit;
  z-index: 1;
  transition: all ease 0.4s;
}
.scroll-btn:focus i, .scroll-btn:hover i {
  background-color: var(--title-color);
  color: var(--white-color);
}
.scroll-btn.show {
  bottom: 120px;
  opacity: 1;
  visibility: visible;
}
@media (max-width: 767px) {
  .scroll-btn {
    --btn-size: 40px;
    --extra-shape: -4px;
    right: 15px;
    bottom: 50px;
  }
  .scroll-btn.show {
    bottom: 15px;
  }
}

.scrollToTop {
  position: fixed;
  right: 60px;
  bottom: 500px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.4s;
  z-index: 96;
}
.scrollToTop.show {
  bottom: 60px;
  opacity: 1;
  visibility: visible;
}

/* Small devices */
@media (max-width: 767px) {
  .play-btn {
    --icon-size: 60px;
  }
  .play-btn.style2 i {
    --icon-size: 60px;
  }
  .scrollToTop {
    right: 20px;
  }
  .scrollToTop.show {
    bottom: 20px;
  }
}
/*------------------- 3.3. Titles -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.sec-subtitle3,
.sec-subtitle2,
.sec-subtitle {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--theme-color);
  display: inline-block;
  vertical-align: top;
  border: 1px solid var(--border-color);
  padding: 9px 22px;
  letter-spacing: 0.02em;
  line-height: 1;
  font-family: var(--title-font);
  margin-bottom: 25px;
}

.sec-subtitle2 {
  border-color: var(--theme-color);
}

.sec-subtitle3 {
  border-color: var(--white-color);
  color: var(--white-color);
}

.sec-title2,
.sec-title {
  font-size: 48px;
  line-height: 1.13;
  margin-top: -0.2em;
  margin-bottom: 21px;
  text-transform: capitalize;
}

.sec-title2 {
  text-transform: uppercase;
}

.sec-text {
  margin-bottom: 32px;
}

.sec-btns,
.title-area {
  margin-bottom: 50px;
}

.sec-text2 {
  margin: -10px 0 -0.8em 0;
  padding-top: 11px;
  color: var(--title-color);
  border-top: 1px solid #D8DDE1;
}
.sec-text2 .number {
  color: var(--theme-color);
  font-size: 30px;
  font-family: var(--title-font);
  font-weight: 700;
}

/* Medium Large devices */
@media (max-width: 1399px) {
  .sec-title2,
  .sec-title {
    font-size: 40px;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .sec-title,
  .sec-title2 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 15px;
  }
  .title-area,
  .sec-btns {
    margin-bottom: 40px;
  }
  .title-area.has-sec-btns {
    margin-bottom: 20px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .sec-title,
  .sec-title2 {
    font-size: 30px;
  }
}
/*------------------- 3.4. Common -------------------*/
.image-scale-hover {
  overflow: hidden;
}
.image-scale-hover img {
  transition: all ease 0.4s;
  transform: scale(1.001);
}
.image-scale-hover:hover img {
  transform: scale(1.2);
}

.z-index-step1 {
  position: relative;
  z-index: 4 !important;
}

.z-index-common {
  position: relative;
  z-index: 3;
}

.z-index-n1 {
  z-index: -1;
}

.media-body {
  flex: 1;
}

.badge {
  position: absolute;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-block;
  text-align: center;
  background-color: var(--theme-color);
  color: var(--white-color);
  padding: 0.35em 0.55em;
  border-radius: 50%;
}

@media (min-width: 1921px) {
  .d-hd-none {
    display: none !important;
  }
}
@media (min-width: 1700px) {
  .d-hd-block {
    display: block !important;
  }
  .d-hd-flex {
    display: block !important;
  }
}
/*------------------- 3.6. Font -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.fw-light {
  font-weight: 300;
}

.fw-normal {
  font-weight: 400;
}

.fw-medium {
  font-weight: 500;
}

.fw-semibold {
  font-weight: 600;
}

.fw-bold {
  font-weight: 700;
}

.fw-extrabold {
  font-weight: 800;
}

.fs-md {
  font-size: 18px;
}

.fs-xs {
  font-size: 14px;
}

.fs-20 {
  font-size: 20px;
}

/* Small devices */
@media (max-width: 767px) {
  .fs-20,
  .fs-md {
    font-size: 16px;
  }
}
/*------------------- 3.7. Background -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.background-image,
[data-bg-src] {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg-fluid {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.bg-auto {
  background-size: auto auto;
}

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

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

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.bg-bottom {
  background-position: bottom center;
  background-size: 100% auto;
}

/*------------------- 3.8. Text Color -------------------*/
.text-inherit {
  color: inherit;
}
.text-inherit:hover {
  color: var(--theme-color);
}

a.text-theme:hover,
.text-reset:hover {
  text-decoration: underline;
}

.text-theme {
  color: var(--theme-color);
}

/*------------------- 3.9. Overlay -------------------*/
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

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

[data-overlay] {
  position: relative;
}
[data-overlay] [class^=col-],
[data-overlay] [class*=col-] {
  z-index: 1;
}

[data-overlay]:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

[data-opacity="1"]:before {
  opacity: 0.1;
}

[data-opacity="2"]:before {
  opacity: 0.2;
}

[data-opacity="3"]:before {
  opacity: 0.3;
}

[data-opacity="4"]:before {
  opacity: 0.4;
}

[data-opacity="5"]:before {
  opacity: 0.5;
}

[data-opacity="6"]:before {
  opacity: 0.6;
}

[data-opacity="7"]:before {
  opacity: 0.7;
}

[data-opacity="8"]:before {
  opacity: 0.8;
}

[data-opacity="9"]:before {
  opacity: 0.9;
}

[data-opacity="10"]:before {
  opacity: 1;
}

/*------------------- 3.10. Animation -------------------*/
.jump-reverse-img,
.jump-img,
.jump-reverse,
.jump {
  animation: jumpping var(--duration, 6s) infinite linear;
}

.jump-reverse-img,
.jump-img {
  --duration: 5s;
}

.jump-reverse-img,
.jump-reverse {
  --jump-y: -20px;
}

.rotate-reverse-img,
.rotate-img,
.rotate-reverse,
.rotate {
  animation: rotate var(--duration, 12s) infinite linear;
}

.rotate-reverse-img,
.rotate-img {
  --duration: 40s;
}

.rotate-reverse {
  --rotate-angle: -360deg;
}

.fadeInUp {
  animation-name: fadeInUp;
}

.wow-animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadein {
  --animation-name: fadein-custom;
}

.slideinup {
  --animation-name: slideinup;
}

.slideindown {
  --animation-name: slideindown;
}

.slideinleft {
  --animation-name: slideinleft;
}

.slideinright {
  --animation-name: slideinright;
}

.animated {
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-delay: 0.3s;
  animation-name: var(--animation-name);
}

.ripple-animation {
  animation-duration: var(--ripple-ani-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: ripple;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(var(--rotate-angle, 360deg));
  }
}
@keyframes slideinup {
  0% {
    opacity: 0;
    transform: translateY(70px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideindown {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideinleft {
  0% {
    opacity: 0;
    transform: translateX(-70px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideinright {
  0% {
    opacity: 0;
    transform: translateX(70px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes fadein-custom {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes jumpping {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, var(--jump-y, 20px), var(--jump-x, 0));
  }
}
@keyframes bounceonhover {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-8px);
  }
  100% {
    transform: translateX(0);
  }
}
/*=================================
    04. Template Style
==================================*/
/*------------------- 4.1. Widget  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.widget_nav_menu ul,
.widget_pages ul,
.widget_archive ul,
.widget_categories ul {
  list-style: none;
  margin: 0 0 -10px 0;
  padding: 0;
}
.widget_nav_menu a,
.widget_pages a,
.widget_archive a,
.widget_categories a {
  display: block;
  margin: 0 0 18px 0;
  padding: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  font-family: var(--title-font);
  color: var(--body-color);
  border-bottom: 1.1px solid var(--border-color);
  border-radius: 0;
  position: relative;
}
.widget_nav_menu a::before,
.widget_pages a::before,
.widget_archive a::before,
.widget_categories a::before {
  content: "\f07c";
  position: relative;
  margin-right: 10px;
  font-family: var(--icon-font);
}
.widget_nav_menu a:after,
.widget_pages a:after,
.widget_archive a:after,
.widget_categories a:after {
  content: "\f178";
  font-family: var(--icon-font);
  position: absolute;
  right: 0;
  top: 0;
}
.widget_nav_menu a:hover,
.widget_pages a:hover,
.widget_archive a:hover,
.widget_categories a:hover {
  color: var(--theme-color);
}
.widget_nav_menu > ul > li:last-child > a,
.widget_pages > ul > li:last-child > a,
.widget_archive > ul > li:last-child > a,
.widget_categories > ul > li:last-child > a {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 7px;
}
.widget_nav_menu li,
.widget_pages li,
.widget_archive li,
.widget_categories li {
  display: block;
  position: relative;
}
.widget_nav_menu li > span,
.widget_pages li > span,
.widget_archive li > span,
.widget_categories li > span {
  width: 40px;
  height: 40px;
  line-height: 35.5px;
  font-size: 18px;
  font-weight: 500;
  color: var(--title-color);
  background-color: transparent;
  right: 10px;
  top: 10px;
  z-index: 1;
  display: inline-block;
  text-align: center;
  position: absolute;
  border: 2px solid var(--theme-color);
  transition: all ease 0.4s;
  border-radius: 0;
}
.widget_nav_menu li:hover > span,
.widget_pages li:hover > span,
.widget_archive li:hover > span,
.widget_categories li:hover > span {
  background-color: var(--theme-color);
  color: var(--white-color);
}
.widget_nav_menu .children,
.widget_pages .children,
.widget_archive .children,
.widget_categories .children {
  margin-left: 10px;
}

.widget_nav_menu .sub-menu {
  margin-left: 10px;
}

.wp-block-archives {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}
.wp-block-archives a:not(:hover) {
  color: inherit;
}

.vs-blog ul.wp-block-archives li {
  margin: 5px 0;
}

/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.widget {
  padding: var(--widget-padding-y, 40px) var(--widget-padding-x, 40px);
  position: relative;
  margin-bottom: 40px;
  background-color: var(--secondary-color);
}
.widget select,
.widget input {
  height: 60px;
  border: none;
  background-color: var(--input-bg, #F0F4F5);
  border-radius: 9999px;
}

.widget_vs_btns .vs-btn {
  width: 100%;
  margin-bottom: 15px;
}
.widget_vs_btns .vs-btn:last-child {
  margin-bottom: 0;
}
.widget_vs_btns .vs-btn i {
  margin-right: 10px;
  margin-left: 0;
}

.widget_title {
  position: relative;
  font-weight: 600;
  font-size: 24px;
  line-height: 1em;
  margin: -0.2em 0 38px 0;
  padding: 0 0 18px 0;
  font-family: var(--title-font);
}
.widget_title:after, .widget_title:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 3px;
  width: 100%;
  background-color: var(--border-color);
  border-radius: 9999px;
}
.widget_title:after {
  width: 30px;
  background-color: var(--theme-color);
}

.widget .search-form {
  position: relative;
  display: flex;
}
.widget .search-form input {
  background-color: var(--white-color);
  border-radius: 0;
  flex: 1;
  padding: 0 20px;
  height: 56px;
}
.widget .search-form button {
  width: 56px;
  height: 56px;
  background-color: var(--theme-color);
  color: var(--white-color);
  border: none;
  text-align: center;
  padding: 0;
}
.widget .search-form button:hover {
  background-color: var(--title-color);
  color: var(--white-color);
}

.wp-block-tag-cloud a,
.tagcloud a {
  display: inline-block;
  border: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  padding: 13px 18.5px;
  margin-right: 5px;
  margin-bottom: 10px;
  color: var(--title-color);
  background-color: var(--secondary-color);
  border-radius: 2px;
  position: relative;
  z-index: 1;
}
.wp-block-tag-cloud a:hover,
.tagcloud a:hover {
  background-color: var(--theme-color);
  color: var(--white-color) !important;
  border-color: transparent;
}
.wp-block-tag-cloud a:hover:before,
.tagcloud a:hover:before {
  background-color: var(--white-color);
}

.widget .tagcloud a:not(:hover) {
  background-color: var(--white-color);
}

.tagcloud {
  margin-right: -5px;
  margin-bottom: -10px;
}

.recent-post {
  display: flex;
  align-items: center;
  margin-bottom: 21px;
}
.recent-post:last-child {
  margin-bottom: 0;
}
.recent-post .media-img {
  margin-right: 15px;
  width: 85px;
}
.recent-post .media-img img {
  width: 100%;
}
.recent-post .post-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 4px 0;
}
.recent-post .recent-post-meta a {
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 400;
  color: var(--body-color);
}
.recent-post .recent-post-meta a i {
  color: var(--theme-color);
  margin-right: 7px;
}

.sidebar-gallery {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(3, 1fr);
}
.sidebar-gallery .gallery-thumb {
  overflow: hidden;
}
.sidebar-gallery .gallery-thumb img {
  transition: all ease 0.4s;
  transform: scale(1.01) rotate(0);
}
.sidebar-gallery .gallery-thumb:hover img {
  transform: scale(1.1) rotate(5deg);
}

.vs-widget-about:not(.style2) {
  text-align: center;
}
.vs-widget-about:not(.style2) .footer-text {
  color: var(--white-color);
}
.vs-widget-about .footer-logo {
  margin-bottom: 30px;
}
.vs-widget-about .footer-text {
  font-size: 18px;
  max-width: 620px;
  margin: 0 auto -0.5em auto;
}

/* Large devices */
@media (max-width: 1199px) {
  .widget {
    --widget-padding-y: 30px;
    --widget-padding-x: 30px;
  }
  .recent-post .post-title {
    font-size: 16px;
    line-height: 24px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .sidebar-area {
    padding-top: 30px;
  }
  .wp-block-tag-cloud a,
  .tagcloud a {
    padding: 10.5px 18px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .widget_title {
    font-size: 22px;
  }
  .sidebar-area .comment-list .comment-author {
    font-size: 18px;
  }
  .sidebar-area .comment-list .comment-text {
    font-size: 14px;
  }
}
/* Extra small devices */
@media (max-width: 575px) {
  .widget {
    padding: 30px 20px;
  }
}
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.footer-widget,
.footer-widget .widget {
  padding: 0;
  border: none;
  padding-bottom: 0;
  background-color: transparent;
}
.footer-widget .widget_title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 32px;
  padding-bottom: 17px;
  color: var(--white-color);
}
.footer-widget .widget_title:after, .footer-widget .widget_title::before {
  left: 0;
  width: 20px;
  height: 1.5px;
  background-color: var(--theme-color);
  border-radius: 0;
}
.footer-widget .widget_title:after {
  left: 30px;
  width: 50px;
}
.footer-widget.widget_meta ul, .footer-widget.widget_pages ul, .footer-widget.widget_archive ul, .footer-widget.widget_categories ul, .footer-widget.widget_nav_menu ul {
  margin-top: -0.1em;
}
.footer-widget.widget_meta ul ul, .footer-widget.widget_pages ul ul, .footer-widget.widget_archive ul ul, .footer-widget.widget_categories ul ul, .footer-widget.widget_nav_menu ul ul {
  margin-top: 0;
}
.footer-widget.widget_meta a, .footer-widget.widget_pages a, .footer-widget.widget_archive a, .footer-widget.widget_categories a, .footer-widget.widget_nav_menu a {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  display: block;
  border: none;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 21px;
  color: var(--white-color);
  font-family: var(--body-font);
  border: none;
  padding: 0 0 0 18px;
}
.footer-widget.widget_meta a:after, .footer-widget.widget_pages a:after, .footer-widget.widget_archive a:after, .footer-widget.widget_categories a:after, .footer-widget.widget_nav_menu a:after {
  display: none;
}
.footer-widget.widget_meta a::before, .footer-widget.widget_pages a::before, .footer-widget.widget_archive a::before, .footer-widget.widget_categories a::before, .footer-widget.widget_nav_menu a::before {
  content: "\f105";
  position: absolute;
  font-family: var(--icon-font);
  font-weight: 400;
  left: 0;
  top: 50%;
  height: 10px;
  margin-top: -5px;
  font-size: 18px;
  display: inline-block;
  line-height: 10px;
  transition: all ease 0.4s;
  color: var(--white-color);
}
.footer-widget.widget_meta a:hover, .footer-widget.widget_pages a:hover, .footer-widget.widget_archive a:hover, .footer-widget.widget_categories a:hover, .footer-widget.widget_nav_menu a:hover {
  color: var(--theme-color);
}
.footer-widget.widget_meta a:hover::before, .footer-widget.widget_pages a:hover::before, .footer-widget.widget_archive a:hover::before, .footer-widget.widget_categories a:hover::before, .footer-widget.widget_nav_menu a:hover::before {
  color: var(--theme-color);
  animation: bounceonhover 0.6s infinite linear;
}
.footer-widget.widget_meta li > span, .footer-widget.widget_pages li > span, .footer-widget.widget_archive li > span, .footer-widget.widget_categories li > span, .footer-widget.widget_nav_menu li > span {
  width: auto;
  height: auto;
  position: relative;
  background-color: transparent;
  color: var(--body-color);
  line-height: 1;
}
.footer-widget.widget_meta li:last-child a, .footer-widget.widget_pages li:last-child a, .footer-widget.widget_archive li:last-child a, .footer-widget.widget_categories li:last-child a, .footer-widget.widget_nav_menu li:last-child a {
  margin-bottom: 0;
}

.footer-table table {
  border: none;
  margin: 0;
}
.footer-table td {
  color: var(--white-color);
  padding: 0 40px 21px 0;
  border: none;
  line-height: 1;
}
.footer-table td:last-child {
  padding-right: 0;
}
.footer-table tr:last-child td {
  padding-bottom: 0;
}

/* Large devices */
@media (max-width: 1199px) {
  .footer-widget {
    margin-bottom: 50px;
  }
  .footer-widget .widget_title {
    font-size: 20px;
    margin-bottom: 30px;
    margin-top: 0;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .footer-widget .widget_title {
    font-size: 22px;
  }
}
/*------------------- 4.2. Header  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.vs-header {
  position: relative;
  z-index: 41;
}

.header-logo {
  max-width: 270px;
  padding: 15px 0;
}

.sticky-header {
  position: fixed;
  left: 0;
  top: -100%;
  z-index: 999;
  padding: 20px;
}
.sticky-header .logo {
  padding: 18px 0;
}

.menu-sticky1 > ul > li > a {
  padding: 25px 0;
}

.will-sticky .sticky-active {
  position: fixed;
  top: -100%;
  right: 0;
  left: 0;
  background-color: var(--white-color);
  transition: all ease 0.8s;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
}
.will-sticky .sticky-active.active {
  top: 0;
}

.main-menu a {
  display: block;
  position: relative;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 18px;
  color: var(--title-color);
  /* Extra large devices */
}
@media (max-width: 1500px) {
  .main-menu a {
    font-size: 16px;
  }
}
.main-menu a:hover {
  color: var(--theme-color);
}
.main-menu > ul > li {
  margin: 0 16px;
}
.main-menu ul {
  margin: 0;
  padding: 0;
}
.main-menu ul li {
  list-style-type: none;
  display: inline-block;
  position: relative;
}
.main-menu ul li.menu-item-has-children > a:after {
  content: "\f067";
  position: relative;
  font-family: var(--icon-font);
  margin-left: 5px;
  top: -0.8px;
  font-size: 0.8rem;
}
.main-menu ul li:last-child {
  margin-right: 0;
}
.main-menu ul li:first-child {
  margin-left: 0;
}
.main-menu ul li:hover > ul.sub-menu,
.main-menu ul li:hover ul.mega-menu {
  visibility: visible;
  opacity: 1;
  margin-top: 0;
  z-index: 9;
}
.main-menu ul.sub-menu,
.main-menu ul.mega-menu {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background-color: var(--body-bg);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  visibility: hidden;
  min-width: 190px;
  width: -moz-max-content;
  width: max-content;
  padding: 7px;
  left: -14px;
  margin-top: 50px;
  opacity: 0;
  z-index: -1;
  border-bottom: 3px solid var(--theme-color);
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.09), 0px 3px 0px 0px rgba(231, 13, 60, 0.004);
  transform-origin: top center;
  transition: margin-top 0.4s ease-in-out 0s, visibility 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s, z-index 0s;
}
.main-menu ul.sub-menu a,
.main-menu ul.mega-menu a {
  font-size: 16px;
  line-height: 30px;
}
.main-menu ul.sub-menu {
  padding: 18px 20px;
  left: -27px;
}
.main-menu ul.sub-menu:before {
  content: "";
  position: absolute;
  left: 34px;
  top: 30px;
  width: 1px;
  background-color: var(--border-color);
  height: calc(100% - 65px);
}
.main-menu ul.sub-menu li {
  display: block;
  margin: 0 0;
  padding: 3px 9px;
}
.main-menu ul.sub-menu li.menu-item-has-children > a:after {
  content: "\f105";
  float: right;
  top: 3px;
}
.main-menu ul.sub-menu li a {
  position: relative;
  padding-left: 21px;
}
.main-menu ul.sub-menu li a:before {
  content: "\f111";
  position: absolute;
  top: 2.8em;
  left: 0;
  font-family: var(--icon-font);
  width: 11px;
  height: 11px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  font-size: 0.2em;
  line-height: 11.5px;
  color: var(--theme-color);
  font-weight: 700;
  background-color: var(--body-bg);
  box-shadow: inset 0px 2px 4px 0px rgba(242, 0, 58, 0.4);
}
.main-menu ul.sub-menu li ul.sub-menu {
  left: 100%;
  right: auto;
  top: 0;
  margin: 0 0;
  margin-left: 20px;
}
.main-menu ul.sub-menu li ul.sub-menu li ul {
  left: 100%;
  right: auto;
}
.main-menu .mega-menu-wrap {
  position: static;
}
.main-menu ul.mega-menu {
  display: flex;
  justify-content: space-between;
  text-align: left;
  width: 100%;
  max-width: var(--main-container);
  padding: 20px 15px 23px 15px;
  left: 50%;
  transform: translateX(-50%);
}
.main-menu ul.mega-menu li {
  display: block;
  width: 100%;
  padding: 0 15px;
}
.main-menu ul.mega-menu li li {
  padding: 4px 0;
}
.main-menu ul.mega-menu li a {
  display: inline-block;
}
.main-menu ul.mega-menu > li > a {
  display: block;
  padding: 0;
  padding-bottom: 5px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--title-color);
  border-color: var(--theme-color);
}
.main-menu ul.mega-menu > li > a::after, .main-menu ul.mega-menu > li > a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15px;
  height: 1px;
  background-color: var(--theme-color);
}
.main-menu ul.mega-menu > li > a::after {
  width: calc(100% - 20px);
  left: 20px;
}
.main-menu ul.mega-menu > li > a:hover {
  padding-left: 0;
}

.menu-style1 > ul > li > a {
  padding: 41px 0;
}

.header-links ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.header-links li {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: var(--white-color);
  font-family: var(--title-font);
  margin: 0 15px 0 0;
  padding: 0 20px 0 0;
  line-height: 1;
  position: relative;
}
.header-links li:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  height: 14px;
  margin-top: -7px;
  width: 1px;
  background-color: var(--white-color);
  opacity: 0.3;
}
.header-links li:last-child {
  padding-right: 0;
  margin-right: 0;
}
.header-links li:last-child:after {
  display: none;
}
.header-links i {
  margin: 0 10px 0 0;
}
.header-links a {
  color: inherit;
}
.header-links a:hover {
  color: inherit;
  text-decoration: underline;
}

.header-icons {
  height: 100%;
  display: flex;
}
.header-icons button,
.header-icons a {
  border: none;
  background-color: transparent;
  height: 50px;
  width: 50px;
  line-height: 47px;
  border: 2px solid var(--border-color);
  vertical-align: middle;
  color: var(--theme-color);
  font-size: 20px;
  margin-right: 0;
  margin-left: 25px;
  text-align: center;
  border-radius: 50%;
}
.header-icons button:first-child,
.header-icons a:first-child {
  margin-left: 0;
}
.header-icons button:hover,
.header-icons a:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
  border-color: transparent;
}

.header-layout1 .header-logo {
  background-color: var(--theme-color);
  width: 385px;
  max-width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
}
.header-layout1 .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.header-layout1 .menu-area,
.header-layout1 .header-top {
  padding-left: 30px;
  padding-right: 30px;
}
.header-layout1 .header-top {
  background-color: var(--theme-color);
  padding-top: 11px;
  padding-bottom: 11px;
}
.header-layout1 .header-text {
  color: var(--white-color);
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--title-font);
}

.header-logo2 {
  background-color: var(--title-color);
  border-right: 4px solid var(--theme-color);
  height: 100%;
  display: flex;
  align-items: center;
  padding: 20px 25px;
}

.header-layout2 .header-top {
  background-color: var(--theme-color);
  padding: 11px 0;
}
.header-layout2 .menu-area {
  position: relative;
  margin-bottom: -20px;
}
.header-layout2 .menu-area:before {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  right: -20px;
  bottom: 0;
  background-color: #fff;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px));
}

.header-layout3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.header-layout3 .header-top {
  padding: 10.5px 0;
  background-color: var(--title-color);
}
.header-layout3 .header-top .social-style2 a:hover {
  color: var(--theme-color);
}
.header-layout3 .menu-area {
  background-color: rgba(255, 255, 255, 0.1);
}
.header-layout3 .main-menu > ul > li > a {
  color: var(--white-color);
}
.header-layout3 .main-menu > ul > li > a:hover {
  color: var(--theme-color);
}

/* Extra large devices */
@media (max-width: 1500px) {
  .header-layout1 .header-logo {
    width: 270px;
    padding-right: 15px;
    padding-left: 15px;
  }
  .header-layout1 .main-menu > ul > li {
    margin: 0 10px;
  }
  .header-layout1 .main-menu > ul > li:last-child {
    margin-right: 0;
  }
  .header-layout1 .main-menu > ul > li:first-child {
    margin-left: 0;
  }
  .header-layout1 .menu-area,
  .header-layout1 .header-top {
    padding-left: 15px;
    padding-right: 15px;
  }
  .header-icons button,
  .header-icons a {
    margin-left: 10px;
    width: 40px;
    height: 40px;
    line-height: 36px;
    font-size: 14px;
  }
  .header-logo2 {
    padding-left: 0;
  }
  .header-layout3 {
    position: relative;
    background-color: var(--title-color);
  }
  .header-layout3 .header-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }
  .header-layout3 .menu-area {
    background-color: transparent;
  }
  .header-layout3 .main-menu > ul > li {
    margin: 0 13px;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .header-links li {
    font-size: 14px;
    margin: 0 10px 0 0;
    padding: 0 15px 0 0;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .header-layout2 .menu-area {
    margin: 0;
  }
  .header-layout2 .menu-area:before {
    display: none;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .header-layout1 .header-logo {
    width: 190px;
  }
  .header-links {
    text-align: center;
  }
  .header-links li {
    font-size: 12px;
  }
}
/* Extra small devices */
@media (max-width: 575px) {
  .header-links ul {
    line-height: 0;
  }
  .header-links li {
    display: inline-block;
    padding-right: 0;
    margin: 0 10px 0 0;
    line-height: 1;
    font-size: 10px;
  }
  .header-links li i {
    margin-right: 4px;
  }
  .header-links li::after {
    display: none;
  }
  .header-logo {
    max-width: 200px;
  }
  .header-logo2 {
    padding-right: 0;
    border: none;
  }
}
/*------------------- 4.3. Footer  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.widget-area {
  padding-top: 60px;
  padding-bottom: 60px;
}

.copyright-wrap {
  padding: 29px 0;
  background-color: var(--theme-color);
}

.copyright-text {
  margin: 0;
  font-size: 16px;
  color: var(--white-color);
}
.copyright-text a {
  font-style: italic;
  font-weight: 700;
  color: inherit;
}
.copyright-text a:hover {
  text-decoration: underline;
}

.copyright-menu ul {
  margin: 0;
  padding: 0;
}
.copyright-menu li {
  display: inline-block;
  margin-right: 23px;
  padding-right: 28px;
  position: relative;
}
.copyright-menu li:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background-color: var(--white-color);
  border-radius: 50%;
  transition: all ease 0.4s;
}
.copyright-menu li:last-child {
  padding-right: 0;
  margin-right: 0;
}
.copyright-menu li:last-child:after {
  display: none;
}
.copyright-menu a {
  display: block;
  color: var(--white-color);
  font-size: 16px;
}
.copyright-menu a:hover {
  text-decoration: underline;
  color: var(--white-color);
}

.copyright-menu2 ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  z-index: 1;
}
.copyright-menu2 ul:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  bottom: -0.5px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  z-index: -1;
}
.copyright-menu2 li {
  display: inline-block;
  margin: 0;
}
.copyright-menu2 li:first-child a {
  border-width: 0 1px 0 1px;
}
.copyright-menu2 a {
  display: block;
  padding: 0;
  border: none;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--title-font);
  color: var(--white-color);
  padding: 25px 50px 25px 50px;
  margin: -1px;
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.2);
}
.copyright-menu2 a:after, .copyright-menu2 a:before {
  display: none;
}
.copyright-menu2 a:hover {
  border-color: transparent;
  background-color: var(--theme-color);
  color: var(--white-color);
}

.footer-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 77px;
  padding-bottom: 40px;
}

.footer-social {
  text-align: center;
}
.footer-social a {
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: rgba(114, 114, 114, 0.5);
  color: var(--white-color);
  margin-right: 8px;
  border-radius: 50%;
}
.footer-social a:last-child {
  margin-right: 0;
}
.footer-social a:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}

.footer-layout2 {
  background-color: var(--title-color);
}
.footer-layout2 .widget-area {
  padding: 80px 0 20px 0;
}
.footer-layout2 .widget {
  padding: 0;
  background-color: transparent;
  margin-bottom: 60px;
}
.footer-layout2 .copyright-wrap {
  text-align: center;
  padding: 22px 15px;
}

.footer-layout3 .footer-top {
  padding: 60px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-layout3 .copyright-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background-color: transparent;
}

/* Large devices */
@media (max-width: 1199px) {
  .widget-area {
    padding-top: 50px;
    padding-bottom: 10px;
  }
  .footer-top {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .copyright-menu2 a {
    padding: 20px 30px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .copyright-text {
    font-size: 14px;
  }
  .copyright-menu li {
    padding-right: 0;
    margin-right: 10px;
  }
  .copyright-menu li::after {
    display: none;
  }
  .copyright-menu a {
    font-size: 14px;
  }
  .copyright-wrap {
    padding: 20px 0;
  }
  .copyright-menu2 a {
    padding: 15px 20px;
    font-size: 14px;
  }
  .footer-layout2 .widget {
    margin-bottom: 30px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .copyright-menu2 ul {
    border-bottom: none;
  }
  .copyright-menu2 li:first-child a,
  .copyright-menu2 a {
    padding: 14px 20px 12px 20px;
    font-size: 12px;
    display: block;
    margin: 0;
    border-width: 0 1px 1px 1px;
  }
  .copyright-menu2 li:last-child a {
    border-width: 0 1px 1px 1px;
  }
}
/*------------------- 4.4. Breadcumb  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.breadcumb-menu {
  max-width: 100%;
  padding: 0;
  margin: 30px 0 0 0;
  list-style-type: none;
  position: relative;
}
.breadcumb-menu li {
  display: inline-block;
  list-style: none;
  position: relative;
}
.breadcumb-menu li:after {
  content: "\f101";
  font-family: var(--icon-font);
  font-weight: 400;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-left: 10px;
  margin-right: 5px;
}
.breadcumb-menu li:last-child:after {
  display: none;
}
.breadcumb-menu li,
.breadcumb-menu a,
.breadcumb-menu span {
  word-break: break-word;
  white-space: normal;
  font-weight: 700;
  font-size: 14px;
  color: var(--white-color);
  font-family: var(--body-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.breadcumb-menu a:hover {
  color: var(--theme-color);
}

.breadcumb-title {
  color: var(--white-color);
  margin: -0.1em 0 -0.4em 0;
  font-size: 64px;
}

.breadcumb-wrapper {
  overflow: hidden;
  position: relative;
  background-color: var(--title-color);
  background-size: cover;
  padding: 143px 0 143px 0;
  /* Hight Resoulation devices */
}
@media (min-width: 1922px) {
  .breadcumb-wrapper {
    background-size: cover;
    background-position: center top;
  }
}

/* Extra large devices */
@media (max-width: 1500px) {
  .breadcumb-wrapper {
    padding: 100px 0 100px 0;
  }
  .breadcumb-title {
    font-size: 48px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .breadcumb-wrapper {
    padding: 80px 0 80px 0;
  }
  .breadcumb-title {
    font-size: 40px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .breadcumb-wrapper {
    padding: 60px 0 60px 0;
    background-position: left center;
    text-align: center;
  }
  .breadcumb-title {
    font-size: 30px;
  }
  .breadcumb-menu {
    margin-top: 15px;
  }
  .breadcumb-menu li,
  .breadcumb-menu a {
    font-size: 12px;
  }
}
/*------------------- 4.5. Pagination  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.vs-pagination {
  margin-bottom: 30px;
}
.vs-pagination ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vs-pagination span,
.vs-pagination a {
  position: relative;
  display: inline-block;
  text-align: center;
  border: none;
  background-color: var(--secondary-color);
  color: var(--title-color);
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 600;
  width: 56px;
  height: 56px;
  line-height: 56px;
  z-index: 1;
}
.vs-pagination span i,
.vs-pagination a i {
  font-size: 1.2em;
}
.vs-pagination span.active, .vs-pagination span:hover,
.vs-pagination a.active,
.vs-pagination a:hover {
  color: var(--white-color);
  background-color: var(--theme-color);
}
.vs-pagination li {
  display: inline-block;
  margin: 0 3px;
  list-style-type: none;
}
.vs-pagination li:last-child {
  margin-right: 0;
}
.vs-pagination li:first-child {
  margin-left: 0;
}

.post-pagination {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 40px 0;
  margin-bottom: 30px;
  margin-top: 7px;
}

.post-pagi-box {
  display: flex;
  align-items: center;
  gap: 20px;
}
.post-pagi-box .pagi-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 22px;
  border-radius: 50%;
  background-color: var(--title-color);
  color: var(--white-color);
  display: inline-block;
}
.post-pagi-box:hover .pagi-icon {
  background-color: var(--theme-color);
}
.post-pagi-box .pagi-content {
  flex: 1;
  line-height: 0;
}
.post-pagi-box .pagi-content > a {
  color: var(--body-color);
  display: inline-block;
  line-height: 1;
}
.post-pagi-box .pagi-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 15px 0px;
}
.post-pagi-box.next {
  flex-direction: row-reverse;
  text-align: right;
}

/* Medium devices */
@media (max-width: 991px) {
  .post-pagi-box .pagi-title {
    font-size: 16px;
    margin: 0 0 10px 0px;
  }
  .post-pagi-box .pagi-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }
  .post-pagi-box .post-pagination {
    padding: 25px 0;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .vs-pagination span,
  .vs-pagination a {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
  }
  .vs-pagination li:first-child a, .vs-pagination li:last-child a {
    padding: 0 10px;
  }
  .post-pagi-box {
    display: block;
  }
  .post-pagi-box .pagi-icon {
    margin-bottom: 15px;
  }
}
/*------------------- 4.6. Blog  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
blockquote.vs-quote {
  border: 1px solid var(--border-color);
  border-radius: 0 0 0 50px;
  position: relative;
  padding: 32px 50px 0.1px 50px;
  margin: 42px 0 42px 0;
}
blockquote.vs-quote p {
  font-size: 16px;
  font-family: var(--title-font);
  font-weight: 600;
  line-height: 26px;
  color: var(--title-color);
  font-style: normal;
  margin: 0;
  z-index: 2;
  position: relative;
}
blockquote.vs-quote cite {
  font-family: var(--title-font);
  font-weight: 600;
  line-height: 1;
  font-size: 16px;
  font-style: normal;
  display: block;
  width: -moz-max-content;
  width: max-content;
  padding: 9px 27.5px;
  background-color: var(--theme-color);
  color: var(--white-color);
  margin: 32px 0 -16px 50px;
}
blockquote.vs-quote::before {
  content: "\f10d";
  font-family: var(--icon-font);
  font-weight: 700;
  color: var(--theme-color);
  background-color: var(--white-color);
  display: inline-block;
  font-size: 2.8rem;
  padding: 0 10px 50px 5px;
  position: absolute;
  left: -5px;
  top: -17px;
  z-index: 1;
}

.blog-meta {
  margin-top: -0.4em;
}
.blog-meta span,
.blog-meta a {
  display: inline-block;
  margin-right: 16px;
  padding-right: 20px;
  font-size: 16px;
  color: var(--body-color);
  position: relative;
}
.blog-meta span:last-child,
.blog-meta a:last-child {
  padding-right: 0;
  margin-right: 0;
}
.blog-meta span:last-child:before,
.blog-meta a:last-child:before {
  display: none;
}
.blog-meta span:before,
.blog-meta a:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -8px;
  height: 16px;
  width: 1px;
  background-color: #D8DDE1;
}
.blog-meta span i,
.blog-meta a i {
  margin-right: 10px;
  color: var(--theme-color);
}
.blog-meta a:hover {
  color: var(--theme-color);
}

.blog-category {
  margin-bottom: -10px;
}
.blog-category a {
  display: inline-block;
  color: var(--white-color);
  padding: 4.5px 24.5px;
  margin-right: 5px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  background-color: var(--theme-color);
}
.blog-category a:hover {
  background-color: var(--white-color);
  color: var(--body-color);
  border-color: var(--theme-color);
}

.blog-title a {
  color: inherit;
}
.blog-title a:hover {
  color: var(--theme-color);
}

.vs-blog {
  margin-bottom: 30px;
}

.share-links-title {
  font-size: 20px;
  font-weight: 600;
  font-family: var(--title-font);
  color: var(--title-color);
  margin: 0 15px 0 0;
  display: inline-block;
}

.share-links {
  padding: 40px var(--blog-space-x, 40px);
  background-color: var(--white-color);
  box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 3;
}
.share-links:before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--blog-space-x, 40px);
  right: var(--blog-space-x, 40px);
  height: 1px;
  background-color: var(--secondary-color);
}
.share-links .row {
  align-items: center;
  --bs-gutter-y: 15px;
}
.share-links .tagcloud {
  display: inline-block;
}
.share-links .social-links {
  display: inline-block;
  list-style-type: none;
  margin: -2px;
  padding: 0;
}
.share-links .social-links li {
  display: inline-block;
  margin-right: 4px;
}
.share-links .social-links li:last-child {
  margin-right: 0;
}
.share-links .social-links a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: var(--title-color);
  background-color: var(--secondary-color);
  text-align: center;
  display: block;
}
.share-links .social-links a:hover {
  color: var(--white-color);
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}

.blog-inner-title {
  font-size: 30px;
  margin-top: -0.25em;
  margin-bottom: 42px;
}

.blog-date {
  background-color: var(--theme-color);
  color: var(--white-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  padding: 8px 21px;
  margin-bottom: 18px;
  position: absolute;
  right: 20px;
  top: 20px;
  border-radius: 10px;
}
.blog-date i {
  margin-right: 7px;
}
.blog-date:hover {
  color: var(--title-color);
  background-color: var(--secondary-color);
}

.blog-btn {
  display: inline-block;
  font-size: 16px;
  text-transform: uppercase;
  font-family: var(--body-font);
  font-weight: 700;
  color: var(--title-color);
  line-height: 1;
  border-radius: 9999px;
  border: 1px solid var(--title-color);
  padding: 5px 5px 5px 20px;
}
.blog-btn i {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  width: 30px;
  color: var(--white-color);
  background-color: var(--theme-color);
  border-radius: 50%;
  text-align: center;
  margin-left: 10px;
  transition: all ease 0.4s;
}
.blog-btn:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
  border-color: transparent;
}
.blog-btn:hover i {
  background-color: var(--white-color);
  color: var(--theme-color);
}

.blog-single {
  position: relative;
  margin-bottom: 60px;
}
.blog-single .blog-meta {
  margin-bottom: 12px;
}
.blog-single .blog-title {
  line-height: 1.2;
  margin-bottom: 15px;
  font-size: 30px;
}
.blog-single .blog-text {
  margin-bottom: 32px;
}
.blog-single .blog-content {
  padding: 34px var(--blog-space-x, 40px) 40px var(--blog-space-x, 40px);
  overflow: hidden;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.05);
  background-color: var(--white-color);
  position: relative;
  z-index: 2;
}
.blog-single .blog-audio,
.blog-single .blog-img {
  position: relative;
  background-color: var(--secondary-color);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
  z-index: 1;
}
.blog-single .blog-audio {
  line-height: 1;
}
.blog-single .blog-img .slick-arrow {
  --pos-x: 30px;
  --icon-size: 60px;
  border: none;
  background-color: var(--white-color);
  color: var(--theme-color);
}
.blog-single .blog-img .slick-arrow:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}
.blog-single .blog-img .play-btn {
  --icon-size: 100px;
  --icon-font-size: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: calc(var(--icon-size) / -2) 0 0 calc(var(--icon-size) / -2);
}
.blog-single .blog-img .play-btn:after, .blog-single .blog-img .play-btn::before {
  background-color: transparent;
  border: 2px solid var(--white-color);
}
.blog-single .blog-img .play-btn i {
  background-color: var(--white-color);
  color: var(--title-color);
}
.blog-single .blog-img .play-btn:hover i {
  background-color: var(--theme-color);
  color: var(--white-color);
}
.blog-single .blog-img .play-btn:hover:after, .blog-single .blog-img .play-btn:hover::before {
  border-color: var(--theme-color);
}
.blog-single:hover .blog-img .slick-arrow {
  opacity: 1;
  visibility: visible;
}

.blog-details .blog-single .blog-content {
  overflow: hidden;
  padding-bottom: 20px;
}

.blog-style1 {
  background-color: var(--white-color);
  margin-bottom: 30px;
}
.blog-style1 .blog-img {
  overflow: hidden;
  position: relative;
}
.blog-style1 .blog-img img {
  width: 100%;
  transition: all ease 0.4s;
  transform: scale(1.002);
}
.blog-style1 .blog-content {
  flex: 1;
}
.blog-style1 .blog-meta {
  margin-bottom: 16px;
}
.blog-style1 .blog-meta a {
  padding-right: 14px;
}
.blog-style1 .blog-meta a:before {
  display: none;
}
.blog-style1 .blog-title {
  margin-bottom: 17px;
}
.blog-style1 .blog-content {
  padding: 35px 40px 40px 40px;
}
.blog-style1 .blog-text {
  margin-bottom: 32px;
}
.blog-style1.layout2 {
  display: flex;
  flex-direction: row-reverse;
}
.blog-style1.layout2 .blog-text {
  margin-bottom: 22px;
}
.blog-style1.layout3 {
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08);
}
.blog-style1.layout3 .blog-text {
  margin-bottom: 22px;
}

.blog-style2 .blog-body {
  display: flex;
  flex-direction: column;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
}
.blog-style2 .blog-content {
  display: flex;
  flex-direction: column;
}
.blog-style2 .blog-img {
  overflow: hidden;
  margin-bottom: 30px;
}
.blog-style2 .blog-img img {
  width: 100%;
  transition: all ease 0.4s;
  transform: scale(1.001) rotate(0);
}
.blog-style2 .blog-author {
  align-items: center;
  display: flex;
  margin-bottom: 22px;
}
.blog-style2 .avater {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}
.blog-style2 .author-content {
  font-size: 20px;
  font-family: var(--title-font);
  font-weight: 500;
  line-height: 1;
  flex: 1;
}
.blog-style2 .author-content .name {
  color: var(--title-color);
  font-weight: 700;
}
.blog-style2 .blog-title {
  line-height: 1.45;
  margin-bottom: 19px;
}
.blog-style2 .blog-meta {
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
}
.blog-style2 .blog-meta a:not(.blog-date) {
  display: inline-block;
}
.blog-style2 .blog-date {
  color: var(--white-color);
  font-size: 16px;
  text-align: center;
  border-radius: 0;
  right: 0;
  top: 0;
  position: relative;
  margin: 0 25px 0 0;
  background-color: var(--title-color);
  transition: all ease 0.4s;
}
.blog-style2 .blog-date::before {
  display: none;
}
.blog-style2 .blog-date .day {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--white-color);
  margin-bottom: 3px;
}
.blog-style2:hover .blog-img img {
  transform: scale(1.1) rotate(5deg);
}
.blog-style2:hover .blog-date {
  background-color: var(--theme-color);
}
@media (min-width: 992px) {
  .blog-style2:nth-child(odd) .blog-content,
  .blog-style2:nth-child(odd) .blog-body {
    flex-direction: column-reverse;
  }
  .blog-style2:nth-child(odd) .blog-title {
    margin-top: 22px;
  }
  .blog-style2:nth-child(odd) .blog-img {
    margin-bottom: 0;
    margin-top: 28px;
  }
  .blog-style2:nth-child(odd) .blog-author {
    margin-bottom: 0;
  }
}

/* Medium Large devices */
@media (max-width: 1399px) {
  .blog-style1 .blog-content {
    padding: 30px 20px 30px 20px;
  }
  .blog-style1 .blog-meta {
    margin-bottom: 6px;
  }
  .blog-style1 .blog-title {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  .blog-style2 .blog-body {
    padding: 20px;
  }
  .blog-style2 .blog-meta span,
  .blog-style2 .blog-meta a {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: 0;
    font-size: 14px;
  }
  .blog-style2 .blog-meta span:before,
  .blog-style2 .blog-meta a:before {
    display: none;
  }
  .blog-style2 .blog-meta .blog-date {
    font-size: 14px;
    margin: 0 10px 0 0;
  }
  .blog-style2 .author-content {
    font-size: 16px;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  blockquote.vs-quote {
    padding: 25px 30px 0.1px 50px;
    margin: 35px 0 40px 0;
  }
  blockquote.vs-quote cite {
    margin: 20px 0 -16px 0;
    padding: 8px 15px;
  }
  .blog-style1 .blog-content {
    padding: 30px 30px 30px 30px;
  }
  .blog-style1 .blog-meta a {
    padding-right: 10px;
  }
  .blog-style1.layout2 {
    display: block;
  }
  .blog-single {
    --blog-space-y: 40px;
    --blog-space-x: 30px;
  }
  .blog-single .blog-title {
    font-size: 30px;
  }
  .blog-style2 .blog-meta i {
    display: block;
    margin-right: 0;
    margin-bottom: 3px;
  }
  .blog-style2 .blog-meta a,
  .blog-style2 .blog-meta span {
    text-align: center;
    line-height: 1.4;
  }
  .blog-style2 .blog-meta .blog-date {
    line-height: 0.5;
    padding-bottom: 15px;
  }
  .blog-style2 .author-content {
    font-size: 14px;
  }
  .blog-style2 .blog-author {
    margin-bottom: 15px;
  }
  .blog-style2 .blog-img {
    margin-bottom: 15px;
  }
  .blog-style2 .inside-meta {
    flex: 1;
    line-height: 0;
    display: flex;
    justify-content: space-around;
  }
}
/* Small devices */
@media (max-width: 767px) {
  blockquote.vs-quote {
    padding: 20px 15px 0.1px 30px;
    margin: 35px 0 40px 0;
  }
  blockquote.vs-quote cite {
    margin: 20px 0 -16px 0;
    padding: 7px 12px;
    font-size: 14px;
  }
  blockquote.vs-quote::before {
    font-size: 1.8rem;
  }
  .blog-single {
    --blog-space-y: 40px;
    --blog-space-x: 20px;
  }
  .blog-single .blog-img .play-btn {
    --icon-size: 50px;
  }
  .blog-single .blog-title {
    font-size: 24px;
    line-height: 1.3;
  }
  .blog-single .blog-date {
    font-size: 14px;
    padding: 7px 14px;
    border-radius: 6px;
  }
  .blog-style1 .blog-content {
    padding: 25px 20px 30px 20px;
  }
  .blog-style1 .blog-title {
    margin-bottom: 5px;
    line-height: 1.6;
  }
  .blog-style1 .blog-text {
    margin-bottom: 15px;
  }
}
/*------------------- 4.7. Comments  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.vs-comment-form {
  margin: var(--blog-space-y, 40px) 0 var(--blog-space-y, 50px) 0;
}

.comment-respond {
  position: relative;
  background-color: var(--white-color);
  padding: 40px;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.05);
}
.comment-respond .form-title a#cancel-comment-reply-link {
  font-size: 0.7em;
  text-decoration: underline;
}
.comment-respond .custom-checkbox.notice {
  margin-bottom: 25px;
}
.comment-respond .row {
  --bs-gutter-x: 25px;
}
.comment-respond .form-control {
  font-size: 16px;
}
.comment-respond .form-group i {
  color: var(--body-color);
}
.comment-respond input[type=checkbox] ~ label:before {
  background-color: var(--body-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  top: 3.5px;
}
.comment-respond input[type=checkbox]:checked ~ label:before {
  background-color: var(--theme-color);
  border-color: transparent;
}
.comment-respond .blog-inner-title {
  border: none;
  margin-bottom: 10px;
  padding-bottom: 0;
}
.comment-respond .form-text {
  margin-bottom: 22px;
  font-size: 16px;
  color: var(--body-color);
}

.vs-comments-wrap {
  padding: 40px var(--bs-gutter-x, 40px) 10px var(--bs-gutter-x, 40px);
  margin: 40px 0;
  background-color: var(--white-color);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.05);
}
.vs-comments-wrap .description p:last-child {
  margin-bottom: 0;
}
.vs-comments-wrap .comment-respond {
  margin: 30px 0;
}
.vs-comments-wrap pre {
  background: #ededed;
  color: #666;
  font-size: 14px;
  margin: 20px 0;
  overflow: auto;
  padding: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.vs-comments-wrap blockquote {
  background-color: #eaf8f9;
}
.vs-comments-wrap li {
  margin: 0;
}
.vs-comments-wrap .vs-post-comment {
  position: relative;
  padding: 40px 40px 31px 40px;
  display: flex;
  margin: 30px 0 30px 0;
  background-color: var(--secondary-color);
  border: 1px solid transparent;
  transition: all ease 0.4s;
}
.vs-comments-wrap .vs-post-comment:hover {
  border-color: var(--theme-color);
}
.vs-comments-wrap ul.comment-list {
  list-style: none;
  margin: -10px 0 0 0;
  padding: 0;
}
.vs-comments-wrap ul.comment-list ul ul,
.vs-comments-wrap ul.comment-list ul ol,
.vs-comments-wrap ul.comment-list ol ul,
.vs-comments-wrap ul.comment-list ol ol {
  margin-bottom: 0;
}
.vs-comments-wrap .comment-avater {
  width: 82px;
  height: 82px;
  margin-right: 20px;
  border-radius: 7px;
  overflow: hidden;
  background-color: var(--smoke-color);
}
.vs-comments-wrap .comment-avater img {
  width: 100%;
}
.vs-comments-wrap .comment-content {
  flex: 1;
  align-self: center;
}
.vs-comments-wrap .commented-on {
  position: relative;
  display: inline-block;
  color: var(--title-color);
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 600;
}
.vs-comments-wrap .commented-on i {
  margin-right: 7px;
  font-size: 0.9rem;
  color: var(--theme-color);
}
.vs-comments-wrap .name {
  margin: -0.25em 0 7px 0;
  font-size: 24px;
}
.vs-comments-wrap .comment-top {
  display: flex;
  justify-content: space-between;
}
.vs-comments-wrap .text {
  color: var(--body-color);
  margin-bottom: 0;
}
.vs-comments-wrap .text:last-of-type {
  margin-bottom: -0.25em;
}
.vs-comments-wrap .children {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-left: 40px;
}
.vs-comments-wrap .reply_and_edit {
  margin-top: 25px;
}
.vs-comments-wrap .replay-btn {
  color: var(--title-color);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--title-font);
  display: inline-block;
  text-transform: capitalize;
}
.vs-comments-wrap .replay-btn i {
  margin-right: 10px;
  color: var(--theme-color);
}
.vs-comments-wrap .replay-btn:hover {
  color: var(--theme-color);
}
.vs-comments-wrap .review-rating {
  background-color: var(--theme-color);
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 9px 15px;
}
.vs-comments-wrap .star-rating {
  font-size: 10px;
  width: 70px;
}
.vs-comments-wrap .star-rating:before {
  color: var(--white-color);
}
.vs-comments-wrap .star-rating span:before {
  color: var(--white-color);
}
.vs-comments-wrap .review .vs-post-comment {
  padding: 0;
}
.vs-comments-wrap .review .comment-avater {
  width: 170px;
  height: auto;
}

.woocommerce-Reviews .vs-comments-wrap {
  padding: 0;
  background-color: transparent;
}
.woocommerce-Reviews .woocommerce-Reviews-title {
  margin-bottom: 40px;
}

.vs-comments-wrap.vs-comment-form {
  margin: 0;
}

/* Medium Large devices */
@media (max-width: 1399px) {
  .comment-section {
    padding: 40px 40px 0px 40px;
  }
  .vs-comments-wrap .vs-post-comment {
    padding: 30px 30px 30px 30px;
    margin: 30px 0 30px 0;
  }
  .vs-comments-wrap .comment-avater {
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
  .vs-comments-wrap .name {
    margin: -0.1em 15px 0 0;
    font-size: 20px;
  }
  .comment-respond {
    padding: 30px;
  }
  .comment-respond .form-control {
    height: 60px;
    font-size: 14px;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .vs-comments-wrap {
    padding: 40px 30px 10px 30px;
  }
  .vs-comments-wrap .vs-post-comment {
    display: block;
    padding: 30px 20px 20px 20px;
  }
  .vs-comments-wrap .star-rating {
    position: relative;
    top: 0;
    right: 0;
  }
  .vs-comments-wrap .comment-top {
    display: block;
  }
  .vs-comments-wrap .comment-avater {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .vs-comments-wrap .children {
    margin-left: 40px;
  }
  .vs-comments-wrap .review .vs-post-comment {
    padding: 30px;
  }
  .comment-respond .form-text {
    font-size: 14px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .vs-comments-wrap {
    padding: 40px 20px 10px 20px;
  }
  .vs-comments-wrap .children {
    margin-left: 20px;
  }
  .vs-comments-wrap .name {
    margin: -0.1em 0 7px 0;
    font-size: 20px;
    display: block;
  }
  .vs-comments-wrap .review-rating {
    position: relative;
    right: 0;
    top: 0;
    margin: 10px 0 10px 0;
    width: -moz-max-content;
    width: max-content;
  }
  .vs-comments-wrap .review .vs-post-comment {
    padding: 30px 20px;
  }
  .comment-respond {
    padding: 40px 20px 40px 20px;
  }
  .comment-respond textarea,
  .comment-respond input {
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .comment-respond label {
    font-size: 14px;
  }
  .comment-section {
    padding: 40px 20px 0px 20px;
  }
}
/*------------------- 4.8. Hero Area  -------------------*/
.hero-layout1 .ls-gui-element.ls-bottom-nav-wrapper {
  position: absolute !important;
  left: 140px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: auto !important;
}

.hero-layout1 .ls-gui-element.ls-bottom-nav-wrapper::after,
.hero-layout1 .ls-gui-element.ls-bottom-nav-wrapper::before {
  content: "";
  position: absolute;
  --shape-height: 51px;
  top: calc(var(--shape-height) / -1);
  left: 50%;
  height: var(--shape-height);
  width: 2px;
  margin-left: -1px;
  /* background-color: var(--white-color); */
  background-image: linear-gradient(var(--gradient-direction, to top), var(--theme-color) 0%, rgba(33, 32, 32, 0.9) 100%);
  z-index: 44;
}

.hero-layout1 .ls-gui-element.ls-bottom-nav-wrapper::after {
  top: auto;
  bottom: calc(var(--shape-height) / -1);
  --gradient-direction: to bottom;
}

.hero-layout1.ls-v6 .ls-bottom-slidebuttons a {
  display: block !important;
  margin: 25px 0;
  width: 12px !important;
  height: 12px !important;
  border: none !important;
  background-color: var(--white-color) !important;
  border-radius: 0;
  transform: scale(1) !important;
  border: none !important;
  position: relative;
}

.hero-layout1.ls-v6 .ls-bottom-nav-wrapper .ls-bottom-slidebuttons a:hover {
  transform: scale(1) !important;
  width: 12px !important;
  height: 12px !important;
  border: none !important;
  background-color: var(--theme-color) !important;
}

.hero-layout1.ls-v6 .ls-bottom-slidebuttons a::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  bottom: -10px;
  right: -10px;
  border: 2px solid var(--theme-color);
  display: inline-block;
  transition: all ease 0.4s;
  opacity: 0;
  visibility: hidden;
}

.hero-layout1.ls-v6 .ls-bottom-slidebuttons a.ls-nav-active {
  background-color: var(--theme-color) !important;
}

.hero-layout1.ls-v6 .ls-bottom-slidebuttons a.ls-nav-active::before {
  opacity: 1;
  visibility: visible;
}

.hero-layout1.ls-v6 .ls-nav-sides {
  display: none !important;
}

.ls-layer .play-btn i,
.ls-layer .play-btn:before,
.ls-layer .play-btn:after {
  border-radius: 50%;
}

.ls-icon-btn {
  width: 58px;
  height: 58px;
  display: inline-block;
  border-radius: 50%;
  background-color: var(--white-color);
  text-align: center;
  font-size: 24px;
  line-height: 58px;
  color: var(--theme-color);
}

.ls-icon-btn:hover {
  background-color: var(--title-color);
  color: var(--white-color);
}

.ls-layer .vs-btn.style4 {
  outline: none;
  border: 2px solid var(--white-color);
  color: var(--white-color);
  background-color: transparent;
}

.ls-hero-btn {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.ls-hero-btn .vs-btn {
  height: 58px;
  width: 222px;
  font-family: var(--title-font);
  line-height: 58px;
  padding: 0;
}

.ls-hero-btn .vs-btn.style4 {
  line-height: 56px;
}

.ls-gui-element.ls-nav-next,
.ls-gui-element.ls-nav-prev {
  width: 60px !important;
  height: 60px !important;
  line-height: 60px !important;
  color: var(--theme-color);
  background-color: var(--white-color);
  border-radius: 0 !important;
  text-align: center;
  font-size: 24px;
}

.ls-gui-element.ls-nav-next:hover,
.ls-gui-element.ls-nav-prev:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
  transform: none !important;
}

.ls-v6 .ls-gui-element.ls-nav-prev {
  left: 110px !important;
}

.ls-v6 .ls-gui-element.ls-nav-next {
  right: 110px !important;
}

.ls-gui-element.ls-nav-next:after,
.ls-gui-element.ls-nav-prev:after {
  display: none;
}

.ls-gui-element.ls-nav-next:before {
  content: "\f178";
  font-family: var(--icon-font);
}

.ls-gui-element.ls-nav-prev:before {
  content: "\f177";
  font-family: var(--icon-font);
}

@media (max-width: 1700px) {
  .hero-layout1 .ls-gui-element.ls-bottom-nav-wrapper {
    left: 40px !important;
  }
}
@media (max-width: 1200px) {
  .hero-layout1 .ls-gui-element.ls-bottom-nav-wrapper {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .ls-layer .play-btn.style2 i {
    --icon-size: 60px;
  }
  .ls-icon-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 17px;
  }
  .ls-hero-btn .vs-btn {
    width: 160px;
    height: 45px;
    line-height: 45px;
    font-size: 12px;
  }
  .ls-hero-btn .vs-btn.style4 {
    line-height: 41px;
  }
}
@media (max-width: 767px) {
  .ls-layer .play-btn.style2 i {
    --icon-size: 40px;
    --icon-font-size: 14px;
  }
  .ls-icon-btn {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
  }
  .ls-hero-btn .vs-btn {
    width: 145px;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
  }
  .ls-hero-btn .vs-btn.style4 {
    line-height: 38px;
  }
}
.inner-hero-link {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/*------------------- 4.9. Error  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.error-content {
  text-align: center;
}
.error-content .vs-btn {
  padding: 18px 40px;
}

.error-img {
  margin-bottom: 58px;
}

.error-text {
  margin-bottom: 18px;
  font-weight: 500;
  max-width: 570px;
  margin: 0 auto 33px auto;
}

/* Small devices */
@media (max-width: 767px) {
  .error-img {
    margin-bottom: 30px;
  }
}
/*------------------- 4.10. About  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.about-wrap1 {
  padding-top: 430px;
  margin-top: -430px;
}

.about-shape1 {
  position: absolute;
  right: 0;
  bottom: 0;
}

.media-style1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 385px;
  height: 100%;
  background-color: var(--secondary-color);
}
.media-style1 .media-inner {
  display: flex;
  padding: 5px 25px 5px 5px;
  background-color: var(--theme-color);
  border-radius: 9999px;
}
.media-style1 .media-icon {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  background-color: var(--white-color);
  color: var(--theme-color);
  border-radius: 50%;
  margin-right: 20px;
}
.media-style1 .media-label {
  color: var(--white-color);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--title-font);
}
.media-style1 .media-text {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
  color: var(--white-color);
}

.media-style2 {
  display: flex;
  align-items: center;
  text-align: left;
}
.media-style2 .media-icon {
  margin-right: 25px;
}
.media-style2 .media-title {
  color: var(--white-color);
  font-family: var(--title-font);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 17px;
  line-height: 1;
}
.media-style2 .media-text {
  color: var(--white-color);
  margin: 0;
  line-height: 1;
}

.media-style3 {
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--title-color);
  z-index: 1;
  padding: 35px 40px 35px 60px;
}
.media-style3:before {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: var(--theme-color);
  height: 100%;
  width: 103px;
  left: 0;
  top: 0;
  transition: all ease 0.4s;
}
.media-style3 .media-icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--white-color);
  margin-right: 30px;
}
.media-style3 .media-label {
  color: var(--white-color);
  line-height: 1;
  margin-bottom: 5px;
}
.media-style3 .media-title {
  color: var(--white-color);
  line-height: 34px;
  margin-bottom: 0;
  font-size: 24px;
}
.media-style3:hover:before {
  width: 100%;
}

.media-style4 {
  display: flex;
  margin-top: 40px;
}
.media-style4 .media-icon {
  display: block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: var(--theme-color);
  font-size: 20px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--white-color);
  margin-right: 20px;
}
.media-style4 .media-text,
.media-style4 .media-label {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--title-font);
  color: var(--white-color);
  display: block;
}
.media-style4 .media-text {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0;
}

.media-style5 {
  display: flex;
  align-items: center;
  padding: 20px;
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  border-radius: 20px;
}
.media-style5 .media-title {
  font-size: 20px;
  margin-bottom: 7px;
  margin-top: -0.2em;
  font-weight: 600;
}
.media-style5 .media-info {
  font-size: 14px;
  margin-bottom: -0.2em;
}
.media-style5 .media-info a {
  display: inline-block;
  color: inherit;
}
.media-style5 .media-info a:hover {
  color: var(--theme-color);
}
.media-style5 .media-icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  font-size: 30px;
  border-radius: 12px;
  margin-right: 20px;
  display: inline-block;
  text-align: center;
  color: var(--title-color);
  background-color: var(--secondary-color);
  transition: all ease 0.4s;
}
.media-style5:hover .media-icon {
  color: var(--white-color);
  background-color: var(--theme-color);
}

.counter-style2 {
  background-color: var(--theme-color);
}
.counter-style2 .counter-item {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.2);
  padding: 37px 20px;
  text-align: center;
  transition: all ease 0.4s;
  background-color: transparent;
}
.counter-style2 .counter-item:last-child {
  border: none;
}
.counter-style2 .counter-item:hover {
  background-color: var(--title-color);
}
.counter-style2 .counter-number {
  color: var(--white-color);
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
}
.counter-style2 .counter-text {
  color: var(--white-color);
  font-size: 18px;
  font-weight: 600;
  font-family: var(--title-font);
  margin-bottom: 0;
}

.social-style3 a,
.social-style1 a {
  display: inline-block;
  background-color: #727272;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  color: var(--white-color);
  transition: all ease 0.4s;
  margin-right: 7px;
}
.social-style3 a:last-child,
.social-style1 a:last-child {
  margin-right: 0;
}
.social-style3 a:hover,
.social-style1 a:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}

.social-style2 .social-title {
  color: var(--white-color);
  display: inline-block;
  margin-right: 15px;
}
.social-style2 a {
  color: var(--white-color);
  display: inline-block;
  font-size: 18px;
  margin-right: 20px;
}
.social-style2 a:last-child {
  margin-right: 0;
}
.social-style2 a:hover {
  color: var(--title-color);
}

.social-style3 {
  margin-bottom: 30px;
}
.social-style3 a {
  border-radius: 10px;
  background-color: var(--secondary-color);
  color: var(--title-color);
}

.social-style4 a {
  width: 46px;
  height: 46px;
  line-height: 46px;
  display: inline-block;
  text-align: center;
  margin-right: 7px;
  background-color: var(--smoke-color);
  color: var(--title-color);
  transition: all ease 0.4s;
}
.social-style4 a:last-child {
  margin-right: 0;
}
.social-style4 a:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}

.list-style1 ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-style1 li {
  position: relative;
  margin-bottom: 13px;
  padding-left: 27px;
}
.list-style1 li:before {
  content: "\f336";
  font-family: var(--icon-font);
  font-weight: 400;
  color: var(--theme-color);
  font-size: 18px;
  position: absolute;
  left: 0;
  top: -1px;
}

.list-style2 ul {
  margin-bottom: 40px;
}
.list-style2 li {
  position: relative;
  margin-bottom: 9px;
  padding-left: 22px;
}
.list-style2 li:last-child {
  margin-bottom: 0;
}
.list-style2 li > img:first-child {
  position: absolute;
  left: 0;
  top: 7px;
}

.img-box1 {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  padding-bottom: 53px;
  z-index: 1;
}
.img-box1 .img1 {
  display: inline-block;
}
.img-box1 .img2 {
  display: inline-block;
  vertical-align: top;
}
.img-box1 .img3 {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 6px 0 0 6px;
  background-color: var(--white-color);
}
.img-box1 .img4 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
}
.img-box1 .img5 {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.img-box2 {
  position: relative;
  padding-bottom: 68px;
  margin-bottom: 30px;
}
.img-box2 .line {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background-color: var(--theme-color);
}
.img-box2 .line::after, .img-box2 .line::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 33px;
  background-color: var(--white-color);
}
.img-box2 .line:after {
  height: 10px;
  border-radius: 50%;
  z-index: 1;
  background-color: inherit;
}
.img-box2 .img-1 {
  position: relative;
  padding-left: 30px;
  z-index: 1;
}
.img-box2 .img-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.img-box2 .img-2::after, .img-box2 .img-2::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  bottom: 0;
  width: 195px;
  border: 2px solid var(--white-color);
  z-index: -1;
}
.img-box2 .img-2:after {
  top: -26px;
  left: -26px;
  width: 210px;
}
.img-box2 .img-3 {
  position: absolute;
  right: 30px;
  top: 0;
  z-index: -1;
}

.img-box3 {
  position: relative;
  height: 100%;
}
.img-box3 .play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.img-box3 .img-1 {
  width: 900px;
  height: 100%;
  width: 100%;
}

.exp-box {
  padding: 31px 40px;
  max-width: 190px;
  margin-bottom: 40px;
}
.exp-box .exp-year {
  font-size: 64px;
  font-weight: 700;
  margin: 0 0 3px 0;
  line-height: 1;
  color: var(--theme-color);
}
.exp-box .exp-text {
  color: var(--title-color);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
  font-family: var(--title-font);
}

.author-style1 {
  align-items: center;
  display: flex;
}
.author-style1 .author-img {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--theme-color);
  padding: 5px;
  background-color: var(--white-color);
  margin-right: 15px;
}
.author-style1 .author-img img {
  border-radius: 50%;
}
.author-style1 .author-name {
  font-size: 18px;
  margin-bottom: 5px;
  line-height: 1;
  margin-top: 4px;
}
.author-style1 .author-degi {
  margin-bottom: 0;
  line-height: 1;
}

.about-box1 {
  display: flex;
  gap: 30px;
  position: relative;
  z-index: 1;
  margin-bottom: 40px;
  text-align: left;
}
.about-box1 .title-rotate {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--title-color);
  color: var(--white-color);
  font-size: 36px;
  line-height: 46px;
  font-weight: 700;
  width: 225px;
  height: 295px;
}
.about-box1 .title-rotate .text {
  transform: rotate(-90deg);
  display: block;
  width: 200px;
}
.about-box1 .about-body {
  background-color: var(--smoke-color);
  padding: 35px 35px 15px 35px;
  margin-right: -215px;
}
.about-box1 .about-title {
  margin-bottom: 26px;
}
.about-box1 .about-author {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-left: 50px;
  position: relative;
}
.about-box1 .about-author::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 40px;
  background-color: var(--theme-color);
  margin-top: -1px;
}

/* Medium Large devices */
@media (max-width: 1399px) {
  .about-box1 .title-rotate {
    font-size: 20px;
    line-height: 30px;
    width: 120px;
    height: 270px;
  }
  .about-box1 .title-rotate .text {
    transform: rotate(-90deg);
    display: block;
    width: 145px;
  }
  .about-box1 .about-title {
    margin-bottom: 10px;
  }
  .about-box1 .about-body {
    background-color: var(--smoke-color);
    padding: 30px 20px 10px 20px;
    margin-right: -170px;
  }
  .counter-style2 .counter-item {
    padding: 25px 20px;
  }
  .about-wrap1 {
    padding-top: var(--section-space);
    margin-top: 0;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .media-style2 .media-icon {
    margin-right: 15px;
  }
  .media-style2 .media-title {
    font-size: 18px;
    margin-bottom: 11px;
  }
  .media-style3 {
    display: block;
    text-align: center;
    padding: 20px 25px 30px 25px;
  }
  .media-style3:before {
    bottom: auto;
    top: 0;
    right: 0;
    width: auto;
    height: 60px;
  }
  .media-style3 .media-label {
    margin-bottom: 10px;
  }
  .media-style3 .media-icon {
    margin: 0 auto 20px auto;
  }
  .media-style3 .media-title {
    line-height: 1.4;
    font-size: 20px;
  }
  .media-style3:hover:before {
    height: 100%;
  }
  .exp-box {
    padding: 15px 25px;
    max-width: 100%;
    margin-bottom: 20px;
  }
  .exp-box .exp-year {
    font-size: 40px;
  }
  .list-style2 ul {
    margin-bottom: 30px;
  }
  .img-box3 .img-1 {
    height: 600px;
    clip-path: none;
    background-size: cover;
  }
  .social-style2 .social-title {
    margin-right: 10px;
    font-size: 14px;
  }
  .social-style2 a {
    font-size: 14px;
    margin-right: 10px;
  }
  .about-box1 .about-body {
    margin-right: -80px;
    padding-bottom: 25px;
  }
  .about-box1 .title-rotate {
    height: 100%;
  }
  .counter-style2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .counter-style2 .counter-item {
    border-right-width: 1px;
    border-bottom-width: 0px;
  }
  .counter-style2 .counter-text {
    font-size: 14px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .media-style2 .media-icon {
    margin-right: 10px;
    max-width: 30px;
  }
  .media-style2 .media-title {
    font-size: 16px;
  }
  .social-style1 a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 2px;
  }
  .media-style3 .media-title {
    line-height: 1.4;
    font-size: 18px;
  }
  .social-style2 .social-title {
    display: none;
  }
  .about-box1 .about-body {
    margin-right: 0;
  }
  .counter-style2 {
    display: block;
  }
  .counter-style2 .counter-item {
    border-width: 0 0 1px 0;
    padding: 25px 20px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .img-box1 .img1 {
    width: 49%;
  }
  .img-box1 .img2 {
    max-width: 49%;
  }
  .img-box1 .img3 {
    padding: 0;
    width: 37%;
  }
  .img-box1 .img4 {
    max-width: 100px;
  }
  .img-box1 .img5 {
    max-width: 210px;
  }
  .img-box2 .img-2 {
    position: absolute;
    width: 45%;
    margin-top: 30px;
  }
  .img-box2 .img-2 img {
    width: 100%;
  }
  .img-box2 .img-2::after, .img-box2 .img-2::before {
    display: none;
  }
  .img-box2 .img-1 {
    max-width: 80%;
    padding-left: 20px;
  }
  .img-box2 .img-3 {
    right: 0;
  }
  .about-wrap1 {
    padding-top: var(--section-space-mobile);
  }
  .img-box3 .img-1 {
    height: 300px;
  }
  .about-box1 {
    display: block;
  }
  .about-box1 .title-rotate {
    height: auto;
    padding: 15px;
    width: 100%;
    margin-bottom: 20px;
  }
  .about-box1 .title-rotate .text {
    width: auto;
    transform: rotate(0);
  }
  .about-box1 .about-body {
    text-align: center;
  }
}
/*------------------- 4.11. Simple Sections  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.body-bg1 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: var(--secondary-color);
}
.body-bg1 .bg-1 {
  flex: 1;
  height: 100%;
}
.body-bg1 .bg-2 {
  width: 100%;
  height: 100%;
  max-width: 1320px;
}

.contact-map {
  line-height: 0;
  /* Medium devices */
}
@media (max-width: 991px) {
  .contact-map iframe {
    height: 400px;
  }
}

@media (min-width: 1199px) {
  .brand-style1 .brand-container {
    max-width: var(--main-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--container-gutters) / 2);
    padding-right: calc(var(--container-gutters) / 2);
  }
}
.brand-style1 .brand-inner {
  text-align: center;
  padding: 60px;
}

.bg1-home3 {
  background-position: bottom center;
  background-size: 100% auto;
}

/* Extra large devices */
@media (max-width: 1500px) {
  .body-bg1 .bg-2 {
    max-width: 1050px;
  }
  .bg1-home3 {
    background-size: cover;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .brand-style1 .brand-inner {
    padding: 40px 15px;
  }
}
/*------------------- 4.12. Popup Side Menu  -------------------*/
.sidemenu-wrapper {
  position: fixed;
  z-index: 99999;
  right: 0;
  top: 0;
  height: 100%;
  width: 0;
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.8s;
}
.sidemenu-wrapper .closeButton {
  display: inline-block;
  border: 1px solid;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  padding: 0;
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: var(--black-color);
  color: var(--white-color);
  border-radius: 50%;
  transform: rotate(0);
  transition: all ease 0.4s;
  z-index: 2;
}
.sidemenu-wrapper .closeButton:hover {
  color: var(--white-color);
  background-color: var(--theme-color);
  border-color: transparent;
  transform: rotate(90deg);
}
.sidemenu-wrapper .sidemenu-content {
  background-color: var(--body-bg);
  width: 450px;
  margin-left: auto;
  padding: 40px 30px 80px 30px;
  height: 100%;
  overflow: scroll;
  position: relative;
  right: -500px;
  cursor: auto;
  transition-delay: 1s;
  transition: right ease 1s;
}
.sidemenu-wrapper .sidemenu-content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
  background-color: #F5F5F5;
}
.sidemenu-wrapper .sidemenu-content::-webkit-scrollbar {
  width: 2px;
  background-color: #F5F5F5;
}
.sidemenu-wrapper .widget {
  padding: 0;
  border: none;
  background-color: transparent;
  margin-bottom: 50px;
}
.sidemenu-wrapper.show {
  opacity: 1;
  visibility: visible;
  width: 100%;
  transition: all ease 0.8s;
}
.sidemenu-wrapper.show .sidemenu-content {
  right: 0;
  opacity: 1;
  visibility: visible;
}

/*------------------- 4.13. Popup Search  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.popup-search-box {
  position: fixed;
  top: 0;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.95);
  height: 0;
  width: 0;
  overflow: hidden;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  border-radius: 50%;
  transform: translateX(-50%);
  transition: all ease 0.4s;
}
.popup-search-box button.searchClose {
  width: 60px;
  height: 60px;
  line-height: 60px;
  position: absolute;
  top: 40px;
  right: 40px;
  border: none;
  background-color: var(--theme-color);
  color: var(--white-color);
  font-size: 30px;
  border-radius: 50%;
  transition: all ease 0.4s;
}
.popup-search-box button.searchClose i {
  line-height: inherit;
}
.popup-search-box button.searchClose:hover {
  color: var(--title-color);
  background-color: var(--white-color);
}
.popup-search-box form {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  padding-bottom: 40px;
  cursor: auto;
  width: 100%;
  max-width: 700px;
  transform: translate(-50%, -50%) scale(0);
  transition: transform ease 0.4s;
  /* Large devices */
}
@media (max-width: 1199px) {
  .popup-search-box form {
    max-width: 600px;
  }
}
.popup-search-box form input {
  font-size: 14px;
  height: 70px;
  width: 100%;
  border: 2px solid var(--theme-color);
  background-color: transparent;
  padding-left: 30px;
  color: #fff;
  border-radius: 50px;
}
.popup-search-box form input::-moz-placeholder {
  color: #fff;
}
.popup-search-box form input::placeholder {
  color: #fff;
}
.popup-search-box form button {
  position: absolute;
  top: 0px;
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  right: 13px;
  color: var(--white-color);
  cursor: pointer;
  width: 70px;
  height: 70px;
  transition: all ease 0.4s;
  transform: scale(1.001);
}
.popup-search-box form button:hover {
  transform: scale(1.1);
}
.popup-search-box.show {
  opacity: 1;
  visibility: visible;
  width: 100.1%;
  height: 100%;
  transition: all ease 0.4s;
  border-radius: 0;
}
.popup-search-box.show form {
  transition-delay: 0.5s;
  transform: translate(-50%, -50%) scale(1);
}

/*------------------- 4.14. Service  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.service-style1 {
  background-color: var(--white-color);
  margin-bottom: 30px;
}
.service-style1 .service-img {
  overflow: hidden;
}
.service-style1 .service-img img {
  width: 100%;
  transform: scale(1.001) rotate(0);
  transition: all ease 0.4s;
}
.service-style1:hover .service-img img {
  transform: scale(1.1) rotate(5deg);
}
.service-style1 .service-content {
  padding: 0.1px 20px 20px 20px;
}
.service-style1 .service-body {
  background-color: var(--secondary-color);
  padding: 0.1px 20px 20px 20px;
  position: relative;
  margin-top: -50px;
  z-index: 1;
}
.service-style1 .service-icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: var(--white-color);
  margin-top: -25px;
  margin-bottom: 15px;
}
.service-style1 .service-shape {
  position: absolute;
  right: 0;
  top: 0;
}
.service-style1 .service-text {
  margin-bottom: 22px;
}
.service-style1 .vs-btn {
  width: 100%;
}

.service-style2 {
  background-color: var(--white-color);
  display: flex;
  align-items: center;
  position: relative;
  padding: 40px;
  margin-bottom: 30px;
}
.service-style2 .service-img {
  width: 333px;
  margin-right: 40px;
  overflow: hidden;
}
.service-style2 .service-img img {
  transform: scale(1.001);
  transition: all ease 0.4s;
}
.service-style2:hover .service-img img {
  transform: scale(1.1);
}
.service-style2 .service-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.service-style2 .service-icon {
  text-align: center;
  width: 71px;
  height: 71px;
  line-height: 69px;
  border-radius: 50%;
  background-color: var(--theme-color);
}
.service-style2 .service-content {
  flex: 1;
}
.service-style2 .service-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--white-color);
  -webkit-text-stroke: 1px var(--body-color);
  line-height: 1;
}
.service-style2 .service-list {
  margin: 0 0 18px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.service-style2 .service-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 3px;
}
.service-style2 .service-list li img {
  position: absolute;
  left: 0;
  top: 7.5px;
}

.service-style4,
.service-style3 {
  background-color: var(--white-color);
  padding: 35px 40px 40px 40px;
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08);
  position: relative;
}
.service-style4 .service-icon,
.service-style3 .service-icon {
  background-color: var(--title-color);
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  transition: all ease 0.4s;
}
.service-style4 .service-number,
.service-style3 .service-number {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  display: block;
  margin-bottom: 17px;
  color: var(--title-color);
  opacity: 0.4;
  transition: all ease 0.4s;
}
.service-style4:hover .service-icon,
.service-style3:hover .service-icon {
  background-color: var(--theme-color);
}
.service-style4:hover .service-number,
.service-style3:hover .service-number {
  opacity: 1;
}

.service-style3 .service-text {
  margin-bottom: 22px;
}

.service-style4 {
  min-height: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.service-style4 .service-title {
  margin-bottom: -0.3em;
}

.service-img-style1 {
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.service-img-style1 img {
  width: 100%;
  transition: all ease 0.4s;
  transform: scale(1.001);
}
.service-img-style1:hover img {
  transform: scale(1.2);
}

.service-bottom-text1 {
  line-height: 1;
  margin-top: 60px;
  margin-bottom: 27px;
  text-align: center;
}

.thumb-style1 {
  margin-bottom: 30px;
  position: relative;
}
.thumb-style1::before {
  content: "";
  position: absolute;
  top: -30px;
  bottom: -30px;
  right: -30px;
  width: 563px;
  background-color: var(--theme-color);
  clip-path: polygon(75px 0%, 100% 0, 100% 100%, 0% 100%);
}
.thumb-style1 .slick-arrow {
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  opacity: 1;
  width: 100%;
  height: 50px;
  line-height: 1;
  margin: 0 0 20px 0;
  font-size: 18px;
  position: relative;
  transform: none;
  visibility: visible;
  background-color: transparent;
  color: var(--white-color);
  border: 2px solid var(--white-color);
}
.thumb-style1 .slick-arrow:hover {
  background-color: var(--white-color);
  color: var(--theme-color);
}
.thumb-style1 .slick-next {
  margin: 0;
}
@media (min-width: 1199px) {
  .thumb-style1 .slick-next i::before {
    content: "\f063";
  }
  .thumb-style1 .slick-prev i::before {
    content: "\f062";
  }
}
.thumb-style1 .thumb-item {
  display: flex;
  align-items: center;
  background-color: var(--white-color);
  padding: 10px;
  margin-bottom: 20px;
  transition: all ease 0.4s;
  cursor: pointer;
}
.thumb-style1 .thumb-item:hover {
  background-color: var(--title-color);
}
.thumb-style1 .thumb-item:hover .thumb-title {
  color: var(--white-color);
}
.thumb-style1 .thumb-img {
  margin-right: 20px;
}
.thumb-style1 .thumb-title {
  flex: 1;
  margin-bottom: 0;
  transition: all ease 0.4s;
}

.service-details {
  padding: 40px 40px 10px 40px;
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08);
}
.service-details .service-image {
  margin-bottom: 30px;
}
.service-details .service-image img {
  width: 100%;
}
.service-details .service-title {
  margin-bottom: 23px;
}

/* Extra large devices */
@media (max-width: 1500px) {
  .service-style2 {
    padding: 20px 20px;
  }
  .service-style2 .service-img {
    margin-right: 20px;
  }
  .service-style2 .service-icon {
    width: 50px;
    height: 50px;
    line-height: 39px;
    padding: 5px;
  }
  .service-style2 .service-icon img {
    max-width: 80%;
  }
  .service-style2 .service-top {
    margin-bottom: 10px;
  }
  .service-style2 .service-title {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .service-style2 .service-list li {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .service-style2 .service-list li img {
    top: 2px;
  }
  .thumb-style1 .thumb-title {
    font-size: 18px;
  }
  .thumb-style1 .thumb-img {
    margin-right: 15px;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .service-style2 .service-img {
    max-width: 300px;
  }
  .service-details {
    padding: 40px 20px 10px 20px;
  }
  .thumb-style1 {
    overflow: hidden;
    text-align: right;
  }
  .thumb-style1 .slick-list {
    margin-left: -5px;
    margin-right: -5px;
    text-align: left;
  }
  .thumb-style1::before {
    display: none;
  }
  .thumb-style1 .thumb-item {
    margin: 0 5px;
    margin-bottom: 0;
    padding: 10px 10px;
  }
  .thumb-style1 .slick-arrow {
    width: calc(50% - 5px);
    margin-top: 10px;
  }
  .thumb-style1 .slick-arrow.slick-prev {
    top: auto;
    right: auto;
    left: 0;
    bottom: 0;
    position: absolute;
    margin: 0;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .service-style1 .service-body {
    margin-top: -20px;
  }
  .service-style2 {
    display: block;
    padding: 20px 15px 30px 15px;
  }
  .service-style2 .service-img {
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
  .service-style2 .service-img img {
    width: 100%;
  }
  .service-style2 .service-icon {
    width: 60px;
    height: 60px;
    line-height: 49px;
  }
  .service-style2 .service-title {
    font-size: 20px;
  }
  .service-style2 .service-list {
    display: block;
    margin-bottom: 30px;
  }
  .service-style2 .service-list li {
    margin-bottom: 15px;
  }
  .thumb-style1 .thumb-item {
    display: block;
    text-align: center;
  }
  .thumb-style1 .thumb-img {
    margin-bottom: 10px;
    margin-right: 0;
    max-width: 100%;
  }
  .thumb-style1 .thumb-title {
    font-size: 16px;
  }
  .service-style4,
  .service-style3 {
    padding: 40px 20px 40px 20px;
  }
  .service-style4 .service-icon,
  .service-style3 .service-icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
  }
  .service-style4 .service-icon img,
  .service-style3 .service-icon img {
    max-width: 40px;
  }
  .service-style4 {
    min-height: 200px;
  }
  .service-style4 .service-number {
    margin-bottom: 0;
  }
  .service-bottom-text1 {
    margin-top: 30px;
  }
}
/*------------------- 4.15. Testimonial  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.testi-shape1 {
  position: absolute;
  right: 70px;
  bottom: 80px;
}

.testi-shape2 {
  position: absolute;
  right: 0;
  bottom: 0;
}

.testi-style1 {
  max-width: 690px;
  margin: 0 auto 60px auto;
}
.testi-style1 .slick-arrow {
  opacity: 1;
  visibility: visible;
  left: auto;
  top: auto;
  bottom: 0;
  right: 30px;
  margin: 0 0 -30px 0;
}
.testi-style1 .slick-arrow.slick-prev {
  right: 100px;
}
.testi-style1 .testi-inner {
  background-color: var(--smoke-color);
  padding: 40px 40px 0 40px;
  display: flex;
}
.testi-style1 .testi-body {
  flex: 1;
  padding-top: 25px;
}
.testi-style1 .testi-author {
  padding: 0 70px 0 0;
  position: relative;
}
.testi-style1 .testi-rating {
  position: absolute;
  bottom: 75px;
  left: 20px;
  background-color: var(--theme-color);
  padding: 15px 20px 15px 15px;
}
.testi-style1 .testi-star {
  color: var(--yellow-color);
  font-size: 14px;
  letter-spacing: 5px;
  line-height: 1;
  margin-bottom: 13px;
}
.testi-style1 .testi-name {
  color: var(--white-color);
  margin: 0;
  line-height: 1;
  font-weight: 700;
  font-family: var(--title-font);
  font-size: 20px;
}
.testi-style1 .testi-top {
  display: flex;
  margin-bottom: 23px;
}
.testi-style1 .testi-icon {
  color: var(--theme-color);
  font-size: 50px;
  display: inline-block;
  line-height: 1;
  margin-right: 15px;
}
.testi-style1 .testi-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 6px;
}
.testi-style1 .testi-label {
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 0 0;
}

.testi-style2 {
  text-align: center;
  padding: 0.1px 15px 53px 15px;
  border: 2px solid var(--border-color);
  margin: 50px 0 30px 0;
}
.testi-style2 .slick-arrow {
  --pos-x: -45px;
}
.testi-style2 .avater {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: 8px 10px;
  transition: all ease 0.4s;
  cursor: pointer;
  transform: scale(0.6);
  transform-origin: center center;
  position: relative;
}
.testi-style2 .vs-slick-prevto .avater,
.testi-style2 .vs-slick-nextto .avater {
  transform: scale(0.85);
  z-index: 1;
}
.testi-style2 .vs-slick-prev .avater,
.testi-style2 .vs-slick-next .avater {
  z-index: 2;
  transform: scale(1);
}
.testi-style2 .slick-center .avater {
  z-index: 3;
  transform: scale(1.15);
}
.testi-style2 .avater-area {
  width: 510px;
  max-width: 100%;
  margin: -53px auto 36px auto;
}
.testi-style2 .testi-name {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 9px;
}
.testi-style2 .testi-text {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.testi-style2 .testi-degi {
  font-size: 14px;
  line-height: 1;
  margin-bottom: 32px;
}
.testi-style2 .testi-rating {
  color: var(--yellow-color);
  font-size: 16px;
  letter-spacing: 5px;
}

.avater-style1 {
  background-color: var(--theme-color);
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 25px;
  padding: 65px;
  justify-content: center;
  align-items: center;
  transform: rotate(45deg);
  width: 490px;
  height: 490px;
  margin-top: -18px;
  margin-bottom: 12px;
}
.avater-style1 .avater {
  background-color: var(--white-color);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.avater-style1 .avater::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 5px solid transparent;
  z-index: 1;
  transition: all ease 0.4s;
}
.avater-style1 .avater img {
  width: 100%;
  transform: rotate(-45deg) scale(1.41);
}
.avater-style1 .avater.active:before, .avater-style1 .avater:hover:before {
  border-color: var(--white-color);
}

.testi-style3 .testi-text {
  font-weight: 500;
  font-family: var(--title-font);
  font-size: 24px;
  line-height: 1.45;
  margin-bottom: 36px;
}
.testi-style3 .testi-rating {
  color: var(--yellow-color);
  font-size: 18px;
  letter-spacing: 5px;
  margin-bottom: 11px;
}
.testi-style3 .testi-name {
  margin-bottom: 6px;
}
.testi-style3 .testi-degi {
  font-size: 18px;
  margin-bottom: 0;
}
.testi-style3 .slick-arrow {
  top: auto;
  left: auto;
  right: 0;
  bottom: 8px;
  margin: 0;
  opacity: 1;
  visibility: visible;
}
.testi-style3 .slick-prev {
  right: 70px;
}

/* Extra large devices */
@media (max-width: 1500px) {
  .avater-style1 {
    transform: rotate(0);
    padding: 80px;
    gap: 40px;
    margin: 0;
    width: 90%;
    height: auto;
    justify-content: stretch;
  }
  .avater-style1 .avater img {
    transform: rotate(0);
  }
}
/* Medium Large devices */
@media (max-width: 1399px) {
  .avater-style1 {
    padding: 60px;
    gap: 20px;
    width: 100%;
  }
  .testi-style3 .testi-text {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .testi-style1 {
    max-width: 100%;
    margin-bottom: 30px;
  }
  .testi-style1 .testi-author {
    max-width: 230px;
    padding: 0 30px 0 0;
    margin: 0 auto;
  }
  .testi-style1 .testi-inner {
    padding: 20px 20px 0 20px;
  }
  .testi-style1 .testi-rating {
    left: 0;
    text-align: center;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    bottom: 30px;
  }
  .testi-style1 .testi-name {
    font-size: 16px;
  }
  .avater-style1 {
    padding: 20px;
    gap: 10px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .avater-style1 {
    margin-bottom: 40px;
    grid-template-columns: repeat(4, auto);
  }
  .testi-style3 .testi-text {
    font-size: 16px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .testi-style1 .testi-author {
    padding: 0;
  }
  .testi-style1 .testi-body {
    padding-top: 0;
  }
  .testi-style1 .testi-inner {
    flex-direction: column-reverse;
    text-align: center;
    padding: 35px 15px 0 15px;
  }
  .testi-style1 .testi-top {
    margin-bottom: 10px;
    display: block;
  }
  .testi-style1 .testi-title {
    margin-bottom: 8px;
  }
  .testi-style1 .testi-icon {
    margin-bottom: 20px;
  }
  .testi-style1 .testi-rating {
    bottom: 20px;
    left: 50%;
    transform: translateX(-60%);
  }
  .testi-style2 {
    padding: 0.1px 15px 30px 15px;
  }
  .testi-style2 .testi-degi {
    margin-bottom: 15px;
  }
  .testi-style2 .avater {
    width: 70px;
    height: 70px;
  }
  .testi-style2 .avater-area {
    margin-bottom: 20px;
  }
  .testi-style2 .avater-area {
    width: 285px;
    margin: -45px auto 26px auto;
  }
}
/*------------------- 4.16. Forms  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.form-style1 {
  background-color: var(--theme-color);
  max-width: 390px;
  margin-left: auto;
  padding: 46px 50px 50px 50px;
  position: relative;
  margin-bottom: -160px;
}
.form-style1 .form_title {
  color: var(--white-color);
  font-size: 24px;
  margin-bottom: 22px;
}
.form-style1 select,
.form-style1 input {
  height: 60px;
  background-color: var(--white-color);
  padding: 0 20px;
}
.form-style1 .form-group {
  margin-bottom: 20px;
}
.form-style1 .vs-btn {
  width: 100%;
}
.form-style1 .vs-btn:hover {
  color: var(--title-color);
}
.form-style1 .vs-btn:after, .form-style1 .vs-btn:before {
  background-color: var(--white-color);
}

.form-style2 {
  box-shadow: -6px 6px 50px 0 rgba(0, 0, 0, 0.06);
  padding: 50px 70px 45px 70px;
  margin-top: -120px;
  position: relative;
  z-index: 91;
  background-color: var(--white-color);
}
.form-style2 .form-title {
  margin-top: -0.2em;
  margin-bottom: 30px;
}

.form-style3 {
  display: flex;
  width: 100%;
  max-width: 370px;
}
.form-style3 input {
  flex: 1;
  background-color: var(--white-color);
}
.form-style3 button {
  width: 145px;
  padding-left: 0;
  padding-right: 0;
}
.form-style3 button::before, .form-style3 button:after {
  background: var(--white-color);
}
.form-style3 button:hover {
  color: var(--title-color);
}

.form-style4 {
  padding: 40px;
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08);
}
.form-style4 .form-title {
  margin-bottom: 40px;
}
.form-style4 .form-group i {
  right: calc(var(--bs-gutter-x) / 2 + 10px);
}

.form-style5 select,
.form-style5 textarea,
.form-style5 input {
  height: 55px;
  font-size: 14px;
  border-radius: 0;
  background-color: var(--white-color);
}
.form-style5 .form-group {
  --bs-gutter-x: 10px;
}
.form-style5 .form-group i {
  right: 22px;
}
.form-style5 .vs-btn {
  width: 100%;
}

.form-style6 {
  background-color: var(--white-color);
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08);
  padding: 60px 40px;
  margin-top: 50px;
}
.form-style6 .row {
  --bs-gutter-x: 20px ;
}
.form-style6 .form_title {
  text-align: center;
  margin: -0.22em 0 24px 0;
}
.form-style6 .form-btn {
  padding-top: 10px;
  text-align: center;
}
.form-style6 .form-group > i {
  color: var(--title-color);
}

/* Extra large devices */
@media (max-width: 1500px) {
  .form-style1 {
    max-width: 100%;
    margin-bottom: 0;
  }
  .form-style2 {
    padding: 40px 40px 15px 40px;
    margin-top: var(--section-space);
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .form-style3 {
    max-width: 100%;
  }
  .form-style2 {
    padding: 40px 40px 15px 40px;
    margin-top: var(--section-space-mobile);
  }
  .form-style6 {
    padding: 40px 20px;
    margin-top: 25px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .form-style1 {
    padding: 20px 15px 20px 15px;
  }
  .form-style2 {
    padding: 40px 15px 40px 15px;
    margin-top: var(--section-space-mobile);
  }
  .form-style4 {
    padding: 40px 15px;
  }
}
/*------------------- 4.17. Price Plan  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.package-style1 {
  padding: 40px 40px 50px 40px;
  background-color: var(--white-color);
  position: relative;
  margin: 0 0 45px 15px;
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08);
}
.package-style1:before {
  content: "";
  position: absolute;
  left: -15px;
  right: 1px;
  bottom: -15px;
  top: 160px;
  z-index: -1;
  background-color: #F2EDEB;
  transition: all ease 0.4s;
}
.package-style1 .package-top {
  display: flex;
  align-items: center;
  padding-bottom: 32px;
}
.package-style1 .package-price {
  position: relative;
  z-index: 1;
  margin: 0 25px 0 15px;
  text-align: center;
  padding: 20px 15px 30px 15px;
}
.package-style1 .package-price:after, .package-style1 .package-price::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background-color: var(--title-color);
  transition: all ease 0.4s;
  z-index: -1;
}
.package-style1 .package-price:before {
  bottom: 0;
  clip-path: polygon(100% 0, 100% calc(100% - 15px), 50% 100%, 0 calc(100% - 15px), 0 0);
}
.package-style1 .package-price:after {
  right: -15px;
  left: -15px;
  height: 15px;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
.package-style1 .package-price .duration,
.package-style1 .package-price .price {
  font-size: 32px;
  color: var(--white-color);
  display: block;
  line-height: 1;
  font-weight: 700;
}
.package-style1 .package-price .duration {
  font-size: 18px;
  margin-top: 6px;
}
.package-style1 .package-name {
  font-size: 24px;
  border-bottom: 4px solid #D8DDE1;
  margin-bottom: 0;
  padding-bottom: 10px;
  line-height: 1;
}
.package-style1 .package-list {
  padding: 0;
  margin: 0 0 41px 0;
  list-style-type: none;
}
.package-style1 .package-list li {
  color: #696969;
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
}
.package-style1 .package-list li i {
  position: absolute;
  left: 0;
  top: 6px;
}
.package-style1 .package-list li.disable {
  opacity: 0.45;
}
.package-style1 .package-btn {
  background-color: #D8DDE1;
  width: 100%;
  color: var(--title-color);
}
.package-style1:hover::before, .package-style1.active::before {
  background-color: var(--theme-color);
}
.package-style1:hover .package-price::before, .package-style1:hover .package-price::after, .package-style1.active .package-price::before, .package-style1.active .package-price::after {
  background-color: var(--theme-color);
}
.package-style1:hover .package-btn, .package-style1.active .package-btn {
  background-color: var(--theme-color);
  color: var(--white-color);
}

/* Large devices */
@media (max-width: 1199px) {
  .package-style1 {
    padding: 0px 20px 50px 20px;
  }
  .package-style1 .package-list li {
    margin-bottom: 5px;
    font-size: 14px;
  }
  .package-style1 .package-price {
    margin: 0 20px 0 -20px;
    padding: 15px 10px 20px 10px;
  }
  .package-style1 .package-price:after {
    right: -10px;
    left: 0;
  }
  .package-style1 .package-price .price {
    font-size: 24px;
  }
  .package-style1 .package-price .duration {
    font-size: 16px;
  }
  .package-style1 .package-name {
    font-size: 20px;
  }
  .package-style1 .package-list {
    margin: 0 0 31px 0;
  }
  .package-style1 .vs-btn {
    font-size: 14px;
    padding: 17px 10px;
  }
}
/*------------------- 4.18. Gallery  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.gallery-shape1 {
  position: absolute;
  left: 0;
  top: -24px;
}

.gallery-shape2 {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 535px;
  clip-path: polygon(230px 0%, 100% 0, 100% 100%, 0 100%, 0% 190px);
  background-color: var(--title-color);
}

.gallery-shape3 {
  position: absolute;
  left: 0;
  top: 20.1%;
}

.gallery-style3 .gallery-content,
.gallery-style1 .gallery-content {
  position: absolute;
  left: 50px;
  bottom: 50px;
  z-index: 2;
  transition: all ease 0.4s;
}
.gallery-style3 .gallery-label,
.gallery-style1 .gallery-label {
  background-color: var(--theme-color);
  color: var(--white-color);
  display: inline-block;
  line-height: 1;
  font-family: var(--title-font);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 21px;
}
.gallery-style3 .gallery-title,
.gallery-style1 .gallery-title {
  background-color: var(--white-color);
  color: var(--title-color);
  display: block;
  max-width: -moz-max-content;
  max-width: max-content;
  padding: 15px 20px;
}
.gallery-style3 .gallery-title,
.gallery-style3 .gallery-label,
.gallery-style1 .gallery-title,
.gallery-style1 .gallery-label {
  transition: all ease 0.4s;
  transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
}

.gallery-style1:hover .gallery-title,
.gallery-style1:hover .gallery-label,
.gallery-style3 .gallery-item:hover .gallery-title,
.gallery-style3 .gallery-item:hover .gallery-label,
.gallery-style3 .gallery-item.active .gallery-title,
.gallery-style3 .gallery-item.active .gallery-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.gallery-style1:hover .gallery-title,
.gallery-style3 .gallery-item:hover .gallery-title,
.gallery-style3 .gallery-item.active .gallery-title {
  transition-delay: 0.1s;
}

.gallery-style1 {
  position: relative;
  margin-bottom: 30px;
}
.gallery-style1 .gallery-img {
  overflow: hidden;
}
.gallery-style1 .gallery-img img {
  width: 100%;
  transition: all ease 0.4s;
  transform: scale(1.004);
}
.gallery-style1:hover .gallery-img img {
  transform: scale(1.1);
}
.gallery-style1 .gallery-title {
  margin-bottom: 0;
}
.gallery-style1.layout2:hover .gallery-content {
  left: 40px;
  bottom: 40px;
}

.gallery-style2 {
  position: relative;
  margin-bottom: 30px;
}
.gallery-style2 .gallery-img {
  overflow: hidden;
  position: relative;
}
.gallery-style2 .gallery-img img {
  width: 100%;
  transform: scale(1.001) rotate(0);
  transition: all ease 0.4s;
}
.gallery-style2 .gallery-img::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 154px;
  height: 170px;
  background-color: var(--theme-color);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  transition: all ease 0.4s;
  transform: translate(-20px, 50px);
  opacity: 0;
  visibility: hidden;
  display: inline-block;
  z-index: 1;
}
.gallery-style2 .gallery-label,
.gallery-style2 .gallery-title {
  background-color: var(--white-color);
  line-height: 1;
  transition: all ease 0.4s;
  margin: 0;
  transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
}
.gallery-style2 .gallery-title {
  font-size: 20px;
  padding: 9px 17.5px;
}
.gallery-style2 .gallery-label {
  font-size: 14px;
  color: var(--title-color);
  padding: 10px 17.5px;
  display: inline-block;
  margin-bottom: 10px;
}
.gallery-style2 .gallery-content {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 35px;
  z-index: 2;
}
.gallery-style2:hover .gallery-title,
.gallery-style2:hover .gallery-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.gallery-style2:hover .gallery-title {
  transition-delay: 0.1s;
}
.gallery-style2:hover .gallery-img img {
  transform: scale(1.1) rotate(3deg);
}
.gallery-style2:hover .gallery-img::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-2px, 2px);
}

.gallery-style3 {
  display: flex;
  gap: 30px;
}
.gallery-style3 .icon-btn {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  line-height: 70px;
  font-size: 26px;
  border-radius: 0;
  background-color: var(--theme-color);
  color: var(--white-color);
  text-align: center;
  transition: all ease 0.4s;
  opacity: 0;
  visibility: hidden;
  transform: translate(30px, -30px);
}
.gallery-style3 .icon-btn:after, .gallery-style3 .icon-btn:before {
  content: "";
  position: absolute;
  top: var(--shape-width, -7px);
  right: var(--shape-width, -7px);
  bottom: var(--shape-width, -7px);
  left: var(--shape-width, -7px);
  background-color: var(--white-color);
  z-index: -1;
  border-radius: 0;
  transition: all ease 0.4s;
}
.gallery-style3 .icon-btn:after {
  --shape-width: 0;
  background-color: var(--theme-color);
  border-radius: 0;
}
.gallery-style3 .icon-btn:hover:after {
  background-color: var(--title-color);
}
.gallery-style3 .gallery-img {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  transition: all ease 0.4s;
}
.gallery-style3 .gallery-title {
  margin: 0;
}
.gallery-style3 .gallery-content {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 40px 40px;
}
.gallery-style3 .gallery-item {
  position: relative;
  width: 15%;
  height: 478px;
  overflow: hidden;
  transition: all ease 0.4s;
}
.gallery-style3 .gallery-item.active {
  width: 40%;
}
.gallery-style3 .gallery-item:hover .icon-btn, .gallery-style3 .gallery-item.active .icon-btn {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  transition-delay: 0.25s;
}
.gallery-style3 .gallery-item:hover .gallery-title,
.gallery-style3 .gallery-item:hover .gallery-label, .gallery-style3 .gallery-item.active .gallery-title,
.gallery-style3 .gallery-item.active .gallery-label {
  transition-delay: 0.2s;
}
.gallery-style3 .gallery-item:hover .gallery-title, .gallery-style3 .gallery-item.active .gallery-title {
  transition-delay: 0.25s;
}

.project-meta-box {
  background-color: var(--secondary-color);
  padding: 40px;
  width: 330px;
  max-width: 100%;
  margin-bottom: 40px;
}
.project-meta-box .box-title {
  position: relative;
  margin-top: -0.2rem;
  padding-bottom: 14px;
  margin-bottom: 23px;
}
.project-meta-box .box-title:after, .project-meta-box .box-title:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--theme-color);
  width: 40px;
  height: 1px;
  z-index: 2;
}
.project-meta-box .box-title:after {
  z-index: 1;
  width: 100%;
  background-color: var(--border-color);
}
.project-meta-box .info-label {
  font-size: 14px;
  display: block;
  line-height: 1;
  margin-bottom: 13px;
}
.project-meta-box .info-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--title-color);
  line-height: 1;
  font-family: var(--title-font);
  margin-bottom: 0;
}
.project-meta-box .info-item:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 18px;
  margin-bottom: 23px;
}

.project-details-wrapper p {
  margin-bottom: 25px;
}
.project-details-wrapper h1,
.project-details-wrapper h2,
.project-details-wrapper h3,
.project-details-wrapper h4,
.project-details-wrapper h5,
.project-details-wrapper h6 {
  margin-bottom: 21px;
}
.project-details-wrapper ol,
.project-details-wrapper ul {
  margin-bottom: 33px;
}

/* Extra large devices */
@media (max-width: 1500px) {
  .gallery-style3 .gallery-content,
  .gallery-style1 .gallery-content {
    left: 25px;
    bottom: 15px;
  }
  .gallery-style3 .gallery-title,
  .gallery-style1 .gallery-title {
    padding: 9px 15px;
    font-size: 18px;
  }
  .gallery-style3 .gallery-label,
  .gallery-style1 .gallery-label {
    font-size: 12px;
    padding: 10px 13px;
  }
  .gallery-style1.layout2:hover .gallery-content {
    left: 20px;
    bottom: 20px;
  }
  .gallery-style2 .gallery-content {
    padding: 20px;
  }
  .gallery-style2 .gallery-title {
    font-size: 20px;
  }
  .gallery-style3 .gallery-content {
    left: 0;
    bottom: 0;
    padding: 30px;
  }
  .gallery-style3 .gallery-title {
    padding: 7px 15px;
    font-size: 16px;
  }
  .gallery-style3 .icon-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    --shape-width: -5px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .gallery-style2 .gallery-content {
    padding: 20px;
  }
  .gallery-style2 .gallery-title {
    font-size: 20px;
  }
  .gallery-style3 {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-style3 .gallery-item {
    width: 100%;
    height: 300px;
  }
  .gallery-style3 .gallery-item.active {
    width: 100%;
  }
  .gallery-style3 .gallery-content {
    padding: 15px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .project-meta-box {
    width: 100%;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .gallery-style3 .gallery-title,
  .gallery-style1 .gallery-title {
    padding: 6px 12px;
    font-size: 16px;
  }
  .gallery-style3 .gallery-label,
  .gallery-style1 .gallery-label {
    font-size: 11px;
    padding: 7px 10px;
  }
  .gallery-style1 .gallery-content {
    left: 15px;
    bottom: 5px;
  }
  .gallery-style3 {
    grid-template-columns: repeat(1, 1fr);
  }
  .project-meta-box {
    padding: 30px 20px;
  }
}
/*------------------- 4.19. Process  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.process-shape1 {
  position: absolute;
  right: 0;
  bottom: 0;
}

.process-style1 {
  position: relative;
  text-align: center;
  background-color: var(--secondary-color);
  padding: 30px 30px 22px 30px;
  margin: 25px 0 50px 20px;
}
.process-style1:before {
  content: "";
  position: absolute;
  left: -20px;
  top: 30px;
  right: 25px;
  bottom: -20px;
  border: 1px solid var(--border-color);
  z-index: -1;
  transition: all ease 0.4s;
}
.process-style1 .process-number {
  position: absolute;
  left: 20px;
  top: -25px;
  font-size: 24px;
  font-weight: 700;
  background-color: var(--title-color);
  transition: all ease 0.4s;
  color: var(--white-color);
  width: 50px;
  height: 45px;
  line-height: 45px;
  display: inline-block;
}
.process-style1 .process-number:before {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  height: 25px;
  width: 10px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  background-color: inherit;
  display: inline-block;
}
.process-style1 .process-icon {
  margin-bottom: 25px;
}
.process-style1 .process-name {
  font-size: 22px;
  margin-bottom: 10px;
}
.process-style1 .process-text {
  margin-bottom: 0;
}
.process-style1:hover::before {
  border-color: var(--theme-color);
}
.process-style1:hover .process-number {
  background-color: var(--theme-color);
}

/* Large devices */
@media (max-width: 1199px) {
  .process-style1 {
    margin: 15px 0 50px 15px;
    padding: 30px 15px 28px 15px;
  }
  .process-style1:before {
    left: -15px;
    top: 15px;
    right: 20px;
    bottom: -15px;
  }
}
/*------------------- 4.20. Counter  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.counter-inner1 {
  padding: 70px 70px 40px 70px;
}

.counter-style1 {
  text-align: center;
  position: relative;
  padding: 24px 15px 24px 15px;
  width: 220px;
  max-width: 100%;
  margin-bottom: 30px;
}
.counter-style1:after, .counter-style1::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(50% - 23px);
  border-width: 2px 2px 0 2px;
  border-style: solid;
  border-color: var(--white-color);
  transition: all ease 0.4s;
}
.counter-style1:after {
  top: auto;
  bottom: 0;
  border-width: 0 2px 2px 2px;
}
.counter-style1:Hover::before, .counter-style1:Hover:after {
  height: 50%;
}
.counter-style1 .counter-icon {
  margin-bottom: 18px;
}
.counter-style1 .counter-number {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--white-color);
  margin-bottom: 13px;
}
.counter-style1 .counter-text {
  font-size: 18px;
  font-family: var(--title-font);
  font-weight: 600;
  color: var(--white-color);
  margin-bottom: 0;
  line-height: 1;
}

/* Extra large devices */
@media (max-width: 1500px) {
  .counter-style1 {
    width: 100%;
  }
  .counter-style1 .counter-icon {
    margin-bottom: 13px;
  }
  .counter-style1 .counter-number {
    font-size: 30px;
  }
  .counter-style1 .counter-text {
    font-size: 16px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .counter-inner1 {
    padding: var(--section-space-mobile) 15px calc(var(--section-space-mobile) - 30px) 15px;
  }
}
/*------------------- 4.21. Accordion  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.accordion-item .accordion-button:after {
  display: none;
}

.accordion-item .accordion-button:focus {
  outline: none;
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0);
}

.accordion-collapse {
  border: none;
}

.accordion-body {
  padding: 0;
}

.accordion-body p:last-child {
  margin-bottom: 0;
}

.accordion-inner1 {
  width: 720px;
  max-width: 100%;
  padding: 90px 60px;
  background-color: var(--secondary-color);
}

.accordion-shape1 {
  height: 100%;
  background-color: var(--theme-color);
  width: 292px;
  max-width: 100%;
}

.accordion-style1 .accordion-item {
  background-color: var(--white-color);
  margin-bottom: 30px;
  transition: all ease 0.4s;
}
.accordion-style1 .accordion-item:last-child {
  margin-bottom: 0;
}
.accordion-style1 .accordion-button {
  font-size: 20px;
  font-family: var(--title-font);
  font-weight: 700;
  color: var(--title-color);
  background-color: transparent;
  border: none;
  padding: 16px 33px 16px 20px;
  text-align: left;
  transition: all ease 0.4s;
}
.accordion-style1 .accordion-button::before {
  content: "\f068";
  font-family: var(--icon-font);
  background-color: var(--body-color);
  position: absolute;
  right: 20px;
  top: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  color: var(--white-color);
  font-size: 14px;
  transition: all ease 0.4s;
  text-align: center;
}
.accordion-style1 .accordion-button.collapsed::before {
  content: "\f067";
  background-color: var(--theme-color);
}
.accordion-style1 .accordion-button:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}
.accordion-style1 .accordion-button:hover:before {
  color: var(--title-color);
  background-color: var(--white-color);
}
.accordion-style1 .accordion-body {
  border-top: 1px solid var(--border-color);
  padding: 19px 25px 17px 25px;
}
.accordion-style1 .accordion-body p {
  transition: all ease 0.4s;
}
.accordion-style1.layout2 .accordion-item {
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.06);
}
.accordion-style1.layout2 .accordion-item.active {
  background-color: var(--theme-color);
  box-shadow: none;
}
.accordion-style1.layout2 .accordion-item.active .accordion-body p,
.accordion-style1.layout2 .accordion-item.active .accordion-button {
  color: var(--white-color);
}
.accordion-style1.layout2 .accordion-item.active .accordion-button::before {
  background-color: var(--white-color);
  color: var(--theme-color);
}
.accordion-style1.layout3 {
  margin: 32px 0 0 0;
}
.accordion-style1.layout3 .accordion-item {
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}
.accordion-style1.layout3 .accordion-item:last-child {
  margin-bottom: 30px;
}
.accordion-style1.layout3 .accordion-button {
  font-weight: 600;
  font-size: 18px;
}
.accordion-style1.layout3 .accordion-button:before {
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
}

/* Extra large devices */
@media (max-width: 1500px) {
  .accordion-shape1 {
    display: none;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .accordion-inner1 {
    width: 100%;
    margin: 0;
    padding: var(--section-space) 40px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .accordion-style1 .accordion-button {
    font-size: 16px;
    line-height: 1.3;
  }
  .accordion-style1 .accordion-button:before {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    right: 10px;
  }
  .accordion-inner1 {
    padding: var(--section-space-mobile) 15px;
  }
}
/*------------------- 4.22. Team  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.team-shape1 {
  position: absolute;
  left: 0;
  top: 0;
}

.team-style1 {
  margin-bottom: 30px;
}
.team-style1 .team-img {
  padding: 15px;
  position: relative;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
  max-width: 350px;
}
.team-style1 .team-img .team-social, .team-style1 .team-img:after, .team-style1 .team-img::before,
.team-style1 .team-img img {
  clip-path: polygon(0 var(--clip-gap, 80px), 50% 0, 100% var(--clip-gap, 80px), 100% calc(100% - var(--clip-gap, 80px)), 51% 100%, 0 calc(100% - var(--clip-gap, 80px)));
  left: var(--border-size, 0);
  right: var(--border-size, 0);
  top: var(--border-size, 0);
  bottom: var(--border-size, 0);
}
.team-style1 .team-img img {
  position: relative;
  width: 100%;
  z-index: 3;
}
.team-style1 .team-img:after, .team-style1 .team-img::before {
  content: "";
  position: absolute;
  background-color: var(--white-color);
  z-index: 2;
  display: inline-block;
  --clip-gap: 89px;
  transition: all ease 0.4s;
}
.team-style1 .team-img::after {
  --border-size: 1px;
}
.team-style1 .team-img::before {
  z-index: 1;
  background-color: var(--border-color);
}
.team-style1 .team-social {
  position: absolute;
  background-color: transparent;
  z-index: 4;
  --border-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all ease 0.4s;
}
.team-style1 .team-social a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 41px;
  margin-right: 10px;
  border-radius: 50%;
  text-align: center;
  background-color: var(--theme-color);
  color: var(--white-color);
  transition: all ease 0.4s;
  transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
}
.team-style1 .team-social a:hover {
  background-color: var(--white-color);
  color: var(--theme-color);
}
.team-style1 .team-social a:last-child {
  margin-right: 0;
}
.team-style1 .team-social a:nth-child(2) {
  transition-delay: 0.1s;
}
.team-style1 .team-social a:nth-child(3) {
  transition-delay: 0.15s;
}
.team-style1 .team-social a:nth-child(4) {
  transition-delay: 0.2s;
}
.team-style1 .team-content {
  text-align: center;
}
.team-style1 .team-name {
  font-size: 20px;
  margin-bottom: 8px;
}
.team-style1 .team-degi {
  display: block;
  line-height: 1;
}
.team-style1:hover .team-img::before {
  background-color: var(--theme-color);
}
.team-style1:hover .team-social {
  background-color: rgba(22, 23, 26, 0.7);
}
.team-style1:hover .team-social a {
  opacity: 1;
  visibility: visible;
  transform: translateY(1px);
}

.team-details-img {
  padding: 30px;
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08);
  background-color: var(--white-color);
  margin-bottom: 75px;
}
.team-details-img img {
  width: 100%;
}

.team-details .team-name {
  margin: -0.2em 0 11px 0;
  font-size: 24px;
}
.team-details .team-degi {
  font-size: 16px;
  color: var(--theme-color);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 35px;
}
.team-details .team-desc p {
  font-weight: 700;
  margin-top: 33px;
  margin-bottom: 25px;
}
.team-details .team-contact {
  border: none;
}
.team-details .team-contact th,
.team-details .team-contact td {
  padding: 0 0 15px 0;
  border: none;
}
.team-details .team-contact th {
  font-family: var(--title-font);
  color: var(--title-color);
  font-weight: 600;
  font-size: 18px;
}
.team-details .team-contact td {
  font-weight: 700;
}
.team-details .team-contact a {
  color: inherit;
}
.team-details .team-contact a:Hover {
  color: var(--theme-color);
}
.team-details p {
  margin-bottom: 25px;
}
.team-details h1,
.team-details h2,
.team-details h3,
.team-details h4,
.team-details h5,
.team-details h6 {
  margin-bottom: 21px;
}
.team-details ol,
.team-details ul {
  margin-bottom: 33px;
}

/* Medium devices */
@media (max-width: 991px) {
  .team-details-img {
    margin-bottom: 40px;
    padding: 20px;
  }
  .team-details .team-degi {
    margin-bottom: 25px;
  }
  .team-details .team-desc p {
    margin-top: 23px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .team-details .team-contact td {
    font-size: 14px;
  }
  .team-details .team-contact th {
    width: 38%;
    font-size: 16px;
  }
}
/*------------------- 4.23. Feature  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.feature-box1 {
  margin-top: 40px;
  background-color: var(--secondary-color);
  border-top: 4px solid var(--theme-color);
  transition: all ease 0.4s;
}
.feature-box1:hover {
  border-top-color: var(--title-color);
}

.feature-style1 {
  padding: 30px 35px 21px 35px;
  position: relative;
}
.feature-style1::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  height: 125px;
  margin-top: -62.5px;
  width: 1px;
  background-color: var(--body-color);
  opacity: 0.4;
}
.feature-style1:first-child {
  padding-left: 30px;
}
.feature-style1:last-child {
  padding-right: 30px;
}
.feature-style1:last-child:before {
  display: none;
}
.feature-style1 .feature-icon {
  margin-bottom: 25px;
}
.feature-style1 .feature-title {
  font-size: 20px;
  margin-bottom: 8px;
}
.feature-style1 .feature-text {
  margin-bottom: 0;
}

.feature-style2 {
  background-color: var(--white-color);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  margin-bottom: 30px;
}
.feature-style2 .dot-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: var(--theme-color);
  width: 12px;
  height: 12px;
  z-index: 1;
  margin: -6px 0 0 -6px;
}
.feature-style2 .feature-item {
  display: flex;
  padding: 45px 50px 37px 50px;
  transition: all ease 0.4s;
  background-color: transparent;
}
.feature-style2 .feature-item:hover {
  background-color: var(--title-color);
}
.feature-style2 .feature-item:hover .feature-title,
.feature-style2 .feature-item:hover .feature-text {
  color: var(--white-color);
}
.feature-style2 .feature-icon {
  margin-right: 25px;
}
.feature-style2 .feature-content {
  flex: 1;
}
.feature-style2 .feature-title {
  margin-top: -0.2em;
  margin-bottom: 12px;
  transition: all ease 0.4s;
}
.feature-style2 .feature-text {
  margin-bottom: 0;
  transition: all ease 0.4s;
}
.feature-style2:after, .feature-style2::before {
  content: "";
  position: absolute;
  background-color: var(--border-color);
}
.feature-style2::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
}
.feature-style2:after {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
}

.feature-bg1 {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.feature-bg1 .shape-2 {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  line-height: 1;
  padding-left: 20px;
}
.feature-bg1 .shape-2:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background-color: var(--theme-color);
  clip-path: polygon(365px 0, 100% 0, 100% 100%, 0 100%);
}
.feature-bg1 .shape-2 img {
  z-index: 2;
  position: relative;
  width: 100%;
  clip-path: polygon(365px 0, 100% 0, 100% 100%, 0 100%);
}

/* Extra large devices */
@media (max-width: 1500px) {
  .feature-style1 {
    padding: 15px 20px 20px 15px;
    position: relative;
  }
  .feature-style1:first-child {
    padding-left: 15px;
  }
  .feature-style1 .feature-icon {
    margin-bottom: 15px;
    max-width: 50px;
  }
  .feature-style2 .feature-item {
    padding: 35px 25px 30px 25px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .feature-style1::before {
    display: none;
  }
  .feature-style2 {
    display: block;
  }
  .feature-style2::before, .feature-style2::after,
  .feature-style2 .dot-shape {
    display: none;
  }
  .feature-style2 .feature-item {
    display: block;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding: 30px 20px;
  }
  .feature-style2 .feature-icon {
    margin-right: 0;
    margin-bottom: 20px;
  }
}
/*------------------- 4.24. Progress  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.progress-style3 .progress-status,
.progress-style2 .progress-status,
.progress-style1 .progress-status {
  position: relative;
  height: 10px;
  width: 100%;
  background-color: #D8DDE1;
}
.progress-style3 .progress-number,
.progress-style3 .progress-title,
.progress-style2 .progress-number,
.progress-style2 .progress-title,
.progress-style1 .progress-number,
.progress-style1 .progress-title {
  font-family: var(--title-font);
  font-size: 16px;
  color: var(--title-color);
  font-weight: 600;
  margin: 0 0 0 0;
  line-height: 1;
}
.progress-style3 .progress-title,
.progress-style2 .progress-title,
.progress-style1 .progress-title {
  margin-bottom: 15px;
}
.progress-style3 .progress-number,
.progress-style2 .progress-number,
.progress-style1 .progress-number {
  position: absolute;
  top: -33px;
  right: -20px;
}
.progress-style3 .progress-bar,
.progress-style2 .progress-bar,
.progress-style1 .progress-bar {
  background-color: var(--theme-color);
  height: 100%;
  position: relative;
  overflow: visible;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 4.55%, var(--theme-color) 4.55%, var(--theme-color) 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7) 54.55%, var(--theme-color) 54.55%, var(--theme-color) 100%);
  background-size: 44px 44px;
}
.progress-style3 .progress-bar:before,
.progress-style2 .progress-bar:before,
.progress-style1 .progress-bar:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  border: 5px solid #D8DDE1;
  background-color: var(--theme-color);
  border-radius: 50%;
  margin: -10px -10px 0 0;
}

.progress-style1 {
  max-width: 570px;
}
.progress-style1 .progress-number,
.progress-style1 .progress-title {
  color: var(--white-color);
}

.progress-style2 .progress-item {
  margin-bottom: 40px;
}
.progress-style2 .progress-item:last-child {
  margin-bottom: 30px;
}

.progress-style3 {
  padding-top: 5px;
}
.progress-style3 .progress-number {
  right: 0;
  font-size: 18px;
  font-family: var(--body-font);
}
.progress-style3 .progress-title {
  font-size: 18px;
}
.progress-style3 .progress-status {
  height: 8px;
  display: flex;
  align-items: center;
  background-color: var(--white-color);
  border: 1px solid var(--smoke-color);
  padding: 2px;
}
.progress-style3 .progress-bar {
  background-image: none;
  height: 2px;
  border-radius: 6px;
  position: static;
}
.progress-style3 .progress-bar::before {
  display: none;
}
.progress-style3 .progress-item {
  margin-bottom: 30px;
}

/* Large devices */
@media (max-width: 1199px) {
  .progress-style1 {
    max-width: 100%;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .progress-style2 .progress-item {
    margin-bottom: 25px;
  }
  .progress-style2 .progress-item:last-child {
    margin-bottom: 30px;
  }
}
/*------------------- 4.25. Call To Action  -------------------*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.cta-box1 {
  padding: 80px 80px 80px 80px;
  margin-bottom: 130px;
  position: relative;
  z-index: 2;
}
.cta-box1 .title-area {
  margin-bottom: 0;
}

.cta-box2 {
  margin-top: -390px;
  padding-top: 415px;
  padding-bottom: 150px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.cta-box2 .play-btn:before, .cta-box2 .play-btn:after {
  border-color: var(--white-color);
}
.cta-box2 .play-btn:hover i {
  background-color: var(--white-color);
  color: var(--theme-color);
}

.cta-box3 {
  display: flex;
  align-items: center;
}
.cta-box3 .cta-content {
  flex: 1;
}
.cta-box3 .cta-img {
  margin-left: 88px;
  margin-right: 72px;
  position: relative;
}
.cta-box3 .cta-img img {
  clip-path: polygon(0 0, calc(100% - var(--clip-gap, 205px)) 0, 100% 100%, var(--clip-gap, 205px) 100%);
  position: relative;
  z-index: 3;
}
.cta-box3 .cta-img:after, .cta-box3 .cta-img::before {
  content: "";
  position: absolute;
  left: -50px;
  top: 0;
  bottom: 0;
  width: 94%;
  background-color: var(--theme-color);
  clip-path: polygon(0 0, calc(100% - var(--clip-gap, 205px)) 0, 100% 100%, var(--clip-gap, 205px) 100%);
  transform: rotateY(180deg);
  z-index: 2;
}
.cta-box3 .cta-img:after {
  opacity: 0.2;
  left: -90px;
  z-index: 1;
  width: calc(94% + 80px);
}
.cta-box3 .cta-right-img {
  align-self: flex-end;
}
.cta-box3 .sec-title {
  color: var(--white-color);
}
.cta-box3 .sec-text {
  color: var(--white-color);
  max-width: 512px;
}

/* Extra large devices */
@media (max-width: 1500px) {
  .cta-box1 {
    padding: var(--section-space) 45px;
    margin-bottom: 0;
  }
  .cta-box2 {
    margin-top: -1px;
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }
  .cta-box3 .cta-img {
    margin-left: 0;
    margin-right: 0;
    max-width: 40%;
  }
  .cta-box3 .cta-img::after, .cta-box3 .cta-img::before {
    display: none;
  }
  .cta-box3 .cta-right-img {
    max-width: 20%;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .cta-box1 .title-area {
    margin-bottom: 40px;
  }
  .cta-box3 .cta-content {
    padding: var(--section-space-mobile) 0;
  }
  .cta-box3 .cta-img {
    display: none;
  }
  .cta-box3 .cta-right-img {
    max-width: 40%;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .cta-box2 {
    padding-bottom: var(--section-space-mobile);
    padding-top: var(--section-space-mobile);
  }
  .cta-box3 {
    display: block;
    text-align: center;
  }
  .cta-box3 .cta-content {
    padding-bottom: 40px;
  }
  .cta-box3 .cta-right-img {
    max-width: 100%;
  }
  .cta-box1 {
    padding: var(--section-space-mobile) 15px;
  }
}
/*------------------- 4.26. High Light  -------------------*/
.ticker-style1 .eocjs-newsticker {
  padding: 39px 0;
  background-color: var(--theme-color);
}
.ticker-style1 .eocjs-newsticker-container {
  height: 45px;
}
.ticker-style1 .eocjs-newsticker-one,
.ticker-style1 .eocjs-newsticker-two {
  height: 45px;
  line-height: 45px;
}
.ticker-style1 span {
  font-size: 36px;
  font-family: var(--title-font);
  font-weight: 700;
  line-height: 45px;
  color: var(--white-color);
}
.ticker-style1 span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}
.ticker-style1 span i {
  margin-left: 45px;
  margin-right: 15px;
  -webkit-text-stroke: 1px transparent;
  color: var(--white-color);
}

/*=================================
    05. Spacing
==================================*/
/*
Template Name: Amperigo
Template URL: https://html.vecurosoft.com/amperigo
Description: Amperigo - Electrician & Repairing HTML Template
Author: Vecuro
Author URI: https://themeforest.net/user/vecuro_themes
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.10. About
    4.11. Simple Sections
    4.12. Popup Side Menu
    4.13. Popup Search
    4.14. Service
    4.15. Testimonial
    4.16. Forms
    4.17. Price Plan
    4.18. Gallery
    4.19. Process
    4.20. Counter
    4.21. Accordion
    4.22. Team
    4.23. Feature
    4.24. Progress
    4.25. Call To Action
    4.26. High Light
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.pb-30 {
  padding-bottom: 30px;
}

.pb-1px {
  padding-bottom: 1px;
}

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

.mt-n1 {
  margin-top: -0.25rem;
}

.mt-n2 {
  margin-top: -0.5rem;
}

.mt-n3 {
  margin-top: -1rem;
}

.mt-n4 {
  margin-top: -1.5rem;
}

.mt-n5 {
  margin-top: -3rem;
}

.mb-n1 {
  margin-bottom: -0.25rem;
}

.mb-n2 {
  margin-bottom: -0.5rem;
}

.mb-n3 {
  margin-bottom: -1rem;
}

.mb-n4 {
  margin-bottom: -1.5rem;
}

.mb-n5 {
  margin-bottom: -3rem;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-30 {
  margin-top: 30px;
}

.py-80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.space,
.space-top {
  padding-top: var(--section-space);
}

.space,
.space-bottom {
  padding-bottom: var(--section-space);
}

.space-extra,
.space-extra-top {
  padding-top: calc(var(--section-space) - 30px);
}

.space-extra,
.space-extra-bottom {
  padding-bottom: calc(var(--section-space) - 30px);
}

/* Medium devices */
@media (max-width: 991px) {
  .space,
  .space-top {
    padding-top: var(--section-space-mobile);
  }
  .space,
  .space-bottom {
    padding-bottom: var(--section-space-mobile);
  }
  .space-extra,
  .space-extra-top {
    padding-top: calc(var(--section-space-mobile) - 30px);
  }
  .space-extra,
  .space-extra-bottom {
    padding-bottom: calc(var(--section-space-mobile) - 30px);
  }
  .space-top-md-none {
    padding-top: 0;
  }
}
/* */