@charset "UTF-8";
/*
Template Name: Mediax
Template URL: https://themeholy.com/html/mediax/
Description: Health & Medical 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. Extend
    1.7. 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. Feature
    4.00. Gallery
    4.00. Category
    4.00. CTA
    4.00. Price

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
@use "sass:math";

/*------------------- 1.2. Function -------------------*/
/*------------------- 1.3. Variable-------------------*/
:root {
  --theme-color: #04ce78;
  --theme-color2: #1f5fff;
  --title-color: #000d44;
  --body-color: #788094;
  --smoke-color: #f5f7fa;
  --smoke-color2: #f5f8fd;
  --black-color: #000000;
  --gray-color: #bdbdbd;
  --white-color: #ffffff;
  --light-color: #bdbdbd;
  --yellow-color: #ffb539;
  --success-color: #28a745;
  --error-color: #dc3545;
  --th-border-color: #d8dde1;
  --title-font: "Outfit", sans-serif;
  --body-font: "DM Sans", sans-serif;
  --icon-font: "Font Awesome 6 Pro";
  --main-container: 1224px;
  --container-gutters: 24px;
  --section-space: 120px;
  --section-space-mobile: 80px;
  --section-title-space: 60px;
  --ripple-ani-duration: 5s;
}

/*------------------- 1.5. Typography -------------------*/
html,
body {
  scroll-behavior: auto !important;
}

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


button:focus,
a:focus,
a:active,
input,
input:hover,
input:focus,
input:active,
textarea,
textarea:hover,
textarea:focus,
textarea:active {
  outline: none;
}

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

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

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

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

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,
h6 a,
p a,
span a {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

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

.h1,
h1 {
  font-size: 64px;
  line-height: 1.156;
}

.h2,
h2 {
  font-size: 48px;
  line-height: 1.125;
}

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

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

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

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

/* Large devices */
@media (max-width: 1199px) {
  .h1,
  h1 {
    font-size: 48px;
    line-height: 1.3;
  }
  .h2,
  h2 {
    font-size: 36px;
    line-height: 1.3;
  }
  .h3,
  h3 {
    font-size: 30px;
  }
  .h4,
  h4 {
    font-size: 24px;
  }
  .h5,
  h5 {
    font-size: 20px;
  }
  .h6,
  h6 {
    font-size: 16px;
  }
}

/* Small devices */
@media (max-width: 767px) {
  .h1,
  h1 {
    font-size: 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;
  }
  .h6,
  h6 {
    font-size: 16px;
  }
}

/* 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.6. Extend -------------------*/
/*------------------- 1.7. Wordpress Default -------------------*/
/*=================================
    02. Reset
==================================*/
/*------------------- 2.1. Container -------------------*/
/* Medium Large devices */
@media (max-width: 1399px) {
  :root {
    --main-container: 1250px;
  }
}

/* Hight Resoulation devices */

@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);
  }
  
  .container.px-0 {
    max-width: var(--main-container);
  }
}

/*------------------- 2.2. Grid -------------------*/

@media (min-width: 1300px) {
  .row {
    --bs-gutter-x: 24px;
  }
}

/* Medium devices */

/*------------------- 2.3. Input -------------------*/
select,
textarea,
input {
  height: 56px;
  padding: 0 25px 0 25px;
  padding-right: 45px;
  border: 1px solid transparent;
  color: var(--body-color);
  background-color: var(--smoke-color);
  border-radius: 27px;
  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,
textarea:focus,
input:focus {
  outline: 0;
  box-shadow: none;
  border-color: var(--th-border-color);
  background-color: var(--smoke-color2);
}

select::-moz-placeholder,
textarea::-moz-placeholder,
input::-moz-placeholder {
  color: var(--body-color);
}

select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
  color: var(--body-color);
}

select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
  color: var(--body-color);
}

select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
  color: var(--body-color);
}

select::-moz-placeholder,
textarea::-moz-placeholder,
input::-moz-placeholder {
  color: var(--body-color);
}

select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
  color: var(--body-color);
}

select::-ms-input-placeholder,
textarea::-ms-input-placeholder,
input::-ms-input-placeholder {
  color: var(--body-color);
}

select::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--body-color);
}


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


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 {
  min-height: 154px;
  padding-top: 16px;
  padding-bottom: 17px;
}


textarea.style2 {
  min-height: 100px;
}

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

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

/*------------------- 2.4. Slick Slider -------------------*/

/* Extra large devices */

/* Medium Large devices */

/* Medium devices */

/*------------------- 2.5. Mobile Menu -------------------*/

@media (min-width: 600px) {
  .th-menu-toggle {
    display: 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;
}

.th-menu-toggle:hover {
  /* background-color: var(--title-color); */
}

/*=================================
    03. Utilities
==================================*/
/*------------------- 3.1. Preloader -------------------*/

.loader {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
}

.loader::after,
.loader::before {
  content: "";
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--title-color);
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: animloader 2s linear infinite;
  animation: animloader 2s linear infinite;
}

