:root {

  --jua-font: "Jua", serif;

  --jost-font: "Jost", serif;

  --font-outfit: "Outfit";

  --font-awesome: "Font Awesome 6 Free";

  --font-16: 16px;

  --font-17: 17px;

  --font-18: 18px;

  --font-19: 19px;

  --font-20: 20px;

  --font-22: 22px;

  --primary-color: #391953;

  --secondary-color: #C3B7FF;

  --white-color: #fff;

  --light-blue-color: #8770FF;

  --orange-color: #FF946D;

  --blue-color: #5D65F8;

  --heading-1: 52px;

  --heading-2: 42px;

  --heading-3: 32px;

  --heading-4: 27px;

  --transition: all 600ms;

}



body {

  font-style: normal;

}







a {

  text-decoration: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  margin-top: 0px;

  font-weight: 700;

  line-height: 1.2;

  -webkit-transition: all 0.6s ease-out 0s;

  -moz-transition: all 0.6s ease-out 0s;

  -ms-transition: all 0.6s ease-out 0s;

  -o-transition: all 0.6s ease-out 0s;

  transition: all 0.6s ease-out 0s;

  font-family: var(--jua-font);

}



h1 {

  font-size: var(--heading-1);

}



h2 {

  font-size: var(--heading-2);

}



h3 {

  font-size: var(--heading-3);

}



h4 {

  font-size: var(--heading-4);

}



h5 {

  font-size: var(--font-20);

}



h6 {

  font-size: var(--font-16);

}



ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}



p {

  font-size: var(--font-18);

  font-family: var(--jost-font);

  font-weight: 400;

  line-height: 24px;

}



a,

button,

p,

input,

select,

textarea,

li,

.transition-3,

h1,

h2,

h3,

h4,

h5,

h6 {

  -webkit-transition: all 0.6s ease-out 0s;

  -moz-transition: all 0.6s ease-out 0s;

  -ms-transition: all 0.6s ease-out 0s;

  -o-transition: all 0.6s ease-out 0s;

  transition: all 0.6s ease-out 0s;

}



a:not([href]):not([class]),

a:not([href]):not([class]):hover {

  color: inherit;

  text-decoration: none;

}



a:focus,

.button:focus {

  text-decoration: none;

  outline: none;

}



a:focus,

a:hover {

  color: inherit;

  text-decoration: none;

}



a,

button {

  color: inherit;

  outline: none;

  border: none;

  background: transparent;

}



button:hover {

  cursor: pointer;

}



button:focus {

  outline: 0;

}



.uppercase {

  text-transform: uppercase;

}



.capitalize {

  text-transform: capitalize;

}



input,

textarea {

  outline: none;

}



input[type=color] {

  appearance: none;

  -moz-appearance: none;

  -webkit-appearance: none;

  background: none;

  border: 0;

  cursor: pointer;

  height: 100%;

  width: 100%;

  padding: 0;

  border-radius: 50%;

}



*::-moz-placeholder {

  opacity: 1;

}



*::placeholder {

  opacity: 1;

}



.container {

  max-width: 1440px;

  margin: 0 auto;

}





.main-header .header-user {

  display: flex;

  gap: 20px;

}



.main-header {

  position: relative;

  z-index: 99;

}



.main-header.newheader {

  background: var(--secondary-color);

  box-shadow: 0px 5px 20px #00000014;

}



.main-header {

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 111;

  transition: var(--transition);

}



.main-header .navbar-brand {

  margin-right: 25px;

}



.navbar-nav .nav-link {

  padding: 0 !important;

  font-family: var(--font-outfit);

  font-size: var(--font-17);

  font-weight: 500;

  line-height: 21.42px;

  color: var(--primary-color);

  margin: 0 25px;

}



.navbar-nav .nav-link:hover {

  color: var(--white-color);

}



.navbar-nav .nav-link i {

  margin-right: 8px;

}



.navbar-nav .nav-link {

  display: flex;

  gap: 3px;

  align-items: center;

}



.navbar-nav .nav-link .bone-color {

  display: flex;

}



.navbar-nav .nav-link .bone-color-2 {

  display: none;

}



.navbar-nav .nav-link:hover .bone-color {

  display: none;

}



.navbar-nav .nav-link:hover .bone-color-2 {

  display: flex;

}



.navbar-brand img {

  max-width: 117px;

  width: 100%;

  transition: var(--transition);

}



.newheader .navbar-brand img {

  max-width: 75px;

}



.header-right {

  display: flex;

  gap: 30px;

  align-items: center;

}



.header-right a {

  font-family: var(--font-outfit);

  font-size: var(--font-17);

  font-weight: 600;

  line-height: 21.42px;

  color: var(--primary-color);

}



.header-right a:hover {

  color: var(--white-color);

}



.header-right a i {

  margin-right: 5px;

}



.header-right .dropdown .dropdown-toggle::after {

  --fa: "\f107";

  content: var(--fa);

  font-weight: 900;

  font-family: var(--font-awesome);

  vertical-align: 0;

  border-top: 0;

  border-right: 0;

  border-bottom: 0;

}



.dropdown-menu.show {

  display: block;

  min-width: 60px;

  border-radius: 15px;

  padding: 10px;

}



.header-right .dropdown .dropdown-menu a {

  background: transparent;

  color: var(--primary-color);

  border-radius: 10px;

  padding: 8px 10px;

  text-align: center;

  font-weight: 400;

}



.header-right .dropdown .dropdown-menu a:hover {

  background: var(--orange-color);

  color: var(--white-color);

}







.theme-btn {

  color: var(--white-color) !important;

  padding: 14px 23px;

  transition: var(--transition);

  position: relative;

  border-radius: 10px;

  cursor: pointer;

  vertical-align: middle;

  overflow: hidden;

  border: none;

  background: var(--light-blue-color);

  z-index: 1;

  font-family: var(--font-outfit);

  font-size: var(--font-17);

  line-height: 21.42px;

  text-align: center;

}



.theme-btn:hover {

  background: var(--orange-color);

}





.banner-sec {

  position: relative;

  z-index: 9;

  padding-top: 120px;

  background: var(--secondary-color);

  margin-bottom: 130px;

  background-image: url('../images/bg-img.png');

  background-size: 100%;

}



.banner-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-1.png);

  bottom: -129px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: -3;

}



.banner-content h1 {

  font-family: var(--jua-font);

  font-size: 52px;

  font-weight: 400;

  line-height: 55px;

  color: var(--primary-color);

  margin-bottom: 28px;

}



.banner-form {

  background: #5D09A3;

  padding: 36px 42px;

  border-radius: 30px;

  box-shadow: 0px 18px 50px 0px #571B8980;

  border: 1px solid #9443D8;

}



.banner-img {

  position: relative;

  z-index: 2;

  padding-left: 50px;

}



.banner-img img {

  width: 100%;

}



.radio-box {

  display: flex;

  align-items: center;

}



.radio-box p {

  margin: 0;

  font-size: var(--font-17);

  font-weight: 500;

  line-height: 24.57px;

  text-align: left;

  color: #323030;

  margin-right: 22px;

}



.radio-box p span {

  color: #FF6264;

}



.radio-box .form-check {

  margin-right: 15px;

}



.radio-box .form-check label {

  font-family: var(--jost-font);

  font-size: 16px;

  font-weight: 600;

  line-height: 23.12px;

  text-align: left;

  color: #565656;

}



.radio-box .form-check .form-check-input {

  border: 1px solid #DBDBDB;

  background: #F3F3F3;

}



.radio-box .form-check .form-check-input:checked[type=radio] {

  background: var(--primary-color);

  border: 5px solid var(--white-color)fff;

}



.form-check-input:focus,

.form-control:focus {

  box-shadow: none;

}



.banner-form .form-control {

  background: #F3F3F3;

  border: 1px solid #DBDBDB;

  height: 52px;

  font-family: var(--jost-font);

  font-size: 16px;

  font-weight: 400;

  line-height: 23.12px;

  text-align: left;

  color: #2D2D2D;

  border-radius: 3px;

  padding-left: 45px;

  border-top-left-radius: 3px !important;

  border-bottom-left-radius: 3px !important;

}



.banner-form .form-control::placeholder {

  color: #75439E;

}



.banner-form .input-group img {

  position: absolute;

  left: 15px;

  width: auto;

  z-index: 9;

  top: 15px !important;

}



.banner-form .form-check label {

  font-family: var(--jost-font);

  font-size: 18px;

  font-weight: 600;

  line-height: 26.01px;

  color: var(--white-color);

}



.banner-form .form-check .form-check-input:checked {

  background-color: #F3F3F3;

  border-color: #DBDBDB;

}



.banner-form .form-check .form-check-input:checked[type=checkbox] {

  background-image: url('../images/right.png');

  background-size: auto;

}



.banner-form .form-btn {

  margin-top: 50px;

  background: var(--orange-color);

  border: 0;

  height: 50px;

  align-items: center;

  display: flex;

  gap: 10px;

  font-family: var(--jost-font);

  font-size: var(--font-17);

  font-weight: 700;

  line-height: 24.57px;

  transition: var(--transition);

  padding: 10px 20px;

}



.banner-form .form-btn:hover {

  background: var(--light-blue-color);

}



.banner-form .form-group label {

  font-family: var(--jost-font);

  font-size: 16px;

  font-weight: 700;

  line-height: 23.12px;

  color: var(--white-color);

  margin-bottom: 8px;

}



.banner-bg-width {

  width: 780px;

  height: 670px;

  background: var(--white-color);

  border-radius: 50%;

  filter: blur(80px);

  position: absolute;

  top: 5%;

  z-index: -2;

  opacity: 40%;

}



.banner-bg-width-2 {

  width: 390px;

  height: 390px;

  background: #9D34F4;

  border-radius: 50%;

  filter: blur(80px);

  position: absolute;

  right: 0;

  z-index: -2;

  bottom: 0;

  opacity: 30%;

}





.every-sec {

  position: relative;

  padding-top: 80px;

  padding-bottom: 130px;

  overflow: hidden;

}



.title-box h2 {

  font-family: var(--jua-font);

  font-size: 42px;

  font-weight: 400;

  line-height: 42px;

  text-align: center;

  color: var(--primary-color);

  max-width: 490px;

  margin: 0 auto;

}





.box-grid {

  position: relative;

  max-width: 270px;

  margin: 0 auto;

  transition: var(--transition);

}

.internal_box_grid{

  text-align: center;
  
}



.icon-container {

  position: relative;

  display: flex;

  min-height: 160px;

  max-width: 140px;

  align-items: center;

  justify-content: center;

  margin: 0 auto;

  margin-bottom: 18px;

}



.icon-container .vector {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  max-width: 140px;

  opacity: 0.4;

}



.icon-container .vector-2 {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  max-width: 140px;

  z-index: -1;

}



.icon-container img {

  margin: 0 auto;

  display: block;

}



.box-grid h5 {

  font-family: var(--jost-font);

  font-size: var(--font-20);

  font-weight: 600;

  line-height: 28.9px;

  color: var(--primary-color);

  text-align: center;

  margin-bottom: 15px;

}



.box-grid p {

  font-family: var(--jost-font);

  font-size: var(--font-16);

  font-weight: 400;

  line-height: 22px;

  text-align: center;

  color: var(--primary-color);

}



.box-grid a {

  display: flex;

  justify-content: center;

}



.box-grid .icon-container .icon-orange {

  display: block;

  transition: var(--transition);

}



.box-grid .icon-container .icon-blue {

  display: none;

  transition: var(--transition);

}



.box-grid:hover .icon-container .icon-orange {

  display: none;

}



.box-grid:hover .icon-container .icon-blue {

  display: block;

}



.box-grid:hover .icon-container .vector {

  opacity: 1;

}



.box-grid a {

  display: flex;

  justify-content: center;

  color: var(--primary-color);

}



.box-grid:hover a {

  color: var(--light-blue-color);

}



.mb-60 {

  margin-bottom: 60px;

}



.every-bg-width-2 {

  width: 430px;

  height: 430px;

  background: #FFC94D;

  border-radius: 50%;

  filter: blur(80px);

  position: absolute;

  right: -10%;

  z-index: -2;

  bottom: 0;

  opacity: 30%;

}



.every-bg-width {

  width: 430px;

  height: 430px;

  background: #FFC94D;

  border-radius: 50%;

  filter: blur(80px);

  position: absolute;

  left: -10%;

  z-index: -2;

  top: 0;

  opacity: 15%;

}





.service-sec {

  position: relative;

  background: #F5F5F5;

  padding: 80px 0;

  margin-bottom: 140px;

  padding-bottom: 60px;

}



.service-sec .service-1 {

  position: absolute;

  max-width: 140px;

  left: 0;

  top: 50px;

}



.service-sec .service-2 {

  position: absolute;

  max-width: 140px;

  right: 0;

  top: 92px;

  transform: rotate(180deg);

}



.service-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-2.png);

  bottom: -129px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: -3;

}



.mb-50 {

  margin-bottom: 50px;

}



.service-box {

  position: relative;

}



.service-img {

  overflow: hidden;

  border-radius: 5px;

}



.service-img img {

  width: 100%;

  height: 363px;

  object-fit: cover;

  transform: scale(1.0);

  transition: all 900ms;

}



.service-box:hover .service-img img {

  transform: scale(1.06);

}



.service-content {

  background: var(--white-color);

  padding: 25px;

  border-radius: 5px;

  max-width: 430px;

  margin: 0 auto;

  transition: var(--transition);

  width: 90%;

  margin-top: -15px;

  z-index: 9;

  position: relative;

}



.service-box:hover .service-content {

  margin-top: -20px;

}



.service-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;

}



.service-heading h4 {

  font-family: var(--jost-font);

  font-size: 22px;

  font-weight: 600;

  line-height: 31.79px;

  color: var(--primary-color);

  margin-bottom: 0;

}



.service-heading p {

  margin-bottom: 0;

  font-family: var(--jost-font);

  font-size: 16px;

  font-weight: 400;

  line-height: 22px;

  text-align: right;

  color: var(--primary-color);

}



.service-heading p img {

  margin-right: 5px;

}



.service-address {

  display: flex;

  justify-content: space-between;

}



.service-address p {

  margin-bottom: 0;

}



.width-243 {

  max-width: 243px;

}



.service-address p.price {

  font-family: var(--jost-font);

  font-size: 16px;

  line-height: 22px;

  text-align: center;

  color: var(--primary-color);

}



.service-address p.price span {

  font-weight: 600;

}



.service-address p {

  font-family: var(--jost-font);

  font-size: 16px;

  font-weight: 400;

  line-height: 20px;

  text-align: left;

  color: var(--primary-color);

}



.button-box {

  display: flex;

  justify-content: center;

}







.connect-sec {

  position: relative;

  z-index: 9;

  padding: 80px 0;

}



.connect-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-4.png);

  bottom: 0;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: top;

  z-index: -3;

}



.connect-sec .title-box h2 {

  max-width: 670px

}

/* body.home .connect-sec {
  padding: 0px !important;
} */

body.home .service-sec {
  margin-bottom: 50px !important;
}

body.home .every-sec{
  padding-bottom:30px !important;
}

.connect-box {

  box-shadow: 0px 4px 4px 0px #F7BD6A;

  padding: 60px;

  border-radius: 80px;

  position: relative;

  background: #FEFBF2;

  transition: var(--transition);

}



