h2 {
    font-weight: bold;
}

.border {
    background-color: #f8f9fa;
}

.text-custom-red {
    color: #C22C34 !important;
}

.bg-custom-red {
    background-color: #C22C34 !important;
}

.nav-link {
    transition: all 0.3s ease;
    padding: 6px 16px;
    cursor: pointer;
}

.nav-link:hover {
    background-color: white;
    color: #C22C34 !important;
    border-color: white;
    border-radius: 0.25rem;
    text-decoration: none;
}

.nav-link-quote-btn {
    border: 2px solid white;
    background-color: transparent;
    color: white;
    padding: 6px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.nav-link-quote-btn:hover {
    background-color: white;
    color: #C22C34 !important;
    text-decoration: none;
}

.consent-toast {
  width: 560px;
  max-width: 560px;
  margin-left: auto;
  background-color: rgba(255, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  border-radius: 10px;
}

/* สำหรับมือถือ: ทำให้ font เล็กลงเล็กน้อย */
@media (max-width: 576px) {

    .nav-link,
    .nav-link-quote-btn {
        font-size: 0.9rem;
        padding: 0.5rem 0.8rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    .card-title {
        font-size: 1rem;
    }

    .consent-toast {
        width: 100%;
        max-width: 100%;
        right: 0;
        left: 0;
    }
}

/* ===== Fade-in animation ===== */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animated-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* หน่วงเวลานิด ๆ ถ้าอยากใส่หลายรายการเรียงกัน */
.delay-1 {
    animation-delay: 0.2s;
}