.loader::after {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@-webkit-keyframes animloader {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes animloader {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

/*------------------- 3.2. Buttons -------------------*/
.th-btn {
  position: relative;
  z-index: 2;
  overflow: hidden;
  vertical-align: middle;
  display: inline-block;
  border: none;
  text-transform: uppercase;
  text-align: center;
  color: var(--title-color);
  background: -webkit-linear-gradient(
    top,
    var(--theme-color) 37.5%,
    #ddfff1 100%
  );
  background: linear-gradient(180deg, var(--theme-color) 37.5%, #ddfff1 100%);
  box-shadow: 0px 3px 15px rgba(174, 211, 195, 0.7);
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 21px 30px;
  min-width: 170px;
  border-radius: 30px;
}

.th-btn:before {
  content: "";
  position: absolute;
  height: 56%;
  top: 1px;
  left: 10px;
  width: calc(100% - 20px);
  background: -webkit-linear-gradient(
    top,
    #a9ffda 0%,
    rgba(169, 255, 218, 0) 78.65%
  );
  background: linear-gradient(
    180deg,
    #a9ffda 0%,
    rgba(169, 255, 218, 0) 78.65%
  );
  -webkit-filter: blur(2px);
  filter: blur(2px);
  z-index: -1;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  border-radius: inherit;
}

.th-btn i {
  font-size: 0.95em;
}

.th-btn:hover {
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
}

.th-btn.style2 {
  background: -webkit-linear-gradient(top, #c2d4ff 37.5%, #f0f4ff 100%);
  background: linear-gradient(180deg, #c2d4ff 37.5%, #f0f4ff 100%);
  box-shadow: 0px 2px 10px rgba(184, 191, 208, 0.5);
}

.th-btn.style2:before {
  background: -webkit-linear-gradient(
    top,
    #f9fafd 0%,
    rgba(249, 250, 253, 0) 78.65%
  );
  background: linear-gradient(
    180deg,
    #f9fafd 0%,
    rgba(249, 250, 253, 0) 78.65%
  );
}

.th-btn.shadow-1 {
  box-shadow: 0px 3px 12px rgba(33, 50, 93, 0.5);
}

/*------------------- 3.3. Titles -------------------*/

.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) - 11px);
  position: relative;
  z-index: 2;
}

.title-area .th-btn {
  margin-top: 20px;
  margin-bottom: 10px;
}

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

/* Large devices */
@media (max-width: 1199px) {
  .title-area {
    --section-title-space: 60px;
  }
}

/* Medium devices */
@media (max-width: 991px) {
  .title-area {
    --section-title-space: 50px;
  }
}

/* Small devices */

/* Extra small devices */

/* Extra small devices */

/*------------------- 3.4. Common -------------------*/

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

.media-body {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

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

.box-text {
  margin-bottom: -0.5em;
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .box-text {
    font-size: 12px;
  }
}

.btn-group {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
  /* Small devices */
}

.btn-group.style2 {
  gap: 20px 70px;
  /* Small devices */
}

@media (max-width: 767px) {
  .btn-group.style2 {
    gap: 20px 30px;
  }
}

@media (max-width: 767px) {
  .btn-group {
    gap: 20px;
  }
}

/*------------------- 3.6. Font -------------------*/

/*------------------- 3.7. Background -------------------*/

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

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

.background-image,
[data-bg-src] {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/*------------------- 3.8. Text Color -------------------*/

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

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

/*------------------- 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 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);
  }
}

@-webkit-keyframes movingCar {
  0% {
    -webkit-transform: translateX(0) rotateY(0deg);
    transform: translateX(0) rotateY(0deg);
  }
  50% {
    -webkit-transform: translateX(calc(100vw * -1 + 108%));
    transform: translateX(calc(100vw * -1 + 108%));
  }
  51% {
    -webkit-transform: translateX(calc(100vw * -1 + 108%)) rotateY(180deg);
    transform: translateX(calc(100vw * -1 + 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 * -1 + 108%));
    transform: translateX(calc(100vw * -1 + 108%));
  }
  51% {
    -webkit-transform: translateX(calc(100vw * -1 + 108%)) rotateY(180deg);
    transform: translateX(calc(100vw * -1 + 108%)) rotateY(180deg);
  }
  100% {
    -webkit-transform: translateX(0) rotateY(180deg);
    transform: translateX(0) rotateY(180deg);
  }
}

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

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

/*=================================
    04. Template Style
==================================*/
/*------------------- 4.1. Widget  -------------------*/
.widget_nav_menu ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0 0;
}

.widget_nav_menu a {
  font-size: 18px;
  font-weight: 500;
  font-family: var(--title-font);
  display: block;
  background-color: var(--white-color);
  box-shadow: 0px 2px 4px rgba(2, 29, 53, 0.1);
  margin-bottom: 14px;
  padding: 17px 45px 17px 30px;
  font-size: 16px;
  line-height: 1.313;
  color: var(--title-color);
  border-radius: 30px;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

/* .widget_nav_menu a::before,
.widget_meta a::before,
.widget_pages a::before,
.widget_archive a::before,
.widget_categories a::before,
.wp-block-categories a::before {
  content: "\f061";
  position: absolute;
  right: 30px;
  top: 17px;
  font-family: var(--icon-font);
  font-weight: 600;
  color: inherit;
} */

.widget_nav_menu li {
  display: block;
  position: relative;
}

.widget_nav_menu li > span {
  color: var(--body-color);
  text-align: center;
  position: absolute;
  right: 0;
  top: 14px;
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
  pointer-events: none;
  min-width: 20px;
  text-align: right;
}

.widget_nav_menu .menu > li:last-child > a,
.widget_nav_menu > ul > li:last-child > a {
  border-bottom: none;
}

.widget_nav_menu a:hover {
  background-color: #eaeefa;
  color: var(--theme-color2);
  box-shadow: none;
  border-left: 5px solid var(--theme-color2);
}

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

.widget_nav_menu a {
  padding-right: 20px;
}

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

.widget {
  padding: var(--widget-padding-y, 40px) var(--widget-padding-x, 40px);
  background-color: var(--smoke-color);
  margin-bottom: 40px;
  position: relative;
  border-radius: 20px;
}

.widget select,
.widget input,
.widget textarea {
  background-color: var(--white-color);
  border-radius: 20px;
}

.widget textarea {
  min-height: 120px;
}

.widget_title {
  position: relative;
  font-size: 24px;
  font-weight: 600;
  font-family: var(--title-font);
  line-height: 1em;
  padding-bottom: 10px;
  /* margin: -0.12em 0 38px 0; */
}

/* .widget_title:after,
.widget_title:before {
  content: "";
  height: 3px;
  width: 100%;
  background-color: var(--th-border-color);
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 99px;
} */

/* .widget_title:after {
  background-color: var(--theme-color);
  width: 30px;
} */

/* Medium Large devices */

/* Large devices */
@media (max-width: 1199px) {
  .widget {
    --widget-padding-y: 30px;
    --widget-padding-x: 30px;
  }
  .widget_title {
    font-size: 22px;
    margin: -0.12em 0 28px 0;
  }
}

/* Medium devices */
@media (max-width: 991px) {
  .widget {
    --widget-padding-y: 40px;
    --widget-padding-x: 40px;
  }
}

/* Small devices */
@media (max-width: 767px) {
  .widget {
    padding: 20px;
    border-radius: 10px;
  }
}

.footer-widget {
  margin-bottom: 20px;
}

.footer-widget,
.footer-widget .widget {
  padding: 0;
  border: none;
  padding-bottom: 0;
  background-color: transparent;
  box-shadow: none;
}

.footer-widget .widget_title {
  max-width: 270px;
  color: var(--white-color);
  font-weight: 500;
  text-transform: capitalize;
  /* margin: -0.12em 0 38px 0;
  padding: 0 0 20px 0; */
}

.footer-widget .widget_title:before {
  display: none;
}

/* .footer-widget .widget_title:after {
  border-radius: 10px;
  height: 2px;
  width: 92px;
  background-color: transparent;
  background-image: -webkit-linear-gradient(
    left,
    var(--theme-color),
    transparent
  );
  background-image: linear-gradient(to right, var(--theme-color), transparent);
} */

.footer-widget .widget_title img {
  margin: -7px 10px 0 0;
}


.footer-widget.widget_nav_menu ul {
  margin-top: -5px;
}


.footer-widget.widget_nav_menu .menu,
.footer-widget.widget_nav_menu > ul {
  margin-bottom: -5px;
}


.footer-widget.widget_nav_menu a {
  font-size: 16px;
  font-weight: 400;
  padding: 0 0 10px 0px;
  margin-bottom: 11px;
  font-family: var(--body-font);
  color: white;
  display: block;
  max-width: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding-right: 0;
  background-color: transparent;
  border: none !important;
  box-shadow: none;
  position: relative;
}

/* .footer-widget.widget_meta a:before,
.footer-widget.widget_pages a:before,
.footer-widget.widget_archive a:before,
.footer-widget.widget_categories a:before,
.footer-widget.widget_nav_menu a:before {
  content: "\f054";
  font-weight: 600;
  left: 0;
  top: 2px;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  font-size: 0.9em;
  background-color: transparent;
  border: none;
  color: inherit;
} */


.footer-widget.widget_nav_menu a:hover {
  background-color: transparent;
  color: var(--theme-color);
}


.footer-widget.widget_nav_menu a:hover:before {
  color: var(--theme-color);
}


.footer-widget.widget_nav_menu li > span {
  width: auto;
  height: auto;
  position: relative;
  background-color: transparent;
  color: var(--body-color);
  line-height: 1;
}


.footer-widget.widget_nav_menu li:last-child a {
  margin-bottom: 0;
}

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

.th-widget-about {
  max-width: 350px;
}

.th-widget-about .about-logo {
  margin-bottom: 25px;
}

.th-widget-about .about-text {
  margin-bottom: 20px;
  margin-top: -0.5em;
}

/* Small devices */
@media (max-width: 767px) {
  .footer-widget .widget_title {
    margin-bottom: 35px;
  }
  .th-widget-about .about-text {
    margin-bottom: 15px;
  }
}

/*------------------- 4.2. Header  -------------------*/
.th-header {
  position: relative;
  z-index: 41;
}

.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: 600;
  font-size: 13.5px;
  font-family: var(--body-font);
  color: #012f6b;
  /* color: var(--title-color); */
  text-transform: uppercase;
}

.main-menu a:hover {
  color: var(--theme-color);
}

.main-menu a:hover + div svg,
.main-menu a:hover ~ div svg {
  color: var(--theme-color);
}

.main-menu > ul > li {
  margin: 0 13px;
}

.main-menu > ul > li > a {
  padding: 20px 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.menu-item-has-children > a:after {
  /* content: "\2b"; */
  display: inline-block;
  position: relative;
  font-family: var(--icon-font);
  margin-left: 4px;
  font-weight: 600;
  top: 0;
  font-size: 0.9em;
  color: inherit;
  -webkit-transition: 0.3s -webkit-transform;
  transition: 0.3s -webkit-transform;
  transition: 0.3s transform;
  transition:
    0.3s transform,
    0.3s -webkit-transform;
}

.main-menu ul li.menu-item-has-children > a:hover:after {
  content: "\f068";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.main-menu ul li:last-child {
  margin-right: 0 !important;
}

.main-menu ul li:first-child {
  margin-left: 0 !important;
}

.main-menu ul li:hover > ul.sub-menu {
  max-width: 240px;
  visibility: visible;
  opacity: 1;
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  z-index: 9;
  border-radius: 20px;
  margin-top: 15px;
  box-shadow: 0px 0px 0.3rem #c0c0c0;
  position: absolute;
}

.main-menu ul li:hover > ul.sub-menu::before {
  content: "";
  position: absolute;
  top: -20px; /* position above the menu box */
  left: 20%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent white transparent;
  /* White = background color of dropdown, adjust as needed */
  z-index: 10;
  filter: drop-shadow(0px -1px 1px rgba(0, 0, 0, 0.1)); /* subtle shadow */
}

.main-menu ul.sub-menu {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background-color: var(--white-color);
  visibility: hidden;
  min-width: 200px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 7px;
  left: -14px;
  opacity: 0;
  z-index: -1;
  box-shadow: 0px 4px 15px rgba(1, 15, 28, 0.06);
  border-radius: 0;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.main-menu ul.sub-menu a {
  font-size: 14px;
  line-height: 28px;
}

.main-menu ul.sub-menu {
  padding: 16px;
  /* padding: 16px 18px 16px 16px; */
  left: -25px;
}

.main-menu ul.sub-menu li {
  display: block;
  margin: 0 0;
  padding: 0px 9px;
}

.main-menu ul.sub-menu li.menu-item-has-children > a:after {
  content: "\2b";
  float: right;
  top: 1px;
  display: inline-block;
}

.main-menu ul.sub-menu li.menu-item-has-children > a:hover:after {
  content: "\f068";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.main-menu ul.sub-menu li a {
  position: relative;
  padding-left: 0;
  text-transform: capitalize;
}

.main-menu ul li:hover > ul.sub-menu::after {
  content: "";
  position: absolute;
  top: -15px; /* Cover the gap */
  left: 0;
  right: 0;
  height: 15px; /* Same as your margin-top */
  background: transparent;
  z-index: 8;
}

.main-menu ul.sub-menu li a:hover:before {
  visibility: visible;
  opacity: 1;
  left: 0;
}

.main-menu ul.sub-menu li ul.sub-menu {
  left: 100%;
  right: auto;
  top: 0;
  margin: 0 0;
  margin-left: 0px;
}

/*new css dof new*/
/* .sub-menu {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: max-content;
  white-space: nowrap;
  z-index: 50;
}

.sub-menu.open-left {
  left: auto;
  right: 100%;
}

.sub-menu.open-right {
  left: 100%;
  right: auto;
} */

.main-menu ul.sub-menu li ul.sub-menu li ul {
  left: 100%;
  right: auto;
}

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

.social-links .social-title {
  font-weight: 500;
  font-size: 15px;
  display: inline-block;
  margin: 0 10px 0 0;
  color: var(--body-color);
}

.social-links a {
  font-size: 16px;
  display: inline-block;
  color: var(--body-color);
  margin: 0 15px 0 0;
}

.social-links a:last-child {
  margin-right: 0 !important;
}

.social-links a:hover {
  color: var(--theme-color);
}

.header-logo {
  padding-top: 15px;
  padding-bottom: 15px;
}

.header-links ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.header-links li {
  display: inline-block;
  position: relative;
  margin-right: 30px;
}

.header-links li:last-child {
  margin-right: 0;
}

.header-links li > i {
  margin-right: 6px;
}

.header-links li,
.header-links span,
.header-links p,
.header-links a {
  color: var(--body-color);
}

.header-links a:hover {
  color: var(--theme-color);
}

.header-links b,
.header-links strong {
  font-weight: 500;
  margin-right: 2px;
}

.header-links .social-links a {
  font-size: 13px;
}

.header-top {
  padding: 7px 0;
  background-color: var(--theme-color2);
  --body-color: #fff;
}

.header-top a:hover {
  color: var(--theme-color);
}

/* Header 1 ---------------------------------- */

/* Medium Large devices */

/* Medium devices */

/* Extra small devices */

/* Medium Large devices */

/* Header 2 ---------------------------------- */

/* Medium Large devices */

/* Medium devices */

/* Header 3 ---------------------------------- */
.header-layout3 {
  position: relative;
  max-width: 1520px;
  margin: 0 auto -100px auto;
}

.header-layout3 .header-top {
  /* background-color: var(--theme-color); */
  background-color: #00a859;
}

.header-layout3 .header-links li > i {
  border-color: var(--white-color);
}

.header-layout3 .header-links a:hover {
  color: var(--title-color);
}

.header-layout3 .menu-area {
  position: relative;
  z-index: 2;
}

/* .header-layout3 .main-menu {
  margin-left: 6px;
} */

.header-layout3 .header-logo {
  position: relative;
  z-index: 2;
  height: 125px;
  margin-top: -50px;
  padding: 13px 5px;
  /* background-color: #d3ffe8; */
  border-radius: 0 0 0 30px;
}

.header-layout3 .sticky-wrapper {
  box-shadow: 0px 10px 20px rgba(2, 29, 53, 0.06);
  background-color: var(--white-color);
  border-radius: 0 0 30px 30px;
  max-width: 1520px;
  margin-left: auto;
  margin-right: auto;
}

.header-layout3 .sticky-wrapper.sticky .header-logo {
  height: 100%;
  margin-top: 0;
  padding: 19px 39px;
}

.header-layout3 .th-menu-toggle {
  margin-left: auto;
}

/* Medium Large devices */

/* Medium Large devices */
@media (max-width: 1299px) {
  .header-layout3 {
    margin: 0 auto -30px auto;
  }
}

/* Medium devices */
@media (max-width: 991px) {
  .header-layout3 .header-logo {
    margin-top: 0;
    height: 100%;
    padding: 15px 12px !important;
    border-radius: 0 0 0 15px;
    /* -webkit-clip-path: polygon(
      100% 0,
      100% 80%,
      calc(100% - 25px) 100%,
      0 100%,
      0 0
    );
    clip-path: polygon(100% 0, 100% 80%, calc(100% - 25px) 100%, 0 100%, 0 0); */
  }
  .header-layout3 .sticky-wrapper {
    border-radius: 0 0 15px 15px;
  }
}

/* Medium devices */
@media (max-width: 576px) {
  .header-layout3 .sticky-wrapper {
    border-radius: 0 0 0px 0px;
    box-shadow: 0px 0px 0px black !important;
    /* Background handled dynamically via React on mobile */
  }
}

/* Extra small devices */
@media (max-width: 575px) {
  .header-layout3 .row {
    --bs-gutter-x: 0;
  }
  .header-layout3 .header-logo {
    max-width: 155px;
    padding: 0px !important;
  }
}

/*------------------- 4.3. Footer  -------------------*/
.footer-wrapper {
  --th-border-color: rgba(120, 128, 148, 0.4);
  --body-color: #969eb2;
  position: relative;
  z-index: 2;
  /* background-color: var(--title-color); */
  overflow: hidden;
  background-color: #00122a;
}

.footer-wrapper .social-links a {
  margin: 0 30px 0 0;
}

.widget-area {
  padding-top: 100px;
  padding-bottom: 46px;
}

.footer-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 8px;
  color: white;
}

.footer-info:last-child {
  margin-bottom: 0;
}

.footer-info i {
  color: var(--theme-color);
  min-width: 23px;
  margin-top: 6px;
}

.newsletter-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 60px 0;
  border-bottom: 2px solid #ffffff;
  /* Medium devices */
}

@media (max-width: 991px) {
  .newsletter-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    gap: 25px 0;
  }
}

/* Medium devices */
@media (max-width: 991px) {
  .newsletter-wrap {
    padding: 40px;
  }
}

/* Small devices */
@media (max-width: 767px) {
  .newsletter-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 25px;
  }
}

/* Extra small devices */

/* Medium devices */
@media (max-width: 991px) {
  .footer-wrapper .widget-area {
    padding-top: var(--section-space-mobile);
    padding-bottom: 30px;
  }
}

/* Small devices */

/* footer 2 ---------------------------------- */

/*------------------- 4.4. Breadcumb  -------------------*/

/* Medium Large devices */

/* Large devices */

/* Medium devices */

/* Extra small devices */

/*------------------- 4.5. Pagination  -------------------*/

/* Small devices */

/*------------------- 4.6. Blog  -------------------*/

/* Small devices */

/* Extra small devices */

/* Extra small devices */

/* Large devices */

/* Extra small devices */

/* Small devices */

/* Extra small devices */

/* Medium Large devices */

/* Large devices */

/* Medium devices */

/* Small devices */

/* Extra small devices */

/*------------------- 4.7. Comments  -------------------*/

/* Large devices */

/* Large devices */

/* Medium devices */

/* Small devices */

/* Small devices */

/*------------------- 4.8. Hero Area  -------------------*/
/* Hero Global ---------------------------------- */
.th-hero-wrapper {
  position: relative;
  z-index: 2;
}

/* Hero 1 ---------------------------------- */

.hero-text {
  margin-bottom: 32px;
  line-height: 1.4;
}

/* Medium Large devices */

/* Large devices */

/* Medium devices */

/* Small devices */

/* Extra small devices */

/* Hero 2 --------------------------------------*/
.hero-title2 {
  font-size: 65px;
  line-height: 1.12;
  margin-top: -0.2em;
  margin-bottom: 18px;
  /* Medium Large devices */
  /* Large devices */
  /* Small devices */
  /* Extra small devices */
  /* Extra small devices */
}

@media (max-width: 1299px) {
  .hero-title2 {
    font-size: 3rem;
  }
}

@media (max-width: 1199px) {
  .hero-title2 {
    font-size: 60px;
  }
}

@media (max-width: 767px) {
  .hero-title2 {
    font-size: 52px;
  }
}

@media (max-width: 575px) {
  .hero-title2 {
    font-size: 34px;
  }
}

@media (max-width: 375px) {
  .hero-title2 {
    font-size: 33px;
  }
}

.hero-title2 .title1,
.hero-title2 .title2 {
  display: block;
}

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

@keyframes titleFill {
  0% {
    width: 0;
  }
  80% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}

/* Medium Large devices */

/* Medium Large devices */

/* Medium devices */

/* Extra small devices */

/* Hero 3 --------------------------------------*/
.hero-title2 .square-text {
  border: 2px solid;
  line-height: 1.03em;
  padding: 0 10px;
  display: inline-block;
  position: relative;
}

.hero-title2 .square-text .dot1,
.hero-title2 .square-text .dot2 {
  position: absolute;
  top: -10px;
  height: calc(100% + 20px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  /* Small devices */
}

.hero-title2 .square-text .dot1:before,
.hero-title2 .square-text .dot1:after,
.hero-title2 .square-text .dot2:before,
.hero-title2 .square-text .dot2:after {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: #b0dfc6;
  border-radius: 99px;
}

@media (max-width: 767px) {
  .hero-title2 .square-text .dot1,
  .hero-title2 .square-text .dot2 {
    top: -7px;
    height: calc(100% + 14px);
  }
  .hero-title2 .square-text .dot1:before,
  .hero-title2 .square-text .dot1:after,
  .hero-title2 .square-text .dot2:before,
  .hero-title2 .square-text .dot2:after {
    width: 12px;
    height: 12px;
  }
}

.hero-title2 .square-text .dot1 {
  left: -10px;
  /* Small devices */
}

@media (max-width: 767px) {
  .hero-title2 .square-text .dot1 {
    left: -7px;
  }
}

.hero-title2 .square-text .dot2 {
  right: -10px;
  /* Small devices */
}

@media (max-width: 767px) {
  .hero-title2 .square-text .dot2 {
    right: -7px;
  }
}

@media (min-width: 2000px) {
  .hero-3-home {
    /* margin: 0 3em; */
    max-width: 3000px;
    /* margin: 0 auto; */
    background-size: 1820px 100%;
    /* border-radius: 50px; */
  }
}

.hero-3-home {
  /* max-width: 1820px; */
  margin: 0 3em;
  /* margin: 0 auto; */
  background-size: 1820px 100%;
  /* border-radius: 50px; */
}

.hero-style3 {
  position: relative;
  z-index: 6;
  padding: 276px 0 200px 0;
}

.hero-style3 .hero-title2 {
  color: var(--white-color);
  font-weight: 900;
}

.hero-style3 .hero-text {
  max-width: 700px;
  color: var(--white-color);
}

.hero-form-wrap {
  background-color: var(--white-color);
  /* box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.05); */
  /* border-radius: 60px; */
  border-radius: 30px 0px 49px 0px;
  padding: 30px 15px;
  max-width: 1522px;
  width: 85%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 9;
  /* Medium Large devices */
}

@media (min-width: 2500px) {
  .hero-form-wrap {
    max-width: 1780px;
  }
}

@media (max-width: 1860px) {
  /* .hero-form-wrap { */
  /* margin-right: 12px; */
  /* margin-left: 12px; */
  /* } */
}

@media (max-width: 1600px) {
  .hero-form-wrap {
    max-width: calc(100% - 24px);
  }
}

@media (max-width: 1299px) {
  .hero-form-wrap {
    padding: 20px;
  }
}

/* Medium Large devices */
@media (max-width: 1299px) {
  .hero-style3 {
    padding: 220px 0 300px 0;
  }
}

/* Large devices */
@media (max-width: 1199px) {
  .hero-form-wrap {
    bottom: -100px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .hero-style3 .hero-text {
    max-width: 550px;
  }
}

/* Medium devices */
@media (max-width: 991px) {
  .hero-form-wrap {
    bottom: -180px;
  }
}

/* Small devices */
@media (max-width: 767px) {
  .hero-style3 {
    padding: 205px 15px 50px 15px;
    text-align: center;
  }
  .hero-style3 .hero-text {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-form-wrap {
    position: static;
    padding: 0px;
    border-radius: 0px;
    max-width: 100%;
    width: 100%;
  }
}

/*------------------- 4.9. Error  -------------------*/

/* Medium devices */

/* Small devices */

/*------------------- 4.00. Popup Search  -------------------*/

/*------------------- 4.00. Popup Side Menu  -------------------*/

/*------------------- 4.00. Wocommerce  -------------------*/

/* Small devices */

/*------------------- 4.00. Products  -------------------*/

/* Large devices */

/* Medium devices */

/* Extra small devices */

#description {
  margin-bottom: 30px;
}

/* Medium Large devices */

/* Medium Large devices */

/* Large devices */

/* Medium devices */

/* Small devices */

/* Extra small devices */

/* Extra small devices */

/*------------------- 4.00. Cart  -------------------*/

/* Medium devices */

/* Small devices */

/*------------------- 4.00. Checkout  -------------------*/

/* Small devices */

/*------------------- 4.00. Wishlist  -------------------*/

/* Medium devices */

/* Small devices */

/*------------------- 4.00. Contact  -------------------*/
/* Appointment sec ---------------------------------- */

/* Contact Page ---------------------------------- */

/*------------------- 4.00. About  -------------------*/
/* About 1 ---------------------------------- */

/* Medium Large devices */

/* Large devices */

/* Small devices */

/* Small devices */

/* About 2 ---------------------------------- */

/* Achievement ---------------------------------- */

/* Medium devices */

/* Small devices */

/* Extra small devices */

/*------------------- 4.00. Team  -------------------*/
/* Team global ---------------------------------- */

/* Team Card ---------------------------------- */

/* Small devices */

/* Team Box ---------------------------------- */

/* Small devices */

/* Team Details ---------------------------------- */

/*------------------- 4.00. Testimonial  -------------------*/
/* Testimonial Card ---------------------------------- */

/* Testimonial Box ---------------------------------- */

/*------------------- 4.00. Counter  -------------------*/
/* Counter 1 ---------------------------------- */

/* Small devices */

/* Counter Grid ---------------------------------- */
.counter-grid {
  padding: 40px 10px;
  text-align: center;
}

.counter-grid-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-radius: 30px;
  border: 2px solid var(--theme-color);
  position: relative;
}

.counter-grid-wrap:before,
.counter-grid-wrap:after {
  content: "";
  position: absolute;
  background-color: var(--theme-color);
}

.counter-grid-wrap:before {
  height: 2px;
  width: 100%;
  left: 0;
  top: calc(50% - 1px);
}

.counter-grid-wrap:after {
  width: 2px;
  height: 100%;
  top: 0;
  left: calc(50% - 1px);
}

.counter-grid .box-number {
  font-size: 55px;
  color: var(--title-color);
  font-weight: 600;
  margin-bottom: 0px;
  margin-top: -0.2em;
  /* Large devices */
}

.counter-grid .box-number .plus {
  color: var(--theme-color);
  font-weight: 400;
}

@media (max-width: 1199px) {
  .counter-grid .box-number {
    font-size: 48px;
  }
}
@media (max-width: 1199px) {
  .counter-grid .box-number {
    font-size: 30px;
  }
}
/*------------------- 4.00. Blog  -------------------*/
/* Blog Card ---------------------------------- */

/* Medium Large devices */

/* Large devices */

/* Medium devices */

/* Small devices */

/* Blog Box ---------------------------------- */

/* Medium Large devices */

/* Large devices */

/* Medium devices */

/* Small devices */

/*------------------- 4.00. Brand  -------------------*/
/* Brand 1 ---------------------------------- */

/* Brand 2 ---------------------------------- */

/*------------------- 4.00. Simple Sections  -------------------*/
.checklist ul {
  padding-left: 0;
  list-style: none;
  text-align: left;
  margin-bottom: 0;
}

.checklist.list-two-column ul {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0 40px;
  /* Extra small devices */
}

@media (max-width: 575px) {
  .checklist.list-two-column ul {
    grid-template-columns: auto;
  }
  .checklist.list-two-column ul li {
    text-align: initial;
  }
}

.checklist li {
  color: var(--title-color);
  font-weight: 400;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

.checklist li > i {
  color: var(--theme-color);
  line-height: 26px;
}

.checklist li:not(:last-child) {
  margin-bottom: 10px;
}

.checklist.style2 li {
  font-weight: 500;
}

.checklist.style2 li > i {
  font-size: 24px;
}

.rounded-30 {
  border-radius: 30px;
  /* Small devices */
}

@media (max-width: 767px) {
  .rounded-30 {
    border-radius: 15px;
  }
}

/* Large devices */
@media (max-width: 1199px) {
  p.mb-40 {
    margin-bottom: 35px;
  }
}

/*------------------- 4.00. Why -------------------*/
/* Why 1 ---------------------------------- */

/* Why 2 ---------------------------------- */

/* Why 3 ------------------------------------------*/

/*------------------- 4.00. Faq -------------------*/
/* Faq 1 ---------------------------------- */

/* Extra small devices */

/*------------------- 4.00. Service -------------------*/
/* Service Card ---------------------------------- */

/* Service List ---------------------------------- */

/* Medium Large devices */

/* Large devices */

/* Medium devices */

/* Small devices */

/* Extra small devices */

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

/*------------------- 4.00. Process -------------------*/
/* Process Card ---------------------------------- */

/*------------------- 4.00. Feature -------------------*/
/* Feature List ---------------------------------- */

/* Large devices */

/* Medium devices */

/* Feature Box ---------------------------------- */
.feature-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  max-width: 285px;
  /* Large devices */
  /* Medium devices */
  /* Extra small devices */
}

.feature-box-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 1490px;
  padding: 0px 0px;
  margin: 0 auto;
  /* Large devices */
  /* Medium devices */
}

@media (max-width: 1199px) {
  .feature-box-wrap {
    gap: 15px;
    padding: 70px 12px;
  }
}

@media (max-width: 991px) {
  .feature-box-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 40px 15px;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
  }
}
@media (max-width: 575px) {
  .feature-box-wrap {
    padding: 50px 0px;
  }
}

@media (max-width: 1199px) {
  .feature-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }
}

@media (max-width: 991px) {
  .feature-box {
    -webkit-box-flex: calc(50% - 15px);
    -webkit-flex: calc(50% - 15px);
    -ms-flex: calc(50% - 15px);
    flex: calc(50% - 15px);
  }
}

@media (max-width: 575px) {
  .feature-box {
    -webkit-box-flex: 100%;
    -webkit-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
    padding: 2rem;
  }
}

.feature-box .box-title {
  font-size: 16px;
  margin-bottom: 5px;
  margin-top: 5px;
}

/*------------------- 4.00. Gallery -------------------*/
/* Gallery Card -------------------------------*/

/*------------------- 4.00. Category -------------------*/
/* Category Card -------------------------------------*/

/* Category Box -------------------------------------*/

/*------------------- 4.00. CTA -------------------*/

/*------------------- 4.00. Price -------------------*/
/* Price Card -----------------------------------*/

/*=================================
    05. Spacing
==================================*/
/*-- Padding Left And Right --*/
/* 
.space,
.space-top {
  padding-top: var(--section-space);
}

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

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

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

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

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

/* Medium devices */

/* Header 5 */

/* Header 6 */

/* Header 7 */

/*------------------- Hero -------------------*/
/* Hero 4 */

/* Hero 5 */

/* hero 6 */

@-webkit-keyframes spermMove {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(110px, 15px);
    transform: translate(110px, 15px);
  }
  100% {
    -webkit-transform: translate(220px, 0);
    transform: translate(220px, 0);
  }
}

@keyframes spermMove {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(110px, 15px);
    transform: translate(110px, 15px);
  }
  100% {
    -webkit-transform: translate(220px, 0);
    transform: translate(220px, 0);
  }
}

