/* Custom styles to complement Tailwind and apply the specific branding */
body {
    font-family: 'Kanit', sans-serif;
    background-color: #F8F9FA; /* Off-white background */
}

h1, h2, h3, h4, h5, h6, .font-kanit {
    font-family: 'Kanit', sans-serif;
}

/* Color Palette Variables */
:root {
    --color-primary-orange: #DD6B20; /* Primary Orange */
    --color-light-gray: #F8F9FA;
    --color-dark-text: #212529;
}

.bg-primary-orange { background-color: var(--color-primary-orange); }
.text-primary-orange { color: var(--color-primary-orange); }

/* Hero Section Background */
.hero-section {
    background: rgb(234, 123, 45) ;
    background-size: cover;
}

/* Sticky Header */
.header-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
/* For WebKit browsers like Chrome, Safari, and Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
padding:0;
}

/* For Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Card Hover Effect */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

/* Modern Button Style */
.btn-modern {
    background-image: linear-gradient(to right, #FBBF24, #F59E0B); /* Warm yellow-to-orange gradient */
    color: #422006; /* Dark brown text for better contrast */
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    filter: brightness(1.05); /* Slightly brighten on hover */
}

/* Dropdown transition */
.dropdown-menu {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Contact FAB and Slide-up Panel Styles */
.contact-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
}
.contact-panel {
    position: fixed;
    bottom: 6rem; /* Position above the FAB */
    right: 2rem;
    z-index: 99;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none; /* Not clickable when hidden */
}
.contact-panel.is-active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto; /* Clickable when visible */
}