/* Custom Styles for the layout */
 body {
     font-family: 'Battambang', sans-serif;
     /* Example Khmer font */
     background-color: #f8f9fa;
     /* Light background */
 }

 /* Sticky Navbar Styles */
 .navbar {
     transition: all 0.3s ease;
 }

 .navbar.sticky {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 1000;
     background: rgba(255, 255, 255, 0.95) !important;
     backdrop-filter: blur(10px);
     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
     padding: 0.5rem 0 !important;
 }

 .navbar.sticky .navbar-brand img {
     height: 40px !important;
     transition: height 0.3s ease;
 }

 .navbar.sticky .nav-link {
     padding: 0.5rem 1rem !important;
     transition: padding 0.3s ease;
 }

 .navbar.sticky .btn {
     padding: 0.4rem 1.5rem !important;
     font-size: 0.9rem;
     transition: all 0.3s ease;
 }

 /* Add padding to body when navbar is sticky to prevent content jump */
 body.navbar-sticky {
     padding-top: 80px;
 }

 .navbar-brand img {
     height: 45px;
     /* Adjusted height from image */
 }

 .navbar-nav .nav-link {
     color: #495057;
     /* Darker text for nav links */
     font-weight: 600;
     margin-left: 15px;
     /* Spacing between nav items */
 }

 .navbar-nav .nav-item.active .nav-link,
 .navbar-nav .nav-link:hover {
     color: rgba(19, 78, 146, 255);
 }

 .navbar .btn-outline-primary {
     border-color: rgba(19, 78, 146, 255);
     color: rgba(19, 78, 146, 255);
 }

 .navbar .btn-outline-primary:hover {
     background-color: rgba(19, 78, 146, 255);
     color: white;
 }

 .navbar .btn-primary {
     background-color: rgba(19, 78, 146, 255);
     /* Blue button from image */
     border-color: rgba(19, 78, 146, 255);
     color: white;
     font-weight: bold;
 }

 .navbar .btn-primary:hover {
     background-color: #0056b3;
     border-color: #0056b3;
 }

 /* Hero Section */
 .hero-section {
     background-color: rgba(19, 78, 146, 255);
     /* Primary blue from image */
     color: white;
     padding: 100px 0;
     /* More padding for a grander feel */
     position: relative;
     overflow: hidden;
     /* To contain background pattern */
     /* border-bottom-left-radius: 50px;  */
     /* Rounded bottom left corner from image */
 }

 .hero-section::before {
     /* Pseudo-element for the subtle grid pattern */
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
         linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
     background-size: 20px 20px;
     /* Adjust grid size */
     opacity: 0.8;
     /* Adjust opacity */
     z-index: 0;
 }

 .hero-content {
     position: relative;
     z-index: 1;
     /* Ensure content is above pattern */
 }

 .hero-title {
     font-size: 36px;
     /* Larger font size */
     font-weight: bold;
     line-height: 1.3;
 }

 .hero-text {
     font-size: 1rem;
     opacity: 0.9;
 }

 .hero-button {
     background-color: transparent;
     /* Warning yellow from image */
     border-color: #f8f9fa;
     color: #f8f9fa;
     /* Dark text on yellow */
     font-weight: medium;
     padding: 10px 30px;
     font-size: 1rem;
     border-radius: 5px;
     /* Slightly rounded */
 }

 .hero-button:hover {
     background-color: #e0a800;
     color: #f8f9fa;
     /* Darker yellow on hover */

 }

 .hero-video-placeholder {
     background-color: #000;
     height: 350px;
     /* Larger height for video from image */
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 8px;
     overflow: hidden;
     position: relative;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
     /* Subtle shadow for depth */
 }

 .hero-video-placeholder img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: absolute;
     top: 0;
     left: 0;
 }

 .hero-video-placeholder .play-button {
     position: absolute;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 50%;
     width: 70px;
     /* Larger play button */
     height: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
     font-size: 2.5rem;
     /* Larger icon */
     cursor: pointer;
     z-index: 2;
 }

 /* Content Section (News/Articles) */
 .section-title {
     text-align: start;
     margin-top: 60px;
     margin-bottom: 40px;
     font-size: 2.2rem;
     font-weight: bold;
     color: #343a40;
 }

 .card-custom {
     border: 1px solid #dee2e6;
     /* Subtle border */
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     /* Stronger shadow */
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     height: 100%;
     /* Ensure cards in a row have equal height */
     display: flex;
     flex-direction: column;
     overflow: hidden;
     width: 287px;
 }

 .card-custom:hover {
     transform: translateY(-8px);
     /* More pronounced lift */
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }

 .card-custom img {
     height: 180px;
     object-fit: cover;
     width: 100%;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }

 .card-body {
     padding: 1.25rem;
     /* Standard Bootstrap padding */
     flex-grow: 1;
     /* Allow body to take available space */
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     /* Push button to bottom */
 }

 .card-title {
     font-size: 14px;
     font-weight: medium;
     color: #666666;
     margin-bottom: 1rem;
 }

 .card-body .btn-primary {
     background-color: rgba(19, 78, 146, 255);
     border-color: rgba(19, 78, 146, 255);
     color: white;
     font-weight: medium;
     align-self: flex-start;
     /* Align button to start */
     border-radius: 6px;
 }

 .card-body .btn-primary:hover {
     background-color: #0056b3;
     border-color: #0056b3;
 }

 /* Pagination */
 .pagination {
     margin-top: 40px;
 }

 .pagination .page-link {
     color: rgba(19, 78, 146, 255);
     border: 1px solid #dee2e6;
     border-radius: 5px;
     /* Slightly rounded */
     margin: 0 3px;
     /* Small gap between buttons */
 }

 .pagination .page-item.active .page-link {
     background-color: rgba(19, 78, 146, 255);
     border-color: rgba(19, 78, 146, 255);
     color: white;
 }

 .pagination .page-item.disabled .page-link {
     color: #6c757d;
 }

 /* Info Banner */
 .info-banner {
     background-color: rgba(19, 78, 146, 255);
     color: white;
     padding: 60px 40px;
     /* More padding */
     margin-top: 70px;
     border-radius: 10px;
     /* More rounded */
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
     /* Prominent shadow */
     display: flex;
     align-items: center;
 }

 .info-banner img {
     max-height: 250px;
     width: auto;
     margin-bottom: 0;
     border-radius: 20px;
     /* already rounded */
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .info-banner img:hover {
     transform: scale(1.08);
 }

 .info-banner h3 {
     font-size: 2rem;
     font-weight: bold;
     margin-bottom: 20px;
     color: #FFDE5A;
 }

 .info-banner p {
     font-size: 18px;
     line-height: 1.6;
     opacity: 0.9;
     margin-bottom: 30px;
     font-weight: 450;
 }

 .info-banner .btn-lg {
     padding: 10px 40px;
     font-size: 1rem;
     border-radius: 5px;
     background-color: transparent;
     /* Yellow button */
     border-color: #f8f9fa;
     color: #f8f9fa;
     font-weight: medium;
 }

 .info-banner .btn-lg:hover {
     background-color: #e0a800;
     /* border-color: #e0a800; */
 }

 /* Footer */
 .footer-section {
     background-color: #f8f9fa;
     /* Light grey background */
     padding: 50px 0 30px;
     /* More padding */
     margin-top: 80px;
     border-top: 1px solid #e9ecef;
     /* Subtle top border */
 }

 .footer-section h5 {
     margin-bottom: 25px;
     font-weight: bold;
     color: #343a40;
     font-size: 1.2rem;
     background-color: #0056b3;
     border-radius: 10px;
     padding: 10px;
     color: #f8f9fa;
     text-align: center;
     width: 130px;

 }

 .footer-section ul {
     list-style: none;
     padding: 0;
 }

 .footer-section ul li {
     margin-bottom: 12px;
 }

 .footer-section ul li a {
     color: #6c757d;
     /* Muted text color */
     text-decoration: none;
     font-size: 0.95rem;
     transition: color 0.2s;
 }

 .footer-section ul li a:hover {
     color: rgba(19, 78, 146, 255);
 }

 .footer-section p {
     color: #6c757d;
     font-size: 0.95rem;
     line-height: 1.6;
     margin-bottom: 10px;
 }

 .footer-section .fa-icon-text {
     display: flex;
     align-items: flex-start;
     margin-bottom: 10px;
 }

 .footer-section .fa-icon-text i {
     margin-right: 10px;
     font-size: 1.1rem;
     color: rgba(19, 78, 146, 255);
     /* Icons in blue */
     margin-top: 3px;
     /* Align icon better with text */
 }

 .social-icons a {
     font-size: 2.2rem;
     /* Larger social icons */
     margin-right: 18px;
     color: #6c757d;
     transition: color 0.2s;
 }

 .social-icons a:hover {
     color: rgba(19, 78, 146, 255);
 }

 .footer-logos {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 25px;
     /* Space between logos */
     margin-top: 40px;
     padding-top: 20px;
     border-top: 1px solid #e9ecef;
     /* Separator line */
 }

 .footer-logos img {
     max-height: 60px;
     /* Adjusted height */
 }

 /* Responsive adjustments */
 @media (max-width: 991.98px) {

     /* Medium and small screens */
     .hero-section {
         padding: 60px 0;
     }

     .hero-title {
         font-size: 2rem;
     }

     .hero-text {
         font-size: 1.1rem;
     }

     .hero-video-placeholder {
         height: 250px;
         margin-top: 40px;
     }

     .info-banner {
         flex-direction: column;
         text-align: center;
         padding: 40px 20px;
     }

     .info-banner img {
         margin-bottom: 30px;
     }

     .footer-section .col-md-3 {
         margin-bottom: 40px;
         text-align: center;
     }

     .footer-section .fa-icon-text {
         justify-content: center;
     }

     .social-icons {
         text-align: center;
     }

     .footer-logos {
         flex-direction: column;
         gap: 15px;
     }
 }

 @media (max-width: 767.98px) {

     /* Small screens */
     .navbar-brand img {
         height: 35px;
     }

     .navbar-nav .nav-link {
         margin-left: 0;
         text-align: center;
     }

     .navbar-nav .btn-outline-primary,
     .navbar-nav .btn-primary {
         width: 80%;
         /* Make buttons wider */
         margin: 10px auto;
     }

     .hero-section {
         padding: 40px 0;
     }

     .hero-title {
         font-size: 1.8rem;
     }

     .hero-text {
         font-size: 1rem;
     }

     .hero-video-placeholder {
         height: 200px;
     }

     .section-title {
         font-size: 1.8rem;
         margin-top: 40px;
     }

     .card-custom {
         margin-bottom: 25px;
         /* More space between stacked cards */
     }

     .info-banner h3 {
         font-size: 1.8rem;
     }

     .info-banner p {
         font-size: 1rem;
     }

     .footer-section .col-md-3 {
         margin-bottom: 30px;
     }

     .footer-logos {
         margin-top: 30px;
     }
 }