/* สำหรับหน้าจอที่มีความกว้างไม่เกิน 1024px (iPad) */
@media (max-width: 1024px) {
    .hindu-hero-bg {
        background-size: cover; /* แสดงภาพทั้งหมดโดยไม่ครอบ */
    }
}

/* สำหรับหน้าจอที่มีความกว้างไม่เกิน 768px (Tablet & Mobile) */
@media (max-width: 768px) {
    .hindu-hero-bg {
        background-size: cover;
        height: 40%; /* ปรับความสูงเพื่อให้เหมาะสม */
    }
}

/* สำหรับหน้าจอที่มีความกว้างไม่เกิน 480px (Mobile) */
@media (max-width: 480px) {
    .hindu-hero-bg {
        background-size: cover;
        height: auto; /* ปรับตามความสูงของภาพ */
    }
}

@media (max-width: 576px) {
    .additional-videos .col-6 {
        margin-bottom: 20px; /* เพิ่มระยะห่างระหว่างวิดีโอ */
    }
}

.responsive-logo-footer {
    max-width: 25%;
    width: fit-content;
}
.responsive-logo {
    max-width: 35%;
    width: fit-content;
}

/* iPad (tablets) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .responsive-logo {
        max-width: 50%;
    }
}

/* Mobile devices */
@media only screen and (max-width: 767px) {
    .responsive-logo {
        max-width: 70%;
    }
}

.header-area {
    /* background: #fff8f1; */
    /* background: #FFD700 !important;  */
    /* background: linear-gradient(135deg, #e7db87, #d2c184); */
    /* background: linear-gradient(135deg, #f7e17e, #d2c184); */
    background: linear-gradient(135deg, #f7e17e, #d2c184), url('assets/images/bg-cover/pngtree-golden-texture-pattern-gold-bakground-image_579775.jpg');
    background-size: cover; /* ปรับขนาดรูปให้ครอบคลุมพื้นที่ */
    background-position: center center; /* จัดตำแหน่งรูปให้อยู่ตรงกลาง */
    background-repeat: no-repeat; /* ไม่ให้รูปภาพซ้ำ */
    background-blend-mode: overlay; /* ผสมผสานระหว่างสีและรูปภาพ */
}

.header-area * {
    color: #000000 !important; /* สีฟอนต์เป็นสีดำ */
    transition: color 0.3s ease !important; /* เพิ่มการเปลี่ยนแปลงสี */
}

.header-area *:hover {
    color: #d8ba60 !important;  
}
.header-area a:hover {
    color: #d8ba60 !important; 
    /* text-decoration: none;  */
}
.header-area a:hover, .header-area .nav-item a:hover, .header-area .nav-link:hover {
    color: #d8ba60 !important;
}
.header-area ul:hover, .header-area a ul:hover {
    color: #d8ba60 !important; /* เปลี่ยนสีฟอนต์เป็นสีทองเมื่อ hover ในพื้นที่ header */
}
/* .hindu-hero-bg {
    background-image: url('assets/images/274119701_501791851293603_4152850291397782337_n.jpg');
    background-size: cover;
    background-position: center;
} */

.header-sticky.is-sticky {
    /* background: #fff8f1; */
    /* background: linear-gradient(135deg, #f7e17e, #d2c184); */
    background: linear-gradient(135deg, #f7e17e, #d2c184), url('assets/images/bg-cover/pngtree-golden-texture-pattern-gold-bakground-image_579775.jpg');
    background-size: cover; /* ปรับขนาดรูปให้ครอบคลุมพื้นที่ */
    background-position: center center; /* จัดตำแหน่งรูปให้อยู่ตรงกลาง */
    background-repeat: no-repeat; /* ไม่ให้รูปภาพซ้ำ */
    background-blend-mode: overlay; /* ผสมผสานระหว่างสีและรูปภาพ */
}

.header-btn .btn-default {
    /* background: #f2b263; */
    background: #d8ba60 !important;
    color: #eee45b;
    border-radius: 25px;
    padding: 6px 25px;
    border: 2px solid #ddd;
    font-size: 15px;
}

.submenu ul {
    padding: 5px 0 !important;
}
.submenu a {
    font-size: 14px;
}

.header-area .submenu a:hover, 
.header-area .submenu li a:hover, 
.header-area .submenu li span:hover {
    color: #d8ba60 !important;
}


.header-area .nav-item .submenu a:hover, 
.header-area .nav-item .submenu li a:hover, 
.header-area .nav-item .submenu li span:hover {
    color: #d8ba60 !important;
}

.submenu {
    padding: 10px 0 !important;
}
.submenu>li>a {
    padding: 5px 15px !important;
}
.submenu>li>a>span {
    position: relative;
    font-size: smaller;
}

.mobile-menu-overlay__header {
    background: linear-gradient(135deg, #f7e17e, #d2c184) !important;
    background-size: cover;
}
.mobile-menu-overlay__inner {
    background: linear-gradient(135deg, #f7ecbe, #f3ecd1) !important;
}
.mobile-menu-overlay__body {
    padding: 8px 24px !important;
    background: linear-gradient(135deg, #ebd88b, #f3ecd1) !important;
}
.mobile-menu-overlay__body .offcanvas-navigation>ul>li>a {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    color: #000000 !important;
}
.mobile-menu-overlay__body .offcanvas-navigation>ul>li.has-children .sub-menu li a {
    color: #000000 !important;
}
.mobile-menu-overlay__body .offcanvas-navigation > ul > li > a:hover {
    background-color: #f1e2a8; 
}
.mobile-menu-overlay__body .offcanvas-navigation>ul>li.has-children .sub-menu {
    padding: 0px 0 8px 8px !important;
}
.mobile-menu-overlay__body .offcanvas-navigation>ul>li.has-children .menu-expand {
    color: #000000 !important;
}



.qr-code img {
    max-width: 250px;
    border-radius: 10px;
}
.instructions, .thank-you {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 20px;
}
.thank-you {
    color: #006400;
    font-weight: bold;
    margin-top: 30px;
}

.site-wrapper-reveal {
    background-color: #fff;
    /* padding-top: 90px !important; */
}

.tx-history {
    color: blue;
    font-weight: 600;
}
.biography-paragraph {
    text-indent: 2em;  
    line-height: 1.8; 
    margin-bottom: 15px; 
    text-align: justify; 
}

.biography-paragraph span {
    font-weight: bold;
    color: #102958; 
}

.hierarchy-list {
    line-height: 1.8; 
    color: #333; 
    margin: 20px 0; 
    padding: 0 20px; 
}

.hierarchy-list li {
    margin-bottom: 10px; 
    list-style: none; 
    position: relative; 
    padding-left: 30px; 
}

.hierarchy-list li::before {
    content: "-"; 
    position: absolute;
    left: 0; 
    color: #102958; 
}

.hierarchy-list span.year {
    font-weight: bold;
    color: #d9534f; 
}

.hierarchy-list ul {
    padding-left: 20px; 
}

.section-title-tx {
    background: linear-gradient(90deg, #FFC107, #FFD700, #FFA500) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5) !important;
    letter-spacing: 1px !important;
}
.section-title::after {
    background: linear-gradient(90deg, #bd8f07, #ad9203, #b67702) !important;
}