/* track page css */
.track-area .track-price ul.track-order{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.track-area .track-price ul.track-order li h4{
    font-size: 16px;
}
.track-area .track-price ul.track-order li span.track-status{
    font-size: 16px;
    font-weight: 600;
}
.track-area .track-main {
    margin-top: 30px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}
.track-area .track-main .track{
    position: relative;
    height: 7px;
    display: flex;
    margin-bottom: 40px;
    margin-top: 40px
}
.track-area .track-main .track:before {
    background-color: #ddd;
    content: '';
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    width: 100%;
    height: 7px;
}
.track-area .track-main .track .step{
    width: 25%;
    margin-top: -18px;
    text-align: center;
    position: relative
}
.track-area .track-main .track .step.w33{
    width: 33.33%;
}
.track-area .track-main .track .step.active:before{
    background-color: #052a50;
}
.track-area .track-main .track .step::before {
    height: 7px;
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    top: 18px
}
.track-area .track-main .track .step.active .icon{
    background-color: #052a50;
    color: #fff
}
.track-area .track-main .track .icon{
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: relative;
    border-radius: 100%;
    background: #ddd
}
.track-area .track-main .track .step.active .text{
    font-weight: 400;
    color: #000
}
.track-area .track-main .track .text{
    display: block;
    margin-top: 7px
}

.groom-title{
    font-size: 20PX;
    text-transform: capitalize;
    display: block;
    padding-bottom: 25px;
    padding-top: 25px;
    font-weight: 600;
    color: #052a50;
}

.existing-pet{
    width: 100%;
    height: auto;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    margin-bottom: 30px;
    min-height: 250px;
}
.add-pet-wrapper{
    width: 100%;
    height: auto;
    border: 2px dashed #18376240;
    border-radius: 15px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    min-height: 235px;
}
.add-pet-wrapper.add-address-btn{
    min-height: 200px;
}
.new-pet-text{
    font-size: 15px;
    font-weight: 600;
    color: #052a50;
}
.pets-image{
    width: 90px;
}

.pets-details-wrapper{
    border-bottom: 1px solid #cdcdcd;
    margin: 1px  5px;
    padding-bottom: 20px;
    gap: 15px;
    min-height: 130px;
}
.pets-details{
    line-height: 1.7rem;
}

.pet-name{
    font-size: 15px;
    font-weight: 700;
    color: #052a50;
}
.pet-breed{
    font-size: 14px;
    color: #c4c4c4 ;
}
.pet-age{
    font-size: 15px;
    color: #052a50;
    font: 700;
}
.pet-name::after {
    content: '\2665';
    color: red;
    margin-left: 5px; 
    width: 15px;
    height: 15px;
  }

.fa-trash , .fa-pencil{
    color: #8D9EAF;
    cursor: pointer;
}


/* Global Variables */
:root {
    --color01: #ffffff;
    --color02: #502883;
    --color02Hover: #402068;
    --color03: #2a2a33;
    --color04: #00bcd4;
    --color04Hover: #0096a9;
    --color05: #ffd400;
    --color06: #f96e6e;
    --color06Hover: #f62929;
    --color07: #0097a7;
    --color08: #f4f4f4;
    --color09: #fbfbfb;
    --color10: #ffd400;
    --color11: #f96e6f;
    --color12: #362e42;
    --color13: #aaa;
}





.containerrr {
    width: 100%;
    padding-top: 25px;
    /* Flex */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 300px));
    gap: 25px; 
    align-items: center;
    justify-content: center;
}
@media (max-width: 644px) {
    .containerrr {
        gap: 40px;
    }
}

.carddd {
    width: 300px;
    /* min-height: 470px; */ 
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    /* background: linear-gradient(256deg, #03A9F4, #000000); */
    padding-bottom: 60px;
    border-radius: 10px;
}

.carddd:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px; 
}

/* .carddd::before {
    background-color: var(--color05);
    color: var(--color02);
    padding: 20px 35px 10px; 
    transform: translate(calc(31px + 35px), -35px) rotate(45deg);
    transform-origin: top left; 
    content: 'NEW';
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
} */