@-webkit-keyframes spermMove2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(170px, 170px);
    transform: translate(170px, 170px);
  }
}

@keyframes spermMove2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(170px, 170px);
    transform: translate(170px, 170px);
  }
}

@-webkit-keyframes spermMove3 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(370px, 220px);
    transform: translate(370px, 220px);
  }
}

@keyframes spermMove3 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(370px, 220px);
    transform: translate(370px, 220px);
  }
}

/* Small devices */

/* Small devices */

/* Hero 7 */

/*------------------- Sections -------------------*/

/* About 3 */

/* Service 3 */

/* Team 3 */

/* Testi 3 */

/* Why 4 */

/* Prcoess 2 */

/* Cta 7 */

/* Faq 3 */

/* Blog 4 */

/* About 4 */

@-webkit-keyframes dnarotate {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(359deg);
    transform: rotateZ(359deg);
  }
}

@keyframes dnarotate {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(359deg);
    transform: rotateZ(359deg);
  }
}

@-webkit-keyframes dnaAnim {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(359deg);
    transform: rotateY(359deg);
  }
}

@keyframes dnaAnim {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(359deg);
    transform: rotateY(359deg);
  }
}

/* Feature 3 */

/* Service 4 */

/* Team 4 */

/* Why 4 */

/* Counter 2 */

/* Testi 4 */

/* Hight Resoulation devices */

/* Blog Grid */

/* Medium Large devices */

/* Large devices */

/* Medium devices */

/* Small devices */

/* About 5 */

@media (min-width: 767px) {
  .btn-group:has(.cta-call) {
    gap: 20px 40px;
  }
}

/* Team 5 */

/* Why 6 */

/* Contact 3 */

/* About 6 */

/* Service 5 */

/* Gallery 2 */

/* Comparison 1 */

/* Testi 6 */

/* About 7 */

/* Cta 8 */

/* Testi 7 */

/* cta 9 */

/* Why 7 */