/* GeneratePress Site CSS */ /* Right sidebar */ 
.wp-block-categories {
	list-style: none;
	margin-left: 0;
}
.wp-block-categories li:not(last-child) {
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--base);
}
.wp-block-categories li a {
	font-size: 16px;
}

/* Box shadow */ 
.box-shadow {
	box-shadow: 0px 0px 25px -12px rgba(0,0,0,0.2);
} /* End GeneratePress Site CSS */


.gb-container.gb-container-622264d6 {
    display: none;
}


ul.popular-software-categories {
    list-style: none;
    margin-left: 15px;
}


.product-grid {
    display: flex;
    flex-wrap: wrap;
}

.product-block {
    width: 33.33%; /* 3 blocks per row */
    padding: 10px;
}

@media only screen and (max-width: 768px) { /* For tablets and mobiles */
    .product-block {
        width: 50%; /* 2 blocks per row */
    }
	

@media only screen and (max-width: 480px) { /* For mobiles */
    .product-block {
        width: 100%; /* 1 block per row */
    }
}
}

/* Adjust image sizes and other elements responsively */
img {
    max-width: 100%;
    height: auto;
}


#category-list {
    padding: 0;
	margin: 0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	
}

#category-list li {
    cursor: pointer;
    padding: 10px;
    

}

#category-list li:hover {
    background-color: #8976FD;
	color:#fff;
}





/* Home page top software*/
/* Side Navigation Bar Styling */
#category-list {
	color: black;
}

#category-list li {
    padding: 15px;
    border-bottom: 1px solid #ECECEC;
}

#category-list li.active {
    background-color: #8976FD;
    color: #fff;
	/* box-shadow: inset -2px -2px 4px 0 rgba(0, 0, 0, 0.25), inset 2px 2px 4px 0 rgba(0, 0, 0, 0.25), inset -5px -5px 10px 0 rgba(0, 0, 0, 0.25), inset 5px 5px 10px 0 rgba(0, 0, 0, 0.25);*/
	
}

#category-list {
    max-height: 607px; /* Adjust this height as needed to show the first 11 items */
    overflow-y: auto; /* Enables vertical scrolling for overflow content */
    list-style: none; /* Removes default list styling */
    margin: 0;
    padding: 0;
}

#category-list li {
    padding: 10px 15px; /* Adds spacing to the list items */
    cursor: pointer;
    white-space: nowrap; /* Prevents text from wrapping */
}

#category-list li:hover {
    background-color: #eeebff; /* Highlight item on hover */
	color: black;
}

/* Optional: Add a border and other styling for the list */
#category-list {
    border: 1px solid #ddd; /* Adds a border to the side menu */
    background-color: #fff; /* Sets the background color */
/*     scrollbar-width: thin; /* Makes the scrollbar thinner in Firefox */ */
}

#category-list::-webkit-scrollbar {
    width: 5px; /* Sets the scrollbar width in Webkit browsers */
}
#category-list::-webkit-scrollbar-track {
    background: #f0f0f0; /* Light background */
    border-radius: 10px;
}
#category-list::-webkit-scrollbar-thumb {
    background: #EEEBFF; /* Customizes the scrollbar color */
    border-radius: 10px; /* Adds rounded edges to the scrollbar */
}

#category-list::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(45deg, #5a0fb5, #1b6dff);
}

#category-dropdown {
    width: 100%; /* Full width */
    padding: 0px 10px; /* Adds spacing inside */
    font-size: 1.5; /* Larger font for better readability */
    color: #fff; /* Darker text color */
    background-color: #8976FD; /* Light gray background */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    appearance: none; /* Remove default browser styling */
    
    /* Add a custom dropdown arrow using background image */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;

    padding-right: 40px; /* Space for dropdown arrow */
    cursor: pointer; /* Add pointer cursor */
}

