body {
			font-family: Arial, sans-serif;
			background-color: #464445;
		}
		
		.container {
			width: 90%;
			margin: auto;
		}
		
		.catalog-title {
			text-align: left;
			color: white;
            margin-bottom: 3%;
            font-size: 30px;
            font-weight: 600;
        }
		
		
		.category-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
		}
		
		.category-box {
			border: 1px solid #ccc;
			background-color: white;
			border-radius: 20px;
            padding-bottom: 10px;
		}
        .category-box:hover {
            cursor: pointer;
			box-shadow: #ccc; 
			border: 2px solid #ccc;   
        }
		
		.category-image {
			width: 70%;
			margin: 0 auto;
		}
		
		
		.category-image img {
			width: 100%;
			border-radius: 10px;
		}
		
		
		.category-title {
			width: 10%;
			margin: auto;
		}
		.category-title h3:hover {
			color: red;
		}
        .category-title h3 {
            width: 100%;
            margin: auto;
            color: #464445;
            text-align: center;
           
        }
		
		.overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.8);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9999;
		}

		.overlay img {
			width: 200px;
			height: 200px;
			border-radius: 50%;
		}

        /* responsive */
@media (min-width:100px) and (max-width:200px) {
    .category-grid {
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			gap: 20px;
		}
        .catalog-title {
			text-align: center;
			color: white;
            margin-bottom: 3%;
            font-size: 10px;
            font-weight: 400;
        }
  
}
@media (min-width:300px) and (max-width:800px) {
 .category-grid {
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			gap: 20px;
		}
        .catalog-title {
			text-align: center;
			color: white;
            margin-bottom: 3%;
            font-size: 25px;
            font-weight: 400;
        }
		.category-title {
			width: 100%;
		}
        .category-title h3 {
			text-align: center;
		}
}
@media (min-width:700px) and (max-width:1200px) {
 .category-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
		}
        .catalog-title {
			text-align: center;
			color: white;
            margin-bottom: 3%;
            font-size: 30px;
            font-weight: 600;
        }
        .category-title {
			width: 100%;
		}
        .category-title h3 {
			text-align: center;
		}
  
}