html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    height: 100vh;
    box-sizing: border-box;
}

.header {
    background: linear-gradient(-135deg, #11a7da, #016fbd);
    padding: 15px 0;
    width: 100%;
}

.container {
    max-width: 100%;
    margin: 0 auto;
}

.logo {
    max-height: 70px;
    margin-left: 50px;
}

.info-banner {
    margin: 0px 0px 10px 0px;
    padding: 50px 50px;
    color: #ffffff;
    background-image: url('../img/kyc-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.card {
    height: 100%;
    border-radius: 0.5rem;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

    .card.shadow {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.card-title {
    color: #016fbd;
}
/* Ensure card text is equal */
.card-body {
    display: flex;
    flex-direction: column;
    /*text-align: justify;*/
    justify-content: space-between;
}

code {
    font-size: 15px;
    font-weight: bold;
}
/* Hide the radio button */
.d-none {
    display: none;
}

/* Radio Button Styling */
.card-body input[type="radio"] {
    margin-right: 10px;
}

.card-body label {
    font-weight: bold;
    margin-bottom: 0;
}

/* Full-width container */
.container-fluid {
    padding: 0;
}

.card-body .row {
    margin: 0;
}

/* Ensure equal padding inside columns */
.col-md-4, .col-md-6 {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 1rem; /* spacing below cards on small screens */
}

.card-body .column-header {
    font-size: 1rem; /* Larger font size for column headers */
    font-weight: bold; /* Bold text for headers */
    margin-bottom: 10px; /* Space below the header */
}

/* Add space between image and text */
.card-body img {
    margin-right: 8px;
}

/* Ensure equal column heights */
.row {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    margin-left: -15px; /* counter padding in columns */
    margin-right: -15px;
}

li {
    padding-left: 30px;
}

/* Responsive Design */
@media (max-width: 1200px) { /* Large screens */
    .container {
        max-width: 960px;
    }

    .info-banner {
        padding: 50px 35px; /* Adjusted padding */
    }
}

@media (max-width: 992px) { /* Laptop screens */
    .container {
        max-width: 720px;
    }

    .info-banner {
        padding: 50px 25px;
    }
}

@media (max-width: 768px) { /* Mobile screens */
    .container {
        max-width: 540px;
    }

    .info-banner {
        padding: 50px 15px;
    }

    /* Center cards and make full width on small screens */
    .row {
        justify-content: center;
    }

    .col-md-4 {
        max-width: 90%;
        flex: 0 0 90%;
        margin-bottom: 1rem;
    }
}

/* Border for second column on larger screens */
@media (min-width: 769px) {
    .secondclm {
        border-left: 1px solid #d1d5db;
    }
}


/* hufihebhijfhreh  uh*/



.card-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.card-icon {
    border-radius: 6px;
    width: 234px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent; /* default border */
}

    /* Hide native radio button */
    .card-icon input[type="radio"] {
        display: none;
    }

/* Layout for image and name inline */
.card-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 5px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

    .card-content img {
        width: 40px;
        height: 40px;
    }

.name {
    font-weight: bold;
}

/* Highlight card when radio is checked */
.card-icon input[type="radio"]:checked + .card-content {
    border-color: #e28743;
    background-color: #eef6ff;
}


.card-icon input[type="radio"]:checked {
    /* Can't style parent directly, so use a trick */
}

    /* Instead, style label when child input is checked */
    .card-icon input[type="radio"]:checked + .card-content {
        /* card-content already styled */
    }

    .card-icon input[type="radio"]:checked + .card-content {
        box-shadow: 0 0 0 2px #dc3545;
    }

.card-icon:hover {
    transform: scale(1.05); /* Zoom in slightly */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}