.carddd:nth-of-type(2)::before {
    background-color: var(--color06);
    color: var(--color03);
}

.carddd:nth-of-type(3)::before {
    background-color: var(--color07);
    color: var(--color12);
}

/* Info */
.carddd__info {
    width: 100%;
    min-height: 65px; 
    /* Background */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /* Position */
    position: relative;
    z-index: 0;
    border-radius: 10px;

    /* Flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #38556e;
}

.carddd__info::before {
    /* background-color: #052a50; */
    width: 100%;
    height: 100%;
    opacity: 0.8; 
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}
 
p.card__price {
    padding: 10px 0px 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
}
.card__durationSpan{
    display: flex;
    flex-direction: column;
}
.card__durationSpan b {
    margin: 0px 0px 6px 0px;
    font-size: 16px;
    letter-spacing: -1px;
}
.carddd__img{
    text-align: center;
}
.carddd__img img{
    height: 95px;
    width: auto;
}

span.card__priceSpan {
    font-size: 30px;
    /* font-weight: bold; */
    margin-right: 13px;
    letter-spacing: -2px;
}
.carddd__name {
    color: var(--color01); 
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    width: 90%;
    text-align: center;
}

.carddd__price {
    color: var(--color05);
    font-size: 22px;
    font-weight: 400;
}

.carddd__priceSpan {
    color: var(--color13);
}

.carddd:nth-of-type(3) .carddd__priceSpan {
    color: var(--color01);
}

/* Content */
.carddd__content {
    background-color: var(--color09);
    width: 100%;
    height: calc(100% - 130px); 

    /* Flex */
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f6f6f6;
    padding: 0px 20px;
}

.carddd__rows {
    width: 100%;
    padding: 20px 10px;
}

.carddd__row{
    margin-bottom: 10px;
}

.carddd__row .service_name {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    display: inline;
    font-size: 13px;
    color: #38556e;
    font-weight: bold;
}

.carddd__row .service_details { 
    width: 100%;
    padding: 20px 0;
    text-align: center;
    display: inline;
    font-size: 13px;
    color: #8f8f8f;
}

.carddd__row:nth-of-type(odd) {
    background-color: var(--color08);
}

.carddd__link {
    color: #fff!important;
    padding: 7px 50px;
    margin: 20px 0;
    text-decoration: none;
    border-radius: 50px;
    border: 2px solid #052a50;
    background-color :#052a50!important;
    position: absolute;
    bottom: 0px;
} 

.center-wrapper{
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 25px;
}
.bg-F9F9EB{
    background-color: #F9F9EB;
}

.other-detail{
    line-height: 1.7rem;
}

.btn-style1-custom-1{
    color: #fff!important;
    width: 94px;
    font-size: 14px;
    padding: 4px 20px;
    background-color: #052a50!important;
    font-weight: 600;
    border: 2px solid #052a50;
    height: 32px;
    border-radius: 25px;
}

.package-name{
    font-size: 18px;
    color: #052a50;
    text-transform: uppercase;
    margin-top: 0;
    text-align: center; 
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.duration{
    font-size: 14px;
    color: #052a50;
}

.pet-name-review{
    font-size: 20px;
    word-break: break-word;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 600;

}

.booking-date,.booking-time,.booking-place{
    font-size: 14px;
    color: #052a50;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.amount-text{
    font-size: 16px;
}
.amount{
    font-size: 25px;
}

.tax-amount-text, .tax-amount {
    font-size: 15px;
}

.border-lefttt {
    border-left: 2px dashed #052a5030;
}
.review-area{
    background-color: #f1f1f1;
}
span.summary-width {
    width: 105px;
    font-weight: 600;
}
#bookingData span.summary-width {
    width: 160px; 
}
.display-inline{
    display: inline!important;
}
.width-auto{
    width: auto!important;
}

#user-pet-list .btn.btn-style1-custom.select-user-pet{
    width: 100%;
    margin-top: 15px;
}
.center-wrapper.active{
    border: 2px solid #052a50!important;
}