.about-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 120px 20px 80px;
}

/* hero */

.about-hero {
    margin-bottom: 80px;
}

.about-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 10px;
}

.about-tagline {
    font-size: 1.2rem;
    opacity: 0.7;
}
.about-page main {
    padding-top: 180px;
}

/* profile layout */

.about-profile {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 50px;
    margin-bottom: 80px;
}

.about-photo img {
    width: 100%;
    border-radius: 6px;
}

.about-bio p {
    line-height: 1.7;
    margin-bottom: 18px;
}

/* experience */

.about-experience {
    margin-bottom: 80px;
}

.about-experience h2 {
    margin-bottom: 20px;
}

.about-experience ul {
    list-style: none;
    padding: 0;
}

.about-experience li {
    margin-bottom: 10px;
}

/* skills */

.skills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.skills-grid span {
    border: 1px solid #ddd;
    padding: 8px 12px;
    font-size: 0.9rem;
}

/* tools */

.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.tools-grid span {
    border: 1px solid #ddd;
    padding: 8px 12px;
    font-size: 0.9rem;
}

/* contact */

.about-contact {
    margin-top: 80px;
}

.contact-button {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    border: 1px solid rgb(248, 244, 244);
    text-decoration: none;
    transition: 0.2s;
}

.contact-button:hover {
    background: rgb(250, 248, 248);
    color: white;
}

/* responsive */

@media (max-width:900px) {

    .about-profile {
        grid-template-columns: 1fr;
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}
.contact-section {
    margin-top: 80px;
    padding: 40px 0;
}

.contact-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.contact-list p {
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.contact-list a {
    color: #faf6f6;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: 0.2s;
}

.contact-list a:hover {
    border-bottom: 1px solid #f3efef;
}