@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?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&display=swap');


@font-face {
    font-display: swap;
    font-family: "Centra No2";
    font-style: normal;
    font-weight: 300;
    src: url("https://a.travel-assets.com/egds/fonts/CentraNo2/CentraNo2-Light.woff2") format("woff2");
    unicode-range: U+000-0FF;
}

@font-face {
    font-display: swap;
    font-family: "Centra No2";
    font-style: normal;
    font-weight: 400;
    src: url("https://a.travel-assets.com/egds/fonts/CentraNo2/CentraNo2-Book.woff2") format("woff2");
    unicode-range: U+000-0FF;
}

@font-face {
    font-display: swap;
    font-family: "Centra No2";
    font-style: normal;
    font-weight: 500;
    src: url("https://a.travel-assets.com/egds/fonts/CentraNo2/CentraNo2-Medium.woff2") format("woff2");
    unicode-range: U+000-0FF;
}

@font-face {
    font-display: swap;
    font-family: "Centra No2";
    font-style: normal;
    font-weight: 700;
    src: url("https://a.travel-assets.com/egds/fonts/CentraNo2/CentraNo2-Bold.woff2") format("woff2");
    unicode-range: U+000-0FF;
}

:root {
    font-family: "Centra No2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-synthesis: none;
}





:root {
    --primary-color: #232F3E;
    --secondary-color: #F35828;
    --additional-color: #1ca510;
    --white-color: #ffffff;
    --text-color: #555555;
    --dark-color: #191e3b;
    --button-hover: #F35828;
    --rating-color: #F5C34B;
    --transition: ease-in-out .3s;
    --border-radius: 5px;
    --border-color: #EAEAEA;
    /* --border-color: #F35828; */
    --bg-color: rgba(245, 195, 75, 0.1);
}

body {
    margin: 0;
    padding: 0;
    /* font-size: 11px; */
    font-size: 13px;
    /* font-family: "Jost", sans-serif; */
    font-family: "Centra No2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* font-family: "Poppins", serif; */

}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

img {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
    color: var(--dark-color);
}

p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 20px;
}

.mt {
    margin-top: 50px;
}

.mb {
    margin-bottom: 50px;
}

.pt {
    padding-top: 50px;
}

.pb {
    padding-bottom: 50px;
}

.mt1 {
    margin-top: 30px;
}

.mb1 {
    margin-bottom: 30px;
}

.pt1 {
    padding-top: 30px;
}

.pb1 {
    padding-bottom: 30px;
}

.form-control:focus {
    outline: none;
    box-shadow: none;
}

.container {
    max-width: 1260px;
}


/* Header Top  */
.header-top {
    background: var(--white-color);
}

.th-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.logo a {
    display: block;
}

.logo img {
    height: 34px;
    width: auto;
}

.search {
    width: 600px;
    position: relative;
}

.search .form-control {
    height: 40px;
    border: 1px solid var(--border-color);
    /* border-radius: var(--border-radius); */
    border-radius: 50px;
    padding: 5px 15px;
    /* clears the 34px button plus its 3px inset */
    padding-right: 48px;
    font-size: 13px;
    background-color: #80808014;
}

/* Was stretched top:0/bottom:0 with only horizontal padding, so the box came
   out 42x40 - an ellipse, not a circle. Fixed square size + 50% radius, inset
   3px so it sits inside the 40px pill rather than flush against its edge. */
.search button {
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: var(--secondary-color);
    font-size: 16px;
    line-height: 1;
    color: var(--white-color);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.search button:hover {
    background: var(--primary-color);
}

/* the magnifier was rotated -90deg, which pointed its handle up-left */
.search button i {
    transform: none;
}

.header-utilities ul {
    display: flex;
}

.header-utilities ul li a {
    display: block;
}

.util-wrap {
    display: flex;
    align-items: center;
}

.util-icon {
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 100%;
    transition: var(--transition);
    position: relative;
    background-color: #f5f5f5;
}

.util-wrap:hover .util-icon {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.cart-popup {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 10;
}

.cart-popup b {
    display: block;
    background: var(--secondary-color);
    height: 17px;
    width: 17px;
    line-height: 17px;
    color: var(--white-color);
    font-weight: 500;
    font-size: 11px;
    border-radius: 100%;
    transition: var(--transition);
    border: 1px solid var(--secondary-color);
}

.util-wrap:hover .cart-popup b {
    background: var(--white-color);
    color: var(--secondary-color);
}

.util-icon i {
    color: var(--primary-color);
    font-size: 19px;
    line-height: 35px;
    transition: var(--transition);
}

.util-wrap:hover .util-icon i {
    color: var(--white-color);
}

.util-info span {
    display: block;
    color: var(--primary-color);
    font-weight: 500;
    transition: var(--transition);
    white-space: nowrap;
    font-size: 10px;
}

.util-info span:hover {
    color: var(--secondary-color);
}

.util-info {
    width: calc(100% - 40px);
    padding-left: 10px;
}

.header-utilities ul li+li {
    /* margin-left: 30px; */
    margin-left: 15px;
}

.util-info p {
    margin-bottom: 0;
    color: var(--text-color);
    /* font-size: 13px;
    line-height: 18px; */

    font-size: 10px;
    line-height: 10px;
}


.cart-popups {
    position: fixed;
    top: 0;
    right: -430px;
    bottom: 0;
    background: var(--white-color);
    width: 430px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.10);
    padding: 25px;
    z-index: 1022;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: ease-in-out .5s;
    opacity: 0;
    visibility: hidden;
}

.cart-popups.active {
    right: 0;
    opacity: 1;
    visibility: visible;
}

.cart-popup-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F3F5F6;
    margin-top: -25px;
    margin-left: -25px;
    margin-right: -25px;
    padding: 20px 25px;
    height: 75px;
    margin-bottom: 25px;
    position: sticky;
    top: -25px;
    z-index: 10;
}

.cart-popup-head h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0;
}

.cart-close {
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    background: var(--bg-color);
    border-radius: 100%;
    cursor: pointer;
}

.cart-close i {
    line-height: 35px;
    font-size: 18px;
}

.cart-popup-item {
    display: flex;
}

.cart-popup-img a {
    display: block;
}

.cart-popup-img img {
    height: 80px;
    width: 80px;
    object-fit: contain;
    object-position: center;
}

.cart-popup-content {
    width: calc(100% - 80px);
    padding-left: 10px;
}

.cart-popup-content h3 {
    font-size: 15px;
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1.5;
}

.cart-popup-content h3 a {
    display: block;
    color: var(--dark-color);
    transition: var(--transition);
}

.cart-popup-content h3 a:hover {
    color: var(--secondary-color);
}

.cart-popup-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.qty button {
    height: 25px;
    width: 25px;
    line-height: 25px;
    text-align: center;
    padding: 0;
    border: none;
    /* border-radius: 100%; */
    background: #F3F5F6;
    color: var(--dark-color);
}

.qty button i {
    line-height: 25px;
}

.qty .form-control {
    width: 40px;
    padding: 0;
    border: none;
    text-align: center;
}

.qty {
    display: flex;
    align-items: center;
}

.item-price p {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: normal;
    color: var(--dark-color);
}

.cart-item-total {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-item-total span {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: var(--dark-color);
}

.cart-item-total p {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--dark-color);
}

.cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

.cart-footer a {
    display: block;
    border: 2px solid var(--secondary-color);
    flex: 1;
    text-align: center;
    color: var(--white-color);
    font-weight: 500;
    border-radius: var(--border-radius);
    padding: 12px 15px;
    transition: var(--transition);
    background: transparent;
    font-size: 15px;
}

.cart-footer a:hover {
    background: var(--secondary-color);
}

.cart-footer a:first-child {
    color: var(--primary-color);
}

.cart-footer a:last-child {
    background-color: var(--secondary-color);
    margin-left: 10px;
}

.cart-footer a:first-child:hover {
    color: var(--white-color);
    background: var(--button-hover);
    border-color: var(--button-hover);
}

.cart-footer a:last-child:hover {
    background: var(--button-hover);
    border-color: var(--button-hover);
}

.cart-item-close {
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    background: transparent;
    cursor: pointer;
    margin-left: 20px;
}

.cart-item-close i {
    line-height: 30px;
    font-size: 18px;
    background-color: var(--secondary-color);
    height: 28px;
    width: 28px;
    border-radius: 50%;
    color: #fff;
}

.cart-popup-item+.cart-popup-item {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

/* Header Top End  */







/* Header  */
.header {
    background: var(--secondary-color);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 1021;
}

.header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.header-menus>ul {
    display: flex;
}

.header-menus>ul>li>a {
    color: var(--white-color);
    font-size: 12px;
    display: block;
    padding: 12px 10px;
    transition: var(--transition);
}

.header-menus>ul>li:hover>a {
    color: #ffffffc6;
}

.header-right a {
    color: var(--white-color);
    font-size: 13px;
    display: flex;
    align-items: center;
    transition: var(--transition);
    position: relative;
}

.header-right span {
    position: absolute;
    top: -3px;
    right: -15px;
    height: 16px;
    width: 16px;
    line-height: 16px;
    text-align: center;
    background: var(--secondary-color);
    color: var(--white-color);
    border-radius: 100%;
    font-size: 12px;
}

.header-right a:hover {
    color: var(--secondary-color);
}

.header-right a i {
    margin-right: 7px;
    vertical-align: middle;
    font-size: 20px;
}

.bars img {
    height: 18px;
    width: auto;
}

.header-menus {
    display: flex;
    align-items: center;
}

.bars {
    margin-right: 10px;
    margin-top: -3px;
    cursor: pointer;
}

.header-menus ul li a i {
    vertical-align: middle;
    font-size: 10px;
    margin-left: 2px;
}

.mega-menus {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white-color);
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transform: scaleY(0);
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: ease-in-out .5s;
}

.sub-drop:hover .mega-menus {
    opacity: 1;
    visibility: visible;
    z-index: 10;
    transform: scaleY(1);
}

.mega-menus-item {
    flex: 0 0 20%;
    padding: 15px;
}

.mega-menus-item h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.3;
}

.mega-menus-item h3 a {
    display: block;
    transition: var(--transition);
}

.mega-menus-item h3 a:hover {
    color: var(--secondary-color);
}

.mega-menus-item ul li a {
    display: block;
    font-size: 13px;
    color: var(--dark-color);
    transition: var(--transition);
}

.mega-menus-item ul li a:hover {
    color: var(--secondary-color);
}

.mega-menus-item ul li+li a {
    margin-top: 7px;
}

.sub-dropdown {
    position: relative;
}

.sub-menus {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: 200px;
    background: var(--white-color);
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.10);
    padding: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transform: scaleY(0);
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: var(--transition);
}

.sub-dropdown:hover .sub-menus {
    opacity: 1;
    visibility: visible;
    z-index: 10;
    transform: scaleY(1);
}

.sub-menus ul li a {
    display: block;
    color: var(--dark-color);
    font-size: 13px;
    transition: var(--transition);
}

.sub-menus ul li a:hover {
    color: var(--secondary-color);
}

.sub-menus ul li+li a {
    margin-top: 10px;
}

/* Header End  */






/* Mobile Menu  */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -320px;
    bottom: 0;
    height: 100%;
    background: var(--white-color);
    width: 320px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.10);
    opacity: 0;
    visibility: hidden;
    transition: ease-in-out .5s;
    z-index: 1022;
    overflow-x: hidden;
    overflow-y: auto;
}

.mobile-menu.active {
    left: 0;
    opacity: 1;
    visibility: visible;
}

.mobile-close {
    cursor: pointer;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    background: var(--bg-color);
    border-radius: 100%;
}

.mobile-close i {
    font-size: 20px;
    line-height: 35px;
}

.mobile-menu-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #F3F5F6;
    height: 75px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.mobile-logo a {
    display: block;
}

.mobile-logo img {
    height: 34px;
    width: auto;
}

.mob-menu li a {
    display: block;
    font-size: 13px;
    color: var(--dark-color);
    padding: 10px 0;
    transition: var(--transition);
}

.mob-menu li a:hover {
    letter-spacing: .5px;
    color: var(--secondary-color);
}

.drop-mobile {
    position: relative;
}

.toggle-ecs {
    position: absolute;
    top: 5px;
    right: 0;
    cursor: pointer;
    height: 32.5px;
    width: 32.5px;
    line-height: 32.5px;
    text-align: center;
    background: var(--bg-color);
}

.toggle-ecs.active::before {
    content: "\f106";
    font-family: 'Line Awesome Free';
    font-weight: 900;
}

.dropdown-item-mobile {
    position: relative;
}

.drop-mobile>a {
    margin-right: 32.5px;
}

.mob-menu {
    padding: 20px;
}

.sub-menu-mobile {
    display: none;
}

.multi-drop {
    display: none;
}

.mobile-cat {
    padding: 20px;
    border-top: 1px solid var(--border-color);
}

.mobile-cat ul li a {
    display: block;
    font-size: 15px;
    color: var(--dark-color);
    transition: var(--transition);
}

.mobile-cat ul li a:hover {
    color: var(--secondary-color);
    letter-spacing: .5px;
}

.mobile-cat ul li+li a {
    margin-top: 15px;
}

/* Mobile Menu End  */







/* Slider  */
.carousel-item {
    /* No fixed ratio: the uploaded banners are different shapes (2120x742 and
       1899x828), so any single ratio letterboxes one of them. Each slide now
       takes its own natural height - no empty band, no cropping. */
    overflow: hidden;
}

.carousel-item img {
    display: block;
    height: auto;
    width: 100%;
    border-radius: 8px;
}

.carousel-indicators [data-bs-target] {
    margin: 0 5px !important;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    background: transparent;
    border: 1px solid var(--secondary-color);
    /* border: 1px solid #fb5408; */
    opacity: 1;
}

.carousel-indicators .active {
    position: relative;
}

.carousel-indicators .active::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 6px;
    width: 6px;
    background: var(--secondary-color);
    border-radius: 100%;
    margin: auto;
}

.carousel-control-prev-icon {
    background-image: none;
}

.carousel-control-prev-icon::before {
    position: absolute;
    content: '\f104';
    font-family: 'Line Awesome Free';
    font-weight: 900;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 18px;
}

.carousel-control-next-icon::before {
    position: absolute;
    content: '\f105';
    font-family: 'Line Awesome Free';
    font-weight: 900;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 18px;
}

.carousel-control-next,
.carousel-control-prev {
    width: auto;
    top: 50%;
    transform: translateY(-50%);
    bottom: inherit;
    opacity: 1;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 100%;
    text-align: center;
    background: var(--white-color);
    color: var(--dark-color);
    display: block;
    position: relative;
}

.carousel-control-prev {
    left: 30px;
}

.carousel-control-next {
    right: 30px;
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
    opacity: 1;
}

/* Slider End  */








/* Information  */
.information-wrap {
    display: flex;
}

.information-icon i {
    font-size: 35px;
}

.information-content {
    padding-left: 15px;
}

.information-content b {
    display: block;
    font-size: 17px;
    font-weight: 500;
    color: var(--dark-color);
    line-height: 1.4;
}

.information-content span {
    display: block;
    margin-top: 5px;
    color: var(--text-color);
    line-height: 1.3;
}

.information .row {
    /* border-bottom: 0.5px solid var(--border-color);
    padding-bottom: 30px; */
}

/* Information End  */



/* Featured Category  */
.main-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.main-title h3 {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 0;
}

.main-title a {
    display: block;
    color: var(--dark-color);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 4px 10px;
    transition: var(--transition);
    font-size: 14px;
}

.main-title a i {
    font-size: 12px;
}

.main-title a:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}/* Featured Category End  */



/* Feature Product  */
.product-wrap {
    /* border: 0.5px solid var(--border-color); */
    border-radius: var(--border-radius);
    padding: 10px;
}

