body {
     /* This sets the default font for the entire page */
     font-family: 'Poppins', sans-serif;
     /* font-family: 'Montserrat', sans-serif; */
     font-weight: 400;
     /* Regular weight */
 }


 /* Transparent Blur Navbar */
 .navbar-blur {
     /* backdrop-filter: blur(8px);
        background-color: rgba(255, 255, 255, 0.2) !important; */
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
     padding: 15px 0;
 }

 .navbar-nav .nav-link {
     color: rgba(255, 255, 255, 0.9);
     font-weight: 500;
     margin: 0 10px;
     transition: all 0.3s ease;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
 }

 /* Active link color */
 .navbar-nav .nav-link.active {
     /* color: #fff !important; */
     color: #ffffff !important;
     background: linear-gradient(135deg, rgba(0, 128, 255, 0.429), rgba(53, 149, 245, 0.475));
     border: 1px solid rgba(255, 255, 255, 0.3);
     font-weight: 600;
     /* background: linear-gradient(135deg, #007FFF, #3595f5); */
     box-shadow: 0 4px 12px rgba(0, 127, 255, 0.25);
     border-radius: 12px;
     /* text-shadow: 0 1px 2px rgba(0,0,0,0.2); */
 }

 /* Hover effect for normal links */
 .navbar-nav .nav-link:hover {
     color: #007FFF !important;
     background: rgba(0, 127, 255, 0.08);
     border-radius: 12px;
 }

 .btn-login {
     background: linear-gradient(135deg, rgba(0, 128, 255, 0.429), rgba(53, 149, 245, 0.475));
     border: 1px solid rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     color: #ffffff;
     font-weight: 600;
     padding: 12px 28px;
     border-radius: 25px;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 127, 255, 0.3),
         inset 0 1px 1px rgba(255, 255, 255, 0.4);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     cursor: pointer;
 }

 .btn-login:hover {
     background: linear-gradient(135deg, rgba(0, 127, 255, 0.9), rgba(53, 149, 245, 0.8));
     box-shadow: 0 10px 25px rgba(0, 127, 255, 0.4),
         inset 0 1px 1px rgba(255, 255, 255, 0.5);
     transform: translateY(-2px);

 }


 /* Full screen sections */
 section {
     min-height: 100vh;
     background-size: cover;
     background-position: center;
     display: flex;
     /* align-items: center; */
     justify-content: center;
     text-align: center;
     /* color: white; */
     padding: 60px 20px;
 }

 /* Headline text on first page */
 .headline {
     /* background: rgba(0, 0, 0, 0.4); */
     /* padding: 20px 40px; */
     /* border-radius: 10px; */
     font-size: 2rem;
 }

 .btn-secondary-custom {
     background: transparent;
     border: 2px solid #f9f9f9;
     color: #f9f9f9;
     /* shadow: 2px 2px 4px rgba(0, 0, 0, 0.656); */
     /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.656); */
     padding: 13px 35px;
     font-size: 1.1rem;
     font-weight: 600;
     border-radius: 30px;
     margin: 10px;
     transition: all 0.3s ease;
     animation: fadeInUp 1s ease 0.8s both;
 }

 .btn-secondary-custom:hover {
     background: rgba(255, 255, 255, 0.1);
     transform: translateY(-3px);
     color: white;
     border-color: white;
 }

 /* Scroll smooth effect */
 html {
     scroll-behavior: smooth;
 }

 h1,
 h2,
 h3,
 h4 {
     color: #f9f9f9;
     /* font-size: 3rem; */
     font-weight: 700;
     /* margin-bottom: 20px; */
     /* text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.686); */
     /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); */
     /* color: linear-gradient(45deg, #007FFF, #ffed4e); */
     animation: fadeInUp 1s ease;
 }



 p {
     color: #f9f9f9;
     margin-bottom: 30px;
     /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.339); */
     animation: fadeInUp 1s ease 0.2s both;
     line-height: 1.2;
 }

 .card-text {
     color: #ffffff !important;
     text-align: left !important;
     animation: fadeInUp 1s ease 0.2s both;
 }

 .custom-card {
     max-width: 500px;
     /* max size on large screens */
     width: 100%;
     /* take full width on smaller screens */
     height: auto;
     /* let height grow with content */
     min-height: 150px;
     /* maintain minimum height */
     margin: auto;
     /* center horizontally */
 }

 .custom-gold-table {
     border-collapse: separate;
     border-spacing: 0;
     width: 100%;
     background-color: #ffffff;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
 }

 .custom-gold-table thead th {
     background: linear-gradient(135deg, rgba(0, 128, 255, 0.652), rgba(53, 149, 245, 0.729));
     /* background: linear-gradient(135deg, rgba(62, 62, 62, 0.429), rgba(90, 90, 90, 0.475)); */
     border: 1px solid rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     color: #ffffff;
     font-weight: 600;
     padding: 12px 28px;
     /* border-radius: 25px; */
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 127, 255, 0.3),
         inset 0 1px 1px rgba(255, 255, 255, 0.4);
     /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */

     /* background: linear-gradient(135deg, #007FFF, #007FFF);

     color: #333; */
     font-weight: bold;
     text-align: center;
     padding: 12px;
     font-size: 15px;
     border: none;
 }

 .custom-gold-table tbody td {
     padding: 12px;
     border-bottom: 1px solid #f1f1f1;
     vertical-align: middle;
 }

 .custom-gold-table tbody tr:hover {
     background-color: rgba(255, 215, 0, 0.1);
     transition: background 0.3s ease;
 }

 /* Zebra striping */
 .custom-gold-table tbody tr:nth-child(even) {
     background-color: #fafafa;
 }

 /* Rounded top corners */
 .custom-gold-table thead tr:first-child th:first-child {
     border-top-left-radius: 12px;
 }

 .custom-gold-table thead tr:first-child th:last-child {
     border-top-right-radius: 12px;
 }

 .page-item.active .page-link {
     /* background-color: #007FFF !important;
     border-color: #007FFF !important;
     color: #000 !important; */

     background: linear-gradient(135deg, rgba(0, 128, 255, 0.429), rgba(53, 149, 245, 0.475));
     border: 1px solid rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     color: #ffffff;
     /* font-weight: 600; */
     /* padding: 12px 28px; */
     /* border-radius: 25px; */
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 127, 255, 0.3),
         inset 0 1px 1px rgba(255, 255, 255, 0.4);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }

 /* Glassy card design */
 .card.glass-card {
     background: linear-gradient(135deg, rgba(0, 128, 255, 0.429), rgba(53, 149, 245, 0.475));
   /* background: linear-gradient(135deg, rgba(62, 62, 62, 0.429), rgba(90, 90, 90, 0.475)); */

     border: 1px solid rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     color: #ffffff;
     font-weight: 600;
     padding: 12px 28px;
     border-radius: 25px;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 127, 255, 0.3),
         inset 0 1px 1px rgba(255, 255, 255, 0.4);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     /* background: linear-gradient(135deg, rgba(0, 128, 255, 0.429), rgba(53, 149, 245, 0.475));
                                border: 1px solid rgba(255, 255, 255, 0.3);
                                backdrop-filter: blur(12px);
                                -webkit-backdrop-filter: blur(12px);

    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 127, 255, 0.2);
    transition: all 0.3s ease; */
 }

 /* Hover lift effect */
 .card.glass-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 35px rgba(0, 127, 255, 0.35);
 }

 /* Card title */
 .card.glass-card .card-title {
     color: #007FFF;
     font-weight: 600;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
     transition: color 0.3s ease;
 }

 /* Title hover glow */
 .card.glass-card:hover .card-title {
     color: #3399ff;
 }

 .card.glass-card ul li {
     color: #fff;
     font-weight: 400;
     margin-bottom: 12px;
     /* transition: transform 0.2s ease; */
 }

 /* .card.glass-card ul li:hover {
     transform: translateX(5px);
     color: #cfe6ff;
 } */

 .card.unit-card {
   background: linear-gradient(135deg, rgba(62, 62, 62, 0.429), rgba(90, 90, 90, 0.475));
     border: 1px solid rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     color: #ffffff;
     font-weight: 600;
     padding: 12px 28px;
     border-radius: 25px;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 127, 255, 0.3),
         inset 0 1px 1px rgba(255, 255, 255, 0.4);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Hover effect */
