/*
Theme Name: Hello Prestige
Description: Prestige Bathrooms.
Author: Yeshwin Anil & Dijo Matthew
Author URI: https://www.mambamarketing.co.uk/
Template: hello-elementor
Version: 1.0.0
*/

body {
  /* background-color: #ffffff !important; */
  font-family: "Syne" !important;
}

.bounding-box {
  width: 85% !important; /* Adjust width as needed */
}

/* Main Component Wrapper */
.bullet-component {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem; /* 12px, replaces space-x-3 */
  /* Removed padding: 0.75rem; */
  border-radius: 0.5rem;
  cursor: pointer;
  font-family: "Montserrat", sans-serif; /* Updated font */
}

/* Icon Styling  */
.bullet-component-icon svg {
  width: 2rem; /* 32px, replaces w-8 */
  height: 2rem; /* 32px, replaces h-8 */
  transition: all 200ms ease-in-out;
}

/* Default Icon (Gray) */
.bullet-component-icon .icon-default {
  display: block; /* Show by default */
  color: rgb(107 114 128); /* text-gray-500 */
}

/* Hover Icon (Custom Color #51635E) */
.bullet-component-icon .icon-hover {
  display: none; /* Hide by default */
  color: #51635e;
}

/* Text Styling */
.bullet-component-text .text-heading {
  font-weight: 700; /* font-bold */
  font-size: 1.2em; /* Updated size */
  color: rgb(17 24 39); /* text-gray-900 */
  transition: transform 200ms ease-in-out;
  transform-origin: left;
  margin: 0; /* New addition */
  padding: 0; /* New addition */
}

.bullet-component-text .text-paragraph {
  font-size: 1em; /* Updated size */
  font-weight: 500; /* New addition */
  color: rgb(55 65 81); /* text-gray-700 */
  transition: transform 200ms ease-in-out;
  transform-origin: left;
  margin: 0; /* New addition */
  padding: 0; /* New addition */
}

/* --- HOVER EFFECTS --- */

/* On hover, hide the default icon */
.bullet-component:hover .icon-default {
  display: none;
}

/* On hover, show the custom colored icon */
.bullet-component:hover .icon-hover {
  display: block;
}

/* On hover, scale the text */
.bullet-component:hover .text-heading,
.bullet-component:hover .text-paragraph {
  transform: scale(1.05);
}

/* Tablet (width less than 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
  .bounding-box {
    width: 95% !important;
  }
  .bullet-component-text .text-heading {
    font-size: 1em; /* Updated size */
  }
}

/* Mobile (width less than 768px) */
@media only screen and (max-width: 768px) {
  .bounding-box {
    width: 95% !important;
  }
}