main {
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.364);
      padding: 2rem;
      width: 90%;
      max-width: 900px;
      max-height: 95vh;
      overflow-y: auto;
      position: relative;
    }
       html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
      background-color: #f0f2f5;
      display: flex;
      justify-content: center;
      transition: background-color 0.3s, color 0.3s;
    }
.tools-container {
            /* === YOUR SPECIFIC REQUIREMENTS === */
            width: 90%;  /* 90% of the viewport width */
            height: 30vh; /* 95% of the viewport height */
            /* ================================ */

            /* --- Grid Layout --- */
            display: grid;
            /* Create 3 columns of equal width */
            grid-template-columns: repeat(2, 1fr); 
            gap: 10px; /* Space between the grid items */
            
            padding: 3px;
            box-sizing: border-box; /* Ensures padding is included in the width/height */
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
        }

        /* Individual Tool Card Styling */
        .tool-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 20px;
            background-color: #fafafa;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
           
        }
        .tools-container  a{
             text-decoration: none;

        }

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

        /* Tool Image Styling */
        .tool-card img {
            max-width: 100%;
            height: 60%; /* Give a consistent height relative to the card */
            object-fit: contain; /* 'contain' fits the entire image without cropping */
            border-radius: 8px;
            margin-bottom: 20px;
        }

        /* Tool Heading Styling */
        .tool-card h2 {
            margin: 0 0 10px 0;
            font-size: 1.5rem;
            color: #0051ff;
            background-color: rgb(0, 0, 0);
            padding-left: 5%;
            padding-bottom: 2%;
            border-radius: 3%;
            padding-top: 2%;
            padding-right: 5%;
        }
.mainwebsite {
font-size: large;
font-weight: 600;
 border-bottom: 2px solid #007bff;
 color: red;
 padding-bottom: 10px;
}
  
        h1 {
      text-align: center;
      margin-top: 0;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 2px solid #007bff;
    }

        /* --- RESPONSIVE DESIGN FOR SMALLER SCREENS --- */
        @media (max-width: 768px) {
            body {
                /* On mobile, align to the top instead of center */
                align-items: flex-start;
                padding-top: 20px;
            }

            .tools-container {
                /* Stack the grid items into a single column */
                grid-template-columns: 1fr;
                /* Let height grow automatically with content */
                height: auto; 
                width: 90vw;
                gap: 20px;
                padding: 20px;
            }
            
            .tool-card img {
                height: 200px; /* Fixed height for images on mobile */
                object-fit: contain;
            }
        }