/* @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;1,6..12,1000&display=swap'); */

/* @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
}

/* ul,
ol,
li {
    list-style: none;
    margin: 0;
    padding: 0;
} */

/* Scope the reset to specific sections */
.nav ul,
.nav ol,
.nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Other specific resets can be added here */

a {
    display: inline-block;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-family: var(--headingFont);
    color: var(--colorBlack);
}

p,
span {
    font-size: 16px;
    font-weight: 400;
    color: var(--paraColor);
    margin: 0;
    padding: 0;
}

/* img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
    This bit of css was deleted by Royden as it affects the image preview of the business profile pics.
    May need to review down the track if it affects other images in the website - Comment dated 20 May 2024.
} */

input,
textarea {
    width: 100%;
    padding: 12px 20px;
    outline: none;
    resize: none;
    border: 1px solid #e4e7e9;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
}

input::placeholder,
textarea::placeholder {
    color: #a6a6ac;
}

button {
    border: none;
}

:root {
    --colorPrimary: #db7093;
    --colorsidebar: #2c353d;
    --buttonHoverColor: #606060;
    --paraColor: #3f3f3f;
    --colorBlack: #1c212b;
    --colorWhite: #ffffff;
    --ratingColor: #ffc107;
    --base-clr: #11121a;
    --line-clr: #42434a;
    --hover-clr: #222533;
    --text-clr: #e6e6ef;
    --accent-clr: #5e63ff;
    --brandColor1: #ab2361;
    --brandColor2: #db7093;
    --brandColor3: #4e6841;  /* Dark green */
    --brandColor4: #ac8982;  /* Muted rose */
    --brandColor5: #f9e3c1;
    --secondary-text-clr: #b0b3c1;
    --headingFont: "Open Sans", sans-serif;
    /* --headingFont: "Jost", sans-serif; */
    /* --headingFont: 'Raleway', sans-serif; */
    /* --headingFont: 'Nunito Sans', sans-serif; */

    /* --paraFont: "Nunito Sans", sans-serif; */
    /* --paraFont: 'Lato', sans-serif; */
    /* --paraFont: 'Raleway', sans-serif; */
    --paraFont: "Open Sans", sans-serif;
}

body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: var(--paraFont);
    color: var(--paraColor);
    line-height: 1.7;
    min-height: 100vh;
    min-height: 100dvh;
}

/* this is css that RJ implemented to expand the screen display size */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    /* max-width: 2320px !important; */
    max-width: 2320px !important;
}
/*====================
   COMMON CSS START
=====================*/
.common_btn {
    font-size: 16px;
    color: var(--colorWhite);
    padding: 15px 30px;
    border: 1px solid var(--colorWhite);
    border-radius: 30px;
    font-weight: 500;
    text-transform: capitalize;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.common_btn i {
    font-size: 10px;
    margin-left: 5px;
}

.common_btn:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
    border-color: var(--colorBlack);
}

.read_btn {
    font-size: 1.1em;
    color: var(--colorBlack);
    /* background: var(--colorPrimary); */
    /* border-radius: 4px; */
    /* padding: 10px 20px; */
    text-transform: capitalize;
    height: 50px;
    border-radius: 10px;
    font-weight: 600;
    align-items: center;
    /* position: relative; */
    /* overflow: hidden; */
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.read_btn::after {
    position: absolute;
    content: "";
    background: #dddddd26;
    width: 20px;
    height: 100px;
    transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    top: -30px;
    left: -35px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.read_btn:hover {
    color: var(--colorPrimary);
}

.read_btn:hover::after {
    left: 120%;
}

.hire_btn {
    font-size: 16px;
    font-weight: 500;
    color: #05152f;
    border: 1px solid #284cd3;
    border-radius: 3px;
    padding: 7px 15px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    text-transform: capitalize;
}

.hire_btn:hover {
    color: #284cd3;
}

.small_heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--colorPrimary);
    text-transform: capitalize;
}

.medium_heading {
    font-size: 30px;
    font-weight: 700;

    text-transform: capitalize;
    margin: 30px 0px 25px 0px;
}

/*====================
   COMMON CSS END
=====================*/

/*====================
   TOPBAR PART START
=====================*/
#wsus__topbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 40px;
    background: var(--colorPrimary);
    z-index: 9999;
}

.wsus__topbar_left {
    display: flex;
    line-height: 40px;
}

.wsus__topbar_left li {
    margin-right: 20px;
}

.wsus__topbar_left li a {
    color: var(--colorWhite);
    font-size: 15px;
    font-weight: 400;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.wsus__topbar_left li a i {
    margin-right: 5px;
}

.wsus__topbar_left li a:hover {
    color: #07123b;
}

.wsus__topbar_right {
    display: flex;
    justify-content: flex-end;
}

.language {
    width: 110px;
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

.language .nice-select {
    border: none;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid var(--colorWhite);
    height: 30px;
    line-height: 30px;
    padding-left: 0;
    padding-right: 0;
}

.language .nice-select .current {
    color: var(--colorWhite);
}

.language .nice-select:after {
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    right: 5px;
}

.wsus__topbar_right a {
    width: 150px !important;
    height: 35px;

    color: white;
    text-align: center;
    line-height: 35px;
    margin-left: 30px;
    margin-top: 2.5px;
    font-size: 14px;
    border-radius: 4px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.wsus__topbar_right a:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
}

/*====================
   TOPBAR PART END
=====================*/

/*===================
    MENU PART START
=====================*/
.main_menu .navbar-brand {
    padding: 0;
    margin: 0;
    max-width: 150px;
    margin-top: 3px;
}

.main_menu {
    /* position: sticky; */
    padding-top: 20px !important;
    left: 0;
    width: 100%;
    height: 50px; /* Consistent height for the menu */

    display: flex; /* Flexbox layout */
    align-items: center; /* Vertically center the contents */
    justify-content: space-between; /* Space between brand and menu items */
    padding: 0 20px; /* Optional horizontal padding */
    z-index: 999;
}

.main_menu ul {
    display: flex;
    align-items: center; /* Vertically center menu items */
    list-style: none;
    margin: 0;
    padding: 0;
}

.main_menu li {
    display: flex;
    align-items: center; /* Vertically center each item */
}

.main_menu li a {
    font-size: 1rem;
    font-weight: 400;
    color: white;
    text-transform: capitalize;
    margin: 0 15px;
    padding: 25px 0; /* Add equal top and bottom padding for vertical centering */
    text-align: center;
    display: inline-block; /* Removes flex effect from inside the link */
    line-height: normal;
}

.main_menu li a i {
    font-size: 12px;
    margin-left: 3px;
}

.main_menu .nav-item:hover > a,
.main_menu li a.active {
    color: var(--colorPrimary);
}

.main_menu .dropdown-menu {
    border-radius: 5px;
    padding: 0;
    overflow: hidden;
}

.dropdown-menu li a {
    color: #000 !important;
}

.dropdown-menu li a:focus,
.dropdown-menu li a:hover {
    background: var(--colorPrimary);
    color: #fff !important;
}

#navbarDropdown:hover {
    color: var(--colorWhite);
}

.menu_fix {
    /* position: fixed; */
    animation: menu_animate 1s;
    z-index: 9;
}

@keyframes menu_animate {
    from {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
    }

    to {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
    }
}

.menu_dropdown {
    position: absolute;
    width: 250px;
    padding: 15px 25px;
    top: 130%;
    left: 0;
    background: var(--colorWhite);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    border-top: 1px solid var(--colorPrimary);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    z-index: 999;
}

.menu_dropdown li {
    margin: 15px 0px;
    border-bottom: 1px solid var(--colorWhite);
    padding-bottom: 10px;
}

.menu_dropdown li:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.menu_dropdown li a {
    width: 100%;
    padding: 0;
    color: var(--colorBlack);
    line-height: initial;
    margin: 0;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.menu_dropdown li a:hover,
.menu_dropdown li a.droap_active {
    color: var(--colorPrimary);
}

.menu_dropdown li a.droap_active {
    color: var(--colorPrimary);
}

.main_menu li:hover .menu_droapdown {
    top: 100%;
    opacity: 1;
    visibility: visible;
}

.main_menu .user_btn {
    font-size: 16px;
    background: var(--colorPrimary);
    color: var(--colorWhite);
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    padding: 10px 20px;
    text-transform: capitalize;
    border-radius: 5px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.main_menu .user_btn i {
    margin-right: 5px;
}

.main_menu .user_btn:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
}

/*===================
    MENU PART END
=====================*/

/*===================
   BANNER PART START
=====================*/
#wsus__banner {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-bottom: 2px solid white; /* Adds a white band at the bottom */
    position: relative;
}

.photo-credit {
    position: absolute;
    bottom: 10px;
    right: 30px;
    font-size: 11px;
    color: #fff;
    opacity: 0.8;
    z-index: 10;
}

.wsus__banner_overlay {
    padding: 200px 0px 100px 0px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 0, 0, 0.8) 100%
    );
    bottom: 0;
    z-index: 999;
    margin-top: -50px;
}

.wsus__banner_text {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center; /* Centers vertically */
    text-align: center;
    transform: translateY(-30%); /* Moves the text slightly up */
}

.wsus__banner_text h1 {
    font-weight: 400;
    font-size: 3rem;
    color: var(--colorWhite);
}

.wsus__banner_text p {
    font-weight: 400;
    font-size: 1rem;
    margin: 20px auto 0 auto; /* top margin + centered block */
    max-width: 80%;
    color: var(--colorWhite);
}

#wsus__banner form {
    padding: 35px;
    height: auto;
    background: #0000003d;
    border-radius: 4px;
    max-width: 800px; /* Limit the form width */
    margin: 0 auto; /* Center the form horizontally */
}

#wsus__banner form h3 {
    font-weight: 600;
    color: var(--colorWhite);
    font-size: 26px;
    text-align: center;
    margin-bottom: 30px;
}

#wsus__banner form .select2-container--default .select2-selection--single {
    border: 1px solid var(--colorWhite);
    background: transparent;
}

/* General form styling */
.wsus__search_area {
    margin-bottom: 25px;
}

.wsus__search_area input {
    padding: 17px 20px;
    border-radius: 4px;
    background: transparent !important;
    font-size: 1rem !important;
}

.wsus__search_area .read_btn {
    width: 100%;
    padding: 17px 20px;
    border: none;
    display: flex;
    justify-content: center;
    background: var(--colorPrimary);
    border-radius: 4px;
    color: var(--colorWhite);
    cursor: pointer;
}

.wsus__search_area select {
    border: 1px solid #ccc !important;
}

/* Specific styles for the banner search area */
.banner_search_area {
    padding: 0 10px;
    margin-bottom: 15px;
}

.banner_search_area select,
.banner_search_area .read_btn {
    width: 100%;
    padding: 15px;
    border-radius: 4px;
}

/* Ensure button styling is maintained */
.banner_search_area .read_btn {
    background-color: var(--colorPrimary);
    color: white;
    border: none;
    cursor: pointer;
}

/* Flexbox for proper alignment on larger screens */
.d-flex {
    display: flex;
    flex-wrap: wrap;
}

.d-flex .col-md-3 {
    display: flex;
    flex-direction: column;
}

/*===================
   BANNER PART END
=====================*/

/*========================
  CATEGORY SLIDER START
========================*/
#wsus__category_slider {
    padding: 100px 0px;
}

.wsus__category_single_slider {
    display: block;
    margin: 0px 12px;
    text-align: center;
    border-radius: 10px;
    padding: 30px 20px;
    background: var(--colorWhite);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    border: 1px solid #eee;
}

.wsus__category_single_slider span {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #eee;
    overflow: hidden;
    padding: 20px;
    margin: 0 auto;
    background: var(--colorWhite);
}

.wsus__category_single_slider p {
    text-transform: capitalize;
    font-size: 16px;
    color: var(--colorBlack);
    font-weight: 600;
    margin-top: 20px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.wsus__category_single_slider:hover {
    background: var(--colorPrimary);
    border-color: var(--colorPrimary);
}

.wsus__category_single_slider:hover p {
    color: var(--colorWhite);
}

/* .wsus__category_slider_area .slick-dots {
	display: flex;
	justify-content: center;
}

.wsus__category_slider_area .slick-dots li button {
	font-size: 0;
	width: 10px;
	height: 10px;
	background: var(--colorPrimary);
	margin: 0px 3px;
	border-radius: 50%;
	opacity: .3;
	border: none;
	transition: all linear .3s;
	-webkit-transition: all linear .3s;
	-moz-transition: all linear .3s;
	-ms-transition: all linear .3s;
	-o-transition: all linear .3s;
}

.wsus__category_slider_area .slick-dots li.slick-active button {
	width: 13px;
	height: 13px;
	opacity: 1;
} */

.nextArrow,
.prevArrow {
    width: 40px;
    height: 40px;
    line-height: 40px !important;
    text-align: center;
    background: var(--colorWhite);
    color: var(--colorBlack);
    border-radius: 50%;
    border: 1px solid #ddd;
    position: absolute;
    top: 50%;
    right: -8px;
    z-index: 9;
    cursor: pointer;
    transition: all linear 0.3s;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.prevArrow {
    right: auto;
    left: -8px;
}

.nextArrow,
.nextArrow:hover,
.prevArrow:hover {
    background: var(--colorPrimary);
    color: var(--colorWhite);
    border-color: var(--colorPrimary);
}

/*========================
  CATEGORY SLIDER END
========================*/

/*========================
	FEATURES PART START
========================*/
#wsus__features {
    /* background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.3)
        ),
        url(/default-uploads/hero2.jpg); */

    background: linear-gradient(
        to bottom,
        rgba(78, 104, 65, 0.854),
        rgba(78, 104, 65, 0.3)
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 4rem 0;
    color: #333;
    border-bottom: 2px solid white; /* Adds a white band at the bottom */
}

.wsus__heading_area {
    text-align: center;
    margin-bottom: 30px;
    overflow: hidden;
}

.wsus__heading_area i {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 34px;
    border: 2px solidvar(--colorBlack);
    border-radius: 50%;
    font-size: 1.8rem;
    color: var(--colorWhite);
}

.wsus__heading_area h2 {
    font-size: 2.2rem !important;
    font-weight: 600;
    /* margin: 15px 0px 40px 0px; */
    position: relative;
    color: var(--colorWhite);
    text-transform: capitalize;
    display: inline-block;
}

.wsus__heading_area h2::after {
    position: absolute;
    content: "";
    background: white;
    width: 50px;
    height: 2px;
    bottom: 18px;
    left: -70px;
}

.wsus__heading_area h2::before {
    position: absolute;
    content: "";
    background: white;
    width: 50px;
    height: 2px;
    bottom: 18px;
    right: -70px;
}

.wsus__heading_area p {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--colorWhite);
    margin-top: 15px;
    text-align: left;
}

.wsus__feature_single {
    padding: 25px;
    border-radius: 5px;
    position: relative;
    background: var(--colorWhite);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition: all linear 0.3s;
    display: flex;
    flex-direction: column; /* Ensures vertical layout */
    justify-content: space-between; /* Distributes content evenly */
    height: 100%; /* Makes the card fill its parent column */
}

.wsus__feature_single_text {
    position: relative;
    z-index: 1;
    flex-grow: 1; /* Ensures the text block stretches to balance card height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wsus__feature_single .icon {
    color: var(--colorPrimary);
    font-size: 30px;
    width: 60px;
    height: 60px;
    border-right: 2px solid var(--colorPrimary);
    border-bottom: 2px solid var(--colorPrimary);
    border-left: 2px solid #ddd;
    border-top: 2px solid #ddd;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    transition: all linear 0.3s;
    margin-bottom: 5px; /* Adds space below the icon */
}

.wsus__feature_single h5 {
    color: var(--colorBlack);
    text-transform: capitalize;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.1;
    margin: 15px 0 0 0;
    transition: all linear 0.3s;
    text-align: left; /* Ensures the heading is centered */
}

.wsus__feature_single p {
    color: var(--paraColor);
    font-size: 0.8rem;
    transition: all linear 0.3s;
    text-align: left; /* Centers the paragraph text */
    flex-grow: 1; /* Allows flexible height for the paragraph */
    margin: 10px 0; /* Adds spacing around the paragraph */
}

.wsus__feature_single img {
    height: 45px !important;
}

.wsus__feature_single span {
    text-align: center;
    font-family: var(--headingFont);
    font-size: 58px;
    font-weight: 700;
    line-height: 80px;
    text-transform: uppercase;
    color: rgba(9, 9, 25, 0.28); /* Fallback for unsupported browsers */
    -webkit-text-stroke: 1px rgba(9, 9, 25, 0.28);
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: 5px;
    right: 20px;
}

.wsus__feature_single:hover,
.wsus__feature_single.active {
    background: var(--colorPrimary);
}

.wsus__feature_single:hover .icon,
.wsus__feature_single.active .icon {
    color: var(--colorWhite);
    border-color: var(--colorWhite);
}

.wsus__feature_single:hover h5,
.wsus__feature_single:hover p,
.wsus__feature_single.active h5,
.wsus__feature_single.active p {
    color: var(--colorWhite);
}

/*========================
	FEATURES PART END
========================*/

/*========================
  COUNTER PART START
========================*/
#wsus__counter {
    background: url(../images/counter_bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.wsus__counter_overlay {
    background: #000000d1;
    padding: 80px 0px 96px 0px;
}

#wsus__counter .wsus__heading_area {
    margin-bottom: 60px;
}

.wsus__single_counter {
    background: var(--colorWhite);
    text-align: center;
    padding: 40px 20px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

#wsus__counter .wsus__heading_area i,
#wsus__counter .wsus__heading_area h2,
#wsus__counter .wsus__heading_area p {
    border-color: var(--colorWhite);
    color: var(--colorWhite);
}

.wsus__counter_top_text h5 {
    font-size: 35px;
    color: var(--colorWhite);
    font-weight: 600;
    margin-bottom: 60px;
    text-align: center;
}

.wsus__counter_top_video {
    display: flex;
    align-items: center;
    color: var(--colorWhite);
    border: 1px solid #fff;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.wsus__counter_top_video a {
    width: 50px !important;
    height: 50px;
    border: 3px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 46px;
    font-size: 16px;
    color: var(--colorWhite);
    border-radius: 50%;
    animation: animate 2s linear infinite;
    background: var(--colorPrimary);
}

.wsus__counter_single span {
    color: var(--colorWhite);
    font-size: 52px;
    font-weight: 700;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.wsus__counter_single p {
    color: var(--colorWhite);
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
}

/*========================
  COUNTER PART END
========================*/

/*========================
    OUR CATEGORY START
========================*/
.wsus__category_overlay {
    padding: 60px 0px 50px 0px;
}

.wsus__category_single {
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    border-radius: 5px !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.wsus__category_img {
    width: 100%;
    height: 100%;
    z-index: 99;
}

.wsus__category_img img {
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    height: 100%;
    object-fit: cover;
    z-index: 99;
}

.wsus__category_img img {
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    z-index: 99;
}

.wsus__category_text {
    position: absolute;
    z-index: 111;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(0deg, rgb(11 44 61) 20%, transparent 100%);
    z-index: 99;
}

.wsus__category_text_center {
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: column; */
    align-items: center;
    justify-content: space-between;
    color: var(--colorWhite);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    z-index: 99;
}

.wsus__category_text_center i {
    /* position: absolute; */
    /* top: 10px; */
    /* left: 10px; */
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: var(--colorWhite);
    border-radius: 50%;
    font-size: 20px;
    text-align: center;
    background: var(--colorPrimary);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.wsus__category_text_center p {
    text-transform: capitalize;
    font-size: 0.8rem;
    margin: 0;
    color: var(--colorWhite);
}

.wsus__category_text_center span {
    display: inline-block;
    background: var(--colorWhite);
    padding: 3px 10px;
    font-size: 13px;
    text-transform: capitalize;
    font-weight: 400;
    border-radius: 3px;
    color: var(--colorWhite);
}

.wsus__category_text_center .green {
    /* background: #db7093; */
    background: var(--colorPrimary);
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 0.8rem;
}

.wsus__category_text_center .red {
    background: red;
}

.wsus__category_text_center .purple {
    background: #9102ff;
}

.wsus__category_single:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

#wsus__categories {
    background-color: var(--brandColor3);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    margin-top: -50px !important;
}

#wsus__categories .read_btn {
    margin-top: 35px;
    z-index: 99;
}

/*========================
     OUR CATEGORY END
========================*/

/*===================
  OUR LOCATION START
=====================*/
#wsus__location {
    background-color: var(--brandColor4);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}

.wsus__location_overlay {
    padding: 50px 0px 50px 0px;
}

.wsus__location_filter {
    margin-bottom: 30px;
}

.wsus__location_filter button {
    border: none;
    background: var(--colorWhite);
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 400;
    color: var(--colorPrimary);
    margin: 0px 5px;
    outline: none;
    padding: 7px 20px;
    border-radius: 5px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.wsus__location_filter button.active,
.wsus__location_filter button:hover {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

.wsus__single_location {
    position: relative;
    margin-top: 30px;
    padding-left: 10px;
    padding-bottom: 10px;
}

.wsus__single_location .img {
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.wsus__single_location img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all linear 0.3s;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.wsus__location_text {
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 10px 25px 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    padding: 20px;
    background: #f66542e6;
    min-width: 120px;
}

.wsus__location_text i {
    color: var(--colorWhite);
    font-size: 20px;
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    text-align: center;
    line-height: 32px;
}

.wsus__location_text p {
    color: var(--colorWhite);
    text-transform: capitalize;
    font-weight: 400;
    /* padding-bottom: 10px; */
    font-size: 20px;
    /* border-radius: 5px; */
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.wsus__location_text span {
    display: inline-block;
    /* padding: 3px 10px; */
    text-transform: capitalize;
    border-radius: 3px;
    color: var(--colorWhite);
    font-size: 13px;
    font-weight: 400;
}

.wsus__location_text .green {
    background: #397eff;
}

.wsus__location_text .red {
    background: red;
}

.wsus__location_text .purple {
    background: #9102ff;
}

.wsus__single_location:hover img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

/*===================
   OUR LOCATION END
=====================*/

/*===================
FEATURED LISTING START
=====================*/
#wsus__featured_listing {
    /* background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.3)
        ),
        url(/default-uploads/advertise.jpg); */

    background: linear-gradient(
        to bottom,
        rgba(172, 137, 130, 0.854),
        rgba(172, 137, 130, 0.3)
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 4rem 0;
    color: #333;
    border-bottom: 2px solid white; /* Adds a white band at the bottom */
}

.wsus__featured_single {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--colorWhite);
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 14px;
    transition: all linear 0.3s;
    margin: auto;
    margin-bottom: 10px;
    width: 300px; /* Set a fixed width */
    height: 400px; /* Set a fixed height */
    min-height: auto; /* Remove min-height to ensure consistent height */
    cursor: default !important;
    border: 1px solid; /* No border by default */
}

.wsus__featured_single:hover {
    border: 1.75px solid var(--colorPrimary); /* Outline border on hover */
}

#listing_grid .wsus__featured_single {
    margin: 0px 0px 25px 0px;
}

#listing_grid #pagination {
    margin-top: 15px;
}

.wsus__featured_single_img {
    position: relative;
}

.wsus__featured_single .list_images {
    position: relative;
}

.wsus__featured_single .small_text {
    display: inline-block;
    padding: 5px 15px;
    text-transform: capitalize;
    color: var(--colorWhite);
    font-size: 13px;
    font-weight: 400;
    position: absolute;
    bottom: 10px; /* Adjust this value to position it higher or lower */
    left: 15px; /* Adjust this value to move it horizontally */
    border-radius: 30px;
    background: var(--colorPrimary);
    z-index: 2; /* Ensure it stays above overlapping elements */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add some depth */
}

.wsus__featured_single .location {
    position: absolute;
    top: 100px;
    left: 10px;
    width: 35px;
    height: 35px;
    background: var(--colorWhite);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: var(--colorPrimary);
    padding: 0;
    line-height: 35px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all linear 0.3s;
}

.wsus__featured_single .location:hover,
.wsus__featured_single .love:hover {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

.wsus__featured_single .love {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 35px;
    height: 35px;
    background: var(--colorWhite);
    text-align: center;
    line-height: 36px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--colorPrimary);
    transition: all linear 0.3s;
}

.wsus__featured_single .map {
    position: absolute;
    top: 55px;
    left: 10px;
    width: 35px !important;
    height: 35px;
    background: var(--colorWhite);
    text-align: center;
    line-height: 36px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--colorPrimary);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.wsus__featured_single a .love:hover {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

.wsus__featured_single .map:hover {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

.wsus__featured_single_text {
    padding: 35px 20px 20px 20px;
    text-align: center;
    overflow: hidden;
}

.wsus__featured_single_text .list_rating {
    position: relative;
    width: 100%;
    overflow: hidden;
    font-size: 16px;
    color: #f90;
    display: flex;
    justify-content: center;
    align-items: center; /* Center align for larger screens */
    margin-bottom: 8px;
}

.wsus__featured_single_text .list_rating span {
    font-size: 16px;
    text-transform: capitalize;
    margin-left: 5px;
    color: var(--paraColor);
    width: auto;
    height: auto;
}

.wsus__featured_single_text a {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 5px;
    color: var(--colorBlack);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.wsus__featured_single_text a:hover {
    color: var(--colorPrimary);
}

.wsus__featured_single_text .address {
    font-size: 14px;
    font-weight: 500;
    color: var(--paraColor);
}

/* ------------- */
.wsus__featured_single_listing {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--colorWhite);
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 14px;
    transition: all linear 0.3s;
    margin: 20px 0px 0px 0px !important; /* Spacing between slides */
    width: 250px; /* Set a fixed width */
    height: 300px; /* Set a fixed height */
    min-height: auto; /* Remove min-height to ensure consistent height */
}

#listing_grid .wsus__featured_single_listing {
    margin: 0px 0px 25px 0px;
}

.wsus__featured_single_listing .list_images {
    position: relative;
}

.wsus__featured_single_listing .small_text {
    display: inline-block;
    padding: 5px 15px;
    text-transform: capitalize;
    color: var(--colorWhite);
    font-size: 13px;
    font-weight: 400;
    position: absolute;
    bottom: 10px; /* Adjust this value to position it higher or lower */
    left: 15px; /* Adjust this value to move it horizontally */
    border-radius: 30px;
    background: var(--colorPrimary);
    z-index: 2; /* Ensure it stays above overlapping elements */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add some depth */
}

.wsus__featured_single_listing .location {
    position: absolute;
    top: 100px;
    left: 10px;
    width: 35px;
    height: 35px;
    background: var(--colorWhite);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: var(--colorPrimary);
    padding: 0;
    line-height: 35px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all linear 0.3s;
}

.wsus__featured_single_listing .location:hover,
.wsus__featured_single_listing .love:hover {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

.wsus__featured_single_listing .love {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 35px;
    height: 35px;
    background: var(--colorWhite);
    text-align: center;
    line-height: 36px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--colorPrimary);
    transition: all linear 0.3s;
}

.wsus__featured_single_listing .map {
    position: absolute;
    top: 55px;
    left: 10px;
    width: 35px !important;
    height: 35px;
    background: var(--colorWhite);
    text-align: center;
    line-height: 36px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--colorPrimary);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.wsus__featured_single_listing a .love:hover {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

.wsus__featured_single_listing .map:hover {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

/* ---------------- */

#wsus__testimonial .slick-dots,
#wsus__featured_listing .slick-dots {
    position: absolute;
    display: flex !important;
    justify-content: center;
    bottom: -33px;
}

#wsus__testimonial .slick-dots li button,
#wsus__featured_listing .slick-dots li button {
    font-size: 0;
    width: 20px;
    height: 5px;
    background: var(--colorPrimary);
    border: none;
    border-radius: 10px;
    margin: 0 5px;
    outline: 0;
    opacity: 0.3;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

#wsus__testimonial .slick-dots li.slick-active button,
#wsus__featured_listing .slick-dots li.slick-active button {
    opacity: 1;
}

#wsus__map_popup .modal-dialog {
    max-width: 550px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

#wsus__map_popup .modal-body {
    position: relative;
}

#wsus__map_popup .popup_close {
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--colorPrimary);
    color: var(--colorWhite);
    text-align: center;
    line-height: 30px;
    top: -10px;
    right: -10px;
    border-radius: 50%;
    font-size: 20px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    z-index: 1;
    opacity: 1;
}

