/*===================== REUSABLE  CSS AREA START =====================*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Segoe UI:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
/* font-family: "Inter", sans-serif; */
/* font-family: "Poppins", sans-serif; */
/* font-family: "Roboto", sans-serif; */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
    font-family: "Segoe UI", sans-serif;
}
:root {
    /* color */
    --gradientColor: linear-gradient(270deg, #1292c8 0%, #52bd8c 100%);

    /* border-image-source: linear-gradient(270deg, #1292C8 0%, #52BD8C 100%); */

    --textBlue: #1191c8;
    --textGray: #686868;
    --textGrayOr: #656565;
    --textGrayDark: #5d5d5d;
    --textDark: #1e1e1e;

    /* font-size */
    --f14: 14px;
    --f16: 16px;
    --f18: 18px;
    --f20: 20px;
    --f24: 24px;
    --f32: 32px;
    --f40: 40px;
}
.modal {
    z-index: 999999999;
}
.txtGrdient {
    -webkit-background-clip: text;
    color: transparent;
    background-image: var(--gradientColor);
}
.input-group-append {
  display: flex;
}
.input-group-append .btn {
  position: relative;
  z-index: 2;
}
.input-group-append .btn:focus {
  z-index: 3;
}
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
  margin-left: -1px;
}
.input-group-append {
  margin-left: -1px;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #6e707e;
  text-align: center;
  white-space: nowrap;
  background-color: #eaecf4;
  border: 1px solid #d1d3e2;
  border-radius: 0.35rem;
}
.input-group-text input[type=radio],
.input-group-text input[type=checkbox] {
  margin-top: 0;
}

.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
  height: calc(1.5em + 1rem + 2px);
}

.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-append > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-right: 1.75rem;
}

.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn,
.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

a.body__arrow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 28px;
    position: absolute;
    top: 400px;
    left: 2.8%;
    z-index: 999;
    box-shadow: 0px 1.5px 3.75px 0px #1386601a;
    box-shadow: 0px 6.75px 6.75px 0px #13866017;
    /* box-shadow: 0px 15px 9px 0px #1386600D; */
    /* box-shadow: 0px 26.25px 10.5px 0px #13866003; */
    /* box-shadow: 0px 41.25px 11.25px 0px #13866000; */
}
ul,
ol {
    padding: 0;
    margin: 0;
    /* list-style: none; */
}

button,
input {
    border: none;
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 32px;
}
h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
    margin-bottom: 6px;
}

h6 {
    font-size: 16px;
    margin-bottom: 4px;
}
p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}
.mb {
    margin-bottom: 51px;
}
.btns {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn__gradient {
    border-radius: 8px;
    background-image: var(--gradientColor);
    box-shadow: -6px -6px 16px 0px #00000040 inset;
    box-shadow: 5px 5px 4px 0px #ffffff40 inset;
    color: #fff;
}
.btn__gradient:hover {
    color: #fff;
    box-shadow: -6px -6px 16px 0px #00000040 inset;
}
.border-gradient {
    position: relative;
    z-index: 1;
    background-image: var(--gradientColor);
}
.border-gradient:after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    z-index: -1;
    background: #fff;
}
.mb-0 {
    margin: 0;
}
img {
    width: 100%;
    height: auto;
    object-fit: fill;
}

main {
    overflow: hidden !important;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 1212px;
    margin: 0 auto;
}
/*===================== REUSABLE CSS AREA END =====================*/

/*===================== OFFCANVAS CSS AREA START =====================*/
.menu-close {
    font-size: 18px;
    color: #000;
    position: absolute;
    top: 20px;
    right: 18px;
    cursor: pointer;
    transition: 0.4s;
    border: 1px solid #fff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-close:hover {
    color: #000;
    background: #fff;
}

.offcanvas-area {
    position: fixed;
    left: -100%;
    height: 100%;
    width: 318px;
    z-index: 999999999999999999999999;
    padding-top: 70px;
    background: #ffffff;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    visibility: hidden;
    top: 0;
    overflow-y: scroll;
}
.offcanvas-area div#seachField {
    width: 92%;
}
.offcanvas-area.active {
    left: 0;
    visibility: visible;
}

.offcanvas-area .main-menu ul li a {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    /* color: #000; */
    display: block;
    font-weight: 600;
    -webkit-background-clip: text;

    color: transparent;
    background-image: var(--gradientColor);
    padding: 0px 24px 6px;
    position: relative;
    transition: 0.3s;
    padding: 16px 22px;
    border-bottom: 1px solid #80808059;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
}

.offcanvas-area .main-menu ul li:last-child a {
    border-bottom: none;
}

.aside_ul li a {
    position: relative;
}

.offcanvas-area .main-menu ul li:first-child a {
    border-top: 1px solid #fff;
}

.offcanvas-area .main-menu ul li a:hover,
.offcanvas-area .main-menu ul li a[aria-expanded="true"] {
    color: #d5d5d5;
}

.offcanvas-menu .main-menu ul {
    display: block;
    padding-left: 0;
    margin-bottom: 35px;
    list-style: none;
}

.offcanvas-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    z-index: 9999999;
}

.offcanvas-overlay.active {
    opacity: 0.4;
    visibility: visible;
}

.offcanvas-area {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.offcanvas-area::-webkit-scrollbar {
    display: none;
}
.offcanvas-menu {
    border-top: 2px solid #80808059;
}

img.header_icon2 {
    width: 20px;
    margin-right: 5px;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--textBlue);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border-bottom: 1px solid #80808059;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}

ul.toggle__menu li a {
    font-weight: 500 !important;
}

ul.toggle__menu {
    margin-bottom: 0px !important;
}

.accordion-button:focus {
    z-index: 3;
    border-color: #80808059;
    outline: 0;
    box-shadow: none !important;
    /* background: #fff !important; */
}

.accordion-button:not(.collapsed) {
    color: #000 !important;
    /* background-color: #fff !important; */
    background: linear-gradient(278.94deg, #e4ffe6 -4.61%, #e3f9ff 105.09%);
    box-shadow: none !important;
}

.accordion-button::after {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: 18px;
    transition: var(--bs-accordion-btn-icon-transition);
}

.accordion-button:not(.collapsed)::after {
    /* background-image: var(--bs-accordion-btn-icon) !important; */
    background: linear-gradient(278.94deg, #e4ffe6 -4.61%, #e3f9ff 105.09%);
    transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-body {
    padding: var(--bs-accordion-body-padding-y)
        var(--bs-accordion-body-padding-x);
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.header__bar a {
    -webkit-background-clip: text;
    color: transparent;
    background-image: var(--gradientColor);
    font-size: var(--f24);
    margin-left: 10px;
}
.header__area.active {
    z-index: 0;
}
/*===================== OFFCANVAS CSS AREA END =====================*/

/*===================== HEADER CSS AREA START =====================*/

.modal-header {
    border: none !important;
}

.login__title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 21px;
}

.login__title > img {
    width: 166px;
    margin-bottom: 21px;
}

.login__title span {
    display: block;
    font-size: 14px;
    color: var(--textBlue);
}

.modal-body form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-body form input {
    padding: 14px 48px;
    border: 1px solid var(--disabled, #a3a3a3);
    border-radius: 8px;
    font-size: 14px;
}

.modal-body form a {
    text-align: end;
    color: var(--textBlue) !important;
    font-size: 12px;
}

.modal-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none !important;
}
.register__input {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: start;
}

.register__input label {
    font-size: 14px;
}
.modal-header button {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 29px;
    height: 29px;
    border-radius: 5px;
    background: var(--gradientColor);
    box-shadow: -3.78px -3.78px 10.09px 0px #00000040 inset;
    box-shadow: 3.15px 3.15px 2.52px 0px #ffffff40 inset;
}

.modal-header button img {
    width: 9px;
}
.detailB {
    padding: 0px !important;
}
.modal-content {
    border-radius: 16px !important;
    border: none !important;
}
.detail-slide {
    padding: 32px !important;
}
.modal-footer button {
    width: 100%;
    height: 52px;
}
button.registers {
    border-radius: 8px;
    position: relative;
    background-image: var(--gradientColor);
    z-index: 2;
}

button.registers:after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    z-index: -1;
    background: #fff;
}
.modal-backdrop {
    z-index: 99999;
    background-color: #000;
}
.login-area,
.search__login {
    position: relative;
}
.search__login {
    display: inline-block;
}
.cart-count {
    position: absolute;
    top: -10px; 
    right: -10px; 
    background: var(--gradientColor);
    color: white;
    border-radius: 50%;
    padding: 5px 9px; 
    font-size: 10px; 
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}
.account-card {
    width: 159px;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 2px 8px 14px 0px #59595946;
    position: absolute;
    font-size: 15px;
    top: 100%;
    right: 0px;
    left:1%;
    background: #fff;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: 0s !important;
}
.shows {
    opacity: 1;
    visibility: visible;
}

.account-card ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
}

.account-card ul li a {
    color: #000000;
}

.welcome h6 {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: #fff;
}

.welcome {
    background: linear-gradient(298.19deg, #1292c8 18.28%, #52bd8c 83.92%);
    text-align: center;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
}

.header__wrap {
    padding: 13px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    width: 131px;  margin-bottom: 5px;
}

/* .header__wrap ul {
    display: block;
    padding-left: 0;
    margin-bottom: 35px;
    list-style: none;
} */

.header__wrap > ul {
    display: flex;
    align-items: end;
    gap: 3px;
    list-style: none;
}
.package-title p{
    color:var(--textBlue)
}
.header__wrap > ul li a {
    font-weight: 600;
    -webkit-background-clip: text;

    color: transparent;
    background-image: var(--gradientColor);
    padding: 0px 24px 6px;
    position: relative;
}

.header__wrap > ul li a:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 0%;
    height: 3px;
    background-image: var(--gradientColor);
    transition: all 0.2s ease-in-out;
}

.header__wrap > ul li a:hover:after,
.header__wrap > ul li a.active:after {
    width: 70%;
}

.welcome h6 {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: #fff;
}

.logo {
    width: 131px;
}

.header__wrap > ul li a:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 16px;
    width: 0%;
    height: 3px;
    background-image: var(--gradientColor);
    transition: all 0.2s ease-in-out;
}

.header__wrap > ul li a:hover:after {
    width: 70%;
}

.search__login {
    display: flex;
    align-items: center;
    gap: 3px;
}

div#seachField {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    position: relative;
    border-radius: 44px;
    background-image: var(--gradientColor);
    height: 34px;
    max-width: 344px;
    width: 100%;
}
div#seachField img {
    width: 24px;
}
div#seachField input,
div#seachField input::placeholder {
    font-size: 14px;
}