#category-dropdown:focus {
    border-color: #666; /* Highlight border on focus */
    outline: none; /* Remove default focus outline */
	border-radius: 5px 5px 0px 0px; /* change border on foocus */
	background-color: #EEEBFF; /* Change the color of the background on focus */
	color: black; /* Change the color of the text on focus*/
}
select#category-dropdown option {
    background-color: #fff; /* change the background color of the dropdown menu */
    color: #000000;  /* change the color of the text in dropdown menu */
}
	select#category-dropdown option:focus {
    background-color: #EEEBFF;     
}
select#category-dropdown option:hover {
    background-color: #EEEBFF; 
}

/* Grid Styling */
#software-grid {
    display: grid;
	gap: 1%;
    grid-template-columns: repeat(auto-fill, 	minmax(30%, 1fr));
}

.software-item {
    background-color: white; 
    border-radius: 5px; 
	border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    padding: 15px;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
	height: 300px;
	
}

.software-item img {
    width: 100%;
    height: 150px;
    object-fit: contain; 
}
.home-product-img {
    height: 160px;
}
.software-item h3 {
    font-size: 1.2em;
/*     overflow: hidden; */
    margin-bottom: 10px;
    line-height: 1.5em;
}

/* .rating-label {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px; 
    display: block; 
} */


.home-product-btns {
    display: flex;
	justify-content: space-evenly;
	width:100%
}

.home-product-btn-compare,
.home-product-btn-readmore {
		text-align:center;
		padding: 3px 8px;
		border-radius: 25px;
		border: 0.2px solid grey;
		box-shadow: 0 2px 6px 0px rgba(0, 0, 0, 0.1);
	    width: 100%;
}
.home-product-btn-compare:hover
{
	background: #f3f2f2;
}
.home-product-btn-readmore:hover {
	background: #9C87F5;
}
.product-btn-text {
    	font-size: 16px;
}
/* #EEEBFF*/
.home-product-btn-readmore {
    background: #8976FD;
	color: white;
	margin-left: 5px;
}


/* Responsive design adjustments category */
@media (max-width: 768px) {
    #software-grid {
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr)); 
    }
	#most-popular-solutions .wp-block-group__inner-container.is-layout-constrained.wp-block-group-is-layout-constrained {
		padding: 40px 15px 0px 15px;
	}
	select#category-dropdown {
		width: 100%;
		background-color: #8976FD;
		color: #fff;
		margin-bottom: 10px;
		border-radius: 5px;
		font-size: 1.5rem;
	}	
	select#category-dropdown:focus{
		border-radius: 5px 5px 0px 0px;
		background-color: #EEEBFF;
		color: black;
	}
	select#category-dropdown option {
    background-color: #fff;
    color: #000000;  
}
	select#category-dropdown option:focus {
    background-color: #EEEBFF;     
}
select#category-dropdown option:hover {
    background-color: #EEEBFF; 
}
	
}
/* Responsive design adjustments */
@media only screen and (max-width: 480px) {
    #software-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
		gap: 0;
    }
	.software-item {
		margin-bottom: 3%;

	}
}

.rating-container {
	display:flex;
	justify-content: space-between;
	align-items: flex-start;
}

.rating-label {
	line-height:1;
    font-size: 13px;
	justify-content: center;
}

/* Star rating */
.star-rating-homepage {
   	font-size: 18px;
    letter-spacing: 1.5px;
    background: linear-gradient(90deg, #fc0 calc(var(--rating) / 5 * 100%), #ccc calc(var(--rating) / 5 * 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	line-height: 1;
	vertical-align: middle;
}

.star-rating-homepage::before {
    content: "★★★★★";
}

.star-rating-and-text-box{
	display: flex; 
   	align-items: center;
	justify-content:center;
}

/* Just here if we wanna change font/size or add space between star and text*/
.rating-text {
 	margin-left: 3px;
	vertical-align: middle;
	font-size: 18px;
	line-height: 18px;
}

/* Mobile and Tablet styles 
@media (max-width: 768px) {
    #category-list {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: block; 
        position: relative; 
        background: #b3d9ff; 
        border: 1px solid #003366;
        padding: 10px;
        cursor: pointer;
    }

    #category-list:after {
        content: '';
        position: absolute;
        right: 10px; 
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-top-color: #003366; 
    }

    #category-list li {
        display: none; 
    }

    #category-list li.active {
        display: block;
    }
}

*/