.product-util {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-util span {
    display: block;
    /* background: var(--secondary-color); */
    background: linear-gradient(269deg, #f35828 50%, #00000003 100%);
    /* font-size: 13px; */
    font-size: 9px;
    padding: 2px 10px;
    /* border-radius: 50px; */
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    color: var(--white-color);
}

.product-util span.arrivals {
    /* background: var(--additional-color); */
    background: linear-gradient(269deg, #E58E04 50%, #00000003 100%);

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

.product-util i {
    /* height: 30px; */
    height: 20px;
    /* width: 30px; */
    width: 20px;
    /* line-height: 30px; */
    line-height: 20px;
    text-align: center;
    background: rgb(243 243 243);
    border-radius: 100%;
    color: var(--text-color);
    /* font-size: 18px; */
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
}

.product-util i:hover {
    color: var(--secondary-color);
}

.product-content h3 {
    font-size: 13px;
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1.3;
    /* fixed 2-line box: unclamped titles made cards 335px or 352px depending
       on whether the name wrapped */
    min-height: calc(2 * 1.3em);
}

.product-content h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-content h3 a {
    display: block;
    color: var(--dark-color);
    transition: var(--transition);
}

.product-content h3 a:hover {
    color: var(--secondary-color);
}

.product-rating {
    margin-top: 10px;
    display: flex;
}

.product-rating i {
    font-size: 15px;
    color: var(--rating-color);
    margin-right: 3px;
}

.prev-price {
    /* margin-top: 10px; */
}

.prev-price del {
    display: block;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .5px;
    color: #9d9d9d;
    line-height: normal;
    margin-bottom: 7px;

}


.new-price span {
    display: block;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .5px;
    color: var(--secondary-color);
    line-height: normal;
    margin-bottom: 7px;
}

.both-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    /* space-between threw the "was" and "now" prices to opposite edges of the
       card, so they read as two unrelated numbers instead of one price */
    justify-content: flex-start;
    flex-wrap: wrap;
}

.product-btn {
    margin-top: 15px;
}

.product-btn i {
    font-size: 16px;
}

.product-btn button {
    width: 100%;
    border: 0.5px solid var(--secondary-color);
    background: transparent;
    /* was 100px - a full pill; the theme token keeps it in line with the
       other buttons on the page */
    border-radius: var(--border-radius);
    padding: 5px 10px;
    color: var(--secondary-color);
    font-weight: 500;
    transition: var(--transition);
}

.product-btn button:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}

.product-img a {
    display: block;
}

.product-img {
    text-align: center;
}

.product-img img {
    height: 180px;
    width: 180px !important;
    object-fit: contain;
    object-position: center;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
    display: none !important;
    height: 35px;
    width: 35px;
    line-height: 35px !important;
    text-align: center;
    background: var(--bg-color) !important;
    border-radius: 100% !important;
    opacity: 1;
    margin: 0 !important;
    font-size: 17px !important;
    color: var(--text-color) !important;
}

.owl-nav {
    margin-top: 0 !important;
}

.owl-nav [class*=owl-]:hover {
    color: var(--dark-color) !important;
}

.owl-nav {
    position: absolute;
    top: -62px;
    right: 0;
}

.owl-nav .owl-next {
    margin-left: 7px !important;
}

/* Featured Product End  */







/* Additional Category  */
.add-cat-wrap {
    background: #fdf3e9;
    /* background: #F2F2F2; */
    padding: 20px 20px;
    /* padding: 40px 30px; */
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.add-cat-wrap::before {
    background-color: var(--white-color);
    border-radius: 50%;
    bottom: -17px;
    content: "";
    height: 0;
    position: absolute;
    right: -17px;
    width: 0;
    transition: var(--transition);
    z-index: -1;
}

.add-cat-wrap:hover::before {
    border-radius: 20% 0 0 0;
    bottom: 0px;
    height: 75%;
    right: 0px;
    width: 45%;
}

.add-cat-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.add-cat-img {
    width: 150px;
    height: 135px;
}

.add-cat-content {
    width: calc(100% - 150px);
    padding-right: 25px;
}

.add-cat-content span {
    display: block;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.add-cat-content h3 {
    font-size: 22px;
    margin-bottom: 0;
    font-weight: 500;
}

.add-cat-content a {
    display: inline-block;
    margin-top: 20px;
    background: var(--white-color);
    padding: 5px 15px 6px;
    border: 0.5px solid #dcdcdc;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    color: var(--dark-color);
}

.add-cat-content a:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}

.additional-cat .col-lg-4:nth-child(2) .add-cat-wrap {
    background: #fdf4e9;
}

/* Additional Category End  */




/* Best Selling  */
.best-selling .product-wrap {
    border: none;
    border-radius: 0;
    /* border-right: 0.5px solid var(--border-color); */
    /* border-bottom: 0.5px solid var(--border-color); */
    padding: 25px;
}

.best-selling .row .col-lg-3 {
    width: 16.6666667%;
    padding-left: 0;
    padding-right: 0;
}

.best-selling .row {
    margin-left: 0;
    margin-right: 0;
}

.border-section {
    border: 0.5px solid var(--border-color);
    border-radius: var(--border-radius);
}

.best-selling .product-img img {
    height: 150px;
    width: 150px !important;
}

.best-selling .row .col-lg-3:nth-child(5) .product-wrap {
    border-right: none;
}

.best-selling .row .col-lg-3:nth-child(6) .product-wrap {
    border-bottom: none;
}

.best-selling .row .col-lg-3:nth-child(7) .product-wrap {
    border-bottom: none;
}

.best-selling .row .col-lg-3:nth-child(8) .product-wrap {
    border-bottom: none;
}

.best-selling .row .col-lg-3:nth-child(9) .product-wrap {
    border-bottom: none;
}

.best-selling .row .col-lg-3:nth-child(10) .product-wrap {
    border-bottom: none;
    border-right: none;
}

/* Best Selling End  */






/* Product Ads  */
.product-ads-img {
    overflow: hidden;
    border-radius: var(--border-radius);
    height: 150px;
    /* height: 100px; */
}

.product-ads-img a {
    display: block;
    height: 100%;
    width: 100%;
}

.product-ads-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: ease-in-out .5s;
}

.product-ads-img:hover img {
    transform: scale(1.05);
}

/* Product Ads End  */







/* Thumbnail Product  */
.thumbnail-product .main-title {
    margin-bottom: 14px;
}

.thumbnail-product-wrap {
    border: 0.5px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    position: relative;
    margin-top: 16px;
}

.thumbnail-product-img {
    width: 100px;
    height: 100px;
}

.thumbnail-product-img a {
    display: block;
    height: 100%;
    width: 100%;
}

.thumbnail-product-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.thumbnail-product-content {
    width: calc(100% - 100px);
    padding-left: 15px;
}

.thumbnail-product-content h3 {
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1.4;
}

.thumbnail-product-content h3 a {
    display: block;
    color: var(--dark-color);
    transition: var(--transition);
}

.thumbnail-product-content h3 a:hover {
    color: var(--secondary-color);
}

.thumbnail-product-wrap .product-util {
    position: absolute;
    right: 20px;
    bottom: 30px;
}

.thumbnail-product .row .col-lg-4 {
    padding-left: 8px;
    padding-right: 8px;
}

.thumbnail-product .row {
    margin-left: -8px;
    margin-right: -8px;
}

/* Thumbnail Product End  */





/* Category Option  */
.category-option-col {
    border: 0.5px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 25px;
}

.inner-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5px;
}

.inner-title h3 {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 500;
}

.inner-title a {
    position: relative;
    display: block;
    transition: var(--transition);
}

.inner-title a::before {
    position: absolute;
    content: '';
    bottom: -4px;
    height: 2px;
    width: 40%;
    background: var(--secondary-color);
    transition: var(--transition);
}

.inner-title a:hover {
    color: var(--secondary-color);
}

.inner-title a:hover::before {
    width: 100%;
}

.category-option-img {
    height: 130px;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.category-option-img a {
    display: block;
    height: 100%;
    width: 100%;
}

.category-option-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: var(--transition);
}

.category-option-wrap:hover .category-option-img img {
    transform: scale(1.10);
}

.category-option-info {
    margin-top: 10px;
}

.category-option-info h3 {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 0;
}

.category-option-info h3 a {
    display: block;
    color: var(--dark-color);
    transition: var(--transition);
}

.category-option-info h3 a:hover {
    color: var(--secondary-color);
}

.category-option-wrap {
    margin-top: 20px;
}

/* Category Option End  */






/* Offer Walls  */
.offer-walls-wrap {
    background: #ffd612;
    padding: 30px 40px;
    display: flex;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.offer-walls-left {
    width: 55%;
    padding-right: 10px;
}

.offer-walls-right {
    width: 45%;
}

.offer-walls-left span {
    display: block;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.offer-walls-left h3 {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 0;
}

.offer-walls-left p {
    margin-bottom: 7px;
    color: var(--dark-color);
    margin-top: 15px;
}

.offer-walls-left a {
    display: inline-block;
    border: 0.5px solid var(--dark-color);
    color: var(--dark-color);
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.offer-walls-left a:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.offer-walls-right a {
    display: flex;
}

.offer-walls-right img {
    height: 200px;
    width: 200px;
    object-fit: contain;
    object-position: center;
    margin-left: auto;
    transition: ease-in-out .5s;
}

.offer-walls-wrap:hover .offer-walls-right img {
    transform: scale(1.05);
}

.offer-walls-left b {
    font-weight: 500;
    margin-bottom: 20px;
    display: block;
    font-size: 16px;
}

.offer-walls .col-lg-6:nth-child(2) .offer-walls-wrap {
    background: #05c6c6;
}

.offer-walls .col-lg-6:nth-child(2) .offer-walls-wrap .offer-walls-left span {
    color: var(--white-color);
}

.offer-walls .col-lg-6:nth-child(2) .offer-walls-wrap .offer-walls-left h3 {
    color: var(--white-color);
}

.offer-walls .col-lg-6:nth-child(2) .offer-walls-wrap .offer-walls-left p {
    color: var(--white-color);
}

.offer-walls .col-lg-6:nth-child(2) .offer-walls-wrap .offer-walls-left b {
    color: var(--white-color);
}

.offer-walls .col-lg-6:nth-child(2) .offer-walls-wrap .offer-walls-left a {
    border-color: var(--white-color);
    color: var(--white-color);
    transition: var(--transition);
}

.offer-walls .col-lg-6:nth-child(2) .offer-walls-wrap .offer-walls-left a:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

#countdown {
    /* padding-right: 100px; */
    padding-right: none;
    display: flex;
    align-items: center;
}

#countdown ul {
    display: flex;
}

#countdown h3 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    color: var(--secondary-color);
    margin-right: 5px;
}

#countdown ul li {
    border: 0.5px solid var(--border-color);
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary-color);
    margin-left: 5px;
    text-transform: lowercase;
}

/* Offer Walls End  */






/* Brands  */
.marquee {
    display: flex;
    overflow: hidden;
}

.marquee-list {
    align-items: center;
    animation: marquee 30s linear infinite;
    display: flex;
    flex-shrink: 0;
    gap: calc(clamp(10rem, 1rem + 40vmin, 30rem) / 5);
    justify-content: space-around;
    min-width: 100%;
    margin-left: 1.25rem;
}

.partner-img {
    min-width: 7.5rem;
    text-align: center;
}

.partner-img a {
    display: block;
}

.partner-img img {
    height: 35px;
    width: auto;
}

.marquee-reverse .marquee-list {
    animation-direction: reverse;
}

.marquee-reverse {
    margin-top: 50px;
}

.partner {
    position: relative;
    z-index: 0;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - clamp(10rem, 1rem + 40vmin, 30rem) / 14));
    }
}

/* Brands End  */






/* Footer  */
.footer {
    padding: 50px 0 20px;
    background: var(--primary-color);
}

.footer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 0.5px solid #414142;
}

.social-media ul {
    display: flex;
}

.social-media ul li a {
    display: block;
    color: var(--dark-color);
    color: #ffff;
    font-size: 22px;
    transition: var(--transition);
    height: 28px;
    width: 28px;
    line-height: 28px;
    text-align: center;
    /* background: var(--white-color); */
    border-radius: 10%;
}

.social-media ul li a i {
    line-height: 28px;
}

/* the X mark is an inline SVG (no glyph for it in Line Awesome); sized a touch
   smaller than the 22px icon font so it reads at the same visual weight.
   Centred by flex rather than a margin - the link is 28px on desktop and 36px
   on phones, and a fixed margin left it sitting against the top edge there. */
.social-media ul li a:has(.social-x) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-media ul li a .social-x {
    width: 18px;
    height: 18px;
}

/* Each brand glyph is drawn to a different size inside its em box, so one
   font-size gave marks ranging from 13.8px (youtube) to 19.3px (facebook) of
   actual ink. These per-icon sizes bring every mark to an ~18px box so the row
   reads as one set. Measured, not guessed - see the ink heights in the audit. */
.social-media ul li a .la-facebook-f {
    font-size: 20.5px;
}

.social-media ul li a .la-instagram,
.social-media ul li a .la-linkedin-in {
    font-size: 26px;
}

.social-media ul li a .la-youtube {
    font-size: 22px;
}

.social-media ul li a .la-viber {
    font-size: 23px;
}

.social-media ul li a .la-whatsapp {
    font-size: 24px;
}

.social-media ul li+li a {
    margin-left: 10px;
}

.social-media ul li a:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}

.newsletter {
    width: 450px;
    position: relative;
}

.newsletter .form-control {
    height: 40px;
    border: none;
    border-radius: 3px;
    font-size: 15px;
}

.newsletter button {
    height: 40px;
    border: none;
    background: var(--secondary-color);
    color: var(--white-color);
    border-radius: 3px;
    padding: 5px 15px;
    font-weight: 500;
    margin-left: 5px;
    transition: var(--transition);
}

.newsletter button:hover {
    background-color: var(--button-hover);
}

.newsletter .form-group {
    display: flex;
    align-items: center;
}

.store {
    display: flex;
}

.store a {
    display: block;
    border: 0.5px solid var(--border-color);
    border-radius: 3px;
    color: var(--white-color);
    padding: 5px 15px;
    /* the header row squeezes these between the icons and the 450px
       newsletter, so every label was breaking onto a second line */
    white-space: nowrap;
    transition: var(--transition);
}

.store a+a {
    margin-left: 10px;
}

.store a i {
    margin-right: 5px;
    font-size: 17px;
    vertical-align: middle;
}

.store a:hover {
    background: var(--secondary-color);
    color: var(--white-color);
    border-color: var(--secondary-color);
}

.footer .row .col-lg-3 {
    width: 20%;
}

.footer-wrap h3 {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 15px;
    /* the colour used to come from the <a> inside; headings without a link
       would otherwise inherit the dark body colour on this dark background */
    color: var(--white-color);
}

/* "Sanitary Ware, Fittings & Pipe" and "Electrical Wires, Lights & Boards"
   wrap to two lines; reserving both keeps every column's link list starting on
   the same baseline. Only where the columns actually sit side by side - on a
   phone it just opened a 22px hole under every one-line heading. */
@media (min-width: 992px) {
    .footer-wrap h3 {
        min-height: calc(2 * 1.3 * 17px);
    }
}

.footer-wrap h3 a {
    display: block;
    color: var(--white-color);
    transition: var(--transition);
}

.footer-wrap h3 a:hover {
    color: var(--secondary-color);
}

.footer-wrap ul li a {
    display: block;
    color: #d7d7d7;
    transition: var(--transition);
}

/* letter-spacing on hover re-flowed the label and nudged the text sideways
   under the cursor; the colour change is enough */
.footer-wrap ul li a:hover {
    color: var(--secondary-color);
}

.footer-wrap ul li+li a {
    margin-top: 5px;
}

.footer-wrap {
    margin-bottom: 30px;
}

.footer-bottom {
    background: #1e2733;
    padding: 20px 0;
}

.footer-bottom-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo a {
    display: block;
}

.footer-logo img {
    height: 32px;
    width: auto;
}

.copyright p {
    margin-bottom: 0;
    color: var(--white-color);
    font-size: 15px;
}

.payment-list {
    display: flex;
}

.payment-list img {
    height: 25px;
    width: auto;
    border-radius: 3px;
}

.payment-list img+img {
    margin-left: 7px;
}

/* Footer End  */







/* Details Page  */
.details-page {
    margin-top: 20px;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: '\f105';
    font-family: 'Line Awesome Free';
    font-weight: 900;
    font-size: 13px;
    margin-top: 2px;
    padding-right: 5px;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 5px;
}

.breadcrumb-item a {
    transition: var(--transition);
}

.breadcrumb-item a:hover {
    color: var(--secondary-color);
}

.breadcrumb-item.active {
    color: var(--secondary-color);
}

.breadcrumb {
    margin-bottom: 30px;
}

/* a post title is far longer than the category name these crumbs were built
   for, and .breadcrumb is a nowrap flex row that scrolls sideways. Let the last
   crumb shrink and ellipsis instead - min-width: 0 because a flex item will not
   otherwise go below its content width. */
.blog-details .breadcrumb-item.active {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flexslider {
    margin: 0;
    border: none;

}

.flexslider .slides img {
    border-radius: var(--border-radius);
}

.flex-active-slide img {
    border-color: var(--secondary-color) !important;
}

#slider {
    /* height: 480px; */
    height: 380px;
    overflow: hidden;
    border: 0.5px solid var(--border-color);
    border-radius: var(--border-radius);

}

#slider .flex-viewport {
    height: 480px;
}

#slider img {
    height: 380px;
    width: 100%;
    object-fit: contain;
}

#carousel img {
    border: 0.5px solid var(--secondary-color);
    height: 90px;
    width: 100%;
    object-fit: contain;
}

#carousel {
    margin-top: 10px;
}

.flexslider .slides>li {
    cursor: pointer;
}

.details-page-info {
    padding-left: 15px;
}

.details-page-info>span {
    display: inline-block;
    background: var(--secondary-color);
    font-size: 13px;
    padding: 3px 12px 1px;
    /* border-radius: 50px; */
    color: var(--white-color);
    margin-bottom: 10px;
    background: linear-gradient(269deg, #F35828 50%, #00000003 100%);
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}

.details-stock-left .product-rating {
    margin-top: 0;
}

.details-page-info>span i {
    vertical-align: middle;
    font-size: 16px;
    margin-right: 2px;
    line-height: normal;
}

.details-page-info h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 20px;
}

.details-stock {
    display: flex;
    /* justify-content: space-between; */
    justify-content: flex-start;
    align-items: flex-start;
}

.details-stock-right b {
    font-weight: 500;
    color: var(--additional-color);
    display: block;
    color: #fff;
    padding: 2px 4px 2px 6px;
    border-radius: 3px;
    font-weight: 500;
    font-size: 12px;
    background-color: #388e3c;
}

.details-price-info {
    display: flex;
    margin-top: 10px;
}

.details-price-info .prev-price {
    margin-top: 0;
    margin-right: 15px;
}

.details-qty {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.details-qty-wrap {
    display: flex;
    align-items: center;
}

.details-qty-head h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    margin-right: 20px;
}

.details-compare input {
    height: 18px;
    width: 18px;
    cursor: pointer;
}

.details-compare input:focus {
    box-shadow: none;
    outline: none;
    border-color: var(--border-color);
}

.details-compare label {
    margin-left: 3px;
    color: var(--dark-color);
}