.connect-box .connect-number {

  box-shadow: 0px 10px 4px 0px #FFF8E3;

  width: 100px;

  display: flex;

  justify-content: center;

  border-radius: 100%;

  top: 0;

  position: absolute;

  left: 50%;

  transform: translate(-50%, -50%);

  height: 50px;

  align-items: center;

  z-index: 9;

  background: var(--white-color);

  transition: var(--transition);

}



.connect-number h4 {

  margin-bottom: 0;

  font-family: var(--jua-font);

  font-size: 22px;

  font-weight: 400;

  line-height: 49px;

  text-align: center;

  color: var(--primary-color);

}



.connect-box h3 {

  font-family: var(--jua-font);

  font-size: 32px;

  font-weight: 400;

  line-height: 49px;

  text-align: center;

  color: var(--primary-color);

  margin-bottom: 20px;

}



.coonect-icon {

  display: flex;

  justify-content: center;

  margin-bottom: 35px;

}



.connect-box p {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 400;

  line-height: 24px;

  text-align: center;

  margin: 0;

  color: var(--primary-color);

}



.bg-color-blue {

  background: var(--secondary-color);

  box-shadow: 0px 4px 4px 0px #4D2A8A;

}



.connect-box p {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 400;

  line-height: 24px;

  text-align: center;

  color: var(--primary-color);

  margin: 0;

}



.connect-box:hover {

  background: #f7bd6a54;

}



.connect-box.bg-color-blue:hover {

  background: var(--secondary-color);

}



.connect-box.bg-color-blue .connect-number {

  box-shadow: 0px 10px 4px 0px #D6D0F4;

}



.connect-box:hover .connect-number {

  box-shadow: none;

}



.connect-box.bg-color-blue:hover .connect-number {

  box-shadow: none;

}



.theme-btn-2 {

  color: var(--white-color) !important;

  padding: 14px 23px;

  transition: var(--transition);

  position: relative;

  border-radius: 10px;

  cursor: pointer;

  vertical-align: middle;

  overflow: hidden;

  border: none;

  background: var(--orange-color);

  z-index: 1;

  font-family: var(--font-outfit);

  font-size: var(--font-17);

  line-height: 21.42px;

  text-align: center;

}



.theme-btn-2:hover {

  background: var(--light-blue-color);

}





.why-sec {

  padding-top: 80px;

  padding-bottom: 80px;

  background: #FFDBCE;

  position: relative;

  margin-bottom: 135px;

}



.why-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-5.png);

  bottom: -129px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: -3;

}



.why-bg-width-2 {

  width: 430px;

  height: 430px;

  background: #F8AC40;

  border-radius: 50%;

  filter: blur(80px);

  position: absolute;

  right: 0%;

  z-index: -2;

  bottom: 0;

  opacity: 30%;

}



.why-box {

  box-shadow: 0px 28px 25px 0px #FDCDBC;

  background: var(--white-color);

  padding: 42px;

  border-radius: 50px;

  position: relative;

}



.why-box:before {

  position: absolute;

  content: '';

  background: #FFA888;

  height: 7px;

  border-radius: 7px;

  width: 300px;

  left: 50%;

  top: 4px;

  transform: translate(-50%, -50%);

}



.why-box h4 {

  font-family: var(--jost-font);

  font-size: 27px;

  font-weight: 600;

  line-height: 39.02px;

  text-underline-position: from-font;

  text-decoration-skip-ink: none;

  color: var(--primary-color);

  text-align: center;

  margin-bottom: 20px

}



.why-box ul li {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 400;

  line-height: 42px;

  text-align: left;

  color: var(--primary-color);

  position: relative;

  padding-left: 30px;

}



.why-box ul li:before {

  --fa: "\f00c";

  font-weight: 900;

  content: var(--fa);

  font-family: var(--font-awesome);

  position: absolute;

  top: 0;

  left: 0;

}



.why-sec .row .col-lg-4 {

  /* display: flex; */

}



.why-sec .row .col-lg-4:nth-child(1) .why-box:before {

  background: #FFA888;

}



.why-sec .row .col-lg-4:nth-child(2) .why-box:before {

  background: #FE7E4F;

}



.why-sec .row .col-lg-4:nth-child(3) .why-box:before {

  background: #FF9F40;

}











footer {

  background: var(--secondary-color);

  padding: 60px 0;

  position: relative;

  overflow: hidden;

  padding-top: 110px;

}



.footer-logo {

  display: flex;

  max-width: 120px;

  margin-bottom: 20px;

}



.footer-widget-box h5 {

  font-family: var(--jost-font);

  font-size: var(--font-20);

  font-weight: 800;

  line-height: 25px;

  color: var(--primary-color);

  margin-bottom: 2px;

}



.footer-widget-box p {

  font-family: var(--jost-font);

  font-size: var(--font-16);

  font-weight: 500;

  line-height: 20px;

  color: #5A1E8A;

  margin: 15px 0;

}



footer .newsletter-form .form-group {

  position: relative;

}



.newsletter-form .form-group i {

  position: absolute;

  top: 19px;

  left: 20px;

  color: var(--primary-color);

  z-index: 1;

}



footer .newsletter-form .form-control {

  padding: 10px 20px;

  padding-right: 140px;

  border-radius: 8px;

  height: 52px;

  font-family: var(--jost-font);

  font-size: var(--font-16);

  font-weight: 500;

  line-height: 20px;

  color: var(--primary-color);

  padding-left: 45px;

  border: 0;

}



footer .newsletter-form .theme-btn {

  position: absolute;

  right: 0;

  top: 0;

  border-radius: 0 8px 8px 0;

  padding: 5px 15px;

  height: 52px;

  min-width: 130px;

  background: #FF9F7C;

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 700;

  line-height: 20px;

}



footer .newsletter-form .theme-btn:hover {

  background: var(--light-blue-color);

}



.form-control:focus {

  box-shadow: none;

}



footer .newsletter-form .form-control::placeholder {

  color: var(--primary-color);

}



.footer-widget-box {

  position: relative;

  z-index: 9;

}



.footer-widget-box h5 {

  font-family: var(--jost-font);

  font-size: 19px;

  font-weight: 600;

  line-height: 25px;

  color: var(--primary-color);

  margin-bottom: 30px;

}



.footer-widget-box ul li a {

  font-family: var(--jost-font);

  font-size: var(--font-16);

  font-weight: 500;

  line-height: 38px;

  color: #5A1E8A;

}



.footer-widget-box ul li a:hover {

  color: var(--light-blue-color);

}



.gx-7 {

  --bs-gutter-x: 7rem;

}



.footer-bg-color {

  width: 430px;

  height: 430px;

  background-color: var(--white-color);

  border-radius: 50%;

  filter: blur(200px);

  position: absolute;

  left: 32%;

  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 1;

}



.footer-bg-color-2 {

  width: 430px;

  height: 430px;

  background-color: #A341F5;

  border-radius: 50%;

  filter: blur(200px);

  position: absolute;

  left: 90%;

  top: 80%;

  transform: translate(-50%, -50%);

  z-index: 1;

}



.copyright {

  z-index: 9;

  position: relative;

}



.copyright p {

  font-family: var(--jost-font);

  font-size: 16px;

  font-weight: 500;

  line-height: 25px;

  margin: 0;

  color: var(--primary-color);

}



.copyright p a:hover {

  color: var(--light-blue-color);

}



.footer-social {

  position: relative;

  z-index: 9;

  display: flex;

  align-items: center;

  gap: 10px;

}



.footer-social p {

  font-family: var(--jost-font);

  font-size: var(--font-17);

  font-weight: 600;

  line-height: 25px;

  color: var(--primary-color);

  margin: 0;

}



.footer-social ul {

  display: flex;

  align-items: center;

  gap: 10px;

}



.footer-social ul li a {

  width: 43px;

  height: 43px;

  border: 2px solid rgb(111 51 160 / 30%);

  display: flex;

  border-radius: 50px;

  align-items: center;

  justify-content: center;

  color: var(--white-color);

}



.footer-social ul li a:hover {

  background: var(--blue-color);

  border: 2px solid var(--blue-color);

}



.mt-60 {

  margin-top: 60px;

}



.about-sec {

  padding: 60px 0;

  position: relative;

  background-image: url(../images/about-bg.png);

  background-size: 100%;

  padding-bottom: 0;

  background-repeat: no-repeat;

  background-position: bottom;

}



.title-box-2 h2 {

  font-family: var(--jua-font);

  font-size: 42px;

  font-weight: 400;

  line-height: 42px;

  color: var(--primary-color);

  max-width: 285px;

  margin: 0 auto;

}



.about-rt-content p {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 400;

  line-height: 24px;

  text-align: left;

  color: var(--primary-color);

}



.about-rt-content ul {

  display: flex;

  flex-wrap: wrap;

  gap: 22px;

}



.about-rt-content ul li {

  box-shadow: 0px 15px 18px 0px #F0EBF3;

  border: 1px solid #FED6C7;

  padding: 17px 23px;

  border-radius: 7px;

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 500;

  line-height: 24px;

  text-align: left;

  position: relative;

  padding-left: 43px;

}



.about-rt-content ul li:before {

  --fa: "\f058";

  position: absolute;

  content: var(--fa);

  font-weight: 400;

  font-family: var(--font-awesome);

  left: 15px;

}



.about-button-box {

  display: flex;

  margin-top: 20px;

  justify-content: end;

}



.about-btn {

  color: var(--white-color) !important;

  padding: 14px 23px;

  transition: var(--transition);

  position: relative;

  border-radius: 10px;

  cursor: pointer;

  vertical-align: middle;

  overflow: hidden;

  border: none;

  background: var(--light-blue-color);

  z-index: 1;

  font-family: var(--jost-font);

  font-size: var(--font-17);

  line-height: 21.42px;

  text-align: center;

}



.about-btn:hover {

  background: var(--orange-color);

}





.blog-sec {

  background: #F5F5F5;

  position: relative;

  z-index: 9;

  padding: 90px 0;

}



.blog-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-2.png);

  bottom: -129px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: -3;

}



.blog-sec .service-1 {

  position: absolute;

  max-width: 140px;

  left: 0;

  top: 50px;

}



.blog-sec .service-2 {

  position: absolute;

  max-width: 140px;

  right: 0;

  top: 92px;

  transform: rotate(180deg);

}



.blog-box {

  position: relative;

  transition: var(--transition);

}



.blog-img {

  overflow: hidden;

  border-radius: 5px;

}



.blog-img img {

  width: 100%;

  height: 304px;

  object-fit: cover;

  transform: scale(1.0);

  transition: all 900ms;

}



.blog-box:hover .blog-img img {

  transform: scale(1.06);

}



.blog-content {

  background: var(--white-color);

  padding: 25px;

  border-radius: 5px;

  max-width: 430px;

  margin: 0 auto;

  transition: var(--transition);

  width: 90%;

  margin-top: -15px;

  z-index: 9;

  position: relative;

}



.blog-box:hover .service-content {

  margin-top: -20px;

}



.blog-content a {

  font-family: var(--jost-font);

  font-size: var(--font-20);

  font-weight: 500;

  line-height: 30px;

  text-align: center !important;

  text-decoration-line: underline !important;

  color: var(--primary-color) !important;

  margin-bottom: 0;

  display: block;

}



.blog-box:hover .blog-content {

  background: var(--orange-color);

}



.blog-box:hover .blog-content a {

  color: var(--white-color) !important;

}



.mb-30 {

  margin-bottom: 30px;

}



.blog-button-box {

  display: flex;

  margin-top: 30px;

  justify-content: center;

}



.blog-button-box a {

  font-family: var(--jost-font);

  font-size: var(--font-17);

  font-weight: 700;

  line-height: 24.57px;

  text-align: left;

  text-decoration-line: underline;

  color: var(--orange-color);

}



.blog-button-box a:hover {

  color: var(--primary-color);

}



.inner-banner {

  position: relative;

  z-index: 2;

  padding-top: 150px;

  margin-bottom: 50px;

  /*background-image: url(../images/inner-bg-img.png);

    background-size: 100%;*/

}



.inner-banner:before {

  position: absolute;

  content: '';

  background-color: var(--secondary-color);

  height: calc(100% - 88px);

  top: 0;

  left: 0;

  width: 100%;

  z-index: -4;

  background-image: url(../images/inner-bg-img.png);

  background-size: 100%;

}



.inner-banner:after {

  position: absolute;

  content: '';

  background: url(../images/inner-bg.png);

  bottom: -40px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: -3;

}



.inner-content h1 {

  font-family: var(--jua-font);

  font-size: var(--heading-2);

  font-weight: 400;

  line-height: 42px;

  text-align: center;

  color: var(--primary-color);

  max-width: 400px;

  margin: 0 auto;

}



.inner-content img {

  max-width: 750px;

  margin: 0 auto;

  display: block;

}



.inner-banner-bg-width {

  width: 400px;

  height: 263px;

  background: var(--white-color);

  border-radius: 50%;

  filter: blur(80px);

  position: absolute;

  top: 0;

  z-index: -2;

  opacity: 40%;

  left: 15%;

}



.inner-banner-bg-width-2 {

  width: 335px;

  height: 335px;

  background: var(--white-color);

  border-radius: 50%;

  filter: blur(80px);

  position: absolute;

  top: 0;

  z-index: -2;

  opacity: 40%;

  left: 50%;

  transform: translate(-50%, -50%);

}



.welcome-sec {

  position: relative;

  z-index: 9;

  padding: 90px 0;

  padding-top: 40px;

  overflow: hidden;

}



.welcome-content {

  box-shadow: 0px 10px 50px 0px #FFFAD4;

  border: 5px solid #FFD153;

  border-radius: 30px;

  padding: 60px 70px;

  max-width: 1036px;

  margin: 0 auto;

  background: #FFF1AE;

  position: relative;

}



.welcome-content:before {

  position: absolute;

  content: '';

  background: var(--white-color);

  width: 26px;

  height: 26px;

  border-radius: 50px;

  border: 2px solid #EECA1D;

  left: 70px;

  top: 40px;

}



.welcome-content:after {

  position: absolute;

  content: '';

  background: var(--white-color);

  width: 26px;

  height: 26px;

  border-radius: 50px;

  border: 2px solid #EECA1D;

  right: 70px;

  top: 40px;

}



.welcome-content h3 {

  font-family: var(--jost-font);

  font-size: var(--heading-3);

  font-weight: 600;

  line-height: 40px;

  text-align: center;

  color: var(--primary-color);

  max-width: 500px;

  margin: 0 auto;

  margin-bottom: 38px;

}



.welcome-content p {

  font-family: var(--jost-font);

  font-size: var(--font-19);

  font-weight: 400;

  line-height: 25px;

  text-align: center;

  color: var(--primary-color);

}



.bar-img {

  position: absolute;

  left: 4%;

  max-width: 450px;

  top: 0;

}



.mb-110 {

  margin-bottom: 110px;

}



.welcome-content-box h3 {

  font-family: var(--jost-font);

  font-size: var(--heading-3);

  font-weight: 600;

  line-height: 42px;

  text-align: left;

  text-underline-position: from-font;

  text-decoration-skip-ink: none;

  color: #391953;

}



.counter-img {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  position: relative;

  margin-bottom: 15px;

}



.counter-img p {

  font-family: var(--jost-font);

  font-size: var(--heading-4);

  font-weight: 600;

  line-height: 43.35px;

  text-align: left;

  color: #65249C;

  position: absolute;

  top: 60%;

  left: 53%;

  margin: 0;

  transform: translate(-50%, -50%);

}



