@media screen and (max-width: 1400px) {
#profile {
height: 83vh;
margin-bottom: 6rem;
}
.about-containers {
flex-wrap: wrap;
}
#about,
#contact,
#projects,
#experience {
height: fit-content;
}
}

@media screen and (max-width: 1200px) {
#desktop-nav {
display: none;
}
#hamburger-nav {
display: flex;
}
#experience,
.experience-details-container {
margin-top: 2rem;
}
#profile,
.section-container {
display: block;
}
.arrow {
display: none;
}
section,
.section-container {
height: fit-content;
}
section {
margin: 0 5%;
}

/* Profile section pic */
.section__pic-container {
width: 275px;
height: 275px;
margin: 0 auto 2rem;
}

/* =============================================
ABOUT SECTION
============================================= */

.about-section-containers {
flex-direction: column !important;
align-items: center !important;
gap: 2rem !important;
width: 100% !important;
}

#about .section__pic-container {
width: 260px !important;
height: 260px !important;
margin: 0 auto !important;
flex-shrink: 0;
}

.about-pic {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2rem;
}

.about-details-container {
width: 100% !important;
align-items: center !important;
}

.about-containers {
margin-top: 0;
justify-content: center;
flex-wrap: wrap;
gap: 1.5rem;
width: 100%;
}

.details-container {
flex: 1 1 40%;
min-width: 180px;
max-width: 260px;
box-sizing: border-box;
}

.about-text {
padding-left: 0 !important;
text-align: center;
width: 100%;
box-sizing: border-box;
}

.text-container {
width: 100%;
text-align: center;
box-sizing: border-box;
}
}

@media screen and (max-width: 600px) {
#contact,
footer {
height: fit-content;
}
#profile {
height: fit-content;
margin-bottom: 0;
}
footer nav {
height: fit-content;
margin-bottom: 2rem;
}

/* =============================================
ABOUT SECTION — phone
============================================= */

.about-section-containers {
flex-direction: column !important;
align-items: center !important;
gap: 1.5rem !important;
width: 100% !important;
}

#about .section__pic-container {
width: 200px !important;
height: 200px !important;
margin: 0 auto !important;
}

.about-pic {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2rem;
}

.about-details-container {
width: 100% !important;
align-items: center !important;
}

.about-containers {
flex-direction: column !important;
align-items: center !important;
gap: 1rem;
width: 100%;
flex-wrap: nowrap;
}

.details-container {
width: 90% !important;
max-width: 100%;
flex: unset;
box-sizing: border-box;
}

.about-text {
padding-left: 0 !important;
text-align: center;
width: 100%;
box-sizing: border-box;
}

.text-container {
width: 100%;
text-align: justify;
box-sizing: border-box;
}

/* =============================================
EXPERIENCE SECTION — fix article overflow
============================================= */

.article-container {
justify-content: center;
gap: 1.2rem;
}

article {
width: auto;
justify-content: flex-start;
gap: 0.5rem;
font-size: 0.9rem;
}

article h3 {
font-size: 1rem;
word-break: break-word;
}

article p {
font-size: 0.85rem;
}

/* =============================================
CONTACT SECTION
============================================= */

.contact-info-upper-container {
flex-direction: column;
align-items: center;
padding: 1rem;
width: 90%;
box-sizing: border-box;
}

.contact-info-container {
margin: 0;
}

.contact-info-container p {
word-break: break-word;
font-size: 0.95rem;
}

/* =============================================
OTHER SECTIONS
============================================= */

.section__pic-container {
width: auto;
height: 46vw;
justify-content: center;
margin: 0 auto 1rem;
}

.btn-container,
.jimmy {
flex-wrap: wrap;
justify-content: center;
}

.nav-links li a {
font-size: 1rem;
}

.experience-sub-title {
font-size: 1.25rem;
}

.logo {
font-size: 1.5rem;
}

.nav-links {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}

.section__text__p2 {
font-size: 1.25rem;
}

.title {
font-size: 2rem;
}
}