#wsus__map_popup .popup_close:hover {
    background: var(--colorBlack);
}

.map_popup_text {
    padding: 15px 15px 7px 15px;
    overflow: hidden;
}

.map_popup_text span {
    display: inline-block;
    background: #04a8e8;
    color: var(--colorWhite);
    padding: 3px 15px;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
    border-radius: 3px;
}

.map_popup_text span i {
    margin-right: 10px;
}

.map_popup_text .red {
    background: #00af3c;
}

.map_popup_text .read_btn::after {
    display: none;
}

.map_popup_text .read_btn {
    background: var(--colorPrimary);
    padding: 7px 15px;
    border-radius: 5px;
    color: var(--colorWhite);
    margin-bottom: 5px;
}

.map_popup_text .read_btn:hover {
    background: var(--colorBlack);
}

.map_popup_content {
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.map_popup_content .img {
    height: 300px;
}

.map_popup_text h5 {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 20px;
    margin: 15px 0px 15px 0px;
}

.map_popup_text p {
    font-size: 15px;
    margin-bottom: 15px;
    font-weight: 400;
}

.map_popup_text .call,
.map_popup_text .mail {
    display: block;
    color: var(--colorBlack);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.map_popup_text .call i,
.map_popup_text .mail i {
    margin-right: 10px;
}

.map_popup_text .call:hover,
.map_popup_text .mail:hover {
    color: var(--colorPrimary);
}

.map_popup_content_map {
    border: 1px solid #ddd;
    width: 100%;
    height: 250px;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 25px;
}

.list_view .list_rating {
    justify-content: start;
}

/*===================
FEATURED LISTING  END
=====================*/

/*===================
   OUR PACKAGE START
=====================*/
.wsus__package_overlay {
    background: rgba(255, 255, 255, 0.3);
    padding: 90px 0px 120px 0px;
}

.member_price {
    padding: 40px;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    position: relative;
    margin-top: 30px;
    background: var(--colorWhite);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.member_price::before {
    position: absolute;
    content: "";
    width: 150px;
    height: 150px;
    background: #f6654214;
    bottom: -25px;
    left: -25px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.member_price h4 {
    font-size: 24px !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
    margin-bottom: 25px !important;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    color: var(--colorBlack) !important;
    background: none !important;
    border: none !important;
    display: block !important;
}

.member_price h5 {
    font-size: 30px;
    font-weight: 700;
    color: var(--colorWhite);
    position: relative;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    margin-top: 30px;
    z-index: 1;
    margin-bottom: 50px;
}

.member_price h5::after {
    position: absolute;
    content: "";
    width: 110%;
    height: auto;
    padding: 30px;
    background: var(--colorPrimary);
    top: -14px;
    left: -50px;
    z-index: -1;
    border-radius: 0px 50px 50px 0px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.member_price h5 span {
    color: var(--colorWhite);
    text-transform: capitalize;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    font-weight: 600;
}

.member_price p {
    font-size: 16px;
    font-weight: 400;
    color: var(--paraColor);
    text-transform: capitalize;
    margin-bottom: 15px;
}

.member_price a {
    font-size: 16px;
    font-weight: 500;
    color: var(--colorPrimary);
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    background: var(--colorWhite);
    padding: 10px 20px;
    border: 1px solid var(--colorPrimary);
    border-radius: 5px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    margin-top: 25px;
}

.member_price:hover a,
.member_price.active a {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

.member_price:hover,
.member_price.active {
    transform: scale(1.07);
    -webkit-transform: scale(1.07);
    -moz-transform: scale(1.07);
    -ms-transform: scale(1.07);
    -o-transform: scale(1.07);
}

/*===================
   OUR PACKAGE END
=====================*/

/*===================
    BLOG PART START
=====================*/
.blog_part_overlay {
    padding: 70px 0px 100px 0px;
}

.single_blog {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background: var(--colorWhite);
    border-radius: 5px;
    overflow: hidden;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    margin-top: 30px;
}

.single_blog .img {
    max-height: 370px;
    overflow: hidden;
}

.single_blog .img img {
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.single_blog:hover .img img {
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
}

.single_blog .text {
    padding: 30px;
}

.single_blog span {
    font-size: 14px;
    color: var(--colorBlack);
    font-weight: 400;
    text-transform: capitalize;
    margin-right: 25px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.single_blog span i {
    color: var(--colorBlack);
    margin-right: 5px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.single_blog .title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 10px;
    margin-top: 10px;
    color: var(--colorBlack);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.single_blog p {
    font-size: 16px;
    font-weight: 400;
    color: #646464;
    margin-bottom: 30px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.single_blog .read_btn::after {
    display: none;
}

.read_btn i {
    font-size: 10px;
    margin-left: 5px;
}

.single_blog .title:hover {
    color: var(--colorPrimary);
}

/*===================
    BLOG PAR END
=====================*/

/*===================
   SUBSCRIBE START
=====================*/
#subscribe {
    background: url(../images/subs_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 50px 0px;
}

.subs_text h3 {
    font-size: 30px;
    font-weight: 700;
    color: var(--colorWhite);
    text-transform: capitalize;
    position: relative;
}

.subs_text p {
    font-size: 16px;
    font-weight: 400;
    color: var(--colorWhite);
    margin-bottom: 35px;
    margin-top: 10px;
}

.subs_form form {
    position: relative;
}

.subs_form form input {
    width: 100%;
    padding: 20px 30px;
    border: none;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 400;
    color: #646464;
}

.subs_form form button {
    padding: 12px 30px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--colorWhite);
    background: var(--colorBlack);
    position: absolute;
    top: 7px;
    right: 7px;
    outline: none;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    border-radius: 40px;
}

.subs_form form button:hover {
    background: var(--colorPrimary);
}

/*===================
   SUBSCRIBE END
=====================*/

/*===================
TESTIMONIAL PART START
=====================*/
#wsus__testimonial {
    background: #f9fafc;
}

.wsus__test_overlay {
    padding: 95px 0px 130px 0px;
}

.wsus__single_clients {
    padding: 30px;
    background: var(--colorWhite);
    border-radius: 10px;
    overflow: hidden;
    margin: 30px 15px 0px 15px;
    border: 1px solid #eeeeeeab;
    position: relative;
}

.wsus__single_clients img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
}

.wsus__single_clients .c_name {
    display: block;
    color: #0b2c3d;
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 600;
    margin-left: 20px;
}

.wsus__single_clients .c_det {
    text-transform: capitalize;
    font-weight: 400;
    font-size: 15px;
    color: var(--colorBlack);
    display: block;
    width: 100%;
}

#wsus__testimonial button {
    /* display: none; */
}

.wsus__single_clients .text {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.wsus__single_clients .descrption {
    margin-top: 20px;
    position: relative;
    line-height: 30px;
}

.wsus__single_clients .rating {
    color: var(--ratingColor);
    position: absolute;
    top: 25px;
    right: 25px;
}

.wsus__single_clients .descrption::after {
    position: absolute;
    content: "\f10e";
    font-family: "font awesome 5 free";
    font-weight: 600;
    font-size: 100px;
    bottom: 20px;
    right: 0;
    opacity: 0.1;
}

/*===================
TESTIMONIAL PART END
=====================*/

/*===================
  FOOTER PART START
=====================*/
.footer-wrapper {
    margin-left: 150px;
    margin-right: 150px;
}

footer {
    padding-top: 40px;
    background: url(../images/footer_bg.jpg);
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    z-index: 10; /* Adjust as needed */
}

footer h3 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 20px;
    text-transform: capitalize;
    color: var(--colorWhite);
}

.footer_text p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--colorWhite);
    opacity: 0.7;
}

.footer_icon li {
    float: left;
    margin-right: 8px;
}

.footer_icon li a {
    color: var(--colorWhite);
    font-size: 14px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    width: 35px;
    height: 35px;
    border: 1px solid #d9d9d9;
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    opacity: 0.7;
}

.footer_icon li a:hover {
    color: var(--colorWhite);
    background: var(--colorPrimary);
    border-color: var(--colorPrimary);
    opacity: 1;
}

.footer_link li {
    margin-bottom: 15px;
}

.footer_link li a {
    font-size: 14px;
    color: var(--colorWhite);
    font-weight: 400;
    text-transform: capitalize;
    margin-left: -12px;
    width: 100%;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    opacity: 0.8;
}

.footer_link li a i {
    font-size: 10px;
    opacity: 0;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.footer_link li a:hover i {
    opacity: 1;
    margin-left: 12px;
}

.footer_link li a:hover {
    opacity: 1;
}

.footer_bottom {
    width: 100%;
    padding: 20px;
    border-top: 1px solid #ffffff1f;
    color: #000;
    margin-top: 50px;
}

.footer_bottom p {
    font-size: 16px;
    font-weight: 400;
    color: var(--colorWhite);
    opacity: 0.7;
}

.footer_bottom p a {
    color: var(--colorWhite);
    font-weight: 600;
}

.footer_contact ul li {
    border-bottom: 1px solid #ffffff1f;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

.footer_contact ul li p {
    margin: 0;
}

.footer_contact ul li a {
    margin-left: 0 !important;
    display: block;
    width: 100%;
    padding: 5px 0px;
    text-transform: none;
}

.footer_contact ul li:last-child {
    border-bottom: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.footer_contact ul li a,
.footer_contact ul li p {
    padding-left: 30px;
    position: relative;
    opacity: 0.7;
    font-size: 14px;
}

.footer_contact ul li a i,
.footer_contact ul li p i {
    position: absolute;
    top: 9px;
    left: 0;
    font-size: 16px;
    opacity: 1;
}

.footer_contact ul li a i,
.footer_contact ul li p i {
    margin-left: 0px !important;
}

.footer_bottom_link {
    display: flex;
    list-style: disc;
    justify-content: end;
    align-items: center;
}

.footer_bottom_link li {
    margin-right: 20px;
}

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

.footer_bottom_link li a {
    font-size: 16px;
    color: var(--colorWhite);
    text-transform: capitalize;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    opacity: 0.7;
}

.footer_bottom_link li a:hover {
    opacity: 1;
}

/*===================
  FOOTER PART END
=====================*/

.scroll_btn {
    width: 40px;
    height: 40px;
    display: none;
    line-height: 40px;
    text-align: center;
    color: var(--colorWhite);
    right: 15px;
    bottom: 15px;
    font-size: 14px;
    position: fixed;
    cursor: pointer;
    z-index: 98;
    background: var(--colorPrimary);
    border-radius: 50%;
}

.fa-chevron-up {
    font-size: 15px;
    margin-top: 10px;
}

/*===================
 BREADCRUMB PART START
=====================*/
#breadcrumb_part {
    background: url(../images/breadcrumb.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.bread_overlay {
    background: rgb(0 0 0 / 25%);
    padding: 140px 0px 25px 0px;
    margin-top: -50px;
}

#breadcrumb_part h4 {
    font-size: 40px;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--colorWhite);
}

#breadcrumb_part nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#breadcrumb_part li {
    font-size: 18px;
    font-weight: 500;
    color: var(--colorWhite);
    text-transform: capitalize;
}

#breadcrumb_part li a {
    color: var(--colorWhite);
}

.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    color: var(--colorWhite);
    content: ">>";
    padding-left: 5px;
    padding-right: 13px;
}

/*===================
BREADCRUMB PART END
=====================*/

/*===================
PAGINATION PART START
=====================*/
#pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

#pagination .page-item .page-link {
    color: var(--colorPrimary);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    background-color: var(--colorWhite);
    border: 1px solid var(--colorPrimary);
    margin-right: 10px !important;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    padding: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

#pagination .page-item.active .page-link {
    z-index: 3;
    color: var(--colorWhite);
    background: var(--colorPrimary);
}

#pagination .page-item .page-link:hover {
    color: var(--colorWhite);
    background-color: var(--colorPrimary);
}

/*===================
PAGINATION PART END
=====================*/

/*===================
  ABOUT PAGE START
=====================*/
#about_page {
    padding: 100px 0px;
}

.about_text h4 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 25px;
}

.about_text p {
    display: block;
    margin-top: 20px;
}

.about_text ul {
    margin-top: 20px;
}

.about_text ul li {
    font-size: 16px;
    font-weight: 400;
    margin-top: 10px;
    position: relative;
    padding-left: 25px;
}

.about_text ul li::after {
    position: absolute;
    content: "\f00c";
    font-family: "font awesome 5 free";
    font-size: 12px;
    font-weight: 600;
    top: 4px;
    left: 0;
    color: var(--paraColor);
}

.about_text a {
    padding: 10px 20px;
    background: var(--colorPrimary);
    border-radius: 5px;
    color: var(--colorWhite);
    text-transform: capitalize;
    margin-top: 30px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.about_text a:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
}

.about_img {
    position: relative;
    max-height: 630px;
    padding: 10px 20px 20px 10px;
}

.about_img img {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.about_img .img_2 {
    width: 550px;
    height: 200px;
    position: absolute;
    bottom: 0px;
    left: -50px;
    border: 5px solid var(--colorWhite);
    border-radius: 8px;
    background: var(--colorWhite);
}

.about_img::after {
    position: absolute;
    content: "";
    width: 300px;
    height: 300px;
    background: var(--colorPrimary);
    border-radius: 5px;
    top: 0;
    left: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    z-index: -1;
}

.about_img::before {
    position: absolute;
    content: "";
    width: 170px;
    height: 170px;
    background: var(--colorPrimary);
    border-radius: 5px;
    bottom: 0;
    right: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    z-index: -1;
}

.about_img .venobox {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--colorWhite);
    width: 100%;
    height: 100%;
    display: block;
    transform: translate(-50%, -50%);
}

.about_img .venobox i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    background: var(--colorPrimary);
    font-size: 20px;
    border-radius: 50%;
}

.about_page_features_mar {
    padding-top: 100px !important;
}

#about_page_category_slider {
    padding: 50px 0px;
    background: #fff9f7;
}

.about_slider_single {
    border: 1px solid #c8d3ff;
    border-radius: 5px;
    overflow: hidden;
    display: block;
    margin: 0px 12px;
}

/*===================
  ABOUT PAGE END
=====================*/

/*===================
 GET IN TOUCH  START
=====================*/
#get_in_touch {
    padding-top: 100px;
}

#get_in_touch h2 {
    text-transform: capitalize;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 30px;
    margin-top: 35px;
}

.contact_box {
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.contact_box_icon {
    width: 30%;
    /* float: left; */
    text-align: center;
    padding: 40px;
    border-right: 1px solid #f6654242;
}

.contact_box_icon i {
    font-size: 35px;
    color: var(--colorPrimary);
    font-weight: 900;
}

.contact_box_text {
    width: 70%;
    padding: 0px 25px;
}

.contact_box_text a,
.contact_box_text p {
    display: block;
    color: var(--colorBlack);
    font-size: 16px;
    font-weight: 500;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.contact_box_text a:hover {
    color: var(--colorPrimary);
}

.contact_input input,
.contact_input textarea {
    width: 100%;
    border: 1px solid #eee;
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 400;
    color: var(--colorBlack);
    resize: none;
}

.contact_input button {
    border: none;
    padding: 10px 25px;
    background: var(--colorPrimary);
    color: var(--colorWhite);
    border-radius: 5px;
}

.contact_input button:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
}

.contact_map {
    border: 1px solid #ddd;
    overflow: hidden;
    border-radius: 5px;
    margin: 70px 0px 100px 0px;
}

/*===================
 GET IN TOUCH  END
=====================*/

/*===================
  LISTING PAGE START
=====================*/
#listing_grid {
    padding: 10px 0px 100px 0px;
    background-color: #fcf8f8;
}

.listing_grid_sidbar {
    padding: 25px;
    border-radius: 5px;
    border: 1px solid #eee;
}

.sidebar_line {
    margin-bottom: 25px;
    position: relative;
}

.sidebar_line form {
    position: relative;
}

.sidebar_line input {
    width: 100%;
    border: 1px solid #eee;
    padding: 15px 20px;
    border-radius: 5px;
}

.sidebar_line button {
    position: absolute;
    top: -9px;
    right: 7px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.sidebar_line button:hover {
    color: #000;
}

.sidebar_line_select {
    margin-bottom: 25px;
}

.listing_grid_sidbar .form-check {
    margin: 10px 0px;
}

.listing_grid_sidbar .form-check input {
    width: 16px;
    border: 1px solid #ddd;
    height: 16px;
    padding: 0;
    margin-right: 0;
    margin-top: 2px;
}

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

.listing_grid_sidbar button {
    border: none;
    margin-top: 15px;
    padding: 10px 20px;
    background: var(--colorPrimary);
    border-radius: 4px;
    color: var(--colorWhite);
}

.listing_grid_sidbar button:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
}

.wsus__property_topbar {
    background: var(--colorWhite);
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0px 11px;
}

.wsus__property_topbar.mar {
    margin-bottom: 30px;
}

.wsus__property_topbar::after {
    position: absolute;
    content: "";
    background: #c8d3ff;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
}

.wsus__property_topbar::before {
    position: absolute;
    content: "";
    background: #c8d3ff;
    width: 100%;
    height: 1px;
    left: 0;
    top: 0;
}

.wsus__property_topbar_left {
    display: flex;
}

.wsus__property_topbar_left ul {
    display: flex;
}

.wsus__property_topbar_left ul li a {
    width: 57px;
    height: 57px;
    border: 1px solid #c8d3ff;
    text-align: center;
    line-height: 57px;
    font-size: 20px;
    color: #093b55;
    border-right: 0;
}

.wsus__property_topbar_left ul li:last-child a {
    border-right: 1px solid #c8d3ff;
}

.wsus__property_topbar .select2-container {
    width: 180px !important;
}

.wsus__property_topbar_left ul li a.wsus_active_bar {
    color: #1b6eea !important;
}

.wsus__property_topbar .select2-container--default .select2-selection--single {
    border-radius: 0;
}

.grid_view .wsus__featured_single_text span {
    top: -25px;
}

.list_view .list_padding {
    padding: 0px 50px;
}

.list_view .wsus__featured_single a {
    width: 50%;
    float: left;
}

.list_view .wsus__featured_single_text {
    position: relative;
    width: 50%;
    float: left;
    text-align: left;
    padding: 70px 20px 20px 20px;
}

.list_view .open,
.list_view .close {
    text-transform: capitalize;
    background: #00af3c;
    color: var(--colorWhite);
    display: inline-block;
    padding: 0px 15px 1px 15px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    position: absolute;
    top: 10px;
    left: 10px;
}

.list_view .close {
    background: red;
}

.list_view .wsus__featured_single_text a {
    width: auto;
    background: #04a8e8;
    color: var(--colorWhite);
    padding: 5px 20px;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
    border-radius: 3px;
}

