.sk-search-btn {
    color: #a88159 !important;
    border: 1px solid #a88159 !important;
    border-radius: 0 !important;
    font-size: 15px !important;
}

.sk-search-btn:hover {
    color: #ffffff !important;
    background-color: #a88159 !important;
}

.select2-container .select2-selection--single .select2-selection__arrow b {
    top: 15% !important;
}

.font-tnr {
    font-family: 'Times New Roman', Times, serif !important;
}

.sk-profile-name {
    text-transform: uppercase;
}

.sk-category-name {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
}

.sk-homepage-advanced-search {
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    font-family: "Montserrat", sans-serif;
    cursor: pointer;
}

.sk-advanced-search-wrapper {
    text-align: right;
}

/* Ensure styles apply only inside the slider */
.sk-mandatory {
    color: red;
}

.error-message.profile-picture-error {
    margin-top: 270px;
}

.error-message {
    margin-top: -15px;
    margin-bottom: 20px;
}

span.select2-selection.select2-selection--single {
    height: 42px;
    padding: 5px 7px;
    border: 1px solid #eeeeee;
    color: #4d1f17;
    font-size: 14px;
    border-radius: 7px;
}

button.select2-selection__clear {
        display: none !important;
}

select#sk_listing_postcode:disabled {
    background-color: #ddd;
    color: #696969;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #360000 !important;
    line-height: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 5px !important;
}

li.select2-results__option.select2-results__message {
    color: #4d1f17;    
    font-size: 14px;
}

.sk-search-results {
    padding: 20px;
}

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

.sk-listing-item {
    border: 1px solid #ddd;
    padding: 15px;
    background: #fff;
    transition: 0.3s;
}

.sk-listing-item:hover {
    background: #f8eee6;
    transform: scale(1.02);
}

.sk-seeker-wrapper {
    background: rgba(255, 255, 255, 0.1); /* Light white with transparency */
    backdrop-filter: blur(10px); /* Blurs background */
    padding: 20px 50px 30px 50px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Optional subtle border */
    width: 600px;
}

.sk-seeker-wrapper  h2,
.sk-seeker-wrapper label {
    color: #fff;
    font-family: "Montserrat", Sans-serif;
}

.sk-seeker-wrapper label {
    display: block;
    margin-bottom: 5px;
    margin-top: 10px;
}

.sk-provider-wrapper {
    text-align: center;
}

.sk-provider-wrapper h2,
.sk-provider-wrapper p {
    color: #fff !important;
    font-family: "Montserrat", Sans-serif;
}

.sk-provider-wrapper p {
    margin-bottom: 50px;
    margin-top: 30px;
    font-size: 18px;
}

.sk-seeker-wrapper button {
    background-color: #ddc99d;
    margin-top: 15px;
    padding: 10px 35px;
    width: 100%;
    color: #350000;
    border: 0;
    border-radius: 5px;
    font-weight: bold;    
}

.sk-provider-wrapper .sk-signup-btn {
    background-color: #ddc99d;
    padding: 15px 35px;
    color: #350000;
    border: 0;
    border-radius: 5px;
    font-weight: bold;
}

