.sortCard-01 {
    /* Base styles */
    height: 100px;
    width: 100%;
    padding: 0px 0px;
		margin-bottom: 24px;
    box-sizing: border-box;
/*    background-color: rgba(0, 255, 255, 0.27);*/

    /* Background layers */
    background-image:
        url("../img/100-left.png"),    /* Top layer - left cap */
        url("../img/100-right.png"),   /* Top layer - right cap */
        url("../img/100x100.png");     /* Bottom layer - repeating pattern */

    /* Positioning */
    background-position:
        left center,                   /* Left SVG sticks to edge */
        right center,                  /* Right SVG sticks to edge */
        20px center;                  /* Pattern starts 20px from left */

    /* Repeat behavior */
    background-repeat:
        no-repeat,                    /* Single left cap */
        no-repeat,                    /* Single right cap */
        repeat-x;                    /* Only repeat horizontally */

    /* Sizing */
    background-size:
        auto,                        /* Left cap natural size (29.7x100) */
        auto,                        /* Right cap natural size (29.7x100) */
        auto 100%;                   /* Pattern: natural width, full height */
    
    /* Magic clipping - creates the 20px gaps on both sides */
    background-origin: content-box;
    background-clip: content-box;
}



/* Title */
.sort-the-brand-title {
	padding-top: 22px;
	color: #060708;
	font-size: 72px;
	text-align: center;
/*	line-height: 60px;*/
}
h2 span {
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 0.15em;
  color: #666;
  position: relative;
  top: 0.1em;
}

@media (max-width: 1030px) {
.sort-the-brand-title {
	font-size: 66px;
	color: #060708;
	padding-top: 6px;
	text-align: center;
	line-height: 66px;
}


}
@media (max-width: 975px) {
.sort-the-brand-title {
	font-size: 59px;
	color: #060708;
	padding-top: 6px;
	text-align: center;
	line-height: 66px;
}


}
@media (max-width: 860px) {
.sort-the-brand-title {
	font-size: 51px;
	color: #060708;
	padding-top: 8px;
	text-align: center;
	line-height: 66px;
}


}

@media (max-width: 768px) {
.sort-the-brand-title {
	font-size: 47px;
	color: #060708;
	padding-top: 8px;
	text-align: center;
	line-height: 66px;
}


}

@media (max-width: 717px) {
.sort-the-brand-title {
	font-size: 38px;
	color: #060708;
	padding-top: 26px;
	text-align: center;
	line-height: 34px;
}


}
@media (max-width: 622px) {
.sort-the-brand-title {
	font-size: 36px;
	color: #060708;
	padding-top: 31px;
	text-align: center;
	line-height: 29px;
}


}
@media (max-width: 570px) {
.sort-the-brand-title {
	font-size: 28px;
	color: #060708;
	padding-top: 34px;
	text-align: center;
	line-height: 24px;
}


}
@media (max-width: 480px) {
.sort-the-brand-title {
	font-size: 28px;
	color: #060708;
	padding-top: 26px;
	padding-left: 22px;
	padding-right: 22px;
	text-align: center;
	line-height: 24px;
}


}


/* Container with max-width for structure */
.highlight-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 24px; /* Adjust this value for more or less vertical spacing */
    justify-content: center;
    padding: 0;
    list-style: none; /* Remove default bullets */
    width: 100%; /* Ensure full width */
		cursor: move;
}

/* Modern Pill Design */
/*
.highlight-pill {
    box-sizing: border-box;
    width: 100%; 
    max-width: 100%; 
    text-align: center; 
    display: flex; 
    justify-content: center;
    align-items: center;
		padding: 20px 18px; 
    font-weight: 500;
    font-size: 15px;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease-in-out;
    word-wrap: break-word; 
    white-space: normal; 
		line-height: 1.4;
}
*/

/* Modern Pill Design */
.highlight-pill {
    box-sizing: border-box;
    width: 100%; 
    max-width: 100%; 
    text-align: center;  
    display: flex;  
    justify-content: center;
    align-items: center;
    padding: 20px 18px; 
    font-weight: 500;
    font-size: 15px;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease-in-out;
    word-wrap: break-word; 
    white-space: normal; 
    line-height: 1.4;
/*		border-radius: 35px;*/
}


/* Hover Effect for Interactive Feel */
.highlight-pill:hover {
    transform: translateY(-2px);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .highlight-container {
        grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns */
        gap: 16px;
    }
    .highlight-pill {
        max-width: 100%; /* Ensure full width */
    }
}

@media (max-width: 768px) {
    .highlight-container {
        grid-template-columns: repeat(1, 1fr); /* Single column on small screens */
        gap: 12px;
    }
    .highlight-pill {
        max-width: 100%; /* Ensure full width */
        padding: 10px 16px;
        font-size: 14px;
    }
}
	
  .highlight-pill:nth-child(1) { background-color: #1c0f30; border: 4px solid #f6f2ff; }
  .highlight-pill:nth-child(2) { background-color: #31135e; border: 4px solid #e8daff; }
  .highlight-pill:nth-child(3) { background-color: #491d8b; border: 4px solid #d4bbff; }
  .highlight-pill:nth-child(4) { background-color: #6929c4; border: 4px solid #be95ff; }
  .highlight-pill:nth-child(5) { background-color: #8a3ffc; border: 4px solid #a56eff; }
  .highlight-pill:nth-child(6) { background-color: #a56eff; border: 4px solid #8a3ffc; color: black; }
  .highlight-pill:nth-child(7) { background-color: #be95ff; border: 4px solid #6929c4; color: black; }
  .highlight-pill:nth-child(8) { background-color: #d4bbff; border: 4px solid #6929c4; color: black; }
  .highlight-pill:nth-child(9) { background-color: #e8daff; border: 4px solid #6929c4; color: black; }
  .highlight-pill:nth-child(10) { background-color: #f6f2ff; border: 4px solid #6929c4; color: black; }
  
  .highlight-pill:not(:nth-child(-n+10)) {
/*    background: linear-gradient(135deg, #000000, #000000);*/
		background: #3F3F3F;
    border: 4px solid #777;
    color: white;
		
		    /* Background image */
    background-image: url('../img/grip-grab.svg');
    background-repeat: no-repeat;
    background-position: right center; 
    background-size: auto 60%; 
  }