.search__area {
    width: 95%;
    margin: 0 auto 20px;
}

div#seachField:after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 44px;
    z-index: 0;
    background: #fff;
}

div#seachField * {
    z-index: 1;
}

div#seachField input,
div#seachField input::placeholder {
    font-weight: 500;
    color: var(--textBlue);
    width: 100%;
}
.verify {
    display: flex;
    gap: 48px;
    align-items: center;
    justify-content: center;
    margin-top: 27px;
    margin-bottom: 8px;
}
.get-in-touch{
    background: var(--gradientColor);
    background-position: center; background-repeat: no-repeat;
    padding: 10px;
}

.verify input {
    border-radius: 8px;
    border: 1px solid var(--main, #2691c9);
    width: 54px;
    height: 54px;
    padding: 10px !important;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
}

.modal-body form p {
    text-align: center;
    margin-bottom: 48px;
}

.modal-body form p a {
    font-size: 16px;
    margin-left: 14px;
}

.login__title a {
    color: var(--textBlue) !important;
}
a.login {
    font-weight: 600;
    color: var(--textBlue);
    position: relative;
    border-radius: 44px;
    background-image: var(--gradientColor);
    width: 100%;
    height: 34px;
    z-index: 2;
    padding: 10px;
    cursor: pointer;
}
a.login:hover {
    color: #fff;

    background-image: var(--gradientColor);
}
a.login:hover:after {
    display: none;
}
a.login:after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 44px;
    z-index: -1;
    background: #fff;
}

.most__search {
    max-width: 344px;
    width: 100%;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 2px 8px 14px 0px #59595946;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 9999 !important;
    display: none;
}
.screen__overlay {
    position: fixed;
    inset: 0px;
    background: transparent;
    z-index: 99;
    display: none;
}
.overlyActive {
    display: block;
}
.header__area {
    position: relative;
    z-index: 999;
}
.searchActive {
    display: block;
}
.search__items {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.search__items button {
    font-size: 11px;
    border-radius: 8px;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background-image: var(--gradientColor);
    color: var(--textGray);
}

.search__items button img {
    width: 10px !important;
}

.search__items button:after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    z-index: -1;
    background: #fff;
}
.header__area.scroll-header {
    position: fixed !important;
    background: #fff !important;
    -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    right: 0px;
    top: 0px;
    left: 0px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    box-shadow: 2px 19px 42px 0px #5b9cb91a;
}

#searchID {
    position: relative;
    transition: all 0.5s ease-in-out;
    background-color: white;
    color: #000000;
}

.slide-up-fade-out {
    animation: slideUpFadeOut 0.5s forwards;
}

.section-sm ul{
    list-style: none;
}

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

.slide-down-fade-in {
    animation: slideDownFadeIn 0.5s forwards;
}

@keyframes slideDownFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/*===================== HEADER CSS AREA END =====================*/
.company__contact {
    position: fixed;
    top: 70%;
    right: 0px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 13px 14px;
    background: #ffff;
    border-radius: 8px 0px 0px 8px;
    z-index: 999;
    box-shadow: -1px 0px 3px 0px #3838381a;
    box-shadow: -5px 0px 5px 0px #38383817;
    box-shadow: -11px 0px 7px 0px #3838380d;
    /* box-shadow: -20px 0px 8px 0px #38383803; */
    /* box-shadow: -32px 0px 9px 0px #38383800; */
}
/*===================== HERO CSS AREA START =====================*/
.index__hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    position: relative;
    border-radius: 0px !important;
    margin-bottom: 22px;
    height: 377px;
    margin: -5px;
}
.about__details{
    background-color: #e3fcf4;
}
.index__hero .carousel-item img{
    height: 377px;
  }
.doorstep__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 10px;
    box-shadow: 1px 1px 5px 1px antiquewhite;
    background: linear-gradient(278.94deg, #e4ffe6 -4.61%, #e3f9ff 105.09%);
    padding: 4px 4px 5px 4px;
}

.doorstep__card__title {
 
}
.image-bottom-section{
    /* display: flex;
    align-items: center;
    gap: 16px; */
}
.about-us-title{
    background: linear-gradient(#1292C8, #52BD8C);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    color: #1292c7;
    margin-bottom: 20px;
}
.vision-titile{
    /* background: linear-gradient(#1292C8, #52BD8C);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; */
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}
.image-bottom-section h6{
    color: #1191C8;
}
.doorstep__card__title img {
    width: 100%;
    height: 217px;
    border-radius: 10px;
    object-fit: fill;
}
h2,h3,h4  {
    color: #0f91c8;
}
.doorstep__card__title h5 {
    color: #0f91c8;
}
.doorstep__card p {
    color: black;
}

.doorstep__card button {
    width: 100%;
    height: 36px;
    margin: 0 auto;
}

.l-title {
    font-family: inherit !important;
    font-weight: 600;
}
.l-title  h2 {
    color: #0f91c8;
}
.l-title  h4 {
    color: #0f91c8;
}
.title__a {
    display: flex;
    align-items: center;
    gap: 12px;
}
img.khidmatii-img {
    position: absolute;
    top: 288px;
    width: 10%;
    z-index: -2;
}
section {
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.hero__contact {
    background-position: bottom;
    margin-bottom: 13px;
}

.hero__area {
    padding: 55px 0px 70px;
}

.contact__hero__content {
    text-align: center;
}

.contact__hero__content h4 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--textBlue);
    padding: 8px;
    display: inline-block;
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(10px); */
    font-family: "Segoe UI", sans-serif;
}
/*===================== HERO CSS AREA END =====================*/

/*===================== Happy-custmer CSS AREA Start =====================*/
.happycustomer__area {
    background: linear-gradient(278.94deg, #e4ffe6 -4.61%, #e3f9ff 105.09%);
    position: relative;
}

img.happycustomer-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 632px;
    z-index: 0;
}

.happycustomer__wrap {
    position: relative;
}

.happy__customer__left img:last-child {
    width: 162px;
    position: absolute;
    left: -50px;
    bottom: 158px;
}

.happy__customer__left {
    height: 100%;
    display: flex;
    align-items: center;
}
.mac__stor {
    display: flex;
    flex-direction: column;
    gap: 35px;
    position: absolute;
    top: 120px;
    left: 38%;
}

