/* Custom styles not easily covered by Tailwind */

/* For the diagonal clip-path on the hero image */
.hero-image-clip {
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

/* For icon color */
.icon-blue {
    filter: invert(30%) sepia(80%) saturate(1500%) hue-rotate(180deg) brightness(90%) contrast(90%);
}

/* Specific styles for the mobile navigation menu overlay */
.nav-menu.active {
    display: flex; /* Override hidden class from Tailwind */
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 68px; /* Adjust based on navbar height */
    left: 0;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px 0;
    z-index: 40; /* Ensure it's above other content but below sticky nav */
}

.nav-menu.active ul {
    flex-direction: column;
    width: 100%;
}

.nav-menu.active ul li {
    margin: 10px 0;
    text-align: center;
}

/* Testimonial card sizing for responsiveness, adjusting Tailwind's defaults */
@media (max-width: 768px) {
    .testimonial-card {
        flex: 0 0 95%; /* Adjust to almost full width on mobile/tablet */
        margin: 0 10px; /* Adjust margin */
    }
}

/* Custom styles not easily covered by Tailwind */

/* For the diagonal clip-path on the hero image */
.hero-image-clip {
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

/* For icon color */
.icon-blue {
    /* This filter assumes a black/white icon and attempts to make it blue. Adjust as needed. */
    filter: invert(30%) sepia(80%) saturate(1500%) hue-rotate(180deg) brightness(90%) contrast(90%);
}

/* Specific styles for the mobile navigation menu overlay */
.nav-menu.active {
    display: flex; /* Override hidden class from Tailwind */
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 68px; /* Adjust based on navbar height */
    left: 0;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px 0;
    z-index: 40; /* Ensure it's above other content but below sticky nav */
}

.nav-menu.active ul {
    flex-direction: column;
    width: 100%;
}

.nav-menu.active ul li {
    margin: 10px 0;
    text-align: center;
}

/* Testimonial card sizing for responsiveness, adjusting Tailwind's defaults */
@media (max-width: 768px) {
    .testimonial-card {
        flex: 0 0 95%; /* Adjust to almost full width on mobile/tablet */
        margin: 0 10px; /* Adjust margin */
    }
.whatuppopup .fab .fab {
	width: 10px !important;
	height: auto;
	box-shadow: none;
	min-width: inherit;
}
.whatuppopup .fab{	font-size: 12px !important;}
  .whatuppopup .fab i {
    margin-right: 7px;
    font-size: 16px;
    font-style: normal;
  }
}
/* Custom styles not easily covered by Tailwind */

/* For the diagonal clip-path on the hero image */
.hero-image-clip {
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

/* For icon color - ensure this is still desired for other sections */
.icon-blue {
    filter: invert(30%) sepia(80%) saturate(1500%) hue-rotate(180deg) brightness(90%) contrast(90%);
}

/* Specific styles for the mobile navigation menu overlay */
.nav-menu.active {
    display: flex; /* Override hidden class from Tailwind */
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 68px; /* Adjust based on navbar height */
    left: 0;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px 0;
    z-index: 40; /* Ensure it's above other content but below sticky nav */
}

.nav-menu.active ul {
    flex-direction: column;
    width: 100%;
}

.nav-menu.active ul li {
    margin: 10px 0;
    text-align: center;
}

/* Testimonial card sizing for responsiveness, adjusting Tailwind's defaults */
/* This media query ensures the cards are wider on small screens to fit content,
   and then become 1/2 and 1/3 width as screen size increases due to Tailwind classes. */
@media (max-width: 768px) {
    .testimonial-card {
        flex: 0 0 95%; /* Adjust to almost full width on mobile/tablet, allowing for margin */
        margin: 0 auto; /* Center cards horizontally */
    }
}


/* Slider dots styling */
.slider-dot {
    width: 12px;
    height: 12px;
    background-color: #cbd5e0; /* Gray-300 */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-dot.active {
    background-color: #2563eb; /* Blue-600 */
    width: 16px; /* Slightly larger for active */
    height: 16px;
}

/* General Navbar Styling (from your existing code) */
.navbar {
    background-color: #f8f8f8; /* Example background */
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex; /* Use flexbox for the header content */
    align-items: center; /* Vertically align items in the header */
    justify-content: center; /* Center the whole navbar-content */
}

/* New: Styling for the wrapper of logo and nav */
.navbar-content {
    display: flex;
    align-items: center; /* Vertically align logo and nav */
    justify-content: space-between; /* Pushes logo to left, nav to right */
    width: 100%; /* Make it take full width of the header */
    max-width: 1200px; /* Optional: Limit content width for larger screens */
}


/* New: Logo Styling */
.logo {
    height: 50px; /* Adjust as needed for your logo's size */
    width: auto; /* Maintain aspect ratio */
    margin-right: 20px; /* Space between logo and navigation */
}

/* Existing Nav Styling (adjust if needed) */
.navbar nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Makes list items horizontal */
    gap: 20px; /* Space between nav items */
}

.navbar nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 5px 0; /* Add some padding for better click area */
    transition: color 0.3s ease;
}

.navbar nav ul li a:hover,
.navbar nav ul li a.active {
    color: #27ae60; /* Example hover/active color */
}