.card.unit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 127, 255, 0.3);
}

/* Title */
.card.unit-card .card-title {
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    margin-bottom: 1rem;
}

/* Paragraph text */
.card.unit-card .card-text {
    color: #f1f1f1;
    font-weight: 400;
    line-height: 1.5;
}

/* Section divider */
.card.unit-card hr {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 1rem 0;
}

/* Sub-section text with strong */
.card.unit-card strong {
    color: #ffffff;
    font-weight: 600;
}

/* Hover animation for sub-items */
.card.unit-card .card-text:hover {
    color: #cfe6ff;
    transform: translateX(5px);
    transition: all 0.2s ease;
}


 /* Optional: hover effect */
 /* .page-link:hover {
     background-color: #FFE55C !important;
     border-color: #FFE55C !important;
     color: #000 !important;
 } */

 /* Make table responsive */
 @media (max-width: 768px) {
     .custom-gold-table thead {
         display: none;
         /* Hide table header */
     }

     .custom-gold-table,
     .custom-gold-table tbody,
     .custom-gold-table tr,
     .custom-gold-table td {
         display: block;
         width: 100%;
     }

     .custom-gold-table tr {
         background: #fff;
         margin-bottom: 15px;
         border-radius: 10px;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
         padding: 10px;
     }

     .custom-gold-table td {
         display: flex;
         justify-content: flex-start;
         /* align content to left */
         align-items: center;
         /* vertically center if needed */
         gap: 10px;
         /* space between label and value */
         padding: 8px 10px;
         text-align: left;
         border: none;
         border-bottom: 1px solid #f1f1f1;
     }

     .custom-gold-table td:last-child {
         border-bottom: none;
     }

     .custom-gold-table td::before {
         content: attr(data-label);
         white-space: pre-wrap;
         /* allows \A or newlines to show */
         flex: 0 0 auto;
         font-weight: bold;
         color: #555;
     }

     .headline {
         font-size: 1.5rem;
     }
 }