.list_view .wsus__featured_single_text a i {
    margin-right: 10px;
}

.list_view .wsus__featured_single_text .red {
    background: #00af3c;
}

.list_view .wsus__featured_single:hover .wsus__featured_single_text i {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.list_view .wsus__featured_single_text h6 {
    font-size: 30px;
}

.list_view .wsus__featured_single_text .list_details {
    font-size: 13px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.list_view .small_text {
    height: 0;
    padding: 15px 10px;
    line-height: 0;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    transform: translateX(0%) !important;
}

/*===================
  LISTING PAGE START
=====================*/

/*===================
 BLOG DETAILS START
=====================*/
#blog_details {
    padding: 100px 0px;
}

.blog_sidebar h4 {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 30px;
}

.blog_search {
    margin-bottom: 30px;
    border: 1px solid #ccc; /* Light gray border */
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 30px;
    padding-bottom: 25px;
    border-radius: 10px;
    background-color: rgb(250, 242, 242);
}

.blog_search form {
    position: relative;
}

.blog_search input {
    width: 100%;
    height: 45px;
    padding: 15px 20px;
    border: 1px solid var(--colorPrimary);
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--colorBlack);
}

.blog_search button {
    border: 0;
    position: absolute;
    top: 0px;
    right: 0;
    height: 45px;
    width: 45px; /* Make the button square for perfect alignment */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background: var(--colorPrimary);
    color: var(--colorWhite);
    font-size: 20px;
    border-radius: 5px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    outline: none;
    transition: all linear 0.3s;
}

.blog_search button i {
    font-size: 20px; /* Icon size */
}

.blog_search button:hover {
    background: var(--colorBlack);
}

.blog_category ul li a {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    color: var(--colorBlack);
    font-size: 16px;
    font-weight: 400;
    transition: all linear 0.3s;
}

.blog_category ul li:last-child a {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.blog_category ul li a span {
    color: var(--colorBlack);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.blog_category ul li a:hover {
    color: var(--colorPrimary);
}

.blog_category ul li a:hover span {
    color: var(--colorPrimary);
}

.blog_category {
    margin-bottom: 30px;
    border: 1px solid #ccc; /* Light gray border */
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 30px;
    padding-bottom: 5px;
    border-radius: 10px;
    background-color: rgb(250, 242, 242);
}

.sidebar_blog_single {
    margin-bottom: 20px;
}

.sidebar_blog_img {
    width: 25%;
    float: left;
    padding-right: 15px;
}

.sidebar_blog_text {
    width: 75%;
    float: left;
}

.sidebar_blog_text h5 {
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.sidebar_blog_text p {
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    margin-top: 8px;
}

.sidebar_blog_text p span {
    margin-right: 15px;
    /* border-right: 2px solid #ddd; */
    padding-right: 10px;
}

.sidebar_blog_single:hover .sidebar_blog_text h5 {
    color: var(--colorPrimary);
}

.sidebar_contact_share ul {
    display: flex;
}

.sidebar_contact_share ul li {
    margin-right: 10px;
}

.sidebar_contact_share ul li a {
    width: 35px !important;
    text-align: center;
    border: 1px solid #ddd;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    color: var(--colorBlack);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.sidebar_contact_share ul li a:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
    border-color: var(--colorBlack);
}

.main_blog_text {
    border: 1px solid #ddd;
    padding: 0 30px;
}

.main_blog_img {
    border-radius: 5px;
    overflow: hidden;
    max-height: 500px;
}

.main_blog_header {
    display: flex;
    align-items: center;
    padding-top: 25px;
}

.main_blog_header li a {
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    margin-right: 20px;
    padding-right: 20px;
    position: relative;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    color: var(--paraColor);
}

.main_blog_header li a i {
    margin-right: 5px;
}

.main_blog_header li a::after {
    position: absolute;
    content: "";
    width: 10px;
    height: 2px;
    top: 10px;
    right: -5px;
    background: var(--paraColor);
}

.main_blog_header li:last-child a::after {
    display: none;
}

.main_blog h4 {
    font-size: 26px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 30px 0px;
}

.main_blog p {
    font-size: 15px;
}

.main_blog p span {
    display: block;
    margin-top: 25px;
}

.blog_comment_area {
    margin-top: 70px;
}

.wsus__single_comment {
    overflow: hidden;
    padding: 0;
    padding-bottom: 30px;
    margin: 30px 0px;
    border-bottom: 1px solid #eee;
}

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

#blog_details .input_comment {
    background: #f6654212;
    padding: 30px;
    border-radius: 10px;
}

#blog_details .input_comment h5 {
    margin-bottom: 30px;
}

#blog_details .input_comment button:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
}

.wsus__single_comment_img {
    width: 10%;
    float: left;
}

.wsus__single_comment_img img {
    width: 70px !important;
    height: 70px;
    border-radius: 50%;
}

.wsus__single_comment_text {
    width: 90%;
    float: left;
    padding-left: 20px;
}

.wsus__single_comment_text h5 {
    margin-bottom: 5px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: capitalize;
}

.wsus__single_comment_text h5 span {
    background: #6782f2;
    color: var(--colorWhite);
    text-transform: capitalize;
    padding: 0px 5px;
    border-radius: 3px;
    cursor: pointer;
}

.wsus__single_comment_text span {
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 500;
}

.wsus__single_comment_text p {
    color: var(--colorBlack);
    font-size: 14px;
    font-weight: 400;
}

.blog_comment_area h5 {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 16px;
}

.blog_single_input input,
.blog_single_input textarea {
    width: 100%;
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 25px;
    resize: none;
    font-size: 16px;
    font-weight: 400;
    color: var(--colorBlack);
    border: none;
}

.blog_single_input button {
    padding: 10px 30px;
    background: var(--colorPrimary);
    border-radius: 4px;
    border: none;
    color: var(--colorWhite);
}

.blog_single_input button:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
}

.sidebar_blog {
    margin-bottom: 30px;
    border: 1px solid #ccc; /* Light gray border */
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 30px;
    padding-bottom: 5px;
    border-radius: 10px;
    background-color: rgb(250, 242, 242);
}

/*===================
 BLOG DETAILS END
=====================*/

/*===================
 LISTING DETAILS START
=====================*/
#listing_details {
    padding: 30px 0px;
}

.listing_det_header {
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.listing_det_header_img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    float: left;
    margin-right: 40px;
    border: 1px solid #eee;
}

.listing_det_header_text {
    float: left;
}

.listing_det_header_text h6 {
    font-size: 35px;
    font-weight: 600;
    text-transform: capitalize;
}

.listing_det_header_text .host_name {
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    margin: 10px 0px 5px 0px;
    color: var(--colorBlack);
}

.listing_det_header_text .host_name a {
    color: var(--paraColor);
    margin-left: 10px;
    display: inline-block;
}

.listing_det_header_text .rating {
    margin-bottom: 10px;
    color: #ffc100;
    font-size: 14px;
}

.listing_det_header_text .rating b {
    background: var(--colorPrimary);
    color: var(--colorWhite);
    padding: 1px 7px;
    font-size: 14px;
    border-radius: 2px;
    margin: 0px 15px;
}

.listing_det_header_text .rating span {
    font-size: 15px;
    font-weight: 600;
}

.listing_det_header_text ul {
    display: flex;
}

.listing_det_header_text ul li a {
    background: #f6654224;
    padding: 3px 10px;
    margin-right: 10px;
    font-size: 14px;
    font-weight: 400;
    color: var(--colorBlack);
    border-radius: 2px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.listing_det_header_text ul li:last-child a {
    background: var(--colorPrimary);
    color: var(--colorWhite);
    margin: 0;
}

.listing_det_header_text ul li:last-child a:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
}

.listing_det_header_text ul li a i {
    margin-right: 5px;
}

.listing_det_header_text ul li a:hover {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

.listing_det_text {
    border-radius: 5px;
    margin-bottom: 30px;
}

.listing_det_text p {
    font-size: 0.9rem;
}

.listing_det_text p span {
    display: block;
    margin-top: 20px;
}

.listing_det_Photo {
    margin-bottom: 15px;
}

.listing_det_Photo .venobox {
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

/* .listing_det_Photo .photo_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        0deg,
        rgba(12, 46, 64, 0.51) 20%,
        transparent 100%
    );
}

.listing_det_Photo .photo_overlay i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--colorWhite);
    font-size: 20px;
    border: 1px solid #fff;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    opacity: 0;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.listing_det_Photo .venobox:hover .photo_overlay i {
    opacity: 1;
} */

.listing_det_feature {
    margin-bottom: 30px;
}

.listing_det_feature_single {
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background: #f6654212;
}

.listing_det_feature_single i {
    border-right: 1px solid var(--colorPrimary) 82;
    margin-right: 15px;
    width: 40px;
    height: auto;
    line-height: 40px;
    text-align: center;
    color: var(--colorPrimary);
    padding-right: 10px;
}

.listing_det_feature_single span {
    color: var(--colorPrimary);
}

.listing_det_video {
    border-radius: 5px;
    margin-bottom: 30px;
}

.listing_det_video_img {
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}

.listing_det_video_img .venobox {
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.listing_det_video_img .venobox i {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--colorPrimary);
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    font-size: 16px;
    background: var(--colorWhite);
}

.listing_det_video_img .venobox i::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
    background: var(--colorWhite);
    z-index: -1;
    animation: icon_animi 1.5s infinite;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    color: var(--colorPrimary);
    -webkit-animation: icon_animi 1.5s infinite;
}

@keyframes icon_animi {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
        -webkit-transform: scale(1.7);
        -moz-transform: scale(1.7);
        -ms-transform: scale(1.7);
        -o-transform: scale(1.7);
    }
}

.listing_det_location {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.wsus__listing_review {
    margin-top: 70px;
}

.wsus__listing_review h4 {
    text-transform: capitalize;
    font-weight: 600;
    /* font-size: 20px; */
    margin-bottom: 16px;
}

.wsus__listing_review h4 span {
    width: 25px;
    height: 25px;
    display: inline-block;
    background: var(--colorPrimary);
    text-align: center;
    line-height: 25px;
    color: var(--colorWhite);
    font-size: 16px;
    font-weight: 700;
    border-radius: 3px;
    margin-left: 20px;
}

.wsus__total_rating {
    padding: 20px;
    background: var(--colorWhite);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.wsus__total_rating h4 {
    background: #6782f2;
    color: var(--colorWhite);
    padding: 10px 15px;
    font-size: 40px;
    font-weight: 700;
    border-radius: 5px;
}

.wsus__total_rating span {
    display: inline-block;
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 400;
    margin: 0px 15px;
    color: var(--colorBlack);
}

.wsus__total_rating p {
    color: #ffc100;
    font-size: 16px;
}

.wsus__listing_review .wsus__single_comment_text h5 span {
    background: none;
    color: #ffc100;
    padding: 0px 10px;
    cursor: auto;
    font-size: 13px;
}

.wsus__listing_review h5 {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 16px;
}

.wsus__select_rating {
    margin-bottom: 25px;
    position: relative;
}

.wsus__select_rating i {
    position: absolute;
    top: 47%;
    left: 20px;
    color: #ffc100;
    font-size: 16px;
    z-index: 1;
    transform: translateY(-47%);
}

.wsus__select_rating
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #888;
    line-height: 35px;
    text-transform: capitalize;
    padding-left: 40px;
}

.listing_det_side_address {
    padding: 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.listing_det_side_address a {
    display: block;
    font-size: 16px;
    color: var(--paraColor);
    font-weight: 400;
    margin-bottom: 15px;
}

.listing_det_side_address a i {
    margin-right: 5px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}

.listing_det_side_address p {
    display: block;
    font-size: 16px;
    color: var(--paraColor);
    font-weight: 400;
    margin-bottom: 15px;
}

.listing_det_side_address p i {
    margin-right: 5px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}

#listing_details .input_comment {
    background: #f6654212;
    padding: 30px;
    border-radius: 10px;
    margin-top: 70px;
}

.listing_det_side_address ul {
    display: flex;
    margin-top: 25px;
}

.listing_det_side_address ul li a {
    margin: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background: var(--colorWhite);
    color: var(--colorPrimary);
    border: 1px solid var(--colorPrimary);
    margin-right: 10px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.listing_det_side_address ul li a i {
    margin: 0px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    border: 0;
    width: auto;
    height: auto;
}

.listing_det_side_address ul li a:hover {
    background: var(--colorPrimary);
    color: #d5deff;
}

.listing_det_side_address ul li a:hover i {
    color: #d5deff;
}

.listing_details_sidebar h5 {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 16px;
}

.listing_det_side_open_hour {
    margin-bottom: 30px;
    padding: 25px;
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.listing_det_side_open_hour p {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 500;
    align-items: center;
}

.listing_det_side_open_hour p span {
    font-weight: 400;
    font-size: 16px;
}

.listing_det_side_contact {
    margin-bottom: 30px;
    padding: 25px;
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.listing_det_side_contact input,
.listing_det_side_contact textarea {
    border: 1px solid #eee;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    resize: none;
    width: 100%;
    color: var(--colorBlack);
    margin-bottom: 20px;
}

.listing_det_side_contact button {
    border: none;
    background: var(--colorPrimary);
    border-radius: 4px;
    padding: 10px 20px;
    color: var(--colorWhite);
}

.listing_det_side_contact button:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
}

.listing_det_side_list {
    margin-bottom: 30px;
    padding: 25px 25px 0px 25px;
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.listing_det_side_list .sidebar_blog_text h5 {
    font-size: 17px;
}

.listing_det_side_add {
    padding: 25px 25px 0px 25px;
    border-radius: 5px;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
        rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
    overflow: hidden;
}

.listing_det_side_add .wsus__featured_single {
    margin: 0;
    margin-bottom: 25px;
    box-shadow: none;
    border: 1px solid #eee;
}

.listing_det_side_add .wsus__featured_single_text span {
    top: -25px;
}

/*===================
 LISTING DETAILS END
=====================*/

/*===================
   DASHBOARD START
=====================*/
#dashboard {
    padding: 0px;
}

.dashboard_menu {
    background: var(--colorWhite);
    display: flex;
    padding: 0px 20px;
    width: 100%;
    height: 65px;
    border-bottom: 1px solid #ddd;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.dashboard_menu .menu_icon {
    position: absolute;
    line-height: 35px;
    width: 35px;
    height: 35px;
    background: var(--colorPrimary);
    display: inline-block;
    text-align: center;
    font-size: 20px;
    border-radius: 3px;
    color: var(--colorWhite);
    cursor: pointer;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.dashboard_menu .menu_icon:hover {
    background: var(--colorBlack);
}

.dashboard_menu ul li .dropdown-toggle {
    text-transform: capitalize;
}

.dashboard_menu ul li .dropdown-toggle img {
    width: 50px !important;
    height: 50px;
    border-radius: 50%;
    margin-right: 5px;
}

.dashboard_menu .dropdown-menu {
    padding: 0;
    margin-top: -5px;
}

.dashboard_menu .dropdown-menu li a {
    text-transform: capitalize;
}

.dashboard_menu li:hover a {
    color: #0a58d0;
}

.dashboard_sidebar {
    width: 15%;
    position: fixed;
    top: 100px;
    /* left: 0; */
    background: #f665421c;
    height: auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #0a50b2 #0b172d;
    z-index: 9999;
    border-radius: 5px;
    background-color: var(--colorsidebar);
}

.dashboard_sidebar .dash_logo {
    display: block;
    text-align: center;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--colorWhite);
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 5px solid var(--colorWhite);
}

.dashboard_sidebar .close_icon {
    line-height: 35px;
    width: 35px;
    height: 35px;
    background: var(--colorPrimary);
    text-align: center;
    font-size: 20px;
    color: var(--colorWhite);
    cursor: pointer;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.dashboard_sidebar .close_icon:hover {
    background: var(--colorBlack);
}

.dashboard_link {
    margin-top: 0px;
}

.dashboard_link li a {
    text-align: left;
    width: 100%;
    color: var(--colorWhite);
    border-bottom: 1px solid var(--colorWhite);
    padding: 12px 12px 12px 30px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    text-transform: capitalize;
}

.dashboard_link li a i {
    margin-right: 10px;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}

.dashboard_link li:first-child a {
    border-top: 1px solid var(--colorWhite);
}

.dashboard_link li a:hover,
.dashboard_link li .active {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

.manage_dashboard_single {
    background: #287acc;
    padding: 50px 30px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    position: relative;
}

.manage_dashboard_single i {
    position: absolute;
    font-size: 75px;
    color: var(--colorWhite);
    opacity: 0.2;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.manage_dashboard_single h3 {
    font-size: 40px;
    color: var(--colorWhite);
    font-weight: 700;
}

.manage_dashboard_single p {
    color: var(--colorWhite);
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
}

.manage_dashboard_single.orange {
    background: #ff9911;
}

.manage_dashboard_single.green {
    background: #1ec38b;
}

.manage_dashboard_single.red {
    background: #f91942;
}

.active_package {
    background: var(--colorWhite);
    padding: 30px;
    border-radius: 10px;
    margin-top: 45px;
    border: 1px solid #eee;
}

.dashboard_content h4 {
    font-size: 18px;
    /* text-transform: capitalize; */
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}

.dashboard_table {
    border-top: 0;
    border: 1px solid #eee;
    margin-bottom: 0;
    border-right: 0;
}

.dashboard_table tr {
    display: flex;
}

.dashboard_table tr td {
    border-right: 1px solid #eee;
}

.dashboard_table .active_left {
    width: 50%;
    color: var(--paraColor);
    font-size: 16px;
    font-weight: 700;
    padding: 10px 20px;
}

.dashboard_table .package_right {
    color: var(--paraColor);
    font-size: 16px;
    font-weight: 400;
    padding: 10px 20px;
}

.dashboard_breadcrumb {
    background: var(--colorWhite);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 14px;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard_breadcrumb span {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--colorBlack);
}

.dashboard_breadcrumb ul {
    display: flex;
}

.dashboard_breadcrumb ul li a {
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--colorBlack);
    margin-right: 15px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.dashboard_breadcrumb ul li:last-child a {
    margin-right: 0;
}

.dashboard_breadcrumb ul li a i {
    margin-left: 10px;
    font-size: 14px;
}

.dashboard_breadcrumb ul li a:hover,
.dashboard_breadcrumb ul li .bread_active {
    color: var(--colorPrimary);
}

.my_listing {
    background: var(--colorWhite);
    padding: 30px;
    border-radius: 5px;
    border: 1px solid #eee;
}

.active_inactive h6 {
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 400;
    color: var(--colorBlack);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.active_inactive h6 span {
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    background: var(--colorPrimary);
    color: var(--colorWhite);
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    border-radius: 50% 0px 0px 50%;
}

.active_inactive h6 span.red {
    background: #ff0000;
}

.active_inactive_item {
    border: 1px solid #eee;
    overflow: hidden;
    border-radius: 5px;
    margin-top: 25px;
    /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
}

.active_inactive_img {
    width: 40%;
    float: left;
}

.active_inactive_text {
    width: 60%;
    float: left;
    position: relative;
    padding: 100px 20px 20px 20px;
}

.active_inactive_text h3 {
    text-transform: capitalize;
    font-size: 25px;
    font-weight: 500;
}

.active_inactive_text p {
    font-size: 16px;
    font-weight: 400;
    color: var(--colorBlack);
    margin: 10px 0px 15px 0px;
}

.active_inactive_text p i {
    margin-right: 5px;
}

.active_inactive_text .color_text a {
    width: auto;
    background: #04a8e8;
    color: var(--colorWhite);
    padding: 5px 12px;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
    border-radius: 3px;
}

.active_inactive_text .color_text a i {
    margin-right: 10px;
}

.active_inactive_text .color_text .red {
    background: #00af3c;
}

.active_inactive_text ul {
    display: flex;
    align-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
}

.active_inactive_text ul li a {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-left: 10px;
    background: #ddd;
    border-radius: 3px;
    color: var(--colorWhite);
    font-size: 14px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.active_inactive_text ul li:nth-child(1) a {
    background: #04a8e8;
}

.active_inactive_text ul li:nth-child(2) a {
    background: #00af3c;
}

.active_inactive_text ul li:nth-child(3) a {
    background: #ff0000;
}

.my_listing_single {
    margin-bottom: 20px;
}

.my_listing_single label {
    display: block;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 600;
    color: var(--colorBlack);
    margin-bottom: 5px;
}

.my_listing_single input,
.my_listing_single textarea {
    width: 100%;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    color: var(--colorBlack);
    resize: none;
}

.my_listing_single .input_area {
    position: relative;
}

.my_listing_single .input_area i {
    position: absolute;
    top: 20px;
    left: 15px;
    font-size: 16px;
    font-weight: 600;
    color: #6281fb;
    cursor: pointer;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    z-index: 999;
}

.input_area_2 textarea {
    padding: 15px;
}

.my_listing_single .input_area i:hover {
    color: var(--colorPrimary);
}

.my_listing_single .select2-container--default .select2-selection--single {
    border: 1px solid #eee;
}

.my_listing_single
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    padding-left: 15px;
}

.my_listing_single.mar_bottom {
    margin-bottom: 0;
}

.my_listing.list_mar {
    margin-top: 40px;
}

.input_area_2 input {
    padding: 12px;
    border: 1px solid #eee;
    margin-bottom: 5px;
}

.inpiut_pad input {
    padding: 15px 12px !important;
}

.dashboard_content h4 span {
    color: #dc3545;
    font-size: 14px;
    margin-left: 10px;
}

.amenities_check_area {
    position: relative;
    border: 1px solid #eee;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 5px;
}

.amenities_check_area input {
    padding: 0;
}

.amenities_check_area label {
    display: block;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
    color: var(--colorBlack);
    width: 100%;
}

.amenities_check_area i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    opacity: 0.3;
    color: var(--colorPrimary);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.amenities_check_area:hover i {
    color: var(--colorPrimary);
    opacity: 1;
}

.my_listing.list_padding {
    padding-bottom: 0;
}

.my_listing_single.list_mar {
    margin-bottom: 25px;
}

#medicine_row label,
#medicine_row2 label {
    display: block;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 600;
    color: var(--colorBlack);
    margin-bottom: 5px;
}

#medicine_row label span,
#medicine_row2 label span {
    color: #dc3545;
    font-size: 14px;
    margin-left: 5px;
}

.medicine_row_input {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: 23px;
}

.medicine_row_input input {
    padding: 12px;
    width: 90%;
    border-radius: 5px;
    border: 1px solid #eee;
}

.medicine_row_input button {
    background: var(--colorPrimary);
    color: var(--colorWhite);
    border: none;
    width: 7%;
    height: 98%;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 5px;
    font-size: 18px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

#removeRow,
#removeRow2 {
    background: #ff0000;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.medicine_row_input button:hover {
    background: var(--colorBlack);
}

#removeRow:hover,
#removeRow2:hover {
    background: var(--colorPrimary);
}

.visitor_rev_single {
    border: 1px solid #eee;
    overflow: hidden;
    border-radius: 5px;
    padding: 20px;
}

.visitor_rev_img {
    width: 25%;
    float: left;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 14px;
}

.visitor_rev_text {
    width: 75%;
    float: left;
    padding-left: 20px;
}

.visitor_rev_text .title {
    color: var(--colorBlack);
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;
}

.visitor_rev_text .title span {
    color: var(--colorPrimary);
    font-weight: 400;
    font-size: 16px;
    margin-left: 10px;
}

.visitor_rev_text p {
    font-size: 14px;
    color: #ff9900;
    margin: 8px 0px 10px 0px;
}

.visitor_rev_text .small_text {
    display: block;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 400;
}

.visitor_rev_text ul {
    display: flex;
    align-items: center;
}

.visitor_rev_text ul li a {
    width: auto;
    background: var(--colorBlack);
    color: var(--colorWhite);
    padding: 5px 20px;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
    border-radius: 3px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.visitor_rev_text ul li a i {
    margin-right: 10px;
}

.visitor_rev_text ul li:last-child a {
    background: #ff0000;
}

.profile_pic_upload {
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    height: 245px;
}

.profile_pic_upload img {
    height: 100%;
    object-fit: cover !important;
}

.profile_pic_upload input {
    padding: 10px;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: 90%;
    border-radius: 5px;
    font-size: 13px;
    background: #eee;
}

.banner_pic_upload {
    margin-bottom: 20px;
}

.banner_pic_upload input {
    width: 30%;
}

.my_listing .read_btn {
    border: none;
    padding: 10px 20px;
    background: var(--colorPrimary);
    color: var(--colorWhite);
    border-radius: 5px;
}

.my_listing .read_btn:hover {
    color: var(--colorWhite);
    background: var(--colorBlack);
}

.my_listing .table {
    margin: 0;
    border-left: 1px solid #eee;
}

.my_listing .table thead {
    background: #f665421c;
    color: #0f1221;
    font-size: 14px;
    text-transform: capitalize;
}

.my_listing .table thead tr th {
    border: none;
    border-right: 1px solid #eee;
    padding: 15px 10px;
}

.my_listing .table tr td {
    border-right: 1px solid #eee;
    padding: 15px 10px;
}

/* .my_listing .table tr th,
.my_listing .table tr td {
	min-height: 130px;
} */

.my_listing .table .package,
.my_listing .table .e_date,
.my_listing .table .p_date {
    width: 200px;
}

.my_listing .table .price {
    width: 150px;
}

.my_listing .table .method {
    width: 250px;
}

.my_listing .table .tr_id {
    width: 350px;
}

.my_listing .table .status {
    width: 70px;
    text-align: center;
}

.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: none;
    background: #cae5ff;
}

.my_listing .table tbody .status a {
    background: var(--colorPrimary);
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    color: var(--colorWhite);
    border-radius: 5px;
    cursor: pointer;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.my_listing .table tbody .status a:hover {
    background: #0f1221;
}

.dashboard_breadcrumb .read_btn {
    color: var(--colorWhite);
}

.dashboard_breadcrumb .read_btn i {
    margin-right: 10px;
    margin-left: 0;
    font-size: 16px;
}

.dashboard_breadcrumb .read_btn:hover {
    color: var(--colorWhite);
}

.schedule table tr td {
    text-transform: capitalize;
    font-size: 16px !important;
}

.schedule .sn {
    width: 100px;
    min-width: 50px;
}

.schedule .day {
    width: 250px;
    min-width: 100px;
}

.schedule .date {
    width: 300px;
    min-width: 125px;
}

.schedule .s_status {
    width: 250px;
    min-width: 110px;
}

.schedule .action {
    width: 250px;
}

.schedule tbody .active {
    color: green;
    font-weight: 500;
    position: relative;
    padding-left: 40px !important;
}

.schedule tbody .active::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    position: absolute;
    content: "\f00c";
    top: 15px;
    left: 15px;
    color: green;
}

.schedule tbody .active i,
.schedule tbody .inactive i {
    margin-left: 10px;
}

.schedule tbody .inactive {
    color: red;
    font-weight: 500;
    position: relative;
    padding-left: 40px !important;
}

.schedule tbody .inactive::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    position: absolute;
    content: "\f00d";
    top: 15px;
    left: 15px;
    color: red;
}

.schedule ul {
    display: flex;
    justify-content: center;
}

.schedule ul li a {
    width: 35px;
    height: 35px;
    background: var(--colorBlack);
    color: var(--colorWhite);
    display: inline-block;
    text-align: center;
    line-height: 35px;
    margin: 0px 5px;
    border-radius: 3px;
    font-size: 14px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.schedule ul li:last-child a {
    background: red;
}

.wsus_schedule_create_single {
    margin-bottom: 25px;
}

.wsus_schedule_create_single label {
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

.wsus__invoice_top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.wsus__invoice_top .invoice_logo {
    width: 165px;
    display: block;
    overflow: hidden;
}

.wsus__invoice_number h5 {
    text-align: right;
    font-size: 22px;
    font-weight: 500;
    text-transform: capitalize;
}

.wsus__invoice_number p {
    text-transform: capitalize;
}

.wsus__invoice_header_left {
    margin-bottom: 60px;
}

.wsus__invoice_header_left h5 {
    text-transform: capitalize;
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 30px;
}

.wsus__invoice_header_left h6 {
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
}

.wsus__invoice_header_left .call_mail {
    display: block;
    font-size: 16px;
    font-weight: 400;
    margin: 5px 0px;
    color: var(--colorBlack);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.wsus__invoice_header_left .call_mail:hover {
    color: var(--colorPrimary);
}

.invoice_right {
    text-align: right;
}

.invoice .read_btn {
    border: none;
    margin-top: 25px;
}

/*===================
    DASHBOARD END
=====================*/

/*===================
CUSTOM PAGE START END
=====================*/
#wsus__custom_page {
    padding: 75px 0px 100px 0px;
}

#wsus__custom_page p {
    display: block;
    margin-top: 30px;
}

#wsus__custom_page ul li,
#wsus__custom_page ol li {
    list-style: square;
    margin-top: 15px;
}

#wsus__custom_page ul,
#wsus__custom_page ol {
    padding-left: 30px;
    margin-top: 20px;
}

/*===================
CUSTOM PAGE END
=====================*/

/*===================
AGENT PROFILE START
=====================*/
#wsus__agent_profile {
    padding: 100px 0px;
}

.wsus__profile_header {
    padding: 40px;
    background: var(--colorWhite);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    /* border: 1px solid #C8D3FF; */
    margin-bottom: 70px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 14px;
}

.wsus__profile_header img {
    width: 350px !important;
    height: 350px !important;
    border-radius: 50%;
    border: 3px solid var(--colorPrimary);
    margin-right: 30px;
}

.wsus__profile_text {
    max-width: 45%;
}

.wsus__profile_text h4 {
    text-transform: capitalize;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

.wsus__profile_text a,
.wsus__profile_text p {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--paraColor);
    margin-bottom: 10px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s ease;
    -moz-transition: all linear 0.3s ease;
    -ms-transition: all linear 0.3s ease;
    -o-transition: all linear 0.3s ease;
}

.wsus__profile_text a i,
.wsus__profile_text p i {
    width: 25px;
}

.wsus__profile_text a:hover {
    color: var(--colorPrimary);
}

.wsus__profile_text span {
    font-size: 16px;
    font-weight: 400;
    /* color: var(--colorBlack); */
    display: block;
    margin-top: 20px;
    margin-bottom: 25px;
}

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

.wsus__agent_link li a {
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    margin: 0px 10px 0px 0px;
    color: var(--colorWhite) !important;
    border-radius: 50%;
    font-size: 16px;
}

.wsus__agent_link li:last-child a {
    margin: 0;
}

.wsus__agent_link li:nth-child(1) a {
    background: #30559e;
}

.wsus__agent_link li:nth-child(2) a {
    background: #25b8f7;
}

.wsus__agent_link li:nth-child(3) a {
    background: #0077b0;
}

.wsus__agent_link li:nth-child(4) a {
    background: #10b418;
}

.wsus__agent_link li:nth-child(5) a {
    background: #c93971;
}

#medicine_row3 input {
    width: 100%;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    color: var(--colorBlack);
}