.swiper-slide .profile-wrapper {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.swiper-slide .profile-wrapper:hover {
    transform: scale(1.02);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

.swiper-slide {
    perspective: 1000px; /* Ensure 3D effect works */
    overflow: visible !important; /* Allow flip animation to show */
}

.swiper-wrapper {
    transform-style: preserve-3d !important;
}

.sk-profile-front, .sk-profile-back {
    backface-visibility: hidden !important;
}

.sk-pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-family: "Montserrat", Sans-serif;
}

.sk-pricing-table th,
.sk-pricing-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.sk-pricing-table th {
    background: #f4f4f4;
    font-weight: bold;
}

.sk-pricing-table tr:nth-child(even) {
    background: #f9f9f9;
}

.sk-profile-highlight-box {
    background-color: #f8eee6;
    display: inline-block;
    padding: 10px 30px;
    text-align: center;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

.bio-description {
    padding-top: 20px;
    font-family: "Montserrat", Sans-serif;
    font-size: 16px;
}

.sk-highlight-label {
    display: block;
    font-family: "Montserrat", Sans-serif;
    font-size: 14px;
}

.sk-highlight-value {
    font-family: "Montserrat", Sans-serif;
    font-weight: bold;
    font-size: 18px;
}

.sk-extra-details-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
}

.sk-extra-details-left {
    width: 60%;
    padding: 35px 15px 35px 35px;
    border-radius: 8px;
}

.sk-extra-details-right {
    width: 40%;
    padding: 25px;
    border-radius: 8px;
}

.profile-details-wrapper .read-more-btn {
    margin-bottom: 20px;
}

.profile-details-wrapper {
    border: 2px solid #eee;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.sk-profile-container {
    margin: 20px auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.sk-profile-title {
    text-align: center;
    margin-bottom: 15px;
}

.sk-profile-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.sk-profile-column {
    flex: 1;
}

.sk-profile-column p {
    margin: 5px 0;
    font-size: 16px;
}
.profile-container .profile-title {
    margin-bottom: 5px;
    font-weight: bold;
}

.profile-container .location {
    color: #cc3266;
}

.bio-text {
max-height: 100px; /* Adjust based on your layout */
overflow: hidden;
transition: max-height 0.3s ease-in-out;
margin-bottom: 15px;
}

.bio-text.expanded {
max-height: none;
}

.profile-container {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 40px !important;
background: #f8eee6;
}

.profile-container h1,
.profile-container p,
.profile-container button {
font-family: "Montserrat", Sans-serif;
}

.profile-wrapper {
display: flex;
width: 100%;
max-width: 1200px;
border-radius: 10px;
overflow: hidden;
}

.profile-image {
width: 40%;
}

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

.profile-info {
width: 60%;
padding: 30px;
text-align: left;
font-family: 'Georgia', serif;
}

.profile-info h1 {
font-size: 32px;
color: #4d1f17;
}

.verified {
font-size: 14px;
color: #7a5c4b;
}

.location {
font-size: 16px;
color: #4d1f17;
font-weight: bold;
}

.contact-buttons {
margin: 10px 0 25px 0;
}

.reveal-btn {
background: #4d1f17;
color: #fff;
padding: 5px 20px !important;
border: none;
margin-right: 10px;
cursor: pointer;
font-size: 14px;
border-radius: 5px;
}

.reveal-btn i {
color: white;
font-size: 16px;
}

.reveal-btn:hover {
background: #7a5c4b;
transform: scale(1.05);
}

.about {
margin-top: 20px;
}

.profile-container h2 {
font-size: 18px;
color: #4d1f17;
font-family: "Montserrat", Sans-serif;
}

.read-more {
display: inline-block;
margin-top: 10px;
color: #4d1f17;
text-decoration: underline;
font-weight: bold;
}

.sk-profiles-slider-unique-wrapper .sk-profiles-slider-unique {
position: relative;
width: 100%;
padding: 20px;
}

.sk-profiles-slider-unique-wrapper .swiper-slide {
display: flex;
justify-content: center;
}

.sk-profiles-slider-unique-wrapper .sk-profile-card {
width: 250px;
height: 350px;
perspective: 1000px;
position: relative;
}

.sk-profiles-slider-unique-wrapper .sk-profile-inner {
width: 100%;
height: 100%;
text-align: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
background: #fdf5ee;
}

.sk-profiles-slider-unique-wrapper .sk-profile-image {
width: 100%;
height: 70%;
background-size: cover;
background-position: center;
}

.sk-profiles-slider-unique-wrapper .sk-profile-info {
padding: 10px;
}


.sk-profiles-slider-unique-wrapper .sk-profile-info h3 {
font-size: 18px;
font-weight: bold;
margin: 5px 0;
font-family: "Montserrat", Sans-serif;
}

.sk-profiles-slider-unique-wrapper .sk-profile-info p {
font-size: 14px;
color: #7a6a58;
margin: 3px 0;
font-family: "Montserrat", Sans-serif;
}

.sk-profiles-slider-unique-wrapper .sk-vip-badge {
position: absolute;
top: 10px;
left: 10px;
background: gold;
color: #fff;
font-weight: bold;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
}

/* Swiper Navigation Buttons */
.swiper-button-prev,
.swiper-button-next {
    color: #c6ab70 !important;
    z-index: 1 !important;
}   


.sk-vip-badge {
position: absolute;
top: 10px;
left: 10px;
background-color: gold;
color: black;
font-weight: bold;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
text-transform: uppercase;
}    

/* Grid Layout */
.sk-profiles-grid-unique {
display: grid;
grid-template-columns: repeat(5, 1fr); /* 5 columns */
gap: 20px;
padding: 20px;
}

@media (max-width: 1024px) {
.sk-profiles-grid-unique {
grid-template-columns: repeat(3, 1fr); /* 3 per row on tablets */
}
}

@media (max-width: 768px) {
.sk-profiles-grid-unique {
grid-template-columns: repeat(2, 1fr); /* 2 per row on mobile */
}
}    

/* Card Container */
.sk-profile-card {
width: 100%;
height: 350px;
perspective: 1000px;
}

/* Inner Wrapper for Flip Effect */
.sk-profile-inner {
border: solid 2px #fdf5ee;    
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
position: relative;
}

/* Front & Back Face */
.sk-profile-front,
.sk-profile-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

/* Front Side */
.sk-profile-front {
background: #fdf5ee;
}

/* Profile Image */
.sk-profile-image {
width: 100%;
height: 70%;
background-size: cover;
background-position: center;
}

/* Profile Info */
.sk-profile-info {
    padding: 10px;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.sk-profile-info h3 {
font-size: 18px;
font-weight: bold;
margin: 5px 0;
font-family: "Montserrat", Sans-serif;
}

.sk-profile-info p {
font-size: 14px;
color: #7a6a58;
margin: 3px 0;
font-family: "Montserrat", Sans-serif;
}

/* Back Side */
.sk-profile-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotateX(180deg);
background-size: cover;
background-position: center;
}

/* Overlay to Apply Background Color */
.sk-profile-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(244, 236, 228, 0.8); /* Soft beige overlay */
}

/* Text Inside the Overlay */
.sk-profile-overlay-content {
position: relative;
z-index: 1;
text-align: center;
padding: 20px;
}

.sk-profile-overlay-content h3 {
font-size: 20px;
font-weight: bold;
font-family: "Montserrat", Sans-serif;
}

.sk-profile-overlay-content p {
font-size: 16px;
margin: 5px 0;
font-family: "Montserrat", Sans-serif;
}



/*
Add Listing Form
*/
#sk-add-listing-form .form-section,
#sk-edit-listing-form .form-section {
padding-top: 35px;
margin-top: 30px;
border-top: 1px solid #eee;
}