.details-key {
    margin-top: 20px;
}

.details-key p {
    margin-bottom: 0;
    font-size: 13px;
}

.form-check-input:checked {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.details-footer {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.details-buttons button {
    height: 45px;
    width: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 22px;
    border: 0.5px solid var(--border-color);
    background: transparent;
    border-radius: var(--border-radius);
    color: var(--dark-color);
    transition: var(--transition);
    padding: 0;
    margin-left: 10px;
}

.details-buttons {
    display: flex;
}

.details-buttons button:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}

.details-footer-head {
    display: flex;
    width: calc(100%);
    /* width: calc(100% - 45px); */
    align-items: center;
}

.details-footer-head button {
    flex: 1;
    height: 45px;
    border: none;
    border-radius: var(--border-radius);
    /* border-radius: 50px; */
    background: var(--secondary-color);
    font-size: 17px;
    font-weight: 500;
    transition: var(--transition);
    color: var(--white-color);
}

.details-footer-head button:hover {
    background: var(--button-hover);
}

.details-footer-head a {
    flex: 1;
    display: block;
    background: #FF9F00;
    text-align: center;
    padding: 10px 15px;
    height: 45px;
    font-size: 17px;
    font-weight: 500;
    color: var(--white-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
    margin-left: 10px;
}

.details-footer-head a:hover {
    background: #e58e02;
}

.additional-list ul li {
    display: flex;
}

.additional-list ul li i {
    font-size: 25px;
    margin-right: 15px;
    color: var(--secondary-color);
}

.additional-list {
    margin-top: 30px;
}

.additional-list ul li span {
    display: block;
    line-height: 1.4;
}

.additional-list ul li+li {
    margin-top: 4px;
    /* margin-top: 15px; */
}

.nav-tabs {
    border: none;
}

.nav-tabs .nav-link {
    border: none;
    padding: 0;
    font-size: 16px;
    /* font-size: 20px; */
    font-weight: 500;
    color: var(--dark-color);
    margin-right: 40px;
    border-bottom: 3px solid var(--white-color);
    padding-bottom: 5px;
}

.nav-tabs .nav-link:hover {
    border-bottom-color: var(--white-color);
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--dark-color);
}

.details-additional-wrap {
    margin-top: 30px;
}

.details-additional-wrap table td {
    border-color: var(--border-color);
    padding: 12px;
    /* font-size: 16px; */
    font-size: 12px;
}

.details-additional-wrap table>tbody>tr>td:first-child {
    font-weight: 500;
    text-transform: capitalize;
}

.details-additional-wrap table td span {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    font-size: 16px;
}

.details-additional-wrap table td ul li {
    list-style: disc;
    line-height: 1.3;
}

.details-additional-wrap table td ul {
    padding-left: 16px;
}

.details-additional-wrap table td ul li+li {
    margin-top: 5px;
}

.details-additional-wrap h5 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
}

.details-featured-product .product-wrap+.product-wrap {
    margin-top: 25px;
}

.details-add-review-col {
    display: flex;
    justify-content: space-between;
}

.customer-reviews-left {
    flex: 1;
}

.customer-reviews-right {
    flex: 1;
    margin-left: 60px;
}

.details-add-review-col h4 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
}

.customer-review-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customer-rev-star {
    width: 50px;
    display: flex;
    align-items: center;
}

.review-percent {
    width: 50px;
    text-align: right;
}

.review-progress {
    width: calc(100% - 100px);
}

.customer-review-list+.customer-review-list {
    margin-top: 12px;
}

.customer-rev-star b {
    font-weight: normal;
    display: block;
}

.customer-rev-star i {
    color: var(--rating-color);
    margin-left: 3px;
}

.progress {
    border-radius: 50px;
    height: 12px;
}

.progress-bar {
    background: var(--rating-color);
}

.avg-rating-head {
    display: flex;
    align-items: center;
}

.avg-rating-star {
    display: flex;
}

.avg-rating-star i {
    color: rgb(209, 209, 209);
    margin-right: 2px;
}

.avg-rating-star i.fill {
    color: var(--rating-color);
}

.avg-rating-count {
    margin-left: 15px;
}

.avg-rating-count span {
    display: block;
    font-weight: 500;
}

.avg-overall-count {
    margin-top: 10px;
}

.avg-overall-count p {
    margin-bottom: 0;
}

.avg-rating-btn {
    margin: 10px 0;
    display: flex;
}

.avg-rating-btn a {
    display: inline-block;
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 17px;
    padding: 10px 30px;
    font-weight: 500;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.avg-rating-btn a:hover {
    background: var(--button-hover);
}

.avg-rating-info p {
    margin-bottom: 0;
}

.avg-rating-btn button {
    background: transparent;
    color: var(--dark-color);
    font-size: 17px;
    padding: 10px 30px;
    font-weight: 500;
    border-radius: var(--border-radius);
    transition: var(--transition);
    border: 2px solid var(--secondary-color);
    margin-left: 10px;
}

.avg-rating-btn button:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}

.modal-header {
    padding: 17px 25px;
    background: rgb(241 241 241);
    border-bottom: none;
}

.modal-title {
    font-weight: 500;
}

.btn-close {
    opacity: 1;
}

.modal-body {
    padding: 25px;
}

.modal-dialog {
    max-width: 600px;
}

.review-modal label {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}

.review-modal .form-control {
    height: 45px;
    border: 0.5px solid var(--border-color);
    font-size: 15px;
    border-radius: var(--border-radius);
}

.review-modal .form-control:focus {
    border-color: var(--secondary-color);
}

.review-modal .form-group {
    margin-bottom: 15px;
}

.review-modal textarea.form-control {
    height: 120px;
}

.review-modal .modal-body button {
    width: 100%;
    border: none;
    background: var(--secondary-color);
    border-radius: var(--border-radius);
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    margin-top: 10px;
    transition: var(--transition);
    color: var(--white-color);
}

.review-modal .modal-body button:hover {
    background: var(--button-hover);
}

.rate {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked)>label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.rate:not(:checked)>label:before {
    content: '★ ';
}

.rate>input:checked~label {
    color: var(--rating-color);
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: var(--rating-color);
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: var(--rating-color);
}

.main-review {
    margin-top: 50px;
}

.main-review h5 {
    font-size: 20px;
    font-weight: 500;
    border-bottom: 0.5px solid var(--border-color);
    margin-bottom: 40px;
    padding-bottom: 15px;
}

.main-review-list {
    display: flex;
}

.main-review-icon img {
    height: 80px;
    width: 80px;
    object-fit: contain;
    object-position: center;
}

.main-review-content {
    width: calc(100% - 80px);
    padding-left: 25px;
}

.review-content-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-content-head b {
    font-weight: 500;
    font-size: 18px;
    display: block;
}

.main-review-rating {
    display: flex;
    margin-top: 5px;
}

.main-review-rating i {
    margin-right: 3px;
    font-size: 16px;
    color: #d1d1d1;
}

.main-review-rating i.fill {
    color: var(--rating-color);
}

.main-review-content p {
    margin-top: 15px;
    margin-bottom: 0;
}

.main-review-list+.main-review-list {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 0.5px solid var(--border-color);
}

/* Details Page End  */







/* Category Page  */
.category-page {
    margin-top: 20px;
}

.category-sidebar h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 22px;
    margin-top: 5px;
}

.category-sidebar h3 i {
    margin-right: 0px;
}

.category-filter-wrap {
    background: var(--white-color);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.10);
    padding: 25px;
    border-radius: var(--border-radius);
}

.category-filter-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.category-filter-head h4 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
}

.category-filter-head i {
    color: var(--dark-color);
}

.p-range {
    display: flex;
    margin-bottom: 20px;
    margin-top: 20px;
}

.price-range-block {
    padding-bottom: 10px;
}

.p-range input {
    flex: 1;
    height: 35px;
    padding: 5px 10px;
    border: 0.5px solid var(--border-color);
    background: transparent;
    border-radius: var(--border-radius);
    width: 100%;
}

.p-range input+input {
    margin-left: 10px;
}

.p-range input:focus {
    outline: none;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    border-radius: 100%;
    border: 3px solid var(--secondary-color);
    background: var(--white-color);
    cursor: pointer;
    top: -6px;
}

.ui-state-default,
.ui-widget-content .ui-state-default:focus {
    outline: none;
}

.ui-widget-header {
    background: var(--secondary-color) !important;
    border: none !important;
    cursor: pointer;
}

.ui-widget.ui-widget-content {
    border: none;
    background: #e9e9e9;
    margin-left: 10px;
    margin-right: 10px;
}

.ui-slider-horizontal {
    height: 6px;
}

.ui-widget-header {
    background: #3FE331;
}

.price-range-search {
    width: 35%;
    background-color: transparent;
    border: 2px solid var(--secondary-color);
    display: inline-block;
    height: 40px;
    border-radius: var(--border-radius);
    margin-top: 20px;
    font-size: 16px;
    transition: var(--transition);
}

.price-range-search:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

/* The range applies itself, so there is no submit button - just a status
   line and a Clear control, both shown only when they have something to say. */
.price-range-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 22px;
    margin-top: 16px;
}

.price-range-status {
    font-size: 12px;
    color: var(--text-color);
}

.price-range-clear {
    padding: 0;
    font-size: 13px;
    color: var(--text-color);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
    transition: var(--transition);
}

.price-range-clear:hover {
    color: var(--secondary-color);
}

.price-range-clear.is-hidden,
.load-more.is-hidden {
    display: none;
}

/* the grid dims while a filter request is in flight */
.infinite-scroll.is-filtering {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity var(--transition);
}

.price-range-field {
    background-color: #f9f9f9;
    border: 0.5px solid #6e6666;
    color: black;
    border-radius: 5px;
    height: 23px;
    padding: 5px;
}

.search-results-block {
    position: relative;
    display: block;
    clear: both;
}

.category-filter-list+.category-filter-list {
    margin-top: 12px;
    padding-top: 12px;
}

.filter-body .form-check .form-check-input {
    height: 20px;
    width: 20px;
    border-color: #dcdcdc;
    margin-top: 0;
    cursor: pointer;
}

.filter-body label {
    margin-left: 7px;
    cursor: pointer;
}

.filter-body .form-check {
    margin-bottom: 0;
    cursor: pointer;
}

.filter-body ul {
    margin-top: 20px;
    margin-left: 10px;
}

.filter-body ul li {
    margin-top: 12px;
}

.filter-body .form-check .form-check-input:focus {
    box-shadow: none;
}

.category-main-head {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-main-head h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0;
}

.category-main-head .form-control {
    width: 230px;
    border: 0.5px solid var(--border-color);
    font-size: 15px;
    cursor: pointer;
}

/* .category-page .row .col-lg-3 {
    width: 27%;
} */

.category-page .row .col-lg-4 {
    width: 25%;
}

.category-page .row .col-lg-9 {
    width: 73%;
}

.page-link {
    padding: 6px 14px;
    display: block;
    border: 0.5px solid var(--border-color);
    color: var(--dark-color);
    border-radius: var(--border-radius) !important;
    margin-right: 10px;
    font-size: 15px;
    transition: var(--transition);
}

.page-link:hover {
    background: var(--secondary-color);
    color: var(--white-color);
    border-color: var(--secondary-color);
}

.active>.page-link,
.page-link.active {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.pagination {
    margin-top: 22px;
    justify-content: center;
}

.product-wrap.product-card {
    margin-bottom: 25px;
}

/* Bootstrap-4 pager, themed to match the rest of the category page */
.category-pagination .pagination {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.category-pagination .page-link {
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 7px 14px;
    font-size: 14px;
    line-height: 1.4;
    transition: var(--transition);
}

.category-pagination .page-link:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}

.category-pagination .page-item.active .page-link {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}

.category-pagination .page-item.disabled .page-link {
    color: #B5B5B5;
    background-color: #FAFAFA;
    border-color: var(--border-color);
}

.category-pagination .page-link:focus {
    box-shadow: none;
}

/* Category Page End  */








/* Cart Page  */
.cart-page-main h3 {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 500;
}

.cart-page-list {
    border: 0.5px solid var(--border-color);
    padding: 15px;
    border-radius: var(--border-radius);
    position: relative;
}

.cart-page-col {
    display: flex;
}

.car-page-img a {
    display: block;
    height: 100%;
    width: 100%;
}

.car-page-img img {
    height: 50px;
    width: 50px;
    /* height: 104px; */
    /* width: 120px; */
    object-fit: contain;
    object-position: center;
}

.cart-page-content {
    width: calc(100% - 120px);
    padding-left: 15px;
}

.cart-page-content h4 {
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.cart-page-content h4 a {
    display: block;
    color: var(--dark-color);
    transition: var(--transition);
}

.cart-page-content h4 a:hover {
    color: var(--secondary-color);
}

.cart-page-util-left {
    display: flex;
    align-items: center;
}

.cart-page-util-left .prev-price {
    margin-top: 0;
    margin-right: 20px;
}

.cart-page-util {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qty span {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-right: 15px;
}

.cart-page-list+.cart-page-list {
    margin-top: 10px;
}

.cart-page-main {
    margin-right: 20px;
}

.cart-list-close {
    position: absolute;
    top: -5px;
    right: -5px;
}

.cart-list-close button {
    height: 25px;
    width: 25px;
    line-height: 25px;
    text-align: center;
    border: none;
    background: var(--secondary-color);
    border-radius: 100%;
    color: var(--white-color);
    font-size: 14px;
}

.cart-page-sidebar h3 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 20px;
}

.cart-sidebar-col {
    background: #f0f0f0;
    padding: 25px;
    border-radius: var(--border-radius);
}

.cart-sidebar-col ul li {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    /* font-size: 16px; */
    line-height: 1.4;
    color: var(--dark-color);
}

.cart-sidebar-col ul li span {
    display: block;
    width: calc(100% - 100px);
    padding-right: 20px;
}

.cart-sidebar-col ul li b {
    display: block;
    text-align: right;
    white-space: nowrap;
    width: 100px;
    font-weight: 600;
}

.cart-sidebar-col ul li+li {
    margin-top: 10px;
}

.cart-sidebar-col ul {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 0.5px solid #d1d1d1;
}

.discount-code form {
    display: flex;
}

.discount-code .form-control {
    height: 45px;
    font-size: 15px;
    border-radius: var(--border-radius);
    width: calc(100% - 110px);
    margin-right: 5px;
}

.discount-code .form-control:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.discount-code button {
    height: 45px;
    border: none;
    white-space: nowrap;
    background: #FF9F00;
    border-radius: var(--border-radius);
    color: var(--white-color);
    font-weight: 500;
    width: 110px;
    transition: var(--transition);
}

.discount-code button:hover {
    background: var(--button-hover);
}

.discount-code {
    margin-bottom: 15px;
    padding-bottom: 25px;
    border-bottom: 0.5px solid #d1d1d1;
}

.grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grand-total span {
    font-weight: 500;
    font-size: 18px;
    display: block;
}

.grand-total b {
    display: block;
    font-weight: 500;
    font-size: 18px;
}

.common-btn a {
    display: block;
    background: var(--secondary-color);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--white-color);
    padding: 12px 15px;
    border-radius: var(--border-radius);
    transition: var(--transition)
}

.common-btn {
    margin-top: 20px;
}

.common-btn a:hover {
    background: var(--button-hover);
}

/* Cart Page End  */









/* Checkout Page  */
.checkout-main h3 {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 500;
}

.checkout-form {
    border: 0.5px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px;
    background: #f6f6f6;
}

.checkout-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 7px;
    font-size: 13px;
    /* font-size: 16px; */
}

.checkout-form .form-control {
    height: 45px;
    border-radius: var(--border-radius);
    font-size: 15px;
}

.checkout-form .form-control:focus {
    border-color: var(--secondary-color);
}

.checkout-form textarea.form-control {
    height: 180px;
}

.checkout-form .form-group {
    margin-bottom: 20px;
}

.checkout-sidebar h3 {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 500;
}

.checkout-sidebar-wrap {
    border: 0.5px solid var(--border-color);
    border-radius: var(--border-radius);
}

.checkout-product-list {
    display: flex;
    border-bottom: 0.5px solid var(--border-color);
    padding: 20px;
}

.checkout-product-right {
    width: 100px;
    text-align: right;
}

.checkout-product-left {
    width: calc(100% - 100px);
}

.checkout-product-left h3 {
    font-size: 13px;
    line-height: 1.4;
    font-weight: normal;
    margin-bottom: 0;
}

.checkout-product-left b {
    display: block;
    font-weight: 600;
    font-size: 16px;
    margin-top: 3px;
}

.checkout-product-right span {
    display: block;
    font-size: 16px;
    font-weight: 500;
}

.checkout-sidebar-wrap .grand-total {
    padding: 15px 20px 0 20px;
}

.checkout-sidebar-wrap .common-btn {
    padding: 0 20px 20px;
}

/* Checkout Page End  */





/* Login Page  */
.auth-card {
    max-width: 500px;
    margin: auto;
    position: relative;
    z-index: 10;
}

.auth-card-body {
    background: var(--white-color);
    padding: 35px 30px;
    border-radius: 5px;
    box-shadow: 0 1px 30px rgb(0 0 0 / 8%);
}

.auth-page {
    background: #f3f6f9;
}

.auth-card-head {
    margin-bottom: 25px;
}

.auth-card-head img {
    height: 50px;
    width: auto;
}

.auth-card-head h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 500;
}

.auth-card-body label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 7px;
}

.auth-card-body input {
    width: 100%;
    height: 45px;
    border: 0.5px solid #ced4da;
    border-radius: var(--border-radius);
    padding: 5px 15px;
    font-size: 15px;
}