.mac__stor img {
    width: 140px;
}
/*===================== Happy-custmer CSS AREA END =====================*/

/*===================== Professional CSS AREA Start =====================*/
.professional__wrap {
    max-width: 750px;
    margin: 0 auto;
}

.premium__list ul {
    display: flex;
    flex-direction: column;
    gap: 6.45px;
    margin-top: 7px;
    margin-bottom: 56px;
}

.premium__list ul li {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.premium__list li span:first-child {
    flex-grow: 1;
    text-align: left;
}

.premium__list li span:last-child {
    text-align: right;
}


.premium__list ul li img {
    width: 18px;
}

.premium__list {
  margin: 10px 62px 0px;
  padding-top: 11px;
  border-top: 1.72px solid #1191C8;
}
.professional__card {
    border-radius: 37px;
    overflow: hidden;
    box-shadow: 0px 20.61px 71.29px 0px #0000001a;
    position: relative;
    z-index: 1;
    background-color: #fff;
    padding: 6px;
}
.professional__card1 {
    background-image: var(--gradientColor);
}
.professional__card__top {
    overflow: hidden;
    color: #1191c8;
    background: var(--blue-spft, #e5f7ff);
    padding: 40px 62px 20px;
    position: relative;
    z-index: 0;
    border-top-left-radius: 33px;
    border-top-right-radius: 33px;
}

.professional__card__top h2 {
    font-size: var(--f32);
}

.professional__card__top p {
    font-size: 27px;
}

.professional__card__top p span {
    margin-left: 9px;
    font-size: 12px;
}
.footer__card i {
    font-weight: 900;
    color: #1292c8 !important;
}

.professional__card button {
    width: 79%;
    height: 50px;
    margin: 0 auto 30px;
    border-radius: 8px;
}

.professional__card:after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 31px;
    z-index: -1;
    background: #fff;
}

.professional__card__top img {
    position: absolute;
    top: 13px;
    width: 91px;
    right: 0px;
}
.professional__card__membership img {
    position: absolute;
    top: 13px;
    width: 91px;
    right: 0px;
}
.professional__card__membership p {
    font-size: 1rem;
}
.professional__card__membership h3 {
    font-size: 2rem;
    color: #0f91c8;
}
.professional__btn {
    margin-top: 60px;
    margin-bottom: 55px;
    align-items: center;
    justify-content: center;
    gap: 53px;
}

.professional__btn a {
    width: 152px;
    height: 48px;
    border-radius: 8px;
}
.change-membership {
    margin-bottom: 48px !important;
}
.choose__plan .container > p {
    font-size: 10px;
    max-width: 864px;
    margin: 0 auto;
}

.professional__btn1 a:nth-child(2) {
    position: relative;
    background-image: var(--gradientColor);
    z-index: 1;
    color: #000;
}

.professional__btn1 a:nth-child(2):after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    z-index: -1;
    background: #fff;
}
.professional__btn a:first-child {
    color: #000;
    border: 1px solid var(--bwq, #686868);
}

.memberships__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.membersip__single__card {
    position: relative;
    border-radius: 8px;
    color:  var(--textBlue);
    background-image: var(--gradientColor);
    z-index: 2;
    padding: 10px;
    font-size: 14px;
}
.membersip__single__card li {
    display: flex;
    justify-content: space-between;
}

.membersip__single__card li span:first-child {
    flex-grow: 1;
    text-align: left;
}

.membersip__single__card li span:last-child {
    text-align: right;
}


.membersip__single__card:after {
    content: "";
    position: absolute;
    top: 3px;
    right: 1px;
    left: 1px;
    bottom: 1px;
    border-radius: 7px;
    z-index: -1;
    background: #fff;
}

.membersip__single__card > span {
    border-radius: 0px 23px 23px 0px;
    background-image: var(--gradientColor);
    color: #fff;
    padding: 6px 23px 6px 10px;
    margin-left: -10px;
    margin-top: 4px;
    display: inline-block;
}

.membersip__single__card > a {
    color: #000;
    font-weight: 600;
    padding: 12px 8px 12px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--stroke, #e0e0e0);
}

.membersip__card p {
    margin-bottom: 12px;
}
.choose__plan {
    margin-bottom: 70px;
}
.choose__plan .booking__detail h5{
    color: #0f91c8;
}
.checkout__title .choose__plan {
    margin-bottom: 0px !important;
}
.membersip__single__card ul {
    list-style: disc;
}

.membersip__single__card a img {
    width: 9px;
}

.membersip__single__card p {
    display: flex;
    align-items: center;
}

.membersip__single__card p img {
    width: auto;
    margin-right: 8px;
}

.membersip__single__card a:first-child,
.membersip__single__card a:last-child,
.membersip__single__card a:nth-child(2) {
    border: none;
}

.memberships__cards > a {
    font-weight: 600;
    height: 48px;
    border: 1px solid var(--RED, #e13a43);
    color: var(--RED, #e13a43);
    border-radius: 8px;
}
.membersip__table table {
    width: 100%;
}
.membersip__table table tbody tr {
    border-left: none !important;
    border-right: none !important;
    border: 1px solid var(--stroke, #e0e0e0);
}

.membersip__table table thead tr th,
.membersip__table table tbody tr td {
    padding: 8px 0px;
    font-size: 14px;
}

.membersip__table table thead tr th {
    font-weight: 600;
}

.customize__title {
    border-bottom: 1px solid var(--stroke, #e0e0e0);
    padding-bottom: 9px;
    margin-bottom: 24px;
}

.select__plan {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.select__plan__card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.plan__single__card {
    padding: 16px 32px;
    border: 1px solid var(--stroke, #e0e0e0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    cursor: pointer;
}
.plan__single__card * {
    cursor: pointer;
}
.select__service__single {
    background-image: var(--gradientColor);
    position: relative;
    z-index: 2;
    color: #000;
    border-radius: 8px;
    cursor: pointer;
}
.select__service__single:after {
    content: "";
    background-color: #fff;
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 7px;
}
.selectAc:after {
    background-image: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
}
.select__service__card {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

img.service-shap {
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 0px;
    width: 50%;
    display: none;
    display: none;
}
.selectAc .service-shap {
    display: block !important;
}
img.s-icon1 {
    width: auto;
    position: relative;
    z-index: 1;
}

.select__service__single {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 248px;
    height: 92px;
}

.plancardActive {
    background-image: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
    position: relative;
    z-index: 2;
    color: #1191c8;
    border-radius: 8px;
}
.plancardActive:after {
    content: "";
    background-image: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: 7px;
}

.customize_radio {
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid var(--bwq, #686868);
    border-radius: 50%;
}

.customize_radio span {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(270deg, #1292c8 0%, #52bd8c 100%) !important;
    transform: scale(1.3) !important;
    position: absolute;
    inset: 0px;
    display: none;
}
.customize_radio span img {
    width: 8px;
}
.customize_radio input {
    position: absolute;
    inset: 0px;
    opacity: 0;
}
.cSpan {
    display: none;
}
.plancardActive span {
    display: flex !important;
}
.price__cart {
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
    text-align: center;
    padding: 16px 0px;
    margin-bottom: 16px;
}

.price__cart,
.plan__table {
    max-width: 312px;
    margin-left: auto;
    border-radius: 8px;
}
.plan__table > a {
    width: 153px;
    height: 48px;
    margin: 0 auto;
}
.plan__table {
    border: 1px solid var(--stroke, #e0e0e0);
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.plan__table ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plan__table ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.plan__table ul li:first-child span:first-child {
    font-weight: 600;
}

.plan__table h5 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cancel_modal {
    max-width: 481px !important;
}

.membership__content {
    text-align: center;
    margin-bottom: 84px;
}

.membership__sure {
    display: flex;
    margin-bottom: 60px;
}

.membership__sure button:last-child {
    background-image: var(--gradientColor);
    position: relative;
    z-index: 2;
    border-radius: 8px;
}

.membership__sure button:last-child:after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 6px;
    z-index: -1;
    background: #fff;
}
.membership__sure button:last-child span {
    background-image: var(--gradientColor);
    -webkit-background-clip: text;
    color: transparent;
}
/*===================== Professional CSS AREA END =====================*/

/*===================== Guarante CSS AREA Start =====================*/
section.guarante__area.mb {
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
}

.guarante__content,
.platform__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.guarante__content h2{
    color: #1191C8;
}
.guarante__content .happiness-experince{
    color: #1191C8;
    font-size: larger;
}
.gurante__wrap,
.platform__wrap {
    max-width: 950px;
    margin: 0 auto;
    padding: 12px 0px;
}
/*===================== Guarante CSS AREA END =====================*/

/*===================== Platform CSS AREA Start =====================*/
.platform__area {
    background: linear-gradient(278.94deg, #e4ffe6 -4.61%, #e3f9ff 105.09%);
}
.platform__wrap {
    padding: 0px;
}
.platform__content {
    max-width: 100%;
}
.platform__content h2{
    color: #1191c8;
}

.platform__content p,
.platform__content span {
    font-size: 20px;
}

.platform__content p {
    margin-bottom: 12px;
}
/*===================== Platform CSS AREA END =====================*/

/*===================== Choose-membership CSS AREA Start =====================*/
.checkout__title.category__title.booking__title.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout__title.category__title.booking__title.title > a {
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
    border-radius: 8px;
    width: 102px;
    height: 43px;
    font-size: 20px;
    gap: 6px;
    color: #1191c8;
}

.checkout__title.category__title.booking__title.title > a img {
    width: 20px;
}
.choose__plan {
    display: flex;
    align-items: center;
    gap: 12px;
}

.choose__plan h5 {
    margin-bottom: 0px;
}
/*===================== Choose-membership CSS AREA END =====================*/

/*===================== CONTACT-FORM CSS AREA START =====================*/

.title {
    text-align: center;
    padding: 20px 0px 20px 0px;
    font-family: inherit !important;
    /* font-weight: 600; */
    font-size: var(--f32);
    color: #1891c7;
}
.package-title h2{
    text-align: center;

    font-family: inherit !important;
    /* font-weight: 600; */
    font-size: var(--f32);
    color: #1891c7;
}
.package-title {
    text-align: center;
    padding: 20px 0px 20px 0px;
}
.title h3 {
    font-size: var(--f32);
    font-weight: 400;
}

.contact__form__wrap {
    max-width: 518px;
    width: 100%;
    margin: 0 auto;
    border-radius: 8px;
    padding: 8px 34px 22px;
    box-shadow: 0px 4px 10px 0px #bababab0;
    box-shadow: 13px -5px 17px 0px #bababab0;
   
}
.contact__form-title, .contact__detail-title{
    text-align: center;
    padding: 10px 0px 20px 1px;
color: #1692c8;
}


section.contact__form {
    margin-bottom: 20px;
}

.input__field {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input__field * {
    font-size: var(--f14);
}

.inputL {
    border-radius: 8px;
    padding: 13px 15px;
    background-image: var(--gradientColor);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}
.input__field input,
.input__field textarea {
    color: var(--textGray);
    position: relative;
    z-index: 9;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;

    display: block;
}

.inputL:after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    z-index: 1;
    background: #fff;
}

form > button {
    width: 154px;
    height: 44px;
    margin: 0 auto;
    display: block;
}

.nice-select {
    border: none;
    color: #0f91c8;
    border-radius: 0px !important;
    border-bottom: 1px solid var(--thmColor) !important;
}
span.current {
    font-size: 16px;
}

span.current {
    font-size: 14px;
}

.nice-select .list {
    width: 100%;
    border-radius: 0px;
}

ul.list .option {
    background: #1ca17d1a;
    font-weight: 500 !important;
    font-size: 16px !important;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background: #1ca17d33;
}

.hero__single__form__select {
    position: relative;
    z-index: 9;
    border-right: 1px solid var(--stroke, #e0e0e0);
    margin-right: 15px;
    height: 32px;
    display: flex;
    align-items: center;
}
.inputL.input-selects {
    z-index: 9;
    padding: 8px 15px;
}
.nice-select:after {
    height: 10px;
    top: 44%;
    width: 10px;
}
/*===================== CONTACT-FORM CSS AREA END =====================*/

/*===================== CONTACT-DETAIL CSS AREA START =====================*/
section.contact__details {
    background-position: center;
}
 .purpose-text {
    padding: 0px 0px 20px 0px;
}
.purpose-text p{
    padding: 0px 0px 10px 0px;
}

.contact__detail__card p {
    font-size: var(--f14);
    color: var(--textGray);
    line-height: 18.5px;
}

.contact__detail__card h6 {
    margin-bottom: 4px;
    color: #1692c8;
}

.contact__detail__card * {
    font-family: "Segoe UI", sans-serif;
}
/*===================== CONTACT-DETAIL CSS AREA END =====================*/

/*===================== CONTACT-MAP CSS AREA START =====================*/
.map__title {
    text-align: center;
    margin: 1rem;
    color: #1692c8;
}

section.contact__map {
    margin-bottom: 99px;
}
/*===================== CONTACT-MAP CSS AREA END =====================*/

/*===================== TEAM CSS AREA START =====================*/
.team__title {
    /* margin: 0px 0px 0px 180px; */
    text-align: center;
    max-width: 100%;
}

section.team__area {
}

.team__wrap {
    display: flex;
    flex-direction: column;
    gap: 84px;
    width: 100%;
    margin: 0 auto 0px;
}
.team__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.team__card__content ul {
    display: flex;
    flex-direction: column;
}
/* .team__card__content h4{
    background: linear-gradient(#1292C8, #52BD8C);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 2rem;
    font-weight: 500;
    -webkit-text-fill-color: transparent;
} */

.team__card__content ul li {
    flex-shrink: 0;
}
.team__card__content ul li a {
    color: #0f91c8;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    overflow: hidden;
    gap: 16px;
    border-radius: 0px;
}

.team__card2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.team__card__content ul li a img {
    width: 16px;
    transform: rotate(61deg) translate(16px, -46px);
    filter: brightness(0);
}
.team__card__content ul li a:hover img {
    transform: rotate(0deg) translateY(0px);
}
.team__card__content {
    /* max-width: 450px; */
    width: 100%;
}
.team__card__content ul li a:hover {
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
    box-shadow: 1px 2px 5px #bfbfbf;
}

/*===================== TEAM CSS AREA END =====================*/

/*===================== ABOUT-COUNT CSS AREA START =====================*/

.contact__detail__card img {
    width: 20px;
    color: #3c83c2;
}
.phone-icon {
    width: 20px;
    color: #3c83c2;
}
.contact__detail__card .why-img {
    width:80px;
    margin: 10px 0px 10px 0px;



    
}
.our-services-box{
}

.contact__detail__card {
    text-align: center;
}
.get-contact-us{
    color: #0f91c8;
}
.contact__detail__card h4 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    color:#1692c8;
}

.contact__detail__card span {
    font-size: 17px;
}

.contact__detail__card * {
    -webkit-background-clip: text;
    color: transparent;
    background-image: var(--gradientColor);
}
/*===================== ABOUT-COUNT CSS AREA END =====================*/

/*===================== VISION CSS AREA START =====================*/
.vision__card img {
    width: 70px !important;
}

.vision__card h5 {
    margin: 16px 0px;
    font-weight: 600;
    color: #0f91c8;
}

.vision__card p {
    font-size: 14px;
    color: var(--textDark);
}
.vision__slider {
    display: flex;
    align-items: center;
    width: 83%;
}
/* .title__area {
  animation: 10s slide infinite linear;
} */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

section.vision__area {
    margin-bottom: 26px;
}

.vision__title.title {
    max-width: 552px;
    margin-left: auto;
    margin-right: auto;
}
.vision__title{
}
.vision__title h4 {
   
    color: #0f91c8;
}
/*===================== VISION CSS AREA END =====================*/

/*===================== LEADERSHIP CSS AREA START =====================*/
section.leadership__area {
    margin-bottom: 74px;
}

.leadership__card img {
    width: 104px;
    margin-bottom: 29px;
}

.leadership__card {
    text-align: center;
    padding: 28px 38px;
    box-shadow: -2px 4px 9px 0px #8282821a;
    box-shadow: -7px 15px 17px 0px #82828217;
    /* box-shadow: -15px 34px 23px 0px #8282820D; */
    /* box-shadow: -27px 61px 27px 0px #82828203; */
    /* box-shadow: -42px 95px 29px 0px #82828200; */
}

.leadership__card__content * {
    font-weight: 400;
}

.leadership__card__content h6 {
    margin: 12px 0px;
}

.leadership__card__content p {
    font-size: var(--f14);
    line-height: 26px;
}
/*===================== About Us CSS AREA END =====================*/

.service-card {
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .service-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .service-card h5 {
    font-size: 1.25rem;
    margin-top: 10px;
  }
  .service-card ul {
    list-style-type: none;
    padding-left: 0;
  }
  .service-card ul li {
    margin-bottom: 5px;
  }
  .feature-card {
    background: linear-gradient(to bottom right, #1a7bc5 10%, #1ebd9a 90%);
    color: white;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* text-align: center; */
    transition: transform 0.2s;
  }
  .feature-card img{
    width: 50px;
    height: 51px;
  }

  .common-p{
    padding: 10px 0px 20px 0px;
  }
  .contact__detail__wrap{
    padding: 10px 0px 20px 0px;
  }
  
  .feature-card:hover {
    transform: scale(1.05);
  }
  img.mmpm {
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin-top: 30%;
  }
  h2.mm {
    margin-top: 45%;
  }
.vision__all__card {
    display: flex;
    justify-content: center; /* This centers the .vision__slider container */
}

.vision__card {
    /* max-width: 300px; */
    flex-shrink: 0;
    height: 101px;
    padding: 14px;
    margin-bottom: 5px;
    box-shadow: 2px 6px 13px 0px #7878781A, 7px 22px 23px 0px #78787817;
    background: linear-gradient(278.94deg, #E4FFE6 -4.61%, #E3F9FF 105.09%);
    border: 1px solid #1292C8;
    border-radius: 20px;
}
/*===================== LEADERSHIP CSS AREA END =====================*/

/*===================== SERVICE-AREA CSS AREA START =====================*/

.header__area-service {
    /* margin-bottom: 10px; */
    box-shadow: 2px 19px 42px 0px #5b9cb91a;
    box-shadow: 9px 76px 76px 0px #5b9cb917;
    /* box-shadow: 20px 171px 103px 0px #5B9CB90D; */
    /* box-shadow: 35px 304px 122px 0px #5B9CB903; */
    /* box-shadow: 55px 475px 134px 0px #5B9CB900; */
}

.category__title {
    text-align: start;
}

.category__title h4 {
    color: var(--textBlue);
    font-weight: 600;
    font-family: "Segoe UI", sans-serif;
}
.choose-package-terms{
    color: var(--textBlue);
    font-weight: 600;
    font-family: "Segoe UI", sans-serif;
}
.owl-carousel .owl-stage-outer {
    padding: 0px 8px;
}
.category__card {
    position: relative;
    z-index: 1;
    background-image: var(--gradientColor);
    border-radius: 8px;
    height: 85px;
    display: grid;
    grid-template-columns: 4fr 5fr;
    padding: 0px 0px 0px 10px;
    text-align: center;
    place-content: center;
    place-items: center;
    gap: 0px;
}

.category__card:after { 
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    z-index: -1;
    background: #fff;
}
/* @media screen and (min-device-width: 1080px) and (max-device-width: 1920px) { 
    section.doorstep__area.mb {
            margin-top: 7% !important;
    }
} */


.category__card img {
    width: 115px !important;
    height: 80px;
    border-radius: 10px;
}

.category__card span {
    font-size: 15px;
    color: #0f91c8;
}

.category__card:hover:before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    background-image: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.36) -4.61%,
        rgba(127, 226, 253, 0.3) 105.09%
    ) !important;
    z-index: 9999;
}

.section.service__category {
    margin-bottom: 51px;
}

.appliance__service {
    border-radius: 8px;
    border: 1px solid var(--stroke, #e0e0e0);
    padding: 16px;
    color: var(--textBlue);
    background: #fff;
}

.booking {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 8px;
    margin: 8px 0px 0px;
    /* height: 0px; */
    border-top: 1px dashed var(--stroke, #e0e0e0);
}
.booking1,
.booking2 {
    visibility: hidden;
    opacity: 0;
}
.bookingShow {
    visibility: visible;
    opacity: 1;
}
.booking span:last-child {
    color: var(--textBlue);
}
.star {
    -webkit-background-clip: text;
    color: transparent;
    background-image: var(--gradientColor);
    font-size: 20px;
    transition: 0s;
}
.add {
    color: #ff830f;
}

.booking img {
    width: 22px;
}

.booking__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.service__repair__content h5 {
    cursor: pointer;
}
.service__repair__content.no-pointer h5 {
    cursor: default;
}
.booking__card span {
    margin-top: 8px;
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--textDark);
}
.booking__card__img {
    width: 100%;
    height: 68px;
    position: relative;
    z-index: 7;
    overflow: hidden;
    border-radius: 9px;
}

.booking__card__img:after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 0px;
    z-index: -2;
    background: #fff;
}

.booking__card__img img {
    position: absolute;
    inset: 1px;
    width: 97%;
    height: 96%;
    border-radius: 0px;
}

.booking__card__img:hover {
    background-image: var(--gradientColor);
}

.most__booked > h5 {
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
    line-height: 30px;
    padding: 3px 16px;
    border-radius: 8px;
}
.add-margin
{
    margin-top:3rem;
}
@keyframes slideInRight {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideOutLeft {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(-100%);
      opacity: 0;
    }
  }
  
  .slideInRight {
    animation-name: slideInRight;
  }
  
  .slideOutLeft {
    animation-name: slideOutLeft;
  }
.service__repair {
    border-radius: 8px;
    border: 1px solid var(--stroke, #e0e0e0);
    padding: 11px 12px 11px 22px;
    display: flex;
    gap: 26px;
    margin-top: 8px;
    margin-bottom: 28px;
    overflow: hidden;
}
.service__repair2,
.service__repair3 {
    height: 82px;
    transition: 0.5s linear;
}
.serviceRepairActive {
    height: auto !important;
    transition: 0.5s linear;
}
.sell {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 8px;
}
.sell1,
.sell2 {
    margin-top: -38px;
}
.sellActive {
    margin-top: 10px;
}
.sell div img {
    width: 18px;
}

.sell > span,
sell h5 {
    font-size: 20px;
}

.sell span {
    color: var(--textGray);
}

.sell > span {
    text-decoration: line-through;
    font-weight: 300;
}

.sell div span {
    font-size: 12px;
}
.service__list__detail {
    padding-top: 8px;
    border-top: 1px dashed var(--stroke, #e0e0e0);
}
.service__list__detail1,
.service__list__detail2 {
    transform: translateY(90px);
    opacity: 0;
    visibility: hidden;
}
.service__list__detailActive {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}
.service__repair__content ul li {
    font-size: 14px;
}

.service__repair__content ul {
    margin-bottom: 8px;
}

.service__repair__content a {
    font-weight: 600;
}
.repairs-imgs,
.repairs-imgs2 {
    transform: translateY(200px);
}

.repairs-imgActive {
    transform: translateY(0px);
}
.service__repair__img > a {
    width: 132px;
    height: 35px;
    margin: -12px auto 0px;
    z-index: 1;
    position: relative;
    box-shadow: -6px -6px 16px 0px #00000040 inset;
    box-shadow: 5px 5px 4px 0px #ffffff40 inset;
    /* box-shadow: 0px 2px 16px 0px #00000029; */
}
.bookNow,
.bookNow2 {
    transform: translateX(30px);
    opacity: 0;
    visibility: hidden;
}
.bookNowActive {
    transform: translateX(0px);
    opacity: 1;
    visibility: visible;
}
.repairs__cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 29px;
}

.repair__card__left > h5 {
    margin-bottom: 4px;
}

.repairs__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 20px;
    border-radius: 8px;
    border: 1px solid var(--stroke, #e0e0e0);
    padding: 10px 22px;
    background: #fff;
}
.service__repair__img > .arrroDwn {
    height: 0px;
}
.arrows-downs,
.arrows-downs2 {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
    font-size: 18px;
    color: var(--textBlue);
    transform: translateY(16px);
    cursor: pointer;
}
.arrowDownActive {
    transform: translateY(-130px);
}
.arrows-downs img,
.arrows-downs2 img {
    width: 24px;
}

.repair__card__left .sell {
    border: none;
}

.service__cart {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service__cart__card {
    border-radius: 8px;
    border: 1px solid var(--stroke, #e0e0e0);
    padding: 11px 16px;
    overflow: hidden;
}

.service__cart__card > a {
    width: 132px;
    height: 35px;
    margin: 0 auto;
}

.service__cart__card2 {
    padding-bottom: 0px;
}

.offer__more {
    background: #fff;
    padding: 15px 0px;
    position: relative;
}

ol.cart-card-list {
    height: 35px;
}
.cartList {
    height: auto !important;
}
.cart__title {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dashed var(--stroke, #e0e0e0);
    margin-bottom: 8px;
    padding-bottom: 3px;
    color: var(--textBlue);
    font-weight: 600;
    font-family: "Segoe UI", sans-serif;
}

.cart__title img {
    width: 20px;
}

.cart__title h4 {
    font-weight: 500;
    color: var(--textBlue);
    font-family: "Poppins", sans-serif;
}

.service__cart__card p {
    border-bottom: 1px solid var(--stroke, #e0e0e0);
    padding-bottom: 11px;
    margin-bottom: 8px;
}

.service__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
}
.total__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.service__cart__card .more-offers {
    width: 132px;
    height: 32px;
    margin: 0 auto;
    cursor: pointer;
}
/* ol {
    list-style: disc;
    color: var(--textGray);
} */
.service__cart__card ol {
    margin-bottom: 15px;
    padding-right: 8px;
    list-style: none;
}
.service__cart__card ol li {
    border-bottom: 1px solid var(--stroke, #e0e0e0);
    margin-bottom: 8px;
    padding: 0px 15px 8px;
}
section.service__application {
    margin-bottom: 300px;
}
.emergency-booking__check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.emergency-booking__check img {
    width: 19px;
}
.checkout__title.title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkout__title img {
    width: 45px;
}

.checkout__title {
    margin-bottom: 34px;
    border-bottom: 1px solid var(--stroke, #e0e0e0);
    padding-bottom: 12px;
}

.customer__card h6 {
    margin-bottom: 4px;
}

.customars__details {
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 5px;
    border-radius: 8px;
    position: relative;
    margin-right: 20px;
    /* border: 1px solid #1292C8; */
    box-shadow: 0px 0px 0px 2px #d5f6ff;
    /* background-image: var(--gradientColor); */
    /* z-index: 999999; */
    border-radius: 8px;
    /* background-image: linear-gradient(278.94deg, rgba(177, 255, 185, 0.5) -4.61%, rgba(127, 226, 253, 0.5) 105.09%); */
}
.emergency-booking .ser {
    font-size: 12px;
}

.customars__details form .location {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 12px;
    color: var(--textBlue);
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
}

.customars__details form button img {
    width: 16px;
}

.customars__details form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.checkout__input {
    /* display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; */
}

.checkout__input input {
    border: 1px solid var(--disabled, #a3a3a3);
    width: 100%;
}

.checkout__input__btn {
    display: flex;
    gap: 8px;
    height: 48px;
    border-radius: 8px;
}

.checkout__input__btn button button {
    height: 100%;
}

.checkout__input__btn button {
    width: 100%;
    height: 100%;
}

/* .customars__details form * {
  font-size: 14px;
  color: var(--textGray);
  border-radius: 8px;
} */

.checkout__input__btn button:last-child {
    color: black;
    background-color: white !important;
}

.checkout__input__btn button:first-child {
    color: black;
    background-color: white !important;
}

.emergency-booking__check h6 {
    margin-bottom: 0px;
    font-family: Segoe UI;
    font-size: 16px;
    font-weight: 600;
    color: black;
    line-height: 21.28px;
    text-align: left;
}

.customars__details form .checkout__input.address {
    grid-template-columns: repeat(1, 1fr);
}
.customer__card__field img {
    width: 24px;
}

.customer__card__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    padding: 12px 16px;
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
}

.customer__card__field .write-btn {
    width: 40px;
    height: 32px;
    border-radius: 16px;
    background: #2691c933;
}

.customer__card__field .write-btn img {
    width: 16px;
}

.last-p {
    color: var(--textGray);
    font-size: 12px !important;
}

.collection * {
    font-weight: 400;
}

.collection h5 {
    margin-bottom: 8px;
}
.customer__img__content {
    display: flex;
    align-items: center;
    gap: 8px;
}
.collection ol li {
    font-size: 12px;
    margin-left: 18px;
    margin-bottom: 8px;
}

.collection {
    margin-left: 1px;
}

img.clck {
    filter: brightness(0.5);
}

.pricing__card > h5 {
    margin: 8px 8px 8px 1px;
    font-weight: normal;
}

.pricing__card {
    padding: 12px 12px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0px 0px 0px 2px #d5f6ff;
    z-index: 1;
}

.customars__details:after,
.pricing__card:after,
.apply__discount:after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: #fff;
    border-radius: 7px;
}

.pricing {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apply__discount {
    border-radius: 8px;
    position: relative;
    background-image: var(--gradientColor);
    z-index: 2;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 4px 9px;
}

.apply__discount button {
    width: 79px;
    height: 100%;
}

.apply__discount span {
    color: var(--textGray);
    font-size: 14px;
}

.payment__summary ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--textDark);
}
.pricing__card .sell {
    border: none;
    margin-bottom: 8px;
    padding-bottom: 0px;
}
.payment__summary ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 11px;
    padding-bottom: 13px;
    border-bottom: 1px dashed var(--stroke, #e0e0e0);
}

.total__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
    border-radius: 8px;
    height: 38px;
    padding: 7px;
}

.amount__pay {
    border-radius: 8px;
    border: 1px solid var(--stroke, #e0e0e0);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    color: var(--textDark);
    margin-bottom: 8px;
}
.pricing > button,.pricing > a,.py-proceed {
  width: 150px !important;
  height: 48px;
  margin: 0 auto;
  font-size: 15px;
  font-weight: 600;
}
.section.service__checkout {
    margin-bottom: 200px;
}
.success__payment__content {
    max-width: 436px;
    margin: 0 auto !important;
}
.success__payment img {
    width: 166px;
}

.success__payment {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.success__payment p {
    font-size: 14px;
}

.modal-dialog {
    max-width: 613px;
    width: 95%;
    margin: 20px auto !important;
}
.modal-confirmation {
    max-width: 400px;
    width: 100%;
    /* position: absolute; */
    /* margin: 20px auto !important; */
    top: 25%;
    left: 35%;
}
.detail__service {
    max-width: 613px;
}
div#carouselExampleControls {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 11px;
}
button.carousel-control-next img,
button.carousel-control-prev img {
    width: 9.5px;
}

button.carousel-control-next,
button.carousel-control-prev {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

button.carousel-control-next {
    right: 9px;
}

button.carousel-control-prev {
    left: 9px;
}

.modal__service__details .sell {
    border-bottom: 1px solid var(--stroke, #e0e0e0);
    padding-bottom: 15px;
    margin-bottom: 1;
}

.modal__service__details h5 {
    margin-bottom: 11px;
}

.service__list__detail,
.modal__service__details .work_process {
    margin-left: 22px;
    margin-bottom: 12px;
    font-size: 14px;
}

.modal__service__details ol li {
    margin-left: 22px;
    font-size: 14px;
}

.melvin__card {
    border: 1px solid var(--stroke, #e0e0e0);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 12px;
}

.melvin__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.melvin__card p {
    font-size: 14px;
    line-height: 24px;
    color: var(--textGray);
}

.sell h5 {
    margin: 0px;
}
.add-to-cart {
    width: 149px;
    height: 40px;
}

.modal__service__details .sell__cart {
    border-bottom: 1px solid var(--stroke, #e0e0e0);
    padding-bottom: 15px;
    margin-top: -11px;
    margin-bottom: 11px;
    display: flex;
    justify-content: space-between;
}

.sell__cart .sell {
    border-bottom: none;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.proceed__slot .work_process {
    margin-left: 20px;
    font-size: 12px;
}

.proceed__slot h6 {
    margin-bottom: 8px;
    text-align: start;
}
.proceed__slot h4 {
    font-size: 22px;
    margin-bottom: 12px;
    color: var(--textDark);
}
.proceed__slot {
    margin-bottom: 12px;
    text-align: start;
}
.btns__proceed {
    display: flex;
    gap: 12px;
    width: 50%;
}

.btns__proceed button {
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
    border-radius: 8px;
    height: 32px;
    font-size: 11px;
    color: var(--textBlue);
}

.btns__proceed button:first-child {
    width: 120px;
}

.btns__proceed button:last-child {
    width: 52px;
}

.btns__proceed button:last-child img {
    width: 24px;
}
/* .proceed__slot p {
    font-size: 12px;
    color: var(--textGray);
    margin-top: -8px;
} */

.proceed__date {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.proceed__date__card {
    border-radius: 8px;
    width: 138px;
    height: 32px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background-image: var(--gradientColor);
    display: flex;
    align-items: center;
    justify-content: center;
}

.proceed__date__card span {
    font-size: 11px;
    font-weight: 500;
    color: var(--textGray);
}

.proceed__date__card:after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    z-index: -1;
    background: #fff;
}
.cenceld {
    position: relative;
    z-index: 1;
    background-image: var(--gradientColor);
    border-radius: 8px;
}
.cenceld:after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    z-index: -1;
    background: #fff;
}
.proceed__footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: end;
    gap: 20px;
}

.proceed__footer button {
    width: 147px;
    height: 40px;
}
.proceed__date__card:hover {
    background-image: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
}

.proceed__date__card:hover:after {
    display: none;
}

.customer__img__content p {
    font-size: 14px;
}
.customer__img__content h6 {
    font-size: 14px;
    margin-bottom: 0px;
}
.proceed__discount .customer__card__field {
    max-width: 351px;
    width: 100%;
    background: linear-gradient(278.94deg, #e4ffe6 -4.61%, #e3f9ff 105.09%);
    margin-bottom: 8px;
}

.proceed__discount ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
}
.proceed__discount ul li span {
    font-size: 13px !important;
}

.proceed__discount ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--stroke, #e0e0e0);
    margin-bottom: 10px;
    padding-bottom: 8px;
}

.custom-card {
    position: relative;
    padding: 20px;
    background-color: #f8f9fa; /* Default background color */
    text-align: center;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden; /* Helps to keep the hover effect clean */
    height: 170px; /* Set a fixed height for the card */
  }
  
  .custom-card:hover {
    background-color: #669dd8; /* Change to your desired blue color */
    color: white; /* Change text color to white on hover for better visibility */
  }
  
  .icon {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* For smooth transition */
  }
  
  .custom-card:hover .icon {
    opacity: 0; /* Fade out the icon */
    transform: translateY(-20px); /* Move the icon up */
  }
  
  .custom-card h5 {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* For smooth transition */
  }
  
  .custom-card:hover h5 {
    opacity: 0; /* Fade out the heading */
    transform: translateY(-20px); /* Move the heading up */
  }
  
  .custom-card .card-text {
    position: absolute; /* Position it absolutely */
    top: 50%; /* Position from the top */
    left: 50%; /* Position from the left */
    transform: translate(-50%, -50%); /* Center it */
    opacity: 0; /* Hide text by default */
    transition: opacity 0.3s ease-in-out; /* For smooth transition */
  }
  
  .custom-card:hover .card-text {
    opacity: 1; /* Show text on hover */
  }
  .icon {
    /* font-size: 40px; */
    margin-bottom: 10px;
  }
  img.img1 {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }
  img.img2 {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }
  
.feature-box {
    /* background: linear-gradient(to right, #48c6ef, #6f86d6); */
    padding: 20px;
    color: white;
    border-radius: 8px;
  }
  .feature-box i {
    font-size: 2rem;
    margin-bottom: 10px;
  }
  .feature-box .item {
    display: flex;
    gap:10px;
    align-items: flex-start;
    margin-bottom: 15px;
  }
  .feature-box .item i {
    margin-right: 20px;
  }
  img.img11 {
    width: 45px;
    height: 45px;
    object-fit: cover;
  }

.poceed__total {
    display: flex;
    justify-content: space-between;
}
.poceed__total .total_fees {
    /* font-size: 13px; */
    font-weight: 600;
}

.emargency__charge {
    display: flex;
    align-items: center;
    gap: 18px;
}

.emargency__charge span {
    color: var(--textBlue);
    font-size: 10px;
}

.write-title h5 {
    text-align: start;
    margin-bottom: 21px;
}

.addnew {
    padding: 16px 0px 23px;
    position: relative;
}

.addnew span {
    /* font-size: 12px; */
    color: var(--textGray);
    background: #fff;
    position: relative;
    z-index: 1;
    width: 71px;
    margin: 0 auto;
    padding: 0px 10px;
}

.addnew:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    top: 48%;
    left: 0px;
}

form.form-customer input {
    padding: 14px 15px;
}

form.form-customer a {
    text-align: start;
}

.form-customer button {
    width: 167px;
    height: 48px;
    margin-top: 14px;
}

.inputs__customers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.customer__state,
.use-location {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.my-location {
    height: 48px;
    font-size: 14px;
    color: var(--textBlue);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 8px;
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
}

.home__office__btn a {
    border-radius: 8px;
    width: 86px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home__office__btn {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 5px;
}

.home__office__btn a:last-child {
    position: relative;
    z-index: 1;
    background-image: var(--gradientColor);
}

.home__office__btn a:after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    z-index: -1;
    background: #fff;
}

.home__office__btn a:first-child {
    background: var(--gradientColor);
    color: #fff !important;
}

.home__office span {
    font-size: 12px;
}
.slots-btn {
    margin: 30px auto 0px;
    width: 162px;
    height: 48px;
    display: block;
}

.payment__method {
    border: 1px solid var(--stroke, #d9d9d9);
    border-radius: 8px;
    padding: 20px 12px;
}

.payment__method p {
    color: #a3a3a3;
    font-size: 12px;
}

.single__payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}
.payment__method .single__payment:nth-child(3) {
    margin-bottom: 0px;
}
.single__payment img {
    width: auto;
}

.payment__check {
    display: flex;
    align-items: start;
    gap: 11px;
}

.payment__name {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.payment__name span {
    font-size: 14px;
    color: var(--textGray);
}

.enter__upi {
    height: 46px;
    padding: 4px 5px 4px 13px;
    border-radius: 8px;
    border: 1px solid var(--stroke, #d9d9d9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 19px 0px 4px;
}
.enter__upi input {
    width: 74%;
    height: 100%;
    border: none !important;
    outline: none !important;
}
.enter__upi button {
    margin: 0px;
    border-radius: 8px;
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
    width: 84px;
    height: 100%;
    font-size: 15px;
}

.payment__method p span {
    color: var(--textDark);
}

.cash__pay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--stroke, #d9d9d9);
    border-radius: 8px;
    height: 51px;
    padding: 12px;
    margin: 21px 0px 30px;
}

.cash__pay img {
    width: auto;
}

.paycash__check {
    display: flex;
    align-items: start;
    gap: 11px;
}

.payment__method__card > button {
    width: 100%;
    height: 40px;
}
.payment__method__card {
    margin: 14px 0px;
    display: none;
}
.paymentActive {
    display: block;
}

.payment__select {
    width: 20px;
    height: 20px;
    border: 1.62px solid #2d2d2dc2;
    border-radius: 50%;
    position: relative;
}

.payment__select input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.payment__select input:checked ~ span {
    background: #1977a7;
    position: absolute;
    inset: 2px;
    border-radius: 50%;
}
/*===================== SERVICE-AREA CSS AREA END =====================*/

/*===================== BOOKING-AREA CSS AREA START =====================*/
.booking_wrap {
    max-width: 670px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.booking_wrap .booking__card span {
    text-align: start;
    color: var(--clr);
    margin-bottom: 9px;
}
.booking__card1 {
    border: none !important;
    padding: 0px !important;
}
.booking__card {
    position: relative;
    border: 1px solid var(--stroke, #e0e0e0);
    padding: 11px 24px 11px 16px;
}

.booking__card button {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    width: 7.8px;
}

.booking__card a {
    position: absolute;
    inset: 0px;
    opacity: 0;
    z-index: 1;
}

.booking__success {
    padding: 16px;
    border: 1px solid var(--stroke, #e0e0e0);
    border-radius: 10px;
}

.booking__success span {
    /* display: block; */
    color: var(--textGray);
}

.booking__success__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
}

.booking__success__title img {
    width: 24px;
}

.booking__success__title h6 {
    color: #52bd8b;
    margin-bottom: 0px;
}

.booking__success button {
    /* width: 100px; */
    height: 42px;
    padding: 10px;
    margin-top: 16px;
}

.booking__success2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.download__invoice {
    padding: 13px 24px;
    border: 1px solid var(--stroke, #e0e0e0);
    border-radius: 10px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ratings {
    padding: 16px;
    border: 1px solid var(--stroke, #e0e0e0);
    border-radius: 10px;
}
.ratings span {
    display: block;
    color: var(--textGray);
}
.ratings button {
    width: 100px;
    height: 42px;
    margin-top: 16px;
}
.ratings .stars {
    display: flex;
    align-items: center;
}

.ratings .stars .star {
    font-size: 24px;
    cursor: pointer;
    color: #cccccc; /* Unselected star color */
}
.ratings .stars .star.selected {
    color: #ffd700; /* Selected star color */
}

input#exampleFormControlInput101 {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: none !important;
    border-radius: 0px !important;
    /* border: 1px solid #ced4da; */
    border-bottom: 1px solid #686868 !important;
    border-width: 1px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* border-radius: .375rem; */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.download__img {
    display: flex;
    align-items: center;
    gap: 8px;
}

.download__img img,
.booking__detail__card img {
    width: 24px;
}

.booking__detail__card > .amount__pay {
    width: 100%;
    padding: 0px;
    border: 0px;
    flex-direction: column;
    align-items: start;
    margin-bottom: 0px;
}

.booking__detail__card > .amount__pay p span {
    display: inline-block;
}

.booking__detail__card {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: start;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--stroke, #e0e0e0);
}

.booking__title img {
    width: 31px;
}

.booking__detail h5 {
    font-weight: 600;
}

.booking__detail span {
    color: var(--textGray);
}

.booking__detail__card > .amount__pay p:last-child {
    color: var(--textGray);
}

.booking__detail__card > .amount__pay > span {
    font-size: 12px;
}

.booking__success2 .booking__detail__card:last-child {
    border: none;
}
/*===================== BOOKING-AREA CSS AREA END =====================*/

/*===================== faq-AREA CSS AREA start =====================*/
.faq__wrap {
    max-width: 673px;
    margin: 0 auto;
}

.faq__title {
    margin-bottom: 24px;
}

.faq__cards .accordion {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.accordion-item {
    border: 1px solid var(--stroke, #e0e0e0) !important;
    border-radius: 8px !important;
}

button.accordion-button.collapsed {
    padding: 10px 24px 10px 16px;
    border: none !important;
    background: linear-gradient(278.94deg, #e4ffe6 -4.61%, #e3f9ff 105.09%);
    border-radius: 8px !important;
    font-size: 16px;
}

.accordion-flush .accordion-item .accordion-button,
.accordion-flush .accordion-item .accordion-button.collapsed {
    border: none !important;
}

.faq_accordion_body {
    padding: 18px 0px;
    border-top: 1px solid var(--stroke, #e0e0e0) !important;
}

.faq_accordion_body h4 {
    margin-bottom: 10px;
}
/*===================== faq-AREA CSS AREA END =====================*/

/*===================== FOOTER CSS AREA START =====================*/
.footer__social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 72px 11px;
}

.footer__top * {
    font-family: "Segoe UI", sans-serif;
}

.footer__top h4 {
    font-size: var(--f24);
    font-weight: 600;
    -webkit-background-clip: text;
    color: transparent;
    background-image: var(--gradientColor);
}

.footer__bottom {
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
    padding: 28px 85px 35px;
}

.footer__cards {
    display: flex;
    align-items: start;
}
.carousel-control-prev-icon .fa-solid,.fas{color: #fff !important}
.carousel-control-next-icon   .fa-solid,.fas{color: #fff !important}

footer#footer__area {
    margin-top: 30px;
    margin-bottom: 30px;
}

.footer__wrap {
    border-radius: 16px;
    box-shadow: 0px -2px 4px 0px #bfbfbf1f;
    box-shadow: 0px -7px 7px 0px #bfbfbf1a;
    box-shadow: 0px -16px 10px 0px #6a6a6a0f;
    overflow: hidden;
}

.footer__card h5 {
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--textBlue);
}
.footer__card h5 a {
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--textBlue);
}

.footer__card > ul li *,
.footer__card > ul li,
.footer__card > p {
    font-size: var(--f14);
    color: var(--textGrayDark);
}

.footer__card > ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
}
.send__mail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.send__mail input {
    border-radius: 8px;
    padding: 0px 16px;
    height: 44px;
    color: #9d9d9d;
}

.send__mail button {
    height: 44px;
}

/*===================== FOOTER CSS AREA END =====================*/
.datepicker {
    background: linear-gradient(278.94deg, #e4ffe6 -4.61%, #e3f9ff 105.09%);
    max-width: 460px;
    border-radius: 20px !important;
}
.datepicker-days table td .active .day {
    color: green;
}
.modal-content-calender {
    background: linear-gradient(278.94deg, #e4ffe6 -4.61%, #e3f9ff 105.09%);
    max-width: 360px;
    border-radius: 28px !important;
}
div#example {
    width: 100% !important;
    padding: 16px 24px;
}

.p-3.d-flex.flex-column {
    padding: 0px !important;
    margin-bottom: 12px;
}

.p-3.d-flex.flex-column small {
    font-weight: 500;
}

.p-3.d-flex.flex-column h4 {
    font-size: 32px;
    margin-top: 36px;
}

.d-flex.js-cell-inner.justify-content-center.align-items-center.rounded-circle.w-100.h-100.border.text-bg-primary.js-today.fw-bold {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(270deg, #1292c8 0%, #52bd8c 100%);
    border-radius: 8px !important;
}

.d-flex.js-cell-inner.justify-content-center.align-items-center.rounded-circle.w-100.h-100.border.fw-bold.opacity-75.active.border-secondary {
    border: 1px solid var(--blue, #1191c8) !important;
    border-radius: 50% !important;
    flex-shrink: 0;
}

.tables-sm tbody tr th {
    display: none !important;
}
.tables-sm thead tr th:first-child {
    display: none;
}
.tables-sm thead tr th {
    font-size: 16px !important;
    width: 40px !important;
    height: 40px !important;
}
.tables-sm thead tr,
.tables-sm tbody tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}
tr * {
    font-size: 16px;
    font-weight: 400;
}

.d-flex.js-cell-inner.justify-content-center.align-items-center.rounded-circle.w-100.h-100.border.fw-bold {
    border: none !important;
}
.p-2.js-collapse .mb-0.rounded-0 {
    display: none;
}
td.position-relative.p-1 {
    width: 40px !important;
    height: 40px !important;
}

.testimonial {
    background: linear-gradient(
        278.94deg,
        rgba(177, 255, 185, 0.5) -4.61%,
        rgba(127, 226, 253, 0.5) 105.09%
    );
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 600px;
    margin: auto;
}

.testimonial-text {
    font-style: italic;
    color: #000;
}

.testimonial-author h5 {
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #0f91c8;
}

.testimonial-author p {
    margin: 0;
    color: #000;
}

.testimonial-rating {
    margin-top: 10px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* background-color: #6c757d; */
    background-image: var(--gradientColor);
    border-radius: 50%;
    padding: 20px;
}
.fa-greater-than:before {
    content: "\3e";
    font-size: 30px;
    position: relative;
    /* padding: 0px; */
    /* margin-top: -10px; */
    top: -15px;
    left: -5px;
}
.fa-angle-right:before {
    content: "\f105";
    font-size: 30px;
    position: relative;
    /* padding: 0px; */
    /* margin-top: -10px; */
    top: -15px;
    left: -5px;
}
.fa-angle-left:before {
    content: "\f104";
    font-size: 30px;
    position: relative;
    /* padding: 0px; */
    /* margin-top: -10px; */
    top: -15px;
    left: -7px;
}
hr.hor {
    width: 50%;
    position: relative;
    top: 0;
    left: 25%;
    color: gray;
}
.category-button {
    width: 100%;
}
.datepicker table tr td.today {
    background: #0e8488 !important;
    color: white !important;
}
.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover:active {
    background: #0e8488 !important;
}
.proceed__slot__card {
    border-radius: 8px;
    width: 138px;
    height: 32px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background-image: var(--gradientColor);
    display: flex;
    align-items: center;
    justify-content: center;
    border: thin solid transparent;
    cursor: pointer;
}

.proceed__slot__card span {
    font-size: 11px;
    font-weight: 500;
    color: var(--textGray);
}

.proceed__slot__card:after {
    content: "";
    position: absolute;
    inset: 0px;
    border-radius: 7px;
    z-index: -1;
    background: #fff;
}

.proceed__slot__card:hover,
.proceed__slot__card.active {
    background-image: linear-gradient(278.94deg,
            rgba(177, 255, 185, 0.5) -4.61%,
            rgba(127, 226, 253, 0.5) 105.09%);
    border-color: transparent;
}

.proceed__slot__card:hover:after,
.proceed__slot__card.active:after {
    display: none;
}