.custom-gutter .col-lg-6,
.custom-gutter .col-sm-12 {
    padding-left: 4px;  
    padding-right: 4px;  
    padding-bottom: 4px;
}

/* General Body Styling */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0px;
    padding: 0px;
    background-color: #f4f8fb; 
    color: #333;
}

/* Header Section Styling */
header {
    background-color: #003f5c; 
    color: white;
    padding: 30px 20px;
    /* border-radius: 8px; */
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Professional shadow */
}

header h2 {
    font-size: 2em;
    font-weight: 600;
    margin: 0;
    color: #f1f1f1;
}

header p {
    font-size: 1.1em;
    margin-top: 8px;
    color: #d9e2ec; /* Lighter text for description */
}

/* Paragraph Styling */
p {
    padding: 0 20px; /* Add padding to align text inside <p> with other elements */
    margin: 15px 0;
}

/* Heading Styling */
h1 {
    text-align: center;
    color: #2c3e50; 
    margin-bottom: 20px;
    font-size: 1.8em;
    border-bottom: 2px solid #003f5c; 
    padding-bottom: 8px;
    font-weight: 500;
}

.card-title {
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 10px;
    color: #2c3e50; 
}

.card-body {
    padding: 9px;  
}

.card-text {
    font-size: 1em;
    margin-bottom: 20px;
    color: #6c757d; 
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

thead {
    background-color: #e9f0f1; 
    color: #312f2f;
}


th, td {
    padding: 6px 10px; /* Reduced padding for compact rows */
    font-size: 0.9em; /* Slightly smaller font size */
    line-height: 0.75; /* Reduced line height to minimize space */
    text-align: left;
    white-space: nowrap; /* Prevent text wrapping in table headers */
}

th {
    font-weight: 600; /* Bold text for headers */
    /* text-transform: uppercase;  */
    /* background-color: #006f7a;  */
    padding: 6px 10px; /* Increased padding for header row to make it stand out */
}

tbody tr:nth-child(odd) {
    background-color: #f8fafd; /* odd rows */
}

tbody tr:nth-child(even) {
    background-color: #edf7f9; /* even rows */
}

.table tbody tr:hover {
    background-color: #96a5aa; 
    color: #ffffff; 
    cursor: pointer;
}

/* Ensure tables fit within the card without overflowing */
.table {
    width: 100%;
    table-layout: auto; /* Allows columns to adjust automatically */
}

.table-wrapper {
    overflow-x: auto; /* Adds a horizontal scrollbar if needed */
}


/* Footer Styling */
footer {
    text-align: center;
    margin-top: 60px;
    font-size: 0.85em;
    color: #555;
    padding: 15px 0;
    border-top: 1px solid #e0e0e0;
}

footer p {
    margin: 10px 0;
    color: #7a7a7a;
    padding: 0 20px; /* Align footer <p> as well */
}


/* Oyiko styling */
/* General styling */

    /* Animated Header */
    .animated-header {
        background: linear-gradient(120deg, #8136d1, #3c7ae6);
        color: white;
        text-align: center;
        padding: 50px 20px;
        position: relative;
        overflow: hidden;
    }

    /* Animation Container */
    .animation-container {
        position: relative;
        z-index: 1;
    }

    /* Company Name */
    .company-name {
        font-size: 4rem;
        font-weight: bold;
        letter-spacing: 2px;
        color: white; /* Plain white color */
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); /* Optional subtle shadow for contrast */
    }

    /* Company Purpose */
    .company-purpose {
        font-size: 1.5rem;
        margin-top: 20px;
        font-style: italic;
        opacity: 0;
        animation: fadeInUp 2s ease-out 1s forwards;
    }

    /* Background Animations */
    .animated-header::before {
        content: '';
        position: absolute;
        top: -100px;
        left: -100px;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 10%, transparent 60%);
        animation: moveBackground 8s linear infinite;
        z-index: 0;
    }

/* Keyframes */
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes moveBackground {
        0% {
            transform: translate(0, 0) rotate(0deg);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }


/* 2nd header (not title) styling */
    .header-overview {
        background-color: #f4f6f8;
        padding: 40px 20px;
        /* border-bottom: 3px solid #6a11cb;  */
        text-align: center;
    }

    /* Header Title Styling */
    .header-title {
        font-size: 3rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
    }

    /* Header Description Styling */
    .header-description {
        font-size: 1.2rem;
        color: #555;
        line-height: 1.6;
        margin: 0 auto;
        max-width: 800px; /* Restrict width for better readability */
    }