.counter-content p {

  font-family: var(--jost-font);

  font-size: var(--font-20);

  font-weight: 500;

  line-height: 28.9px;

  color: var(--primary-color);

  margin: 0;

  text-align: center;

}



.welcome-sec .every-bg-width-2 {

  background: #B057FB;

}



.welcome-sec .every-bg-width {

  top: auto;

  bottom: 0;

}



.solution-sec {

  background: #f5f5f5;

  position: relative;

  padding: 65px 0;

  padding-top: 130px;

  margin-bottom: 130px;

}



.solution-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-7.png);

  bottom: -129px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: -3;

}



.solution-sec .service-1 {

  position: absolute;

  max-width: 140px;

  left: 0;

  top: 50px;

}



.solution-sec .service-2 {

  position: absolute;

  max-width: 140px;

  right: 0;

  top: 92px;

  transform: rotate(180deg);

}



.solution-1 {

  max-width: 268px;

  position: absolute;

  left: 12px;

  top: -150px;

}



.solution-2 {

  max-width: 348px;

  position: absolute;

  right: 25px;

  bottom: 160px;

}



.solution-img-box {

  position: relative;

}



.solution-content-box {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 50px;

}



.solution-content-box p {

  box-shadow: 0px 28px 25px 0px #E7E7E7;

  padding: 35px;

  border-radius: 35px;

  font-family: var(--jost-font);

  font-size: var(--heading-4);

  font-weight: 600;

  color: #391953;

  text-align: center;

  display: inline-block;

}



.color-blue {

  background: #D5F9FF;

  border: 1px solid #7BEAFD;

}



.color-orange {

  border: 1px solid #F8B034;

  background: #FBE1B4;

  margin-left: -116px;

}



.color-purple {

  background: #EAD9F9;

  border: 1px solid #C186F3;

  margin-top: 40px;

}



.solution-content h3 {

  font-family: var(--jua-font);

  font-size: var(--heading-2);

  font-weight: 500;

  line-height: 42px;

  text-align: left;

  color: var(--primary-color);

  margin-bottom: 28px;

}



.solution-content p {

  font-family: var(--jost-font);

  font-size: 23px;

  font-weight: 400;

  line-height: 35px;

  text-align: left;

  color: var(--primary-color);

}



.solution-content ul {

  margin-top: 30px;

}



.solution-content ul li {

  font-family: var(--jost-font);

  font-size: var(--font-20);

  font-weight: 500;

  line-height: 22px;

  text-align: left;

  color: var(--primary-color);

  position: relative;

  padding-left: 30px;

  margin-bottom: 10px;

}



.solution-content ul li:before {

  position: absolute;

  --fa: "\f00c";

  content: var(--fa);

  font-weight: 900;

  font-family: var(--font-awesome);

  left: 0;

}



.title-box-3 {

  margin-bottom: 55px;

}



.title-box-3 h2 {

  font-family: var(--jua-font);

  font-size: 42px;

  font-weight: 400;

  line-height: 42px;

  color: var(--primary-color);

  max-width: 666px;

  margin: 0 auto;

  text-align: center;

  margin-bottom: 15px;

}





.query-sec {

  position: relative;

  padding: 50px 0;

  margin-bottom: 50px;

}



.query-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-8.png);

  bottom: -129px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: 2;

}



.query-box {

  border: 1px solid #E5C7FF;

  border-radius: 35px;

  padding: 35px;

  box-shadow: 0px 28px 25px 0px #E8E3EDB2;

  position: relative;

}



.query-box .query-icon {

  position: absolute;

  left: 35px;

  top: 35px;

}



.query-content {

  padding-left: 22px;

}



.query-content h3 {

  font-family: var(--jost-font);

  font-size: 24px;

  font-weight: 600;

  text-align: left;

  color: #391953;

  margin-bottom: 12px;

}



.query-content p {

  font-family: var(--jost-font);

  font-size: var(--font-16);

  font-weight: 400;

  line-height: 22px;

  text-align: left;

  color: var(--primary-color);

  margin-bottom: 10px;

}



.query-content a {

  display: flex;

  color: #FF9F7C;

  margin-top: 5px;

}



.query-icon i {

  color: #B057FB;

}









.faq-sec {

  position: relative;

  background: #F9F0DD;

  padding: 50px 0;

  margin-bottom: 150px;

}



.faq-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-9.png);

  bottom: -129px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: 2;

}



.faq-sec:before {

  position: absolute;

  content: '';

  top: -140px;

  left: 0;

  background: #F9F0DD;

  width: 100%;

  height: 140px;

}



.accordion-button:focus {

  box-shadow: none;

}



.accordion-button:not(.collapsed)::after {

  content: var(--fa);

  font-weight: 400;

  font-family: var(--font-awesome);

  --fa: "\f058";

  background-image: none;

  transform: inherit;

  color: var(--orange-color);

}



.accordion-button::after {

  content: var(--fa);

  font-weight: 400;

  font-family: var(--font-awesome);

  --fa: "\f058";

  background-image: none;

  transform: inherit;

  color: var(--primary-color);

  font-size: 25px;

}



.faq-content-box .accordion-item {

  margin-bottom: 30px;

  border-radius: 30px;

  border: 0;

  background: #FEFBF2;

}



.accordion-button:not(.collapsed) {

  font-family: var(--jua-font);

  font-size: var(--heading-4);

  font-weight: 400;

  text-align: left;

  color: #391953;

}



.accordion-item:first-of-type .accordion-button {

  border-top-left-radius: 30px;

  border-top-right-radius: 30px;

}



.accordion-button:not(.collapsed) {

  background: transparent;

  box-shadow: none;

}



.accordion-button {

  font-family: var(--jua-font);

  font-size: var(--heading-4);

  font-weight: 400;

  text-align: center;

  color: #391953;

  border-radius: 30px;

  border: 0;

  background: #FEFBF2;

}



.accordion-body {

  font-family: var(--jost-font);

  font-size: var(--font-17);

  font-weight: 500;

  line-height: 26px;

  text-align: left;

  color: #8D7E99;

  padding-top: 0;

  padding-bottom: 35px;

}



.accordion-item:last-of-type .accordion-button.collapsed {

  border-radius: 30px;

}



.faq-img-box {

  position: relative;

}



.faq-img-box img.faq-img {

  max-width: 615px;

  height: 765px;

  object-fit: cover;

  border-radius: 30px;

}



.faq-contact {

  background: #FFD168;

  border-radius: 22px;

  padding: 20px;

  display: flex;

  align-items: center;

  gap: 30px;

  max-width: 420px;

  position: absolute;

  bottom: 43px;

  right: 48px;

}



.faq-contact-img img {

  max-width: 95px;

}



.faq-contact-info p,

.faq-contact-info a {

  font-family: var(--jost-font);

  font-size: var(--heading-4);

  font-weight: 600;

  line-height: 39.02px;

  text-align: left;

  margin: 0;

  color: var(--primary-color);

}





.contact-sec {

  position: relative;

  padding: 50px 0;

  margin-bottom: 50px;

}



.contact-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-8.png);

  bottom: -129px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: 2;

}



.title-box-3 p {

  font-family: var(--jost-font);

  font-size: var(--font-20);

  font-weight: 400;

  line-height: 35px;

  text-align: center;

  max-width: 670px;

  margin: 0 auto;

}



.contact-form {

  background: #FCF7DD;

  padding: 50px;

  border-radius: 25px;

}



.contact-form .form-control {

  box-shadow: 0px 15px 15px 0px #F5F1D7;

  height: 63px;

  border: 0;

  border-radius: 8px;

  padding: 15px 35px;

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 500;

  line-height: 25px;

  text-align: left;

  color: #464645;

}



.contact-form textarea.form-control {

  height: 170px;

  resize: none;

}



.contact-form .theme-btn {

  padding: 5px 15px;

  height: 62px;

  min-width: 130px;

  background: #FF9F7C;

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 700;

  line-height: 20px;

  max-width: 290px;

  width: 100%;

}



.contact-form .theme-btn:hover {

  background: var(--light-blue-color);

}



.contact-info-box {

  background: #FCF7DD;

  padding: 70px;

  border-radius: 25px;

}



.contact-info-list {

  display: flex;

  gap: 24px;

  align-items: baseline;

  margin-bottom: 50px;

}



.contact-info-list:last-child {

  margin-bottom: 0;

}



.contact-info-icon {

  border: 1px solid #FFC84B;

  width: 82px;

  height: 82px;

  min-width: 82px;

  border-radius: 100px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--white-color);

  box-shadow: 0px 20px 20px 0px #E3E0CB;

  transition: var(--transition);

}



.contact-info-icon:hover {

  background: #FFC84B;

}



.contact-info-icon:hover i {

  color: var(--white-color);

}



.contact-info-icon i {

  color: #FFC94D;

  font-size: 27px;

  transition: var(--transition);

}



.contact-info-content h3 {

  font-family: var(--jost-font);

  font-size: var(--heading-4);

  font-weight: 600;

  line-height: 40.46px;

  text-align: left;

  color: var(--primary-color);

  margin-bottom: 15px;

}



.contact-info-content p {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 500;

  line-height: 25px;

  text-align: left;

  margin: 0;

  color: #85837C;

}



.g-4-5 {

  --bs-gutter-y: 2rem;

}



.g-4-5 {

  --bs-gutter-x: 2rem;

}



.inner-service-sec {

  position: relative;

  padding: 80px 0;

  padding-bottom: 110px;

}



.shop-product-fillter {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: 0 0 30px;

}



.archive .sort-by-cover label {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 400 !important;

  line-height: 35px;

  color: var(--primary-color);

}



.archive .filter_by_cat form label {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 400;

  line-height: 35px;

  color: var(--primary-color);

}



.archive #product_cat_dropdown {

  display: block;

  padding: .375rem .75rem;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: #212529;

  background-color: #fff;

  background-clip: padding-box;

  border: 1px solid #ced4da;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  border-radius: .375rem;

  transition: border-color .15sease-in-out, box-shadow .15sease-in-out;

}



.woocommerce-shop .list-view .service-connect-box {

  display: flex;

  align-items: center;

}



.totall-product p {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 400;

  line-height: 35px;

  margin: 0;

  color: var(--primary-color);

}



.sort-by-product-wrap p {
  font-family: var(--jost-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: #6b7280;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sort-by-cover {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  padding-left: 20px;
  border-left: 1px solid #e5e7eb;
}

.sort-by-dropdown select {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 11px 38px 11px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  background-color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
  min-width: 180px;
}

.sort-by-dropdown select:hover {
  border-color: #c7d2fe;
  background-color: #fafbfc;
}

.sort-by-dropdown select:focus {
  border-color: var(--blue-color);
  box-shadow: 0 0 0 3px rgba(93, 101, 248, 0.1);
  outline: none;
  background-color: #ffffff;
}



.sort-by-dropdown ul {

  border: 1px solid #DFDFDF;

  border-radius: 3px;

  padding: 7px 14px;

}



.sort-by-dropdown ul li a {

  font-family: var(--jost-font);

  font-size: 15px;

  font-weight: 400;

  line-height: 22px;

  color: var(--primary-color);

}



.form-select:focus {

  box-shadow: none;

}



.sort-by-product-area {

  align-items: start;

  display: flex;

  gap: 15px;

}



#btnContainer {

  display: flex;

  align-items: center;

}





.service-connect-box {

  box-shadow: 0px 4px 4px 0px #F7BD6A;

  padding: 20px;

  border-radius: 80px;

  position: relative;

  background: #FEFBF2;

  transition: var(--transition);

  margin-bottom: 35px;

}



.service-connect-box .connect-number {

  box-shadow: 0px 10px 4px 0px #FFF8E3;

  width: 100px;

  display: flex;

  justify-content: center;

  border-radius: 100%;

  top: 0;

  position: absolute;

  left: 50%;

  transform: translate(-50%, -50%);

  height: 50px;

  align-items: center;

  z-index: 9;

  background: var(--white-color);

  transition: var(--transition);

}



.service-connect-number h4 {

  margin-bottom: 0;

  font-family: var(--jua-font);

  font-size: 22px;

  font-weight: 400;

  line-height: 49px;

  text-align: center;

  color: var(--primary-color);

}



.service-connect-box h3 {

  font-family: var(--jua-font);

  font-size: 32px;

  font-weight: 400;

  text-align: left;

  color: var(--primary-color);

  margin-bottom: 10px;

}



.list-view .service-coonect-icon {

  width: 30%;

}



.service-coonect-icon {

  display: flex;

  justify-content: center;

  margin-bottom: 35px;

}



.grid-view .service-connect-box {

  /* width:auto;

  height: auto; */

  min-height: 450px;

}



.single .widget .service-button-box a.service-btn.bg-color-2.open-datepicker:focus {

  color: #fff;

}



.service-connect-box p {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 400;

  line-height: 24px;

  text-align: left;

  margin: 0;

  color: var(--primary-color);

}



.service-coonect-icon {

  position: relative;

  z-index: 2;

}



.service-coonect-icon img.service-icon {

  position: absolute;

  top: 55%;

  left: 50%;

  transform: translate(-50%, -50%);

  max-width: 55px;

}



.service-connect-box:after {

  position: absolute;

  content: '';

  background-image: url(../images/bar.png);

  width: 100%;

  height: 100%;

  right: 0;

  top: 0;

  background-size: contain;

  max-width: 345px;

  z-index: 1;

}



.list-view .inner-service-content {

  width: 50%;

}



.inner-service-content {

  gap: 25px;

  position: relative;

  z-index: 2;

  display: flex;



  justify-content: space-between;

}



.list-view .inner-service-content {

  align-items: center;

}



/* .woocommerce-shop .inner-service-content {

  align-items: flex-start;

} */



.service-content-heading {

  max-width: 240px;

}



.service-content-price p {

  font-family: var(--jua-font);

  font-size: var(--font-16);

  font-weight: 400;

  line-height: 20px;

  color: var(--primary-color);

  text-align: right;

}



.service-content-price p span {

  font-size: var(--heading-4);

}





.inner-solution-sec {

  background: #f5f5f5;

  position: relative;

  padding: 65px 0;

  /* padding-top: 130px; */

  padding-top: 30px;

  z-index: 9;

}



.inner-solution-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-7.png);

  bottom: -129px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: -3;

}



.inner-solution-sec .inner-bar {

  position: absolute;

  right: 0;

  z-index: 1;

}



.inner-solution-img-box {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: end;

}



.inner-solution-img-box img.inner-solution-1 {

  max-width: 505px;

}



.inner-solution-img-box img.inner-solution-2 {

  position: absolute;

  top: 0;

  right: 44px;

  max-width: 472px;

}



.inner-solution-content h3 {

  font-family: var(--jua-font);

  font-size: var(--heading-2);

  font-weight: 400;

  line-height: 42px;

  text-align: left;

  color: var(--primary-color);

  margin-bottom: 28px;

}



.inner-solution-content p {

  font-family: var(--jost-font);

  font-size: var(--font-22);

  font-weight: 400;

  line-height: 35px;

  text-align: left;

  color: var(--primary-color);

}



.inner-solution-content ul li {

  font-family: var(--jost-font);

  font-size: var(--font-20);

  font-weight: 500;

  line-height: 22px;

  text-align: left;

  color: var(--primary-color);

  position: relative;

  padding-left: 30px;

  margin-bottom: 10px;

}



