/* CSS Document */

h1 {
     font-size: 24px
}

h2 {
     font-size: 22px
}

h3 {
     font-size: 16px
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

ol{
     list-style: numberic;
	text-align: justify;
}

table {
    width: 100%; /* Full width */
    border-collapse: collapse; /* Collapse borders */
}

th, td {
    padding: 8px; /* Padding inside cells */
    text-align: left; /* Align text to the left */
	vertical-align: top;
}

td:first-child {
    width: 60%; /* First cell takes 60% */
}

td:last-child {
    width: 40%; /* Second cell takes 40% */
}

/* Responsive styles */
@media only screen and (max-width: 620px) {
    table {
        display: block; /* Allows scrolling */
        overflow-x: auto; /* Enable horizontal scrolling */
        white-space: nowrap; /* Prevent cells from wrapping */
    }
    
    th, td {
        display: block; /* Display cells as blocks */
        text-align: right; /* Align text to the right */
        position: relative; /* Position relative for data-label */
        padding-left: 50%; /* Space for data-label */
    }

    th::after, td::before {
        content: attr(data-label); /* Use data-label for headers */
        position: absolute;
        left: 10px; /* Space from the left */
        width: calc(50% - 20px); /* Width of data-label */
        padding-right: 10px; /* Space on the right */
        text-align: left; /* Align data-label text to the left */
    }
}

.navbar-form input {
     border: none !important;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 13px;
    font-size: 18px;
    color: #2e2d2e;
    text-transform: uppercase;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #1b5a8d;
}

.bigtitle {
    width: 100%;
    float: left;
    font-size: 32px;
    color: #282c47;
    padding-top: 10px;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
}

/* The red thing */
.bigtitle::after {		
    content: '';
    background-color: #ff5a58;
    position: absolute;
    width: 60px;
    height: 7px;
    left: -10px;
    top: 0; 
    border-radius: 100px;
}

.random-image-container {
    position: relative; /* Position relative to contain the absolute elements */
}

.overlay-text {
    position: absolute; /* Position absolute to overlay on the image */
    top: 80%; /* Center vertically */
    left: 25%; /* Center horizontally */
    transform: translate(-25%, -50%); /* Adjust position to truly center */
    color: white; /* Text color */
    font-size: 3.8em; /* Adjust font size as needed */
    text-align: left; /* Center text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Optional shadow for better visibility */
	font-weight: bold; /* Make text bold */
}

.transparent_background {
  background-color: rgba(128, 128, 128, 0.3); /* Grey with 50% transparency */
  padding: 20px; /* Optional: Adds some padding */
}