@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Libertinus+Sans:ital,wght@0,400;0,700;1,400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
  font-family: "Poppins", sans-serif;
}

/* Custom styles for this section */
.unique-why-choose-us-section {
  font-family: "Poppins", sans-serif;
  background-color: #1a1a1a;
  color: #f8f9fa;
  padding: 5rem 0;
}

.unique-section-title {
  color: #fff;
  font-weight: 700;
  font-size: 48px;
}

.unique-subtitle {
  font-size: 0.9rem;
  color: #ced4da;
  max-width: 600px;
  margin: 0 auto;
}

.unique-badge {
  background-color: #ff3d24b3;
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 50rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-block;
}

.unique-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #ff3d24b3;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5rem;
}

.unique-card {
  border: none;
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  height: 400px; /* Fixed height for consistency */
}

.unique-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.unique-card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease-in-out;
}

.unique-card:hover .unique-card-img-top {
  transform: scale(1.1);
}

.unique-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2)); */
  padding-top: 5rem;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.unique-blur-box {
  position: relative;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
  border-radius: 25px;
}

.unique-text-container {
  position: relative;
}

.unique-card-icon {
  width: 3rem;
  height: 3rem;
  background-color: #ff3d24b3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.unique-card-icon svg {
  color: #fff;
  width: 1.5rem;
  height: 1.5rem;
}

.card-title {
  font-family: "Poppins", sans-serif;
  font-weight: 400 !important;
}

@media (max-width: 768px) {
  .unique-section-title {
    font-size: 38px;
  }
}

.lucid-motors-wrapper {
  font-family: "Poppins", sans-serif;
  background-color: #000;
  color: #fff;
}

.lucid-img-container {
  overflow: hidden;
  border-radius: 0.75rem;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Square aspect ratio for mobile */
  cursor: pointer;
}

.lucid-img-container .lucid-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

/* Hover effect for desktop */
.lucid-img-container:hover .lucid-card-image {
  transform: scale(1.1);
}

/* Active/tap effect for mobile */
.lucid-img-container:active .lucid-card-image {
  transform: scale(1.15);
}

/* Touch device specific styling */
@media (hover: none) and (pointer: coarse) {
  .lucid-img-container:active .lucid-card-image {
    transform: scale(1.15);
    transition: transform 0.3s ease-out;
  }
}

/* Wider aspect ratio for tablets and desktop */
@media (min-width: 768px) {
  .lucid-img-container {
    aspect-ratio: 2 / 1; /* More compact wide aspect ratio */
    max-height: 300px;
  }
}

@media (min-width: 1200px) {
  .lucid-img-container {
    aspect-ratio: 5 / 3; /* More compact ratio for desktop */
    max-height: 320px;
  }
}

.lucid-explore-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: #fff !important;
  transition: color 0.3s ease-in-out;
}

.lucid-explore-link:hover {
  color: #d1d5db !important;
  text-decoration: none !important;
}

.lucid-explore-link:visited {
  color: #fff !important;
}

.lucid-explore-link:focus {
  color: #d1d5db !important;
  outline: 2px solid #d1d5db;
  outline-offset: 2px;
}

.lucid-arrow-icon {
  margin-left: 0.5rem;
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s ease-in-out;
}

.lucid-explore-link:hover .lucid-arrow-icon {
  transform: translateX(0.25rem);
}

.lucid-card-wrapper {
  background: transparent;
  border: 0;
}

.lucid-card-content {
  padding-left: 0;
  padding-right: 0;
  padding-top: 1rem;
  padding-bottom: 0;
}

.lucid-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #fff;
  transition: color 0.3s ease-in-out;
}

.lucid-card-title:hover {
  color: #d1d5db;
}

@media (min-width: 576px) {
  .lucid-card-title {
    font-size: 1.5rem;
  }
}

/* The main container for the testimonials section */
.tassie-autocare-testimonials-container {
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

/* Swiper container to handle responsive widths */
.tassie-swiper-container {
  width: 100%;
}

/* Individual testimonial card styling */
.tassie-testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: #2e2e2e;
  border-radius: 1rem;
  color: #e0e0e0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: 100%;
  min-height: 310px;
}

/* Styling for each swiper slide to control width */
.tassie-swiper-slide {
  width: 320px;
  max-width: 350px; /* Added max-width as requested */
  height: auto;
  display: flex;
  align-items: stretch;
}

.text-size-testimonal {
  font-size: 14px !important;
}