.inner-solution-content ul li:before {

  position: absolute;

  --fa: "\f00c";

  content: var(--fa);

  font-weight: 900;

  font-family: var(--font-awesome);

  left: 0;

}



.inner-solution-sec .service-1 {

  position: absolute;

  max-width: 140px;

  left: 0;

  top: 50px;

}



.inner-solution-sec .service-2 {

  position: absolute;

  max-width: 140px;

  right: 0;

  top: 92px;

  transform: rotate(180deg);

}







.terms-cond-sec {

  position: relative;

  background: #F9F0DD;

  padding: 50px 0;

  margin-bottom: 150px;

}



.terms-cond-sec:before {

  position: absolute;

  content: '';

  top: -140px;

  left: 0;

  background: #F9F0DD;

  width: 100%;

  height: 140px;

}



.terms-cond-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-9.png);

  bottom: -129px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: 2;

}



.term-box {

  background: #FEFBF2;

  border-radius: 50px;

  padding: 90px 65px;

  position: relative;

}



.term-box .circle {

  position: absolute;

  content: '';

  width: 26px;

  height: 26px;

  border: 2px solid #EECA1D;

  border-radius: 50px;

  background: #fff;

}



.term-box .circle.left-side {

  left: 130px;

  top: 35px;

}



.term-box .circle.right-side {

  right: 130px;

  top: 35px;

}



.term-box .circle:before {

  position: absolute;

  content: '';

  width: 1px;

  height: 228px;

  left: 50%;

  top: -115px;

  transform: translate(-50%, -50%);

  letter-spacing: 35px;

  border: 1px dashed #FFD153;

}



.term-box p span {

  font-family: var(--jost-font);

  font-size: var(--font-19);

  font-weight: 500;

  line-height: 26px;

  color: var(--primary-color);

}



.term-box h4 {

  font-family: var(--jua-font);

  font-size: var(--heading-4);

  font-weight: 400;

  line-height: 42px;

  text-align: left;

  color: var(--primary-color);

}



.term-box ol li {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 400;

  line-height: 24px;

  color: var(--primary-color);

  margin-bottom: 10px;

}



.term-box p:last-child {

  margin-bottom: 0;

}



.cta-sec {

  padding: 70px 0;

  position: relative;

  padding-bottom: 0;

}



.cta-sec:after {

  position: absolute;

  content: '';

  background: url(../images/shape-8.png);

  bottom: -129px;

  height: 130px;

  width: 100%;

  left: 0;

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: bottom;

  z-index: 2;

}



.cta-content h2 {

  font-family: var(--jua-font);

  font-size: var(--heading-2);

  font-weight: 400;

  line-height: 50px;

  text-align: center;

  color: var(--primary-color);

  margin-bottom: 20px;

}



.service-detail-sec {

  position: relative;

  padding: 60px 0;

  margin-bottom: 140px;

  padding-bottom: 60px;

}



.title-heading h2 {

  font-family: var(--jua-font);

  font-size: var(--heading-2);

  font-weight: 400;

  line-height: 42px;

  text-align: center;

  color: var(--primary-color);

}



.breadcum-box ul {

  display: flex;

  justify-content: center;

}



.breadcum-box ul li {

  position: relative;

  margin-right: 15px;

  padding-right: 15px;

}



.breadcum-box ul li:after {

  position: absolute;

  content: '';

  width: 6px;

  height: 2px;

  background: var(--primary-color);

  right: -2px;

  top: 12px;

}



.breadcum-box ul li:last-child:after {

  display: none;

}



.breadcum-box ul li a {

  font-family: var(--font-outfit);

  font-size: var(--font-17);

  font-weight: 600;

  line-height: 21.42px;

  text-align: left;

  color: var(--primary-color);

  transition: var(--transition);

}



.breadcum-box ul li a:hover {

  color: var(--orange-color);

}



.service-detail-sec {

  position: relative;

}



.service-widget img {

  width: 100%;

  height: 550px;

  object-fit: cover;

  border-radius: 30px;

  box-shadow: 0px 4px 4px 0px #F7BD6A;

}

/* Product Image Gallery Styles */

.product-gallery-container {
  position: relative;
  width: 100%;
}

.product-main-image {
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0px 4px 4px 0px #F7BD6A;
  background: #f5f5f5;
}

.product-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

/* Gallery Navigation Buttons */
.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(59, 31, 78, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  font-size: 20px;
}

.gallery-nav-btn:hover {
  background: rgba(59, 31, 78, 1);
  transform: translateY(-50%) scale(1.1);
}

.gallery-prev {
  left: 20px;
}

.gallery-next {
  right: 20px;
}

/* Image Counter */
.gallery-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  z-index: 10;
}

/* Fullscreen Button */
.gallery-fullscreen-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  font-size: 18px;
}

.gallery-fullscreen-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

/* Thumbnail Gallery */
.product-thumbnail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.gallery-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 100%;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid #ddd;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background: #f5f5f5;
}

.gallery-thumbnail:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: #bbb;
}

.gallery-thumbnail.active {
  border-color: #3b1f4e;
  border-width: 4px;
  box-shadow: 0 4px 12px rgba(59, 31, 78, 0.4);
}

.gallery-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Fullscreen Lightbox */
.gallery-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.gallery-lightbox.active {
  display: flex;
}

.gallery-lightbox img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 10px;
}

.lightbox-close {
  position: absolute;
  top: 30px;
  right: 30px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  transition: all 0.3s ease;
  font-size: 24px;
}

.lightbox-close:hover {
  background: rgba(220, 53, 69, 1);
  transform: scale(1.1);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  transition: all 0.3s ease;
  font-size: 24px;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
  left: 30px;
}

.lightbox-next {
  right: 30px;
}

.lightbox-counter {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  z-index: 10000;
}

/* No Image Fallback */
.no-product-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 550px;
  background: #f9f9f9;
  border-radius: 30px;
  border: 2px dashed #ddd;
}

.no-product-image p {
  margin-top: 15px;
  color: #999;
  font-size: 16px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .product-main-image {
    height: 400px;
  }

  .gallery-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .gallery-prev {
    left: 10px;
  }

  .gallery-next {
    right: 10px;
  }

  .gallery-fullscreen-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .product-thumbnail-gallery {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }

  .lightbox-close {
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
  }

  .lightbox-nav {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .lightbox-prev {
    left: 15px;
  }

  .lightbox-next {
    right: 15px;
  }

  .no-product-image {
    height: 400px;
  }
}

@media (max-width: 480px) {
  .product-main-image {
    height: 300px;
  }

  .product-thumbnail-gallery {
    grid-template-columns: repeat(4, 1fr);
  }

  .no-product-image {
    height: 300px;
  }
}





.service-widget-content h3 {

  font-family: var(--jua-font);

  font-size: var(--heading-3);

  font-weight: 400;

  line-height: 42px;

  text-align: left;

  color: var(--primary-color);

  margin-bottom: 20px;

}



.service-widget-content p {

  font-family: var(--jost-font);

  font-size: var(--font-20);

  font-weight: 400;

  line-height: 30px;

  text-align: left;

  color: var(--primary-color);

}



.service-img-content ul li {

  font-family: var(--jost-font);

  font-size: var(--font-20);

  font-weight: 500;

  line-height: 22px;

  text-align: left;

  color: var(--primary-color);

  position: relative;

  padding-left: 30px;

  margin-bottom: 10px;

}



.service-img-content ul li:before {

  position: absolute;

  --fa: "\f00c";

  content: var(--fa);

  font-weight: 900;

  font-family: var(--font-awesome);

  left: 0;

}



.service-img-box img {

  height: 100%;

  object-fit: cover;

  border-radius: 30px;

  box-shadow: 0px 4px 4px 0px #F7BD6A;

}



.video-button-box {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 9;

}



.video-widget-box {

  height: 550px;

  z-index: 1;

  border-radius: 25px;

  margin-top: 45px;

}



.video-widget-box video {

  position: relative;



}



.video-widget-box {

  position: relative;

  overflow: hidden;

}



.video-widget-box button {

  width: 100px;

  height: 100px;

  border: 0;

  border-radius: 100px;

  z-index: 9;

  background: var(--white-color);

}



.video-widget-box button i {

  color: #B057FB;

  font-size: 40px;

}



.video-widget-box.open button {

  display: none;

}



.video-widget-box.open:hover button {

  display: block;

}



/* .video-widget-box button .fa-pause {

  display: none;

} */



.video-widget-box.open:hover button .fa-play {

  display: none;

}



.video-widget-box.open:hover button .fa-pause {

  display: block;

}



.service-sidebar .widget {

  background: var(--white-color);

  border-radius: 20px;

  margin-bottom: 30px;

  box-shadow: 0px 4px 40px 0px #DBD6DF;

  padding-bottom: 45px;

}



.service-btn {

  color: var(--white-color);

  padding: 14px 23px;

  transition: var(--transition);

  position: relative;

  border-radius: 10px;

  cursor: pointer;

  vertical-align: middle;

  overflow: hidden;

  border: none;

  z-index: 1;

  font-family: var(--font-outfit);

  font-size: var(--font-17);

  line-height: 21.42px;

  text-align: center;

}



.service-btn.bg-color-1 {

  background: var(--orange-color);

}



.service-btn.bg-color-2 {

  background: var(--primary-color);

}



.service-button-box {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.service-btn.bg-color-1:hover {

  background: var(--primary-color);

  color: var(--white-color);

}



.service-btn.bg-color-2:hover {

  background: var(--orange-color);

  color: var(--white-color);

}



.rating-box p {

  font-family: var(--jost-font);

  font-size: var(--font-20);

  font-weight: 600;

  line-height: 28.9px;

  text-align: left;

  color: var(--primary-color);

  margin-bottom: 0;

}



.rating-box ul {

  display: flex;

  gap: 5px;

}



.rating-box ul li i.fa-solid {

  color: #FFC94D;

}



.rating-box ul li i.fa-regular {

  color: #EFE7F6;

}



.rating-box ul p {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 600;

  line-height: 28.9px;

  text-align: left;

  color: var(--primary-color);

  margin-bottom: 0;

}



.addres-info-icon i {

  color: #FFC94D;

  font-size: 21px;

}



.addres-info-list {

  display: flex;

  align-items: baseline;

  gap: 15px;

  margin-bottom: 30px;

}



.addres-info-list:last-child {

  margin-bottom: 0;

}



.address-info-content h4 {

  font-family: var(--jost-font);

  font-size: var(--font-22);

  font-weight: 600;

  line-height: 31.79px;

  text-align: left;

  color: var(--primary-color);

}



.address-info-content p {

  font-family: var(--jost-font);

  font-size: var(--font-18);

  font-weight: 500;

  line-height: 25px;

  text-align: left;

  color: #85837C;

  margin-bottom: 0;

}



.service-sidebar .ad-widget {

  background: var(--white-color);

  border-radius: 20px;

  margin-bottom: 30px;

}



.ad-widget img {

  width: 100%;

}



.login-sec {

  height: 100%;

  background: #C3B7FF;

  position: relative;

  z-index: 2;

  padding-top: 150px;

  padding-bottom: 80px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.login-sec .row {

  position: relative;

}



.login-sec .dog-login {

  max-width: 650px;

  margin: 0 auto;

  display: block;

}



.log-in-left {

  background: #63209B;

  border-top-left-radius: 80px;

}



.log-in-content {

  max-width: 400px;

  margin: 0 auto;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  padding: 50px 0;

  /* height: 700px; */

  height: 813px;

}



.log-in-content h4 {

  font-family: var(--jost-font);

  font-size: var(--heading-3);

  font-weight: 600;

  line-height: 25px;

  text-align: left;

  color: var(--white-color);

  margin-bottom: 30px;

}



.log-in-content p {

  font-family: var(--font-outfit);

  font-size: 17px;

  font-weight: 500;

  line-height: 21.42px;

  text-align: center;

  color: #DAADFF;

}



.login-btn-box {

  background: #431767;

  height: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 15px 32px;

  border-radius: 50px;

  margin-top: 45px;

  gap: 5px;

}



.login-btn-box a {

  font-family: var(--jost-font);

  font-size: 20px;

  font-weight: 600;

  line-height: 25px;

  text-align: left;

  color: #fff;

}



a.second-color {

  color: #D4A1FF;

}



.log-in-right {

  background: #fff;

  padding: 65px;

  height: 100%;

  display: flex;

  align-items: center;

  flex-direction: column;

}



.log-in-right form {

  background: #ff9f7c66;

  padding: 50px;

  border-radius: 0 80px 20px 80px;

}



.log-in-right form h3 {

  font-family: var(--jost-font);

  font-size: 30px;

  font-weight: 600;

  line-height: 25px;

  text-align: center;

  margin-bottom: 20px;

}



.log-in-right .input-group select.form-control {

  border: none;

}



.log-in-right .input-group {

  height: 58px;

  font-weight: 600;

}



.log-in-right .input-group input {

  height: 63px;

  background: #fff;

  border: 0;

  border-radius: 8px;

  font-family: var(--jost-font);

  font-size: 18px;

  font-weight: 500;

  line-height: 25px;

  text-align: left;

  text-underline-position: from-font;

  text-decoration-skip-ink: none;

  color: #464645;

}



.log-in-right .input-group span {

  background: #fff;

  border: 0;

  border-radius: 8px 0 0 8px;

  padding: 10px 25px;

  padding-right: 10px;

}



.log-in-right .input-group span i {

  font-size: 18px;

}



.log-in-right .signin-btn {

  color: #fff;

  background: #642a96;

  width: 100%;

  border: 0;

  height: 57px;

  border-radius: 6px;

  font-family: var(--jost-font);

  font-size: 17px;

  font-weight: 700;

  line-height: 24.57px;

  text-align: center;

  text-underline-position: from-font;

  text-decoration-skip-ink: none;

}





.log-in-right .signin-btn:hover {

  background: var(--secondary-color);

  color: #000;

}



.log-in-right p {

  font-family: var(--jost-font);

  font-size: 15px;

  font-weight: 600;

  line-height: 25px;

  text-align: center;

  color: #000000;

}



.google-box {

  display: flex;

  gap: 10px;

  justify-content: center;

  margin: 0;

}



.google-box ul {

  display: flex;

  gap: 10px;

}



.google-box ul li a {

  box-shadow: 0px 4px 4px 0px #EEE5B5;

  height: 54px;

  width: 54px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50px;

}



.mb-42 {

  margin-bottom: -42px;

  z-index: 9;

}





.search-sec {

  position: relative;

  padding-top: 55px;

  /* padding-bottom: 150px; */
  padding-bottom: 50px;

}



.search-form-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  padding: 24px 28px;
  margin-bottom: 30px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.search-form-box:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

.search-form-box-search span {
  display: block;
  font-family: var(--jost-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 6px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-form-box-search {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}



.location-from {

  position: relative;

  /* max-width: 650px; */

  width: 100%;

}



.location-from .form-select {

  height: 60px;

  border: 0;

  max-width: 650px;

  width: 100%;

}



/*.search-form-box span{

  background: #fff;

    width: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 60px;

    border-radius: 8px 0 0 8px;

}

.search-form-box span i{

  font-size: 20px;

}*/

/*.location-from .select2-container{

  height: 60px;

    align-items: center;

    display: flex;

    border-radius: 8px;

    background: #fff;

    max-width: 650px;

    width: 100%;

}*/

.search-list-item-box {

  margin: auto;

  max-width: 1000px;

}



/* .search-list-item {

  background: #FCF7DD;

  padding: 20px;

  border-radius: 20px;

  border: 1px solid #FAD234;

  margin-bottom: 23px;

  display: flex;

  align-items: center;

  position: relative;

} */

.search-list-item {

  /* max-width: 1000px; */

  background: #FCF7DD;

  padding: 20px;

  border-radius: 20px;

  border: 1px solid #FAD234;

  margin-bottom: 23px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  position: relative;

}



.search-list-img-box {

  flex: 0 0 auto;

  /* width: 20%; */

}



.seacrh-content-box {

  flex: 0 0 auto;

  width: 60%;

}



.search-price-box {

  flex: 0 0 auto;

  width: 20%;

}



.heart-sign {

  position: absolute;

  top: 15px;

  right: 15px;

}



.heart-sign i {

  color: #FAD234;

}



.search-list-img-box {

  display: flex;

  align-items: center;

  gap: 25px;

}



.search-list-img {

  /* max-width: 125px; */

}



.search-list-img img {

  width: 150px;

  height: 135px;

  object-fit: cover;

  border: 3px solid #fff;

  border-radius: 6px;

}



.search-list-img-content h3 {

  font-family: var(--jua-font);

  font-size: 33px;

  font-weight: 400;

  line-height: 41.25px;

  text-align: left;

}



.search-list-img-content ul li {

  max-width: 450px;

  font-family: var(--jost-font);

  font-size: 15px;

  font-weight: 500;

  line-height: 22px;

  text-align: left;

}



.seacrh-content-box p {

  font-family: var(--jost-font);

  font-size: 16px;

  font-weight: 400;

  line-height: 22px;

  text-align: left;

  text-underline-position: from-font;

  text-decoration-skip-ink: none;

  margin: 0;

  max-width: 550px;

}



.search-price-box p {

  font-family: var(--jost-font);

  font-size: 16px;

  font-weight: 500;

  line-height: 22px;

  text-align: left;

  color: var(--primary-color);

  margin-bottom: 10px;

}



.search-price-content {

  display: flex;

  align-items: center;

}



.search-price-content h5 {

  font-family: var(--jua-font);

  font-size: 16px;

  font-weight: 400;

  line-height: 20px;

  text-align: left;

  color: var(--primary-color);

  margin-bottom: 0;

}



.search-price-content h5 span {

  font-family: var(--jua-font);

  font-size: 30px;

  font-weight: 400;

  line-height: 37.5px;

  text-align: left;

}



.search-price-content p {

  margin-bottom: 0;

  font-family: var(--jua-font);

  font-size: 14px;

  font-weight: 400;

  line-height: 17.5px;

  text-align: left;

  text-decoration: line-through;

}



.pagination-box ul {

  gap: 10px;

}



.pagination-item {

  width: 26px;

  height: 26px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.pagination-item.arrow .pagination-link {

  background: #771598;

  color: #fff;

  width: 26px;

  height: 26px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.pagination-item a {

  font-family: var(--font-outfit);

  font-size: 20px;

  font-weight: 500;

  line-height: 25.2px;

  text-align: center;

  color: #000;

}



.action_btn {

  padding: 5px 10px;

  background-color: #0073aa;

  color: #fff;

  text-decoration: none;

  border-radius: 3px;

}



.action_btn:hover {

  color: #fff !important;

}



.delete_product_btn {

  background-color: rgb(177, 14, 14);

}

/* Action Button Icon Spacing */
.action_btn i {
  margin-right: 5px;
}

/* Pause Service Button Styles */
.pause_service_btn {
  margin-left: 5px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.pause_service_btn.pause-status-active {
  background-color: #ffc107; /* Warning yellow for pause action */
}

.pause_service_btn.pause-status-active:hover {
  background-color: #e0a800;
  transform: translateY(-1px);
}

.pause_service_btn.pause-status-paused {
  background-color: #28a745; /* Success green for unpause action */
}

.pause_service_btn.pause-status-paused:hover {
  background-color: #218838;
  transform: translateY(-1px);
}

/* Paused Service Row Styling */
.paused-service-row {
  opacity: 0.7;
  background-color: #f8f9fa !important;
}

.paused-service-row:hover {
  opacity: 0.85;
  background-color: #e9ecef !important;
}

/* Pause Status Badge */
.pause-status-badge {
  display: inline-block;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Service Paused Notice (on product page) */
.service-paused-notice {
  font-family: 'Jost', sans-serif;
}

.service-paused-notice strong {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
}

.service-paused-notice p {
  font-size: 14px;
  line-height: 1.5;
}

/* Notification Animations */
.service-status-notification {
  animation: slideInFromTop 0.4s ease-out;
  font-size: 14px;
  font-weight: 500;
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pause_service_btn {
    display: block;
    width: 100%;
    margin: 5px 0;
  }

  .pause-status-badge {
    display: block;
    margin-top: 5px;
    margin-left: 0 !important;
  }
}



section.product-form-container {

  margin-top: 0px !important;

}



.woocommerce-MyAccount-content {

  margin-bottom: 50px;

}



.log-in-content p {



  margin: 0;

}



.page-id-10 .woocommerce-error::before {

  top: 2.2em;

}



.page-id-10 .woocommerce-error {

  padding: 2.1em 2em 2.1em 3.5em;

}



.page-id-10 .woocommerce-MyAccount-content p a {

  color: var(--blue-color);

  ;

}



.service_redirect_btn {

  padding: 10px 20px;

  background: #28a745;

  color: #fff;

  text-decoration: none;

  border-radius: 3px;

  margin-bottom: 20px;

  float: right;

}



.service_redirect_btn:hover {

  color: #fff;

}





/* service-creation-css*/



.product-form-container {

  width: 100%;

  max-width: 600px;

  margin: 30px auto;

  padding: 20px;

  border: 1px solid #ddd;

  border-radius: 8px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  background-color: #fff;

}



.product-form-container h2 {

  text-align: center;

  margin-bottom: 20px;

  font-size: 24px;

  color: #333;

}

/* Multiple Image Upload Styles */

.image-upload-hint {
  font-size: 13px;
  color: #666;
  margin-top: -5px;
  margin-bottom: 10px;
  font-style: italic;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.image-preview-item {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.image-preview-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-preview-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #3b1f4e;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 2;
}

.remove-image-btn,
.remove-new-image-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(220, 53, 69, 0.95);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.2s, transform 0.2s;
}

.remove-image-btn:hover,
.remove-new-image-btn:hover {
  background-color: rgba(220, 53, 69, 1);
  transform: scale(1.1);
}

.remove-image-btn i,
.remove-new-image-btn i {
  font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .image-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }

  .remove-image-btn,
  .remove-new-image-btn {
    width: 26px;
    height: 26px;
  }

  .image-badge {
    font-size: 10px;
    padding: 3px 6px;
  }
}

@media (max-width: 480px) {
  .image-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}



.home .form-group {

  margin: 25px 0;

}



.home .banner-sec {

  padding-top: 150px;

}



.form-group {

  margin-bottom: 15px;

}



.form-group label {

  display: block;

  font-weight: bold;

  margin-bottom: 8px;

  color: #555;

}



.form-group input,

.form-group textarea,

.form-group select {

  width: 100%;

  padding: 10px;

  font-size: 16px;

  border: 1px solid #ccc;

  border-radius: 4px;

  outline: none;

  transition: border-color 0.3s ease;

}



.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

  border-color: #0073e6;

}



.form-group textarea {

  resize: vertical;

  min-height: 80px;

}



.submit-button {

  width: 100%;

  padding: 12px;

  font-size: 18px;

  background-color: #0B2644;

  color: #fff;

  border: none;

  border-radius: 4px;

  cursor: pointer;

  transition: background-color 0.3s ease;

}



.submit-button:hover {

  background-color: #0B2644;

}



.submit-button:active {

  background-color: #0B2644;

}



#productcreate {

  display: inline-block;

  width: 100%;

  max-width: 300px;

  margin: 20px auto;

  padding: 12px 20px;

  font-size: 18px;

  font-weight: bold;

  text-align: center;

  text-transform: uppercase;

  color: #fff;

  background-color: #3a1c50;

  /* Primary button color */

  border: none;

  border-radius: 6px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  cursor: pointer;

  transition: all 0.3s ease;

}



#productcreate:hover {

  background-color: var(--orange-color);

  /* Darker shade on hover */

  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);

}



#productcreate:active {

  background-color: #004799;

  /* Even darker shade on active */

  transform: scale(0.98);

  /* Slight press effect */

}



#productcreate:focus {

  outline: none;

  box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.4);

  /* Focus ring */

}



form label {

  color: #000;

  /* Black color for labels */

  font-size: 16px;

  /* Adjust font size if needed */

  font-weight: bold;

  /* Make labels bold (optional) */

  margin-bottom: 5px;

  /* Add spacing below the label */

  display: block;

  /* Ensures labels are block-level elements */

}



.single #booking-container select option {

  text-align: center;

  color: #000;

  font-weight: 600;

  font-style: italic;

  /* Optional: Adds italics to indicate it's a placeholder */

}



