.container{
    width: 1150px;
    margin: 5em auto;
    padding: 2em;
    background: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.organization-heading{
    text-align: center;
    padding-top: 1em;
}

.organization-name-border-buttom{
    border: 1px solid red;
    width: 25rem;
    margin: 2em auto;
    padding-top: 0;
    margin-top: 0.5em;

}




/* ==================================== office-bearers-table========================== */

table{
    width: 900px;
    box-shadow: -1px 12px 12px -6px rgba(0,0,0,0.5);
    margin: auto;
    margin-bottom: 3em;
}

table,td,th{
    padding: 20px;
    border: 1px solid lightgray;
    border-collapse: collapse;
    text-align: center;
}

td,th{
    font-size: 1rem;
    text-transform: uppercase;
    color:white;
}
th{
    font-size: 1rem;
    text-transform: uppercase;
    /* background: blue; */
    background-image: radial-gradient( circle 610px at 5.2% 51.6%,  rgba(5,8,114,1) 0%, rgba(7,3,53,1) 97.5% );
    color: white;
}

tr:nth-child(odd){
    background-color: #8EC5FC;
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

    cursor: pointer;
}
tr:nth-child(odd):hover{
    background: #C32BAC;
    
    
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 300ms ease-in;
}
tr:nth-child(even){
    background-color: #FF9A8B;
    background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
    cursor: pointer;
}

tr:nth-child(even):hover{
    background-color: #FFE53B;
    background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%); 
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 300ms ease-in;
}






/* ==============================media quary=================================== */

@media all and (max-width: 500px){
    .container{
        max-width: 90%;
    }
    table{
        width: 100%;
    }

}

@media(min-width: 501px) and (max-width: 968px){
    .container{
        max-width: 90%;
    }
    table{
        width: 100%;
    }
}