@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
/* Button Container with 3 columns */
.button-container {
    display: flex;
    justify-content: space-between;
    width: 90%;            /* Use percentage width */
    max-width: 1200px;     /* Maximum width */
    margin: 0 auto;
    padding: 20px;
    gap: 20px;
    position: relative;    /* Ensure proper stacking */
    z-index: 3;           /* Keep above background */
}

/* Styling for each tool column */
.tool-column {
    font-family:'Titillium Web';
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Styling for column headings */
.tool-column h3 {
    font-size: 1.5em;
    color: #ffffff;
    margin-bottom: 10px;
    margin-top: 0px;
    text-align: center;
    text-transform: uppercase;
}

.column-divider {
    width: 90%;
    height: 2px;
    background-color: #ffffff;
    margin: 0 auto 15px auto;
}

/* Button Styles */
.btn {
    width: 100%;
    padding: 5px 20px;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    color: white; /* Add this to fix the visited link color */
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

/* SVG Icon styling */
.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="20" height="20" viewBox="0 0 24 24"><path d="M13.723 18.654l-3.61 3.609c-2.316 2.315-6.063 2.315-8.378 0-1.12-1.118-1.735-2.606-1.735-4.188 0-1.582.615-3.07 1.734-4.189l4.866-4.865c2.355-2.355 6.114-2.262 8.377 0 .453.453.81.973 1.089 1.527l-1.593 1.592c-.18-.613-.5-1.189-.964-1.652-1.448-1.448-3.93-1.51-5.439-.001l-.001.002-4.867 4.865c-1.5 1.499-1.5 3.941 0 5.44 1.517 1.517 3.958 1.488 5.442 0l2.425-2.424c.993.284 1.791.335 2.654.284zm.161-16.918l-3.574 3.576c.847-.05 1.655 0 2.653.283l2.393-2.389c1.498-1.502 3.94-1.5 5.44-.001 1.517 1.518 1.486 3.959 0 5.442l-4.831 4.831-.003.002c-1.438 1.437-3.886 1.552-5.439-.002-.473-.474-.785-1.042-.956-1.643l-.084.068-1.517 1.515c.28.556.635 1.075 1.088 1.528 2.245 2.245 6.004 2.374 8.378 0l4.832-4.831c2.314-2.316 2.316-6.062-.001-8.377-2.317-2.321-6.067-2.313-8.379-.002z"/></svg>');
}

.btn-separator {  /* Changed from .separator */
    width: 2px;
    height: 20px;
    background-color: #ffffff;
    align-self: center;
}

.tool-name {
    color: white;
    text-transform: uppercase;
    font-size: 16px;
}

.btn:visited {
    color: white;
}

/* Hover state */
.btn:hover {
    color: #bebebe;
    transform: scale(1.02);
}

.btn:hover .tool-name {
    color: #bebebe;
}

/* Intro box styling */
.intro-box {
    font-family:'Titillium Web';
    text-align: center;
    background-color: rgba(42, 42, 42, 0.5);
    padding: 20px;
    margin: 25px auto 25px auto; /* Center horizontally */
    color: #fff;
    text-align: left;
    font-size: 1rem;
    width: 65%;           /* Fixed width instead of max-width */
    max-width: 90%;         /* Responsive on mobile */
    position: relative;     /* Ensure proper stacking */
    z-index: 3;            /* Keep above background */
    max-width: 1170px;
}

.intro-box a {
    color: white;
}

.intro-box h1 {
    font-size: 1.5em;
    color: #ffffff;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.1em;
}

.intro-box h2 {
    font-size: 1.5em;
    margin-top: 1em;
    color: #ffffff;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.1em;
}

.intro-box ul {
    list-style-type: none;
    padding-left: 0;
}

.intro-box ul li {
    margin-bottom: 0.5em;
}

.intro-box .emphasis {
    font-size: 1.5em;
    margin-top: 1em;
    color: #ffffff;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.1em;
}