.service-button-box form.cart {

  text-align: center;

}



label.error {

  color: red;

  font-size: 14px;

  margin-top: 5px;

}



input.error,

select.error,

textarea.error {

  border: 1px solid red;

}



#productcreate {

  text-transform: capitalize;

}



/*07-02-2025*/

#order_data .custom_note_content p {

  font-size: 15px !important;

  font-weight: 500 !important;

  background-color: #e3e3e3 !important;

  padding: 10px !important;

  width: 75% !important;

}



/* header file css*/

/* Wrapper for the user info */

.user-info {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 15px;

  position: relative;

  /* Needed for positioning the dropdown */

}



/* User avatar styling */

.user-avatar img {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  object-fit: cover;

}



/* User name styling */

.user-name {

  font-size: 14px;

  color: #333;

  position: relative;

  /* This ensures the dropdown is positioned relative to this element */

}



/* User name link style */

.user-name-link {

  cursor: pointer;

  text-decoration: none;

  color: #0073aa;

  font-weight: bold;

}



/* Dropdown menu styling */

.dropdown-menu {

  display: none;

  /* Initially hidden */

  position: absolute;

  top: 100%;

  /* Position below the username */

  left: 0;

  background-color: #ffffff;

  border: 1px solid #ddd;

  border-radius: 5px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  width: 200px;

  z-index: 999;

}



.dropdown-menu ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



.dropdown-menu ul li {

  padding: 10px;

  border-bottom: 1px solid #f1f1f1;

}



.dropdown-menu ul li a {

  text-decoration: none;

  color: #333;

  display: block;

}



.dropdown-menu ul li a:hover {

  background-color: #f8f8f8;

  color: #0073aa;

}



/* Show the dropdown when hovering over the username */

.user-name:hover .dropdown-menu {

  display: block;

}



.my-pets-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.my-pets-heading {

  font-size: 24px;

  font-weight: bold;

}



.add-pet-button {
  background-color: #7c4dff;
  color: #fff !important;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(124, 77, 255, 0.3);
  background: linear-gradient(135deg, var(--light-blue-color) 0%, var(--blue-color) 100%);
  border: none;
  cursor: pointer;
  text-align: center;
}

.add-pet-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, #5a67d8 0%, var(--blue-color) 100%);
  color: #fff !important;
}



#booking-container {

  display: none;

  background: #c1bafb;

  padding: 15px;

  border-radius: 8px;

  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);

  max-width: 400px;

  margin: 20px;

  text-align: center;

}



#booking-container label {

  font-weight: bold;

  display: block;

  margin: 8px auto;

  color: #333;

}



.single select#pet_select {

  height: 41px;

  width: 100%;

}



.single #booking_datetime,

#end_booking_datetime {

  width: 100%;

  padding: 10px;

  font-size: 14px;

  border: 1px solid #ccc;

  border-radius: 5px;

  text-align: center;

  cursor: pointer;

  background-color: #fff;

}



#book_now_btn {

  display: none;

  background: #007bff;

  color: white;

  border: none;

  padding: 10px 15px;

  border-radius: 5px;

  font-size: 16px;

  cursor: pointer;

  margin-top: 15px;

  transition: 0.3s ease-in-out;

  width: 100%;

}



#book_now_btn:hover {

  background: #0056b3;

}



input[name="quantity"] {

  display: none;

}



select .input-group {

  height: 60px;

}



select .form-control {

  border: none;

}



.single_add_to_cart_button {

  display: block;

  margin: 0 auto;

  /* Centers horizontally */

  text-align: center;

}



.column-reverse {

  display: flex;

}



footer .newsletter-form .theme-btn {

  width: 100px;

  position: absolute;

  right: 0;

  top: 21px;

}



footer i.fa-regular.fa-envelope {

  position: absolute;

  top: 39px;

}



input.wpcf7-form-control.wpcf7-submit.has-spinner.theme-btn {

  top: 20px;

}



.select2-search__field::placeholder {

  padding-left: 25px;

  font-weight: 700 !important;

}



#username {

  color: #391953;

}



#locid {

  top: 21px;

}



.wpcf7-spinner {

  display: none;

}



.wpcf7-not-valid-tip {

  margin-top: 15px;

  text-align: left;

}



.home .select2-container .select2-search--inline:first-child input {



  padding: 10px 10px 10px 40px;

}



.home .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice:first-child {



  margin-left: 20px;

}



.home .select2-container--default .select2-selection--multiple .select2-selection__choice {

  /* margin-left: 40px; */

  margin-top: 10px;

}



.select2-container--default .select2-results>.select2-results__options {



  background: #c1bafb;

}



.select2-container--default .select2-results__option--highlighted[aria-selected] {

  background-color: #5D09A3;

  color: white;

}



.select2-container--default .select2-results__option[aria-selected=true] {

  background-color: var(--light-blue-color);

}



.page-id-272 .location-from {

  /* width: 30%; */

}



.page-id-272 .location-from select {

  /* width: 200px; */

}



.page-id-272 .select2-container .select2-search--inline {

  float: none;

}



.page-id-272 .select2-container--default .select2-selection--multiple .select2-selection__choice {

  margin-top: 2px;

}



.page-id-272 .select2-container--default .select2-selection--multiple .select2-selection__clear {

  margin-top: 2px;

}



.page-id-272 .select2-container--default .select2-selection--multiple .select2-selection__rendered {

  display: flex;

  margin: 5px 0 0 0;



}







/* Minimal & Beautiful My Account Navigation */
.woocommerce-MyAccount-navigation {
  padding: 0;
  background: transparent;
  color: inherit;
  margin-bottom: 30px;
}

.woocommerce-MyAccount-navigation ul {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  padding: 8px;
}

.woocommerce-MyAccount-navigation ul li {
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  border-bottom: none;
  margin-bottom: 4px;
}