.auth-card-body input:focus {
    outline: none;
    box-shadow: none;
    border: 0.5px solid #ced4da;
}

.auth-card-body .form-group {
    margin-bottom: 15px;
}

.input-form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
}

.user-check {
    display: flex;
    align-items: center;
}

.user-check input {
    height: 18px;
    width: 18px;
    box-shadow: none;
    outline: none;
    border: 0.5px solid var(--secondary-color);
    margin: 0;
}

.user-check label {
    margin-bottom: 0;
    margin-left: 8px;
    font-weight: normal;
    line-height: 1.3;
}

.forgot a {
    display: block;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--secondary-color);
    transition: var(--transition);
}

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

.submit-btn .btn {
    width: 100%;
}

.submit-btn .btns {
    width: 100%;
    border: none;
    background: var(--secondary-color);
    color: var(--white-color);
    padding: 12px 15px;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
    transition: ease-in-out .3s;
    cursor: pointer;
}

.submit-btn .btns:hover {
    background: var(--button-hover);
}

.auth-card-footer p {
    margin-top: 25px;
    text-align: center;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: normal;
}

.auth-card-footer p a {
    display: inline-block;
    color: var(--secondary-color);
    font-weight: 500;
    text-decoration: none;
}

.auth-card-footer p a:hover {
    text-decoration: underline;
}

.password-field {
    position: relative;
}

.toggle-eye {
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 0;
    font-size: 18px;
    cursor: pointer;
}

.other-login span {
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
}

.other-login {
    margin-top: 20px;
}

.other-login-btn a {
    display: flex;
    align-items: center;
    flex: 1;
    color: var(--dark-color);
    font-size: 15px;
    border: 0.5px solid var(--border-color);
    padding: 10px 15px;
    line-height: 1.4;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.other-login-btn a:hover {
    border-color: var(--secondary-color);
}

.other-login-btn a img {
    height: 20px;
    width: 20px;
    object-fit: contain;
    object-position: center;
    margin-right: 8px;
}

.other-login-btn {
    display: flex;
}

.other-login-btn a+a {
    margin-left: 15px;
}

/* Login Page End  */





/* Compare Page  */
.compare-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white-color);
    z-index: 1020;
    box-shadow: 0px -3px 30px rgba(0, 0, 0, 0.20);
    padding: 25px;
    height: 181px;
    display: none;
}

.compare-popup.active {
    bottom: 0;
    opacity: 1;
    visibility: visible;
}

.compare-popup-wrap {
    display: flex;
    justify-content: space-between;
}

.compare-popup-right {
    width: 150px;
}

.compare-popup-left {
    width: calc(100% - 150px);
    display: flex;
}

.compare-popup-list {
    display: flex;
    padding: 15px;
    border: 0.5px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-right: 25px;
    flex: 1;
    position: relative;
    min-height: 131px;
}

.compare-popup-img img {
    height: 80px;
    width: 80px;
    object-fit: contain;
    object-position: center;
}

.compare-popup-content {
    width: calc(100% - 80px);
    padding-left: 10px;
}

.compare-popup-content h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0;
}

.compare-popup-content span {
    display: block;
    margin-top: 10px;
    font-size: 18px;
    font-weight: 500;
    color: var(--secondary-color);
}

.common-btn a i {
    font-size: 18px;
    vertical-align: middle;
    margin-left: 3px;
}

.clear-all {
    margin-top: 10px;
}

.clear-all button {
    padding: 12px 15px;
    color: var(--dark-color);
    border: 2px solid var(--secondary-color);
    width: 100%;
    border-radius: var(--border-radius);
    background: transparent;
    transition: var(--transition);
    font-size: 16px;
    font-weight: 500;
}

.clear-all button:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}

.compare-close {
    position: absolute;
    top: -10px;
    right: -10px;
    height: 24px;
    width: 24px;
    line-height: 24px;
    text-align: center;
    background: #eaeaea;
    color: var(--secondary-color);
    border-radius: 100%;
    font-size: 16px;
    cursor: pointer;
}

.compare-close i {
    line-height: 24px;
}

.compare-popup-close {
    position: absolute;
    top: -36px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    cursor: pointer;
}

.compare-popup-close i {
    background: var(--white-color);
    padding: 9px 10px;
    font-size: 22px;
    height: 36px;
    width: 70px;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    box-shadow: 0px -8px 10px rgba(0, 0, 0, 0.15);
}

.compare-page table thead th {
    width: 25%;
    vertical-align: top;
    padding: 10px;
    border: none;
}

.compare-page-wrap h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
}

.compare-page-wrap .form-control {
    height: 42px;
    font-size: 15px;
}

.comp-img {
    text-align: center;
    margin-top: 15px;
}

.comp-img img {
    height: 150px;
    width: 150px;
    object-fit: contain;
    object-position: center;
}

.compare-page-wrap h4 {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0;
}

.compare-page-wrap h4 a {
    display: block;
    transition: var(--transition);
}

.compare-page-wrap h4 a:hover {
    color: var(--secondary-color);
}

.compare-page-wrap b {
    font-size: 18px;
    font-weight: 500;
    color: var(--secondary-color);
    margin-top: 20px;
    display: block;
}

.table-responsive {
    overflow-x: inherit;
}

.nice-select {
    white-space: inherit;
    padding-left: 10px;
    padding-right: 5px;
}

.nice-select .current {
    line-height: 1.4;
    font-size: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    padding: 10px 18px 7px 3px;
    height: 30px;
}

.nice-select .option {
    font-size: 15px;
    font-weight: normal;
    line-height: 1.6;
}

.nice-select .option+.option {
    border-top: 0.5px solid var(--border-color);
    padding: 10px;
}

.nice-select .option.selected {
    padding: 10px;
    font-weight: normal;
    font-size: 15px;
}

.nice-select.open .list {
    height: 300px;
    overflow-y: auto;
}

.nice-select.open .list::-webkit-scrollbar {
    width: 7px;
}

.nice-select.open .list::-webkit-scrollbar-track {
    background: var(--white-color);
    display: none;
}

.nice-select.open .list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 50px;
}

.compare-page table tbody tr td {
    width: 25%;
    border: none;
    font-size: 16px;
    padding: 10px;
}

.compare-page table tbody tr {
    border: none;
}

.compare-page table tbody tr:first-child td {
    font-weight: 500;
    font-size: 16px;
}

.compare-page table tbody tr td:first-child {
    font-weight: 500;
    font-size: 16px;
}

.compare-page table tbody tr:nth-child(even) td {
    background: #fff1f1;
}

.comps-btn button {
    width: 100%;
    border: none;
    border-radius: var(--border-radius);
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 16px;
    font-weight: 500;
    padding: 10px 15px;
    margin: 10px 0;
    transition: var(--transition);
}

.comps-btn button:hover {
    background: var(--button-hover);
}

/* Compare Page End  */




/* Blog Page */

/* --- grid spacing -------------------------------------------------------
   .bp-wrap is height:100% so cards in a row match. A margin-bottom on the
   card therefore had nowhere to go and rows sat flush against each other
   (measured 0px). The row gap belongs on the column. */
.blog-page .row > [class*="col-"] {
    margin-bottom: 26px;
}

/* --- card --------------------------------------------------------------- */
.bp-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #EBEBEB;
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition);
}

.bp-wrap:hover {
    /* no shadow by request - the border carries the edge */
    border-color: #D0D5DD;
}

/* --- cover -------------------------------------------------------------- */
.bp-img {
    /* Covers are 1200x450 (2.67) banners with text baked in, so the artwork is
       shown whole (contain) inside a taller 2:1 box. The space left over is
       filled with a blurred copy of the same image, so the tile reads as
       full-bleed without cropping the words out of the banner. */
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background-color: #F7F8FA;
    background-size: cover;
    background-position: center;
}

.bp-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(18px) saturate(120%);
    transform: scale(1.15);
}

.bp-img a {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.bp-img img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: ease-in-out .5s;
}

.bp-wrap:hover .bp-img img {
    transform: scale(1.10);
}

/* --- body --------------------------------------------------------------- */
.bp-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 14px 16px 18px;
}

/* meta: date + read time */
.bp-content ul {
    display: flex;
    align-items: center;
    margin-bottom: 9px;
    padding: 0;
    list-style: none;
}

.bp-content ul li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    background: none;
    border-radius: 0;
    color: #9AA0A6;
    font-weight: 400;
    font-size: 12px;
}

.bp-content ul li + li {
    margin-left: 18px;
}

.bp-content ul li i {
    font-size: 14px;
    color: #9AA0A6;
}

.bp-content h3 {
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
    /* fixed 2-line box so every card's excerpt starts at the same y */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.4em);
}

.bp-content h3 a {
    color: var(--dark-color);
    transition: var(--transition);
}

.bp-content h3 a:hover {
    color: var(--secondary-color);
}

.bp-content p {
    /* flex:0 0 auto - the excerpt must NOT absorb the slack, otherwise a short
       excerpt leaves a dead band between the text and Read More.
       The fixed 3-line box is what keeps every Read More on one line. */
    flex: 0 0 auto;
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(3 * 1.6em);
}

.bp-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--secondary-color);
    text-decoration: none;
    transition: var(--transition);
}

.bp-more i {
    font-size: 16px;
    transition: var(--transition);
}

.bp-more:hover i {
    transform: translateX(4px);
}

/* --- listing page ------------------------------------------------------- */

/* full-width "Load more" bar - shared by the blog listing and /products */
.load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 28px;
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 700;
    /* theme accent on the neutral bar; this was the old hover colour */
    color: var(--secondary-color);
    background: #F5F5F5;
    border: 1px solid #EBEBEB;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
}

.load-more i {
    font-size: 15px;
    transition: var(--transition);
}

/* hover now tints the bar instead, since the text is already accented */
.load-more:hover {
    color: var(--secondary-color);
    background: rgba(243, 88, 40, 0.08);
    border-color: rgba(243, 88, 40, 0.25);
}

.load-more:hover i {
    transform: translateY(3px);
}

.load-more:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

.load-more.is-loading {
    opacity: .65;
    cursor: default;
}

.load-more.is-loading i {
    animation: lm-spin .7s linear infinite;
}

@keyframes lm-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .load-more.is-loading i { animation: none; }
}

.blog-count {
    font-size: 13.5px;
    color: #98A2B3;
}

.blog-pager {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.blog-pager .pagination {
    margin: 0;
    flex-wrap: wrap;
    gap: 6px;
}

.blog-pager .page-link {
    min-width: 38px;
    padding: 7px 12px;
    text-align: center;
    font-size: 14px;
    color: var(--dark-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: var(--transition);
}

.blog-pager .page-link:hover {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    background: rgba(243, 88, 40, .07);
}

.blog-pager .page-item.active .page-link {
    color: #fff;
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.blog-pager .page-item.disabled .page-link {
    color: #C3C8D2;
    background: #fff;
    border-color: var(--border-color);
}

/* Blog Page End */





/* Event Details */
.bd-main h1,
.bd-main h3 {
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 600;
}

/* the author/date row. These were ".bd-main ul", which also matched the bullet
   lists inside the post body and flexed them into a single row. */
.bd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.bd-meta li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 16px 6px 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--primary-color);
    background: #F7F8FA;
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.bd-meta li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    font-size: 16px;
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: 50%;
}

/* the author/date row is hidden. Delete this one rule to bring it back - the
   chip styles above are intact and the markup is still in blog_details. */
.bd-meta {
    display: none;
}

.bd-main-img {
    /* was a fixed 450px with object-fit: cover, which cropped a wide banner by
       a third on desktop. The cover keeps its own ratio at every width now. */
    overflow: hidden;
    margin-bottom: 25px;
    border-radius: var(--border-radius);
}

.bd-main-img img {
    display: block;
    width: 100%;
    height: auto;
}

.bd-sidebar {
    position: sticky;
    top: 80px;
}

.bd-main p {
    line-height: 1.6;
}

/* --- share row ------------------------------------------------------------ */
.bd-share {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--border-color);
}

.bd-share__label {
    display: block;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
}

.bd-share__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.bd-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--primary-color);
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.bd-share__btn .share-x {
    width: 16px;
    height: 16px;
}

/* the native-share button carries a label, so it is a pill rather than a circle */
.bd-share__btn.is-native {
    width: auto;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 21px;
}

.bd-share__btn:hover,
.bd-share__btn:focus-visible {
    color: var(--white-color);
    border-color: transparent;
}

.bd-share__btn.is-fb:hover,
.bd-share__btn.is-fb:focus-visible {
    background: #1877F2;
}

.bd-share__btn.is-x:hover,
.bd-share__btn.is-x:focus-visible {
    background: #000000;
}

.bd-share__btn.is-wa:hover,
.bd-share__btn.is-wa:focus-visible {
    background: #25D366;
}

.bd-share__btn.is-li:hover,
.bd-share__btn.is-li:focus-visible {
    background: #0A66C2;
}

.bd-share__btn.is-mail:hover,
.bd-share__btn.is-mail:focus-visible,
.bd-share__btn.is-copy:hover,
.bd-share__btn.is-copy:focus-visible,
.bd-share__btn.is-native:hover,
.bd-share__btn.is-native:focus-visible {
    background: var(--secondary-color);
}

.bd-share__btn.is-done {
    color: var(--white-color);
    background: #12B76A;
    border-color: transparent;
}

.bd-share__status {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--text-color);
}

.bd-search {
    box-shadow: 0 3px 30px 0 rgb(102 102 102 / 20%);
    background: var(--white-color);
    padding: 20px;
    border-radius: 4px;
}

.bd-search .btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    background: var(--primary-color);
    border: none;
    padding: 10px 15px;
    font-size: 25px;
}

.bd-search form {
    position: relative;
}

.bd-search .form-control {
    height: 50px;
    border-radius: 0;
    border: 1px solid #eee;
    padding-right: 65px;
}

.bd-sidebar h3 {
    background: var(--secondary-color);
    padding: 15px 20px;
    border-left: 7px solid var(--secondary-color);
    margin-bottom: 0;
    color: var(--white-color);
    font-weight: 500;
    font-size: 20px;
}

.popular-post {
    /* box-shadow: 0 3px 50px 0 rgb(102 102 102 / 30%); */
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 0.5px solid #f359294a;
    ;
}

.popular-post ul {
    padding: 20px;
    background: var(--white-color);
    border-radius: var(--border-radius);
}

.popular-post ul li {
    display: flex;
    align-items: center;
}

.pp-img {
    height: 70px;
    overflow: hidden;
    flex: 2;
    border-radius: var(--border-radius);
}

.pp-img a {
    width: 100%;
    height: 100%;
}

.pp-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.pp-content {
    margin-left: 20px;
    flex: 6;
}

.pp-content span {
    display: block;
    color: var(--text-color);
    font-size: 12px;
}

.pp-content h4 {
    margin-bottom: 0;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.pp-content h4 a {
    color: var(--dark-color);
    transition: var(--transition);
}

.pp-content h4 a:hover {
    color: var(--secondary-color);
}

.popular-post ul li+li {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    /* border: 0.5px solid #f359294a; */
}

/* Event Details End */


/* Service information */
.ss-main h3 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 500;
}

.ss-main ul {
    display: flex;
    margin-bottom: 5px;
}

/* .ss-main ul li+li { */
.ss-main ul li {
    /* margin-left: 30px; */
    color: #15930a;
}

.ss-main ul li i {
    font-size: 20px;
    margin-right: 3px;
    vertical-align: middle;
    color: var(--primary-color);
}

.ss-main-img {
    /* height: 450px; */
    overflow: hidden;
    margin-bottom: 25px;
    border-radius: var(--border-radius);
}

.ss-main-img img {
    /* height: 100%; */
    height: auto;
    width: 100%;
    object-fit: cover;
}

.ss-sidebar {
    position: sticky;
    top: 80px;
}

.ss-main p {
    line-height: 1.6;
}

.ss-search {
    box-shadow: 0 3px 30px 0 rgb(102 102 102 / 20%);
    background: var(--white-color);
    padding: 20px;
    border-radius: 4px;
}

.ss-search .btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    background: var(--primary-color);
    border: none;
    padding: 10px 15px;
    font-size: 25px;
}

.ss-search form {
    position: relative;
}

.ss-search .form-control {
    height: 50px;
    border-radius: 0;
    border: 1px solid #eee;
    padding-right: 65px;
}

.ss-sidebar h3 {
    background: var(--secondary-color);
    padding: 15px 20px;
    border-left: 7px solid var(--secondary-color);
    margin-bottom: 0;
    color: var(--white-color);
    font-weight: 500;
    font-size: 20px;
}



.service-post ul {
    padding: 20px;
    background: var(--white-color);
    border-radius: var(--border-radius);
}

.service-post ul li {
    display: flex;
    align-items: center;
}

.sp-img {
    height: 70px;
    overflow: hidden;
    flex: 2;
    border-radius: var(--border-radius);
}

.sp-img a {
    width: 100%;
    height: 100%;
}

.sp-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.sp-content {
    margin-left: 20px;
    flex: 6;
}

.sp-content span {
    display: block;
    color: var(--text-color);
    font-size: 12px;
}

