.portfolio-tags div {
font-size: 0.9rem;
border: 1px solid var(--borderColor);
padding: 0.4rem 1rem;
color: var(--secondaryTextColor);
}

/* Skills and Education */
#skills {
padding: var(--sectionPadding);
background: var(--secondaryBackgroundColor);
}

.skills-grid {
display: grid;
  /* grid-template-columns: 40% 60%; */
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
}

.education {
display: flex;
gap: 1rem;
}

.education .line {
padding: 0 0.7rem;
}

.education .line div {
width: 2px;
height: 100%;
background: var(--borderColor);
position: relative;
}

.education-info p {
margin: 0.6rem 0 1.4rem;
}

.education-years {
margin-bottom: 3rem;
}

/* The dot on the line */
.education .line div:before {
content: "";
width: 15px;
height: 15px;
background: var(--borderColor);
border-radius: 50%;
position: absolute;
left: -6px;
}

/* Right side of Skills */
.skills-list {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 1.5rem;
}

.skills-right ul {
line-height: 2rem;
padding: 0 1rem;
}

/* Contact Section */
#contact {
padding: var(--sectionPadding);
}

.contact {
display: grid;
  /* grid-template-columns: 1fr 1fr; */
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
}

.contact-form div {
margin-bottom: 1.4rem;
}

.contact-form input,
.contact-form textarea {
width: 100%;
padding: 0.75rem 1.3rem;
font-family: "Roboto", sans-serif;
background: var(--secondaryBackgroundColor);
border: 1px solid var(--borderColor);
border-radius: 3px;
resize: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: #9d9fa1;
}

.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border: 1px solid #7d7d7d;
}

.btn-submit {
width: 100%;
padding: 0.75rem 1.3rem;
background-color: var(--primaryIconColor);
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: 0.2s ease-in-out;
}

.btn-submit:hover {
background-color: var(--primaryIconColorHover);
}

/* Contact Section - Right Side */
.contact-item {
display: flex;
gap: 1.5rem;
margin-bottom: 2.5rem;
}

.contact-item-icon {
background: var(--thirdBackgroundColor);
  /* padding: 0.8rem 1rem; */
width: 53px;
height: 53px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
}

.contact-item-icon svg {
fill: var(--primaryIconColor);
}

.contact-item-detail h4 {
margin-bottom: 0.6rem;
}

/* Footer Section */
footer {
padding: 4rem 0;
background: var(--secondaryBackgroundColor);
text-align: center;
}

.footer-icons {
margin-bottom: 1rem;
}

.footer-icons a {
margin: 0 0.5rem;
}

.footer-icons svg {
fill: #3e3f40;
}

.footer-icons a:hover svg {
fill: #000;
}