.woocommerce-MyAccount-navigation ul li:last-child {
  margin-bottom: 0;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 14px 18px;
  color: #555;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  font-weight: 500;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: #f8f9fa;
  color: var(--blue-color);
  padding-left: 22px;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  background: linear-gradient(135deg, var(--blue-color) 0%, #5a67d8 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.woocommerce-MyAccount-navigation ul li.is-active a::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #fff;
  border-radius: 2px;
}

/* WooCommerce Info Notices */
.woocommerce-info::before {
  color: var(--primary-color);
}

.woocommerce-info {
  border-top-color: var(--primary-color);
}

.woocommerce-MyAccount-content .woocommerce-info a:hover {
  background: var(--light-blue-color);
  color: #fff;
}

.woocommerce-MyAccount-content header a {
  color: var(--light-blue-color);
  font-weight: 500;
}

.woocommerce-MyAccount-content .woocommerce-info a {
  background-color: #FF9F7C;
  color: #fff;
}



.woocommerce-MyAccount-content {

  margin-top: 50px;

}



.woocommerce-page .my-pets-container {

  margin-bottom: 25px;

}



.woocommerce-page .my-pets-container .action_btn {

  background-color: #3b1f4e;

}



.woocommerce-page .my-pets-container .add-pet-button {
  background: linear-gradient(135deg, var(--light-blue-color) 0%, var(--blue-color) 100%);
}



.woocommerce-MyAccount-content table .action_btn {

  background-color: #3b1f4e;

  display: inline-block;



}



.page-id-10 form .form-row input.input-text {

  line-height: 2em;

  padding-left: 10px;

  border: 1px solid #a0a0a0;

  border-radius: 5px;

}



.page-id-10 .edit-account .woocommerce-Button.button {

  margin-top: 25px;

  background-color: var(--secondary-color);

  color: var(--primary-color);

}



.woocommerce button.button {

  background-color: var(--secondary-color);

  color: var(--primary-color);

}

.woof_products_top_panel_ul li button{

  background-color: var(--secondary-color);

  color: var(--primary-color);

  font-weight: 600;

}



.woocommerce-pagination--without-numbers a.woocommerce-button.woocommerce-button--next.woocommerce-Button.woocommerce-Button--next.button {

  background-color: var(--secondary-color);

  color: var(--primary-color);

}



.woocommerce-pagination--without-numbers a.woocommerce-button.woocommerce-Button--previous.woocommerce-Button.woocommerce-Button--previous.button {

  background-color: var(--secondary-color);

  color: var(--primary-color);

}



.woocommerce table.my_account_orders .button {

  background-color: var(--secondary-color);

  color: var(--primary-color);

  margin: 10px 10px 10px 0;

}



.page-template-add_pet .product-form-container button {

  background-color: #3b1f4e;

  border: 1px solid #3b1f4e;

}



.home .banner-form .input-group {

  /* height: 45px; */

  height: auto;

}



/* Default Grid View (3 Columns) */

.grid-view {

  display: block;

  flex-wrap: wrap;

  gap: 20px;

}



.grid-view .products {

  /* width: calc(33.33% - 20px); */

  /* 3 columns */

  transition: all 0.3s ease;
  padding-bottom: 30px;

}



/* List View (Full Width & Stretched) */

.list-view {

  display: block;

}



.list-view .products {

  width: 100%;

  /* Full width */

  display: flex;

  align-items: center;

  gap: 20px;

  padding: 20px;

  border-radius: 15px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}



/* Adjust Image & Content for List View */

.list-view .products img {

  width: 150px;

  /* Adjust image size */

  height: auto;

  border-radius: 10px;

}



.list-view .product .inner-service-content {

  flex-grow: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.list-view .service-content-heading {

  font-size: 20px;

  font-weight: bold;

}



.list-view .service-content-price {

  font-size: 18px;

  color: #6a1b9a;

  font-weight: bold;

}



.list-view .service-connect-box {

  width: 100%;

}



/* ==========================================
   RESPONSIVE SHOP PAGE IMPROVEMENTS
   ========================================== */

/* Shop Controls Container */
.shop-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* Mobile Filter Toggle Button */
.mobile-filter-toggle {
  display: none;
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-family: var(--jost-font);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mobile-filter-toggle:hover {
  background: var(--color-orange);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.mobile-filter-toggle i {
  margin-right: 8px;
}

/* Shop Sidebar Wrapper */
.shop-sidebar-wrapper {
  position: relative;
}

.shop-sidebar {
  position: relative;
  z-index: 10;
}

/* Filter Close Button (hidden on desktop, visible on mobile) */
.filter-close-btn {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--primary-color);
  cursor: pointer;
  z-index: 10;
  padding: 5px;
  line-height: 1;
  transition: all 0.3s ease;
}

.filter-close-btn:hover {
  color: var(--color-orange);
  transform: rotate(90deg);
}

/* Product Cards - Flexible Sizing */
.service-connect-box {
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-view .service-connect-box {
  min-height: 380px;
}

/* Better responsive typography */
.service-connect-box h3 {
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.2;
}

.service-content-heading {
  max-width: 100%;
}

/* Improved spacing for inner content */
.inner-service-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



a.service_redirect_btn {

  background-color: #3b1f4e;

}



a#toggle-expertise-form {

  top: -50px;

  background-color: #3b1f4e;

  color: #ffff;

}



header.main-header .header-button {

  display: flex;

  align-items: center;

  justify-content: center;

}



.home .about-img img {

  /* height: 200px; */

  object-fit: cover;

}



.select2-container--default .select2-search--inline .select2-search__field::placeholder {

  font-weight: 400 !important;

  font-size: 15px;

  color: #2d3039;

}



.select2-container {

width: 100% !important; 

  /* Ensure it adapts to full width */

}



.header-ofcanvas-logo img {



  height: 75px;

}



header.main-header #menu-main-menu {

  gap: 15px;

}



.navbar-expand-lg .offcanvas .offcanvas-body {

  align-items: center;

}



header.main-header {

  padding: 6px 0;

}



.page-id-286 .select2-container .select2-selection__rendered {

  height: 40px;

}



/* .banner-sec ul.select2-selection__rendered:first-child {margin-left: 40px;} */

.home .select2-container .select2-selection--multiple {

  min-height: 40px;

  height: auto;

}



.page-id-272 .select2-container--default .select2-selection--multiple {

  /* width: 390px; */

}



.select2-container--default .select2-selection--multiple {

  /* height: 40px; */

  height: auto;

  min-height: 40px;

  overflow-y: auto;

}



.page-id-272 .select2-container .select2-search--inline .select2-search__field {

  text-overflow: ellipsis;

}



.select2-container .select2-search--inline .select2-search__field {



  margin-top: 0;

}



/* Modern Register Button Styles */
.switch-form-container {
  text-align: center;
  margin-top: 30px;
  padding: 25px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 15px;
  border: 2px dashed #dee2e6;
}

.switch-form-text {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.register-btn-modern {
  display: inline-block;
  padding: 14px 35px;
  background: linear-gradient(135deg, var(--blue-color) 0%, #5a67d8 100%);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  position: relative;
  overflow: hidden;
}

.register-btn-modern i {
  margin-right: 8px;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.register-btn-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, #5a67d8 0%, var(--blue-color) 100%);
}

.register-btn-modern:hover i {
  transform: scale(1.2);
}

.register-btn-modern:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
}

/* Old switch-form styles (kept for compatibility) */
.switch-form #show-register-form {
  color: var(--blue-color);
}



#register .user_role_form_group #reg_user_role {

  padding-left: 65px;

  border-radius: 5px;

  font-weight: 600;

  color: #0000008c;

  font-size: 114%;

}



#register .user_role_form_group .input-group-text {

  position: absolute;

  top: 10px;

  left: 0;

  z-index: 9;

}



#register .user_role_form_group {

  position: relative;

}



.woocommerce-message {

  border-top-color: var(--primary-color);

}



.woocommerce-message::before {

  color: var(--primary-color);

}



/*18-02-2025*/

/* Hide the default radio button */

.owner_radio_btn {

  display: none;

  /* Hide the default radio button */

}



/* Style for the custom radio container */

.custom_radio {

  position: relative;

  padding-left: 30px;

  /* Space for the custom radio */

  cursor: pointer;

  /* Change cursor to pointer for better UX */

  user-select: none;

  /* Prevent text selection */

}



/* Style for the label */

.custom_radio .form-check-label {

  cursor: pointer;

  /* Ensure the label is clickable */

}



/* Custom radio button appearance */

.custom_radio .form-check-label::before {

  content: '';

  position: absolute;

  left: 0;

  top: 46%;

  transform: translateY(-50%);

  width: 20px;

  /* Size of the custom radio */

  height: 20px;

  /* Size of the custom radio */

  border: 2px solid #fff;

  /* Border color */

  border-radius: 50%;

  /* Make it circular */

  background-color: white;

  /* Background color */

}



/* Change appearance when the radio button is checked */

.owner_radio_btn:checked+.form-check-label::before {

  background-color: #fff;

  /* Background color when checked */

  border-color: #fff;

  /* Border color when checked */

}



/* Checkmark appearance */

.owner_radio_btn:checked+.form-check-label::after {

  content: '✔';

  /* Checkmark character */

  position: absolute;

  left: 5px;

  /* Position of the checkmark */

  top: 46%;

  transform: translateY(-50%);

  color: #5d09a3;

  /* Color of the checkmark */

  font-size: 12px;

  /* Size of the checkmark */

  line-height: 20px;

  /* Center the checkmark vertically */

}





/*24-02-2025*/

#player {

  /* width: 640px; */

  height: 450px;

  margin-bottom: 20px;

  border-radius: 8px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



#controls {

  display: flex;

  gap: 10px;

}



body.single-product #playButton,

#pauseButton {

  padding: 10px;

  font-size: 24px;

  /* Increase font size for icons */

  color: var(--secondary-color);

  background-color: var(--primary-color);

  border: none;

  border-radius: 5px;

  cursor: pointer;

  transition: background-color 0.3s;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 50px;

  /* Fixed width for buttons */

  height: 50px;

  /* Fixed height for buttons */

}



body.single-product #playButton,

#pauseButton i {

  font-size: 32px;

}



/* button:hover {

  background-color: #0056b3;

} */



/* button:active {

  background-color: #004494;

} */



/* Hide the pause button initially */

#pauseButton {

  display: none;

}



body.single-product #review_form #respond #reply-title {

  display: none;

}



.woocommerce #reviews #comments h2 {

  font-size: 25px;

}



.main-header .dropdown select:focus-visible {

  outline: none;

}





.main-header .dropdown select {

  height: 50px;

  padding-left: 15px;

  border-radius: 9px;

  border: none;

  /* -webkit-appearance: none; */

  background: var(--light-blue-color);

  color: #fff;

  font-weight: 600;

  outline: none;

}



body.page-id-286 {

  overflow-x: hidden;

}



.page-id-286 .select2-container .select2-search--inline .select2-search__field {

  padding: 10px 0 5px 0;

}



.page-id-10 p.forgot-password-link {

  margin-top: 50px;

}



.page-id-10 p.forgot-password-link a {

  color: var(--blue-color);

}



/*26-02-2025*/

.gtranslate_wrapper::after {

  display: none;

}



.woocommerce-checkout .sustainability-section .wc-block-components-checkout-place-order-button span div.wc-block-components-checkout-place-order-button__text {

  font-weight: 700;

}



.woocommerce-checkout .sustainability-section .wc-block-components-checkbox__label a {

  color: var(--light-blue-color);

}



.woocommerce-checkout .sustainability-section .wc-block-components-checkout-place-order-button:hover {

  background-color: #FF9F7C;

  transition: 0.3s;

}



.woocommerce-checkout .sustainability-section .wc-block-checkout__actions_row a.wc-block-components-checkout-return-to-cart-button {

  color: var(--light-blue-color);

  font-weight: 700;

  /* display: none; */

}



.woocommerce-checkout .sustainability-section .wc-block-components-checkout-place-order-button {

  background-color: var(--light-blue-color);

  border-radius: 10px;

  color: var(--white-color);

}



.sustainability-section {

  margin: 50px 0;

}



.single-product #review_form #respond .form-submit input {

  background-color: var(--light-blue-color);

  color: var(--white-color);

}



.page-template-search .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {



  display: inline;

}



.page-template-search .select2-selection__clear {

  display: contents;

}



.page-template-search .select2-container .select2-search--inline {

  float: inline-start;

}



/* .woocommerce-pagination .page-numbers.current {background-color: var(--primary-color);} */

.woocommerce-pagination .page-numbers:hover {background-color: var(--primary-color);}

.woocommerce-pagination .page-numbers {

  font-weight: 600;

  margin: 10px;

  padding: 10px;

  background-color: var(--light-blue-color);

  color: var(--white-color);

  border-radius: 5px;

}



.woocommerce-pagination .next {

  font-weight: 600;

  margin: 10px;

  padding: 10px;

  background-color: var(--primary-color);

  color: var(--white-color);

  border-radius: 5px;

}

#booking-details .modal-dialog{

  max-width:50%;

}

.woof_container_inner{padding-bottom: 25px;}

.woof_container_inner_servicecategories{padding-bottom: 25px;}


.flatpickr-months .flatpickr-month{
  background: #8770ff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months{
  background: #8770ff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{
  background: #8770ff !important;
}

.flatpickr-weekdays, span.flatpickr-weekday{
  background: #8770ff !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{
  background: #8770ff !important;
  border-color: #8770ff !important;
}


.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg{
  fill: #5d09a3 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months{
  background: #8770ff !important;
}

.search_section_div{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  flex: 1;
}

.location_search,
.service_type{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 220px;
  position: relative;
}

.location_search .form-select,
.service_type .form-select {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 11px 38px 11px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  background-color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
  height: 47px;
  line-height: 1.4;
}

.location_search .form-select:hover,
.service_type .form-select:hover {
  border-color: #c7d2fe;
  background-color: #fafbfc;
}

.location_search .form-select:focus,
.service_type .form-select:focus {
  border-color: var(--blue-color);
  box-shadow: 0 0 0 3px rgba(93, 101, 248, 0.1);
  outline: none;
  background-color: #ffffff;
}

/* Select2 Modern Styling for Search Form */
.search-form-box .select2-container--default .select2-selection--multiple {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  min-height: 47px;
  height: auto;
  background-color: #ffffff !important;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.search-form-box .select2-container--default .select2-selection--multiple:not(:has(.select2-selection__choice)) {
  height: 47px;
}

.search-form-box .select2-container--default.select2-container--focus .select2-selection--multiple,
.search-form-box .select2-container--default .select2-selection--multiple:focus {
  border-color: var(--blue-color) !important;
  box-shadow: 0 0 0 3px rgba(93, 101, 248, 0.1) !important;
  outline: none;
}

.search-form-box .select2-container--default .select2-selection--multiple:hover {
  border-color: #c7d2fe !important;
  background-color: #fafbfc !important;
}

.search-form-box .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--blue-color) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500;
}

.search-form-box .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #ffffff !important;
  margin-right: 5px !important;
}

.search-form-box .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fee2e2 !important;
}

.search-form-box .select2-container--default .select2-search--inline .select2-search__field {
  font-size: 14px !important;
  font-weight: 500;
  color: #374151;
  margin: 0 !important;
  padding: 0 !important;
}

.search-form-box .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0 !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.search-form-box .select2-container--default .select2-selection--multiple .select2-search--inline {
  margin: 0 !important;
}

/*09-06-2025*/
.footer-widget-box.footer_social_links ul{
  display: flex;
  gap: 30px;
}

/*19-06-2025*/
.loader-wrap{
    text-align: center;
    margin: 50px 0px;
}

.loader-wrap img{
  height: 50px;
  text-align: center;
}

