@charset "UTF-8";
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
:root {
  --theme-color: #F8721F;
  --theme-color2: #F4E11B;
  --title-color: #02000F;
  --body-color: #6C6D71;
  --smoke-color: #F6F6F6;
  --smoke-color2: #F6F2ED;
  --black-color: #000000;
  --black-color2: #13182B;
  --black-color3: #4E4E4E;
  --black-color4: #1F1F1F;
  --th-border-color: #E4E4E5;
  --th-border-color2: rgba(78, 78, 78, 0.2);
  --th-border-color3: rgba(56, 61, 70, 0.1);
  --light-color: #A1A4B1;
  --gray-color: #141414;
  --gray-color2: #F4F3E6;
  --gray-color3: #A1A1A1;
  --gray-color4: #F4F1FC;
  --gray-color5: #FFF5F1;
  --smoke-color3: #FFF3E0;
  --smoke-color4: #F2F2F2;
  --black-color5: #22272E;
  --black-color6: #2D333D;
  --black-color7: #0E0E13;
  --white-color: #ffffff;
  --yellow-color: #FFB539;
  --success-color: #28a745;
  --error-color: #dc3545;
  --th-border-color4: rgba(198, 201, 212, 0.5);
  --th-border-color5: #49515C;
  --th-border-color6: #383D46;
  --title-font: "Montserrat", sans-serif;
  --body-font: "Montserrat", sans-serif;
  --icon-font: "Font Awesome 6 Pro";
  --main-container: 1320px;
  --container-gutters: 24px;
  --section-space: 120px;
  --section-space-mobile: 80px;
  --section-title-space: 60px;
  --ripple-ani-duration: 5s;
  --th-body-background: #0E1B2C;
}

/*------------------- 1.2. Function -------------------*/
/*------------------- 1.3. Variable-------------------*/
/*------------------- 1.4. Typography -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

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

body {
  font-family: var(--body-font) !important;
  font-size: 16px;
  font-weight: 400;
  color: var(--body-color);
  line-height: 26px;
  overflow-x: hidden;
  background: var(--th-body-background);
  -webkit-font-smoothing: antialiased;
  /***scroll-bar***/
}
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border-radius: 0px;
}
body::-webkit-scrollbar-track {
  background: #0E1B2C;
  box-shadow: none;
  -webkit-box-shadow: none;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #303D58;
  background-image: none;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb:hover {
  background-color: #83C341;
}

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


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;
  -webkit-box-shadow: none;
          box-shadow: none;
}

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

ul {
  list-style-type: disc;
}

