/* ========================================
BASE (reset all basic html tags)
========================================== */


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,blockquote,th,td {
    margin: 0;
    padding: 0;
	line-height: 1.5em;
	text-decoration: none;
	border: none;
}
img { border: none; }

li {list-style: none;}

table {border-collapse: collapse; border-spacing: 0;}
address,caption,cite,code,dfn,em,strong,th,var, optgroup {font-style: inherit; font-weight: inherit;}
del, ins {text-decoration: none;}

abbr,acronym {border: 0; font-variant: normal;}
sup {vertical-align: baseline;}
sub {vertical-align: baseline;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}

pre, code {
			font:100.1% Monaco,"Andale Mono","Lucida Console","Bitstream Vera Sans Mono","Courier New",monospace,serif;
}
blockquote, pre {
		padding:0.25em 40px;
}
em {font-style: italic;}


/* ========================================
STRUCTURE (position, width, height, margin, padding, etc.)
========================================== */


.portfolio-container {
    background-color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
}
.main-content {
    background-color: #f8f7f4;
    display: flex;
    flex-direction: column;
}
.hero-section {
    background-color: #000;
    padding: 147px 222px;
}
@media (max-width: 991px) {
    .hero-section {
        padding: 100px 20px;
    }
}
.intro-text-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    font-size: 48px;
    flex-wrap: wrap;
}
@media (max-width: 991px) {
    .intro-text-wrapper {
        font-size: 40px;
    }
}
.greeting {
    color: #d0d3d8;
    font-weight: 400;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.name {
    color: #fff;
    font-weight: 700;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.bio-text {
    color: #d0d3d8;
    font-size: 22px;
    line-height: 38px;
    margin-top: 22px;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.work-section {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #1a1b1f;
    font: 700 16px "Plus Jakarta Sans", sans-serif;
}
.work-container {
    max-width: 1200px;
    width: 100%;
    padding: 60px 32px 100px;
    margin: auto;
}
.section-title {
    font-size: 24px;
    text-align: center;
}
.project-grid {
    display: flex;
    margin-top: 92px;
    gap: 92px 72px;
    flex-wrap: wrap;
    flex-direction: row;
}
.project {
    display: flex; 
    gap: 72px;
}
@media (max-width: 991px) {
    .project-grid {
        margin-top: 40px;
        flex-direction: column;
    }
    .project{
        flex-direction: column;
        gap: 16px;
    }
}
.project-image {
    width: 100%;
    max-width: 588px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 48px 34px -39px rgba(0, 0, 0, 0.15);
}
.project-content {
    width: 100%;
    max-width: 540px;
    padding: 32px 0;
}
.project-title {
    font-size: 32px;
    line-height: 1;
}
.project-description {
    line-height: 28px;
    margin-top: 20px;
}
.project-link {
    margin-top: 20px;
    color: #050505;
    font-weight: 500;
    line-height: 29px;
}
.divider {
    width: 100%;
    max-width: 996px;
    border-top: 1px solid #858c95;
    margin: 0 auto;
}
.contact-section {
    padding: 64px 0;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.contact-container {
   margin: 0 auto;
    padding: 0 24px;
    max-width: 996px
}
.contact-heading {
    font-size: 15px;
    line-height: 29px;
}
.contact-text {
    font-size: 21px;
    line-height: 40px;
    margin-top: 16px;
}
.contact-info {
    margin-top: 16px;
    color: #646b74;
    font: 20px "Inter", sans-serif;
    line-height: 40px
}
.contact-link {
    margin-top: 16px;
}
.site-header {
    background: #000;
    box-shadow: -3.215px 8.727px 17.914px 0 rgba(88, 89, 92, 0.3);
    position: absolute;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    /*padding: 16px 120px;*/
    font: 600 18px "Plus Jakarta Sans", sans-serif;
}
.site-footer {
    background-color: #000;
    min-height: 64px;
    width: 100%;
}
@media (max-width: 991px) {
    .site-header {
        padding: 0 20px;
    }
    .project-image,
    .project-content,
    .contact-container {
        max-width: 100%;
    }
}