#medicine_row3 label {
    display: block;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 600;
    color: var(--colorBlack);
    margin-bottom: 5px;
}

#medicine_row3 .medicine_row_input button {
    position: inherit;
    width: 70px;
    height: 55px;
    margin-top: 29px;
}

/*===================
AGENT PROFILE END
=====================*/

/* new css start */
.visitor_rev_area form {
    overflow: hidden;
    width: 100%;
    padding-top: 20px;
}

.visitor_rev_area .input_area {
    width: 100%;
}

.visitor_rev_area .wsus__search_area {
    margin-bottom: 20px;
    position: relative;
    font-size: 2em !important;
}

.visitor_rev_area .input_area textarea {
    width: 100%;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--colorBlack);
    resize: none;
    margin-bottom: 20px;
}

.visitor_rev_area .wsus__search_area i {
    left: auto;
    right: 15px;
}

.visitor_rev_area .input_area i {
    position: absolute;
    top: 20px;
    left: 15px;
    font-size: 16px;
    font-weight: 600;
    color: #6281fb;
    z-index: 10;
    right: auto;
}

.visitor_rev_area .select2-container--default .select2-selection--single {
    padding-left: 5px;
}

.wsus__rev_textarea {
    position: relative;
}

.wsus__payment {
    background: var(--colorWhite);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 14px;
    padding: 30px;
    border-radius: 5px;
}

.wsus__payment nav {
    margin-bottom: 40px;
}

.wsus__payment .wsus__payment_input {
    margin-bottom: 20px;
}

.wsus__payment .wsus__payment_input input {
    width: 100%;
    border: 1px solid #c8d3ff;
    padding: 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    color: var(--colorBlack);
    resize: none;
}

.wsus__payment .wsus__payment_input label {
    display: block;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 600;
    color: var(--colorBlack);
    margin-bottom: 5px;
    text-align: left;
}

.wsus__payment form button {
    border: none;
}

.wsus__payment .nav-tabs {
    border-bottom: 1px solid var(--colorPrimary);
}

.wsus__payment .nav-link {
    outline: none;
    color: var(--colorPrimary);
    background: var(--colorWhite);
    border-color: var(--colorPrimary);
    border-radius: 0 !important;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
}

.wsus__payment .nav-tabs .nav-link.active,
.wsus__payment .nav-tabs .nav-link:hover {
    color: var(--colorWhite);
    background: var(--colorPrimary);
    border-color: var(--colorPrimary);
}

.wsus__cash_delivery h6 {
    text-transform: capitalize;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}

.wsus__cash_delivery ul {
    padding-left: 13px;
    list-style: unset;
    margin-bottom: 20px;
}

.wsus__cash_delivery ul li {
    color: var(--paraColor);
    font-weight: 400;
    font-size: 16px;
    margin-top: 12px;
}

/* new css end */

/*404 page style*/
#wsws__404_page {
    margin: 55px 0px 100px 0px;
}

.wsus__404_text {
    text-align: center;
}

.wsus__404_text h1 {
    font-size: 160px;
    font-weight: 900;
    margin-bottom: 15px;
    color: var(--colorPrimary);
}

.wsus__404_text h3 {
    font-size: 30px;
    text-transform: capitalize;
    font-weight: 600;
    margin-bottom: 10px;
}

.wsus__404_text h3 span {
    font-size: 50px;
    font-weight: 600;
    color: var(--colorPrimary);
}