a {
  color: var(--theme-color);
  text-decoration: none;
  outline: 0;
  -webkit-transition: all ease 0.4s;
  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 {
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
}

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


p:empty {
  display: none;
}

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

h1 a,
h2 a,
h3 a,
h4 a,
h5 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 {
  font-family: var(--title-font);
  color: var(--title-color);
  text-transform: none;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 15px 0;
}

.h1,
h1 {
  font-size: 84px;
  line-height: 1.142;
}

.h2,
h2 {
  font-size: 56px;
  line-height: 1.214;
}

.h3,
h3 {
  font-size: 48px;
  line-height: 1.278;
}

.h4,
h4 {
  font-size: 32px;
  line-height: 1.333;
}

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

/* Medium Large devices */
@media (max-width: 1399px) {
  .h1,
  h1 {
    font-size: 64px;
    line-height: 1.3;
  }
}
/* Medium Large devices */
@media (max-width: 1299px) {
  .h1,
  h1 {
    font-size: 60px;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .h1,
  h1 {
    font-size: 55px;
    line-height: 1.3;
  }
  .h2,
  h2 {
    font-size: 40px;
    line-height: 1.3;
  }
  .h3,
  h3 {
    font-size: 30px;
  }
  .h4,
  h4 {
    font-size: 24px;
  }
  .h5,
  h5 {
    font-size: 20px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .h1,
  h1 {
    font-size: 40px;
  }
  .h2,
  h2 {
    font-size: 34px;
    line-height: 1.3;
  }
  .h3,
  h3 {
    font-size: 26px;
  }
  .h4,
  h4 {
    font-size: 22px;
  }
  .h5,
  h5 {
    font-size: 18px;
  }
}
/* Extra small devices */
@media (max-width: 575px) {
  .h1,
  h1 {
    font-size: 34px;
    line-height: 1.35;
  }
  .h2,
  h2 {
    font-size: 28px;
  }
}
/* Extra small devices */
@media (max-width: 375px) {
  .h1,
  h1 {
    font-size: 32px;
  }
}
/*------------------- 1.5. Wordpress Default -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/

.gallery {
  margin-bottom: 1.5em;
  width: 100%;
}

/* Small devices */
/*blog-navigation*****************/

/*=================================
    02. Reset
==================================*/
/*------------------- 2.1. Container -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/* Medium Large devices */
@media (max-width: 1399px) {
  :root {
    --main-container: 1250px;
  }
}
@media only screen and (min-width: 1300px) {
  
  .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 (min-width: 1600px) {
  .th-container2 {
    --main-container: 1420px;
  }
}

/*------------------- 2.2. Grid -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
@media (min-width: 1300px) {
  .row {
    --bs-gutter-x: 24px;
  }
}

.gy-40 {
  --bs-gutter-y: 40px;
}
@media (min-width: 1399px) {
  .gx-30 {
    --bs-gutter-x: 30px;
  }
}
/* Medium devices */
/*------------------- 2.3. Input -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
select,
.form-control,
.form-select,
textarea,
input {
  height: 56px;
  padding: 0 30px 0 30px;
  padding-right: 45px;
  border: 1px solid transparent;
  color: var(--body-color);
  background-color: var(--smoke-color);
  border-radius: 30px;
  font-size: 16px;
  width: 100%;
  font-family: var(--body-font);
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
select:focus,
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-color: var(--theme-color);
  background-color: var(--smoke-color);
}
select::-moz-placeholder,
.form-control::-moz-placeholder,
.form-select::-moz-placeholder,
textarea::-moz-placeholder,
input::-moz-placeholder {
  color: var(--body-color);
}
select::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
  color: var(--body-color);
}
select:-ms-input-placeholder,
.form-control:-ms-input-placeholder,
.form-select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
  color: var(--body-color);
}
select::-webkit-input-placeholder, .form-control::-webkit-input-placeholder, .form-select::-webkit-input-placeholder, textarea::-webkit-input-placeholder, input::-webkit-input-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:-ms-input-placeholder, .form-control:-ms-input-placeholder, .form-select:-ms-input-placeholder, textarea:-ms-input-placeholder, input:-ms-input-placeholder {
  color: var(--body-color);
}
select::-ms-input-placeholder, .form-control::-ms-input-placeholder, .form-select::-ms-input-placeholder, textarea::-ms-input-placeholder, input::-ms-input-placeholder {
  color: var(--body-color);
}
select::placeholder,
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--body-color);
}

input[type=time] {
  padding: 0 30px;
  position: relative;
}

input[type=time]::-webkit-calendar-picker-indicator {
  background: transparent;
  position: absolute;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1;
  cursor: pointer;
}

.form-select,
select {
  display: block;
  width: 100%;
  line-height: 1.5;
  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;
}
.form-select.style2,
select.style2 {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.87109 1.71094L5.71484 5.62109C5.56901 5.7487 5.41406 5.8125 5.25 5.8125C5.08594 5.8125 4.9401 5.7487 4.8125 5.62109L0.65625 1.71094C0.382812 1.40104 0.373698 1.09115 0.628906 0.78125C0.920573 0.507812 1.23047 0.498698 1.55859 0.753906L5.25 4.25391L8.96875 0.753906C9.27865 0.498698 9.57943 0.498698 9.87109 0.753906C10.1263 1.08203 10.1263 1.40104 9.87109 1.71094Z' fill='%238B929C'/%3E%3C/svg%3E");
}

textarea.form-control,
textarea {
  min-height: 178px;
  padding-top: 25px;
  padding-bottom: 17px;
  border-radius: 30px;
}
textarea.form-control.style2,
textarea.style2 {
  min-height: 100px;
}

.form-group {
  margin-bottom: var(--bs-gutter-x);
  position: relative;
}
.form-group > i {
  display: inline-block;
  position: absolute;
  right: 25px;
  top: 20px;
  font-size: 16px;
  color: var(--body-color);
}
.form-group.style2 textarea,
.form-group.style2 input {
  background: var(--black-color2);
  color: var(--white-color);
  height: 60px;
  border-radius: 8px;
}
.form-group.style2 textarea:active, .form-group.style2 textarea:focus,
.form-group.style2 input:active,
.form-group.style2 input:focus {
  border-color: var(--theme-color);
}
.form-group.style2 textarea::-webkit-input-placeholder, .form-group.style2 input::-webkit-input-placeholder {
  color: var(--white-color);
}
.form-group.style2 textarea::-moz-placeholder, .form-group.style2 input::-moz-placeholder {
  color: var(--white-color);
}
.form-group.style2 textarea:-ms-input-placeholder, .form-group.style2 input:-ms-input-placeholder {
  color: var(--white-color);
}
.form-group.style2 textarea::-ms-input-placeholder, .form-group.style2 input::-ms-input-placeholder {
  color: var(--white-color);
}
.form-group.style2 textarea::placeholder,
.form-group.style2 input::placeholder {
  color: var(--white-color);
}
.form-group.style2 select {
  background: var(--black-color2);
  color: var(--white-color);
  height: 60px;
  border-radius: 8px;
}
.form-group.style2 > i {
  top: 24px;
  color: var(--white-color);
}
.form-group.style-border2 textarea,
.form-group.style-border2 input {
  background: transparent;
  border: 1px solid var(--th-border-color2);
  color: var(--body-color);
}
.form-group.style-border2 textarea::-webkit-input-placeholder, .form-group.style-border2 input::-webkit-input-placeholder {
  color: var(--body-color);
}
.form-group.style-border2 textarea::-moz-placeholder, .form-group.style-border2 input::-moz-placeholder {
  color: var(--body-color);
}
.form-group.style-border2 textarea:-ms-input-placeholder, .form-group.style-border2 input:-ms-input-placeholder {
  color: var(--body-color);
}
.form-group.style-border2 textarea::-ms-input-placeholder, .form-group.style-border2 input::-ms-input-placeholder {
  color: var(--body-color);
}
.form-group.style-border2 textarea::placeholder,
.form-group.style-border2 input::placeholder {
  color: var(--body-color);
}
.form-group.style-border2 select {
  background: transparent;
  border: 1px solid var(--th-border-color2);
}
.form-group.style-border2 i {
  color: var(--theme-color);
  top: 22px;
}
.form-group.style-border3 textarea,
.form-group.style-border3 input {
  background: var(--white-color);
  border: 1px solid var(--th-border-color);
  color: var(--body-color);
}
.form-group.style-border3 textarea::-webkit-input-placeholder, .form-group.style-border3 input::-webkit-input-placeholder {
  color: var(--body-color);
}
.form-group.style-border3 textarea::-moz-placeholder, .form-group.style-border3 input::-moz-placeholder {
  color: var(--body-color);
}
.form-group.style-border3 textarea:-ms-input-placeholder, .form-group.style-border3 input:-ms-input-placeholder {
  color: var(--body-color);
}
.form-group.style-border3 textarea::-ms-input-placeholder, .form-group.style-border3 input::-ms-input-placeholder {
  color: var(--body-color);
}
.form-group.style-border3 textarea::placeholder,
.form-group.style-border3 input::placeholder {
  color: var(--body-color);
}
.form-group.style-border3 select {
  background: var(--white-color);
  border: 1px solid var(--th-border-color);
}
.form-group.style-border3 i {
  color: var(--body-color);
  top: 20px;
  background: transparent;
}

[class*=col-].form-group > i {
  right: calc(var(--bs-gutter-x) / 2 + 25px);
}

option:checked, option:focus, option:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}

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

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

input[type=checkbox] {
  visibility: hidden;
  opacity: 0;
  display: inline-block;
  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(--white-color);
  border: 1px solid var(--th-border-color);
  height: 18px;
  width: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
  border-radius: 50%;
}
input[type=checkbox].style2 ~ label {
  color: #8B929C;
  padding-left: 23px;
  margin-bottom: -0.5em;
}
input[type=checkbox].style2 ~ label:before {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #8B929C;
  height: 14px;
  width: 14px;
  line-height: 14px;
  border-radius: 3px;
  top: 6px;
}
input[type=checkbox].style2:checked ~ label:before {
  color: var(--theme-color);
}

input[type=radio] {
  visibility: hidden;
  opacity: 0;
  display: inline-block;
  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;
  font-size: 0.6em;
  line-height: 19px;
  text-align: center;
  border: 1px solid var(--theme-color);
  border-radius: 100%;
  font-weight: 700;
  background: var(--white-color);
  color: transparent;
  -webkit-transition: all 0.2s ease;
  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;
}

textarea.is-invalid,
select.is-invalid,
input.is-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 {
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

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

.form-messages {
  display: none;
}
.form-messages.mb-0 * {
  margin-bottom: 0;
}
.form-messages.success {
  color: var(--success-color);
  display: block;
}
.form-messages.error {
  color: var(--error-color);
  display: block;
}

/*------------------- 2.4. Slick Slider -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.slider-area {
  position: relative;
}

.slider-arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0;
  background-color: var(--theme-color);
  color: var(--white-color);
  position: absolute;
  top: 50%;
  border: none;
  left: var(--pos-x, -90px);
  width: var(--icon-size, 56px);
  height: var(--icon-size, 56px);
  font-size: var(--icon-font-size, 18px);
  margin-top: calc(var(--icon-size, 56px) / -2);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 3;
  border-radius: 99px;
}
.slider-arrow.default {
  position: relative;
  --pos-x: 0;
  margin-top: 0;
}
.slider-arrow.slider-next {
  right: var(--pos-x, -90px);
  left: auto;
}
.slider-arrow:hover {
  background-color: var(--title-color);
  color: var(--white-color);
}
.slider-arrow.style2 {
  background: var(--gray-color4);
  color: var(--title-color);
  --icon-size: 40px;
}
.slider-arrow.style2:hover {
  background: var(--theme-color);
  color: var(--white-color);
}
.slider-arrow.style-border2 {
  background: transparent;
  border: 1px solid var(--light-color);
  color: var(--title-color);
}
.slider-arrow.style-border2 img {
  background: var(--title-color);
  -webkit-filter: blur(1px);
          filter: blur(1px);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider-arrow.style-border2:hover {
  background: var(--theme-color);
  border-color: var(--theme-color);
  color: var(--white-color);
}
.slider-arrow.style-border2:hover img {
  background: var(--white-color);
}
.slider-arrow.style-border3 {
  border: 1px solid var(--black-color3);
  border-radius: 30px;
  background: transparent;
  width: 80px;
  --icon-size: 45px;
}
.slider-arrow.style-border3:hover {
  background: var(--theme-color);
  border-color: var(--theme-color);
}

.arrow-wrap {
  position: relative;
}
.arrow-wrap .slider-arrow {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}
.arrow-wrap:hover .slider-arrow {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* Extra large devices */
@media (max-width: 1500px) {
  .slider-arrow {
    --arrow-horizontal: -20px;
    --pos-x: 0px;
  }
}
/* Medium Large devices */
@media (max-width: 1399px) {
  .slider-arrow {
    --arrow-horizontal: 40px;
    --pos-x: -30px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .slider-arrow {
    display: none;
  }
}
.icon-box .slider-arrow {
  opacity: 1;
  visibility: visible;
  -webkit-transform: none;
          transform: none;
}
.icon-box .slider-arrow:not(:last-child) {
  margin-right: 14px;
}
@media (max-width: 991px) {
  .icon-box .slider-arrow {
    display: inline-block !important;
  }
}

/* Medium devices */
@media (max-width: 991px) {
  .slider-arrow {
    --icon-size: 40px;
    line-height: 38px;
    margin-right: 40px;
    font-size: 14px;
  }
  .slider-arrow.slider-next {
    margin-right: 0;
  }
  .icon-box .slider-arrow {
    margin-right: 0;
  }
}

/*------------------- 2.5. Mobile Menu -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.th-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%;
  -webkit-transition: all ease 0.8s;
  transition: all ease 0.8s;
  opacity: 0;
  visibility: hidden;
}
.th-menu-wrapper .mobile-logo {
  padding-bottom: 30px;
  padding-top: 40px;
  display: block;
  text-align: center;
  background-color: var(--smoke-color2);
}
.th-menu-wrapper .mobile-logo svg {
  max-width: 185px;
}
.th-menu-wrapper .th-menu-toggle {
  border: none;
  font-size: 22px;
  position: absolute;
  right: -16.5px;
  top: 50px;
  padding: 0;
  line-height: 1;
  width: 33px;
  height: 33px;
  line-height: 35px;
  font-size: 18px;
  z-index: 1;
  color: var(--white-color);
  background-color: var(--theme-color);
  border-radius: 50%;
}
.th-menu-wrapper .th-menu-toggle:hover {
  background-color: var(--title-color);
  color: var(--white-color);
}
.th-menu-wrapper .th-menu-area {
  width: 100%;
  max-width: 310px;
  background-color: #fff;
  border-right: 3px solid var(--theme-color);
  height: 100%;
  position: relative;
  left: -110%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
  z-index: 1;
}
.th-menu-wrapper.th-body-visible {
  opacity: 1;
  visibility: visible;
}
.th-menu-wrapper.th-body-visible .th-menu-area {
  left: 0;
  opacity: 1;
  visibility: visible;
}
.th-menu-wrapper.style2 .mobile-logo {
  background: var(--title-color);
}
.th-menu-wrapper.style2 .th-menu-toggle {
  color: var(--title-color);
}
.th-menu-wrapper.style2 .th-menu-toggle:hover {
  color: var(--white-color);
  background: var(--black-color2);
}

.th-mobile-menu {
  overflow-y: scroll;
  max-height: calc(100vh - 200px);
  padding-bottom: 40px;
  margin-top: 33px;
  text-align: left;
}
.th-mobile-menu ul {
  margin: 0;
  padding: 0 0;
}
.th-mobile-menu ul li {
  border-bottom: 1px solid var(--th-border-color);
  list-style-type: none;
}
.th-mobile-menu ul li li:first-child {
  border-top: 1px solid var(--th-border-color);
}
.th-mobile-menu ul li a {
  display: block;
  position: relative;
  padding: 12px 0;
  line-height: 1.4;
  font-size: 16px;
  text-transform: capitalize;
  color: var(--title-color);
  padding-left: 18px;
}
.th-mobile-menu ul li a:before {
  content: "\f105";
  font-family: var(--icon-font);
  position: absolute;
  left: 0;
  top: 12px;
  margin-right: 10px;
  display: inline-block;
}
.th-mobile-menu ul li ul li {
  padding-left: 20px;
}
.th-mobile-menu ul li ul li:last-child {
  border-bottom: none;
}
.th-mobile-menu > ul {
  padding: 0 40px;
}
.th-mobile-menu > ul > li:last-child {
  border-bottom: none;
}

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

@media (max-width: 400px) {
  .th-menu-wrapper .th-menu-area {
    width: 100%;
    max-width: 270px;
  }
  .th-mobile-menu > ul {
    padding: 0 20px;
  }
}
.th-menu-wrapper2 {
  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%;
  -webkit-transition: all ease 0.8s;
  transition: all ease 0.8s;
  opacity: 0;
  visibility: hidden;
}
.th-menu-wrapper2 .th-menu-toggle2 {
  border: none;
  font-size: 22px;
  position: absolute;
  right: -16.5px;
  top: 50px;
  padding: 0;
  line-height: 1;
  width: 33px;
  height: 33px;
  line-height: 35px;
  font-size: 18px;
  z-index: 1;
  color: var(--white-color);
  background-color: var(--theme-color);
  border-radius: 50%;
}
.th-menu-wrapper2 .th-menu-toggle2:hover {
  background-color: var(--title-color);
  color: var(--white-color);
}
.th-menu-wrapper2.th-body-visible2 {
  opacity: 1;
  visibility: visible;
}

.th-menu-toggle2 {
  width: 56px;
  height: 56px;
  padding: 0;
  font-size: 20px;
  border: none;
  background-color: var(--theme-color);
  color: var(--white-color);
  display: inline-block;
  border-radius: 5px;
}
/*=================================
    03. Utilities
==================================*/
/*------------------- 3.1. Preloader -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.preloader {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  background-color: var(--white-color);
}
.preloader .th-btn {
  padding: 15px 20px;
  border-radius: 0;
  font-size: 14px;
}

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

.loader {
  font-size: 80px;
  display: inline-block;
  font-family: var(--title-font);
  font-weight: 500;
  color: var(--white-color);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-shadow: 0 0 3px var(--theme-color), 0 0 3px var(--theme-color), 0 0 3px var(--theme-color);
  position: relative;
  line-height: normal;
  letter-spacing: 0.02em;
}

.loading-text {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--theme-color);
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-animation: animloader 6s linear infinite;
          animation: animloader 6s linear infinite;
}

@-webkit-keyframes animloader {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes animloader {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
/*------------------- 3.2. Buttons -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.th-btn {
  position: relative;
  z-index: 2;
  overflow: hidden;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  border: none;
  text-align: center;
  background-color: var(--theme-color);
  color: var(--white-color);
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  padding: 20px 30px;
  min-width: 120px;
  border-radius: 50px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
  gap: 10px;
}
.th-btn i {
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
}
.th-btn:before, .th-btn:after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  width: 0%;
  background-color: var(--title-color);
  z-index: -1;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.th-btn:before {
  left: 0;
  border-radius: 0 10px 10px 0;
}
.th-btn:after {
  right: 0;
  border-radius: 10px 0 0 10px;
}
.th-btn:focus, .th-btn:hover, .th-btn:active {
  background: var(--theme-color);
  color: var(--white-color);
}
.th-btn:focus::before, .th-btn:focus:after, .th-btn:hover::before, .th-btn:hover:after, .th-btn:active::before, .th-btn:active:after {
  width: 55%;
  border-radius: 0;
}
.th-btn:has(.th-btn-icon) {
  padding: 17px 30px;
}
.th-btn.style2 {
  background: var(--title-color);
}
.th-btn.style2:after, .th-btn.style2:before {
  background: var(--theme-color);
}
.th-btn.style-border2 {
  border: 1px solid var(--th-border-color3);
  background: transparent;
  color: var(--title-color);
  padding: 19px 30px;
}
.th-btn.style-border2:after, .th-btn.style-border2:before {
  background: var(--title-color);
}
.th-btn.style-border2:focus, .th-btn.style-border2:active, .th-btn.style-border2:hover {
  border: 1px solid var(--title-color);
  background: var(--title-color);
  color: var(--white-color);
}
.th-btn.style-border2:focus::before, .th-btn.style-border2:focus:after, .th-btn.style-border2:active::before, .th-btn.style-border2:active:after, .th-btn.style-border2:hover::before, .th-btn.style-border2:hover:after {
  width: 55%;
  background: var(--title-color);
  color: var(--white-color);
}
.th-btn.style-border3 {
  border: 1px solid var(--light-color);
  background: transparent;
  color: var(--title-color);
  padding: 19px 30px;
}
.th-btn.style-border3 img {
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.th-btn.style-border3:before, .th-btn.style-border3:after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  width: 0%;
  background-color: var(--title-color);
  z-index: -1;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.th-btn.style-border3:focus, .th-btn.style-border3:active, .th-btn.style-border3:hover {
  border: 1px solid var(--title-color);
  background: var(--title-color);
  color: var(--white-color);
}
.th-btn.style-border3:focus::before, .th-btn.style-border3:focus:after, .th-btn.style-border3:active::before, .th-btn.style-border3:active:after, .th-btn.style-border3:hover::before, .th-btn.style-border3:hover:after {
  width: 55%;
  background: var(--title-color);
  color: var(--white-color);
}
.th-btn.th-btn-sm {
  padding: 15px 30px;
  min-width: 140px;
}
.th-btn.th-btn-sm.style-border3, .th-btn.th-btn-sm.style-border2 {
  padding: 15px 30px;
}

.icon-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: var(--btn-size, 56px);
  height: var(--btn-size, 56px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: var(--btn-font-size, 20px);
  background-color: var(--icon-bg, var(--theme-color));
  color: var(--white-color);
  text-align: center;
  border-radius: 50%;
  border: 0;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  position: relative;
}
.icon-btn:hover {
  background-color: var(--white-color);
  color: var(--title-color);
  border: 0;
}
.icon-btn.style2 {
  background: var(--white-color);
  color: var(--title-color);
}
.icon-btn.style2 img {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  background: var(--title-color);
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
.icon-btn.style2:hover {
  background: var(--theme-color);
}
.icon-btn.style2:hover img {
  background: var(--white-color);
}

.scroll-top {
  position: fixed;
  right: 30px;
  bottom: 55px;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 10000;
  opacity: 1;
  visibility: hidden;
  -webkit-transform: translateY(45px);
          transform: translateY(45px);
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}
.scroll-top:after {
  content: "\f102";
  font-family: var(--icon-font);
  position: absolute;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: #0E1B2C;
  left: 0;
  top: 0;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  z-index: 1;
  border: 2px solid #83C341;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 50%;
}
.scroll-top svg {
  color: #83C341;
  border-radius: 50%;
  background: var(--white-color);
}
.scroll-top svg path {
  fill: none;
}
.scroll-top .progress-circle path {
  stroke: #83C341;
  stroke-width: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}
.scroll-top:hover:after {
  border-color: #70AE34;
  color: #0E1B2C;
}
.scroll-top:hover .progress-circle path {
  stroke: #70AE34;
}
.scroll-top.show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.scroll-top.style2 svg {
  background: var(--black-color2);
}

/*------------------- 3.3. Titles -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.sec-title {
  margin-bottom: calc(var(--section-title-space) - 11px);
  margin-top: -0.24em;
  font-weight: 600;
}
.sec-title.style2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  /* Medium Large devices */
  /* Small devices */
  /* Small devices */
}
@media (max-width: 1399px) {
  .sec-title.style2 {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .sec-title.style2 {
    font-size: 34px;
  }
}
@media (max-width: 767px) {
  .sec-title.style2 {
    font-size: 30px;
  }
}

.sub-title {
  display: inline-block;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--title-font);
  color: var(--theme-color);
  margin-bottom: 30px;
  line-height: 24px;
  position: relative;
  /* Extra small devices */
}
.sub-title:before, .sub-title:after {
  content: "";
  position: relative;
  height: 1px;
  width: 100px;
  background: var(--th-border-color);
  display: inline-block;
  top: -4px;
}
.sub-title:before {
  margin-right: 20px;
}
.sub-title:after {
  margin-left: 20px;
}
.sub-title.text-white:after {
  background: var(--white-color);
}
.sub-title.h4 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  margin-top: -0.14em;
}
.sub-title.style2 {
  border: 2px solid var(--theme-color);
  border-radius: 100px;
  padding: 5px 19px;
  margin-bottom: 28px;
}
.sub-title.style2:after, .sub-title.style2:before {
  display: none;
}
@media (max-width: 375px) {
  .sub-title:after, .sub-title:before {
    display: none;
  }
}

.sec-text {
  font-size: 18px;
}

.box-title {
  font-size: 24px;
  line-height: 1.417;
  font-weight: 600;
  margin-top: -0.32em;
}
.box-title a {
  color: inherit;
}
.box-title a:hover {
  color: var(--theme-color);
}

.title-area {
  margin-bottom: calc(var(--section-title-space) - 18px);
  position: relative;
  z-index: 2;
}
.title-area .sec-title {
  margin-bottom: 18px;
}
.title-area.mb-0 .sec-title {
  margin-bottom: -0.24em;
}
.title-area.text-center .sub-title {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

/* Large devices */
@media (max-width: 1199px) {
  .title-area,
  .sec-title {
    --section-title-space: 60px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .title-area,
  .sec-title {
    --section-title-space: 50px;
  }
  .sub-title.h4 {
    font-size: 22px;
  }
}
/* Small devices */
/* Extra small devices */
/*------------------- 3.4. Common -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.shape-mockup-wrap {
  z-index: 2;
  position: relative;
}

.shape-mockup {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.shape-mockup .svg-img {
  height: 110px;
  width: 110px;
}

.th-social {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 16px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.th-social a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: var(--icon-size, 32px);
  height: var(--icon-size, 32px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white-color);
  font-size: 12px;
  text-align: center;
  border-radius: 50%;
}
.th-social a:last-child {
  margin-right: 0;
}
.th-social a:hover {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
  color: var(--white-color);
}
.th-social.style2 a {
  --icon-size: 40px;
  border: 1px solid var(--th-border-color);
  background: transparent;
  color: var(--body-color);
  font-size: 16px;
}
.th-social.style2 a:hover {
  background: var(--theme-color);
  color: var(--white-color);
}
.th-social.style7 a {
  color: var(--theme-color);
}
.th-social.style7 a:hover {
  color: var(--title-color);
}

.bg-mask {
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.box-icon img {
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

.box-text {
  margin-bottom: -0.5em;
}

@-webkit-keyframes gridanim {
  0% {
    top: -60px;
  }
  50% {
    top: 100%;
  }
  100% {
    top: -60px;
    background: -webkit-gradient(linear, left top, left bottom, from(var(--white-color)), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(180deg, var(--white-color) 0%, rgba(255, 255, 255, 0) 100%);
  }
}

@keyframes gridanim {
  0% {
    top: -60px;
  }
  50% {
    top: 100%;
  }
  100% {
    top: -60px;
    background: -webkit-gradient(linear, left top, left bottom, from(var(--white-color)), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(180deg, var(--white-color) 0%, rgba(255, 255, 255, 0) 100%);
  }
}
@-webkit-keyframes gridanim2 {
  0% {
    top: -60px;
  }
  50% {
    top: 100%;
  }
  100% {
    top: -60px;
    background: -webkit-gradient(linear, left top, left bottom, from(var(--theme-color)), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(180deg, var(--theme-color) 0%, rgba(255, 255, 255, 0) 100%);
  }
}
@keyframes gridanim2 {
  0% {
    top: -60px;
  }
  50% {
    top: 100%;
  }
  100% {
    top: -60px;
    background: -webkit-gradient(linear, left top, left bottom, from(var(--theme-color)), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(180deg, var(--theme-color) 0%, rgba(255, 255, 255, 0) 100%);
  }
}

/*------------------- 3.6. Font -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/

/*------------------- 3.7. Background -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

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

/*------------------- 3.8. Text Color -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.text-theme {
  color: var(--theme-color) !important;
}

.text-white {
  color: var(--white-color) !important;
}

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

/*------------------- 3.9. Overlay -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/

[data-overlay] {
  position: relative;
  z-index: 2;
}
[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-overlay=title]:before {
  background-color: var(--title-color);
}

[data-overlay=black]:before {
  background-color: var(--black-color);
}

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

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

[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 -------------------*/

@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
    opacity: 0;
  }
}
@-webkit-keyframes ripple2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    -webkit-transform: scale(2.8);
            transform: scale(2.8);
    opacity: 0;
  }
}
@keyframes ripple2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    -webkit-transform: scale(2.8);
            transform: scale(2.8);
    opacity: 0;
  }
}