#sk-photo-upload-box {
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
width: 100%;
color: #4d1f17;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
background-color: #f9f9f9;
overflow: hidden;
font-size: 14px;
transition: 0.3s;
}

#sk-photo-upload-box:hover {
border-color: #0073aa;
background-color: #f1f1f1;
}

#sk-photo-upload-box input {
display: none;
}

#sk-photo-preview-container {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
gap: 10px;
}

.sk-photo-preview-wrapper {
position: relative;
width: 100px;
height: 120px;
border-radius: 8px;
overflow: hidden;
}

.sk-photo-preview {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}

.sk-remove-photo {
position: absolute;
top: 5px;
right: 5px;
background: #f51818;
color: white;
border: none;
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}


#sk-profile-upload-container {
display: flex;
margin-top: 10px;
margin-bottom: 20px;
}

#sk-profile-upload-box {
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
width: 180px;
height: 200px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
cursor: pointer;
background-color: #f9f9f9;
transition: 0.3s;
}

#sk-profile-upload-box:hover {
border-color: #0073aa;
background-color: #f1f1f1;
}

#sk-profile-upload-box input {
display: none;
}

#sk-profile-upload-text {
font-size: 14px;
color: #4d1f17;
line-height: 18px;
position: absolute;
}

#sk-profile-picture-preview {
width: 100%; /* Ensures it covers the box */
height: 100%;
display: none;
object-fit: cover; /* Ensures the image fills the space without distortion */
border-radius: 10px;
}

.sk-drag-over {
border-color: #0073aa !important;
background-color: #eef7ff !important;
}

.sk-row {
display: flex;
gap: 20px;
margin-bottom: 15px;
}

.sk-field {
flex: 1;
display: flex;
flex-direction: column;
}

#sk-add-listing-form button,
#sk-edit-listing-form button  {
background-color: #4d1f17;
border: 0;
color: #fff;
font-weight: bold;
margin-top: 20px;
padding: 10px 30px;
}

/* Mobile optimization */
@media (max-width: 480px) {
    .sk-extra-details-wrapper {
        flex-direction: column;
    }

    .sk-profile-card {
        height: 220px !important;
    }

    .sk-profile-info h3 {
        font-size: 13px;
    }

    .sk-profile-info p {
        font-size: 12px;
    }
    
    .sk-extra-details-left {
        width: 100%;
        padding-bottom: 10px;
    }

    .sk-advanced-search-wrapper {
        margin-bottom: 0 !important;
    }

    .sk-extra-details-right {
        width: 100%;
        padding-top: 0;
    }

    .reveal-btn {
        margin-bottom: 5px !important;
        display: block  !important;
        width: 100%;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .sk-highlight-label {
        font-size: 12px;
    }

    .sk-profile-highlight-box {
        padding: 10px;
    }

    .sk-highlight-value {
        font-size: 14px;
    }

    .sk-search-box {
        width: 100% !important;
    }

    .profile-wrapper {
        flex-direction: column;
    }

    .profile-image,
    .profile-info {
        width: 100%;
    }

    .profile-info {
        padding: 10px 20px;
    }

    .profile-image {
        height: 350px;
    }
}