/* General Styles */
    *{
		margin: 0;
		padding: 0;
	}
	
	body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
      background-color: #f9f9f9;
      color: #333;
    }
    /* Header */
    header {
      background: #5175a2;
      color: white;
      text-align: center;
      padding: 20px 0;
	  height: 51px;
    }
	
	
    header h1 {
      margin: 0;
      font-size: 2rem;
    }
    header p {
      margin: 5px 0 0;
      font-size: 1rem;
    }
    /* Navigation Bar */
    nav {
      background: #333;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0;
      flex-wrap: wrap; /* Allow wrapping for smaller screens */
    }
    nav a {
      color: white;
      text-decoration: none;
      margin: 0 15px;
      font-size: 1rem;
      white-space: nowrap; /* Prevent text from breaking into multiple lines */
    }
    nav a:hover {
      text-decoration: underline;
    }
    /* Hero Section */
    .hero {
      background: #d7dfea; /* Soft Pale Yellow Background */
      color: black; /* Black Text Color */
      text-align: center;
      padding:  20px;/* Reduced padding for smaller height */
	  height: 50px;
    }
    .hero h2 {
      font-size: 1.5rem; /* Slightly smaller font size */
      margin: 0;
	}
    
	
   
    
   
		 .main {
			 text-align:center;
			 margin: 0 auto;
		 }


		

		
		/* Tools Section */
		
		.ad-banner {
				  display: flex;
				  justify-content: center;
				  padding: 20px 0;
				}
			
		.tool-layout-wrapper {
				  display: flex;
				  justify-content: center;
				  align-items: flex-start;
				  gap: 20px;
				  padding: 20px;
				  flex-wrap: wrap;
				}

				.side-ad {
				  width: 160px;
				  min-width: 160px;
				  margin: ;
				}

		/* 4 columns tool grid */
				.tool-grid {
				  display: grid;
				  grid-template-columns: repeat(4, 1fr); /* 4 columns */
				  gap: 20px;
				  padding: 20px;
				  max-width: 1400px;
				  margin: 0 auto;
				  /* background: linear-gradient(45deg, #f0f8ff, #e6e6fa); /* Gradient */
				}

				.tool-card {
				  background: #f4f4f4;
				  padding: 20px;
				  border-radius: 8px;
				  text-align: center;
				  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
				  transition: transform 0.2s;
				}

				.tool-card:hover {
				  transform: scale(1.03);
				}

				.tool-card i {
				  font-size: 40px;
				  margin-bottom: 10px;
				  color: #007bff;
				}

				.click-here {
				  display: inline-block;
				  margin-top: 10px;
				  color: #007bff;
				  font-weight: bold;
				}

				.tool-card {
				  background: white;
				  padding: 30px 20px;
				  border-radius: 10px;
				  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
				  text-decoration: none;
				  color: #333;
				  transition: transform 0.2s ease, box-shadow 0.2s ease;
				}

				.tool-card:hover {
				  transform: translateY(-5px);
				  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
				}

				.tool-icon {
				  font-size: 40px;
				  margin-bottom: 15px;
				  color: #007bff;
				}

				/* Tools Section */
				.tool-card:nth-child(1),
				.tool-card:nth-child(5) {
				  background: linear-gradient(145deg, #d7dfea, #fff); /* Light Gradient 1 */
				}

				.tool-card:nth-child(2),
				.tool-card:nth-child(6) {
				  background: linear-gradient(145deg, #e1f0ff, #ffffff); /* Light Blue */
				}

				.tool-card:nth-child(3),
				.tool-card:nth-child(7) {
				  background: linear-gradient(145deg, #ffe4e1, #ffffff); /* Light Pink */
				}

				.tool-card:nth-child(4),
				.tool-card:nth-child(8) {
				  background: linear-gradient(145deg, #e6ffe6, #ffffff); /* Light Green */
				}
				/* Tools Section closed */

				@media screen and (max-width: 900px) {
				  .tool-grid {
					grid-template-columns: repeat(2, 1fr);
				  }
				}

				@media screen and (max-width: 600px) {
				  .tool-grid {
					grid-template-columns: 1fr;
				  }
				}
		
		
					
			

/* Footer */

   footer {
      background: #333;
      color: white;
      display: flex;
      justify-content: center; /* Center-align footer content */ 
      align-items: center;
      padding: 20px;
      flex-wrap: wrap; /* Allow wrapping for smaller screens */
    }
    footer p {
      margin: 0;
	  text-align: left;
	  font-size: 0.9rem;
      margin-right: 20px; /* Add spacing between copyright and links */
    }
    footer .footer-links {
      display: flex;
      gap: 15px; /* Space between links */
	  margin-left: 20px
    }
    footer .footer-links a {
      color: white;
      text-decoration: none;
      font-size: 0.9rem;
    }
    footer .footer-links a:hover {
      text-decoration: underline;
    }