/* Add your custom styles here */
/* Apply Sarabun font globally */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
p,
div,
span,
a,
button,
input,
textarea,
select {
    font-family: 'noto-serif-thai', 'Sarabun', sans-serif;
}

/* Adds a bit of spacing to "Responsive Grid Row" blocks. */
.crx-grid {
    padding-top: 40px;
    padding-bottom: 40px;
}

.crx-grid .crx-grid {
    padding-top: 0;
    padding-bottom: 0;
}

/* wrap pali text */
.pali-text .word {
    display: inline-block;
    white-space: nowrap;
}

/* Custom colors */
/* Custom PTF color palette */
.bg-mocha-mousse {
    background-color: #8C7164 !important;
    /* Pantone 17-1220 Mocha Mousse */
}

.bg-cobblestone {
    background-color: #A39E96 !important;
    /* Pantone 16-1107 Cobblestone */
}

.bg-willow {
    background-color: #93A571 !important;
    /* Pantone 16-0532 Willow */
}

.bg-cornflower-blue {
    background-color: #8DA9CA !important;
    /* Pantone 16-4031 Cornflower Blue */
}

.bg-toadstool {
    background-color: #86A06C !important;
    /* Pantone 16-0123 Toadstool */
}

.bg-rose-tan {
    background-color: #C4A998 !important;
    /* Pantone 16-1511 Rose Tan */
}

.bg-viola {
    background-color: #9C91C6 !important;
    /* Pantone 16-3215 Viola */
}

.bg-gardenia {
    background-color: #F1E8D9 !important;
    /* Pantone 11-0604 Gardenia */
}

.bg-lotus-gold {
    background-color: #D4AF37 !important;
    /* A modern gold shade inspired by Buddhist tradition */
}

/* Add text color variants */
.text-mocha-mousse {
    color: #8C7164 !important;
    /* Mocha Mousse */
}

.text-cobblestone {
    color: #A39E96 !important;
    /* Cobblestone */
}

.text-willow {
    color: #93A571 !important;
    /* Willow */
}

.text-cornflower-blue {
    color: #8DA9CA !important;
    /* Cornflower Blue */
}

.text-toadstool {
    color: #86A06C !important;
    /* Toadstool */
}

.text-rose-tan {
    color: #C4A998 !important;
    /* Rose Tan */
}

.text-viola {
    color: #9C91C6 !important;
    /* Viola */
}

/* Border color variants */
.border-mocha-mousse {
    border-color: #8C7164 !important;
    /* Mocha Mousse */
}

.border-cobblestone {
    border-color: #A39E96 !important;
    /* Cobblestone */
}

.border-willow {
    border-color: #93A571 !important;
    /* Willow */
}

.border-cornflower-blue {
    border-color: #8DA9CA !important;
    /* Cornflower Blue */
}

.border-toadstool {
    border-color: #86A06C !important;
    /* Toadstool */
}

.border-rose-tan {
    border-color: #C4A998 !important;
    /* Rose Tan */
}

.border-viola {
    border-color: #9C91C6 !important;
    /* Viola */
}

/* Button variants */
.btn-mocha-mousse {
    background-color: #8C7164;
    /* Mocha Mousse */
    border-color: #8C7164;
    color: #fff;
}

.btn-mocha-mousse:hover,
.btn-mocha-mousse:focus {
    background-color: #7c6154;
    border-color: #7c6154;
    color: #fff;
}

.btn-cobblestone {
    background-color: #A39E96;
    /* Cobblestone */
    border-color: #A39E96;
    color: #fff;
}

.btn-cobblestone:hover,
.btn-cobblestone:focus {
    background-color: #938e86;
    border-color: #938e86;
    color: #fff;
}

.btn-willow {
    background-color: #93A571;
    /* Willow */
    border-color: #93A571;
    color: #fff;
}

.btn-willow:hover,
.btn-willow:focus {
    background-color: #839561;
    border-color: #839561;
    color: #fff;
}

.btn-cornflower-blue {
    background-color: #8DA9CA;
    /* Cornflower Blue */
    border-color: #8DA9CA;
    color: #fff;
}

.btn-cornflower-blue:hover,
.btn-cornflower-blue:focus {
    background-color: #7d99ba;
    border-color: #7d99ba;
    color: #fff;
}

.btn-viola {
    background-color: #9C91C6;
    /* Viola */
    border-color: #9C91C6;
    color: #fff;
}

.btn-viola:hover,
.btn-viola:focus {
    background-color: #8c81b6;
    border-color: #8c81b6;
    color: #fff;
}

.btn-outline-mocha-mousse {
    color: #8C7164;
    /* Mocha Mousse */
    border-color: #8C7164;
}

.btn-outline-mocha-mousse:hover,
.btn-outline-mocha-mousse:focus {
    background-color: #8C7164;
    color: #fff;
}


/* custom tooltip */
.custom-tooltip {
    --bs-tooltip-bg: #8DA9CA;
    --bs-tooltip-color: #fff;
}


/* custom lifting image */
.img-hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    will-change: transform, box-shadow, filter;
    border-radius: 10px;
    overflow: hidden;
}

.img-hover-lift:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    filter: brightness(1.05);
    cursor: pointer;
}