.sp-content h4 {
    margin-bottom: 0;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.sp-content h4 a {
    color: var(--dark-color);
    transition: var(--transition);
}

.sp-content h4 a:hover {
    color: var(--secondary-color);
}

.service-post ul li+li {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    /* border: 0.5px solid #f359294a; */
}


.service-post {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.service-post {
    /* box-shadow: 0 3px 50px 0 rgb(102 102 102 / 30%); */
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 0.5px solid #f359294a;
    padding: 12px;
}

.service-item {
    border-radius: 5px;
    padding: 1px;
    text-align: center;
    background: #f6f6f6;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
    width: 85px;
    margin-bottom: 10px;
    border-radius: 8px;
    display: block;
}

.service-item img {
    max-width: 80px;
    height: 63px;
    width: auto;
    /* border-radius: 50%; */
}

.service-item h4 {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
}

/* Service information end */






/* ==========================================================================
   General content pages (about, video, footer pages)
   ========================================================================== */
.general-page {
    padding-top: 10px;
}

/* long-form copy set across the full 1140px container is hard to read; a
   measured column keeps lines at a comfortable length */
.general-shell {
    max-width: 1000px;
    margin: 0 auto;
}

.general-title {
    margin: 0 0 18px;
    font-size: 28px;
    font-weight: 600;
    color: var(--primary-color);
}

.general-page-wrap {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-color);
}

.general-page-wrap > :first-child {
    margin-top: 0;
}

/* the global "p { font-size: 12px }" rule beats inheritance from the wrapper,
   so the size has to be restated here or body copy renders smaller than the
   bullet points next to it */
.general-page-wrap p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.75;
}

.general-page-wrap h2 {
    margin: 30px 0 14px;
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-color);
}

.general-page-wrap h3 {
    margin: 24px 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

.general-page-wrap ul,
.general-page-wrap ol {
    margin: 16px 0;
    padding-left: 20px;
}

.general-page-wrap ol li {
    list-style: decimal;
}

/* was 12px with a 1.4 line-height - smaller and tighter than the paragraphs
   around it, so bulleted points read as fine print */
.general-page-wrap ul li,
.general-page-wrap ol li {
    list-style: disc;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-color);
}

.general-page-wrap ol li {
    list-style: decimal;
}

.general-page-wrap ul li + li,
.general-page-wrap ol li + li {
    margin-top: 8px;
}

.general-page-wrap a {
    color: var(--secondary-color);
}

.general-page-wrap img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.general-page-wrap table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
}

.general-page-wrap th,
.general-page-wrap td {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
}

/* --- video portfolio ------------------------------------------------------ */
.video-gallery__grid > [class*="col-"] {
    margin-bottom: 26px;
}

.video-gallery__item {
    height: 100%;
    overflow: hidden;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.video-gallery__item:hover {
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(35, 47, 62, .14);
    transform: translateY(-3px);
}

/* the embeds carried width="100%" height="200", which squashed a 16:9 video
   into a 1.16 box and left YouTube to letterbox the rest */
.video-gallery__frame {
    aspect-ratio: 16 / 9;
    background: #000000;
}

.video-gallery__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-gallery__item h4 {
    margin: 0;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--primary-color);

    /* titles vary in length; two lines keeps every card the same height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* a video saved without a title would otherwise leave an empty grey strip */
.video-gallery__item h4:empty {
    display: none;
}

.general-empty {
    padding: 60px 20px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.general-empty i {
    display: block;
    font-size: 48px;
    color: #C9CDD3;
}

.general-empty h4 {
    margin: 14px 0 6px;
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
}

.general-empty p {
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-color);
}

.general-empty__cta {
    display: inline-block;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition);
}

.general-empty__cta:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

@media (max-width: 575px) {
    .general-title {
        font-size: 22px;
    }

    .general-page-wrap,
    .general-page-wrap p,
    .general-page-wrap ul li,
    .general-page-wrap ol li {
        font-size: 14.5px;
    }

    .general-page-wrap h2 {
        font-size: 19px;
    }
}
/* General Page End  */

/* Why Choose Us  */
.choose-us-wrap h2 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 20px;
}

.choose-us-wrap h3 {
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 25px;
}

.choose-us-wrap ul {
    margin: 20px 0;
    padding-left: 16px;
}

.choose-us-wrap ul li {
    list-style: disc;
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.4;
}

.choose-us-wrap ul li+li {
    margin-top: 10px;
}

.choose-us {
    /* padding: 50px 0; */
    /* background-color: #f8f9fa; */
}

.choose-us h2 {
    font-size: 1.8rem;
    color: #1d3557;
    text-align: center;
    margin-bottom: 30px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.feature-card {
    background: #FCF4E9;
    padding: 10px;
    border-radius: 5px;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* .feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
} */

/* !important removed: it also beat the "@media (min-width: 769px)" rule in
   responsive.css that tries to set 21px, so that rule never applied and no
   per-breakpoint sizing was possible at all. */
.feature-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 14px;
    line-height: 1.6;
}

/* end choose-us Page End  */


/* Testimonial Page  */
.testimonial-page-wrap h2 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 20px;
}

.testimonial-page-wrap h3 {
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 22px;
}

.testimonial-page-wrap ul {
    margin: 20px 0;
    padding-left: 16px;
}

.testimonial-page-wrap ul li {
    list-style: disc;
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.4;
}

.testimonial-page-wrap ul li+li {
    margin-top: 10px;
}


.testimonial-header {
    margin-bottom: 40px;
}

.testimonial-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--primary-color);
}

.testimonial-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px;
}

.testimonial-card {
    background: linear-gradient(to bottom, #ffe6d5, #ffffff);
    padding: 20px;
    border-radius: 10px;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
    flex: 0 0 300px;
    text-align: center;
}

.testimonial-content {
    margin-bottom: 20px;
}

.quote-icon {
    font-size: 2rem;
    color: var(--secondary-color);
    display: block;
    text-align: left
        /* margin-bottom: 10px; */
}

.testimonial-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* wrapper so a missing or broken photo can fall back to initials */
.testimonial-avatar-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 8px;
    border-radius: 50%;
    border: 4px solid var(--white-color);
    background: #F0F1F3;
    overflow: hidden;
}

/* object-fit was missing, so a non-square photo was squashed into the circle */
.testimonial-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-initials {
    position: absolute;
    font-size: 22px;
    font-weight: 600;
    color: #98A0A9;
}

.testimonial-avatar-wrap:not(.is-empty) .testimonial-initials {
    display: none;
}

.testimonial-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
}

.testimonial-role {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-color);
}

.testimonial-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-color);
}

.testimonial-subtitle {
    font-size: 15px;
    color: var(--text-color);
}

/* .owl-carousel .owl-item img {
    display: block;
    width: 65px;
    height: 65px;
} */
/* Testimonial Page End  */


/* ==========================================================================
   FAQ page
   ========================================================================== */
.faq-page {
    padding-top: 10px;
}

/* a question spanning the full 1140px container is hard to scan; the accordion
   reads far better in a measured column */
.faq-shell {
    max-width: 820px;
    margin: 0 auto;
}

.faq-head {
    margin-bottom: 22px;
    text-align: center;
}

.faq-head h1 {
    margin: 0 0 16px;
    font-size: 28px;
    font-weight: 600;
    color: var(--primary-color);
}

.faq-search {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
}

.faq-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 17px;
    color: #9AA0A8;
    pointer-events: none;
}

.faq-search__input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 40px;
    font-size: 14px;
    color: var(--primary-color);
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    outline: none;
    transition: var(--transition);
}

.faq-search__input:focus {
    border-color: var(--secondary-color);
}

.faq-page-wrap {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    background: var(--white-color);
}

.faq-item:last-child {
    border-bottom: 0;
}

.faq-item.is-hidden {
    display: none;
}

.faq-question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    /* was 13px, smaller than the body copy it introduces */
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    color: var(--primary-color);
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: var(--transition);
}

.faq-question:hover {
    background: #FAFAFA;
    color: var(--secondary-color);
}

.faq-item.is-open .faq-question {
    color: var(--secondary-color);
}

/* was a "+" / "-" swapped in JS; a rotating chevron matches the rest of the
   site and needs no text change */
.faq-icon {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 15px;
    color: #9AA0A8;
    transition: var(--transition);
}

.faq-item.is-open .faq-icon {
    transform: rotate(180deg);
    color: var(--secondary-color);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-color);
}

.faq-noresult {
    margin: 18px 0 0;
    font-size: 14px;
    text-align: center;
    color: var(--text-color);
}

.faq-noresult.is-hidden {
    display: none;
}

.faq-empty {
    padding: 60px 20px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.faq-empty i {
    display: block;
    font-size: 48px;
    color: #C9CDD3;
}

.faq-empty h4 {
    margin: 14px 0 6px;
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
}

.faq-empty p {
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-color);
}

.faq-empty__cta {
    display: inline-block;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition);
}

.faq-empty__cta:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

.faq-foot {
    margin-top: 22px;
    padding: 16px 20px;
    text-align: center;
    font-size: 14px;
    color: var(--text-color);
    background: #FAFAFA;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.faq-foot a {
    margin-left: 6px;
    font-weight: 500;
    color: var(--secondary-color);
    text-decoration: none;
}

.faq-foot a:hover {
    text-decoration: underline;
}

/* long-form answers written in the editor keep their formatting */
.faq-answer h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.faq-answer h3 {
    margin: 16px 0 10px;
    font-size: 17px;
}

.faq-answer ul {
    margin: 12px 0 18px;
    padding-left: 18px;
}

.faq-answer ul li {
    list-style: disc;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-color);
}

.faq-answer ul li + li {
    margin-top: 8px;
}

@media (max-width: 575px) {
    .faq-head h1 {
        font-size: 22px;
    }

    .faq-question {
        padding: 14px 16px;
        font-size: 14px;
    }

    .faq-answer {
        padding: 0 16px;
    }
}
/* FAQ's End  */



/* Contact Us Page  */
.contact-us-list-wrap {
    /* border: 1px solid var(--border-color); */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.07);
    padding: 25px;
    border-radius: 7px;
    margin-bottom: 25px;
}

.contact-us-list-wrap h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 25px;
    background: #f9f9f9;
    padding: 12px 25px;
    margin-left: -25px;
    margin-right: -25px;
    margin-top: -25px;
    border-bottom: 1px solid var(--border-color);
}

.contact-us-list-wrap ul li {
    display: flex;
    align-items: flex-start;
}

.contact-us-list-wrap ul li a {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    color: var(--dark-color);
    transition: var(--transition);
}

.contact-us-list-wrap ul li a:hover {
    color: var(--secondary-color);
}

.contact-us-list-wrap ul li i {
    font-size: 20px;
    color: var(--secondary-color);
    margin-top: 4px;
    margin-right: 10px;
}

.contact-us-list-wrap ul li+li {
    margin-top: 10px;
}

.contact-us-form {
    /* background: rgb(243 89 41 / 4%); */
    border: 1px solid #f3582847;
    border-radius: 10px;
    padding: 30px;
    margin-top: 20px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.07)
}

.contact-us-form h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
}

.contact-us-form label {
    font-size: 16px;
    margin-bottom: 7px;
    color: var(--dark-color);
    display: block;
    font-weight: 500;
}

.contact-us-form .form-control {
    height: 45px;
    border-radius: var(--border-radius);
    /* border: 1px solid var(--secondary-color); */
}

.contact-us-form textarea.form-control {
    height: 134px;
}

.contact-us-form .form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--secondary-color);
}

.contact-us-form .form-group {
    margin-bottom: 15px;
}

.contact-us-form button {
    margin-top: 15px;
    background: var(--secondary-color);
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--white-color);
    padding: 10px 30px;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.contact-us-form button:hover {
    background: var(--button-hover);
}

.call-to-action {
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
}

.cta-content {
    padding: 30px;
}

.cta-img {
    height: 254px;
    overflow: hidden;
}

.cta-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.cta-content h3 {
    font-size: 22px;
    color: var(--dark-color);
    font-weight: 500;
    margin-bottom: 12px;
}

.cta-content p {
    color: var(--text-color);
    line-height: 1.5;
}

.call-us a {
    display: block;
    color: var(--dark-color);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.3px;
}

.call-us a i {
    vertical-align: middle;
    margin-right: 5px;
    font-size: 34px;
}

.cta-btn {
    display: flex;
    margin-top: 27px;
}

.cta-btn a {
    display: block;
    flex: 1;
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    text-align: center;
    transition: var(--transition);
}

.cta-btn a:first-child:hover {
    background: var(--button-hover);
}

.cta-btn a+a {
    margin-left: 10px;
    background: var(--white-color);
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.cta-btn a+a:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}

/* Contact Us Page End  */

/* ------------------- */

/* Main Header */
.main-header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-toggle img {
    cursor: pointer;
    width: 30px;
    height: auto;
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 7px 0 0 20px;
    display: flex;
    align-items: flex-start;
    /* gap: 20px; */
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
    background: #ffff;
    /* box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.10); */
    border-radius: 8px;
}

.menu-item {
    position: relative;
}

.menu-item>a {
    color: #242f3e;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    /* padding: 5px 10px; */
    padding: 6px 0;
    display: flex;
    align-items: center;
}

.menu-item>a:hover {
    color: #f90;
}

.icon-angle-down {
    margin-left: 5px;
    font-size: 12px;
}

/* Mega Menu */
.mega-menu {
    /* visibility (not display:none) so the panel can be reached by keyboard */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    /* opens beside the sidebar instead of dropping below it and covering
       the banner; top:100% used to push it down over the page content */
    top: -12px;
    left: calc(100% + 10px);
    display: block;
    /* multi-column, not grid: category lists are very uneven (several groups
       have no children), and grid rows would size to the tallest cell and
       leave large gaps. Columns pack the groups tightly instead. */
    columns: 168px 4;
    column-gap: 28px;
    width: min(720px, calc(100vw - 48px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 24px 26px;
    background-color: #fff;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
    border: 1px solid #EDEFF3;
    border-radius: 12px;
    z-index: 30;
    transform: translateX(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

/* the bridge must belong to .menu-item, so hovering it still satisfies
   .menu-item:hover; only rendered while open so it never blocks the page */
.menu-item:hover::after,
.menu-item:focus-within::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 100%;
    width: 16px;
    height: calc(100% + 24px);
}

.menu-item:hover .mega-menu,
.menu-item:focus-within .mega-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.mega-menu-group {
    /* keep a heading and its list together in one column */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
}

.mega-menu-group h3 {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid #EDEFF3;
    letter-spacing: .01em;
}

.mega-menu-group h3 a {
    text-decoration: none;
    color: #1F2430;
    transition: color .15s ease;
}

.mega-menu-group h3 a:hover {
    color: var(--secondary-color);
}

.sub-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub-menu-item {
    margin: 0;
}

/* level 4 and deeper - indent only, no rules/borders */
.sub-menu-list--nested {
    margin: 1px 0 5px 12px;
}

.sub-menu-list--nested .sub-menu-item a {
    font-size: 11.5px;
    color: #7A828F;
    padding-top: 3px;
    padding-bottom: 3px;
}

.sub-menu-item a {
    display: block;
    padding: 5px 8px;
    margin-left: -8px;
    text-decoration: none;
    color: #5C6370;
    font-size: 12.5px;
    line-height: 1.45;
    border-radius: 6px;
    transition: color .15s ease, background-color .15s ease;
}

.sub-menu-item a:hover {
    color: var(--secondary-color);
    background-color: rgba(243, 88, 40, .07);
}

/* keyboard focus still needs its own indicator */
.sub-menu-item a:focus-visible {
    color: var(--secondary-color);
    background-color: rgba(243, 88, 40, .07);
    outline: 2px solid var(--secondary-color);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .mega-menu {
        transition: none;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu-list {
        display: none;
        flex-direction: column;
        gap: 10px;
    }

    .menu-toggle {
        display: block;
    }

    .menu-toggle img {
        width: 40px;
    }

    /* hover dropdowns don't work on touch - keep it collapsed on mobile */
    .menu-item:hover .mega-menu,
    .menu-item:focus-within .mega-menu {
        display: none;
    }

    .menu-list.active {
        display: flex;
    }
}

/* For membership */
.pricing-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.plan {
    border-radius: 15px;
    padding: 20px;
    width: 300px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.basic {
    background: #f359291a;
}

.best {
    background: #111827;
    color: white;
}

.fantastic {
    background: #f359291a;
}

.plan-title {
    background: #f35929;
    padding: 10px;
    border-radius: 15px;
    color: white;
    font-weight: bold;
}

.best .plan-title {
    background: #f35929;
}

.price {
    font-size: 35px;
    margin: 10px 0;
}

.features {
    text-align: left;
    padding: 0;
    list-style-type: none;
}

.features li {
    margin: 5px 0;
    padding-left: 20px;
    background: url('https://img.icons8.com/ios-filled/20/000000/checkmark.png') no-repeat left center;
    background-size: 16px;
}

.select-btn {
    margin-top: 20px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #f35929;
    color: white;
    cursor: pointer;
}

.plan {
    width: 100%;
    max-width: 350px;
}

/* for membership end */

/* ==========================================================================
   Team page
   ========================================================================== */
.team-section {
    padding-top: 10px;
}

.team-head {
    margin-bottom: 26px;
}

.team-title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--primary-color);
}

/* grid, not centred flex: a final row with fewer members used to float in the
   middle of the page instead of lining up under the row above */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 22px 20px;
}

.team-member {
    overflow: hidden;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    transition: var(--transition);
}

.team-member:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 6px 20px rgba(35, 47, 62, 0.08);
}

.team-member__photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #F4F5F7;
}

/* was height:200px with object-fit:fill, which stretched every portrait to
   the same box and distorted all of them */
.team-member__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.team-member:hover .team-member__photo img {
    transform: scale(1.04);
}

/* initials stand in for a missing or broken photo */
.team-member__initials {
    position: absolute;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #A8AEB7;
}

.team-member__photo:not(.is-empty) .team-member__initials {
    display: none;
}

.team-member__body {
    padding: 14px 12px 16px;
}

.team-member__body h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--primary-color);
}