.wsus__404_text a {
    margin-top: 50px;
    background: var(--colorPrimary);
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 16px;
    color: var(--colorWhite);
    text-transform: capitalize;
    font-weight: 600;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.wsus__404_text a:hover {
    background: var(--colorBlack);
    color: var(--colorWhite);
}

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

.wsus__single_payment {
    box-shadow: var(--boxShadow);
    border-radius: 5px;
    overflow: hidden;
    background: #faf6f3fa;
    display: block;
    transition: all linear 0.3s;
    margin-top: 25px;
    height: 100px;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.wsus__single_payment img {
    box-shadow: var(--boxShadow);
    border-radius: 4px;
}

.wsus__single_payment:hover {
    background: var(--colorPrimary);
}

.wsus__pay_modal_info p {
    margin-bottom: 20px;
}

.wsus__pay_modal_info ul li {
    font-size: 16px;
    color: var(--paraColor);
    position: relative;
    padding-left: 35px;
    margin: 10px 0px;
}

.wsus__pay_modal_info ul li::after {
    position: absolute;
    content: "\f00c";
    color: var(--colorWhite);
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 10px;
    border-radius: 50%;
    background: var(--colorPrimary);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.wsus__pay_modal_info input,
.wsus__pay_modal_info textarea,
.wsus__pay_modal_info .nice-select {
    border: 1px solid #eee;
    margin-top: 15px;
    font-weight: 400;
}

.wsus__pay_modal_info .nice-select {
    margin-top: 10px;
}

.wsus__pay_modal_info .nice-select .option {
    font-weight: 400;
    margin: 0;
}

.wsus__pay_modal_info .nice-select .option::after {
    display: none;
}

.wsus__payment_btn_area {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    padding-top: 20px;
}

.wsus__payment_btn_area button {
    border-radius: 3px;
    border: none;
    padding: 10px 30px;
    text-transform: capitalize;
}

/* ==================================
    SIGNIN START
=================================== */
.wsus__login_page {
    padding: 80px 0px;
}

.wsus__login_area {
    background-color: #f6654212;
    padding: 10px 50px;
    overflow: hidden;
    border-radius: 5px;
}

.wsus__login_area h2 {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--colorBlack);
    /* text-transform: capitalize; */
    margin-bottom: 5px;
}

.wsus__login_area p {
    color: var(--colorBlack);
    font-size: 1rem;
    /* text-transform: capitalize; */
    margin-bottom: 5px;
}

.wsus__login_area .wsus__login_input {
    margin-bottom: 5px;
}

.wsus__login_area form label {
    /* text-transform: capitalize; */
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 5px;
}

.wsus__login_area form input {
    border: none;
    font-size: 0.8rem;
}

.wsus__login_area form button {
    width: 100%;
    border-radius: 5px;
    text-align: center;
    border: none;
    background: var(--colorPrimary);
    color: var(--colorWhite);
    padding: 13px 20px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.wsus__login_area form button:hover {
    background: var(--colorBlack);
}

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

.wsus__login_area .form-check input {
    padding: 0px;
    border-radius: 50%;
    border: 1px solid var(--colorPrimary);
}

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

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

.wsus__login_area .form-check label {
    color: var(--paraColor);
    margin: 0px;
    font-size: 1rem;
    font-weight: 400;
}

.wsus__login_input a {
    font-size: 1rem;
    font-weight: 400;
    color: var(--colorPrimary);
    transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
}

.wsus__login_input a:hover {
    color: var(--colorBlack);
}

.wsus__login_area .or {
    position: relative;
    margin: 15px 0px 30px;
}

.wsus__login_area .or span {
    text-transform: uppercase;
    width: 25px;
    height: 25px;
    display: inline-block;
    background: var(--colorPrimary);
    font-size: 13px;
    text-align: center;
    line-height: 27px;
    color: var(--colorWhite);
    border-radius: 3px;
    position: relative;
    z-index: 1;
}

.wsus__login_area .or::after {
    position: absolute;
    content: "";
    background: var(--colorPrimary);
    width: 98%;
    height: 1px;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.wsus__login_area ul li a {
    width: 35px;
    height: 35px;
    background: var(--colorPrimary);
    color: var(--colorWhite);
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    margin-right: 5px;
    font-size: 14px;
    border: 1px solid transparent;
    transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
}

.wsus__login_area ul li a:hover {
    border-color: var(--colorPrimary);
    color: var(--colorPrimary);
    background: var(--colorWhite);
}

.wsus__login_area .create_account {
    margin-top: 20px;
    color: var(--paraColor);
    margin-bottom: 0px;
}

.wsus__login_area .create_account a {
    color: var(--colorPrimary);
    /* text-transform: capitalize; */
    font-weight: 500;
    transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
}

.wsus__login_area .create_account a:hover {
    color: var(--colorBlack);
}

/* ==================================
    SIGNIN END
=================================== */

.dashboard_message_area {
}

.tf__message_list {
    border: 1px solid #5e5b5b17;
    position: relative;
    height: 770px;
    overflow: hidden;
    overflow-y: auto;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.tf__message_list::-webkit-scrollbar {
    background: #fff;
    width: 5px;
}

.tf__message_list::-webkit-scrollbar-thumb {
    background: #ddd;
}

.tf__massager_searchbox {
    padding: 20px;
    position: relative;
    top: 0;
    left: 0;
}

.tf__massager_searchbox input {
    width: 100%;
    border: 1px solid #5e5b5b17;
    padding: 10px 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.tf__massager_searchbox button {
    position: absolute;
    top: 28px;
    right: 35px;
    font-size: 20px;
    background: none;
    color: var(--colorBlack);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.tf__massager_option .nav-link {
    background: var(--colorWhite);
    border: 1px solid transparent !important;
    border-radius: 0;
    margin-bottom: 1px;
    cursor: pointer;
}

.tf__massager_option .nav-link:hover,
.tf__massager_option .nav-link.active {
    background: #f665421c;
    color: var(--colorBlack);
}

.tf__single_massage {
    padding: 4px 5px;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
}

.tf__single_massage_img {
    width: 55px;
    height: 55px;
    margin-right: 10px;
}

.tf__single_massage_img img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.tf__single_massage_text {
    width: 58%;
}

.tf__single_massage_text h4 {
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 4px;
    text-transform: capitalize;
    padding: 0;
    border-bottom: 0;
    display: block;
}

.tf__single_massage_text p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tf__massage_time {
    position: absolute;
    top: 3px;
    right: 0;
    font-size: 14px;
}

.tf___single_chat {
    border: 1px solid #5e5b5b17;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    overflow: hidden;
}

.tf__single_chat_top .tf__single_chat_top_left {
    width: 76%;
}

.tf__single_chat_top {
    padding: 20px;
    border-bottom: 1px solid #5e5b5b17;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.tf__single_chat_top .img {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-right: 10px;
}

.tf__single_chat_top .text {
    width: 88%;
    position: relative;
}

.tf__single_chat_top .text h4 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 7px;
    border: none;
    display: block;
    margin: 0;
    padding: 0;
}

.tf__single_chat_top .text p {
    text-transform: capitalize;
    color: var(--colorSecondary);
    font-size: 14px;
    font-weight: 600;
}

.tf__single_chat_top .text a {
    position: absolute;
    top: 14px;
    right: 0;
    color: var(--colorBlack);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.tf__single_chat_top a:hover {
    color: var(--colorPrimary);
}

.chat_img {
    width: 60px;
    height: 60px;
}

.chat_name h4 {
    font-size: 18px;
}

.chat_name p {
    font-size: 16px;
}

.tf__single_chat_top_right p {
    color: var(--colorBlack);
    cursor: pointer;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.tf__single_chat_top_right p:hover {
    color: var(--colorPrimary);
}

.tf__single_chat_body {
    padding: 20px;
    height: 602px;
    overflow: hidden;
    overflow-y: auto;
}

.tf__single_chat_body::-webkit-scrollbar {
    background: #fff;
    width: 5px;
}

.tf__single_chat_body::-webkit-scrollbar-thumb {
    background: #ddd;
}

.tf__chating {
    display: flex;
    justify-content: start;
    margin-bottom: 30px;
}

.tf__chating_img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.tf__chating_text {
    margin-left: 20px;
    max-width: 76%;
}

.tf__chating_text p {
    background: #f665421c;
    color: var(--colorBlack);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 5px;
}

.tf__chating_text span {
    display: block;
}

.tf_chat_right {
    justify-content: end;
}

.tf_chat_right .tf__chating_text {
    margin-left: 0;
    margin-right: 20px;
}

.tf_chat_right .tf__chating_text p {
    text-align: right;
}

.tf_chat_right .tf__chating_text span {
    text-align: right;
}

.tf__single_chat_bottom {
    border-top: 1px solid #5e5b5b17;
    position: relative;
    background: var(--colorWhite);
}

.tf__single_chat_bottom label {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 13px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: #eee;
    color: var(--colorPrimary);
    line-height: 31px;
    text-align: center;
    border-radius: 50%;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.tf__single_chat_bottom label:hover {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

.tf__single_chat_bottom input {
    width: 100%;
    border: none;
    padding: 20px 70px 20px 20px;
}

.tf__massage_btn {
    position: absolute;
    top: 50%;
    right: 20px;
    font-size: 18px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: var(--colorPrimary);
    transform: translateY(-50%);
    color: var(--colorWhite);
    border-radius: 5px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.tf__massage_btn:hover {
    background: var(--colorBlack);
}

/**Custom css**/

.nav-pills {
    display: flex;
    justify-content: left;
    gap: 5px; /* Adds more space between tabs */
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--colorPrimary);
    border-radius: 4px;
}

.nav-pills .nav-link {
    border-radius: var(--bs-nav-pills-border-radius);
    color: var(--colorWhite);
    background-color: var(--colorsidebar);
}

/**Custom css RJ**/

.form-control {
    border: 1px solid #e0e6f7;
    border-radius: 4px;
    background-color: #ffffff;
    padding: 11px 15px 13px 15px;
    width: 100%;
    line-height: 1.5;
    /* color: #A0ABB8; */
}

.form-control::-moz-placeholder {
    color: #a0abb8;
}

.form-control::placeholder {
    color: #a0abb8;
}

.form-contact .form-control {
    width: 100%;
    border: 1px solid #1ca77459 !important;
    border-radius: 0;
    font-size: 14px;
    line-height: 22px;
}

.form-contact .form-control:focus {
    border: 2px solid #eff2fb;
}

.form-contact textarea.form-control {
    height: auto;
}

.form-contact .search-icon {
    background-image: url(../imgs/page/brides/search.svg);
    background-position: right 15px top 11px;
    background-repeat: no-repeat;
}

.form-contact .border-bottom {
    border-color: #1ca7741a;
}

.form-group {
    position: relative;
}

.form-group i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    font-size: 14px;
    /* Note that this font size was 18px. it was changed to 12px to change icons on summernote Description
    in the Business/Listings/Create */
    color: #a0abb8;
}

.box-button .btn {
    width: 100%;
    background-color: var(--colorPrimary);
    color: white;
    margin-top: 100px;
}

.box-button-shadow {
    position: relative;
    display: inline-block;
}

.box-button-shadow::before {
    background: #9777fa;
    filter: blur(20px);
    border-radius: 10px;
    content: "";
    position: absolute;
    width: 144px;
    height: 39px;
    z-index: 1;
    left: 0px;
    right: 0px;
    top: 10px;
    margin: auto;
}

.box-button-shadow a {
    position: relative;
    z-index: 12;
}
.box-button-find {
    width: 140px;
    float: right;
    flex: auto;
}

.btn {
    font-family: "Plus Jakarta Sans", sans-serif;
    border-radius: 0px;
    /* padding: 13px 25px; */
    font-size: 14px;
    line-height: 1;
    transition: 0.2s;
}

.btn.btn-default {
    color: #ffffff;
    /* background-color: var(--colorPrimary); */
    line-height: 26px;
    padding: 10px 18px;
}

.btn.btn-default:hover {
    background-color: #05264e;
    transform: translateY(-2px);
    transition: 0.2s;
}

.header .block-signin .btn-shadow {
    box-shadow: 0px 18px 40px rgba(25, 15, 9, 0.1);
}

.notify {
    z-index: 9999 !important;
}

.dash_alert_box {
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    margin: 50px auto; /* Reduce margin for smaller screens */
    padding: 20px; /* Add padding for better spacing */
    text-transform: none !important;
    flex-wrap: wrap; /* Allow wrapping for small screens */
    display: flex;
    max-width: 90%; /* Constrain width for smaller screens */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
}

.dash_alert_box .img {
    width: 50px; /* Smaller width for small screens */
    height: 50px;
    overflow: hidden;
    flex-shrink: 0; /* Prevent image from shrinking */
    margin-right: 10px; /* Add some spacing between image and text */
}

.dash_alert_box .text {
    flex: 1; /* Allow the text to take up available space */
    min-width: 200px; /* Prevent text from shrinking too much */
}

.dash_alert_box .text h4 {
    color: #fff;
    font-size: 18px; /* Adjust font size for smaller screens */
    font-weight: 600;
}

.dash_alert_box .text p {
    color: #fff;
    font-size: 14px; /* Adjust font size for smaller screens */
    margin: 0;
}

.dash_alert_box a {
    background: #fff !important;
    color: #000 !important;
    font-size: 12px; /* Adjust font size for smaller screens */
    font-weight: 600;
    padding: 5px 10px; /* Adjust padding for smaller buttons */
    margin-top: 10px; /* Add spacing for better layout on wrap */
    white-space: nowrap; /* Prevent text wrapping in button */
}

.dash_alert_box a:hover {
    background: #000 !important;
    color: #fff !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 24px !important;
}

p,
span {
    font-size: 1.25rem;
    /* font-size: 14px; */
    /* font-weight: bolder !important; */
}

* {
    font-size: 14px;
}

/* 1.14 Image Preview */
.image-preview,
#callback-preview {
    width: 250px;
    height: 250px;
    border: 2px dashed #ddd;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    color: #ecf0f1;
}

.image-preview input,
#callback-preview input {
    line-height: 200px;
    font-size: 200px;
    position: absolute;
    opacity: 0;
    z-index: 10;
}

.image-preview label,
#callback-preview label {
    position: absolute;
    z-index: 5;
    opacity: 0.8;
    cursor: pointer;
    background-color: #bdc3c7;
    width: 150px;
    height: 50px;
    font-size: 12px;
    line-height: 50px;
    text-transform: uppercase;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

.user_name_align {
    position: absolute;
    color: white;
}

.search_box_rj {
    width: 25%;
    margin-right: 10px;
}

/* .btn-success {
    color: #fff;
    background-color: var(--colorPrimary);
    border-color: var(--colorPrimary);
} */

.btn-success {
    color: #fff;
    background-color: var(--colorPrimary);
    border-color: var(--colorPrimary);
    border-radius: 5px;
    padding: 10px 20px !important;
}
.btn-success:hover {
    background-color: rgb(
        85,
        80,
        80
    ) !important; /* Set hover background color to black */
    border-color: rgb(
        85,
        80,
        80
    ) !important; /* Set hover border color to black */
}

.bookmark-btn {
    background-color: var(--colorPrimary);
    color: var(--colorWhite);
    padding: 8px 15px;
    margin-top: 5px;
}

.bookmark-btn:hover {
    background-color: black;
    color: white;
}

.bookmark-text {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--colorWhite);
    font-size: 12px;
    margin-left: 8px;
    align-items: center;
}

.table > tbody {
    vertical-align: middle;
}

.rj_features_image {
    font-size: 20px;
}

.testingrj {
    border-radius: 50%;
}

.btn.btn-default_rj {
    color: #ffffff;
    background-color: var(--colorPrimary);
    line-height: 26px;
    padding: 10px 100px;
    border-radius: 10px;
}

.not_availabe_rj {
    font-size: 1rem;
    padding: 30px;
    background-color: var(--colorPrimary);
    color: #ffffff;
}

.search_results_band_rj {
    font-size: 0.8rem;
    padding: 12px;
    background-color: var(--colorPrimary);
    text-align: center;
    color: #ffffff !important;
}

.search_banner_text {
    font-size: 3rem;
    color: #ffffff;
}

.warning_box {
    background-color: var(--colorPrimary);
    color: white !important;
    margin-top: 20px;
    padding: 15px 10px 15px 10px;
    font-size: 1rem;
    /* margin-bottom: 20px; */
}

.city-dropdown-container {
    height: 300px; /* Adjust this value to set the desired height */
    padding: 10px 0; /* Optional: Add padding for better spacing */
}

.city-dropdown-container .city {
    height: 100%; /* Make the dropdown fill the height of the container */
}

.form-check {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align to the left */
}

.form-check-input {
    margin-right: 18px; /* Space between checkbox and label */
}

.small-checkbox {
    transform: scale(0.8); /* Scale the checkbox down */
}

/* Align the label and the radio group on the same line */
.radio-group-with-label {
    display: flex;
    align-items: center; /* Align items vertically centered */
    gap: 20px; /* Space between the label and the buttons */
}

.radio-group-label {
    font-weight: bold;
    margin-bottom: 0; /* Remove the default bottom margin */
}

/* Custom radio button styles */
.custom-radio {
    position: relative;
    margin-right: 20px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio-label {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #ccc; /* Default border color when not selected */
    border-radius: 50px; /* Create rounded corners for the pill shape */
    background-color: #f8f8f8; /* Default background color when not selected */
    color: black; /* Default text color when not selected */
    transition: background-color 0.2s ease, border-color 0.2s ease,
        color 0.2s ease;
}

/* Apply the primary color when the radio button is selected */
.custom-radio input[type="radio"]:checked + .radio-label {
    background-color: var(
        --colorPrimary
    ); /* Use primary color for background when checked */
    color: white; /* Change text color to white when selected */
    border-color: var(
        --colorPrimary
    ); /* Use primary color for border when checked */
    border-radius: 50px; /* Keep rounded corners when selected */
}

.radio-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px; /* Space between radio buttons */
}

#stateDropdownContainer,
#cityDropdownContainer {
    display: none;
}

#stateDropdownContainer.show,
#cityDropdownContainer.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.listing_slider {
    margin: 20px 50px;
}

/* Slick arrow styles (optional) */
.slick-prev,
.slick-next {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    z-index: 999; /* Ensure it is above the slides */
}

/* Optional: Adjust the position of the arrows */
.slick-prev {
    left: -50px; /* Move the left arrow to the left */
}

.slick-next {
    right: -50px; /* Move the right arrow to the right */
}

/* Adjust the size of the arrow icon (optional) */
.slick-prev:before,
.slick-next:before {
    color: var(--colorPrimary);
    font-size: 20px;
    line-height: 1;
}

/* Basic Styles for ToDo List */

/* Global Styles for Inputs */
input[type="text"],
textarea {
    width: 100%;
    padding: 12px 20px;
    outline: none;
    resize: none;
    border: 1px solid #e4e7e9;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
}

/* Checkbox Styling to Avoid Global Input Styles */
.task-list .task-item input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin-right: 15px;
    height: auto;
}

/* Basic Styles for ToDo List */
.todo-list {
    font-family: Arial, sans-serif;
}

.todo-list h3,
.todo-list h4 {
    color: #333;
    font-weight: bold;
}

/* Sidebar Styles */
.todo-list .col-md-3 {
    background-color: #f9f9f9;
    padding: 20px;
    border-right: 1px solid #e6e6e6;
}

.todo-list .col-md-3 ul {
    list-style-type: none;
    padding-left: 0;
}

.todo-list .col-md-3 ul li {
    margin-bottom: 10px;
}

.todo-list .col-md-3 input[type="checkbox"] {
    margin-right: 10px;
}

/* Main Content Area */
.todo-list .col-md-9 {
    padding: 20px;
}

.search-bar input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Task List Styles */
.task-list {
    padding-left: 0;
    margin-bottom: 20px;
}

.task-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
    text-align: left;
}

.task-title {
    color: #333;
    font-weight: bold;
    font-size: 16px;
    text-align: left;
}

.task-details {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-due-date {
    color: #494949;
    font-size: 14px;
}

.task-category {
    background-color: var(--colorPrimary);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    margin-left: 60px;
    font-size: 14px;
}

.delete-task {
    color: red;
    font-size: 18px;
}

.delete-task:hover {
    color: var(--colorBlack);
}

.edit-task {
    color: rgb(6, 62, 117);
    font-size: 18px;
}

.edit-task:hover {
    color: var(--colorPrimary);
}

/* Completed Task Styling */
.task-item input[type="checkbox"]:checked + .task-title {
    text-decoration: line-through;
    color: #888;
}

.todo-sidebar {
    background-color: #f9f9f9;
    padding: 20px;
    border-right: 1px solid #e6e6e6;
    border-radius: 4px;
    position: sticky; /* Keeps the sidebar in place */
    top: 0px; /* Offset from the top */
    max-height: calc(
        100vh - 120px
    ); /* Sidebar's max height calculated dynamically */
    overflow-y: auto; /* Enables vertical scrolling */
    transition: left 0.3s ease-in-out; /* Add smooth sliding for smaller screens */
    z-index: 1001;
}

/* Sidebar Section Headers */
.todo-sidebar h4 {
    margin-top: 20px;
    font-size: 16px;
    color: #333;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Sidebar List Styling */
.todo-sidebar ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.todo-sidebar ul li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

/* Sidebar Checkbox and Label Alignment */
.todo-sidebar input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.todo-sidebar label {
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

/* Sidebar Filter Counts */
.todo-sidebar span.task-count {
    background-color: #ddd;
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: 10px;
    font-size: 14px;
    color: var(--colorPrimary);
    vertical-align: middle;
}

/* Sidebar Hover Effect */
.todo-sidebar ul li:hover {
    background-color: #f0f0f0;
    border-radius: 1px;
    transition: background-color 0.3s ease;
    padding: 1px;
}

#sidebarOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

#sidebarOverlay.active {
    display: block;
}

/* Custom Box for each group of tasks */
.task-group.box {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 25px;
}

.task-group h4 {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
}

/* Custom styling for the Add Task button */
.custom-add-task-btn {
    font-size: 18px; /* Small font size */
    padding: 8px 12px; /* Adjust padding for smaller button */
    /* background-color: var(--colorPrimary); */
    color: var(--colorPrimary); /* Button text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    display: inline-flex; /* Ensure icon and text align properly */
    align-items: center; /* Vertically center the icon and text */
    cursor: pointer; /* Pointer cursor on hover */
    margin-left: 10px;
    margin-top: 8px;
}

.custom-add-task-btn i {
    margin-right: 5px; /* Space between icon and text */
}

.custom-add-task-btn:hover {
    background-color: var(--colorPrimary); /* Darker green on hover */
    color: white;
}

/* Remove green focus outline */
.custom-add-task-btn:focus {
    outline: none !important; /* Remove the default focus outline */
    box-shadow: none !important; /* Remove any focus shadow */
    background-color: #4a4b4b;
}

/* Custom styling for checkbox when checked */
input[type="checkbox"]:checked {
    background-color: black; /* Set the background color to black when checked */
    border-color: black; /* Ensure the border color is black too */
}

/* Ensure the checkbox tick/mark is black (for webkit browsers) */
input[type="checkbox"] {
    accent-color: black; /* This works for modern browsers like Chrome, Edge, Safari */
}

/* Optional: styling for checkbox when unchecked */
input[type="checkbox"]:not(:checked) {
    background-color: white; /* Default background when unchecked */
    border-color: #ced4da; /* Default border color when unchecked */
}

.todo-header h5 {
    font-weight: bold;
}

.progress-bar {
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
}

/* Ensure the progress bar uses the primary color */
.progress-bar {
    background-color: green;
    /* Override Bootstrap's default color */
}

/* Optional: Adjust the background of the progress container */
.progress {
    background-color: #ebebeb !important; /* Or another color if needed */
}

/* Styling for the wedding date box */
.wedding-date-box {
    background-color: #f5f5f5; /* Light gray background */
    color: #333; /* Darker text for contrast */
    padding: 10px 15px; /* Padding inside the box */
    border-radius: 5px; /* Rounded corners */
    display: flex; /* Flex to keep items on the same line */
    align-items: center; /* Vertically center text */
    margin-right: 40px; /* Space between wedding date box and the button */
}

.wedding-date {
    margin-right: 15px !important;
}

/* Make sure the date text is inline */
.wedding-date-box h5,
.wedding-date-box .wedding-date {
    display: inline; /* Ensure both the label and the date stay on the same line */
    margin: 0; /* Remove any unwanted margins */
    font-size: 1.2rem;
}

/* Styling for the countdown box */
.countdown-box {
    background-color: white;
    color: white; /* White text */
    padding: 10px 10px; /* Padding inside the box */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center the text */
    display: flex;
    justify-content: center;
    gap: 1px;
}

.countdown-box-dashboard {
    background-color: rgba(255, 255, 255, 0);
    color: white; /* White text */
    padding: 10px 10px; /* Padding inside the box */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center the text */
    display: flex;
    justify-content: center;
    gap: 1px;
}

.days-left {
    font-size: 24px;
}

.wedding-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styling for the dynamic data underneath the progress bar */
.progress-data p,
.progress-data span {
    font-size: 14px !important; /* Smaller font size */
    color: #666 !important; /* Neutral, slightly lighter color */
    margin-top: 5px !important; /* Slight space between the progress bar and text */
}

.progress-data p {
    margin: 3px 0 !important; /* Compact spacing between paragraphs */
}

.progress-data strong {
    font-weight: bold !important; /* Bold styling for "Tasks Completed" */
}

.task-header-box {
    top: 50px;
    left: 0;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    z-index: 999;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--colorPrimary);
    margin-top: 25px;
}

.task-priority {
    display: inline-block;

    padding: 2px 20px;
    border-radius: 5%;
    border: 2px solid;
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 0.8em;

    text-transform: capitalize;
}

.task-priority.high {
    border-color: red;
    background-color: red;
    color: white;
}

.task-priority.medium {
    border-color: orange;
    background-color: orange;
    color: white;
}

.task-priority.low {
    border-color: green;
    background-color: green;
    color: white;
}

/* .modal-body .form-label {
    font-weight: bold;

  } */

.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

/* General Modal Styles */
.wedding-modal {
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    border: 2px solid #9d9d9d;
    padding: 5px;
}

/* Header and Footer Background Colors */
.wedding-modal-header,
.wedding-modal-footer {
    background-color: #f9f9fc; /* Blush Pink */
    /* background-color: #faecee; */
    /* Blush Pink */
}

/* Body Background Color */
.wedding-modal-body {
    background-color: #f9f9fc; /* Soft Lavender */
    /* background-color: #eeeefb;  */
    /* Soft Lavender */
}

/* Header and Footer Styling */
.wedding-modal-header {
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}

.wedding-modal-footer {
    border-top: none;
    border-radius: 0 0 10px 10px;
}

/* Button Styles */
.wedding-modal-button {
    background-color: #db7093; /* Muted Rose */
    border-color: #db7093;
    color: white;
    margin-right: 20px;
    padding: 10px;
    border-radius: 5px;
}

.wedding-modal-button:hover {
    background-color: var(--buttonHoverColor);
    color: white !important; /* Change text to white on hover */
    transform: scale(1.03); /* Slightly expand the button on hover */
}

.modal-header .btn-close:hover {
    color: #ff0000; /* Optional: Change color on hover, like red */
    opacity: 1; /* Keep opacity on hover */
}

/* Form Control Styling */
.form-control,
.form-select {
    border-radius: 5px;
    border: 1px solid #e0dede !important;
}

/* Form Label Styling */
.form-label {
    font-weight: bold;
    color: #6b6b6b;
}

/* Task Title Box in Modal Header */
.task-title-box {
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text */
    padding: 8px 12px;
    border-radius: 5px;
    display: inline-block;
}

/* Icon Spacing */
.task-icon {
    margin-right: 8px; /* Adds space between the icon and the task title */
}

/* Custom small size for the Notes modal */
.custom-notes-modal {
    max-width: 600px; /* Set the width as per your preference */
}

/* Guest List css --------------------------------------*/

/* Step Button Cards (Vertically Stacked) */

/* Step Cards Wrapper */
.step-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

/* Individual Step Card */
.step-card {
    background-color: #f9f0f0;
    padding: 30px;
    border-radius: 5px;
    border: 1px solid #b9b8b8;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #333;

    transition: all 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Hover State */
.step-card:hover {
    background-color: #f0f0f5;
}

/* Active State */
.step-card.active {
    background-color: var(--colorPrimary, #007bff);
    color: #fff;
    border-color: var(--colorPrimary, #007bff);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}

/* Responsive Behavior */
@media (max-width: 768px) {
    .step-card {
        flex: 0 0 100%; /* Full width on small screens */
        max-width: 100%;
    }
}

/* Top Action Section (Keep action buttons as is) */
/* Top Actions Wrapper */
.top-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

/* Action Buttons and Export Buttons */
.action-buttons,
.export-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align to the left */
    gap: 10px; /* Space between buttons */
}

/* General Button Styling */
.btn-add-guest,
.btn-online-invitation,
.btn-request-rsvp,
.btn-export,
.btn-print {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-align: center;
}

/* Button Specific Colors */
.btn-add-guest {
    background-color: #28a745; /* Green */
    color: #fff;
}

.btn-online-invitation {
    background-color: #17a2b8; /* Teal */
    color: #fff;
}

.btn-request-rsvp {
    background-color: #ffc107; /* Yellow */
    color: #fff;
}

.btn-export {
    background-color: #6c757d; /* Gray */
    color: #fff;
}

.btn-print {
    background-color: #007bff; /* Blue */
    color: #fff;
}

/* Hover Effects */
.btn-add-guest:hover,
.btn-online-invitation:hover,
.btn-request-rsvp:hover,
.btn-export:hover,
.btn-print:hover {
    background-color: #0056b3; /* Darker Blue on hover */
    color: #fff;
}

/* Responsive Buttons (Stack on Smaller Screens) */
@media (max-width: 768px) {
    .action-buttons,
    .export-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-add-guest,
    .btn-online-invitation,
    .btn-request-rsvp,
    .btn-export,
    .btn-print {
        width: 100%;
    }
}

/* Filter Boxes (Guest Summary Section) */
.guest-summary-modern {
    display: flex;
    flex-wrap: wrap; /* Allow boxes to wrap */
    justify-content: center; /* Center boxes horizontally */
    gap: 15px; /* Consistent spacing between boxes */
    margin-bottom: 20px;
}

/* Individual Filter Box */
.summary-box {
    flex: 1 1 calc(12.5% - 15px); /* 8 boxes per row on large screens */
    max-width: calc(12.5% - 15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f9f0f0;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #b9b8b8;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Box Number Styling */
.summary-box span {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--colorPrimary, #007bff);
    margin-bottom: 5px;
}

/* Box Text and Icon */
.summary-box p {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.summary-box p i {
    margin-right: 8px;
    font-size: 18px;
    color: var(--colorPrimary, #007bff);
}

/* Active State */
.summary-box.active-filter {
    background-color: var(--colorPrimary) !important;
    color: #fff !important;
    border-color: var(--colorPrimary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.summary-box.active-filter span,
.summary-box.active-filter p,
.summary-box.active-filter p i {
    color: #fff !important; /* Ensure number and icon turn white */
}

/* Hover Effect */
.summary-box:hover {
    background-color: #e9ecef;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Responsive Design */
@media (max-width: 992px) {
    .summary-box {
        flex: 1 1 calc(33.33% - 15px); /* 3 boxes per row */
        max-width: calc(33.33% - 15px);
    }
}

@media (max-width: 768px) {
    .summary-box {
        flex: 1 1 calc(50% - 15px); /* 2 boxes per row */
        max-width: calc(50% - 15px);
    }
}

@media (max-width: 576px) {
    .summary-box {
        flex: 1 1 calc(50% - 15px); /* 2 boxes per row on mobile */
        max-width: calc(50% - 15px);
    }
}

/* Search Container */
.search-container {
    margin-bottom: 20px;
}

/* Search Input Styling */
.sdco_search-input {
    padding: 10px 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    flex: 1; /* Allow input to expand */
}

.sdco_search-input:focus {
    border-color: var(--colorPrimary, #007bff);
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Search Button Styling */
.sdco_search-btn {
    background-color: var(--colorPrimary);
    color: #fff;
    border: none;
    padding: 18px 120px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    white-space: nowrap; /* Prevent text from breaking */
}

.sdco_search-btn:hover {
    background-color: var(--line-clr);
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Responsive Layout */
@media (max-width: 768px) {
    .d-flex.align-items-center {
        flex-direction: column;
        gap: 10px;
    }

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

/* Overview Section */
.overview-section {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    justify-content: space-between;
    gap: 20px; /* Consistent spacing between cards */
    margin-bottom: 20px; /* Extra spacing below the section */
}

/* Individual Cards */
.overview-card {
    flex: 1 1 calc(33.33% - 20px); /* Equal width: 3 cards per row with gap */
    max-width: calc(33.33% - 20px);
    padding: 15px;
    background-color: #f9f0f0;
    border: 1px solid #b9b8b8;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.overview-card h3 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Wrapper for Inner Boxes */
.overview-box-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Wrap on smaller screens */
    gap: 10px; /* Spacing between boxes */
}

/* Inner Boxes */
.overview-box {
    flex: 1 1 calc(33.33% - 10px); /* 3 boxes per row */
    max-width: calc(33.33% - 10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f9f0f0;
    border: 1px solid #cdcdcd;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Hover State */
.overview-box:hover {
    background-color: #e9ecef;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Active Filter State */
.overview-box.active-filter {
    background-color: var(
        --colorPrimary
    ); /* Highlighted with Primary for active filter */
    color: #fff;
    border: 2px solid var(--colorPrimary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Text Inside Boxes */
.overview-box p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    text-align: center;
}

.overview-box-number {
    margin-top: 8px;
    font-size: 18px;
    font-weight: bold;
    color: var(--colorPrimary, #007bff);
}

/* Active Box Number (White) */
.overview-box.active-filter .overview-box-number {
    color: #fff !important; /* White color for the number */
}

/* Responsive Design */
@media (max-width: 992px) {
    /* 2 cards per row on medium screens */
    .overview-card {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }

    .overview-box {
        flex: 1 1 calc(50% - 10px); /* 2 boxes per row */
        max-width: calc(50% - 10px);
    }
}

@media (max-width: 576px) {
    /* Stack cards and boxes vertically */
    .overview-card,
    .overview-box {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.form-check-input-custom {
    transform: scale(1); /* Scale the checkbox to 1.5x its original size */
    width: 25px;
    height: 25px;
    margin-left: 0;
}

.form-check-label-custom {
    margin-left: 10px; /* Adjust space between checkbox and label */
    display: inline-block;
}

.badge-lg {
    font-size: 0.8rem; /* Increase the font size */
    padding: 0.5em 1em; /* Increase the padding */
}

.step-card.active {
    background-color: var(
        --colorPrimary
    ) !important; /* Example: Orange background */
}

.step-card.active h4 {
    color: white !important; /* Example: White text */
}

.step-card.active p {
    color: white !important; /* Example: White text */
}

/* Scrollable table container */
.guest-list-table-container_rj {
    max-height: 600px;
    overflow-y: auto;
    padding-left: 40px;
}

.summary-box {
    cursor: pointer; /* This will change the cursor to the hand (pointer) when hovered */
    background-color: #f9f0f0; /* Default background color */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.summary-box:hover {
    background-color: #ebd5d5; /* Change background color on hover */
    color: white; /* Change text color on hover */
}

.summary-box:hover i {
    color: white; /* Change icon color on hover */
}

.summary-box.active-filter {
    background-color: #ebd5d5; /* Grey background for active filter */
    border: 1px solid var(--colorPrimary); /* Optional: Add a border to make it stand out */
}

.clear-todo-btn {
    background-color: var(--colorPrimary) !important; /* Use primary color */
    border: none;
    margin-right: 10px;
    font-size: 1rem !important;
    padding: 10px 20px; /* Adjust padding for better spacing */
    border-radius: 5px; /* Rounded corners */
    display: inline-flex; /* Align icon and text */
    align-items: center;
    gap: 5px; /* Add space between the icon and text */
    color: white; /* Ensure text is readable on primary background */
}

.clear-todo-btn:hover {
    background-color: black !important; /* Optional hover state */
    opacity: 0.7;
}

.custom-button-todo-rj {
    font-size: 1rem;
    padding: 10px 20px;
    background-color: var(
        --colorPrimary
    ) !important; /* Use your primary color variable */
    color: white;
    border: none;
    border-radius: 5px;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

.custom-button-todo-rj:hover {
    background-color: black !important; /* Optional hover state */
    opacity: 0.7;
}

.custom-button-todo-rj i {
    margin-right: 10px; /* Space between the icon and text */
}

.custom-button-todo-rj:hover {
    background-color: #333; /* Darker color on hover */
    transform: scale(1.05); /* Slightly increase size on hover */
}

.custom-button-todo-rj.btn-primary {
    background-color: var(--colorPrimary); /* Main background color */
}

.custom-button-todo-rj.btn-secondary {
    background-color: #6c757d; /* Secondary color */
}

.custom-button-todo-rj:active {
    transform: scale(0.98); /* Pressed state effect */
}

/* Countdown box design */

.flip-card {
    width: 45px;
    height: 55px;
    perspective: 1000px;
    border-radius: 5px;
    box-shadow: 1px 2px 3px rgb(67, 67, 67);
}

.flip-card-dashboard {
    width: 65px;
    height: 80px;
    perspective: 1000px;
    border-radius: 5px;
    box-shadow: 1px 2px 3px rgb(67, 67, 67);
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.flip-card-inner-dashboard {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: bold;
    color: black;
    background-color: #ffffff;
    border-radius: 10px;
}

.flip-card-front-dashboard,
.flip-card-back-dashbaord {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 58px;
    font-weight: bold;
    color: black;
    background-color: #ffffff;
    border-radius: 10px;
}

.flip-card-front::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.01rem;
    background-color: #999999; /* This is the flip line color */
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}

.flip-card-front-dashboard::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.01rem;
    background-color: #999999; /* This is the flip line color */
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}

.flip-card-front {
    background-color: #ffffff;
}

.flip-card-front-dashboard {
    background-color: #ffffff;
}

.flip-card-back {
    background-color: #ffffff;
    transform: rotateX(180deg);
}

.flip-card-back-dashboard {
    background-color: #ffffff;
    transform: rotateX(180deg);
}

.instructions-box {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid var(--colorPrimary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

.description-box {
    display: inline-block;
    font-size: 0.9em;
    border: 1px solid var(--colorPrimary);
    border-radius: 3px;
    background-color: rgba(225, 224, 224, 0.2);
    padding: 2px 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    max-width: 500px; /* Limits the width to wrap text */
    word-wrap: break-word; /* Allows text to break and wrap */
}

.description-container {
    margin-top: 10px; /* Add space above the container if needed */
}

/* Guest List Seating Plan */
#guestList {
    max-height: 900px;
    /* max-height: 500px; */
    overflow-y: scroll;
}

.draggable {
    cursor: move;
}

.dropzone {
    min-height: 150px;
    border: 2px dashed #ccc;
    padding: 10px;
    margin-bottom: 20px;
}

.table-guest-list {
    min-height: 100px;
    list-style: none;
    padding: 0;
}

.table-guest-list li {
    margin: 5px 0;
}

.btn-guest-list {
    background-color: var(
        --colorPrimary
    ); /* Use primary color from your variables */
    color: rgb(255, 255, 255); /* White text */
    border-radius: 50px; /* Capsule shape */
    padding: 10px 50px;
    border: none; /* Remove border */
    font-size: 1rem;
    cursor: pointer;
    display: inline-block;
}

.btn-guest-list:hover {
    background-color: var(
        --colorPrimary
    ); /* Keep the background color the same */
    color: white !important; /* Change text to white on hover */
    transform: scale(1.03); /* Slightly expand the button on hover */
}

.seatingPlannerButton:hover {
    background-color: var(--colorPrimary); /* Primary color */
    color: white; /* White text on hover */
    border: none; /* Remove border */
}

#seatingPlannerBtn:hover h4 {
    color: white; /* Change the h4 text to white on hover */
}

#guestListContainer {
    padding: 15px;
    text-align: center;
    /* margin-top: 10px; */
    border-radius: 5px;
}

#tablesRequiredText {
    background-color: var(--colorPrimary);
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-size: 1rem;
}

#tablesRequiredNumberBox {
    background-color: var(--colorPrimary);
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-size: 1rem !important; /* Slightly larger font size for the number */
}

#tablesRequiredNumber {
    color: white;
}

.unassigned-header {
    background-color: var(--colorPrimary);
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.unassigned-header h5 {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

.ms-2 {
    margin-left: 5px; /* Ensure the 5px gap between the two boxes */
}

.ms-3 {
    margin-left: 10px;
}

.custom-btn-seats:hover {
    background-color: var(--buttonHoverColor);
    color: white;
}

.custom-btn-seats:focus {
    outline: none; /* Removes default outline */
    box-shadow: none; /* Removes the Bootstrap box-shadow */
}

.planner-info-box {
    background-color: var(--colorPrimary);
    border: 1px solid #ddd;
    margin-right: 0.0001rem;
    padding: 15px;
    border-radius: 5px;
    text-align: left;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.planner-info-box p {
    margin: 0; /* Remove margin between paragraphs */
    color: white !important; /* White text */
    font-size: 0.9rem; /* Match font size to button */
    line-height: 1.5; /* Adjust line height for readability */
}
.custom-btn-seats {
    background-color: var(--colorPrimary);
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    margin-right: auto;
}

.btn-export {
    background-color: var(--line-clr);
    color: #fff;
    padding: 20px;
    border-radius: 5px;
}

.btn-export:hover {
    background-color: var(--colorPrimary);
    color: white !important; /* Change text to white on hover */
    transform: scale(1.03); /* Slightly expand the button on hover */
}

.btn-export i {
    margin-right: 10px;
}

/* Popular Categories start
-------------------------------------------------------- */

.panel_align {
    margin-top: 80px; /* Adjust margin as needed */
}

.popular-categories-panel {
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid white;
    margin: 10px;
    padding: 10px;
    margin-bottom: 15px;
    width: 200px; /* Adjust width as needed */
    height: 70px; /* Adjust height as needed */
    display: flex; /* Use flexbox to center content */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    text-align: center; /* Center text */
    transition: transform 0.3s ease; /* Optional hover effect */
    overflow: hidden; /* Ensure content doesn't overflow */
}

.category-image {
    width: 25px; /* Set width of image */
    height: 25px; /* Set height of image */
    object-fit: contain; /* Fit image within the box without distortion */
    display: block; /* Ensures the image behaves as a block element */
    margin: 0 auto 10px auto; /* Center the image horizontally */
}

.category-name {
    margin: 0; /* Remove default margin */
    font-size: 0.8rem; /* Adjust font size as needed */
    color: white; /* Set the text color */
}

.popular-categories-panel:hover {
    transform: scale(1.05); /* Optional hover effect to enlarge on hover */
}

/* Popular Categories end
-------------------------------------------------------- */

.search_banner_text {
    font-size: 38px; /* Customize size */
}

/* Style for breadcrumb text */

.breadcrumb-item a,
.breadcrumb-item.active {
    color: #fff !important; /* White text */
    font-size: 1.2rem !important; /* Larger font size */
    font-weight: 500; /* Optional: make the text a bit bolder */
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #fff; /* Change the divider (e.g., ">") to white */
}

/* Advertising page start
-------------------------------------------------------- */

.sdco_feature {
    background-color: #d9d7d7;
    text-align: center;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
}

.sdco_image-container {
    min-height: 70vh;
}

/* Unique Container Class */
.sdco_section-container {
    min-height: calc(
        100vh - 200px
    ); /* Ensures the container fills the viewport, minus header/footer */
    padding-bottom: 50px; /* Adds sufficient padding to prevent overlap */
}

.sdco_category-background {
    width: 100%;
    height: 75% !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 170px 0px 70px 0px;
    padding: 4rem 0;
    color: #333;
    border-bottom: 2px solid white !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.sdco_guest-list-background {
    width: 100%;
    height: 100% !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 2px solid white !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.sdco_todo-background {
    width: 100%;
    height: 100% !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 2px solid white !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.sdco_dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75% !important;
    /* min-height: 750px; */
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.sdco_dark-overlay_2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    /* min-height: 750px; */
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.sdco_dark-overlay_3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    /* min-height: 750px; */
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.sdco_form-overlay {
    position: absolute;
    top: 130px;
    left: 0;
    width: 100%;
    height: 95% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    padding: 0 15px;
}

.sdco_centered-paragraph {
    max-width: 70%;
    margin-bottom: 40px;
    margin-top: 0px !important;
    text-align: left;
    color: white !important;
    font-size: 0.8rem;
    border: 1px solid white;
    border-radius: 5px;
    padding: 20px;
}

.sdco_centered-paragraph span {
    color: white !important;
    font-size: 0.8rem;
    margin-right: 10px;
}

.sdco_advertise-form {
    width: 100%;
    max-width: 800px;
}

.sdco_form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.sdco_form-group {
    flex: 1;
}

.sdco_form-group-full {
    flex: 2; /* Takes up the full width of two columns */
}

/* Button Styling */
.sdco_button-primary {
    background-color: transparent;
    border: 1px solid white;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%; /* Ensure it takes the full width of the column */
}

.sdco_button-primary:hover {
    background-color: var(--colorPrimary);
    color: white;
}

.sdco_advertise-form .form-control,
.sdco_advertise-form textarea {
    background-color: transparent;
    border: 1px solid white; /* Optional: to ensure borders are visible */
    color: white; /* Ensure text is visible on a transparent background */
    padding: 10px; /* Optional: add padding for better spacing */
    border-radius: 5px; /* Optional: for rounded corners */
    outline: none; /* Remove default focus outline */
}

.sdco_advertise-form .form-control::placeholder,
.sdco_advertise-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Placeholder color to make it visible */
}

/* Advertising page end
-------------------------------------------------------- */

/* New Advertising page Start
-------------------------------------------------------- */
#ad_page_advertise {
    background-color: var(--brandColor3);
    min-height: 100vh;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 2px solid white;
    color: #fff;
    margin-top: -50px;
}

.subscribed_background {
    background: linear-gradient(
            rgba(246, 2, 2, 0.2),
            /* Dark overlay at the top */ rgba(246, 2, 2, 0.3)
                /* Dark overlay at the bottom */
        ),
        url("/default-uploads/contact_background.jpg") no-repeat center center;
    background-size: cover; /* Ensure the full image is visible */
    min-height: 100vh; /* Take up the full height of the viewport */
    padding: 100px 0;
    display: flex;
    flex-direction: column; /* Stack content vertically */
    /* justify-content: center; Center content horizontally */
    /* align-items:normal !important; Center content vertically */
    text-align: center;
    border-bottom: 2px solid white; /* Adds a white band at the bottom */
    color: #fff; /* Ensure text is visible over the dark gradient */
}

/* Add a semi-transparent background to text for readability */
.ad_page_background-container {
    background-color: rgba(255, 255, 255, 0.55); /* Semi-transparent white */
    padding: 50px 50px !important;
    border-radius: 5px;
    width: 92%; /* Full width */
    margin: 20px auto 0 auto; /* ⬅️ add top margin */
    box-sizing: border-box; /* Prevent overflow caused by padding */
}

.row.grid.ad_page_background-container {
    margin: 0; /* Remove negative margins */
    width: 95%; /* Full width */
}

.grid {
    display: flex; /* Use flexbox for alignment */
    flex-wrap: wrap; /* Ensure proper wrapping of child items */
    gap: 1px !important; /* Optional: Add spacing between grid items */
    justify-content: center; /* Center align grid items */
}
.our_features_background-container {
    background-color: rgba(255, 255, 255, 0.55); /* Semi-transparent white */
    padding: 50px !important;
    border-radius: 5px; /* Optional: Add rounded corners for text container */
    width: 95% !important;
    margin: auto; /* Ensures proper centering inside the parent */
}

.featured_listing_page_background-container {
    background-color: rgba(255, 255, 255, 0.55); /* Semi-transparent white */
    padding: 50px 10px !important;
    border-radius: 5px; /* Optional: Add rounded corners for text container */
    width: 95%;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important; /* Ensures proper centering inside the parent */
}

.listing_page_background-container {
    background-color: rgba(255, 255, 255, 0.55); /* Semi-transparent white */
    padding: 80px 80px !important;
    border-radius: 5px; /* Optional: Add rounded corners for text container */
    width: 95%;
    margin: auto; /* Ensures proper centering inside the parent */
}

/* Intro Section */
.ad_page_text_center_intro {
    text-align: center;
}

.ad_page_heading {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.ad_page_description {
    font-size: 1.1rem !important;
    margin-bottom: 0;
    color: var(--paraColor) !important;
}

/* Details Section */
.ad_page_details {
    background: #fff;
    padding: 1.2rem;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: var(--paraColor);
}

.ad_page_subheading {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--colorPrimary);
}

.ad_page_text {
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: left;
}

.ad_page_list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.ad_page_list li {
    margin: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
    text-align: left;
    font-size: 0.9rem;
}

.ad_page_list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--colorPrimary);
}

/* Form Section */
.ad_page_form {
    background: #fff;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #333;
}

.ad_page_input,
.ad_page_textarea {
    width: 100%;
    padding: 0.7rem !important;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.9rem !important;
    margin-bottom: 1rem;
}

.ad_page_textarea {
    resize: none;
}

.ad_page_submit_btn {
    background-color: var(--colorPrimary);
    color: white;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.ad_page_submit_btn:hover {
    background-color: var(--colorPrimary);
    transform: scale(1.05); /* Slightly enlarges the button */
    transition: transform 0.2s ease-in-out; /* Smooth transition effect */
}

/* New Advertising page End
-------------------------------------------------------- */

/* New Promotions page Start
-------------------------------------------------------- */
#ad_page_advertise .sdco_promotion-action .sdco_button-primary {
    background-color: var(--colorPrimary);
    color: #fff;
    padding: 10px 20px;
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 5px;
    width: 100%;
    transition: background-color 0.3s ease;
    margin-top: -50px !important;
}

/* New Promotions page End
-------------------------------------------------------- */

/* New Blog page Start
-------------------------------------------------------- */
/* Featured Blog */
.featured_blog {
    position: relative; /* Enables positioning of overlay */
    overflow: hidden; /* Ensures content doesn't overflow */
    height: 750px; /* Fixed height for consistency */
}

.featured_blog img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container proportionally */
}

/* Full Gradient Overlay */
.featured_blog .overlay {
    position: absolute;
    top: 0; /* Starts at the top of the image */
    left: 0;
    right: 0;
    bottom: 0; /* Covers the full height */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.5)
    ); /* Full gradient */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align text to the bottom */
    padding: 20px; /* Spacing for the text */
    gap: 10px; /* Space between text elements */
}

/* Text Styling Inside the Overlay */
.featured_blog .overlay .category {
    font-size: 0.9rem; /* Set appropriate font size */
    background: var(--colorPrimary); /* Use your primary color */
    padding: 5px 10px; /* Padding for better appearance */
    border-radius: 4px; /* Rounded corners for the badge */
    display: inline-block; /* Makes it behave like a badge (no full-width) */
    margin-bottom: 10px; /* Space below the category */
    color: #fff; /* White text for contrast */
    max-width: fit-content; /* Ensures it only takes up as much space as needed */
}

.featured_blog .overlay .title a {
    font-size: 1.8rem;
    color: #fff;
    text-decoration: none;
    margin-bottom: 10px;
}

.featured_blog .overlay .title a:hover {
    color: #f0f0f0; /* Slightly lighter on hover */
}

.featured_blog .overlay p {
    font-size: 1rem;
    margin: 0;
}

.featured_blog .overlay .meta {
    font-size: 0.9rem;
    color: #ccc;
    display: flex;
    gap: 10px;
}

.featured_blog .category,
.content .category {
    font-size: 0.9rem;
    background: var(--colorPrimary);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
    text-transform: capitalize;
    max-width: fit-content;
}

/* Featured-Popular Row Styling */
.featured-popular-row {
    display: flex; /* Enable flexbox for alignment */
    align-items: stretch; /* Ensure both columns stretch to the same height */
    margin-right: -2px; /* Retain negative margin for spacing */
    margin-left: -2px; /* Retain negative margin for spacing */
}

.featured-popular-row .col-lg-7,
.featured-popular-row .col-lg-5 {
    padding-right: 2px; /* Retain padding for 2px gap */
    padding-left: 2px; /* Retain padding for 2px gap */
    display: flex; /* Flexbox ensures full-height alignment */
    flex-direction: column; /* Stack content vertically */
}

.content .category {
    font-size: 0.9rem;
    background: var(--colorPrimary); /* Use your theme's primary color */
    color: #fff; /* White text for contrast */
    padding: 5px 10px; /* Adds spacing inside the badge */
    border-radius: 4px; /* Rounded corners for a modern look */
    position: absolute; /* Make the badge positionable */
    bottom: 40px; /* Position it slightly above the bottom of the image */
    left: 10px; /* Add some space from the left */
    display: inline-block; /* Prevent full-width stretching */
    text-transform: capitalize; /* Optional: Capitalize text */
    z-index: 2; /* Ensure it stays above the image */
}

.popular_blogs_container {
    display: flex;
    flex-direction: column;
}

/* Row containing smaller images */
.popular_blogs_container .row {
    margin-right: -2px; /* Negative margin to balance padding */
    margin-left: -2px;
}

.popular_blogs_container .row .col-6 {
    padding-right: 2px; /* Add the 2px gap */
    padding-left: 2px;
}

.popular_blog_large {
    position: relative;
    overflow: hidden;
}

.popular_blog_large img {
    width: 100%;
    height: 486px;
    object-fit: cover;
}

.popular_blog_large .text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    color: #fff;
}

.popular_blog_large .text .category {
    font-size: 1rem;
    background: var(--colorPrimary);
    padding: 3px 7px;
    border-radius: 4px;
    margin-bottom: 5px;
    display: inline-block;
    color: white;
}

.popular_blog_large .text .title {
    font-size: 1.1rem;
}

.popular_blog_large .text .meta {
    font-size: 0.8rem;
    color: #ccc;
}

/* Smaller Blogs Below */
.popular_blog_small {
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
}

.popular_blog_small img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.popular_blog_small .text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px;
    color: #fff;
}

.popular_blog_small .text .category {
    font-size: 1rem;
    background: var(--colorPrimary);
    padding: 2px 5px;
    border-radius: 3px;
    margin-bottom: 2px;
    display: inline-block;
    color: white;
}

.popular_blog_small .text .title {
    font-size: 0.9rem;
    color: white !important;
}

h5.title a {
    color: #fff; /* White text color */
    text-decoration: none; /* Remove underline */
}

h5.title a:hover {
    color: #c0c0c0; /* Slightly lighter shade on hover */
}

/* Reduce gap between cards in the grid */
#blog_grid .row {
    margin-right: -2px; /* Compensate for the added column padding */
    margin-left: -2px;
}

#blog_grid .col-lg-3,
#blog_grid .col-md-4 {
    padding-right: 2px; /* Create a total 2px gap between cards */
    padding-left: 2px;
    margin-bottom: 0; /* Eliminate extra vertical spacing */
}

/* Add a border around the entire card */
.blog_card {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Distribute content evenly */
    height: 100%; /* Make all cards the same height */
    padding: 0px;
    border: 1px solid #ccc; /* Optional: Add a border */
    background-color: #fff; /* Optional: Background color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
}

/* Ensure proper spacing inside the card */
.blog_card .content {
    padding: 15px; /* Adds spacing for the text */
}

/* Reduce gap around the title */
.blog_card .title {
    color: black !important;
    font-weight: 600;
    margin-top: -20px; /* Adjust spacing above the title */
    margin-bottom: 4px; /* Adjust spacing below the title */
    font-size: 1.1rem; /* Maintain the desired font size */
}

/* Remove default margins around the image */
.blog_card img {
    margin-bottom: 0; /* Remove any default bottom margin on the image */
    display: block; /* Prevent inline spacing */
}

.blog_card p {
    font-size: 1rem;
}

/* New Blog page End
-------------------------------------------------------- */

/* Target the select2 dropdown for this specific select */
.custom-select2 + .select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: 1px solid white; /* Optional: white border for visibility */
}

/* Target the rendered text inside the select2 dropdown */
.custom-select2
    + .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: white !important;
    font-size: 1rem;
}

/* Style the dropdown options */
.custom-select2 + .select2-container--default .select2-results__option {
    color: black; /* Set to black or any other color to make options visible */
}

.custom-input {
    background-color: transparent !important;
    color: white !important;
    border: 1px solid white; /* Optional: adds a white border for visibility */
    padding: 10px; /* Adjust padding for better spacing */
    border-radius: 5px; /* Optional: rounded corners */
    outline: none; /* Removes default focus outline */
}

.custom-input::placeholder {
    color: white; /* Placeholder text color */
}

/* Default padding control */
.listing-padding-control {
    padding-left: 100px;
    padding-right: 100px;
}

.listing-padding-control img {
    max-width: 100%; /* Ensures the image does not exceed container width */
    object-fit: contain; /* Maintains aspect ratio */
}

/* Additional classes for specific padding values */
.listing-padding-control-sm {
    padding-left: 10px;
    padding-right: 10px;
}
.listing-padding-control-lg {
    padding-left: 20px;
    padding-right: 20px;
}
.listing-padding-control-zero {
    padding-left: 0;
    padding-right: 0;
}

/* Default padding control */
.listing-image-padding-control {
    padding-left: 100px;
    padding-right: 10052px;
}

.listing-custom-rounded {
    width: 100%; /* Ensures the image takes the full width of the container */
    height: auto; /* Maintains aspect ratio */
    border-radius: 5px; /* Adjust radius as needed */
}

.footer-advertising-link {
    display: block;
    margin-top: 1px !important;
    margin-bottom: 20px;
    color: #fff; /* Adjust color as needed */
    text-decoration: none;
    font-size: 1.2rem !important;
}

.footer-advertising-link:hover {
    text-decoration: underline; /* Optional hover effect */
    color: #ccc; /* Adjust color for hover */
}

/* Promotion Styling */

.promotion-icon {
    font-size: 1.2rem !important; /* Default icon size */
}

.small-margin-right {
    margin-right: 2px !important; /* Extra tight spacing */
}

/* Minimize padding and margins between rows */
.listing_det_feature .row {
    gap: 0 !important; /* Removes default gap */
    margin-top: 0 !important; /* Extra tight spacing at the top */
    margin-bottom: 0 !important; /* Extra tight spacing at the bottom */
}

/* Tighter padding within each feature item */
.listing_det_feature_single {
    padding-top: 2px !important; /* Adjust as needed */
    padding-bottom: 2px !important; /* Adjust as needed */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Sidebar adjustments */
#listing_details_sidebar {
    margin-top: 50px;
}

.grid-info {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;
    text-align: center;
}

.category-icon {
    width: 60px;
    height: auto;
    margin-right: 15px;
}

.category-description {
    font-size: 1.2rem;
    text-align: left;
    color: #333;
}

/* ......................... */

/* Directory Page Background with Image */
.directory-background {
    background-color: var(--brandColor3);
    background-size: cover;
    background-position: center;
    padding: 4rem 0;
    color: #333;
    margin-top: -50px;
}

/* Centered Container */
.directory-container {
    max-width: 1400px;
    margin: 0 auto;
    background-color: rgba(
        255,
        255,
        255,
        0.9
    ); /* Light background for readability */
    display: flex;
    gap: 2rem;
    padding: 2rem;
    border-radius: 8px;
    align-items: flex-start;
}

/* Sidebar */
.directory-sidebar {
    width: 25%;
    border-right: 1px solid #aaa; /* Thin vertical line */
    padding-right: 1.5rem; /* Adds space between the line and content */
}

.directory-title {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 1.3rem !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.directory-sidebar h2,
.directory-sidebar h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.popular-categories,
.location-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.popular-categories li,
.location-list li {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.popular-categories img {
    width: 24px;
    height: 24px;
    margin-right: 1rem;
}

.popular-categories a,
.location-list a {
    font-size: 1.1rem;
    color: var(--paraColor, #000000); /* Use paraColor or default to black */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.popular-categories a:hover,
.location-list a:hover {
    color: var(--colorPrimary); /* Optional: change color on hover */
}

.explore-btn {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}

.explore-btn:hover {
    background-color: var(--colorPrimary); /* Optional: hover color */
}

/* Category Groups */
.directory-main {
    width: 100%;
}

.category-groups {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.category-group h2 {
    font-family: "Playfair Display", serif;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #333;
}

.category-group ul {
    list-style-type: none;
    padding: 0;
}

.category-group li {
    margin-bottom: 0.5rem;
}

.category-group a {
    font-size: 1.1rem;
    color: var(--paraColor, #000000);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.category-group a:hover {
    color: var(--colorPrimary);
}

.sdco_directory_text {
    font-size: 1rem !important; /* Adjust size as needed */
}

.promotion-text {
    font-size: 1rem; /* Default text size */
}

/* Category Groups */
.center_dir_elements {
    max-width: 1700px;
    margin: 0 auto;
    width: 100%;
}

.sdco_columns-wrapper {
    display: flex;
    gap: 40px; /* Space between columns */
    justify-content: space-between; /* Evenly space out columns */
    padding: 10px; /* Optional padding inside the wrapper */
    margin: 50px 50px;
}

.sdco_column {
    flex: 1; /* Equal width for all columns */
    padding: 20px; /* Space inside each column */
    text-align: left; /* Align text to the left */
    background: transparent;
    border: 1px solid white; /* Optional: adds a white border for visibility */
    border-radius: 8px; /* Optional rounded corners */
}

.sdco_column-heading {
    font-size: 1.1rem; /* Size of the heading */
    margin-bottom: 10px; /* Space below heading */
    color: #ffffff;
}

.sdco_column-paragraph {
    font-size: 0.8rem; /* Paragraph text size */
    line-height: 1.6; /* Line height for readability */
    color: #dcdcdc; /* Text color */
    margin-bottom: 0;
}

/* SDCO Card Styling. This is the Guest List Planner page */
/* Styling for Image Row */

.sdco_image {
    width: 400px;
    height: 400px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Text Container */
.sdco_text-container {
    background: rgba(255, 255, 255, 0.1); /* Transparent white background */
    border: 1px solid black !important;
    border-radius: 10px;
    padding: 20px;
    color: white;
    text-align: left;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Ensure proper spacing inside the container */
.sdco_text-container h2 {
    margin-bottom: 10px; /* Add some spacing below the heading */
    color: black;
}

.sdco_text-container p {
    margin-top: 0;
    margin-bottom: auto; /* Push the paragraph to the top while keeping spacing */
    color: black;
}

.guest-list-bg {
    min-height: 950px;
}

.todo_bg {
    min-height: 1100px;
}

/* CSS for the About Page - START */

#sdco_about_us {
    background-color: var(--brandColor4);
    min-height: 100vh;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 2px solid white;
    color: #fff;
    margin-top: -50px;
}

/* Add a semi-transparent background to text for readability */
.sdco_background-container {
    background-color: rgba(255, 255, 255, 0.55); /* Semi-transparent white */
    padding: 50px !important;
    width: 95% !important;
    border-radius: 5px !important; /* Optional: Add rounded corners for text container */
}

/* Shared Styles for Intro and Bottom Text */
.sdco_intro_text,
.sdco_bottom_text {
    text-align: center; /* Center the text */
    margin-bottom: 30px; /* Add spacing between sections */
    color: #333; /* Adjust text color */
}

.sdco_intro_text h1,
.sdco_bottom_text h1 {
    font-size: 2rem; /* Larger font for the heading */
    margin-bottom: 15px;
    font-weight: bold;
}

.sdco_intro_text p,
.sdco_bottom_text p {
    font-size: 1rem; /* Adjust font size for paragraph */
    line-height: 1.8;
    margin: 5px 0;
}

/* Grid Layout for Text Columns */
.sdco_about_text {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal-width columns */
    gap: 20px; /* Spacing between columns */
    width: 100%;
    text-align: left; /* Ensures text in all columns is aligned left */
}

/* Flexbox for Equal Height */
.row.equal-height {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping for smaller screens */
    align-items: stretch; /* Ensures all columns have the same height */
}

/* Flexbox for Equal Height */
.row.d-flex.align-items-stretch .col-lg-4,
.row.d-flex.align-items-stretch .col-md-6 {
    display: flex; /* Ensure Flexbox is applied */
    flex-direction: column; /* Stack content vertically */
}

.sdco_about_column {
    background-color: #f9f7f2; /* Slight off-white background */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    flex: 1; /* Ensures all columns stretch to the same height */
}

.sdco_about_column p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    text-align: left; /* Ensure left-aligned text */
}

.sdco_about_column a {
    color: #007bff; /* Link color */
    text-decoration: underline;
}

/* Add Space for Bottom Section */
.sdco_bottom_text {
    margin-top: 50px; /* Add spacing above the bottom section */
    padding-top: 30px; /* Optional: Add padding */
    border-top: 2px solid #ddd; /* Optional: Add a divider line */
}

.sdco_about_column h2 {
    font-size: 1rem; /* Larger font size */
    font-weight: bold; /* Make the font bold */
    margin-bottom: 15px; /* Add space below the heading */
    color: #333; /* Ensure a consistent color */
    line-height: 1.4; /* Optional: Improve readability with spacing between lines */
}

/* Styling for the h1 tag */
.text-center-about h1 {
    font-size: 2rem; /* Larger font size */
    font-weight: bold; /* Make the font bold */
    color: #333; /* Darker text color */
    margin-bottom: 20px; /* Add space below the heading */
}

.text-center-about-footer h1 {
    font-size: 1.2rem; /* Larger font size */
    font-weight: bold; /* Make the font bold */
    color: #333; /* Darker text color */
    margin-bottom: 20px; /* Add space below the heading */
}

/* Styling for the p tag */
.text-center-about p {
    font-size: 1.1rem; /* Slightly larger font size for readability */
    line-height: 1.8; /* Increase line spacing */
    color: #000000; /* Softer gray color for text */
    margin: 0 auto; /* Center align text block */
    max-width: 1200px; /* Optional: Limit the width of the paragraph for better readability */
    text-align: left !important;
}

.text-center-about-footer p {
    font-size: 1.1rem; /* Slightly larger font size for readability */
    line-height: 1.8; /* Increase line spacing */
    color: #000000; /* Softer gray color for text */
    margin: 0 auto; /* Center align text block */
    max-width: 800px; /* Optional: Limit the width of the paragraph for better readability */
}
/* CSS for the About Page - END */

/* CSS for the Contact Us Page - START */

#sdco_contact_us {
    background-color: var(--brandColor3);
    min-height: 100vh; /* Take up the full height of the viewport */
    padding: 100px 0;
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    text-align: center;
    border-bottom: 2px solid white; /* Adds a white band at the bottom */
    color: #fff; /* Ensure text is visible over the dark background */
    margin-top: -50px;
}

.sdco_background-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 120px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.sdco_text_center_contact_intro {
    text-align: center;
}

.sdco_contact_us_heading {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.sdco_contact_us_description {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
}

.sdco_contact_us_details {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    color: #333;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.sdco_contact_us_subheading {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.sdco_contact_us_text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.sdco_contact_us_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sdco_contact_us_list li {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 10px;
    text-align: left;
    display: flex; /* Use flexbox for alignment */
    align-items: flex-start; /* Align items at the top */
}

.sdco_contact_us_list strong {
    display: inline-block;
    width: 80px; /* Adjust width for consistent alignment */
    margin-right: 10px; /* Space between label and content */
}

.sdco_contact_us_list a {
    color: inherit; /* Inherit the color from the parent element */
    text-decoration: none; /* Remove underline */
    text-align: left;
}

.sdco_contact_us_list p {
    margin: 0; /* Remove default margins */
    font-size: 1rem; /* Match font size with links */
    text-align: left;
}

.sdco_contact_us_form {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    color: #333;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.sdco_contact_input {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
    width: 100%;
    text-align: left;
}

.sdco_contact_textarea {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
    width: 100%;
}

.sdco_contact_submit_btn {
    background-color: var(--colorPrimary);
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
}

.sdco_contact_submit_btn:hover {
    background-color: var(--colorPrimary);
    transform: scale(1.05); /* Slightly enlarges the button */
    transition: transform 0.2s ease-in-out; /* Smooth transition effect */
}
/* CSS for the Contact Us - END */

/* CSS for the Business Dashboard Sidebar - Start */
#sdco_dashboard_wrapper {
    display: flex; /* Use flexbox for sidebar and content layout */
    height: 100vh; /* Full viewport height */
    margin-top: -50px;
}

#sdco_bus_sidebar {
    box-sizing: border-box;
    height: 100vh;
    min-width: 250px; /* Ensures the sidebar never shrinks below this width */
    max-width: 250px; /* Prevents the sidebar from exceeding this width */
    padding: 5px 1em;
    background-color: var(--base-clr);
    border-right: 1px solid var(--line-clr);
    position: sticky;
    top: 0;
    align-self: start;
    transition: 300ms ease-in-out;
    overflow: hidden;
}

.sidebar_menu_items {
    font-size: 1rem !important;
    color: var(--text-clr);
}

#sdco_bus_sidebar.close {
    padding: 5px;
    padding-top: 30px;
    min-width: 60px !important; /* Ensures the sidebar never shrinks below this width */
    max-width: 60px !important; /* Prevents the sidebar from exceeding this width */
}

#sdco_bus_sidebar ul {
    list-style: none;
}
#sdco_bus_sidebar > ul > li:first-child {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
    .logo {
        font-weight: 600;
    }
}

#sdco_bus_sidebar ul li a.active {
    color: #ffffff; /* Text color */
    background-color: rgba(219, 112, 147, 0.3);
    height: 40px; /* Smaller height */
    border-radius: 0; /* Remove rounded corners */
}

#sdco_bus_sidebar a,
#sdco_bus_sidebar .sdco_bus_dropdown-btn,
#sdco_bus_sidebar .sdco_bus_logo {
    border-radius: 0.5em;
    padding: 0.85em;
    text-decoration: none;
    color: var(--text-clr) !important;
    display: flex;
    align-items: center;
    gap: 1em;
}

.sdco_bus_dropdown-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

#sdco_bus_sidebar svg {
    flex-shrink: 0;
    fill: var(--text-clr);
}

#sdco_bus_sidebar a span,
#sdco_bus_sidebar .sdco_bus_dropdown-btn span {
    flex-grow: 1;
}

#sdco_bus_sidebar a:hover,
#sdco_bus_sidebar .sdco_bus_dropdown-btn:hover {
    background-color: var(--hover-clr);
}

#sdco_bus_sidebar .sub-menu {
    display: grid;
    grid-template-rows: 0fr;
    transition: 300ms ease-in-out;
    > div {
        overflow: hidden;
    }
}

#sdco_bus_sidebar .sub-menu.show {
    grid-template-rows: 1fr;
}

.sdco_bus_dropdown-btn svg {
    transition: 200ms ease;
}

#sdco_bus_sidebar .sub-menu a {
    padding-left: 2em;
}

#sdco_bus_toggle-btn {
    margin-left: auto;
    padding: 1em;
    border: none;
    border-radius: 0.5em;
    background: none;
    cursor: pointer;

    svg {
        transition: rotate 150ms ease;
    }
}

#sdco_bus_toggle-btn:hover {
    background-color: var(--hover-clr);
}

.rotate svg:last-child {
    rotate: 180deg;
}

#businessDashboardContent {
    flex-grow: 1; /* Allow the content to take remaining space */
    padding: 20px; /* Add some padding */
    box-sizing: border-box; /* Ensure padding is included in width calculation */
    overflow-y: auto; /* Enable scrolling if content overflows */
}

.sdco_bus_card {
    height: 180px; /* Adjust this value as needed */
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    position: relative; /* Ensure z-index works */
    overflow: visible; /* Allow the canvas to render fully */
    z-index: 5; /* Adjust as needed */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}
.sdco_bus_card .d-flex {
    flex-wrap: wrap; /* Ensure content wraps correctly on smaller screens */
    justify-content: center; /* Center items on smaller screens */
}
.sdco_bus_card h3 {
    font-size: 40px;
    font-weight: 700;
}

/* CSS for the Dashboard Sidebar - End */

/* CSS for the Dashboard Business Listing Table - Start */

/* Table Wrapper */
.sdco_table_wrapper {
    overflow-x: auto;
}
/* Table Style */
.sdco_table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.sdco_listing_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.sdco_listing_card {
    background-color: var(--colorWhite);
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: box-shadow 0.3s ease;
}

.sdco_listing_card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.sdco_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sdco_listing_title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
}
.sdco_card_body p {
    margin: 0.3rem 0;
    font-size: 0.8rem;
}

.sdco_card_footer {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
}

.sdco_create_button {
    border-radius: 5px !important;
}
.sdco_table thead {
    background-color: var(--colorPrimary);
    color: #ffffff;
    font-size: 1.1rem;
}

.sdco_table th,
.sdco_table td {
    padding: 15px;
    text-align: left;
    vertical-align: middle;
    border: none;
}

.sdco_table tbody tr:nth-child(even) {
    background-color: #f8f9fa; /* Light gray for even rows */
}

.sdco_table tbody tr:nth-child(odd) {
    background-color: #ffffff; /* White for odd rows */
}

.sdco_table tbody tr:hover {
    background-color: #eef1f5; /* Highlight row on hover */
}

.sdco_table tbody td {
    font-size: 0.9rem;
    color: #343a40;
}

/* Badge Styles */
.sdco_badge_active {
    background-color: #28a745;
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

.sdco_badge_pending {
    background-color: #ffc107;
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

.sdco_badge_featured {
    background-color: #007bff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

.sdco_badge_verified {
    background-color: #17a2b8;
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Action Buttons */
.sdco_action_buttons {
    display: flex; /* Align buttons horizontally */
    gap: 5px; /* Add space between buttons */
    align-items: center; /* Center align buttons vertically */
    justify-content: flex-start; /* Align buttons to the left */
}

.sdco_action_buttons .btn {
    padding: 8px 12px;
    font-size: 0.9rem;
    border-radius: 5px;
    margin: 0; /* Remove unnecessary margin */
}

.sdco_action_buttons .btn.sdco_btn_edit {
    background-color: #007bff;
    color: #fff;
    border: none;
}

.sdco_action_buttons .btn.sdco_btn_delete {
    background-color: #dc3545;
    color: #fff;
    border: none;
}

.sdco_action_buttons .btn.sdco_btn_dropdown {
    background-color: #6c757d;
    color: #fff;
    border: none;
}

/* Dropdown Styles */
.sdco_dropdown_menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 100;
}

.sdco_dropdown:hover .sdco_dropdown_menu {
    display: block;
}

.sdco_dropdown_menu li {
    padding: 10px 15px;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
}

.sdco_dropdown_menu li:hover {
    background-color: #f1f1f1;
}

/* CSS for the Dashboard Business Listing Table - End */

/* CSS for the Bride Dashboard Home/Stats page - Start */

#budgetChart {
    display: block;
    margin: 0 auto;
    width: 180px;
    max-height: 80px;
}

.sdco_bride_dash_home {
    font-family: Arial, sans-serif;
    padding: 20px;
    background: linear-gradient(
            rgba(35, 0, 0, 0.491),
            rgba(239, 103, 103, 0.169)
        ),
        url("/default-uploads/about_background.jpg");
    background-size: cover;
    min-height: 100vh;
    /* Take up the full height of the viewport */
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    /* Stack content vertically */
    justify-content: center;
    /* Center content horizontally */
    color: #333;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Cards Container */
.sdco_bride_dash_cards_container {
    background-color: rgba(255, 255, 255, 0.55); /* Semi-transparent white */
    padding: 100px 40px;
    border-radius: 5px;
    margin: 20px 0px 20px 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Header Section */
.sdco_bride_dash_header {
    text-align: center;
    margin-bottom: 30px;
}

.sdco_bride_dash_header h1 {
    font-size: 2rem;
    color: white;
}

.sdco_bride_dash_header p {
    font-size: 1.2rem;
    color: white;
}

.sdco_bride_dash_days_left {
    color: #e74c3c;
    font-weight: bold;
}

/* Progress Overview Section */
.sdco_bride_dash_progress_overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sdco_bride_dash_progress_card {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sdco_bride_dash_progress_card h3 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 10px;
}

.sdco_bride_dash_progress_bar {
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
    height: 10px;
    margin: 10px auto;
    width: 75%;
    /* Ensure it spans the card width */
    position: relative;
}

.sdco_bride_dash_progress {
    height: 100%;
    /* Fill the height of the progress bar */
    background: linear-gradient(
        45deg,
        #28a745 25%,
        #1e7e34 25%,
        #1e7e34 50%,
        #28a745 50%,
        #28a745 75%,
        #1e7e34 75%
    );
    background-size: 1rem 1rem;
    /* Size of the stripes */
    border-radius: 5px;
    animation: progress-stripes 1s linear infinite;
    transition: width 0.6s ease;
    /* Smooth width adjustment */
}

/* Keyframes for animated stripes */
@keyframes progress-stripes {
    0% {
        background-position: 1rem 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* Upcoming Tasks */
.sdco_bride_dash_upcoming_tasks ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sdco_bride_dash_upcoming_tasks li {
    margin-bottom: 10px;
    font-size: 1em;
}

.sdco_bride_dash_due_date {
    color: #e67e22;
    font-weight: bold;
    margin-left: 10px;
}

/* Countdown Timer */
.sdco_bride_dash_countdown_timer {
    text-align: center;
    margin: 30px 0;
}

.sdco_bride_dash_timer {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.sdco_bride_dash_timer_block {
    background: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.sdco_bride_dash_timer_block span {
    display: block;
    font-size: 2em;
    color: #3498db;
}

/* Checklist Summary */
.sdco_bride_dash_checklist_summary ul {
    list-style: none;
    padding: 0;
}

.sdco_bride_dash_checklist_summary li {
    margin-bottom: 10px;
    font-size: 1em;
    display: flex;
    align-items: center;
}

.sdco_bride_dash_complete {
    color: #2ecc71;
    margin-left: 10px;
}

.sdco_bride_dash_pending {
    color: #e74c3c;
    margin-left: 10px;
}

/* CSS for the Bride Dashboard Home/Stats page - End */

/* Guest Table Container */
.guest-list-table-container {
    width: 100%;
    /* overflow-x: auto; Enable horizontal scroll for small screens */
}

/* General Table Styling */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead th {
    background-color: #f8f9fa;
    text-align: center;
    white-space: nowrap; /* Prevent header text from wrapping */
}

.table td,
.table th {
    padding: 8px 12px;
    /* text-align: center; */
    vertical-align: middle;
    border: 1px solid #ddd;
}

/* Action and Contact Columns: Icons Styling */
.contact-column i,
.action-column i {
    margin-right: 5px;
    color: var(--colorPrimary);
    cursor: pointer;
}

.contact-column i:hover,
.action-column i:hover {
    color: var(--line-clr);
}

/* Badge Styling */
.badge {
    font-size: 12px;
    padding: 5px 10px;
}

/* Top Section (initial state) */
.top-section {
    transition: transform 0.5s ease; /* Smooth slide effect */
    position: relative;
}

/* Swipe Indicator Chevron */
.swipe-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    background-color: var(--line-clr);
    color: #fff; /* Chevron color */
    border-radius: 50%; /* Makes it circular */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    cursor: pointer;
    animation: swipeHint 1.5s infinite alternate; /* Subtle animation */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

/* Chevron Icon Styling */
.swipe-indicator i {
    font-size: 20px; /* Icon size */
    color: #fff; /* Icon color */
}

/* Chevron Animation */
@keyframes swipeHint {
    from {
        transform: translateX(0); /* Start at original position */
    }
    to {
        transform: translateX(-10px); /* Move slightly left */
    }
}

/* Hover Effect */
.swipe-indicator:hover {
    transform: scale(1.1); /* Slight scale effect on hover */
}

/* Swiped State - Slide Top Section Off-Screen */
.top-section.swiped {
    transform: translateX(-101%); /* Slide left */
}

/* Fullscreen Guest List */
.guest-list-table-container {
    transition: all 0.5s ease; /* Smooth expansion */
    position: relative; /* Default state */
    margin-top: 0; /* Remove spacing */
}

.guest-list-fullscreen {
    position: absolute;
    top: 0; /* Move to the top of the screen */
    left: 0;
    right: 0;
    margin: 0;
    z-index: 900; /* Ensure it sits above any other content */
    background: #fff; /* Solid background for clarity */
    padding-top: 100px; /* Optional: Small padding for breathing room */
}
/* Ensure the Table Doesn't Get Hidden */
.guest-list-table-container table {
    width: 100%;
    border-collapse: collapse;
}
/* Reset Button to Bring Back Top Section */
.reset-button {
    position: fixed;
    top: 10px; /* Stay at the top */
    right: 10px; /* Right corner */
    margin-top: 100px;
    background-color: var(--line-clr);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1100;
    transition: transform 0.3s ease;
}

.reset-button i {
    font-size: 20px;
    color: #fff;
}

.reset-button:hover {
    transform: scale(1.1); /* Slight hover effect */
}

/* Hide Sidebar when swiped on Gust */
.sidebar-hidden {
    display: none !important;
}

/* For Mobile Screens - Place Reset Button Lower */
@media (max-width: 768px) {
    .reset-button {
        top: 10px; /* Override bottom position */
        right: 10px; /* Always top-right */
    }
}

/* Hidden State */
.reset-button.hidden {
    opacity: 0;
    pointer-events: none; /* Disable button when hidden */
}

.procing_area {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Centers cards horizontally */
    gap: 10px; /* Adds a gap of 10px between cards */
    flex-wrap: wrap; /* Ensures cards wrap to the next row if needed */
}

.procing_area .member_price:hover {
    box-shadow: none !important;
    transform: none !important;
}

.spinner-border {
    margin-left: 10px; /* Adjust the spacing as needed */
    vertical-align: middle;
    color: white;
}

#contactSubmitButton .button-text {
    color: white !important; /* Ensures the text inside the button is white */
    font-size: 1rem;
}

.custom-image_thumbnail {
    width: 300px; /* Set your desired width */
    height: 200px; /* Set your desired height */
    object-fit: cover; /* Ensures the image covers the area without stretching */
    object-position: center; /* Centers the image within the container */
}

body .vbox-overlay .vbox-content {
    margin: 0 !important;
}

.vbox-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    /* Retain your other properties */
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

.grecaptcha-badge {
    bottom: 60px !important; /* adjust as needed */
}

.common_btn_listing {
    display: inline-block;
    background-color: var(--colorPrimary);
    color: white !important;
    margin-top: 40px;
    padding: 8px 18px;
    border: none;
    border-radius: 2px;
    font-weight: 400 !important;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.common_btn_listing:hover {
    background-color: black !important;
}

/* Start Destination Weddings */

#destination_background {
    background: url("/default-uploads/destinationWeddingsbackground.jpg")
        no-repeat center center;
    background-size: cover; /* Ensure the full image is visible */
    min-height: 80vh; /* Take up the full height of the viewport */
    padding-top: 200px;
    display: flex;
    flex-direction: column; /* Stack content vertically */
    text-align: center;
    border-bottom: 2px solid white; /* Adds a white band at the bottom */
    color: #fff; /* Ensure text is visible over the dark gradient */
    margin-top: -50px;
}

.destination_background-container {
    background-color: rgba(255, 255, 255, 0.25); /* Semi-transparent white */
    border-radius: 5px;
    width: 75%; /* Full width */
    margin: 0 auto; /* Center it horizontally */
    box-sizing: border-box; /* Prevent overflow caused by padding */
}

.destination_hero-content h1 {
    font-size: 3rem;
    text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

.destination_sub-text {
    font-size: 1.2rem;
    font-weight: 400;
    color: white;
    max-width: 700px;
    margin: 20px auto 0 auto;
    text-align: center;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 400;
}

/* Hero Section */
.destination_hero-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; /* Center the text */
    text-align: center;
    color: white;
    padding: 0 0 100px; /* Reduce top and bottom padding */
}

.destination_hero-content {
    text-align: center;
}

/* Headings */
.destination_h1 {
    font-size: 3rem;
    color: white;
    text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

.destination_sub-text {
    font-size: 0.9rem;
    font-weight: 400;
    color: white;
    max-width: 700px;
    margin: 10px auto 0 auto;
    text-align: center;
    line-height: 1.6;
}

.destination_page_background-container {
    background-color: rgba(255, 255, 255, 0.55); /* Semi-transparent white */
    padding: 50px 50px !important;
    border-radius: 5px;
    width: 75% !important; /* Full width */
    margin: 0 auto; /* Center it horizontally */
    box-sizing: border-box; /* Prevent overflow caused by padding */
}

/* Destination Grid */
.destination_grid {
    width: 70%; /* Restrict to 70% width */
    margin: 20px auto 50px; /* Center it and add proper spacing */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Destination Card */
.destination_card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
    width: 100%; /* Ensure it adjusts based on Bootstrap grid */
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    border: 1px solid transparent; /* No border by default */
}

.destination_card:hover {
    border: 1px solid #34495e; /* Outline border on hover */
}

/* Image Section */
.destination_image {
    height: 300px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Offer Badge */
.destination_offer-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #db7093;
    color: white;
    padding: 5px 10px;
    font-size: 0.7rem;

    border-radius: 5px;
}

/* Card Content */
.destination_content {
    padding: 20px;
    text-align: left;
}

.destination_h2 {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
}

.destination_p {
    color: #777;
    margin: 5px 0 15px;
    font-size: 0.8rem;
    font-weight: 300;
}

/* Bullet Points */
.destination_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.destination_list li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* Call-to-Action Button */
.destination_cta-button {
    display: block;
    text-align: center;
    background: #db7093;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
    border: 1px solid transparent; /* No border by default */
}

.destination_cta-button:hover {
    border: 1px solid #34495e; /* Outline border on hover */
    background: #2c3e50 !important; /* Darker shade */
    color: white !important; /* Force text to stay white */
}

.destination_cta-button:hover {
    background: #2c3e50 !important; /* Darker shade */
    color: white !important; /* Force text to stay white */
}

/* Hero Section */
.destination_hero {
    background-size: cover;
    background-position: center;
    height: 70vh; /* Adjust height as needed */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 20px;
    backdrop-filter: brightness(60%);
}

/* Destination Title */
.destination_h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* Adds readability to text */
}

/* Destination Description Box */
.destination_description {
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent dark box */
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-block;
    max-width: 800px;
}

/* Destination Description Text */
.destination_p {
    font-size: 0.8rem;
    line-height: 1.6;
    margin-top: 0;
    text-align: left;
}

/* Resort Grid */

/* Resort Section Background */
.resort_section {
    background-color: #4e6841;
    padding: 50px 0; /* Add space above and below */
}

.resort_page_background-container {
    background-color: rgba(255, 255, 255, 0.55); /* Semi-transparent white */
    padding: 80px 80px !important;
    border-radius: 5px;
    width: 75% !important; /* Full width */
    margin: -300px auto 0 auto !important; /* Move upwards (-80px) while centering */
    box-sizing: border-box; /* Prevent overflow caused by padding */
    position: relative; /* Ensures proper layering */
    z-index: 2; /* Makes sure it appears above the hero section */
}

.resort_container {
    width: 70%;
    margin: 0 auto; /* Center it */
}

/* Resort Card */
.resort_card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Softer shadow */
    transition: background-color 0.3s ease-in-out; /* Smooth background color transition */
    width: 100%;
    min-height: 100%; /* Ensures all cards have equal height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures content is well-spaced */
    text-align: center;
    border: 1px solid transparent; /* No border by default */
}

/* Resort Card Hover Effect */
.resort_card:hover {
    border: 1px solid #34495e; /* Outline border on hover */
}

/* Resort Image */
.resort_image {
    height: 260px; /* Slightly larger image */
    background-size: cover;
    background-position: center;
}

/* Resort Content */
.resort_content {
    padding: 20px;
    flex-grow: 1; /* Ensures content fills available space */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Ensures normal content flow */
}

/* Resort Title */
.resort_h3 {
    margin: 0;
    color: #333;
    font-size: 1.6rem; /* Slightly larger for better visibility */
    font-weight: bold;
}

/* Resort Description */
.resort_p {
    color: #444; /* Darker for better readability */
    margin: 15px 0;
    font-size: 0.8rem; /* Slightly increased */
    text-align: left;
    min-height: 50px; /* Ensures even layout */
}

.resort_footer {
    margin-top: auto; /* Pushes price & button to the bottom */
    text-align: center;
}

/* Resort Hero Section */
.resort_hero {
    height: 900px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.resort_hero .overlay {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Push content to the top */
    flex-direction: column;
    padding-top: 200px; /* Adds spacing from the top */
}

.resort_h1 {
    color: white;
    font-size: 2.8rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
}

/* Resort Details Section */
.resort_details {
    background-color: #fdf9f4;
    padding: 50px 0; /* Adds spacing above and below */
}

/* Ensure text formatting is correct */
.resort_details p {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 15px;
}

.resort_details h2,
.resort_details h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
}

.resort_details ul {
    margin-left: 20px;
    padding-left: 20px; /* Ensure indentation */
    list-style-type: disc; /* Ensure bullet points show */
}

.resort_details ol {
    margin-left: 20px;
    padding-left: 20px; /* Ensure indentation */
    list-style-type: decimal; /* Ensure bullet points show */
}

/* Style h3 inside resort details */
.resort_details h3 {
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.5;
    color: #2c3e50;
    margin-top: 1.2em;
    margin-bottom: 2em;
}

/* Style blockquotes from TinyMCE */
.resort_details blockquote {
    border-left: 4px solid #ccc;
    padding-left: 15px;
    margin: 1.2em 0;
    font-style: italic;
    color: #555;
    background-color: #f9f9f9;
    border-radius: 4px;
}

/* Italics styling */
.resort_details em,
.resort_details i {
    font-style: italic;
    color: #555;
}

.resort_details ul li,
.resort_details ol li {
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #444;
}

.resort_details strong {
    font-weight: bold;
    color: #222; /* Slightly darker for better readability */
}

.resort_details a {
    color: #007bff;
    text-decoration: underline;
}

.resort_short_desc {
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent dark background */
    color: #fff;
    width: 50%;
    padding: 15px 20px;
    border-radius: 8px;
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1.6;
    max-width: 90%;
    margin-top: 10px;
    text-align: left;
}

.resort_long_desc {
    width: 70%;
    margin: -500px auto 30px; /* Pull up & center */
    background-color: rgba(249, 249, 249, 0.8); /* Slightly see-through */
    border: 1px solid #ccc;
    border-left: 4px solid #ccc;
    padding: 40px 80px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    font-size: 0.95rem;
    line-height: 1.7;
    position: relative;
    z-index: 10;
}

/* Blockquotes */
/* Elegant Blockquotes */
/* Elegant Blockquotes – No Box */
.resort_long_desc blockquote {
    position: relative;
    padding: 10px 30px 20px 30px;
    margin: 10px 0;
    font-size: 1rem !important;
    font-style: italic;
    font-weight: normal !important;
    color: #444;
    background: none;
    border: none;
    box-shadow: none;
    line-height: 1.6;
}

.resort_long_desc blockquote,
.resort_long_desc blockquote * {
    font-size: 1rem !important;
    font-style: italic !important;
    font-weight: normal !important;
    color: black !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1.6 !important;
}

/* Opening Quote – closer to text */
.resort_long_desc blockquote::before {
    content: "“";
    font-size: 3rem;
    position: absolute;
    top: 0;
    left: 10px;
    color: black;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
}

/* Closing Quote – closer to bottom */
.resort_long_desc blockquote::after {
    content: "”";
    font-size: 3rem;
    position: absolute;
    bottom: 5px;
    right: 15px;
    color: black;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
}

/* Headings */
.resort_long_desc h2,
.resort_long_desc h3 {
    margin-top: 1.5rem;
    font-weight: bold;
    color: #2c3e50;
}

/* Lists */
.resort_long_desc ul,
.resort_long_desc ol {
    margin-left: 20px;
    padding-left: 20px;
}

.resort_long_desc li {
    margin-bottom: 5px;
}

/* Centered Resort Gallery - 70% Width */
.resort_gallery_container {
    width: 70%;
    margin: 0 auto; /* Centers the grid */
}

/* Resort Gallery Masonry Layout */
.resort_gallery {
    display: grid;
    grid-template-columns: repeat(4, 2fr); /* 4 columns: 1 large, 2 smaller */
    grid-gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ensure it fully occupies the container */
}

.gallery_item {
    display: block;
    overflow: hidden;
    border-radius: 5px;
}

.gallery_large {
    grid-column: span 2; /* Makes the first image larger */
    grid-row: span 2;
}

.gallery_small img,
.gallery_large img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Portrait Image Row */
.resort_portrait_row {
    width: 70%;
    margin: 10px auto 20px;
}

/* Adjust spacing between portrait images */
.resort_portrait_row .row {
    --bs-gutter-x: 10px; /* Horizontal spacing */
    --bs-gutter-y: 10px; /* Vertical spacing */
}

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

/* Applies to all gallery images */

.gallery_item {
    overflow: visible !important;
}

.gallery_item img,
.resort_portrait_row img {
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.55) !important; /* Subtle but effective shadow */
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.gallery_item:hover img,
.resort_portrait_row img:hover {
    border: 1px solid #34495e;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    transform: none; /* 👈 disables pop/zoom */
}

/* Resort Features */
.resort_features {
    margin-top: 40px;
}

.resort_features h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.resort_features ul {
    list-style: none;
    padding: 0;
}

.resort_features li {
    font-size: 1rem;
    margin: 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.resort_features i {
    color: #28a745; /* Green checkmark icon */
}

/* Resort Price & CTA */
.resort_price_section {
    margin-top: 40px;
}

/* Resort Price - Aligns consistently across all cards */
.resort_price {
    color: #2c3e50; /* Darker professional look */
    font-size: 0.8rem;
    margin-bottom: 10px; /* Adds spacing above button */
}

/* Resort CTA Button Section */
.resort_cta_section {
    text-align: center;
    margin-top: 30px; /* Adjusted spacing after features */
}

/* Resort CTA Button */
.resort_cta-button {
    display: block;
    background: #db7093;
    color: white !important;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none !important;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out;
    text-align: center;
}

.resort_cta-button:hover {
    background: #2c3e50 !important; /* Darker shade */
    text-decoration: none !important; /* Ensure underline doesn't appear on hover */
    color: white !important; /* Force text to stay white */
}

#sortable-images {
    padding: 0;
    margin: 0;
}

.sortable-gallery {
    padding: 0;
    list-style: none;
}

.sortable-item {
    cursor: move;
    position: relative;
    padding-top: 20px; /* space for drag handle */
}


.sortable-item .drag-handle {
    cursor: move; /* Shows the 4-arrow icon */
    font-size: 1rem;
    color: #888;
    display: block;
    text-align: center;
    margin-bottom: 5px;
    user-select: none;
    transition: color 0.2s ease;

}


.sortable-item img {
    cursor: grab;
}


.drag-handle:hover {
    color: #333;
}

.hero-banner {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}





/* Responsive Styles */

@media (min-width: 1400px) and (max-width: 1920px) {
    .destination_page_background-container {
        width: 90% !important; /* Full width */
    }

    .resort_page_background-container {
        width: 90% !important; /* Full width */
        margin: -150px auto 0 auto !important; /* Move upwards (-80px) while centering */
    }

    .resort_image {
        height: 240px;
    }

    .resort_h3 {
        font-size: 1.3rem; /* Slightly larger for better visibility */
    }
}

@media (min-width: 1100px) and (max-width: 1399px) {
    /* Ensure proper spacing between sections */
    .destination_hero-container {
        padding-bottom: 30px; /* Add space below the hero section */
    }

    .destination_page_background-container {
        width: 90% !important; /* Full width */
    }

    .resort_page_background-container {
        width: 90% !important; /* Full width */
        margin: -150px auto 0 auto !important; /* Move upwards (-80px) while centering */
    }

    .resort_image {
        height: 180px;
    }

    .resort_h3 {
        font-size: 1rem; /* Slightly larger for better visibility */
    }

    /* Ensure the destination grid occupies 70% and is centered */
    .destination_grid {
        width: 95%;
        margin: 30px auto 50px; /* Adds proper spacing between hero and grid */
    }

    .destination_grid .row {
        --bs-gutter-x: 10px; /* Reduce horizontal spacing between columns */
        --bs-gutter-y: 10px; /* Reduce vertical spacing between rows */
    }

    /* Ensure spacing between cards */
    .destination_card {
        margin-bottom: 20px; /* Adds space between cards */
    }

    .destination_image {
        height: 200px !important; /* Decrease from 300px to 200px */
    }

    /* Reduce the height of the text box */
    .destination_content {
        max-height: 480px; /* Limit text box height */
        overflow: hidden; /* Hide overflow text if too long */
        padding: 10px 15px; /* Reduce padding inside the text box */
    }

    /* Limit paragraph size inside the text box */
    .destination_p {
        max-height: 180px; /* Prevents too much text expansion */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    #destination_background {
        padding-top: 0 !important;
    }

    .destination_hero-container {
        height: auto !important; /* Remove forced height */
        padding-top: 100px !important; /* Reduce top padding */
        padding-bottom: 5px !important; /* Minimize bottom padding */
        margin-bottom: 5px !important; /* Reduce space below */
    }

    .destination_h1 {
        font-size: 1.5rem !important;
        line-height: 1.2;
        margin-bottom: 10px !important; /* Reduce bottom space */
        margin-top: 0 !important;
    }

    .destination_sub-text {
        font-size: 0.8rem !important;
        margin-bottom: 10px !important; /* Reduce space below */
    }

    .destination_page_background-container {
        width: 100% !important; /* Full width */
        padding: 30px 15px !important;
        border-radius: 5px;
    }

    .destination_grid {
        width: 95% !important;
        margin: 5px auto 15px !important; /* Reduce spacing between sections */
    }

    .destination_image {
        height: 200px !important; /* Make images smaller */
    }

    .resort_page_background-container {
        padding: 20px 0px !important;
        border-radius: 5px;
        width: 90% !important; /* Full width */
        margin: -160px auto 0 auto !important; /* Move upwards (-80px) while centering */
    }

    .resort_card {
        width: 95%; /* Give it some breathing room */
        margin: 0 auto 1rem auto; /* Center and space out cards */
    }

    .resort_image {
        height: 200px;
    }

    .resort_h1 {
        font-size: 1.8rem;
    }

    .resort_h3 {
        font-size: 1rem; /* Slightly larger for better visibility */
    }
    .resort_p {
        font-size: 0.7rem; /* Slightly increased */
    }

    .resort_short_desc {
        width: 85%;
        border-radius: 5px;
    }

    .resort_long_desc {
        width: 90%;
        margin: -420px auto 30px; /* Pull up & center */
        padding: 40px 10px;
        border-radius: 5px;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .resort_gallery {
        grid-template-columns: 1fr; /* Single column on small devices */
    }
}

/* End Destination Weddings */

.main_menu .navbar-toggler {
    background: none !important;
    color: var(--colorWhite);
    border: none;
    box-shadow: none;
    border-radius: 0; /* optional: make it totally clean */
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    line-height: 1;
}

.main_menu .navbar-toggler i {
    font-size: 24px;
    line-height: 1;
}

.navbar-nav .nav-link {
    border-bottom: 2px solid transparent; /* reserves space */
    padding-bottom: 4px;
    transition: border-bottom 0.2s ease;
}

.navbar-nav .nav-link.active {
    color: #fff !important;
    border-bottom: 2px solid #fff;
}

.rj_hero {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -50px;
}

.rj_hero_overlay {
    background: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rj_hero_content {
    color: white;
    text-align: center;
    padding: 0 1rem;
}

.rj_hero_title_wrap {
    background: rgba(12, 12, 12, 0.3);
    display: inline-block;
    padding: 0.2rem 3rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rj_hero_title {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 2.8rem;
    margin: 0;
    color: white;
}

/* ========== DESCRIPTION + CONTACT SECTION ========== */
.rj_info_section {
    background: linear-gradient(
        to bottom,
        rgba(78, 104, 65, 0.85),
        rgba(78, 104, 65, 0.3)
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 4rem 0;
    color: #333;
    border-bottom: 2px solid white;
    /* Optional visual edge */
}

/* Section title */
.rj_section_title {
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    font-weight: 500;
    color: #222;
}

/* Outer frosted/transparent wrapper */
.rj_description_outer {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    padding: 2rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(4px);
    /* Optional: adds modern blur effect */
}

/* Inner solid white content box */
.rj_description_card {
    background-color: #ffffff;
    border-radius: 5px;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* Padding control on the full wrapper */
.rj_description_wrapper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Description content styling */
.rj_description_content * {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    color: #333;
}

/* List and formatting inside WYSIWYG */
.rj_description_content ul,
.rj_description_content ol {
    margin-left: 1.5rem;
    padding-left: 0.5rem;
}

.rj_description_content li {
    margin-bottom: 0.5rem;
}

.rj_description_content strong,
.rj_description_content b {
    font-weight: bold;
}

.rj_description_content i,
.rj_description_content em {
    font-style: italic;
}

.rj_description_content p,
.rj_description_content ul,
.rj_description_content ol {
    margin-bottom: 1rem;
}

/* ========== CONTACT FORM ========== */

.rj_contact_outer {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    padding: 2rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(4px);
    /* Optional blur */
}

.rj_contact_card {
    background-color: #ffffff;
    border-radius: 5px;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.rj_contact_card .form-control,
.rj_contact_card textarea {
    font-size: 0.95rem;
}

/* ========== GALLERY SECTION ========== */
.rj_gallery_section {
    background: linear-gradient(
        to bottom,
        rgba(172, 137, 130, 0.85),
        rgba(172, 137, 130, 0.3)
    );
    padding: 4rem 0;
    border-bottom: 2px solid white;
}

/* Grid container for landscape images */
.rj_gallery_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.rj_gallery_wrapper {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255, 255, 255, 0.25); /* Optional frosted effect */
    padding: 2rem;
    border-radius: 5px;
    backdrop-filter: blur(3px); /* optional modern blur */
}

/* Landscape images styling */
.rj_gallery_item {
    display: block;
    overflow: hidden;
    border-radius: 5px;
}

.rj_gallery_item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    transition: border 0.2s ease;
}

.rj_gallery_item:hover img {
    border: 1px solid #000000; /* or use #ccc for a subtle effect */
}

/* First image larger */
.rj_gallery_large {
    grid-column: span 2;
    grid-row: span 2;
}

/* Small thumbnails */
.rj_gallery_small {
    grid-column: span 1;
    grid-row: span 1;
}

.rj_gallery_heading {
    font-family: "Playfair Display", serif;
    font-size: 2.2rem;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
}

.rj_gallery_heading::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: #fff;
    margin: 1rem auto 0;
    border-radius: 2px;
    opacity: 0.5;
}

/* ========== VIDEO GALLERY SECTION ========== */

.rj_video_section {
    background: linear-gradient(
        to bottom,
        rgba(78, 104, 65, 0.85),
        rgba(78, 104, 65, 0.3)
    );
    padding: 4rem 0;
    border-top: 2px solid white;
}

.rj_video_wrapper {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.rj_video_thumb_wrap {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255, 255, 255, 0.25); /* Optional frosted effect */
    padding: 2rem;
    border-radius: 5px;
    backdrop-filter: blur(3px); /* optional modern blur */
    position: relative;
    overflow: hidden;
}

.rj_video_thumb_wrap:hover {
    border: 1px solid #000;
}

.rj_video_thumb_wrap img {
    width: 100%;
    display: block;
    border-radius: 0.5rem;
}

/* Play Icon */
.rj_video_play_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    width: 30px; /* smaller size */
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.rj_video_play_icon i {
    color: white;
    font-size: 0.6rem; /* smaller icon */
}

.rj_reviews_box_wrapper {
    text-align: center;
    max-width: 70%;
    margin: 0 auto 2rem auto;
}

.rj_reviews_box {
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem 10rem;
    border-radius: 5px;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.rj_reviews_stars {
    color: #f3c000;
    font-size: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
}

.rj_review_score {
    font-weight: 600;
    color: #333;
    margin-left: 0.5rem;
    font-size: 1.1rem;
}

.rj_review_count {
    font-size: 0.95rem;
    color: #555;
    margin-top: 0.25rem;
}

.rj_verified_badge {
    display: inline-block;
    background-color: rgba(78, 104, 65, 0.1); /* light green tint */
    color: green;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 1rem;
    font-size: 0.95rem;
    text-align: center;
}

.rj_verified_badge i {
    margin-right: 0.4rem;
    color: green;
}

.rj_promotions_title {
    font-size: 1rem;
    font-weight: 400;
    color: white;
}

.rj_promotions_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.rj_promotion_item {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 0.4rem 0.8rem;
    border-radius: 1.25rem;
    font-size: 0.9rem;
    color: white;
    transition: background 0.2s ease;
}

.rj_promotion_item i {
    color: white;
}

.rj_promotion_item span {
    color: white !important;
    font-size: 0.9rem;
}

.rj_info_outer_wrapper {
    width: 100%;
}

.drag-handle {
        cursor: move;
        font-size: 1.2rem;
        margin-bottom: 5px;
        display: inline-block;
}

.hero-banner {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.rj_dashboard-content-padded {
    padding-top: 60px !important; /* Match navbar height */
}

#navbarSupportedContent .navbar-nav .nav-link {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    line-height: 1.25;
}

@media (max-width: 991.98px) {
    #navbarSupportedContent {
        background-color: #e57399;
        padding: 0 !important;
        margin-top: 60px !important;
    }

    .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0 !important; /* Remove flex gap */
        margin: 0 !important;
        padding: 0 !important;
    }

    .navbar-nav .nav-item {
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        width: 100%;
        text-align: center;
    }

    .navbar-nav .nav-link {
        color: white !important;
        font-size: 15px !important;
        padding: 30px 0 !important;
        margin: 0 !important;
        line-height: 1.1 !important;
        display: block;
    }
}