.text-center-tassie {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* ------------ */
/* Base styles for the embeddable section */
.cmt-section-wrapper {
  font-family: "Poppins", sans-serif;
  background-color: #0a0a0a; /* Deep dark background for this section */
  color: #e0e0e0; /* Light text for contrast */
  line-height: 1.6;
  box-sizing: border-box; /* Ensure box model consistency */
  padding: 0; /* No default padding/margin */
  margin: 0;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

.cmt-container {
  max-width: 1400px; /* Wider container for premium feel */
  margin: 0 auto;
  padding: 3rem 6rem; /* Increased padding */
  box-sizing: border-box; /* Ensure box model consistency */
}

.cmt-header {
  font-family: "Playfair Display", serif; /* Elegant font for headers */
  font-size: 4rem; /* Larger header */
  font-weight: 700;
  text-align: center;
  margin-bottom: 22px; /* More spacing */
  color: #f8f8f8;
  padding-top: 10px;
  letter-spacing: 0.05em;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Subtle text shadow */
}

/* Styling for alternating team member sections */
.cmt-team-member-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem; /* More generous spacing between sections */
  background-color: transparent; /* Changed to transparent */
  border-radius: 1.25rem; /* Still retain for consistent spacing and potential future background */
  overflow: hidden; /* Important for image border-radius */
  transition: transform 0.4s ease-in-out; /* Keep hover effect for image/text grouping */
  padding: 2.5rem; /* Internal padding for the whole section */
  gap: 2.5rem; /* Gap between image and text containers */
  box-sizing: border-box; /* Ensure box model consistency */
}

/* Hover effect on the entire section to lift elements together */
.cmt-team-member-section:hover {
  transform: translateY(-12px); /* More pronounced lift on hover */
}

.cmt-team-member-image-wrapper {
  flex: 1 1 45%; /* Slightly less than half for image, allowing text more room */
  min-width: 350px; /* Minimum width before stacking */
  height: 550px; /* Taller images */
  overflow: hidden;
  border-radius: 0.75rem; /* Rounded corners for image */
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7); /* Deep shadow on image itself */
  transition: box-shadow 0.4s ease-in-out;
  box-sizing: border-box; /* Ensure box model consistency */
}

/* Adjust shadow on image wrapper hover */
.cmt-team-member-section:hover .cmt-team-member-image-wrapper {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
}

.cmt-team-member-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-in-out;
  box-sizing: border-box; /* Ensure box model consistency */
}

.cmt-team-member-section:hover .cmt-team-member-image {
  transform: scale(1.07); /* More pronounced zoom on hover */
}

.cmt-team-member-info-panel {
  flex: 1 1 45%; /* Slightly less than half for text */
  min-width: 350px; /* Minimum width before stacking */
  background-color: transparent; /* Changed to transparent */
  border-radius: 0.75rem; /* Still retain for consistent spacing */
  padding: 3.5rem; /* Generous padding inside text panel */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* Shadow on text panel, now more prominent */
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.03); /* Very subtle border still adds definition */
  transition: box-shadow 0.4s ease-in-out;
  box-sizing: border-box; /* Ensure box model consistency */
}

/* Adjust shadow on info panel hover */
.cmt-team-member-section:hover .cmt-team-member-info-panel {
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7);
}

.cmt-member-name {
  font-family: "Playfair Display", serif;
  font-size: 3rem; /* Larger name */
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #e6e6e6;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.cmt-member-role {
  font-size: 1.35rem; /* Slightly larger role */
  font-weight: 500;
  color: #aaa;
  margin-bottom: 2rem;
}

.cmt-member-quote {
  font-size: 18px; /* Slightly larger quote */
  line-height: 1.7;
  color: #c0c0c0;
  margin-bottom: 2.5rem;
  font-style: italic;
  border-left: 4px solid #ff3d24; /* Accent line for quote - RED */
  padding-left: 1.5rem;
}

.cmt-connect-button {
  display: inline-block;
  padding: 12px 24px; /* Larger button */
  background-color: #ff3d24;
  /* background: linear-gradient(
    135deg,
    #ff3d24,
    #cc301e
  );  */
  color: #fff;
  text-decoration: none;
  font-size: 15px; /* Larger font on button */
  font-weight: 600;
  border-radius: 2px; /* Slightly more rounded button */
  /* transition: background 0.3s ease-in-out, transform 0.2s ease-in-out,
    box-shadow 0.3s ease-in-out; */
  box-shadow: 0 6px 20px rgba(255, 61, 36, 0.5); /* Shadow for red button */
  border: none;
  cursor: pointer;
  text-align: center;
  width: fit-content;
}