.team-member__body p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-color);
}

.team-empty {
    padding: 60px 20px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.team-empty i {
    display: block;
    font-size: 48px;
    color: #C9CDD3;
}

.team-empty h4 {
    margin: 14px 0 6px;
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
}

.team-empty p {
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-color);
}

.team-empty__cta {
    display: inline-block;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition);
}

.team-empty__cta:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

@media (max-width: 575px) {
    .team-title {
        font-size: 22px;
    }

    .team-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px 12px;
    }

    .team-member__body {
        padding: 12px 8px 14px;
    }
}
/* end team member */

/* |================================| */
/* |================================| */
/*  */
.emptycart_wrapper p {
    font-size: 14px;
    color: rgb(117, 117, 117);
    line-height: 20px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 16px;
}

.emptycart_wrapper img {
    height: auto;
    width: 114px;
}

.emptycart_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(227, 227, 227, 1.00);
    border-radius: 4px;
    margin-bottom: 15px;
    padding: 21px;
}

.cartitem_head {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 13px;
}

.cartalertmessage {
    color: rgb(255, 255, 255);
    font-size: 12px;
    line-height: 16px;
    background-color: #07794c;
    text-align: center;
    padding: 9px 0;
    font-weight: 600;
}

.cartalertmessage i {
    margin-right: 3px;
    font-size: 16px;
    vertical-align: text-bottom;
}

.cartitem_item {
    display: flex;
    justify-content: space-between;
}

.item_name {
    font-size: 14px;
    line-height: 20px;
    width: 35%;
}

/* Quantity stepper. Rules cover <a> and <button> alike: the service-page
   sidebar renders anchors and the cart page renders buttons, and buttons were
   picking up the browser's default grey chrome because only `a` was styled. */
.quantity {
    display: inline-flex;
    align-items: stretch;
    height: 34px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.quantity a,
.quantity button {
    display: flex;
    align-items: center;
    justify-content: center;
    /* stretch alone left them 17px tall inside a 34px box - the whole cell
       should be clickable */
    align-self: stretch;
    width: 32px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    color: var(--text-color);
    background: transparent;
    border: 0;
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
}

.quantity a span,
.quantity button span {
    color: inherit;
    line-height: 1;
}

.quantity a:hover,
.quantity button:hover {
    color: var(--secondary-color);
    background: rgba(243, 88, 40, 0.08);
}

.quantity a:focus-visible,
.quantity button:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: -2px;
}

.quantity input {
    width: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    background: none;
    border: 0;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.cart_with_item_wrapper {
    /* border: 1px solid black; */
    margin-bottom: 15px;
    box-shadow: 0px 4px 12px rgba(15, 15, 15, 0.08);
    border: 1px solid rgba(227, 227, 227, 1.00);
    border-radius: 8px;
}

.item_price p:first-of-type {
    margin-bottom: 0;
    color: rgb(15, 15, 15);
    font-size: 12px;
}

.item_price p:nth-child(2) {
    margin-bottom: 0;
    color: rgb(117, 117, 117);
    font-size: 12px;
}

.cartitem_body {
    padding: 16px;
}

.viewcart_wrapper {
    display: flex;
    justify-content: space-between;
    /* background-color: #572ac8; */
    background-color: var(--secondary-color);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
}

.cartbutton_wrapper {
    padding: 16px;
}

.price_tag_wrapper s {
    margin-left: 4px;
    color: rgba(255, 255, 255, 1.00);

}

.addtocart_wrapper {
    font-size: 14px;
    font-weight: 600;
}

.cartitem_item:not(:last-of-type) {
    margin-bottom: 14px;
}

.viewdetail_text_link {

    color: var(--secondary-color);
    font-weight: 600;
    font-size: 14px;
}

.view_info .modal-body h1 {
    font-size: 20px;
    line-height: 28px;
}

.view_info .btn-close {
    position: absolute;
    right: -36px;
    top: 0;
    background-color: white;
    padding: 10px;
    border-radius: 50%;
}

.view_info .modal-footer button:hover {
    background-color: #07794c;
}

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

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

.view_info .modal-footer button {
    background-color: var(--secondary-color);
    height: 48px;
    width: 100%;
}

.view_info .modal-footer {
    padding: 3px;
}

.review_tabwrapper .nav-item button {
    border: 1px solid #e2e1e1;
    margin-right: 7px;
    color: rgb(117, 117, 117);
    font-size: 14px;
    font-weight: 600;
}

.review_tabwrapper .nav-item .active {
    background-color: #efecec;
    color: rgb(0 0 0 / 78%);
    border-color: rgb(0 0 0 / 78%);
}

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

.rwComment_head h3 {
    font-size: 20px;
    font-weight: 600;
    color: rgb(15, 15, 15);
    margin-bottom: 7px;
}

.rwComment_head span {
    background-color: rgba(7, 121, 76, 1.00);
    padding: 5px 8px;
    color: white;
    display: inline-block;
    border-radius: 4px;
}

.rwComment_head div p {
    color: rgb(84, 84, 84);
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 13px;
}

.rwcomment_body p {
    color: rgb(15, 15, 15);
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    margin-bottom: 8px;
}


.review_commentsItem:not(:last-of-type) {
    border-bottom: 1px solid #eae9e9;
    margin-bottom: 21px;
}

.revewcomment_wrapper {
    height: 200px;
    overflow-y: scroll;
}

.service-post-item h4 {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    text-align: center;
}

.service-post-item {
    position: relative;
    cursor: pointer;
    width: 33.33333%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 16px;
}

.service-post-item a {
    border: 2px solid transparent;
}

.service-post-item .active {
    border: 2px solid #6e6e6e;
}

.service-post-item h4 {
    position: relative;
}

.service-post-item:before {
    content: '';
    width: 0%;
    height: 2px;
    background-color: black;
    position: absolute;
    left: 0;
    bottom: 3px;
    right: 0;
    margin: 0 auto;
    transition: ease-in-out 0.3s;
}

.service-post-item:hover:before {
    width: 70%;
    transition: ease-in-out 0.3s;
}

.top_ss_content_title div:first-of-type {
    width: 68%;
}
.top_ss_content_title{
    display: flex;
    justify-content: space-between;
}

/* |================================| */
/* |================================| */


/* |================================| */

.city {
    display: inline-block;
    border-radius: 8px;
}

/* Bootstrap's .form-control strips the native arrow, which left this looking
   like a plain button with no hint it opens. Pin + caret are inline SVG, so
   they cost no extra request. */
.city select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: auto;
    padding: 9px 32px 9px 34px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    background-color: #377a4b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: left 11px center, right 11px center;
    background-size: 14px 14px, 11px 11px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.city select:hover {
    background-color: #2d6540;
}

.city select:focus,
.city select:focus-visible {
    outline: none;
    background-color: #2d6540;
    box-shadow: 0 0 0 3px rgba(55, 122, 75, .38);
}

/* Deliberately NOT restyling <option>: browsers paint the CLOSED select using
   the selected option's colour, so a dark option colour overrides the white
   label above. Left to the browser, the open list stays readable either way. */

/* main-sidemenu */
.main-side-menu{
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.10);
    border-radius: 8px;

}

/* ==========================================================================
   Shop page (/shop) - filter sidebar, chips, skeletons, mobile drawer
   ========================================================================== */

/* --- sidebar shell ------------------------------------------------------- */
.category-sidebar .sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* the theme puts 22px under .category-sidebar h3; wrapping the heading to
       add "Clear all" moved that margin onto this row, and zeroing it left
       "Filters" and "Price" looking like one heading split over two lines */
    margin-top: 5px;
    margin-bottom: 22px;
}

.category-sidebar .sidebar-head h3 {
    margin: 0;
}

.filter-clear-all {
    padding: 0;
    font-size: 13px;
    color: var(--secondary-color);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.filter-clear-all.is-hidden,
.filter-close {
    display: none;
}

/* keeps the filters in view on a long results page */
@media (min-width: 992px) {
    .category-sidebar {
        position: sticky;
        top: 20px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.category-filter-head {
    cursor: pointer;
    user-select: none;
}

/* --- filter options ------------------------------------------------------ */
/* a long list scrolls instead of pushing the page down */
.filter-options {
    max-height: 230px;
    overflow-y: auto;
    padding-right: 4px;
}

.filter-options::-webkit-scrollbar {
    width: 5px;
}

.filter-options::-webkit-scrollbar-thumb {
    background: #D8D8D8;
    border-radius: 5px;
}

.filter-options .form-check {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
}

.filter-options .form-check-input {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
    accent-color: var(--secondary-color);
}

.filter-options .form-check-label {
    flex: 1 1 auto;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}

.filter-options .form-check-label:hover,
.filter-options .form-check-input:checked+.form-check-label {
    color: var(--secondary-color);
}

.filter-options .form-check span {
    flex: 0 0 auto;
    font-size: 12px;
    color: #9A9A9A;
}

.filter-empty {
    font-size: 13px;
    color: #9A9A9A;
}

/* --- active filter chips -------------------------------------------------- */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.active-filters.is-empty {
    display: none;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12.5px;
    color: var(--primary-color);
    background: #F5F5F5;
    border: 1px solid var(--border-color);
    border-radius: 100px;
    cursor: pointer;
    transition: var(--transition);
}

.filter-chip:hover {
    color: var(--white-color);
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.filter-chip i {
    font-size: 14px;
}

.filter-chip--clear {
    background: transparent;
    border-style: dashed;
}

/* --- loading skeletons ---------------------------------------------------- */
.product-skeleton {
    margin-bottom: 25px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.product-skeleton span {
    display: block;
    border-radius: 4px;
    background: linear-gradient(90deg, #F0F0F0 25%, #E4E4E4 37%, #F0F0F0 63%);
    background-size: 400% 100%;
    animation: sk-shimmer 1.3s ease-in-out infinite;
}

.product-skeleton .sk-img {
    height: 150px;
    margin-bottom: 14px;
}

.product-skeleton .sk-line {
    height: 11px;
    margin-bottom: 8px;
}

.product-skeleton .sk-line--price {
    width: 45%;
    height: 14px;
}

.product-skeleton .sk-line--short {
    width: 65%;
}

.product-skeleton .sk-btn {
    height: 32px;
    margin-top: 14px;
}

@keyframes sk-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .product-skeleton span { animation: none; }
}

/* --- empty state ---------------------------------------------------------- */
.grid-empty {
    padding: 50px 20px;
    text-align: center;
}

.grid-empty i {
    font-size: 46px;
    color: #D5D5D5;
}

.grid-empty h4 {
    margin: 14px 0 6px;
    font-size: 17px;
    font-weight: 600;
}

.grid-empty p {
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--text-color);
}

.grid-empty__reset {
    padding: 9px 22px;
    font-size: 14px;
    color: var(--white-color);
    background: var(--secondary-color);
    border: 0;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.grid-empty__reset:hover {
    opacity: 0.88;
}

/* --- results bar ----------------------------------------------------------- */
.category-main-head {
    flex-wrap: wrap;
    gap: 10px;
}

.filter-toggle {
    display: none;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--primary-color);
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
}

.filter-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    font-size: 11px;
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: 100px;
}

/* --- mobile drawer ---------------------------------------------------------- */
.filter-backdrop {
    display: none;
}

@media (max-width: 991px) {
    .filter-toggle {
        display: inline-flex;
    }

    /* responsive.css already turns .category-filter-wrap into a fixed drawer
       revealed by .active - reuse it instead of stacking a second one on the
       parent, which would leave the panel blank behind the backdrop. */
    .category-filter-wrap {
        padding: 50px 18px 24px;
        background: var(--white-color);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
    }

    /* the theme hides every sidebar h3 on mobile; ours lives in the drawer */
    .category-sidebar .sidebar-head h3 {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 17px;
    }

    .filter-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1021;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), visibility var(--transition);
    }

    body.filters-open .filter-backdrop {
        opacity: 1;
        visibility: visible;
    }

    body.filters-open {
        overflow: hidden;
    }

    .filter-close {
        display: block;
        position: absolute;
        top: 12px;
        right: 14px;
        padding: 4px 8px;
        font-size: 22px;
        line-height: 1;
        background: none;
        border: 0;
        cursor: pointer;
        z-index: 2;
    }

    .filter-options {
        max-height: none;
    }

    /* two cards per row beats one tall column on a phone */
    .category-page .category-main-body [class*="col-"] {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 7px;
        padding-right: 7px;
    }

    .category-page .category-main-body .row {
        margin-left: -7px;
        margin-right: -7px;
    }
}

/* ==========================================================================
   Shop product card - borderless, image-led, price row carries the discount.
   Scoped to .product-card, the class the shared partial puts on every card, so
   the product detail view and the older filter partials keep their own look.
   ========================================================================== */

.product-wrap.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    margin-bottom: 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.product-wrap.product-card:hover {
    box-shadow: none;
}

/* --- image ---------------------------------------------------------------- */
.product-card .product-img {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--white-color);
}

.product-card .product-img__link {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 18px;
}

.product-card .product-img__link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.45s ease;
}

.product-wrap.product-card:hover .product-img__link img {
    transform: scale(1.05);
}

/* --- badges --------------------------------------------------------------- */
.product-card .badge-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    max-width: calc(100% - 60px);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* wishlist + add-to-cart, stacked top-right over the image */
.product-card .product-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateX(6px);
    transition: var(--transition);
}

.product-wrap.product-card:hover .product-actions {
    opacity: 1;
    transform: translateX(0);
}

.product-card .icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 100%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: var(--transition);
}

.product-card .icon-btn:hover:not(:disabled) {
    color: var(--white-color);
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.product-card .icon-btn:disabled {
    color: #C4C4C4;
    cursor: not-allowed;
}

.product-card .product-actions form {
    margin: 0;
    line-height: 0;
}

/* touch devices have no hover, so the icons stay visible there */
@media (hover: none) {
    .product-card .product-actions {
        opacity: 1;
        transform: none;
    }
}

/* --- content -------------------------------------------------------------- */
.product-card .product-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 12px 2px 0;
}

/* No min-height here. Reserving two lines left 21px of dead air under every
   one-line title; the price row is bottom-anchored instead, which keeps prices
   aligned across a row without padding out the title. */
.product-card .product-content h3 {
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    /* the unscoped .product-content h3 rule still reserves two lines for the
       home pages; this page anchors the price instead, so release it */
    min-height: 0;
}

.product-card .product-content h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--primary-color);
    transition: var(--transition);
}

.product-card .product-content h3 a:hover {
    color: var(--secondary-color);
}

.product-card .product-rating {
    display: flex;
    align-items: center;
    gap: 1px;
    margin: 0 0 7px;
}

.product-card .product-rating i {
    font-size: 15px;
    margin-right: 1px;
}

.product-card .rating-count {
    margin-left: 7px;
    font-size: 12.5px;
    color: var(--text-color);
    white-space: nowrap;
}

/* --- price row: old, new, then the saving as a pill ----------------------- */
.product-card .both-price {
    /* deliberately NOT margin-top:auto - anchoring the price to the card
       bottom aligned it across the row but opened a 61px gap under the stars.
       Title, rating and price read better as one tight block. */
    display: flex;
    align-items: center;
    /* sized so "Rs.2,000 Rs.1,879 -6%" - the longest combination currently in
       the catalogue - fits one line in a 4-up column (needs 158 of 159px).
       wrap stays on as a safety net if a much larger price is ever added. */
    gap: 5px;
    flex-wrap: wrap;
}

.product-card .prev-price del {
    font-size: 12px;
    color: #9A9A9A;
}

.product-card .new-price span {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
}

.product-card .price-off {
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--secondary-color);
    background: rgba(243, 88, 40, 0.1);
    border-radius: 4px;
}

/* --- out of stock ---------------------------------------------------------- */
.product-wrap.product-card.is-soldout .product-img__link img {
    opacity: 0.45;
    filter: grayscale(0.6);
}

.product-wrap.product-card.is-soldout:hover .product-img__link img {
    transform: none;
}

.product-card .soldout-flag {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50px;
    white-space: nowrap;
    pointer-events: none;
}


/* --- "Customer reviews" rating facet -------------------------------------- */
.rating-clear {
    padding: 0;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-color);
    background: none;
    border: 0;
    cursor: pointer;
    transition: var(--transition);
}

.rating-clear:hover {
    color: var(--secondary-color);
}

.rating-clear.is-hidden {
    display: none;
}

/* the radio itself is hidden; the star row is the control */
.rating-options input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rating-options li {
    padding: 2px 0;
}

.rating-options label {
    display: flex;
    align-items: center;
    gap: 1px;
    margin: 0;
    cursor: pointer;
}

.rating-options label i {
    font-size: 17px;
    color: var(--rating-color);
}

.rating-options label span {
    margin-left: 6px;
    font-size: 13px;
    color: var(--text-color);
}

.rating-options label:hover span,
.rating-options input:checked + label span {
    color: var(--secondary-color);
}

.rating-options input:checked + label {
    font-weight: 600;
}

