/* ============================================================================
   homepage.css - homepage / directory / static pages
   ============================================================================
   Loaded by:  index.php, tools.php, 404.php, sitemap.php and every
               tool-list/*.php directory page
   Purpose:    .h1-welcome colorful heading, .app-box cards, .category-icon /
               .app-icon badges, .logo-image, and the HOMEPAGE variants of
               .button-style / .input-container.
   NOTE:       .button-style and .input-container here have DIFFERENT values
               from tool-input.css (used on tool pages). Do not merge these two
               files - whichever loads last would override the other.
   NOTE:       Category colours are driven ONLY by the section container class
               (.category-green|teal|blue|purple|orange|red|pink on
               .input-container). Both .category-icon and .app-icon inherit
               their colour from that container - do not add variant classes to
               the icon divs themselves.
   ============================================================================ */

.h1-welcome {
	font-family: 'Roboto', sans-serif;
	font-size: 36px !important;
	font-weight: 380;
	text-align: center; 
	margin-top: 15px;
}

.h1-welcome {
	/* Colorful Text */ 
	-webkit-background-clip: text;
    background-clip: text;
	background-image: linear-gradient(90deg,#7209d4, #198754, #2832d4, #00a5b2);
    color: #0000;
}


.h3-input-container{
	font-family: 'Roboto', sans-serif;
	font-size: 22px !important;
	text-align: center;
}

.input-container {
	margin: 20px auto;
	width: 82%;
	background-color: #fff;
	padding: 15px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}

.button-style {
	display: inline-block;
	background-color: #167d2e;
	color: white;
	font-weight: 500;
	text-decoration: none;
	padding: 10px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
  }

.button-style:hover {
	background-color: #1b9b3b;
	color: white;
  }
	
.app-container {
  display: flex;
}

.app-box {
  flex: 1;
  border: 1px solid #167d2e;
  background-color: #f9f9f9;
  padding: 16px;
  margin: 5px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  border-radius: 12px;
  transition: transform .25s ease-in-out, box-shadow .25s ease-in-out;
}

.app-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.app-box h3 {
  margin-top: 0;
  font-size: 18px;
  letter-spacing: 1.7px;
}

.app-box button {
  background-color: #167d2e;
  color: white;
  font-weight: 500;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.app-box button:hover {
  background-color: #1b9b3b;
}

.text-content-home {
	margin: 10px Auto;
	width: 98%;	
}
.logo-image {
	display: block;
	margin: auto;
	max-width:100%
}

.category-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin: 10px auto;
	border-radius: 50%;
	background-image: linear-gradient(135deg, #198754, #2ea34c);
	color: #fff;
	font-size: 26px;
	box-shadow: 0 6px 16px rgba(22, 125, 46, 0.35);
}

/* Category badge colours follow the section container class
   (.category-* on .input-container). Green is the base/default. */
.category-teal .category-icon {
	background-image: linear-gradient(135deg, #00a5b2, #2bc4cf);
	box-shadow: 0 6px 16px rgba(0, 165, 178, 0.35);
}

.category-blue .category-icon {
	background-image: linear-gradient(135deg, #2832d4, #4f6df5);
	box-shadow: 0 6px 16px rgba(40, 50, 212, 0.35);
}

.category-purple .category-icon {
	background-image: linear-gradient(135deg, #7209d4, #a855f7);
	box-shadow: 0 6px 16px rgba(114, 9, 212, 0.35);
}

.category-orange .category-icon {
	background-image: linear-gradient(135deg, #e67e22, #f5a623);
	box-shadow: 0 6px 16px rgba(230, 126, 34, 0.35);
}

.category-red .category-icon {
	background-image: linear-gradient(135deg, #dc3545, #f06574);
	box-shadow: 0 6px 16px rgba(220, 53, 69, 0.35);
}

.category-pink .category-icon {
	background-image: linear-gradient(135deg, #d63384, #ec6bab);
	box-shadow: 0 6px 16px rgba(214, 51, 132, 0.35);
}

.app-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background-color: #ebf1fa;
	color: #1e5db9;
	font-size: 20px;
}

/* Tool icon colours also follow the section container class, so each
   category's badge and tool icons share one accent colour. */
.category-green .app-icon {
	background-color: #e7f3eb;
	color: #198754;
}

.category-teal .app-icon {
	background-color: #dbf5f7;
	color: #1aa9b6;
}

.category-blue .app-icon {
	background-color: #e0eaf9;
	color: #2c65df;
}

.category-purple .app-icon {
	background-color: #f3ebfc;
	color: #7209d4;
}

.category-orange .app-icon {
	background-color: #fdf0e0;
	color: #d4880f;
}

.category-red .app-icon {
	background-color: #fbe4e7;
	color: #dc3545;
}

.category-pink .app-icon {
	background-color: #fce7f1;
	color: #d63384;
}

.category-indigo .category-icon {
	background-image: linear-gradient(135deg, #6610f2, #8c5cf7);
	box-shadow: 0 6px 16px rgba(102, 16, 242, 0.35);
}

.category-indigo .app-icon {
	background-color: #eee6fc;
	color: #6610f2;
}

@media only screen and (max-width: 600px) {
	.app-container {
		display: flex;
		flex-direction: column; }
	.app-box {
		padding: 20px 10px 20px 20px;
		margin: 10px 2px;}
	.input-container {
		width:92%;}
}