.kits-1{
    background: linear-gradient(45deg, black, #61614C);
    border: 1px solid #61614C;
}

.btn-kits1{
    color: white;
    background: linear-gradient(30deg, #61614C, #303030);
    border: 1px solid #61614C;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits1:hover{
	bottom:0;
    background: linear-gradient(30deg,  #000000, #61614C);
    border-color: #61614C;
}

.kits-2{
    background: linear-gradient(45deg, black, #445EB0);
    border: 1px solid #445EB0;
}

.btn-kits2{
    color: white;
    background: linear-gradient(30deg, #445EB0, #303030);
    border: 1px solid #445EB0;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits2:hover{
	bottom:0;
    background: linear-gradient(30deg, #000000, #445EB0);
    border-color: #445EB0;
}

.kits-3{
    background: linear-gradient(45deg, black, #B0443C);
    border: 1px solid #B0443C;
}

.btn-kits3{
    color: white;
    background: linear-gradient(30deg, #B0443C, #303030);
    border: 1px solid #B0443C;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits3:hover{
	bottom:0;
    background: linear-gradient(30deg, #000000, #B0443C);
    border-color: #B0443C;
}

.kits-4{
    background: linear-gradient(45deg, black, #ACB039);
    border: 1px solid #ACB039;
}

.btn-kits4{
    color: white;
    background: linear-gradient(30deg, #ACB039, #303030);
    border: 1px solid #ACB039;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits4:hover{
	bottom:0;
    background: linear-gradient(30deg, #000000, #ACB039);
    border-color: #ACB039;
}

.kits-5{
    background: linear-gradient(45deg, black, #61614C);
    border: 1px solid #61614C;
}

.btn-kits5{
    color: white;
    background: linear-gradient(30deg, #61614C, #303030);
    border: 1px solid #61614C;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits5:hover{
	bottom:0;
    background: linear-gradient(30deg,  #000000, #61614C);
    border-color: #61614C;
}

.kits-6{
    background: linear-gradient(45deg, black, #445EB0);
    border: 1px solid #445EB0;
}

.btn-kits6{
    color: white;
    background: linear-gradient(30deg, #445EB0, #303030);
    border: 1px solid #445EB0;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits6:hover{
	bottom:0;
    background: linear-gradient(30deg, #000000, #445EB0);
    border-color: #445EB0;
}

.kits-7{
    background: linear-gradient(45deg, black, #B0443C);
    border: 1px solid #B0443C;
}

.btn-kits7{
    color: white;
    background: linear-gradient(30deg, #B0443C, #303030);
    border: 1px solid #B0443C;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits7:hover{
	bottom:0;
    background: linear-gradient(30deg, #000000, #B0443C);
    border-color: #B0443C;
}

.kits-8{
    background: linear-gradient(45deg, black, #ACB039);
    border: 1px solid #ACB039;
}

.btn-kits8{
    color: white;
    background: linear-gradient(30deg, #ACB039, #303030);
    border: 1px solid #ACB039;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits8:hover{
	bottom:0;
    background: linear-gradient(30deg, #000000, #ACB039);
    border-color: #ACB039;
}

.kits-9{
    background: linear-gradient(45deg, black, #61614C);
    border: 1px solid #61614C;
}

.btn-kits9{
    color: white;
    background: linear-gradient(30deg, #61614C, #303030);
    border: 1px solid #61614C;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits9:hover{
	bottom:0;
    background: linear-gradient(30deg,  #000000, #61614C);
    border-color: #61614C;
}


.kits-10{
    background: linear-gradient(45deg, black, #445EB0);
    border: 1px solid #445EB0;
}

.btn-kits10{
    color: white;
    background: linear-gradient(30deg, #445EB0, #303030);
    border: 1px solid #445EB0;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits10:hover{
	bottom:0;
    background: linear-gradient(30deg, #000000, #445EB0);
    border-color: #445EB0;
}

.kits-11{
    background: linear-gradient(45deg, black, #B0443C);
    border: 1px solid #B0443C;
}

.btn-kits11{
    color: white;
    background: linear-gradient(30deg, #B0443C, #303030);
    border: 1px solid #B0443C;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits11:hover{
	bottom:0;
    background: linear-gradient(30deg, #000000, #B0443C);
    border-color: #B0443C;
}

.kits-12{
    background: linear-gradient(45deg, black, #ACB039);
    border: 1px solid #ACB039;
}

.btn-kits12{
    color: white;
    background: linear-gradient(30deg, #ACB039, #303030);
    border: 1px solid #ACB039;
    width: 150px;
    height: 40px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .25s ease-in;
}

.btn-kits12:hover{
	bottom:0;
    background: linear-gradient(30deg, #000000, #ACB039);
    border-color: #ACB039;
}

/*------------------------------------------------*/
/* Collapsible kit content styling */
.kit-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.plan-card.expanded .kit-content {
    max-height: 500px; /* Adjust if your content is taller */
    transition: max-height 0.4s ease-in;
}
.kit-title {
    cursor: pointer;
    user-select: none;
}
.kit-title:hover {
    opacity: 0.8;
}

/* Ensure the grid container aligns everything nicely */
#kitsGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 100%;
    margin: 0 auto;
}

/* Give each kit card a fixed, uniform width so they wrap cleanly in 2x2 or 4-columns */
.kit-item {
    width: 300px; /* Adjust this width as needed for your design */
    flex: 0 1 400px;
    box-sizing: border-box;
}

/* Styling for the trigger button */
.toggle-btn {
    background-color: var(--primary);
    color: #ffffff;
    border: 1px solid #444;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    margin-bottom: 40px;
}

.toggle-btn:hover {
    background-color: #383838;
    border-color: #666;
}

/* Grid Container - Initially hidden */
.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 115px);
    grid-auto-rows: auto;
    gap: 30px 15px;
    opacity: 0;
    transform: translateY(-15px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.grid-container.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.grid-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
}

/* Individual grid cells */
.grid-item {
    width: 120px;
    height: 120px;
    background-color: #1a1a1a;
    border-radius: 4px;
    border: 1px solid #0b0b0b;
    overflow: hidden; /* Ensures images stay inside rounded corners */
    transition: background-color 0.2s;
}

.grid-item:hover {
    background-color: #242424;
}

/* Image styling to fit inside the grid cell */
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    display: block;
}

/* Description text below each box */
.grid-description {
    margin-top: 6px;
    font-size: 15px;
    color: #888888;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}