.pagination-box span.page-numbers.current {
    font-size: 20px;
    font-weight: 500;
    background: #8770ff;
    color: #fff;
    padding: 9px 17px;
    position: relative;
    border-radius: 50%;
    margin-right: 10px;
}

.pagination-box a.page-numbers {
    font-size: 20px;
    font-weight: 500;
    margin-right: 5px;
}

body.woocommerce-cart div.wc-block-components-sidebar-layout div.wc-block-cart__submit-container {
    background: #8770ff;
    color: #fff;
    border-radius: 10px;
    margin-top: 30px;
    font-weight: 500;
}

body.woocommerce-cart div.wc-block-components-sidebar-layout div.wc-block-cart__submit-container:hover {
    background: #c3b7ff;
    color: #000;
    font-weight: 500;
}

.header-icon{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: 10px;
}

/* ============================================
   MY PETS - BEAUTIFUL CARD LAYOUT
   ============================================ */

/* Pet Cards Grid Container */
.pets-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-top: 30px;
  padding: 0;
}

/* Individual Pet Card */
.pet-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0;
}

.pet-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Pet Card Image */
.pet-card-image-wrapper {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
}

.pet-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.3s ease;
}

.pet-card:hover .pet-card-image {
  transform: scale(1.1);
}

/* Pet Card Content */
.pet-card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pet-card-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0 0 15px 0;
  font-family: var(--jua-font);
}

.pet-card-meta {
  flex: 1;
  margin-bottom: 20px;
}

