@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css";
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --default_font:"Mukta", sans-serif;
    --title_font:"Raleway", sans-serif;
}


:root{
    --white: #fff;
    --black: #000;
    --gray: #2b3c56;
    --lite: #f1f1f1;
    --dark: #1d1e22;
    
    --yellow: #f5b409;
    --red: #f33e5d;
    --green: #9bd846;
    --blue: #029ef6;
    --orange: #ee712f;
    --pink: #ef5890;
    
    --primary: #5487fa;
    --primary_dark: ;
    --primary_lite: #131e4a;
    
    --secondary: ;
    --secondary_dark: ;
    --secondary_lite: ;
}



a{
    text-decoration:none !important;
    min-width: fit-content;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
}

a, button{
    transition:0.5s;
}

a{
    font-size:16px;
}

a{
    outline:none !important;
}


main{
    width:100%;
    overflow-x:auto;
    padding:1rem;
}

table{
    margin:auto;
    width:100%;
    overflow:hidden;
    background-color:var(--white);
    border-radius:10px;
    position:relative;
    border-collapse:collapse;
    z-index:1;
    color:var(--gray);
    white-space:nowrap;
   
}

tbody tr:not(:last-child){
    border-bottom:1px solid rgba(1,1,1,0.2);
}

th, td{
    padding:1rem;
    gap:10px;
    cursor:default;
}

td:last-child:hover a{
    color:var(--black);
}

thead{
    background-color:var(--primary_lite);
    
}

th{
    text-transform:uppercase;
    color: white;
}
.tabletd{
    background-color: #d3eaf9;
}
td{
    color: #2e2e2e;
}
.tabletd:hover{
    background-color:#f0f0f0;
}


table a{
    color:var(--gray);
}
#dyeing_product{
    margin-top: -80px;
}


/* Ensure table is responsive */
table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    border-radius: 10px;
    color: var(--gray);
}

/* Table cells styling */
th, td {
    padding: 0.8rem;
    text-align: left;
    
}
td{
    overflow:auto;
}

/* Responsive Table for Small Screens */
@media screen and (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
        width: 100%;
    }

    /* Keep headers visible with each row */
    thead {
        display: none;
    }

    tbody tr {
        margin-bottom: 10px;
        border: 1px solid rgba(1,1,1,0.2);
        background-color: var(--lite);
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Display headers inside each row */
    td {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px;
        font-size: 14px;
        text-align: left;
        width: 100%;
    }

    td::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        color: var(--primary);
        margin-right: 10px;
        flex-shrink: 0;
        min-width: 120px; /* Ensures consistent spacing for labels */
    }
}