.cmt-connect-button:hover {
  /* background: linear-gradient(
    135deg,
    #cc301e,
    #ff3d24
  );  */
  transform: translateY(-4px); /* More pronounced lift */
  box-shadow: 0 8px 25px rgba(255, 61, 36, 0.7); /* Hover shadow for red button */
  background-color: white;
  color: #000;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .cmt-container {
    padding: 2.5rem 4rem;
  }
  .cmt-header {
    font-size: 3.5rem;
    margin-bottom: 5rem;
  }
  .cmt-team-member-section {
    padding: 2rem;
    gap: 2rem;
    margin-bottom: 1rem;
  }
  .cmt-team-member-image-wrapper {
    height: 480px;
    min-width: 300px;
  }
  .cmt-team-member-info-panel {
    padding: 3rem;
    min-width: 300px;
  }
  .cmt-member-name {
    font-size: 2.5rem;
  }
  .cmt-member-role {
    font-size: 1.2rem;
  }
  .cmt-member-quote {
    font-size: 1.05rem;
  }
  .cmt-connect-button {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 1024px) {
  .cmt-container {
    padding: 2rem;
  }
  .cmt-header {
    font-size: 3rem;
    margin-bottom: 4rem;
  }
  .cmt-team-member-section {
    flex-direction: column; /* Stack vertically */
    margin-bottom: 2rem;
    padding: 1.5rem;
    gap: 1.5rem;
  }
  .cmt-team-member-image-wrapper {
    height: 400px;
    width: 100%; /* Take full width */
    flex: none;
  }
  .cmt-team-member-info-panel {
    padding: 2.5rem;
    text-align: center; /* Center text on mobile */
    width: 100%; /* Take full width */
    flex: none;
  }
  .cmt-member-name {
    font-size: 2.2rem;
  }
  .cmt-member-role {
    font-size: 1.1rem;
  }
  .cmt-member-quote {
    font-size: 1rem;
    padding-left: 0; /* Remove left padding for accent line */
    border-left: none; /* Remove accent line on mobile for cleaner look */
  }
  .cmt-connect-button {
    margin: 0 auto; /* Center button on mobile */
  }
  /* Reverse order for Haider on mobile: image first, then text */
  .cmt-team-member-section.cmt-reverse .cmt-team-member-image-wrapper {
    order: 0;
  }
  .cmt-team-member-section.cmt-reverse .cmt-team-member-info-panel {
    order: 1;
  }
}

@media (max-width: 768px) {
  .cmt-header {
    font-size: 2.5rem;
    margin-bottom: 3rem;
  }
  .cmt-team-member-image-wrapper {
    height: 350px;
  }
  .cmt-member-name {
    font-size: 1.9rem;
  }
  .cmt-member-role {
    font-size: 1rem;
  }
  .cmt-member-quote {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .cmt-container {
    padding: 1rem;
  }
  .cmt-header {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .cmt-team-member-section {
    padding: 1rem;
    gap: 1rem;
  }
  .cmt-team-member-image-wrapper {
    height: 280px;
  }
  .cmt-team-member-info-panel {
    padding: 1.5rem;
  }
  .cmt-member-name {
    font-size: 1.6rem;
  }
  .cmt-member-role {
    font-size: 0.9rem;
  }
  .cmt-member-quote {
    font-size: 0.9rem;
  }
  .cmt-connect-button {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .desp {
    text-align: center !important;
  }
}

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

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

/* Swiper container to handle responsive widths */
.tassie-swiper-container {
  width: 100%;
}

/* Individual testimonial card styling */
.tassie-testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: #2e2e2e;
  border-radius: 1rem;
  color: #e0e0e0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: 100%;
  min-height: 285px;
}

/* Styling for each swiper slide to control width */
.tassie-swiper-slide {
  width: 320px;
  max-width: 350px;
  height: auto;
  display: flex;
  align-items: stretch;
}

/* Corrected star color to match the design */
.star-rating {
  color: #f59e0b;
}

.card-text {
  font-size: 14px;
  font-weight: 400px;
}

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

:root {
  --bs-body-bg: #111827;
  --bs-body-color: #e0e0e0;
}

/* Swiper container to handle responsive widths */
.tassie-swiper-container {
  width: 100%;
  /* Completely disable pointer events on swiper containers */
  pointer-events: none;
  user-select: none;
}

/* Individual testimonial card styling */
.tassie-testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: #2e2e2e;
  border-radius: 1rem;
  color: #e0e0e0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: 100%;
  min-height: 265px;
  /* Disable text selection */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Styling for each swiper slide to control width */
.tassie-swiper-slide {
  width: 320px;
  max-width: 350px;
  height: auto;
  display: flex;
  align-items: stretch;
  /* Disable pointer events on slides */
  pointer-events: none;
  user-select: none;
}

/* Star rating styling using HTML entities */
.star-rating {
  color: #f59e0b !important;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: normal;
}

.card-text {
  font-size: 14px;
  font-weight: 400px;
}

/* Additional CSS to prevent any interaction */
.swiper-wrapper {
  pointer-events: none !important;
  user-select: none !important;
}

.swiper-slide {
  pointer-events: none !important;
  user-select: none !important;
}

/* Prevent scrolling on touch devices */
.tassie-autocare-testimonials-container {
  touch-action: pan-y;
}