@-webkit-keyframes heartbeat {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes heartbeat {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
  }
  100% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }
}

@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
  }
  100% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }
}

@-webkit-keyframes movingX {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes movingX {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.shake {
  -webkit-animation: shake 2s linear infinite;
          animation: shake 2s linear infinite;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@-webkit-keyframes movingCar {
  0% {
    -webkit-transform: translateX(0) rotateY(0deg);
            transform: translateX(0) rotateY(0deg);
  }
  50% {
    -webkit-transform: translateX(calc(-100vw + 108%));
            transform: translateX(calc(-100vw + 108%));
  }
  51% {
    -webkit-transform: translateX(calc(-100vw + 108%)) rotateY(180deg);
            transform: translateX(calc(-100vw + 108%)) rotateY(180deg);
  }
  100% {
    -webkit-transform: translateX(0) rotateY(180deg);
            transform: translateX(0) rotateY(180deg);
  }
}

@keyframes movingCar {
  0% {
    -webkit-transform: translateX(0) rotateY(0deg);
            transform: translateX(0) rotateY(0deg);
  }
  50% {
    -webkit-transform: translateX(calc(-100vw + 108%));
            transform: translateX(calc(-100vw + 108%));
  }
  51% {
    -webkit-transform: translateX(calc(-100vw + 108%)) rotateY(180deg);
            transform: translateX(calc(-100vw + 108%)) rotateY(180deg);
  }
  100% {
    -webkit-transform: translateX(0) rotateY(180deg);
            transform: translateX(0) rotateY(180deg);
  }
}
.moving {
  -webkit-animation: moving 8s linear infinite;
          animation: moving 8s linear infinite;
}

@-webkit-keyframes moving {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes moving {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes movingY {
  0% {
    left: 0;
  }
  50% {
    left: calc(100% - 20px);
  }
  100% {
    left: 0;
  }
}

@keyframes movingY {
  0% {
    left: 0;
  }
  50% {
    left: calc(100% - 20px);
  }
  100% {
    left: 0;
  }
}
.jump {
  -webkit-animation: jumpAni 7s linear infinite;
          animation: jumpAni 7s linear infinite;
}

@-webkit-keyframes jumpAni {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes jumpAni {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes jumpReverseAni {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes jumpReverseAni {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes spin2 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@keyframes spin2 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
.bounce {
  -webkit-animation: bounce 2s ease infinite;
          animation: bounce 2s ease infinite;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}

@-webkit-keyframes wave {
  0% {
    background-position: top right;
  }
  100% {
    background-position: top right -2000px;
  }
}

@keyframes wave {
  0% {
    background-position: top right;
  }
  100% {
    background-position: top right -2000px;
  }
}

@-webkit-keyframes bgColor {
  0% {
    background-color: #F2BA4C;
  }
  25% {
    background-color: #81F24C;
  }
  50% {
    background-color: #41F27D;
  }
  75% {
    background-color: #0500FF;
  }
  100% {
    background-color: #F2BA4C;
  }
}

@keyframes bgColor {
  0% {
    background-color: #F2BA4C;
  }
  25% {
    background-color: #81F24C;
  }
  50% {
    background-color: #41F27D;
  }
  75% {
    background-color: #0500FF;
  }
  100% {
    background-color: #F2BA4C;
  }
}
@-webkit-keyframes animate-positive {
  0% {
    width: 0;
  }
}
@keyframes animate-positive {
  0% {
    width: 0;
  }
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes slideinup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideinup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes slideinright {
  0% {
    opacity: 0;
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideinright {
  0% {
    opacity: 0;
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes slideindown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideindown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes slideinleft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideinleft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes slidebottomright {
  0% {
    opacity: 0;
    -webkit-transform: translateX(120px) translateY(120px);
            transform: translateX(120px) translateY(120px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}
@keyframes slidebottomright {
  0% {
    opacity: 0;
    -webkit-transform: translateX(120px) translateY(120px);
            transform: translateX(120px) translateY(120px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}
@-webkit-keyframes slidetopleft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px) translateY(-100px);
            transform: translateX(-100px) translateY(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}
@keyframes slidetopleft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px) translateY(-100px);
            transform: translateX(-100px) translateY(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}
@-webkit-keyframes toTopFromBottom {
  49% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes toTopFromBottom {
  49% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
/*custom-animation**********************/

@-webkit-keyframes custom-anim-right {
  0% {
    -webkit-transform: translateX(5%);
            transform: translateX(5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes custom-anim-right {
  0% {
    -webkit-transform: translateX(5%);
            transform: translateX(5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@-webkit-keyframes custom-anim-left {
  0% {
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes custom-anim-left {
  0% {
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@-webkit-keyframes custom-anim-top {
  0% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes custom-anim-top {
  0% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@-webkit-keyframes custom-anim-bottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
    clip-path: inset(100% 0 0 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes custom-anim-bottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
    clip-path: inset(100% 0 0 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@-webkit-keyframes fadeinup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeinup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes fadeinright {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes fadeinright {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes fadeinleft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes fadeinleft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/*=================================
    04. Template Style
==================================*/
/*------------------- 4.1. Widget  -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/

/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.widget {
  padding: var(--widget-padding-y, 32px) var(--widget-padding-x, 24px);
  background-color: transparent;
  margin-bottom: 32px;
  position: relative;
  border: 1px solid var(--th-border-color);
  border-radius: 16px;
}
.widget[data-overlay]:before {
  z-index: -1;
  border-radius: 8px;
}
.widget select,
.widget input,
.widget .form-select,
.widget .form-control,
.widget textarea {
  background-color: var(--white-color);
}
.widget textarea {
  min-height: 120px;
}
.widget .form-group > i {
  background-color: var(--white-color);
}

@-webkit-keyframes lineMove {
  0% {
    left: 0px;
  }
  50% {
    left: calc(100% - 50px);
  }
  100% {
    left: 0px;
  }
}

@keyframes lineMove {
  0% {
    left: 0px;
  }
  50% {
    left: calc(100% - 50px);
  }
  100% {
    left: 0px;
  }
}

.widget:has(.author-widget-wrap) {
  padding: 0;
  overflow: hidden;
}

.widget-contact-wrap {
  background: var(--theme-color);
  border-radius: 30px;
  padding: 40px;
  /* Extra small devices */
}
.widget-contact-wrap .box-text {
  color: var(--white-color);
  margin-bottom: 20px;
}
.widget-contact-wrap .info-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 14px;
}
.widget-contact-wrap .info-box:not(:last-child) {
  margin-bottom: 30px;
}
.widget-contact-wrap .info-box .info-box_icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  color: var(--theme-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 0;
  background: var(--white-color);
}
.widget-contact-wrap .info-box .info-box_title {
  color: var(--white-color);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--title-font);
  margin-bottom: 0;
  margin-top: -0.2em;
  text-transform: uppercase;
}
.widget-contact-wrap .info-box .info-box_text {
  font-size: 22px;
  font-weight: 500;
  font-family: var(--title-font);
  margin-bottom: -0.4em;
}
.widget-contact-wrap .info-box .info-box_text .info-box_link {
  color: var(--white-color);
}
@media (max-width: 575px) {
  .widget-contact-wrap {
    padding: 30px;
  }
}
/* Large devices */
/* Medium devices */
/* Extra small devices */
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.footer-widget {
  margin-bottom: 50px;
}
.footer-widget,
.footer-widget .widget {
  padding: 0;
  border: none;
  padding-bottom: 0;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.footer-widget .form-group > i {
  color: var(--theme-color);
  top: 18px;
}
.footer-widget select {
  background-color: transparent;
  border: 1px solid var(--th-border-color);
  -webkit-filter: brightness(9);
          filter: brightness(9);
}

.about-logo {
  margin-bottom: 15px;
}

.th-widget-about {
  max-width: 340px;
}
.th-widget-about .about-logo {
  margin-bottom: 37px;
}
.th-widget-about .about-text {
  margin-bottom: 34px;
  margin-top: -0.3em;
  line-height: 26px;
  color: var(--white-color);
}
.th-widget-about .th-social a {
  --icon-size: 50px;
  background: #29282B;
  border: 0;
  font-size: 16px;
  color: var(--white-color);
}
.th-widget-about .th-social a:hover {
  background: var(--theme-color);
  color: var(--white-color);
}

.th-newsletter-widget {
  max-width: 442px;
}
.th-newsletter-widget .newsletter-form {
  margin-top: 32px;
  position: relative;
  display: block;
}
.th-newsletter-widget .newsletter-form .form-group input {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  font-size: 14px;
  height: 45px;
  padding: 0 30px;
  padding-right: 30px;
  border: 0;
  border-radius: 50px;
  background: var(--white-color);
  padding-right: 145px;
}
.th-newsletter-widget .newsletter-form .form-group input::-webkit-input-placeholder {
  color: var(--title-color);
}
.th-newsletter-widget .newsletter-form .form-group input::-moz-placeholder {
  color: var(--title-color);
}
.th-newsletter-widget .newsletter-form .form-group input:-ms-input-placeholder {
  color: var(--title-color);
}
.th-newsletter-widget .newsletter-form .form-group input::-ms-input-placeholder {
  color: var(--title-color);
}
.th-newsletter-widget .newsletter-form .form-group input::placeholder {
  color: var(--title-color);
}
.th-newsletter-widget .newsletter-form .form-group:after {
  display: none;
}
.th-newsletter-widget .newsletter-form .th-btn {
  font-size: 14px;
  font-weight: 500;
  padding: 12px 27px;
  position: absolute;
  right: 8px;
  top: 9px;
}
.th-newsletter-widget .form-group {
  margin-bottom: 0;
}
.th-newsletter-widget.style2 .newsletter-form .th-btn {
  border-radius: 30px;
}

.th-newsletter-widget.footer-widget .box-title {
  color: var(--white-color);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0px;
}
.th-newsletter-widget.footer-widget .newsletter-form {
  margin-top: 22px;
}
.th-newsletter-widget.footer-widget .newsletter-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.th-newsletter-widget.footer-widget .newsletter-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  margin-bottom: 48px;
}
.th-newsletter-widget.footer-widget .newsletter-form .th-btn {
  position: inherit;
  padding: 15px 27px;
  margin-top: -17px;
}
.widget.widget-contact-wrap.footer-widget {
  position: relative;
}

/* Large devices */
/* Small devices */
@media (max-width: 767px) {
  .th-widget-about .about-text {
    margin-bottom: 20px;
  }
}
/* ---------------- Scroll Cue Plugin --------------------*/
/**-----------------------

 scrollCue.js - ver.2.0.0
 URL : https://prjct-samwest.github.io/scrollCue/

 created by SamWest.
 Copyright (c) 2020 SamWest.
 This plugin is released under the MIT License.

 -----------------------**/
/**  ---------------
     fadeIn
*/

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/**  ---------------
     slideInLeft
*/
[data-cue=slideInLeft] {
  opacity: 0;
}

@-webkit-keyframes slideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/**  ---------------
     slideInRight
*/
[data-cue=slideInRight] {
  opacity: 0;
}

@-webkit-keyframes slideInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(60px);
            transform: translateX(60px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(60px);
            transform: translateX(60px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/**  ---------------
     slideInDown
*/

@-webkit-keyframes slideInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-60px);
            transform: translateY(-60px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-60px);
            transform: translateY(-60px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/**  ---------------
     slideInUp
*/
[data-cue=slideInUp] {
  opacity: 0;
}

@-webkit-keyframes slideInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(60px);
            transform: translateY(60px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(60px);
            transform: translateY(60px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/**  ---------------
     zoomIn
*/

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/**  ---------------
     zoomOut
*/

@-webkit-keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/**  ---------------
     rotateIn
*/

@-webkit-keyframes rotateIn {
  from {
    opacity: 0;
    -webkit-transform: rotateZ(-15deg);
            transform: rotateZ(-15deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@keyframes rotateIn {
  from {
    opacity: 0;
    -webkit-transform: rotateZ(-15deg);
            transform: rotateZ(-15deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}
/**  ---------------
     bounceIn
*/

@-webkit-keyframes bounceIn {
  0% {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0% {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
/**  ---------------
     bounceInLeft
*/

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
/**  ---------------
     bounceInRight
*/

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
/**  ---------------
     bounceInDown
*/

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
/**  ---------------
     bounceInUp
*/

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
/**  ---------------
     flipInX
*/

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    opacity: 1;
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    opacity: 1;
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}
/**  ---------------
     flipInY
*/

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    opacity: 1;
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    opacity: 1;
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}
/*------------------- 4.2. Header  -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.th-header {
  position: relative;
  z-index: 41;
}
.th-header .icon-btn {
  border-radius: 10px;
}
.th-header .menu-area {
  position: relative;
  z-index: 2;
}

.sticky-wrapper {
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
.sticky-wrapper.sticky {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: var(--white-color);
  -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.07));
          filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.07));
  -webkit-animation: stickyAni 0.4s ease-in-out;
          animation: stickyAni 0.4s ease-in-out;
}

@-webkit-keyframes stickyAni {
  0% {
    -webkit-transform: translate3d(0, -40px, 0) scaleY(0.8);
            transform: translate3d(0, -40px, 0) scaleY(0.8);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleY(1);
            transform: translate3d(0, 0, 0) scaleY(1);
    opacity: 1;
  }
}

@keyframes stickyAni {
  0% {
    -webkit-transform: translate3d(0, -40px, 0) scaleY(0.8);
            transform: translate3d(0, -40px, 0) scaleY(0.8);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleY(1);
            transform: translate3d(0, 0, 0) scaleY(1);
    opacity: 1;
  }
}
.main-menu a {
  display: block;
  position: relative;
  font-weight: 400;
  font-size: 16px;
  font-family: var(--body-font);
  color: var(--title-color);
}
.main-menu a:hover {
  color: var(--theme-color);
}
.main-menu > ul > li {
  margin: 0 15px;
}
.main-menu > ul > li > a {
  padding: 36.5px 0;
}
.main-menu > ul > li > a:hover {
  color: var(--theme-color);
}
.main-menu ul {
  margin: 0;
  padding: 0;
}
.main-menu ul li {
  list-style-type: none;
  display: inline-block;
  position: relative;
}
.main-menu ul li:last-child {
  margin-right: 0 !important;
}
.main-menu ul li:first-child {
  margin-left: 0 !important;
}

@media (max-width: 1500px) {
  .main-menu > ul > li {
    margin: 0 13px;
  }
}

.header-button {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}

.header-logo {
  padding-top: 15px;
  padding-bottom: 15px;
}
.mobile-logo img,
.header-logo img,
.about-logo img {
  width: 200px;
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 575px) {
  .mobile-logo img,
  .header-logo img,
  .about-logo img {
    width: 175px;
  }
}
.header-logo a:hover {
  color: var(--theme-color2);
}
@media (max-width: 1399px) {
  .header-logo a {
    font-size: 46px;
  }
}
@media (max-width: 1299px) {
  .header-logo a {
    font-size: 40px;
  }
}

.menu-expand {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white-color);
  background-color: var(--theme-color2);
  padding: 17px 25px;
  width: 100%;
  /* Medium Large devices */
}
@media (max-width: 1299px) {
  .menu-expand {
    font-size: 15px;
  }
}
.menu-expand i {
  margin-right: 15px;
}
.menu-expand:hover {
  color: var(--white-color);
}

/* Header default ---------------------------------- */
/* Medium Large devices */
/* Medium Large devices */
/* Large devices */
/* Medium devices */
/* Extra small devices */

/* Header 1 --------x-------------------------- */
.header-layout1 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* Extra large devices */
  /* Medium Large devices */
  /* Medium Large devices */
  /* Medium devices */
}
@media (min-width: 1600px) {
  .header-layout1 {
    --main-container: 1420px;
  }
}
.header-layout1 .menu-area {
  padding: 20px 0;
}
.header-layout1 .main-menu > ul > li > a {
  padding: 29.5px 0;
  font-weight: 500;
}
.header-layout1 .icon-btn {
  border-radius: 50%;
}
.header-layout1 .sticky-wrapper.sticky {
  background: var(--white-color);
}
.header-layout1 .sticky-wrapper.sticky.scrolled,
.header-layout1.scrolled .sticky-wrapper.sticky {
  background: #0E1B2C;
}
.header-layout1 .sticky-wrapper.sticky.scrolled .main-menu > ul > li > a,
.header-layout1.scrolled .sticky-wrapper.sticky .main-menu > ul > li > a {
  color: #ffffff;
}
.header-layout1 .sticky-wrapper.sticky.scrolled .main-menu > ul > li > a:hover,
.header-layout1.scrolled .sticky-wrapper.sticky .main-menu > ul > li > a:hover {
  color: #ffffff;
}
.header-layout1 .sticky-wrapper.sticky.scrolled .header-button .th-btn.style2,
.header-layout1.scrolled .sticky-wrapper.sticky .header-button .th-btn.style2 {
  background-color: #83C341;
  border-color: #83C341;
  color: #ffffff;
}
.header-layout1 .sticky-wrapper.sticky.scrolled .header-button .th-btn.style2:before,
.header-layout1 .sticky-wrapper.sticky.scrolled .header-button .th-btn.style2:after,
.header-layout1.scrolled .sticky-wrapper.sticky .header-button .th-btn.style2:before,
.header-layout1.scrolled .sticky-wrapper.sticky .header-button .th-btn.style2:after {
  background-color: #83C341;
}
.header-layout1 .sticky-wrapper.sticky.scrolled .th-menu-toggle,
.header-layout1.scrolled .sticky-wrapper.sticky .th-menu-toggle {
  color: #ffffff;
}
@media (max-width: 1500px) {
  .header-layout1 .menu-area {
    padding: 20px 0px;
  }
}
@media (max-width: 1399px) {
}
@media (max-width: 1299px) {
}
@media (max-width: 991px) {
  .header-layout1 .menu-area {
    padding: 10px 0;
  }
}

.header-layout1 .sticky-wrapper.sticky .header-button .icon-btn {
  background: var(--smoke-color3);
  color: var(--theme-color);
}
.header-layout1 .sticky-wrapper.sticky .header-button .icon-btn:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}

/* Header 2 ---------------------------------- */
/* Medium Large devices */
/* Header 3 ---------------------------------- */
@media (max-width: 1399px) {
}
@media (max-width: 1299px) {
}

/* Extra small devices */
/* Header 4 ---------------------------------- */

/* Extra small devices */
/* Header 5 ---------------------------------- */

/*------------------- 4.3. Footer  -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.footer-wrapper {
  --border-color: rgba(255, 255, 255, 0.3);
  --body-color: #829592;
  position: relative;
  z-index: 2;
  background-color: var(--black-color2);
  overflow: hidden;
}

.widget-area {
  padding-top: 120px;
  padding-bottom: 70px;
}

.footer-links ul {
  padding: 0;
  margin: 0;
}
.footer-links li {
  font-family: var(--body-font);
  display: inline-block;
  margin-right: 20px;
  position: relative;
}
.footer-links li:last-child {
  margin-right: 0;
  padding-right: 0;
}
.footer-links a {
  font-family: inherit;
  color: var(--body-color);
  font-size: 16px;
}
.footer-links a:hover {
  color: var(--theme-color);
}

.copyright-wrap {
  padding: 26.5px 0;
  background-size: 100% auto;
  background-color: var(--title-color);
}
.copyright-wrap .copyright-text {
  color: var(--body-color);
  font-size: 16px;
}
.copyright-wrap .copyright-text a {
  color: var(--theme-color);
}
.copyright-wrap .copyright-text a:hover {
  color: var(--white-color);
}

.newsletter-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.newsletter-form .form-group {
  margin-bottom: 0;
  width: 100%;
}
.newsletter-form .th-btn {
  min-width: auto;
  font-size: 20px;
  padding: 18px 38px;
}

.copyright-text {
  margin: 0;
}
.copyright-text a {
  color: var(--theme-color);
}
.copyright-text a:hover {
  color: var(--white-color);
}

/* Medium devices */
/* Small devices */
/* Extra small devices */
@media (max-width: 575px) {
  .footer-wrapper .newsletter-form {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .footer-wrapper .widget-area {
    padding-top: var(--section-space-mobile);
    padding-bottom: 30px;
  }
  .copyright-text {
    text-align: center;
  }
}
/* footer default ---------------------------------- */

/* footer 1 ---------------------------------- */
.footer-wrapper.footer-layout1 {
  overflow: initial;
}

.footer-layout1 .footer-widget .th-widget-about {
  position: relative;
}
.footer-layout1 .footer-widget .th-widget-about:before {
  content: "";
  background: rgba(217, 217, 217, 0.1490196078);
  right: -100px;
  height: 100%;
  width: 1px;
  position: absolute;
}
@media (max-width: 1600px) {
  .footer-layout1 .footer-widget .th-widget-about:before {
    right: -76px;
  }
}
@media (max-width: 1399px) {
  .footer-layout1 .footer-widget .th-widget-about:before {
    right: -56px;
  }
}
@media (max-width: 1299px) {
  .footer-layout1 .footer-widget .th-widget-about:before {
    display: none;
  }
}
.footer-layout1 .widget.widget-contact-wrap.footer-widget:before {
  content: "";
  background: rgba(217, 217, 217, 0.1490196078);
  right: -109px;
  height: 100%;
  width: 1px;
  position: absolute;
}
@media (max-width: 1600px) {
  .footer-layout1 .widget.widget-contact-wrap.footer-widget:before {
    right: -76px;
  }
}
@media (max-width: 1399px) {
  .footer-layout1 .widget.widget-contact-wrap.footer-widget:before {
    right: -56px;
  }
}
@media (max-width: 1299px) {
  .footer-layout1 .widget.widget-contact-wrap.footer-widget:before {
    display: none;
  }
}

.footer-layout1 {
  --body-color: #0E1B2C;
  background: #0E1B2C;
  margin-top: 105px;
  padding-bottom: 50px;
}
.footer-layout1 .footer-bottom {
  position: relative;
  overflow: hidden;
}
.footer-layout1 .widget-area {
  padding-bottom: 30px;
  padding-top: 100px;
}
.footer-layout1 .copyright-wrap {
  --body-color: #ffffff;
}
.footer-layout1 .copyright-wrap {
  padding: 25px 27px;
  background-size: 100% auto;
  border: 1px solid rgba(217, 217, 217, 0.1490196078);
  border-radius: 15px;
  background: transparent;
}
.footer-layout1 .widget.th-newsletter-widget.footer-widget input {
  padding: 0 30px;
  padding: 0 30px;
}

/* Medium Large devices */
/* Medium Large devices */
@media (max-width: 1299px) {
  .footer-layout1 {
    margin-top: 70px;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .footer-layout1 {
    margin-top: 55px;
  }
  .footer-layout1 .widget-area {
    padding-bottom: 0px;
    padding-top: 60px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .footer-layout1 {
    margin-top: 70px;
  }
  .footer-layout1 .widget-area {
    padding-bottom: 0px;
    padding-top: 80px;
  }
  .footer-layout1 {
    margin-top: 0;
  }
}

/* footer 2 ---------------------------------- */
/*------------------- 4.4. Breadcumb  -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/

/*  When not  present breadcumb-menu */

/* Large devices */
/* Medium devices */
/* Small devices */
/* Extra small devices */
/*------------------- 4.5. Pagination  -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/

/* Small devices */
/*------------------- 4.6. Blog  -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/* Blockquote ---------------------*/

/* Large devices */
/* Small devices */
/* Extra small devices */
/* Extra small devices */

/* Medium Large devices */
/* Large devices */
/* Medium devices */
/* Small devices */
/* Extra small devices */
/*------------------- 4.7. Comments  -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/

/* Large devices */
/* Medium devices */
/* Small devices */
/* Extra small devices */
/*------------------- 4.8. Hero Area  -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/* Hero Global ---------------------------------- */
.th-hero-wrapper {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Hero 1 ---------------------------------- */
.hero-title {
  margin-bottom: 18px;
  margin-top: -0.22em;
}
.hero-title span {
  display: block;
}
.hero-title span .text-theme {
  display: inline-block;
}

/* Hero 2 --------------------------------------*/
.hero-2 {
  position: relative;
}
.hero-2 .background-image {
  background-position: unset;
}

.hero-style2 {
  position: relative;
  z-index: 6;
  padding: 300px 0 350px;
  /* Extra large devices */
  /* Medium Large devices */
  /* Medium Large devices */
  /* Large devices */
  /* Medium devices */
  /* Small devices */
  /* Extra small devices */
  /* Large devices */
}
@media (max-width: 1500px) {
  .hero-style2 {
    padding: 250px 0 200px;
  }
}
@media (max-width: 1399px) {
  .hero-style2 {
    padding: 255px 0 205px;
  }
}
@media (max-width: 1299px) {
  .hero-style2 {
    padding: 230px 0 180px;
  }
}
@media (max-width: 1199px) {
  .hero-style2 {
    padding: 190px 0 170px;
  }
}
@media (max-width: 991px) {
  .hero-style2 .hero-style2 {
    padding: 165px 0 170px;
  }
}
@media (max-width: 767px) {
  .hero-style2 {
    padding: 160px 0 175px;
  }
}
@media (max-width: 575px) {
  .hero-style2 {
    padding: 165px 0 180px;
  }
}
.hero-style2 .hero-title {
  margin-bottom: 20px;
}
.hero-style2 .hero-title span {
  display: inline-block;
}
.hero-style2 .btn-wrap {
  gap: 24px;
  margin-top: 30px;
}
.hero-style2 .checklist {
  margin-bottom: 45px;
}
.hero-style2 .checklist li {
  color: var(--title-color);
  line-height: 1.6;
}
.hero-style2 .checklist li::before {
  background: var(--title-color);
}
.hero-2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0E1B2C 0%, #0E1B2C 100%);
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}
.hero-2 .hero-inner {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: calc(100svh - 100px);
  /* Extra bottom padding so CTAs stay clear of the next section after removing negative hero margin */
  padding: 108px 0 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.hero-2 .hero-inner > .container {
  width: 100%;
}
/* Remove oversized block padding so the row can sit in the vertical center */
.hero-2 .hero-style2 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (max-width: 991px) {
  .hero-2 .hero-inner {
    min-height: 0;
    padding: 96px 0 72px;
  }
}
@media (max-width: 575px) {
  .hero-2 .hero-inner {
    padding: 88px 0 64px;
  }
}
.hero-2 .hero-style2 .hero-title {
  color: #FFFFFF;
  font-size: 48px;
  line-height: 1.2;
  font-weight: 700;
}
.hero-2 .hero-style2 .hero-title .text-theme {
  color: #83C341 !important;
}
@media (max-width: 1399px) {
  .hero-2 .hero-style2 .hero-title {
    font-size: 40px;
  }
}
@media (max-width: 1299px) {
  .hero-2 .hero-style2 .hero-title {
    font-size: 38px;
  }
}
@media (max-width: 1199px) {
  .hero-2 .hero-style2 .hero-title {
    font-size: 34px;
  }
}
@media (max-width: 767px) {
  .hero-2 .hero-style2 .hero-title {
    font-size: 28px;
  }
}
@media (max-width: 575px) {
  .hero-2 .hero-style2 .hero-title {
    font-size: 24px;
  }
}
.hero-2 .hero-style2 .checklist li {
  color: #AAB6D1;
}
.hero-2 .hero-style2 .checklist li::before {
  background: #AAB6D1;
}
.hero-2 .hero-style2 .btn-wrap .th-btn {
  background: #83C341;
  border-color: #83C341;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(131, 195, 65, 0.3);
}
.hero-2 .hero-style2 .btn-wrap .th-btn:before,
.hero-2 .hero-style2 .btn-wrap .th-btn:after {
  background: #83C341;
}
.hero-2 .hero-style2 .btn-wrap .th-btn:hover {
  background: #70AE34;
  border-color: #70AE34;
  color: #FFFFFF;
}
.hero-2 .hero-style2 .btn-wrap .th-btn:hover:before,
.hero-2 .hero-style2 .btn-wrap .th-btn:hover:after {
  background: #70AE34;
}
.hero-2 .hero-style2 .btn-wrap .th-btn.style2 {
  background: transparent;
  border: 1px solid #83C341;
  color: #FFFFFF;
}
.hero-2 .hero-style2 .btn-wrap .th-btn.style2:before,
.hero-2 .hero-style2 .btn-wrap .th-btn.style2:after {
  background: transparent;
}
.hero-2 .hero-style2 .btn-wrap .th-btn.style2:hover {
  background: #83C341;
  border-color: #83C341;
  color: #FFFFFF;
}
.hero-2 .hero-style2 .btn-wrap .th-btn.style2:hover:before,
.hero-2 .hero-style2 .btn-wrap .th-btn.style2:hover:after {
  background: #83C341;
}
.hero-2 .hero-image {
  width: 100%;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: -30%;
  margin-top: 0;
}
.hero-2 .hero-image img {
  width: 140%;
  max-width: none;
  height: auto;
  position: relative;
  right: -40px;
  animation: heroLaptopFloatY 4s ease-in-out infinite;
}
@keyframes heroLaptopFloatY {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}
.th-header.header-layout1 .header-button .th-btn.style2 {
  background: #83C341;
  border-color: #83C341;
  color: #FFFFFF;
  transition: all 0.3s ease;
}
.th-header.header-layout1 .header-button .th-btn.style2:before,
.th-header.header-layout1 .header-button .th-btn.style2:after {
  background: #83C341;
}
.th-header.header-layout1 .header-button .th-btn.style2:hover {
  background: #70AE34;
  border-color: #70AE34;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(131, 195, 65, 0.3);
}
.th-header.header-layout1 .header-button .th-btn.style2:hover:before,
.th-header.header-layout1 .header-button .th-btn.style2:hover:after {
  background: #70AE34;
}
.th-header.header-layout1 .main-menu > ul > li > a,
.th-header.header-layout1 .main-menu a {
  color: #FFFFFF;
  transition: color 0.3s ease;
}
.th-header.header-layout1 .main-menu > ul > li > a:hover,
.th-header.header-layout1 .main-menu a:hover,
.th-header.header-layout1 .main-menu .active > a {
  color: #83C341;
}
.header-layout1 .sticky-wrapper.sticky,
.header-layout1.scrolled .sticky-wrapper.sticky {
  background-color: #0E1B2C;
}
.header-layout1 .sticky-wrapper.sticky .main-menu > ul > li > a,
.header-layout1 .sticky-wrapper.sticky .main-menu a {
  color: #FFFFFF;
}
.header-layout1 .sticky-wrapper.sticky .main-menu > ul > li > a:hover,
.header-layout1 .sticky-wrapper.sticky .main-menu a:hover,
.header-layout1.scrolled .sticky-wrapper.sticky .main-menu > ul > li > a:hover,
.header-layout1.scrolled .sticky-wrapper.sticky .main-menu a:hover {
  color: #83C341;
}
@media (max-width: 1199px) {
  .hero-style2 {
    text-align: center;
  }
  .hero-2 .hero-image {
    width: 100%;
    margin-top: 30px;
    margin-left: 0;
  }
  .hero-2 .hero-image img {
    width: 100%;
    max-width: 100%;
    right: 0;
    animation: none;
  }
  .hero-style2 .hero-title {
    margin-bottom: 15px;
  }
  .hero-style2 .btn-wrap {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .hero-style2 .checklist ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

/*------------------- 1.1. Mixin -------------------*/
.popup-search-box {
  position: fixed;
  top: 0;
  left: 50%;
  background-color: rgba(19, 24, 43, 0.75);
  height: 0;
  width: 0;
  overflow: hidden;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
}
.popup-search-box button.searchClose {
  width: 60px;
  height: 60px;
  line-height: 58px;
  position: absolute;
  top: 40px;
  right: 40px;
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-color);
  background-color: transparent;
  font-size: 22px;
  border-radius: 50%;
  -webkit-transform: rotate(0);
          transform: rotate(0);
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
  color: var(--white-color);
}
.popup-search-box button.searchClose:hover {
  color: var(--white-color);
  border-color: var(--theme-color);
  background: var(--theme-color);
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.popup-search-box form {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  padding-bottom: 40px;
  cursor: auto;
  width: 100%;
  max-width: 700px;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  -webkit-transition: -webkit-transform ease 0.4s;
  transition: -webkit-transform ease 0.4s;
  transition: transform ease 0.4s;
  transition: transform ease 0.4s, -webkit-transform ease 0.4s;
  /* Large devices */
}
@media (max-width: 1199px) {
  .popup-search-box form {
    max-width: 600px;
  }
}
.popup-search-box form input {
  font-size: 18px;
  height: 70px;
  width: 100%;
  border: 2px solid var(--theme-color);
  background-color: transparent;
  padding-left: 30px;
  color: #fff;
  border-radius: 50px;
  padding-right: 80px;
}
.popup-search-box form input::-moz-placeholder {
  color: #fff;
}
.popup-search-box form input::-webkit-input-placeholder {
  color: #fff;
}
.popup-search-box form input:-ms-input-placeholder {
  color: #fff;
}
.popup-search-box form input::-ms-input-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: 24px;
  right: 12px;
  color: var(--white-color);
  cursor: pointer;
  width: 70px;
  height: 70px;
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
  -webkit-transform: scale(1.001);
          transform: scale(1.001);
}
.popup-search-box form button:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.popup-search-box.show {
  opacity: 1;
  visibility: visible;
  width: 100.1%;
  height: 100%;
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
  border-radius: 0;
}
.popup-search-box.show form {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

.woocommerce-form-coupon,
.woocommerce-form-login {
  padding: 35px 40px 35px 40px;
  background-color: var(--white-color);
  -webkit-box-shadow: 0px 6px 30px rgba(1, 15, 28, 0.1);
          box-shadow: 0px 6px 30px rgba(1, 15, 28, 0.1);
  margin-bottom: 0;
  border-radius: 0px;
  /* Extra small devices */
}
@media (max-width: 575px) {
  
  .woocommerce-form-coupon,
  .woocommerce-form-login {
    padding: 40px 20px;
    border-radius: 10px;
  }
}

.woocommerce-form-coupon .form-group,
.woocommerce-form-login .form-group {
  margin-bottom: 20px;
}

.woocommerce-form-coupon .form-group:last-child,
.woocommerce-form-login .form-group:last-child {
  margin-bottom: 0;
}

.rating-select label {
  margin: 0;
  margin-right: 10px;
}
.rating-select p.stars {
  margin-bottom: 0;
  line-height: 1;
}
.rating-select p.stars a {
  position: relative;
  height: 14px;
  width: 18px;
  text-indent: -999em;
  display: inline-block;
  text-decoration: none;
}
.rating-select p.stars a::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 14px;
  line-height: 1;
  font-family: var(--icon-font);
  content: "\e28b";
  font-weight: 400;
  text-indent: 0;
  color: var(--yellow-color);
}
.rating-select p.stars a:hover ~ a::before {
  content: "\e28b";
  font-weight: 400;
}
.rating-select p.stars:hover a::before {
  content: "\e28b";
  font-weight: 700;
}
.rating-select p.stars.selected a.active::before {
  content: "\e28b";
  font-weight: 700;
}
.rating-select p.stars.selected a.active ~ a::before {
  content: "\e28b";
  font-weight: 400;
}
.rating-select p.stars.selected a:not(.active)::before {
  content: "\e28b";
  font-weight: 700;
}
/*------------------- 1.1. Mixin -------------------*/
.woocommerce-Reviews .comment-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 24px;
  margin: -12px !important;
  margin-bottom: 28px !important;
}
.woocommerce-Reviews .comment-list li {
  width: 50%;
  /* Medium devices */
}
@media (max-width: 991px) {
  .woocommerce-Reviews .comment-list li {
    width: 100%;
  }
}

/* Large devices */
/* Medium devices */
@media (max-width: 991px) {
  .woocommerce-Reviews .comment-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* Extra small devices */
#description {
  margin-bottom: 30px;
}

/*------------------- 1.1. Mixin -------------------*/

.woocommerce-form-login select,
.woocommerce-form-login .form-select,
.woocommerce-form-login .form-control,
.woocommerce-form-coupon select,
.woocommerce-form-coupon .form-select,
.woocommerce-form-coupon .form-control {
  margin-bottom: var(--bs-gutter-x);
}

#ship-to-different-address {
  margin-top: 15px;
}

/* About 2 ---------------------------------- */
.about-area-2 {
  padding: 150px 0 234px;
  margin-top: 80px;
  background: #0E1B2C;
}

.about-wrap2 .box-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 5px;
}
.about-wrap2 .sec-text {
  line-height: 26px;
  font-size: 16px;
  color: var(--black-color3);
}

.about-wrap2 .icon-box-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 25px 0;
  margin-bottom: 30px;
}
.about-wrap2 .icon-box-wrap .icon-box-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.about-wrap2 .icon-box-wrap .icon-box-item .content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.about-wrap2 .icon-box-wrap .icon-box-item .content .box-text {
  color: var(--black-color3);
  line-height: 26px;
}
.about-wrap2 .icon-box-wrap .icon-box-item .content .box-text span {
  display: inline-block;
  font-weight: 600;
}
.about-wrap2 .icon-box-wrap .icon-box-item .icon-box {
  height: 35px;
  width: 35px;
  line-height: 33px;
  text-align: center;
  border-radius: 50%;
  background: #F9E9E0;
}

.about-wrap2 .pet-care-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px 24px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.about-wrap2 .pet-care-wrap .item {
  background: var(--white-color);
  border-radius: 20px;
  padding: 10px;
}
.about-wrap2 .pet-care-wrap .item .box-title {
  font-size: 20px;
  color: var(--title-color);
  padding: 12px 15px 9px;
}
.about-wrap2 .pet-care-wrap .item .prog-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 43px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #F9E9E0;
  padding: 8px 25px;
  border-radius: 20px;
}
.about-wrap2 .pet-care-wrap .item .prog-wrap .box-number {
  font-size: 18px;
  color: var(--theme-color);
  font-weight: 500;
  margin: 0;
}
.about-wrap2 .pet-care-wrap .item .prog-wrap .box-number .counter-number {
  font-size: 48px;
  font-weight: 600;
  margin-right: 5px;
}
.about-wrap2 .pet-care-wrap .item .prog-wrap .button-wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.about-wrap2 .pet-care-wrap .item .prog-wrap .button-wrap .th-btn {
  padding: 10px 18px;
  min-width: 124px;
}

/* Brand color refinement only: about section */
.about-area-2.premium-dark-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0E1B2C;
  opacity: 0.9;
  z-index: 1;
  pointer-events: none;
}
.about-area-2.premium-dark-about {
  padding-bottom: 120px;
}
.about-area-2.premium-dark-about .container {
  position: relative;
  z-index: 2;
}
.about-area-2.premium-dark-about .why-bg-shape1-2 {
  z-index: 4;
}
.about-area-2.premium-dark-about .why-bg-shape1-2 img {
  opacity: 0.8;
}
.about-area-2.premium-dark-about .about-shape1-33-small img {
  width: 472px;
  height: auto;
}

/* Laptop mockup: no bitmap mask (mask image did not match photo aspect → clipped bottom-left). Use radius only. */
.about-area-2.premium-dark-about .about-platform-laptop img {
  display: block;
  border-radius: 0;
  box-shadow: none;
}
.about-area-2.premium-dark-about .sub-title.style2 {
  color: #83C341;
  border-color: #83C341;
  background: transparent;
}
.about-area-2.premium-dark-about .sec-title.style2,
.about-area-2.premium-dark-about .about-wrap2 .box-title {
  color: #FFFFFF;
}
.about-area-2.premium-dark-about .about-wrap2 .sec-text,
.about-area-2.premium-dark-about .about-wrap2 .icon-box-wrap .icon-box-item .content .box-text {
  color: #AAB6D1;
}
.about-area-2.premium-dark-about .about-wrap2 {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.about-area-2.premium-dark-about .about-wrap2 .icon-box-wrap .icon-box-item .icon-box {
  background: rgba(131, 195, 65, 0.15);
}
.about-area-2.premium-dark-about .about-wrap2 .icon-box-wrap .icon-box-item .icon-box img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(28%) saturate(947%) hue-rotate(45deg) brightness(92%) contrast(92%);
}
.about-area-2.premium-dark-about .about-wrap2 .icon-box-wrap .icon-box-item .content .box-text span {
  color: #FFFFFF;
}
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap .item {
  background: #303D58;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap .item .box-title {
  color: #FFFFFF;
}
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap .item .prog-wrap {
  background: rgba(131, 195, 65, 0.12);
  border-color: transparent;
}
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap .item .prog-wrap .box-number,
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap .item .prog-wrap .box-number .counter-number {
  color: #83C341;
}
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap .item .prog-wrap .button-wrap .th-btn {
  background-color: #83C341;
  color: #FFFFFF;
  border-color: #83C341;
}
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap .item .prog-wrap .button-wrap .th-btn:before,
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap .item .prog-wrap .button-wrap .th-btn:after {
  background-color: #83C341;
}
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap .item .prog-wrap .button-wrap .th-btn:hover {
  background-color: #70AE34;
}
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap .item .prog-wrap .button-wrap .th-btn:hover:before,
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap .item .prog-wrap .button-wrap .th-btn:hover:after {
  background-color: #70AE34;
}

/* About platform: heading size + progress cards layout */
.about-area-2.premium-dark-about .container {
  overflow-x: hidden;
}
.about-area-2.premium-dark-about .about-slider2 {
  overflow: hidden !important;
}
.about-area-2.premium-dark-about .about-wrap2,
.about-area-2.premium-dark-about .row > [class*="col-"] {
  overflow: visible;
}
.about-title,
.hero-heading {
  font-size: 42px !important;
  line-height: 1.2 !important;
}
@media (max-width: 768px) {
  .about-title,
  .hero-heading {
    font-size: 28px !important;
  }
}
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap.cards-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
}
.about-area-2.premium-dark-about .about-wrap2 .pet-care-wrap.cards-wrapper .item.progress-card {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 260px;
          flex: 1 1 260px;
  min-width: 260px;
  max-width: 100%;
  margin-bottom: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 1199px) {
  .about-area-2.premium-dark-about {
    padding-bottom: 90px;
  }
}
@media (max-width: 991px) {
  .about-area-2.premium-dark-about {
    padding-bottom: 70px;
  }
}

/* Medium Large devices */
@media (max-width: 1399px) {
  .about-wrap2 .pet-care-wrap .item .prog-wrap {
    gap: 20px;
  }
}
/* Medium Large devices */
@media (max-width: 1299px) {
  .about-wrap2 .pet-care-wrap .item .prog-wrap {
    gap: 5px;
    padding: 8px 18px;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .about-area-2 {
    padding: 120px 0 160px;
    margin-top: 50px;
    background: var(--smoke-color2);
  }
  .about-wrap2 .pet-care-wrap {
    gap: 30px 34px;
    -webkit-box-pack: inherit;
        -ms-flex-pack: inherit;
            justify-content: inherit;
  }
  .about-wrap2 .pet-care-wrap .item .prog-wrap {
    gap: 40px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .about-area-2 {
    padding: 80px 0 80px;
    margin-top: 30px;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .about-area-2 {
    padding: 100px 0 105px;
    margin-top: 30px;
    background: var(--smoke-color2);
  }
  .about-wrap2 .pet-care-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: auto;
  }
  .about-wrap2 .pet-care-wrap .item .prog-wrap {
    gap: 40px;
    text-align: end;
  }
}
/* Extra small devices */
@media (max-width: 375px) {
  .about-area-2 {
    padding: 85px 0 85px;
    margin-top: 30px;
  }
}
/* Team Details ---------------------------------- */

.circular-progress {
  position: relative;
  width: 190px;
  height: 190px;
  text-align: center;
  display: inline-block;
  /* Medium Large devices */
}
.circular-progress svg {
  width: 100%;
  height: 100%;
}
.circular-progress .circle {
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  -webkit-transition: stroke-dashoffset 1s ease;
  transition: stroke-dashoffset 1s ease;
  stroke-linecap: round;
  stroke: var(--theme-color);
}
.circular-progress .box-title {
  font-size: 16px;
  font-weight: 400;
  color: var(--body-color);
  margin-bottom: -0.3em;
  margin-top: 13px;
}
@media (max-width: 1299px) {
  .circular-progress {
    width: 170px;
    height: 170px;
  }
  .circular-progress .circle {
    stroke-width: 2;
  }
  .circular-progress .box-title {
    font-size: 14px;
  }
}


/*------------------- 1.1. Mixin -------------------*/
.checklist ul {
  padding-left: 0;
  list-style: none;
  text-align: left;
  margin-bottom: 0;
}
.checklist li {
  color: var(--body-color);
  font-weight: 400;
  font-size: 18px;
  font-family: var(--body-font);
  padding-left: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  line-height: 1.75;
  position: relative;
  /* Extra small devices */
}
@media (max-width: 575px) {
  .checklist li {
    font-size: 16px;
  }
}
.checklist li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--body-color);
}
.checklist li > i {
  color: var(--theme-color);
  position: relative;
  top: 2px;
}
.checklist li:not(:last-child) {
  margin-bottom: 4px;
}
.checklist.style2 li {
  font-size: 16px;
  font-weight: 400;
  font-family: var(--body-font);
  color: var(--black-color3);
  padding-left: 30px;
}
.checklist.style2 li:before {
  content: "\f00c";
  display: inline-block;
  position: relative;
  font-family: var(--icon-font);
  margin-left: 5px;
  font-weight: 600;
  top: 0px;
  font-size: 0.9em;
  color: var(--title-color3);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  height: 0;
  width: 0;
  margin-left: 7px;
  left: -9px;
}
.checklist.style2 li:not(:last-child) {
  margin-bottom: 0px;
}

.btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px 30px;
}
.btn-wrap.style2 {
  gap: 20px 20px;
}

.info-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.info-box:not(:last-child) {
  margin-bottom: 20px;
}
.info-box .box-icon {
  width: 24px;
  height: 24px;
  border: 1px solid var(--white-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  border-radius: 50%;
  font-size: 12px;
  color: var(--white-color);
}
.info-box .box-text {
  font-size: 16px;
  margin-top: -0.5em;
  line-height: 1.5em;
}

.circle-title-anime {
  display: inline-block;
  height: 158px;
  width: 158px;
  border-radius: 50%;
  z-index: 1;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--body-font);
  color: var(--white-color);
  line-height: normal;
  text-align: center;
  -webkit-animation: spin 20s linear infinite;
          animation: spin 20s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -79px;
  margin-top: -79px;
}
.circle-title-anime span {
  --rotate-letter: 11deg;
  height: 84px;
  position: absolute;
  width: 20px;
  left: 44.5%;
  top: -5px;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-transform: rotate(var(--rotate-letter));
          transform: rotate(var(--rotate-letter));
}

/* Large devices */

/*------------------- 4.00. Why -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/* Why Choose Us Area ---------------------------------- */

/* Why Choose Us Area 1.1 ---------------------------------- */

/* Medium devices */
/*------------------- 4.00. Faq -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/* Faq 1 ---------------------------------- */

/* Extra small devices */

/* Extra large devices */
/* Medium Large devices */
/* Faq 2 Service page ---------------------------------- */

/* Small devices */
/* Faq 2 ---------------------------------- */

/*------------------- 4.00. Service -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/* Service Card ---------------------------------- */

/* Extra small devices */
/* Service Area 2 ---------------------------------- */

/* Service Details ---------------------------------- */

/* Large devices */
/* Small devices */
/*------------------- 4.00. Process -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/

/* Process Card ---------------------------------- */
/* Extra small devices */
/* Process area 2 ---------------------------------- */
.process-area-2 {
  background: #0E1B2C;
}

.process-2-list-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid #353535;
}
.process-2-list-wrap .process-card2 {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  position: relative;
  border-right: 1px solid #353535;
  cursor: pointer;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
  height: 435px;
}
.process-2-list-wrap .process-card2 .box-title {
  font-size: 64px;
  color: rgba(255, 255, 255, 0.1019607843);
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
          transform: translate(-50%, -50%) rotate(-90deg);
  margin: 0;
  text-transform: uppercase;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.process-2-list-wrap .process-card2 .process-icon {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.process-2-list-wrap .process-card2 .box-content {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.process-2-list-wrap .process-card2 .box-content .box-text_title {
  color: var(--white-color);
}
.process-2-list-wrap .process-card2 .box-content .box-text {
  color: #A9ACBD;
  width: 83%;
}
.process-2-list-wrap .inner-wrap {
  margin-left: 80px;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.process-2-list-wrap .inner-wrap .process-icon {
  margin-top: 80px;
}
.process-2-list-wrap .inner-wrap .box-content {
  margin-top: 58px;
}

.process-2-list-wrap .process-card2.active {
  -webkit-box-flex: 200%;
      -ms-flex: 200%;
          flex: 200%;
}
.process-2-list-wrap .process-card2.active .box-title {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  top: 55px;
  left: inherit;
  right: 70px;
}
.process-2-list-wrap .process-card2.active .process-icon {
  visibility: visible;
  opacity: 1;
}
.process-2-list-wrap .process-card2.active .box-content {
  opacity: 1;
  visibility: visible;
}

/* Extra large devices */
@media (max-width: 1500px) {
  .process-2-list-wrap .inner-wrap {
    margin-left: 40px;
  }
  .process-2-list-wrap .process-card2 .box-content .box-text {
    color: #A9ACBD;
    width: 98%;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .process-2-list-wrap .process-card2 .box-title {
    font-size: 56px;
  }
  .process-2-list-wrap .process-card2.active .box-title {
    right: 35px;
  }
  .process-2-list-wrap .process-card2 .process-icon img {
    width: 80px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .process-2-list-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .process-2-list-wrap .process-card2 {
    border-right: 0;
    border-bottom: 1px solid #353535;
  }
  .process-2-list-wrap .process-card2 .inner-wrap .process-icon {
    margin-top: 0;
  }
  .process-2-list-wrap .process-card2.active .inner-wrap .process-icon {
    margin-top: 45px;
  }
  .process-2-list-wrap .process-card2.active .box-title {
    top: 24px;
    right: 70px;
  }
  .process-2-list-wrap .inner-wrap .box-content {
    margin-top: 40px;
    margin-bottom: 50px;
    width: 60%;
  }
}
/* Small devices */
@media (max-width: 767px) {
  .process-2-list-wrap .inner-wrap .box-content {
    width: 80%;
  }
}
/* Extra small devices */
@media (max-width: 575px) {
  .process-2-list-wrap .inner-wrap .box-content {
    width: 100%;
  }
  .process-2-list-wrap .inner-wrap {
    margin-left: 15px;
  }
  .process-2-list-wrap .inner-wrap .box-content {
    margin-top: 25px;
  }
  .process-2-list-wrap .process-card2 .box-content .box-text_title {
    margin-bottom: 6px;
  }
  .process-2-list-wrap .process-card2.active .box-title {
    font-size: 46px;
  }
  .process-2-list-wrap .process-card2 .box-title {
    font-size: 46px;
  }
}
/* Extra small devices */
@media (max-width: 375px) {
  .process-2-list-wrap .process-card2 .process-icon img {
    width: 55px;
  }
}
/* Process area 1.1 ---------------------------------- */
/* Medium Large devices */
/* Medium devices */
/* Small devices */
/* Extra small devices */
/*------------------- 4.00. Pricing -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/*------------------- 4.00. Feature -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/* Feature card ---------------------------------- */
.feature-card {
  position: relative;
  border-radius: 30px;
  z-index: 1;
  overflow: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  background: var(--smoke-color2);
  text-align: start;
  /* Large devices */
}
.feature-card .top-wrap {
  padding: 30px;
}
.feature-card .box-icon {
  display: inline-block;
  margin-bottom: 35px;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  background-color: var(--white-color);
  border-radius: 100px;
}
.feature-card .box-icon img {
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
.feature-card .box-title {
  font-size: 24px;
  font-weight: 600;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin-bottom: 8px;
  color: var(--title-color);
  /* Medium Large devices */
  /* Large devices */
}
@media (max-width: 1299px) {
  .feature-card .box-title {
    font-size: 22px;
  }
}
@media (max-width: 1199px) {
  .feature-card .box-title {
    font-size: 24px;
  }
}
.feature-card .box-text {
  margin-bottom: -0.5em;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  color: var(--black-color3);
}
.feature-card:hover .box-icon img {
  -webkit-transform: scale(-1) rotate(180deg);
          transform: scale(-1) rotate(180deg);
}
@media (max-width: 1199px) {
  .feature-card .box-title {
    font-size: 24px;
  }
}

.feature-card .bottom-text {
  background: var(--white-color);
  margin: 1px;
  border-radius: 30px;
  padding: 30px 25px;
}
.feature-card .bottom-text .checklist.style2 ul {
  list-style: none;
  margin-bottom: 25px;
}
.feature-card .bottom-text .checklist.style2 ul li {
  list-style: none;
  padding-left: 0;
  gap: 10px;
}

/* Premium dark redesign: home-2 features */
.premium-dark-features {
  background: linear-gradient(180deg, #0E1B2C 0%, #0E1B2C 100%);
  padding: 100px 0;
}
.premium-dark-features .why-bg-shape1-2 {
  display: none !important;
}
.premium-dark-features .sub-title {
  color: #83C341;
  border-color: #83C341;
}
.premium-dark-features .sec-title {
  color: #FFFFFF;
  font-weight: 600;
}
.premium-dark-features .feature-card {
  background: #303D58;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.premium-dark-features .feature-card .top-wrap,
.premium-dark-features .feature-card .bottom-text {
  padding: 28px;
}
.premium-dark-features .feature-card .bottom-text {
  margin: 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.premium-dark-features .feature-card .box-icon {
  height: 92px;
  width: 92px;
  line-height: 92px;
  background: rgba(131, 195, 65, 0.1);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.premium-dark-features .feature-card .box-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(70%) sepia(28%) saturate(947%) hue-rotate(45deg) brightness(92%) contrast(92%);
}
.premium-dark-features .feature-card .box-title {
  color: #FFFFFF;
}
.premium-dark-features .feature-card .box-text,
.premium-dark-features .feature-card .bottom-text .checklist.style2 ul li {
  color: #AAB6D1;
}
.premium-dark-features .feature-card .bottom-text .checklist.style2 ul li:before {
  color: #83C341;
}
.premium-dark-features .feature-card .th-btn.th-btn-sm.w-100 {
  background: #83C341;
  border-color: #83C341;
  color: #FFFFFF;
  border-radius: 8px;
}
.premium-dark-features .feature-card .th-btn.th-btn-sm.w-100:before,
.premium-dark-features .feature-card .th-btn.th-btn-sm.w-100:after {
  background: #83C341;
}
.premium-dark-features .feature-card .th-btn.th-btn-sm.w-100:hover {
  background: #70AE34;
  border-color: #70AE34;
}
.premium-dark-features .feature-card .th-btn.th-btn-sm.w-100:hover:before,
.premium-dark-features .feature-card .th-btn.th-btn-sm.w-100:hover:after {
  background: #70AE34;
}
.premium-dark-features .feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
@media (max-width: 991px) {
  .premium-dark-features {
    padding: 80px 0;
  }
}
@media (max-width: 575px) {
  .premium-dark-features {
    padding: 60px 0;
  }
  .premium-dark-features .feature-card .top-wrap,
  .premium-dark-features .feature-card .bottom-text {
    padding: 24px;
  }
}

/* Feature card 2---------------------------------- */
.feature-card.style2 {
  padding: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: transparent;
  border: 2px solid #372121;
}
.feature-card.style2 .box-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 0px;
  /* Medium Large devices */
}
@media (max-width: 1399px) {
  .feature-card.style2 .box-title {
    font-size: 24px;
    margin-bottom: 22px;
  }
}
.feature-card.style2 .box-text {
  color: #6E7070;
}

/*------------------- 4.00. Project -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/* Project Card -------------------------------*/

/* Project 2 -------------------------------*/

/* Project 3 -------------------------------*/

/* Project Details Page -------------------------------*/

/*------------------- 4.00. Category -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/* Category Card -------------------------------------*/

/* Large devices */
/* Category Box -------------------------------------*/

/*------------------- 4.00. CTA -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.cta-wrap1 {
  margin: 0 30px;
  border-radius: 30px;
  padding: 95px 0;
  padding-bottom: 120px;
  overflow: hidden;
}
.cta-wrap1::before {
  background-color: #28211D;
  opacity: 0.4;
}
.cta-wrap1::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #02000F;
  opacity: 0.6;
}
.cta-wrap1 .sub-title {
  border-color: var(--white-color);
}
.cta-wrap1 .sec-title {
  font-weight: 600;
}
.cta-wrap1 .title-text {
  font-size: 18px;
  font-weight: 500;
  text-transform: capitalize;
}
.cta-wrap1 .th-btn {
  background: var(--white-color);
  color: var(--theme-color);
}
.cta-wrap1 .th-btn:hover {
  background: var(--white-color);
  color: var(--theme-color);
}
.cta-wrap1 .th-btn::after, .cta-wrap1 .th-btn::before {
  background: var(--white-color);
}

/* Medium devices */
@media (max-width: 991px) {
  .cta-wrap1 {
    padding: 70px 0;
    padding-bottom: 85px;
  }
}
/* Extra small devices */
@media (max-width: 575px) {
  .cta-wrap1 {
    margin: 0 12px;
  }
}
/* Large devices */
/* Medium devices */
/* Small devices */
/* Extra small devices */

/* Medium devices */
/*------------------- 4.00. Color Scheme -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/*------------------- 4.00. Appointment -------------------*/
/*
Template Name: Babet
Template URL: https://themeholy.com/html/babet/
Description: Pet Care & Shop HTML Template
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. 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.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Pricing
    4.00. Feature
    4.00. Project
    4.00. Category
    4.00. Color Scheme
    4.00. CTA
    4.00. Appointment
    4.00. Video
    4.00. Tab Menu
    4.00. Schedule

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
/* Appointment 1---------------------------------- */

/* Extra large devices */
/* Large devices */
/* Small devices */
/* Extra small devices */
/* Appointment 2---------------------------------- */
.interest2-wrap {
  background: #EFF0F4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 100px;
  padding: 17px 19px;
  gap: 10px 15px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 27px;
}
.interest2-wrap .interest-item {
  margin-bottom: 0;
}
.interest2-wrap .interest-item label {
  margin: 0;
  color: #4E4E4E;
  font-weight: 500;
}
.interest2-wrap .interest-item input[type=checkbox]:checked + label {
  color: var(--theme-color);
}

.appointment-form-2 .form-group.style-border3 select {
  background: var(--white-color);
  border: 2px solid #02000F;
}
.appointment-form-2 .form-group.style-border3 input {
  border: 2px solid #02000F;
}

.appointment-form-2 select,
.appointment-form-2 .form-control,
.appointment-form-2 .form-select,
.appointment-form-2 textarea,
.appointment-form-2 input {
  padding: 0 20px 0 20px;
  border: 2px solid #02000F;
  color: #1C1C25;
}
.appointment-form-2 select:focus,
.appointment-form-2 .form-control:focus,
.appointment-form-2 .form-select:focus,
.appointment-form-2 textarea:focus,
.appointment-form-2 input:focus {
  border-color: var(--theme-color);
}

.appointment-form-2 .form-group.style-border3 input::-webkit-input-placeholder {
  color: #1C1C25;
}

.appointment-form-2 .form-group.style-border3 input::-moz-placeholder {
  color: #1C1C25;
}

.appointment-form-2 .form-group.style-border3 input:-ms-input-placeholder {
  color: #1C1C25;
}

.appointment-form-2 .form-group.style-border3 input::-ms-input-placeholder {
  color: #1C1C25;
}

.appointment-form-2 .form-group.style-border3 input::placeholder {
  color: #1C1C25;
}

.appointment-form-2 .form-group.style-border3 input:focus {
  border-color: var(--theme-color);
}

.appointment-form-2 .form-group.style-border3 select:focus {
  border-color: var(--theme-color);
}

/* Brand palette override: appointment section (color only) */
#contact {
  background-color: #0E1B2C;
}
#contact .sub-title.style2 {
  color: #83C341;
  border-color: #83C341;
  background: transparent;
}
#contact .sec-title {
  color: #FFFFFF;
}
#contact .appointment-form-2 .interest2-wrap {
  background: #303D58;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
#contact .appointment-form-2 .interest2-wrap .interest-item label {
  color: #AAB6D1;
}
#contact .appointment-form-2 .interest2-wrap .interest-item input[type=checkbox] {
  accent-color: #83C341;
}
#contact .appointment-form-2 .interest2-wrap .interest-item input[type=checkbox] + label:before {
  background-color: rgba(131, 195, 65, 0.15);
  border-color: #83C341;
}
#contact .appointment-form-2 .interest2-wrap .interest-item input[type=checkbox]:checked + label:before {
  color: #FFFFFF;
  background-color: #83C341;
  border-color: #83C341;
}
#contact .appointment-form-2 .interest2-wrap .interest-item input[type=checkbox]:checked + label {
  color: #83C341;
}
#contact .appointment-form-2 select,
#contact .appointment-form-2 .form-control,
#contact .appointment-form-2 .form-select,
#contact .appointment-form-2 textarea,
#contact .appointment-form-2 input {
  background: #303D58;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
#contact .appointment-form-2 select:focus,
#contact .appointment-form-2 .form-control:focus,
#contact .appointment-form-2 .form-select:focus,
#contact .appointment-form-2 textarea:focus,
#contact .appointment-form-2 input:focus {
  border-color: #83C341;
  outline: none;
  box-shadow: none;
}
#contact .appointment-form-2 input::-webkit-input-placeholder,
#contact .appointment-form-2 textarea::-webkit-input-placeholder {
  color: #AAB6D1;
}
#contact .appointment-form-2 input::-moz-placeholder,
#contact .appointment-form-2 textarea::-moz-placeholder {
  color: #AAB6D1;
}
#contact .appointment-form-2 input:-ms-input-placeholder,
#contact .appointment-form-2 textarea:-ms-input-placeholder {
  color: #AAB6D1;
}
#contact .appointment-form-2 input::-ms-input-placeholder,
#contact .appointment-form-2 textarea::-ms-input-placeholder {
  color: #AAB6D1;
}
#contact .appointment-form-2 input::placeholder,
#contact .appointment-form-2 textarea::placeholder {
  color: #AAB6D1;
}
#contact .appointment-form-2 .form-select {
  color: #FFFFFF;
}
#contact .appointment-form-2 .form-btn .th-btn {
  background-color: #83C341;
  color: #FFFFFF;
  border-color: #83C341;
}
#contact .appointment-form-2 .form-btn .th-btn:before,
#contact .appointment-form-2 .form-btn .th-btn:after {
  background-color: #83C341;
}
#contact .appointment-form-2 .form-btn .th-btn:hover {
  background-color: #70AE34;
}
#contact .appointment-form-2 .form-btn .th-btn:hover:before,
#contact .appointment-form-2 .form-btn .th-btn:hover:after {
  background-color: #70AE34;
}
#contact .appointment-pet-image {
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 1;
  overflow: hidden;
}
#contact .appointment-pet-image img {
  width: 545px;
  height: auto;
  transform: translate(20%, 20%);
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.3));
}
#contact .appointment-form-2 {
  position: relative;
  z-index: 2;
}
@media (max-width: 1599px) {
  #contact .appointment-pet-image img {
    width: 650px;
  }
}

/* Extra small devices */
@media (max-width: 575px) {
  .interest2-wrap {
    padding: 17px 30px;
  }
}
/*------------------- 4.00. Video -------------------*/

@-webkit-keyframes heightanim {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 100%;
    opacity: 1;
  }
}

@keyframes heightanim {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 100%;
    opacity: 1;
  }
}

@-webkit-keyframes widthanim {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 100%;
    opacity: 1;
    left: 0;
  }
}

@keyframes widthanim {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 100%;
    opacity: 1;
    left: 0;
  }
}

/*-- margin Top --*/

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

/*-- margin Bottom --*/

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

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

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

/*-- margin Left --*/

/*-- margin Right --*/

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

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

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
.space,
.space-top {
  padding-top: var(--section-space);
}

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

/* Home-2 process spacing fix */
.process-gap-fix {
  margin-top: 80px;
  margin-bottom: 80px;
}

/* Medium devices */
@media (max-width: 991px) {
  .space,
  .space-top {
    padding-top: var(--section-space-mobile);
  }
  .space {
    padding-bottom: var(--section-space-mobile);
  }
  .process-gap-fix {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}
/* Mobile devices */
@media (max-width: 575px) {
  .process-gap-fix {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
/* Blog 4 ---------------------------------- */

/* Extra small devices */
@media (max-width: 575px) {
  .th-newsletter-widget.footer-widget .newsletter-form .th-btn {
    position: inherit;
    margin-left: 13px;
  }
  .th-newsletter-widget.footer-widget .newsletter-form .th-btn {
    position: inherit;
  }
}
/* Footer 4 ---------------------------------- */

.footer-wrapper.footer-layout1 .widget-area {
  padding-top: 130px;
}

/* Medium Large devices */
@media (max-width: 1299px) {
  .footer-wrapper.footer-layout1 .widget-area {
    padding-top: 90px;
  }
}
/* Medium devices */
@media (max-width: 991px) {
  .footer-wrapper.footer-layout1 .widget-area {
    padding-top: 70px;
  }
}
/* Small devices */

/* Home-2 precise spacing and work-label refinement */
/* Pulling features up with negative margin caused overlap / hero CTAs hidden under features */
.th-hero-wrapper.hero-2 {
  margin-bottom: 0 !important;
  overflow: visible;
  z-index: 3;
}
.feature-area-1.premium-dark-features {
  margin-top: 0 !important;
  position: relative;
  z-index: 2;
  padding-top: 80px !important;
}
.feature-area-1.premium-dark-features .container.th-container2 {
  margin-top: 40px;
}
.process-area-2 .sub-title.style2 {
  background: transparent;
  color: #83C341;
  border: 1px solid #83C341;
  border-radius: 30px;
  padding: 6px 16px;
  display: inline-block;
}
.process-area-2 .sub-title.style2:before,
.process-area-2 .sub-title.style2:after {
  display: none;
}

/* Work Process — right-corner pet artwork: shift up (shapeMockup inline top); overflow must not clip */
section.process-area-2.process-gap-fix {
  overflow: visible !important;
}

.process-area-2 > .service-bg-shape1-1.shape-mockup {
  -webkit-transform: translateY(-108px);
          transform: translateY(-108px);
}

/* One-page nav: hover + active = brand green (header sticky + desktop menu) */
.th-header.header-layout1 .main-menu > ul > li > a:hover,
.th-header.header-layout1 .main-menu > ul > li > a.active {
  color: #83C341 !important;
}
.header-layout1 .sticky-wrapper.sticky.scrolled .main-menu > ul > li > a:hover,
.header-layout1.scrolled .sticky-wrapper.sticky .main-menu > ul > li > a:hover,
.header-layout1 .sticky-wrapper.sticky.scrolled .main-menu > ul > li > a.active,
.header-layout1.scrolled .sticky-wrapper.sticky .main-menu > ul > li > a.active {
  color: #83C341 !important;
}

.th-menu-area .th-mobile-menu a:hover,
.th-menu-area .th-mobile-menu a.active {
  color: #83C341 !important;
}

/* Mobile menu theme alignment (KineticPetz dark + green) */
.th-menu-wrapper .th-menu-area {
  background-color: #0E1B2C;
  border-right: 2px solid #83C341;
}
.th-menu-wrapper .mobile-logo {
  background-color: rgba(255, 255, 255, 0.04);
}
.th-mobile-menu ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.th-mobile-menu ul li a {
  color: #FFFFFF;
}
.th-mobile-menu ul li a:before {
  color: #83C341;
}
.th-menu-wrapper .th-menu-toggle,
.header-layout1 .th-menu-toggle {
  background-color: #83C341;
  color: #FFFFFF;
}
.th-menu-wrapper .th-menu-toggle:hover,
.header-layout1 .th-menu-toggle:hover {
  background-color: #70AE34;
  color: #FFFFFF;
}

.footer-wrapper.footer-layout1 .footer-links--main a.active {
  color: #83C341 !important;
}

/* Home-2 footer — KineticPetz SaaS (layout1) */
.footer-wrapper.footer-layout1 {
  background: #0E1B2C;
}

/* Footer logo — larger than header default; keep aspect ratio */
.footer-wrapper.footer-layout1 .th-widget-about .about-logo img {
  width: 290px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 575px) {
  .footer-wrapper.footer-layout1 .th-widget-about .about-logo img {
    width: 250px;
  }
}

.footer-wrapper.footer-layout1 .footer-copyright-plain {
  color: #FFFFFF !important;
}

/* Footer primary nav mirrors header: white links, brand green hover */
.footer-wrapper.footer-layout1 .footer-links--main ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  .footer-wrapper.footer-layout1 .footer-links--main ul {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.footer-wrapper.footer-layout1 .footer-links--main li {
  margin: 0 15px;
}

.footer-wrapper.footer-layout1 .footer-links--main li:last-child {
  margin-right: 0;
}

.footer-wrapper.footer-layout1 .footer-links--main a {
  display: inline-block;
  color: #FFFFFF !important;
  font-weight: 500;
  font-size: 16px;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.footer-wrapper.footer-layout1 .footer-links--main a:hover {
  color: #83C341 !important;
}

.footer-wrapper.footer-layout1 .th-newsletter-widget .newsletter-form .th-btn {
  background: #83C341;
  color: #FFFFFF;
  border-color: #83C341;
  transition: all 0.3s ease;
}
.footer-wrapper.footer-layout1 .th-newsletter-widget .newsletter-form .th-btn:before,
.footer-wrapper.footer-layout1 .th-newsletter-widget .newsletter-form .th-btn:after {
  background: #83C341;
}
.footer-wrapper.footer-layout1 .th-newsletter-widget .newsletter-form .th-btn:hover {
  background: #70AE34;
  border-color: #70AE34;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(131, 195, 65, 0.3);
}
.footer-wrapper.footer-layout1 .th-newsletter-widget .newsletter-form .th-btn:hover:before,
.footer-wrapper.footer-layout1 .th-newsletter-widget .newsletter-form .th-btn:hover:after {
  background: #70AE34;
}
.footer-wrapper.footer-layout1 a {
  color: #AAB6D1;
  transition: color 0.3s ease;
}
.footer-wrapper.footer-layout1 a:hover {
  color: #83C341;
}
.footer-wrapper.footer-layout1 p,
.footer-wrapper.footer-layout1 .copyright-wrap,
.footer-wrapper.footer-layout1 .copyright-text,
.footer-wrapper.footer-layout1 .info-box_title {
  color: #AAB6D1;
}
.footer-wrapper.footer-layout1 .box-title,
.footer-wrapper.footer-layout1 .info-box_text,
.footer-wrapper.footer-layout1 .info-box_text .info-box_link {
  color: #FFFFFF;
}
.footer-wrapper.footer-layout1 .widget-contact-wrap .info-box .info-box_icon {
  color: #83C341;
}
.footer-wrapper.footer-layout1 input,
.footer-wrapper.footer-layout1 .newsletter-form .form-control {
  background: #303D58;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-wrapper.footer-layout1 input::-webkit-input-placeholder,
.footer-wrapper.footer-layout1 .newsletter-form .form-control::-webkit-input-placeholder {
  color: #AAB6D1;
}
.footer-wrapper.footer-layout1 input::-moz-placeholder,
.footer-wrapper.footer-layout1 .newsletter-form .form-control::-moz-placeholder {
  color: #AAB6D1;
}
.footer-wrapper.footer-layout1 input:-ms-input-placeholder,
.footer-wrapper.footer-layout1 .newsletter-form .form-control:-ms-input-placeholder {
  color: #AAB6D1;
}
.footer-wrapper.footer-layout1 input::-ms-input-placeholder,
.footer-wrapper.footer-layout1 .newsletter-form .form-control::-ms-input-placeholder {
  color: #AAB6D1;
}
.footer-wrapper.footer-layout1 input::placeholder,
.footer-wrapper.footer-layout1 .newsletter-form .form-control::placeholder {
  color: #AAB6D1;
}

/* CTA section spacing and button color refinement */
.cta-area-1 {
  margin-top: 120px !important;
}
.cta-wrap1 .th-btn,
.cta-wrap1 .th-btn.style-border2 {
  background: #83C341;
  color: #FFFFFF;
  border-color: #83C341;
}
.cta-wrap1 .th-btn::after,
.cta-wrap1 .th-btn::before,
.cta-wrap1 .th-btn.style-border2::after,
.cta-wrap1 .th-btn.style-border2::before {
  background: #83C341;
}
.cta-wrap1 .th-btn:hover,
.cta-wrap1 .th-btn.style-border2:hover {
  background: #70AE34;
  color: #FFFFFF;
  border-color: #70AE34;
}
.cta-wrap1 .th-btn:hover::after,
.cta-wrap1 .th-btn:hover::before,
.cta-wrap1 .th-btn.style-border2:hover::after,
.cta-wrap1 .th-btn.style-border2:hover::before {
  background: #70AE34;
}

/* Custom Solutions — real pet imagery (Unsplash) + dark SaaS overlay */
.cta-wrap1.custom-solutions-section {
  position: relative;
  isolation: isolate;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(14, 27, 44, 0.85)), to(rgba(14, 27, 44, 0.9))),
    url("https://images.unsplash.com/photo-1548199973-03cce0bbc87b?auto=format&fit=crop&w=1920&q=80");
  background-image: linear-gradient(rgba(14, 27, 44, 0.85), rgba(14, 27, 44, 0.9)),
    url("https://images.unsplash.com/photo-1548199973-03cce0bbc87b?auto=format&fit=crop&w=1920&q=80");
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 110%;
  -webkit-transition: background-size 6s ease;
  transition: background-size 6s ease;
}

.cta-wrap1.custom-solutions-section:hover {
  background-size: 100% 100%, 115%;
}

.cta-wrap1.custom-solutions-section::before,
.cta-wrap1.custom-solutions-section::after {
  display: none;
}

.cta-wrap1.custom-solutions-section .container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cta-wrap1.custom-solutions-section {
    -webkit-transition: none;
    transition: none;
  }

  .cta-wrap1.custom-solutions-section:hover {
    background-size: 100% 100%, 110%;
  }
}

/*------------------- RTL -------------------*/

/*=================================
  Lead popup: responsive unlock
==================================*/
.kp-lead-popup-root {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.kp-lead-popup-root.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.kp-lead-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 27, 44, 0.9);
}
.kp-lead-popup {
  position: relative;
  width: 700px;
  max-width: calc(100% - 40px);
  background: linear-gradient(135deg, rgba(11, 31, 53, 0.92), rgba(14, 42, 71, 0.92));
  color: #FFFFFF;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(10px) scale(0.95);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.kp-lead-popup-root.is-visible .kp-lead-popup {
  transform: translateY(0) scale(1);
  opacity: 1;
  animation: kpLeadPopupIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes kpLeadPopupIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.kp-lead-popup-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  font-size: 22px;
  line-height: 36px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.kp-lead-popup-close:hover {
  background: #7ED957;
  color: #000;
  transform: scale(1.05);
}
.kp-lead-popup-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
.kp-lead-popup-left {
  flex: 1 1 58%;
  padding-right: 0;
}
.kp-lead-popup-title {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  margin: 0 0 12px;
  font-weight: 800;
  color: #7ED957;
}
.kp-lead-popup-desc {
  margin: 0 0 22px;
  color: #b0c4d4;
  font-size: 15px;
  line-height: 1.6;
}
.kp-lead-form {
  display: block;
}
.kp-lead-form-field {
  margin-bottom: 14px;
}
.kp-lead-input {
  width: 100%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #ffffff;
  font-size: 15px;
  outline: none;
  transition: all 0.3s ease;
}
.kp-lead-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.kp-lead-input:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
.kp-lead-input:focus {
  border-color: #7ED957;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(126, 217, 87, 0.25);
}

.kp-lead-input:-webkit-autofill,
.kp-lead-input:-webkit-autofill:hover,
.kp-lead-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset !important;
  -webkit-text-fill-color: #ffffff !important;
}
.kp-lead-input:focus-visible {
  outline: none;
}
.kp-lead-error {
  margin: 10px 0 16px;
  color: #ff6b7a;
  font-size: 14px;
}
.kp-lead-watch-btn,
.demo-btn {
  width: auto;
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #7ED957, #5ccf3a);
  color: #0E1B2C;
  font-weight: 600;
  padding: 16px 18px;
  cursor: pointer;
  transition: 0.3s ease;
}
.kp-lead-watch-btn:hover,
.demo-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(126, 217, 87, 0.4);
}
.kp-lead-trust {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.kp-lead-popup-right {
  flex: 1 1 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(126, 217, 87, 0.12), rgba(14, 27, 44, 0) 70%);
  position: relative;
  overflow: hidden;
  min-height: 320px;
  padding: 18px;
}
.kp-lead-popup-right::before {
  content: '';
  position: absolute;
  inset: -60px;
  background: radial-gradient(circle at 35% 30%, rgba(126, 217, 87, 0.25), transparent 60%);
  filter: blur(28px);
  opacity: 0.9;
  z-index: 0;
}
.kp-lead-popup-right img {
  position: relative;
  z-index: 1;
  width: 120%;
  max-width: none;
  transform: translateX(-10%);
  animation: kpLeadFloat 7.5s ease-in-out infinite;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.35));
}

/* Locked blurred preview: replace static image */
.kp-lead-popup-right::before,
.kp-lead-popup-right::after {
  display: none;
}
.kp-lead-popup-right img {
  display: none;
}

.popup-video-wrapper {
  position: relative;
  width: 100%;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
}

.popup-video-wrapper iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* BLUR EFFECT */
  filter: blur(12px) brightness(0.7);
  transform: scale(1.2);
  transform-origin: center center;
}

.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.lock-box {
  text-align: center;
  color: #7ED957;
  font-size: 22px;
  font-weight: 600;
  padding: 0 10px;
  animation: kpLeadPulse 2s infinite;
}

.lock-box p {
  margin-top: 10px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
}

@keyframes kpLeadPulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

.kp-lead-unlock-note {
  margin-top: 10px;
  font-size: 13px;
  color: #7ED957;
  font-weight: 500;
  text-shadow: 0 0 14px rgba(126, 217, 87, 0.25);
}

.error-text {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 6px;
  display: block;
}

/* Popup demo toast (loading/success/error feedback) */
#toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999999;
}

.toast-msg {
  padding: 14px 20px;
  margin-top: 10px;
  border-radius: 10px;
  color: white;
  font-weight: 500;
  animation: fadeInOut 3s ease forwards;
}

.toast-success {
  background: #4caf50;
}

.toast-error {
  background: #e74c3c;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes kpLeadFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.kp-unlock-video-section {
  padding: 70px 0;
}
.kp-unlock-video-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
}
.kp-unlock-video {
  width: 100%;
  border-radius: 16px;
  background: #000;
}

@media (max-width: 767px) {
  .kp-lead-popup {
    width: 90%;
    padding: 20px;
    border-radius: 16px;
  }
  .kp-lead-popup-inner {
    flex-direction: column;
    gap: 12px;
  }
  .kp-lead-popup-title {
    font-size: 24px;
  }
  .kp-lead-popup-left {
    padding-right: 0;
  }
  .kp-lead-popup-right {
    width: 100%;
    min-height: 240px;
    padding: 0;
  }
  .kp-lead-popup-right img {
    width: 100%;
    transform: none;
    animation: none;
  }
  .kp-lead-watch-btn,
  .demo-btn {
    width: 100%;
    min-width: 0;
  }
  .kp-lead-form-field {
    margin-bottom: 12px;
  }
  .kp-lead-input {
    padding: 14px 14px;
  }
}

@media (max-width: 768px) {
  .popup-video-wrapper {
    height: 250px;
  }
}

/* Video container inside popup */
.kp-lead-popup .video-container iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 12px;
}

/*=================================
  Demo video modal (premium)
==================================*/
.kp-demo-modal-root {
  position: fixed;
  inset: 0;
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.kp-demo-modal-root.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.kp-demo-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 27, 44, 0.9);
}
.kp-demo-modal {
  position: relative;
  width: 85vw;
  height: 85vh;
  max-width: 1100px;
  max-height: 820px;
  background: rgba(14, 27, 44, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.25s ease;
}
.kp-demo-modal-root.is-visible .kp-demo-modal {
  transform: translateY(0) scale(1);
}
.kp-demo-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(126, 217, 87, 0.92);
  color: #000;
  font-size: 24px;
  line-height: 38px;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.3s ease, background 0.3s ease;
}
.kp-demo-modal-close:hover {
  transform: scale(1.06);
  background: rgba(126, 217, 87, 1);
}
.kp-demo-modal-iframe-wrap {
  width: 100%;
  height: 100%;
}
.kp-demo-modal-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

@media (max-width: 768px) {
  .kp-demo-modal {
    width: 94vw;
    height: 70vh;
    max-width: none;
    max-height: none;
    border-radius: 16px;
  }
}

/*=================================
  Video popup (2-step flow)
==================================*/
.video-popup {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.9);
  z-index: 999999 !important;
}
.video-popup.active {
  display: flex !important;
}

body {
  position: relative;
}

/* Aspect-ratio based container (no fixed height) */
.video-container,
.video-popup-content.video-container {
  position: relative;
  width: 90%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  margin: auto;
  border-radius: 16px;
  overflow: hidden;
  background: black;
  transform: scale(0.9);
  transition: 0.3s ease;
}

.video-popup.active .video-container,
.video-popup.active .video-popup-content.video-container {
  transform: scale(1);
}

.video-container iframe,
.video-popup iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.video-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .video-container,
  .video-popup-content.video-container {
    width: 95%;
    aspect-ratio: 16 / 9;
  }
}