/* Additional styles for skills page */
.skill-category {
    margin-bottom: 40px;
}

.skill-category h3 {
    margin-bottom: 20px;
    color: #ff6347; /* Bright color for the category titles */
}

/* Skills Section: Floating box styles for each skill */
.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between; /* Ensure even spacing between skills */
}

.skill {
    flex: 1 1 calc(50% - 20px); /* Each skill takes up half the width minus the gap */
    background: #ffffff; /* White background for contrast */
    padding: 20px;
    border-radius: 15px; /* Rounded corners for the card-like look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for floating effect */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth hover transition */
    position: relative;
}

/* Hover effect to lift the skill box and deepen the shadow */
.skill:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Deepen shadow on hover */
}

/* Icon styles for skill headings */
.skill .icon {
    font-size: 40px;
    margin-bottom: 10px;
    color: #4CAF50; /* Keep the icon green to visually tie in with success and skills */
}

/* Soft Skills Section */
.soft-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between; /* Ensure soft skills are well spaced */
}

.soft-skill {
    flex: 1 1 calc(33.333% - 20px); /* Each soft skill takes up a third of the width */
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.soft-skill:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Grid layout for Tools and Technologies */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid with minimum box size */
    gap: 20px; /* Space between each grid item */
}

/* Elevated rounded boxes for tools and technologies */
.skill {
    background: #ffffff; /* White background for contrast */
    padding: 20px;
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for floating effect */
    margin-bottom: 20px; /* Space between each category */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.skill h4 {
    color: #ff6347; /* Same color as the headings for consistency */
    margin-bottom: 10px;
}

.skill ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0;
}

.skill ul li {
    padding: 5px 0; /* Padding between list items */
    font-size: 16px;
}

.skill:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Deepen shadow on hover */
}

/* Tool Icons - If Needed */
.tool-icons img {
    width: 40px;
    margin-right: 10px;
}