/* keyboard users still need to see focus on a visually hidden radio */
.rating-options input:focus-visible + label {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- toast messages (bottom-right) ---------------------------------------- */
.toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    /* right-aligned so stacked toasts of different widths line up on the edge
       they sit against */
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

.toast-msg {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 330px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(243, 88, 40, 0.3);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.toast-msg.is-in {
    opacity: 1;
    transform: translateY(0);
}

.toast-msg i {
    flex: 0 0 auto;
    font-size: 19px;
    color: var(--white-color);
}

/* errors go dark instead: an orange-on-orange icon would vanish, and a
   failure should not look identical to a success */
.toast-msg--error {
    background: var(--primary-color);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

/* the cart icon spins while its request is in flight */
.product-card .cart-btn.is-loading i {
    animation: cart-spin 0.7s linear infinite;
}

@keyframes cart-spin {
    to { transform: rotate(360deg); }
}

/* a saved product reads as saved once the rail is revealed: filled heart in
   the brand colour. The rail itself stays hover-only - a card that is already
   saved should look the same at rest as any other. */
.product-card .wishlist-btn.is-saved {
    color: var(--white-color);
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.product-card .wishlist-btn.is-saved:hover {
    color: var(--white-color);
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.product-card .wishlist-btn.is-loading {
    pointer-events: none;
}

.product-card .wishlist-btn.is-loading i {
    animation: wishlist-pulse 0.7s ease-in-out infinite;
}

@keyframes wishlist-pulse {
    50% { transform: scale(0.75); opacity: 0.5; }
}

@media (max-width: 575px) {
    /* centred and sized to its text, rather than a full-width bar: "stretch"
       made every toast span the whole screen even for a short message */
    .toast-stack {
        left: 12px;
        right: 12px;
        bottom: 12px;
        align-items: center;
        gap: 8px;
    }

    .toast-msg {
        max-width: 100%;
        gap: 7px;
        padding: 9px 14px;
        font-size: 12.5px;
        line-height: 1.4;
        border-radius: 50px;
        box-shadow: 0 4px 16px rgba(243, 88, 40, 0.28);
    }

    .toast-msg i {
        font-size: 16px;
    }

    /* a long product name would otherwise run to three or four lines */
    .toast-msg span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-msg { transition: none; }
    .product-card .cart-btn.is-loading i { animation: none; }
    .product-card .wishlist-btn.is-loading i { animation: none; }
}

/* category page heading */
.category-page .category-title {
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
}

/* ==========================================================================
   Service category page (/kathmandu-services/{slug})
   ========================================================================== */

.service-cat-title {
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
}

/* price was never rendered even though every service product has one */
.ss-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
}

.ss-price del {
    font-size: 13px;
    color: #9A9A9A;
}

.ss-price span {
    font-size: 17px;
    font-weight: 600;
    color: var(--secondary-color);
}

/* placeholder for the records whose cover_image is null or whose file is gone */
.ss-main-img {
    position: relative;
    min-height: 60px;
}

.ss-img-fallback {
    display: none;
}

.ss-main-img.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    background: #F6F7F9;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.ss-main-img.is-empty .ss-img-fallback {
    display: block;
    font-size: 34px;
    color: #C6CBD2;
}

.service-item.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    background: #F6F7F9;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.ss-empty {
    padding: 22px 0;
    font-size: 14px;
    color: var(--text-color);
}

/* --- service tiles that jump to their products ---------------------------- */
.service-post-item.is-linked {
    cursor: pointer;
    border-radius: 8px;
    transition: var(--transition);
}

.service-post-item.is-linked:hover h4,
.service-post-item.is-active h4 {
    color: var(--secondary-color);
}

.service-post-item.is-active .service-item {
    box-shadow: 0 0 0 2px var(--secondary-color);
    border-radius: 8px;
}

.service-post-item.is-linked:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 3px;
}

/* offset so the anchored card is not hidden under the sticky header. The
   marker span this used to sit on became a stray grid cell, so the anchor now
   rides on the card itself. */
.ajax-cart-form[data-anchor] {
    scroll-margin-top: 100px;
}

/* --- service product grid ------------------------------------------------- */
/* the cards used to be a bare stack of forms separated by <hr> */
.ss-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.ss-grid > .ajax-cart-form {
    display: flex;
    /* a grid item will not shrink below its content without this, and the
       long service titles are what set that content width */
    min-width: 0;
}

.ss-grid .ss-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;

    /* no card outline: the rule under each card is what the <hr> between the
       old stacked forms used to draw. Cards in a row are equal height, so the
       two lines meet as one rule across the row. */
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}

/* "View details" left, "Add to Cart" right, pinned to the bottom edge however
   short the excerpt is, so the cards in a row line up */
.ss-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
}

.ss-card-footer .ss-details-btn {
    margin-top: 0;
    white-space: nowrap;
}

.ss-card-footer .product-btn {
    margin: 0;
}

.ss-main.is-highlighted,
.ajax-cart-form.is-highlighted .ss-main {
    animation: ss-flash 1.6s ease;
}

@keyframes ss-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(243, 88, 40, 0); }
    25%      { box-shadow: 0 0 0 3px rgba(243, 88, 40, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
    .ss-main.is-highlighted,
    .ajax-cart-form.is-highlighted .ss-main { animation: none; }
}

/* --- service product: View details + modal -------------------------------- */
/* the card shows a 100-character excerpt; the full HTML lives in the hidden
   .ss-full-description block that the modal reads */
.ss-card-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color);
}

/* sits under the description as a text link, not a button in the action row */
.ss-details-btn {
    display: inline-block;
    padding: 0;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-color);
    background: none;
    border: 0;
    cursor: pointer;
    transition: var(--transition);
}

.ss-details-btn:hover {
    text-decoration: underline;
}

.ss-details-btn:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 3px;
    border-radius: 3px;
}

#serviceDetailsModal .modal-content {
    border: 0;
    border-radius: 12px;
}

#serviceDetailsModal .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

.sd-media img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    background: #F6F7F9;
    border-radius: 8px;
}

.sd-media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    background: #F6F7F9;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.sd-media-empty i {
    font-size: 38px;
    color: #C6CBD2;
}

.sd-warranty {
    margin: 14px 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--additional-color);
}

.sd-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.sd-price del {
    font-size: 14px;
    color: #9A9A9A;
}

.sd-price span {
    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-color);
}

.sd-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color);
}

.sd-close,
.sd-add {
    padding: 9px 20px;
    font-size: 14px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.sd-close {
    color: var(--text-color);
    background: transparent;
    border: 1px solid var(--border-color);
}

.sd-add {
    color: var(--white-color);
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.sd-add:hover {
    opacity: 0.9;
}

/* editor HTML can carry its own images and tables */
.sd-description img,
.sd-description iframe,
.sd-description table {
    max-width: 100%;
    height: auto;
}

/* --- service details modal on a phone ------------------------------------- */
@media (max-width: 575px) {
    /* Bootstrap's .modal-dialog keeps a 0.5rem margin and the theme's 25px
       header/body padding, which left only 285px of a 375px screen for the
       content itself */
    /* the theme also pads .modal itself by 12px, which stacked with the
       dialog margin for a 22px inset on each side */
    #serviceDetailsModal {
        padding-left: 0;
        padding-right: 0;
    }

    #serviceDetailsModal .modal-dialog {
        margin: 10px;
        max-width: none;
    }

    #serviceDetailsModal .modal-header {
        padding: 14px 16px;
    }

    #serviceDetailsModal .modal-title {
        /* a long title runs right up to the close button without this */
        padding-right: 12px;
        font-size: 16px;
        line-height: 1.35;
    }

    #serviceDetailsModal .modal-body {
        padding: 16px;
    }

    #serviceDetailsModal .modal-footer {
        flex-wrap: nowrap;
        gap: 10px;
        padding: 12px 16px;
    }

    /* Bootstrap gives every footer child a .25rem margin; the gap does it */
    #serviceDetailsModal .modal-footer > * {
        margin: 0;
    }

    /* the two actions were 77px and 116px hugging the right edge - awkward
       thumb targets with dead space beside them */
    .sd-close,
    .sd-add {
        flex: 1 1 0;
        padding: 11px 12px;
    }

    .sd-media img {
        max-height: 220px;
    }

    .sd-media-empty {
        min-height: 130px;
    }

    .sd-warranty {
        margin-top: 12px;
        font-size: 12px;
    }

    .sd-price span {
        font-size: 18px;
    }

    .sd-description {
        font-size: 13.5px;
        line-height: 1.65;
    }
}

/* cart column is only present when the cart has something in it */
#cart-column.is-hidden {
    display: none;
}

/* ==========================================================================
   Service cart page (/service-cart)
   ========================================================================== */

#cart-root.is-hidden,
.cart-empty.is-hidden {
    display: none;
}

.cart-unit-price {
    margin: 2px 0 8px;
    font-size: 13px;
    color: var(--text-color);
}

/* placeholder for records whose cover_image is null or whose file is gone */
.car-page-img {
    position: relative;
}

.cart-img-fallback {
    display: none;
}

.car-page-img.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #F6F7F9;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
}

.car-page-img.is-empty .cart-img-fallback {
    display: block;
    font-size: 20px;
    color: #C6CBD2;
}

.cart-page-util .quantity {
    display: inline-flex;
    align-items: center;
}

.cart-remove {
    padding: 4px 8px;
    font-size: 18px;
    line-height: 1;
    color: var(--text-color);
    background: none;
    border: 0;
    cursor: pointer;
    transition: var(--transition);
}

.cart-remove:hover {
    color: var(--secondary-color);
}

/* --- empty state ---------------------------------------------------------- */
.cart-empty {
    padding: 50px 20px 60px;
    text-align: center;
}

.cart-empty img {
    max-width: 260px;
    width: 60%;
    margin-bottom: 18px;
}

.cart-empty h3 {
    margin-bottom: 6px;
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color);
}

.cart-empty p {
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-color);
}

.cart-empty__cta {
    display: inline-block;
    padding: 10px 26px;
    font-size: 14px;
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.cart-empty__cta:hover {
    opacity: 0.9;
    color: var(--white-color);
}

/* --- service cart: row layout ---------------------------------------------- */
/* the theme already declares display/justify/align on .cart-page-util; these
   two only stop the qty control and price colliding on narrow screens, which
   is just as welcome on the product cart */
.cart-page-util {
    gap: 14px;
    flex-wrap: wrap;
}

/* price styling stays inside the service cart so the product cart keeps its own */
#cart-root .cart-page-util .new-price span {
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary-color);
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* responsive.css sets .cart-page-col to display:block + text-align:center,
       which strands the thumbnail on its own line above centred text. A cart
       line reads better as thumbnail-left, details-right at every width. */
    .cart-page .cart-page-col {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        text-align: left;
    }

    .cart-page .cart-page-content {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }

    /* the theme scales the thumbnail to 100px here; keep the placeholder the
       same size so a missing image does not change the row layout */
    .cart-page .car-page-img,
    .cart-page .car-page-img.is-empty {
        flex: 0 0 72px;
        width: 72px;
        height: 72px;
    }

    .cart-page .car-page-img img {
        width: 72px;
        height: 72px;
    }

    .cart-page .car-page-img.is-empty .cart-img-fallback {
        font-size: 26px;
    }

    .cart-page .cart-page-list {
        padding: 16px;
    }
}

/* --- service cart row: close button + spacing ------------------------------ */
/* The theme hangs this off the card corner (top/right:-5px) as a solid orange
   disc, so on the first row it floated above the card entirely and read as a
   heavier action than "remove one line". Tucked inside, neutral until hover. */
#cart-root .cart-list-close {
    top: 10px;
    right: 10px;
}

#cart-root .cart-list-close button {
    width: 26px;
    height: 26px;
    line-height: 1;
    font-size: 15px;
    color: #9A9A9A;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: var(--transition);
}

#cart-root .cart-list-close button:hover {
    color: var(--secondary-color);
    background: rgba(243, 88, 40, 0.08);
    border-color: rgba(243, 88, 40, 0.25);
}

#cart-root .cart-list-close button:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* tighter vertical rhythm: title -> unit price -> stepper read as one block */
#cart-root .cart-page-content h4 {
    margin-bottom: 4px;
    padding-right: 34px;   /* clear of the close button */
}

#cart-root .cart-unit-price {
    margin: 0 0 10px;
}

/* the line total is the row's outcome - keep it vertically centred against the
   stepper rather than drifting on its own baseline */
#cart-root .cart-page-util {
    align-items: center;
}

/* --- sign-in modal --------------------------------------------------------- */
/* the theme widens .modal-dialog to 600px; a single-column login form reads
   better narrower, so this one opts out */
.auth-modal .modal-dialog {
    max-width: 460px;
}

.auth-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}

.auth-modal .auth-card-body {
    padding: 30px;
}

.auth-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 1;
    color: var(--text-color);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.auth-modal__close:hover {
    color: var(--secondary-color);
    background: rgba(243, 88, 40, 0.08);
}

/* error banner, shared by the page and the modal */
.auth-alert {
    margin-bottom: 16px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: #8A1C11;
    background: rgba(243, 88, 40, 0.08);
    border: 1px solid rgba(243, 88, 40, 0.25);
    border-radius: var(--border-radius);
}

.auth-alert.is-hidden {
    display: none;
}

/* --- sign-in modal: polish -------------------------------------------------- */
.auth-modal .auth-card-body {
    padding: 34px 32px 28px;
}

.auth-modal .auth-card-head {
    margin-bottom: 22px;
    padding-right: 34px;   /* clear of the close button */
}

.auth-modal .auth-card-head h3 {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    color: var(--primary-color);
}

.auth-modal .form-group {
    margin-bottom: 16px;
}

.auth-modal .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
}

.auth-modal .form-group input[type="email"],
.auth-modal .form-group input[type="password"] {
    width: 100%;
    height: 44px;
    padding: 8px 14px;
    font-size: 14px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.auth-modal .form-group input[type="email"]:focus,
.auth-modal .form-group input[type="password"]:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(243, 88, 40, 0.12);
}

.auth-modal .input-form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.auth-modal .user-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-modal .user-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--secondary-color);   /* was the browser's default blue */
    cursor: pointer;
}

.auth-modal .user-check label {
    margin: 0;
    font-size: 13.5px;
    cursor: pointer;
}

.auth-modal .forgot a {
    font-size: 13.5px;
    color: var(--secondary-color);
}

.auth-modal .forgot a:hover {
    text-decoration: underline;
}

.auth-modal .submit-btn .btns {
    width: 100%;
    height: 46px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white-color);
    background: var(--secondary-color);
    border: 0;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.auth-modal .submit-btn .btns:hover:not(:disabled) {
    background: #DC4A1D;
}

.auth-modal .submit-btn .btns:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* "OR Sign in Via" as a proper rule rather than floating text */
.auth-modal .other-login {
    margin-top: 22px;
}

.auth-modal .other-login > span {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: #9A9A9A;
}

.auth-modal .other-login > span::before,
.auth-modal .other-login > span::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-modal .other-login-btn {
    display: flex;
    gap: 10px;
}

/* the labels wrapped onto two lines and made these 63px tall */
.auth-modal .other-login-btn a {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 8px;
    font-size: 13px;
    white-space: nowrap;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.auth-modal .other-login-btn a:hover {
    border-color: var(--secondary-color);
    background: rgba(243, 88, 40, 0.04);
}

.auth-modal .other-login-btn a img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.auth-modal .auth-card-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.auth-modal .auth-card-footer p {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-color);
}

/* side by side the labels get clipped once the dialog drops near phone width */
@media (max-width: 420px) {
    .auth-modal .auth-card-body {
        padding: 28px 20px 24px;
    }

    .auth-modal .other-login-btn {
        flex-direction: column;
    }

    .auth-modal .other-login-btn a {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* success variant of the auth banner */
.auth-alert--ok {
    color: #12633A;
    background: rgba(28, 165, 16, 0.08);
    border-color: rgba(28, 165, 16, 0.3);
}

.auth-modal .auth-card-sub {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-color);
}

/* ==========================================================================
   Wishlist page
   ========================================================================== */

/* auto-fitting columns instead of col-lg-4. The dashboard content column is
   both narrower and variable-width, so three fixed bootstrap columns made each
   card - and its 1:1 image - roughly twice the size of a shop card. */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    gap: 18px 12px;
}

.wishlist-grid .product-wrap.product-card {
    margin-bottom: 0;
}

/* everything below just steps the shared card down a size inside this grid;
   the shop's cards are untouched */
.wishlist-grid .product-card .product-img__link {
    padding: 9px;
}

.wishlist-grid .product-card .badge-tag {
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    font-size: 9.5px;
}

.wishlist-grid .product-card .product-content {
    padding-top: 8px;
}

.wishlist-grid .product-card .product-content h3 {
    margin-bottom: 3px;
    font-size: 12.5px;
    line-height: 1.35;
}

.wishlist-grid .product-card .product-rating {
    margin-bottom: 4px;
}

.wishlist-grid .product-card .product-rating i {
    font-size: 11.5px;
}

.wishlist-grid .product-card .rating-count {
    margin-left: 4px;
    font-size: 10.5px;
}

.wishlist-grid .product-card .prev-price del {
    font-size: 10.5px;
}

.wishlist-grid .product-card .new-price span {
    font-size: 13px;
}

.wishlist-grid .wishlist-footer {
    gap: 5px;
    margin-top: 8px;
}

.wishlist-grid .wishlist-cart,
.wishlist-grid .wishlist-remove {
    height: 28px;
    font-size: 11px;
    padding: 0 4px;
}

@media (max-width: 575px) {
    .wishlist-grid {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        gap: 16px 10px;
    }

    .wishlist-grid .wishlist-footer {
        flex-direction: column;
        gap: 5px;
    }

    .wishlist-grid .wishlist-action {
        width: 100%;
        flex: 0 0 auto;
    }
}

.wishlist-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.wishlist-action {
    flex: 1 1 0;
    margin: 0;
}

