table {
    width: 700px;
    margin: 0 auto;
    border-collapse: separate;
    font-size: 14px;
}
 
th, td{
    padding: 12px;
    border: 1px solid black transparent;
    border-radius: 15px;
    color: black;
    text-align: center;
    vertical-align: middle;
    background-clip: padding-box;
}

th {
    font-size: 20px;
}

tr:nth-child(odd) th,
tr:nth-child(odd) td {
    background-color: #9eb2ea ;    
}

tr:nth-child(even) th, 
tr:nth-child(even) td {
    /* background-color: #acb9dc ;     */
    background-color: #d4ddf6 ;  
}

td.data {
    display: grid;
    gap: 8px;
    justify-items: center;
    border-radius: 15px; 
}

.data:has(span:only-child) {
    grid-template-columns: 1fr;
}

.data:has(span:nth-child(3)) { 
    grid-template-columns: repeat(3, 1fr); 
}

.data:has(span:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
}

.data span { 
    text-align: center;
    padding: 6px 10px;
    width: 100%;
}

#cap {
    text-align: center;
    font-size: 20px;
    color: #28375F;
    font-family: serif;
}

@media (max-width: 768px) {
    table {
    width: 100%;
    font-size: 14px;
    }
    .data {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (max-width: 480px) {
    th, td {
        padding: 8px;
        font-size: 12px;
    }

    .data {
        grid-template-columns: 1fr !important; 
    }

    .data span {
        font-size: 12px;
        padding: 4px 6px;
    }
}

/* styling for button */
.bg-breadcrumb .carousel-caption-2-content-btn {
    position: absolute;
    bottom: 30px;               
    right: 30px;                 
    justify-content: flex-start !important;
}

.bg-breadcrumb {
    position: relative;
}


.carousel-caption-2-content-btn a {
    margin-left: 0;
}

@media (max-width: 768px) {
    .bg-breadcrumb .carousel-caption-2-content-btn {
        position: static;
        margin-top: 20px;
        justify-content: center !important;
    }
}