* {
margin:0;
padding:0;
box-sizing:border-box;
}

body {
font-family:"Space Grotesk",sans-serif;
background:#fffbf4;
color:#73391b;
line-height:1.5;
}

a {
text-decoration:none;
color:inherit;
}

.container {
width:92%;
max-width:1100px;
margin:auto;
}

/* header */
.header {
border-bottom:1px solid #73391b;
background:#fffdfa;
}

.header__container {
min-height:72px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo {
font-size:22px;
font-weight:700;
}

.header__list {
display:flex;
gap:18px;
list-style:none;
}

.header__button {
padding:9px 14px;
border:1px solid #73391b;
background:#dec2e7;
font-size:13px;
font-weight:700;
}

/* hero */
.hero {
padding:42px 0;
}

.hero__container {
display:flex;
gap:20px;
}

.hero__content {
flex:1;
border:1px solid #73391b;
padding:26px;
background:#fffdfa;
}

.hero__badge {
display:inline-block;
border:1px solid #73391b;
background:#dec2e7;
padding:3px 8px;
font-size:12px;
margin-bottom:14px;
}

.hero__title {
font-size:44px;
margin-bottom:14px;
}

.hero__description {
font-size:17px;
margin-bottom:18px;
}

.hero__quote {
border:1px solid #73391b;
padding:14px;
margin-bottom:18px;
font-size:14px;
background:#fffdfa;
position:relative;
}

.hero__quote::before {
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background:#dec2e7;
}

.hero__quote span {
display:block;
margin-top:6px;
font-size:12px;
opacity:.7;
}

.btn {
display:inline-block;
padding:9px 14px;
border:1px solid #73391b;
font-size:13px;
font-weight:700;
}

.btn--black {
background:#73391b;
color:#fffdfa;
}

/* image */

.hero__media {
width:330px;
border:1px solid #73391b;
padding:10px;
background:#fffdfa;
}

.hero__img {
width:100%;
height:100%;
object-fit:cover;
border:1px solid #73391b;
min-height:340px;
}

/* about */
.about {
padding:40px 0;
}

.section-title {
font-size:34px;
margin-bottom:18px;
}

.about__grid {
display:flex;
gap:12px;
flex-wrap:wrap;
}

.about-card {
flex:1;
min-width:250px;
border:1px solid #73391b;
padding:16px;
background:#fffdfa;
}

.about-card h3 {
margin-bottom:10px;
font-size:18px;
}

.about-card ul {
padding-left:18px;
}

.about-card li {
margin-bottom:6px;
}

/* skills */

.skills {
padding:40px 0;
border-top:1px solid #73391b;
}

.skills__list {
max-width:600px;
}


.skill {
margin-bottom:14px;

}

.skill p {
margin-bottom:4px;
font-size:14px;
}

.skill__bar {
height:14px;
border:1px solid #73391b;
background:#fffdfa;
}

.skill__fill {
height:100%;
background:#d9d9d9;
}

.skills__scale {
display:flex;
justify-content:space-between;
font-size:12px;
opacity:.7;
margin-top:6px;
}

/* footer */
.footer {
border-top:1px solid #73391b;
background:#fffdfa;
}

.footer__container {
min-height:70px;
display:flex;
align-items:center;
justify-content:space-between;
}

/* adaptive */

@media(max-width:980px){
.hero__container {
flex-direction:column;
}

.hero__media {
width:100%;
}
}

@media(max-width:760px){
.about-card {
min-width:100%;
}



.footer__container {
flex-direction:column;
text-align:center;
padding:12px 0;
}

}