.wishlist-cart,
.wishlist-remove {
    width: 100%;
    height: 38px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.wishlist-cart {
    color: var(--white-color);
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.wishlist-cart:hover:not(:disabled) {
    background: #DC4A1D;
    border-color: #DC4A1D;
}

.wishlist-cart:disabled {
    color: #9A9A9A;
    background: #F4F4F4;
    border-color: #E6E6E6;
    cursor: not-allowed;
}

.wishlist-remove {
    color: var(--text-color);
    background: transparent;
    border: 1px solid var(--border-color);
}

.wishlist-remove:hover {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* placeholder when a product image is missing from disk */
.product-img__link.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    background: #F6F7F9;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.product-img__link.is-empty::before {
    content: "\f03e";
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 30px;
    color: #C6CBD2;
}

.wishlist-empty {
    padding: 50px 20px;
    text-align: center;
}

.wishlist-empty i {
    font-size: 46px;
    color: #D5D5D5;
}

.wishlist-empty h4 {
    margin: 14px 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

.wishlist-empty p {
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-color);
}

.wishlist-empty__cta {
    display: inline-block;
    padding: 10px 24px;
    font-size: 14px;
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.wishlist-empty__cta:hover {
    opacity: 0.9;
    color: var(--white-color);
}

/* ==========================================================================
   Search results page
   ========================================================================== */
.search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.search-head__title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-color);
}

.search-head__title span {
    color: var(--secondary-color);
    /* a long query should wrap rather than push "Clear search" off the row */
    overflow-wrap: anywhere;
}

.search-head__clear {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.search-head__clear:hover {
    color: var(--secondary-color);
}

.search-head__clear i {
    font-size: 13px;
    vertical-align: middle;
}

.search-empty {
    padding: 60px 20px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.search-empty i {
    display: block;
    font-size: 48px;
    color: #C9CDD3;
}

.search-empty h4 {
    margin: 14px 0 6px;
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    overflow-wrap: anywhere;
}

.search-empty p {
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-color);
}

.search-empty__cta {
    display: inline-block;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition);
}

.search-empty__cta:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

@media (max-width: 575px) {
    .search-head__title {
        font-size: 18px;
    }

    .search-empty {
        padding: 40px 16px;
    }
}

/* A thumbnail strip with a single thumbnail says "there are more photos" when
   there are not, and costs 90px above the fold on a phone. Hidden by CSS
   rather than removed from the markup, so #slider's sync: "#carousel" target
   still exists and flexslider initialises as usual. */
#carousel.flexslider:has(.slides > li:only-child) {
    display: none;
}

/* ==========================================================================
   Product detail - related products sidebar
   ========================================================================== */
.related-side {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* The specification runs far longer than this panel, which left a tall empty
   gap down the right of the page. Sticking the panel keeps it beside the spec
   all the way to the end instead of stopping a third of the way down.
   align-self:start is required - a bootstrap column stretches to the row's
   full height by default, and a stretched box cannot stick. */
@media (min-width: 992px) {
    .details-body > [class*="col-lg-4"] {
        align-self: flex-start;
        position: sticky;
        top: 20px;
    }

    .related-side {
        /* a panel taller than the viewport would scroll past and stop sticking,
           so let it scroll inside itself */
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    /* unobtrusive scrollbar when the list does overflow */
    .related-side::-webkit-scrollbar {
        width: 6px;
    }

    .related-side::-webkit-scrollbar-thumb {
        background: #D8DBE0;
        border-radius: 50px;
    }
}

.related-side__title {
    margin: 0 0 12px;
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
}

.related-side__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-side__list li + li {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #F2F3F5;
}

.related-side__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--transition);
}

.related-side__item:hover {
    background: #FAFAFA;
}

.related-side__img {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 62px;
    height: 62px;
    padding: 5px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.related-side__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* placeholder when a product has no image on disk */
.related-side__img.is-empty::before {
    content: "\f03e";
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 20px;
    color: #C9CDD3;
}

.related-side__info {
    min-width: 0;
}

.related-side__info h5 {
    margin: 0 0 4px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--primary-color);
    transition: var(--transition);
}

.related-side__item:hover .related-side__info h5 {
    color: var(--secondary-color);
}

.related-side__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.related-side__price span {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}

.related-side__price del {
    font-size: 11.5px;
    color: #9A9A9A;
}

.related-side__out {
    display: inline-block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 500;
    color: #8A8F98;
}

.related-side__all {
    display: block;
    margin-top: 14px;
    padding-top: 12px;
    font-size: 13.5px;
    font-weight: 500;
    text-align: center;
    color: var(--secondary-color);
    text-decoration: none;
    border-top: 1px solid var(--border-color);
}

.related-side__all:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.related-side__all i {
    font-size: 10px;
    vertical-align: middle;
}

/* Below the 3-column breakpoint this stops being a sidebar - it stacks under
   the specification, directly above "You May Also Like", which covers the same
   ground. Hidden there rather than shown twice. */
@media (max-width: 991px) {
    .details-body > [class*="col-lg-4"] {
        display: none;
    }
}

/* --- "You May Also Like": 6 per row ---------------------------------------
   At six across each card is ~147px, which is tighter than the 4-up grids the
   shared card was sized for. Scoped to .related-grid so /products and the home
   page keep their own sizing. */
.related-grid .product-card .product-content {
    padding-top: 10px;
}

/* reserve the two lines a longer name needs, so the rating and price rows line
   up across the row instead of stepping down under the longest title */
.related-grid .product-card .product-content h3 {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.35;
    min-height: calc(2 * 1.35 * 13px);
}

.related-grid .product-card .product-rating i {
    font-size: 13px;
}

.related-grid .product-card .rating-count {
    margin-left: 5px;
    font-size: 11px;
}

/* the price row wrapped its discount pill onto a second line at this width:
   the widest combination in the catalogue, "Rs.8,000 Rs.7,086 -11%", needed
   144px against 143px available, so the gap buys back the 1px it was short */
.related-grid .product-card .both-price {
    gap: 3px;
}

.related-grid .product-card .prev-price del {
    font-size: 11px;
}

.related-grid .product-card .new-price span {
    font-size: 14px;
}

.related-grid .product-card .price-off {
    padding: 1px 5px;
    font-size: 10px;
}

@media (max-width: 575px) {
    .related-grid .product-card .product-content h3 {
        font-size: 12.5px;
    }
}

/* ==========================================================================
   Shared product card - phone layout
   In a 2-up grid a single wrapped title throws its whole card out of step with
   the one beside it: the rating and price rows ended up 21px lower. Reserving
   two lines for the title lines the pair back up. Kept to phones only - the
   4-up desktop grids deliberately let the title sit tight to the rating.
   ========================================================================== */
@media (max-width: 767px) {
    .product-card .product-content h3 {
        min-height: calc(2 * 1.4 * 15px);
    }

    .product-card .product-content {
        padding-top: 10px;
    }

    .product-card .product-rating i {
        font-size: 14px;
    }

    .product-card .rating-count {
        margin-left: 5px;
        font-size: 11.5px;
    }

    /* the icon rail is always visible on touch, so keep it from crowding a
       169px-wide card */
    .product-card .icon-btn {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    .product-card .product-actions {
        top: 8px;
        right: 8px;
        gap: 5px;
    }

    .product-card .badge-tag {
        top: 8px;
        left: 8px;
        padding: 3px 8px;
        font-size: 10px;
    }
}

/* --- service checkout: payment options ------------------------------------ */
/* replaces the inline "img.payment-check { height:70%; margin-left:-20px }" in
   checkout.blade, which sized the logo against an auto-height parent and then
   pulled it out of its own box and over the next option */
.payment-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.payment-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    min-height: 78px;
    margin: 0;
    text-align: center;
    background: var(--white-color);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
}

.payment-option:hover {
    border-color: #C9CDD5;
}

/* the radio is hidden but still focusable and still submits - the card's own
   border and tint are what report the choice. display:none would take it out
   of the tab order and leave keyboard users no way to pick a method. */
.payment-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* the logo is the whole control now, so it takes the card. contain, not
   cover: these wordmarks have different aspect ratios and must not crop. */
.payment-option img {
    width: 100%;
    height: 46px;
    object-fit: contain;
}

/* the whole card reflects the radio rather than only the dot.
   This was ":has(input:checked)", which selects correctly but does not repaint
   reliably when a sibling radio steals the checked state - the previously
   selected card stayed highlighted. A class set on change is deterministic. */
.payment-option.is-selected {
    border-color: var(--secondary-color);
    background: rgba(243, 88, 40, 0.04);
}

/* :focus-within fired on a mouse click too, so the focus ring stacked outside
   the .is-selected border - same colour, 2px apart, reading as a double border.
   focus-visible is only set when the radio was reached by keyboard. */
.payment-option:has(input:focus-visible) {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* was .btn.btn-danger - bootstrap red inside an otherwise orange checkout */
.place-order-btn {
    display: inline-block;
    padding: 13px 34px;
    font-size: 16px;
    font-weight: 600;
    color: var(--white-color);
    background: var(--secondary-color);
    border: 0;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.place-order-btn:hover {
    opacity: 0.9;
}

@media (max-width: 991px) {
    /* the order summary is a sibling column that stacks last, which put the
       grand total below the Place Order button on a phone */
    .checkout-page > .container > .row > .col-lg-4 {
        order: -1;
        margin-bottom: 26px;
    }
}

@media (max-width: 575px) {
    /* under 16px, iOS Safari zooms the page in on focus and leaves it there -
       every field on this form was 13px or 15px */
    .checkout-page .form-control,
    .checkout-page input[type="text"],
    .checkout-page input[type="email"],
    .checkout-page input[type="tel"],
    .checkout-page input[type="number"],
    .checkout-page select,
    .checkout-page textarea {
        font-size: 16px;
    }

    .payment-options {
        gap: 8px;
    }

    .payment-option {
        padding: 10px 8px;
        min-height: 60px;
    }

    .payment-option img {
        height: 34px;
    }

    .place-order-btn {
        display: block;
        width: 100%;
        padding: 14px 20px;
    }

    /* responsive.css sets .cart-page-util to display:block below 576px, which
       dropped the line total onto a row of its own under the stepper */
    .cart-page .cart-page-util {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
}

/* --- service order confirmation ------------------------------------------- */
.svc-success__card {
    max-width: 760px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.svc-success__head {
    padding: 38px 30px 30px;
    text-align: center;
    background: #F7F8FA;
    border-bottom: 1px solid var(--border-color);
}

.svc-success__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    font-size: 30px;
    color: var(--white-color);
    background: #12B76A;
    border-radius: 50%;
}

.svc-success__head h1 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 600;
    color: var(--primary-color);
}

.svc-success__head p {
    margin: 0;
    font-size: 15px;
    color: var(--text-color);
}

.svc-success__ref {
    margin-top: 12px !important;
    font-size: 14px !important;
}

.svc-success__ref b {
    color: var(--primary-color);
    letter-spacing: 0.4px;
}

.svc-success__body {
    padding: 28px 30px 8px;
}

.svc-success__body h2 {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 600;
    color: var(--primary-color);
}

.svc-success__body h2 + * {
    margin-bottom: 28px;
}

/* was a 1px solid gray grid on every cell - rules between rows read quieter */
.svc-success__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.svc-success__table th,
.svc-success__table td {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.svc-success__table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-color);
    background: #F7F8FA;
}

.svc-success__table .is-num {
    text-align: right;
    white-space: nowrap;
}

.svc-success__table tfoot td {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 0;
}

.svc-success__meta {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}

.svc-success__meta dt {
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-color);
}

.svc-success__meta dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--primary-color);
}

.svc-success__meta dd.is-break {
    overflow-wrap: anywhere;
}

.svc-success__meta dd a {
    color: var(--primary-color);
}

.svc-success__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 30px 30px;
}

.svc-success__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white-color);
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.svc-success__btn:hover {
    color: var(--white-color);
    opacity: 0.9;
}

.svc-success__btn.is-ghost {
    color: var(--primary-color);
    background: transparent;
    border-color: var(--border-color);
}

.svc-success__btn.is-ghost:hover {
    color: var(--primary-color);
    border-color: #C9CDD5;
    opacity: 1;
}

@media (max-width: 575px) {
    .svc-success__head {
        padding: 30px 18px 24px;
    }

    .svc-success__head h1 {
        font-size: 21px;
    }

    .svc-success__head p {
        font-size: 14px;
    }

    .svc-success__body {
        padding: 24px 18px 4px;
    }

    /* a four-column table cannot hold long service titles on a phone, so each
       row becomes a block with its header text as the label */
    .svc-success__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .svc-success__table tbody tr {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .svc-success__table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 3px 0;
        border-bottom: 0;
    }

    .svc-success__table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        color: var(--text-color);
    }

    .svc-success__table tbody td[data-label="Service"] {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        color: var(--primary-color);
    }

    .svc-success__table tbody td[data-label="Service"]::before {
        display: none;
    }

    .svc-success__table tfoot td {
        display: flex;
        justify-content: space-between;
        padding: 12px 0 0;
    }

    .svc-success__table tfoot td[colspan] {
        display: none;
    }

    .svc-success__table tfoot td:last-child::before {
        content: "Total";
    }

    .svc-success__meta {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .svc-success__actions {
        flex-direction: column;
        padding: 20px 18px 26px;
    }

    .svc-success__btn {
        width: 100%;
        padding: 13px 20px;
    }
}

/* --- eSewa hand-off ------------------------------------------------------- */
.esewa-handoff__card {
    max-width: 440px;
    margin: 0 auto;
    padding: 36px 30px 30px;
    text-align: center;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.esewa-handoff__logo {
    height: 34px;
    width: auto;
    margin-bottom: 20px;
}

.esewa-handoff__card h1 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-color);
}

.esewa-handoff__card > p {
    margin: 0;
    font-size: 14.5px;
    color: var(--text-color);
}

.esewa-handoff__amount {
    margin: 22px 0 14px;
    padding: 14px;
    background: #F7F8FA;
    border-radius: 10px;
}

.esewa-handoff__amount span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-color);
}

.esewa-handoff__amount b {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
}

.esewa-handoff__ref {
    margin: 0 0 22px;
    font-size: 13px;
    color: var(--text-color);
}

.esewa-handoff__ref b {
    color: var(--primary-color);
    letter-spacing: 0.3px;
}

.esewa-handoff__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white-color);
    background: #60BB46;          /* eSewa green, so the destination is obvious */
    border: 0;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.esewa-handoff__btn:hover {
    opacity: 0.9;
}

.esewa-handoff__spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: esewa-spin 0.7s linear infinite;
}

@keyframes esewa-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .esewa-handoff__spinner { animation: none; }
}

.esewa-handoff__cancel {
    display: inline-block;
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--text-color);
    text-decoration: underline;
}

.esewa-handoff__cancel:hover {
    color: var(--secondary-color);
}

@media (max-width: 575px) {
    .esewa-handoff__card {
        padding: 28px 20px 24px;
    }

    .esewa-handoff__card h1 {
        font-size: 19px;
    }

    .esewa-handoff__amount b {
        font-size: 21px;
    }
}

/* --- checkout flash message ----------------------------------------------- */
.checkout-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    padding: 13px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #92400E;
    background: #FEF6E7;
    border: 1px solid #F7D9A6;
    border-radius: var(--border-radius);
}

.checkout-alert i {
    flex: 0 0 auto;
    font-size: 19px;
    line-height: 1.25;
}

/* ------------------------------------------------------------------
   Featured category grid

   This replaces ~37 nth-child border overrides that were spread across
   style.css and responsive.css and hardcoded to an exact item count. One of
   them, "li:last-child { display: none }" between 992 and 1199px, hid the last
   category outright.

   The separators come from a 1px grid gap over a coloured container, so they
   stay exact for any number of items at any breakpoint.
   ------------------------------------------------------------------ */
.featured-category ul {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Borders sit on the cells and overlap by 1px rather than coming from a gap
   over a coloured container: with 9 items in 8 columns the container approach
   drew the unused half of the last row as an empty bordered strip. */
.featured-category ul li {
    position: relative;
    margin: 0 -1px -1px 0;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    transition: box-shadow .18s ease, transform .18s ease;
}

.featured-category ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 22px 10px 18px;
    text-decoration: none;
}

.featured-category-wrap { width: 100%; text-align: center; }

.featured-category-img {
    display: flex;
    align-items: center;
    justify-content: center;
    /* a fixed box keeps the labels on a common baseline whatever the artwork */
    height: 84px;
}

.featured-category-img img {
    max-height: 84px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    transition: transform .18s ease;
}

.featured-category-info { margin-top: 14px; }

.featured-category-info h3 {
    margin-bottom: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--heading-color, #1f2a44);
    transition: color .18s ease;
}

/* the raised cell, rather than flooding the tile with colour: these icons are
   PNGs on opaque white, so a solid fill left them sitting on a white chip */
.featured-category ul li:hover {
    z-index: 1;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(16, 24, 40, .13);
}

.featured-category ul li:hover .featured-category-img img { transform: scale(1.06); }
.featured-category ul li:hover .featured-category-info h3 { color: var(--primary-color, #e35a2c); }

.featured-category ul li a:focus-visible {
    outline: 2px solid var(--primary-color, #e35a2c);
    outline-offset: -2px;
}

/* Off-screen heading used when a page's main title is not an h1 in the design.
   Not display:none - that would take it out of the accessibility tree too. */
.seo-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The floating Messages / Feedback bar lives in the same bottom-right corner as
   the toasts on the home pages, and a toast was covering its buttons. Where
   that bar is present, the toasts step aside; on every other page they keep the
   corner to themselves. */
body:has(.qa) .toast-stack {
    right: 76px;
}

@media (max-width: 767px) {
    /* no room beside it on a phone, so the toasts sit above it instead */
    body:has(.qa) .toast-stack {
        right: 12px;
        left: 12px;
        bottom: 132px;
        align-items: stretch;
    }
}