.pet-card-meta p {
  margin: 10px 0;
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

.pet-card-meta strong {
  color: var(--heading-color);
  font-weight: 600;
}

/* Pet Card Actions */
.pet-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pet-card-actions .action_btn {
  flex: 1;
  min-width: 80px;
  text-align: center;
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.pet-btn-view {
  background: linear-gradient(135deg, var(--blue-color) 0%, #5a67d8 100%);
  color: #fff !important;
}

.pet-btn-view:hover {
  background: linear-gradient(135deg, #5a67d8 0%, var(--blue-color) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.pet-btn-edit {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: #fff !important;
}

.pet-btn-edit:hover {
  background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.pet-btn-delete {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: #fff !important;
}

.pet-btn-delete:hover {
  background: linear-gradient(135deg, #c82333 0%, #dc3545 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* My Pets Header */
.my-pets-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 15px;
}

.my-pets-heading {
  font-size: 32px;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0;
  font-family: var(--jua-font);
}

.add-pet-button {
  background-color: #7c4dff;
  color: #fff !important;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(124, 77, 255, 0.3);
  background: linear-gradient(135deg, var(--light-blue-color) 0%, var(--blue-color) 100%);
  border: none;
  cursor: pointer;
  text-align: center;
}

.add-pet-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, #5a67d8 0%, var(--blue-color) 100%);
  color: #fff !important;
}

/* ============================================
   MY ACCOUNT - MOBILE RESPONSIVE
   ============================================ */

/* Navigation styles moved to line 7906 for consolidated styling */

/* Account Content */
.woocommerce-MyAccount-content {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Account Tables */
.woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.woocommerce-MyAccount-content table thead {
  background: linear-gradient(135deg, var(--blue-color) 0%, #5a67d8 100%);
  color: #fff;
}

.woocommerce-MyAccount-content table th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.woocommerce-MyAccount-content table td {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  color: #555;
}

.woocommerce-MyAccount-content table tr:last-child td {
  border-bottom: none;
}

/* Remove all animations from orders table */
.woocommerce-orders-table,
.woocommerce-orders-table *,
.my_account_orders,
.my_account_orders *,
.account-orders-table,
.account-orders-table *,
.shop_table_responsive,
.shop_table_responsive * {
  transition: none !important;
  animation: none !important;
}

.woocommerce-orders-table tr,
.my_account_orders tr,
.account-orders-table tr,
.shop_table_responsive tr {
  background: transparent !important;
}

.woocommerce-orders-table tr:hover,
.my_account_orders tr:hover,
.account-orders-table tr:hover,
.shop_table_responsive tr:hover {
  background: transparent !important;
}

/* ============================================
   BOOKINGS PAGE - MINIMAL & BEAUTIFUL
   ============================================ */

/* Bookings Table Styling */
.my_account_orders.shop_table {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: none;
}

.my_account_orders thead {
  background: transparent;
  border-bottom: 2px solid #f0f0f0;
}

.my_account_orders thead th {
  padding: 16px 15px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
}

.my_account_orders tbody tr.booking-row {
  border-bottom: 1px solid #f0f0f0;
}

.my_account_orders tbody tr.booking-row:last-child {
  border-bottom: none;
}

.my_account_orders tbody td {
  padding: 18px 15px;
  vertical-align: middle;
  color: #555;
  font-size: 14px;
}

/* Booking Dates Cell */
.booking-dates-cell {
  line-height: 1.8;
}

.booking-dates-cell span {
  background-color: #e7f3ff !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  display: inline-block !important;
  margin: 3px 2px !important;
  font-weight: 500;
  color: #0066cc;
}

/* Status Cell */
.booking-status-cell .order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Total Cell */
.booking-total-cell {
  font-weight: 600;
  color: #2c5f2d;
  font-size: 15px;
}

/* Actions Cell */
.booking-actions-cell {
  text-align: center;
}

.booking-actions-cell .view-booking {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue-color) 0%, #5a67d8 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.booking-actions-cell .view-booking:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

/* Bookings Header */
.woocommerce-MyAccount-content h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 25px;
  font-family: var(--jua-font);
}

/* Empty State */
.woocommerce-MyAccount-content > p {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 16px;
}

/* ============================================
   ORDERS PAGE - SAME STYLING AS BOOKINGS
   ============================================ */

/* Orders Table Styling - Match Bookings Page */
.woocommerce-orders-table.account-orders-table,
.woocommerce-MyAccount-orders.account-orders-table {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: none;
}

.woocommerce-orders-table thead,
.account-orders-table thead {
  background: transparent;
  border-bottom: 2px solid #f0f0f0;
}

.woocommerce-orders-table thead th,
.account-orders-table thead th {
  padding: 16px 15px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
}

.woocommerce-orders-table tbody tr,
.account-orders-table tbody tr {
  border-bottom: 1px solid #f0f0f0;
}

.woocommerce-orders-table tbody tr:last-child,
.account-orders-table tbody tr:last-child {
  border-bottom: none;
}

.woocommerce-orders-table tbody td,
.woocommerce-orders-table tbody th,
.account-orders-table tbody td,
.account-orders-table tbody th {
  padding: 18px 15px;
  vertical-align: middle;
  color: #555;
  font-size: 14px;
  border: none;
}

/* Booking Dates in Orders Table */
.woocommerce-orders-table .order-booking-dates-wrapper,
.account-orders-table .order-booking-dates-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  line-height: 1.8;
}

.order-booking-date-badge {
  background-color: #e7f3ff !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  display: inline-block !important;
  font-weight: 500 !important;
  color: #0066cc !important;
  white-space: nowrap;
  margin: 3px 2px !important;
}

.no-booking-dates {
  color: #999;
  font-style: italic;
  font-size: 14px;
}

/* Booking Dates Cell */
.woocommerce-orders-table__cell-order-booking-dates {
  min-width: 150px;
  line-height: 1.8;
}

/* Orders Table Action Buttons */
.woocommerce-orders-table .button,
.account-orders-table .button {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue-color) 0%, #5a67d8 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
  text-decoration: none;
  display: inline-block;
}

.woocommerce-orders-table .button:hover,
.account-orders-table .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  color: #fff;
}

/* Responsive Design - Tablets */
@media (max-width: 992px) {
  .pets-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }

  .pet-card-image-wrapper {
    height: 220px;
  }

  .pet-card-title {
    font-size: 22px;
  }

  .woocommerce-MyAccount-content {
    padding: 20px;
  }

  /* Stack navigation and content on tablets */
  .woocommerce .woocommerce-MyAccount-navigation,
  .woocommerce .woocommerce-MyAccount-content {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
  .pets-grid-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pet-card {
    max-width: 100%;
  }

  .pet-card-image-wrapper {
    height: 250px;
  }

  .pet-card-actions {
    flex-direction: column;
  }

  .pet-card-actions .action_btn {
    width: 100%;
    min-width: 100%;
  }

  .my-pets-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .my-pets-heading {
    font-size: 28px;
  }

  .add-pet-button {
    width: 100%;
    justify-content: center;
  }

  /* Mobile-friendly navigation */
  .woocommerce-MyAccount-navigation {
    margin-bottom: 20px;
  }

  .woocommerce-MyAccount-navigation ul {
    gap: 8px;
  }

  .woocommerce-MyAccount-navigation a {
    padding: 12px 15px;
    font-size: 14px;
  }

  /* Mobile-friendly content */
  .woocommerce-MyAccount-content {
    padding: 15px;
    border-radius: 10px;
  }

  /* Bookings Mobile Header */
  .woocommerce-MyAccount-content h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  /* Responsive Tables - Stack on Mobile */
  .woocommerce-MyAccount-content table,
  .woocommerce-MyAccount-content table thead,
  .woocommerce-MyAccount-content table tbody,
  .woocommerce-MyAccount-content table th,
  .woocommerce-MyAccount-content table td,
  .woocommerce-MyAccount-content table tr {
    display: block;
  }

  .woocommerce-MyAccount-content table thead {
    display: none;
  }

  .woocommerce-MyAccount-content table tr {
    margin-bottom: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .woocommerce-MyAccount-content table td {
    padding: 8px 0;
    border: none;
    text-align: left;
    position: relative;
    padding-left: 50%;
    min-height: 40px;
    overflow: visible;
  }

  .woocommerce-MyAccount-content table td:before {
    content: attr(data-title);
    position: absolute;
    left: 0;
    width: 45%;
    padding-right: 10px;
    white-space: normal;
    word-wrap: break-word;
    font-weight: 600;
    color: var(--heading-color);
  }

  /* Fix action buttons overflow in mobile tables */
  .woocommerce-MyAccount-content table td.woocommerce-orders-table__cell-order-actions,
  .woocommerce-MyAccount-content table .order-actions,
  .woocommerce-MyAccount-content table td.booking-actions-cell {
    padding-left: 0;
    padding-top: 35px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .woocommerce-MyAccount-content table td.woocommerce-orders-table__cell-order-actions:before,
  .woocommerce-MyAccount-content table .order-actions:before,
  .woocommerce-MyAccount-content table td.booking-actions-cell:before {
    position: static;
    display: block;
    width: 100%;
    margin-bottom: 8px;
  }

  .woocommerce-MyAccount-content table td.woocommerce-orders-table__cell-order-actions a,
  .woocommerce-MyAccount-content table td.woocommerce-orders-table__cell-order-actions .button,
  .woocommerce-MyAccount-content table .order-actions a,
  .woocommerce-MyAccount-content table .order-actions .button,
  .woocommerce-MyAccount-content table td.booking-actions-cell .view-booking {
    flex: 1 1 auto;
    min-width: 110px;
    max-width: 100%;
    white-space: nowrap;
    text-align: center;
    padding: 10px 12px;
    font-size: 13px;
    margin: 0 !important;
  }

  /* Bookings Mobile Card Styling */
  .my_account_orders.shop_table tbody tr.booking-row {
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 18px;
    background: #fff !important;
  }

  .my_account_orders.shop_table tbody td.booking-dates-cell span {
    font-size: 12px !important;
    padding: 5px 8px !important;
    margin: 2px 1px !important;
  }

  .my_account_orders.shop_table tbody td.booking-status-cell .order-status-badge {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* Orders Table - Booking Dates Mobile */
  .woocommerce-orders-table .order-booking-dates-wrapper,
  .account-orders-table .order-booking-dates-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .order-booking-date-badge {
    font-size: 12px;
    padding: 5px 8px;
  }

  .woocommerce-orders-table__cell-order-booking-dates {
    min-width: auto;
  }

  /* Orders Table Mobile Card Styling - Match Bookings */
  .woocommerce-orders-table.account-orders-table tbody tr,
  .woocommerce-MyAccount-orders.account-orders-table tbody tr {
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 18px;
    background: #fff !important;
  }

  .woocommerce-orders-table tbody .order-status-badge,
  .account-orders-table tbody .order-status-badge {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* Responsive Design - Small Mobile */
@media (max-width: 480px) {
  .pet-card-content {
    padding: 15px;
  }

  .pet-card-title {
    font-size: 20px;
  }

  .pet-card-meta p {
    font-size: 14px;
  }

  .pet-card-actions .action_btn {
    padding: 10px 12px;
    font-size: 13px;
  }

  .my-pets-heading {
    font-size: 24px;
  }

  .woocommerce-MyAccount-content table td {
    padding-left: 45%;
    font-size: 14px;
  }

  .woocommerce-MyAccount-content table td:before {
    font-size: 13px;
  }

  /* Action buttons on extra small mobile */
  .woocommerce-MyAccount-content table td.woocommerce-orders-table__cell-order-actions a,
  .woocommerce-MyAccount-content table td.woocommerce-orders-table__cell-order-actions .button,
  .woocommerce-MyAccount-content table .order-actions a,
  .woocommerce-MyAccount-content table .order-actions .button {
    min-width: 100px;
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* Rating Stars Animation */
@keyframes starGlow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 193, 7, 0.3));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(255, 193, 7, 0.6));
    transform: scale(1.05);
  }
}

.product-rating.has-rating .stars i.fas {
  animation: starGlow 2s ease-in-out infinite;
  color: #ffc107;
}

.product-rating.has-rating .stars i.fas:nth-child(2) {
  animation-delay: 0.2s;
}

.product-rating.has-rating .stars i.fas:nth-child(3) {
  animation-delay: 0.4s;
}

.product-rating.has-rating .stars i.fas:nth-child(4) {
  animation-delay: 0.6s;
}

.product-rating.has-rating .stars i.fas:nth-child(5) {
  animation-delay: 0.8s;
}

.product-rating .stars i {
  transition: all 0.3s ease;
}

/* Desktop responsive for search form */
@media (min-width: 1025px) {
  .search-form-box {
    grid-template-columns: 1fr auto;
  }

  .search_section_div {
    flex-wrap: nowrap;
  }
}

@media (max-width: 1024px) {
  .search-form-box {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   Expertise & Certification Styles
   =================================== */

/* Expertise Header */
.expertise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

/* Expertise Detail Card */
.expertise-detail-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.expertise-detail-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Empty States */
.expertise-empty-state,
.certifications-empty-state {
    background: #f9f9f9;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

/* Certifications Grid */
.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

/* Individual Certification Card */
.certification-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    position: relative;
}

.certification-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Certificate Preview Area */
.certification-preview {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Certificate Card Content */
.certification-content {
    padding: 20px;
}

/* Delete Certification Button */
.delete-certification-btn {
    background: #d32f2f;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.delete-certification-btn:hover {
    background: #b71c1c;
    transform: translateY(-2px);
}

.delete-certification-btn:disabled {
    background: #999;
    cursor: not-allowed;
    transform: none;
}

/* Provider Info Widget (for product pages) */
.provider-info-widget h3 {
    color: white;
    margin: 0;
    font-family: var(--jua-font);
}

/* Provider Certifications Gallery */
.provider-certifications-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Certificate Thumbnail */
.certification-thumbnail {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    height: 80px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
}

.certification-thumbnail:hover {
    transform: scale(1.05);
}

/* Responsive Design - Tablet */
@media (max-width: 768px) {
    .expertise-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .certifications-grid {
        grid-template-columns: 1fr;
    }

    .provider-certifications-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive Design - Mobile */
@media (max-width: 480px) {
    .certification-card {
        border-radius: 15px;
    }

    .certification-preview {
        height: 150px;
    }

    .certification-content {
        padding: 15px;
    }

    .provider-certifications-gallery {
        grid-template-columns: 1fr;
    }

    .certification-card .action_btn {
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* Verified Provider Badge */
.verified-provider-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
    padding: 5px 12px;
    border-radius: 20px;
    color: white;
    font-weight: 600;
    font-size: 12px;
}

/* Certificate Image Hover Effects */
.certification-preview img {
    transition: transform 0.3s ease;
}

.certification-card:hover .certification-preview img {
    transform: scale(1.05);
}


/* ===================================
   Vertical Certificate Layout
   =================================== */

/* Override grid for vertical layout */
.certifications-grid.vertical-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Horizontal certificate card for vertical list */
.certification-card.horizontal {
    display: flex;
    align-items: center;
    padding: 15px;
    gap: 20px;
}

.certification-card.horizontal .certification-preview {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

/* Responsive adjustments for vertical layout */
@media (max-width: 768px) {
    .certification-card {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .certification-card .certification-preview {
        width: 100% !important;
        height: 150px !important;
    }

    .certification-card .certification-content {
        width: 100%;
    }

    .certification-card > div:last-child {
        width: 100%;
        justify-content: stretch;
    }

    .certification-card .action_btn {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .certification-card {
        padding: 12px;
        gap: 12px;
    }

    .certification-card .action_btn {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* Inline editing styles */
#expertise-edit {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Success notification animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Hide quantity selector in cart page (WooCommerce Blocks) */
.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
    display: none !important;
}

/* Hide quantity selector in classic cart */
.woocommerce-cart-form .product-quantity .quantity {
    display: none !important;
}

/* Hide quantity column header in classic cart */
.woocommerce-cart-form thead .product-quantity {
    display: none !important;
}

/* Ensure Pay button is always visible in My Account Orders */
.woocommerce-orders-table .woocommerce-button.pay,
.woocommerce-MyAccount-orders .button.pay,
.my_account_orders .button.pay {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: var(--primary-color, #391953) !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.woocommerce-orders-table .woocommerce-button.pay:hover,
.woocommerce-MyAccount-orders .button.pay:hover,
.my_account_orders .button.pay:hover {
    background-color: var(--light-blue-color, #8770FF) !important;
    transform: translateY(-2px);
}

/* Unified Account Page Button Styles - Match my-pets style */
/* Services, Bookings, Orders pages */
.woocommerce-MyAccount-content .action_btn,
.woocommerce-orders-table .action_btn,
.my_account_orders .action_btn,
#booking-list .action_btn,
.shop_table .action_btn {
    display: inline-block;
    padding: 10px 18px;
    background-color: #3b1f4e;
    color: #fff !important;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    margin: 2px;
}

.woocommerce-MyAccount-content .action_btn:hover,
.woocommerce-orders-table .action_btn:hover,
.my_account_orders .action_btn:hover,
#booking-list .action_btn:hover,
.shop_table .action_btn:hover {
    background-color: var(--light-blue-color, #8770FF);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(135, 112, 255, 0.3);
    color: #fff !important;
}

/* Add service button - match add pet button */
.add-service-button {
    background-color: #7c4dff;
    color: #fff !important;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(124, 77, 255, 0.3);
    background: linear-gradient(135deg, var(--light-blue-color) 0%, var(--blue-color) 100%);
    border: none;
}

.add-service-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    background: linear-gradient(135deg, #5a67d8 0%, var(--blue-color) 100%);
    color: #fff !important;
}

.add-service-button i {
    font-size: 18px;
}

/* Icon spacing for action buttons */
.woocommerce-MyAccount-content .action_btn i,
.woocommerce-orders-table .action_btn i,
.my_account_orders .action_btn i,
#booking-list .action_btn i,
.shop_table .action_btn i {
    margin-right: 6px;
    font-size: 14px;
}

/* Specific button types in orders page */
.woocommerce-orders-table .action_btn.pay,
.my_account_orders .action_btn.pay {
    background-color: #28a745;
}

.woocommerce-orders-table .action_btn.pay:hover,
.my_account_orders .action_btn.pay:hover {
    background-color: #218838;
}

.woocommerce-orders-table .action_btn.view,
.my_account_orders .action_btn.view {
    background-color: #3b1f4e;
}

.woocommerce-orders-table .action_btn.cancel,
.my_account_orders .action_btn.cancel {
    background-color: #dc3545;
}

.woocommerce-orders-table .action_btn.cancel:hover,
.my_account_orders .action_btn.cancel:hover {
    background-color: #c82333;
}

/* Services page table action buttons */
.woocommerce-MyAccount-content table .action_btn {
    background-color: #3b1f4e;
    margin: 0 4px 4px 0;
}

/* Button alignment in tables */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions,
.my_account_orders .order-actions,
#booking-list .booking-actions-cell {
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .woocommerce-MyAccount-content .action_btn,
    .woocommerce-orders-table .action_btn,
    .my_account_orders .action_btn,
    #booking-list .action_btn,
    .shop_table .action_btn {
        padding: 8px 14px;
        font-size: 13px;
        margin: 2px 0;
    }

    .add-service-button {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 15px;
    }

    .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions,
    .my_account_orders .order-actions,
    #booking-list .booking-actions-cell {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .woocommerce-MyAccount-content .action_btn,
    .woocommerce-orders-table .action_btn,
    .my_account_orders .action_btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* Unpaid Orders Notification Banner - Redesigned */
.unpaid-orders-notice {
    background: linear-gradient(135deg, #fff8e1 0%, #fff9c4 100%);
    border: 1px solid #ffd54f;
    border-left: 5px solid #ffa726;
    padding: 0;
    margin-bottom: 25px;
    border-radius: 12px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(255, 152, 0, 0.12);
    animation: slideInDown 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove WooCommerce default ::before checkmark */
.unpaid-orders-notice::before {
    display: none !important;
    content: none !important;
}

.unpaid-notice-icon {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.unpaid-notice-icon i {
    font-size: 28px;
    color: #fff;
    animation: pulse 2s ease-in-out infinite;
}

.unpaid-notice-body {
    flex: 1;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.unpaid-notice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.unpaid-notice-header strong {
    color: #e65100;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.unpaid-badge {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
    white-space: nowrap;
}

.unpaid-notice-text {
    color: #bf360c;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
    opacity: 0.9;
}

/* Slide in animation for notification */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icon pulse animation */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

/* Pay Button Minimal Animation - Pulse Glow Effect */
.woocommerce-orders-table .action_btn.pay,
.my_account_orders .action_btn.pay {
    position: relative;
    animation: payButtonPulse 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
}

@keyframes payButtonPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* When hovering, pause the animation */
.woocommerce-orders-table .action_btn.pay:hover,
.my_account_orders .action_btn.pay:hover {
    animation: none;
}

/* Orders Table Layout - Responsive Container Fit */
.woocommerce-MyAccount-content {
    overflow-x: auto;
    max-width: 100%;
}

.woocommerce-orders-table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    min-width: 850px;
}

/* Column Width Distribution */
.woocommerce-orders-table .woocommerce-orders-table__header-order-number,
.woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
    width: 80px;
}

.woocommerce-orders-table .woocommerce-orders-table__header-order-date,
.woocommerce-orders-table .woocommerce-orders-table__cell-order-date {
    width: 140px;
}

.woocommerce-orders-table .woocommerce-orders-table__header-order-booking-dates,
.woocommerce-orders-table .woocommerce-orders-table__cell-order-booking-dates {
    min-width: 150px;
}

.woocommerce-orders-table .woocommerce-orders-table__header-order-status,
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
    min-width: 200px;
}

.woocommerce-orders-table .woocommerce-orders-table__header-order-total,
.woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
    min-width: 150px;
}

.woocommerce-orders-table .woocommerce-orders-table__header-order-actions,
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
    width: 110px;
}

/* Stack action buttons vertically */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
    display: block;
    padding: 8px 6px !important;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .action_btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    margin: 0 0 4px 0;
    padding: 5px 8px;
    font-size: 11px;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .action_btn:last-child {
    margin-bottom: 0;
}

/* Booking dates badges - stacked vertically to save space */
.order-booking-dates-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.order-booking-date-badge {
    display: inline-block;
    background: #e0f2ff;
    color: #0073aa;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
}

/* Table header styling */
.woocommerce-orders-table thead th {
    background: linear-gradient(135deg, #5b6fd8 0%, #4a5bc4 100%);
    color: #fff;
    padding: 14px 12px;
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* Table body styling */
.woocommerce-orders-table tbody td,
.woocommerce-orders-table tbody th {
    padding: 16px 12px;
    vertical-align: top;
    border-bottom: 1px solid #e0e0e0;
}

.woocommerce-orders-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Ensure order number and dates don't wrap */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a,
.woocommerce-orders-table .woocommerce-orders-table__cell-order-date time {
    white-space: nowrap;
    display: block;
}

/* Make action buttons properly sized */
.woocommerce-orders-table .action_btn,
.my_account_orders .action_btn {
    padding: 5px 8px;
    font-size: 11px;
    margin: 0;
    display: inline-block;
    white-space: nowrap;
    min-width: auto;
}

.woocommerce-orders-table .action_btn i,
.my_account_orders .action_btn i {
    font-size: 10px;
    margin-right: 3px;
}

/* Responsive Design - Tablet and Below */
@media (max-width: 1024px) {
    .woocommerce-MyAccount-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-orders-table {
        min-width: 800px;
    }

    .woocommerce-orders-table .action_btn {
        padding: 5px 7px;
        font-size: 10px;
    }

    .woocommerce-orders-table .action_btn i {
        font-size: 9px;
        margin-right: 3px;
    }

    .woocommerce-orders-table thead th {
        padding: 12px 10px;
        font-size: 13px;
    }

    .woocommerce-orders-table tbody td,
    .woocommerce-orders-table tbody th {
        padding: 14px 10px;
    }

    .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
        padding: 8px 5px !important;
    }

    .woocommerce-orders-table .woocommerce-orders-table__header-order-actions,
    .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
        width: 160px;
    }
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
    /* Reset overflow for card layout */
    .woocommerce-MyAccount-content {
        overflow-x: visible;
    }

    /* Notification adjustments */
    .unpaid-orders-notice {
        flex-direction: row;
        margin-bottom: 20px;
    }

    .unpaid-notice-icon {
        width: 55px;
    }

    .unpaid-notice-icon i {
        font-size: 22px;
    }

    .unpaid-notice-body {
        padding: 14px 16px;
    }

    .unpaid-notice-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .unpaid-notice-header strong {
        font-size: 15px;
    }

    .unpaid-badge {
        font-size: 14px;
        padding: 5px 12px;
    }

    .unpaid-notice-text {
        font-size: 13px;
    }

    /* Convert table to card-based layout on mobile */
    .woocommerce-orders-table {
        border: 0;
        font-size: 13px;
        min-width: 0;
        width: 100%;
    }

    .woocommerce-orders-table thead {
        display: none; /* Hide table headers */
    }

    .woocommerce-orders-table tbody tr {
        display: block;
        margin-bottom: 20px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .woocommerce-orders-table tbody tr:hover {
        background-color: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .woocommerce-orders-table tbody td,
    .woocommerce-orders-table tbody th {
        display: flex;
        flex-direction: column;
        text-align: left;
        padding: 14px 18px;
        border-bottom: 1px solid #f0f0f0;
        width: 100% !important;
    }

    /* First cell (order number) styling */
    .woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-number {
        background: #f8f9fa;
        font-weight: 600;
        border-bottom: 2px solid #5b6fd8;
    }

    .woocommerce-orders-table tbody td:last-child,
    .woocommerce-orders-table tbody th:last-child {
        border-bottom: 0;
    }

    /* Show labels before each cell using data-title */
    .woocommerce-orders-table tbody td:before,
    .woocommerce-orders-table tbody th:before {
        content: attr(data-title);
        font-weight: 700;
        display: block;
        color: #5b6fd8;
        margin-bottom: 8px;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.5px;
        order: -1;
    }

    /* Actions column - style the label */
    .woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-actions:before {
        display: block;
        background: #f0f0f0;
        padding: 10px 0;
        margin: -14px -18px 14px -18px;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        order: -1;
    }

    /* Action buttons full width on mobile */
    .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
        padding: 14px 18px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .woocommerce-orders-table .action_btn {
        padding: 11px 14px;
        font-size: 13px;
        min-width: auto;
        width: 100%;
        margin: 0;
    }

    .woocommerce-orders-table .action_btn i {
        font-size: 12px;
        margin-right: 6px;
    }

    /* Booking dates badges mobile */
    .order-booking-dates-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 0;
    }

    .order-booking-date-badge {
        font-size: 11px;
        padding: 5px 10px;
        margin: 0;
        background: #e3f2fd;
        color: #1976d2;
        border-radius: 6px;
        font-weight: 500;
    }

    /* Content wrapper to ensure proper display */
    .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a,
    .woocommerce-orders-table .woocommerce-orders-table__cell-order-date time,
    .woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
        display: block;
        width: 100%;
    }

    /* Improve content readability */
    .woocommerce-orders-table tbody td,
    .woocommerce-orders-table tbody th {
        line-height: 1.6;
    }

    .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
        color: #2c3e50;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
    }

    .woocommerce-orders-table .woocommerce-orders-table__cell-order-date time {
        color: #333;
        font-weight: 500;
        font-size: 14px;
    }

    .woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
        font-weight: 600;
        color: #2c3e50;
        font-size: 14px;
    }
}

/* Responsive Design - Small Mobile */
@media (max-width: 480px) {
    .unpaid-orders-notice {
        flex-direction: column;
        text-align: center;
    }

    .unpaid-notice-icon {
        width: 100%;
        height: 50px;
    }

    .unpaid-notice-header {
        align-items: center;
        text-align: center;
    }

    .unpaid-notice-text {
        text-align: center;
        font-size: 12px;
    }

    /* Card layout refinements for very small screens */
    .woocommerce-orders-table tbody tr {
        margin-bottom: 15px;
        border-radius: 6px;
    }

    .woocommerce-orders-table tbody td,
    .woocommerce-orders-table tbody th {
        padding: 12px 15px;
        font-size: 13px;
    }

    .woocommerce-orders-table tbody td:before,
    .woocommerce-orders-table tbody th:before {
        font-size: 10px;
        margin-bottom: 6px;
    }

    .woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
        padding: 12px 15px;
    }

    .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
        padding: 12px 15px;
        gap: 6px;
    }

    .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions:before {
        margin: -12px -15px 12px -15px;
        padding: 8px 0;
        font-size: 11px;
    }

    .woocommerce-orders-table .action_btn {
        padding: 10px 12px;
        font-size: 13px;
    }

    .woocommerce-orders-table .action_btn i {
        font-size: 12px;
        margin-right: 5px;
    }

    .order-booking-date-badge {
        font-size: 10px;
        padding: 4px 8px;
    }

    .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
        font-size: 14px;
    }

    .woocommerce-orders-table .woocommerce-orders-table__cell-order-date time {
        font-size: 13px;
    }

    .woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
        font-size: 13px;
    }
}