html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #F0F2F5
}
.custom-card-body {
    background-color: white;
    border-radius: 10px;
    width: 100%;
    max-width: 65%; /* Controls the max width of the card body */
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 150px; /* Define height as needed */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    .custom-card-body:hover {
        transform: translateY(-10px) scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }

a.text-decoration-none {
    text-decoration: none;
    display: block;
    color: inherit;
}

.image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo-content {
    display: flex;
    flex-direction: column; /* Ensure the logo and text stack vertically */
    align-items: flex-start; /* Align items to the left */
}

/* Logo settings */
.logo {
    max-width: 150px; /* Set an appropriate size for the logo */
    height: auto; /* Keep aspect ratio */
    margin: 20px; /* Add space between the logo and the text */
}

.welcome-text {
    text-align: center; /* Center the text itself */
    margin: 0;
    font-size: 1.25rem;
}

.centered-container {
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Vertically center content */
    align-items: center; /* Horizontally center content */
    width: 50%; /* Limit width to 50% of the screen */
    margin: auto; /* Center the container in the available space */
    text-align: center; /* Optional: add some padding from the top */
}
@media (max-width: 768px) {
    .centered-container {
        width: 70%; /* Increase width to 90% on mobile */
    }
}
.custom-input {
    height: 50px; /* Set the desired height */
    border-radius: 10px; /* Set border radius */
    font-size: 16px; /* Optional: Increase font size for better readability */
}

.text-overlay {
    width: 70%;
    height: 25%;
    position: absolute; /* Position it absolutely within the column */
    bottom: 20px; /* Adjust this value to move it above the bottom of the image */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center alignment */
    z-index: 1; /* Ensure the text appears above the image */
    color: white; /* Change the text color as needed */
    text-align: center; /* Center the text */
    padding: 10px 20px; /* Add some padding for better spacing */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better contrast */
    backdrop-filter: blur(8px); /* Apply blur effect to the background behind the text */
    border-radius: 10px; /* Optional: add some border radius for aesthetics */
}
@import url('https://fonts.googleapis.com/css2?family=Aladin&display=swap');

.certificate-title {
    font-family: 'Aladin';
    font-size: 60px;
    color: #4A4A4A; /* A refined dark gray color */
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.heading-underline {
    position: relative;
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center the heading */
    padding-bottom: 0.2em; /* Space between text and underline */
}

    .heading-underline::after {
        content: "";
        position: absolute;
        bottom: -5px; /* Adjust this value to change the distance between the text and the underline */
        left: 50%;
        transform: translateX(-50%);
        width: 35vw; /* 50% of the viewport width */
        height: 3px; /* Thickness of the line */
        background-color: #0F993E; /* Matches text color */
        border-radius: 2px; /* Optional rounded edges */
    }

.table {
    border-radius: 8px; /* Adjust radius as needed */
    overflow: hidden;
   
}
.custom-table {
    border: 1px solid #e0e0e0;
}
.table-bordered > :not(caption) > * > * {
    border-width: 0px;
}

.btn-custom-submit {
    background-color: #20DC4961
}
.nav-link.active {
    font-weight: bold;
    color: #37D39A !important;
    border-bottom: 2px solid #37D39A;
}