/* imported fonts */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@100..900&family=Quicksand:wght@300..700&family=Russo+One&display=swap');

/* akira expanded */
@font-face {
    font-family: 'Akira Expanded';
    src: url('../fonts/AkiraExpanded.otf') format('opentype');
}

/* nexa bold */
@font-face {
    font-family: 'Nexa Bold';
    src: url('../fonts/NexaBold.otf') format('opentype');
}

/* global variables */
:root {
    --primary-color: #1B879F;
    --secondary-color: #D7C5B2;
    --tertiary-color: #F5EDE3;
    --quaternary-color: #AE8C66;
    --khaki: #C4B9AB;
    --dark-khaki: #938C82;
    --white: #FFFFFF;
}

/* customized style when texts are highlighted */
::selection {
    background-color: #80B3BB;
    color: var(--tertiary-color);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lexend Exa', sans-serif;  /* set default font */
    scroll-behavior: smooth;
    z-index: 2;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;  /* take up the full height of the viewport */
}

main {
    flex-grow: 1;
    background-color: var(--secondary-color);
    position: relative;
    overflow: hidden;
}

/* ------------------------- [GENERAL STYLES] ------------------------- */
button {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.section-title {
    font-size: 2.25rem;
    padding: .5rem 1rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 900;
    font-family: 'Akira Expanded', sans-serif;
}

.two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2 columns with equal width */
    align-items: center;
    gap: 1rem;
    max-width: 1024px;
    margin: 0 auto;
}

.padding-top {
    padding-top: 7rem;  /* add space at the top */
}

a {
    text-decoration: none;
}

.text-right {
    text-align: right;
}

/* reference: https://wavier.art/ */
/* top waves */
.wave-top-1 {
    position: relative;
}

.wave-top-1::before {
    content: "";
    width: 100%;
    height: 41px;
    position: absolute;
    bottom: -0.3%;
    left: 0;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 41vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 22L33 19C82 13 133 14 200 29C267 44 333 67 400 70C467 74 533 59 600 40C667 22 733 0 800 0C867 0 933 22 1000 29C1067 37 1133 29 1167 26L1200 22V134H1167C1133 134 1067 134 1000 134C933 134 867 134 800 134C733 134 667 134 600 134C533 134 467 134 400 134C333 134 267 134 200 134C133 134 67 134 33 134H0V22.332Z' fill='%231b879f'/></svg>");
}

.wave-top-2 {
    position: relative;
}

.wave-top-2::before {
    content: "";
    width: 100%;
    height: 62px;
    position: absolute;
    bottom: -0.3%;
    left: 0;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 51vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 22L33 19C82 13 133 14 200 29C267 44 333 67 400 70C467 74 533 59 600 40C667 22 733 0 800 0C867 0 933 22 1000 29C1067 37 1133 29 1167 26L1200 22V134H1167C1133 134 1067 134 1000 134C933 134 867 134 800 134C733 134 667 134 600 134C533 134 467 134 400 134C333 134 267 134 200 134C133 134 67 134 33 134H0V22.332Z' fill='%237fb3bb'/></svg>");
}

.animate-wave::before {
    animation: wave 10s linear infinite;
}

/* Adjust the backrgound position to make a wave effect */
@keyframes wave {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

/* bottom waves */
.wave-bottom-1 {
    position: relative;
}

.wave-bottom-1::before {
    content: "";
    width: 100%;
    height: 41px;
    position: absolute;
    left: 0;
    transform: rotate(180deg);
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 41vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 22L33 19C82 13 133 14 200 29C267 44 333 67 400 70C467 74 533 59 600 40C667 22 733 0 800 0C867 0 933 22 1000 29C1067 37 1133 29 1167 26L1200 22V134H1167C1133 134 1067 134 1000 134C933 134 867 134 800 134C733 134 667 134 600 134C533 134 467 134 400 134C333 134 267 134 200 134C133 134 67 134 33 134H0V22.332Z' fill='%231b879f'/></svg>");
}

.wave-bottom-2 {
    position: relative;
}

.wave-bottom-2::before {
    content: "";
    width: 100%;
    height: 62px;
    position: absolute;
    left: 0;
    transform: rotate(180deg);
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 51vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 22L33 19C82 13 133 14 200 29C267 44 333 67 400 70C467 74 533 59 600 40C667 22 733 0 800 0C867 0 933 22 1000 29C1067 37 1133 29 1167 26L1200 22V134H1167C1133 134 1067 134 1000 134C933 134 867 134 800 134C733 134 667 134 600 134C533 134 467 134 400 134C333 134 267 134 200 134C133 134 67 134 33 134H0V22.332Z' fill='%237fb3bb'/></svg>");
}

.wave-space {
    background-color: var(--primary-color);
    padding: 2rem;
}

/* reference: https://stackoverflow.com/questions/58541438/css-animated-wavy-line-not-displaying-properly-in-chrome */
/* curly lines */
.wavy-line {
    width: 50%;
    height: 50px;
    overflow: hidden;
    transform: translateY(-10px);
    position: relative;
}

.wavy-line.full-width {
    width: 95%;
    max-width: 1024px;
    margin: auto;
    transform: translateY(10px);
}

.wavy-line:before {
    content: attr(data-text);
    position: absolute;
    top: -35px;
    color: rgba(0, 0, 0, 0);
    width: calc(100% + 27px);
    font-size: 3em;
    text-decoration-style: wavy;
    text-decoration-color: #145A65;
    text-decoration-line: underline;
}

.wavy-line-white:before {
    text-decoration-color: var(--tertiary-color);
}

/* leaf image in background */
.top-leaf {
    position: absolute;
    top: 5rem;
    left: -100px;
    z-index: 1;
    width: 200px;
}

.bottom-leaf {
    position: absolute;
    bottom: -50px;
    right: -80px;
    z-index: 1;
    width: 200px;
}

/* ------------------------- [NAVIGATION BAR] ------------------------- */
header {
    position: fixed;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    text-align: center;
}

/* putting the header on top of all elements */
header, header * {
    z-index: 3;
}

header nav {
    display: inline-block;
    width: auto;
    padding: 0.75rem 1.75rem;
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 2rem;
}

header nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* nav links */
header nav ul li a {
    display: inline-block;
    color: var(--secondary-color);
    font-size: 0.85rem;
    font-family: 'Akira Expanded', sans-serif;
    text-transform: uppercase;
    padding: 0.25rem 1.5rem;
    border-radius: 2rem;
    color: var(--primary-color);
    font-weight: 700;
    transition: background-color 0.3s ease;
}

/* active nav link style */
header nav ul li a.active {
    background-color: var(--tertiary-color);
    color: var(--primary-color);
}

/* hover nav link style */
header nav ul li a:hover {
    background-color: var(--tertiary-color);
}

/* dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: inline-block;
}

.dropdown-content {
    display: none;  /* hide the submenu by default */
    position: absolute;
    left: -1.5rem;
    right: -1.5rem;
    background-color: rgba(255, 255, 255);
    z-index: 3; /* ensure it appears above other elements */
    border-radius: .5rem;
}

.dropdown:hover .dropdown-content {
    display: block; /* show the submenu on hover */
}

.dropdown-content li {
    padding: 0.5rem;
}

.dropdown-content li a {
    color: var(--primary-color);
}

/* on hover for submenu items */
.dropdown-content li a:hover {
    background-color: var(--tertiary-color);
}

/* ------------------------- [FOOTER] ------------------------- */
footer {
    background-color: var(--quaternary-color);
    color: var(--tertiary-color);
    text-align: center;
    padding: 0.75rem;
}

footer p {
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* ------------------------- [HOME] ------------------------- */
/* --- hero section --- */
#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* setting the background */
    color: var(--tertiary-color);
    background-color: var(--primary-color); /* fallback color */
    background-image:
        /* gradient */
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 75%, #C7BCAF 100%),
        /* image/gif */
        url('../images/home/hero-bg.gif');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

#hero-title {
    font-size: 5rem;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: .25rem;
    color: var(--white);
    font-family: 'Akira Expanded', sans-serif;
}

#hero-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--white);
    font-family: 'Nexa Bold', sans-serif;
}

#hero-btn {
    position: relative;
    overflow: hidden;
    background-color: var(--primary-color);
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.5rem 1.75rem;
    border-radius: .8rem;
    font-family: 'Akira Expanded', sans-serif;
}

#hero-btn::after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    transform: translateY(100%);
    background: url('../images/home/btn-hover.png');
    transition: transform 0.3s ease;
}

#hero-btn:hover::after {
    transform: translateY(0);
}

/* --- learning outcomes section --- */
#learning-outcomes {
    background: linear-gradient(#C7BCAF, var(--secondary-color));
    padding: 3rem 0;
}

/* image container */
#image-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);  /* 5 columns with equal width */
    gap: 1rem;
    max-width: 1024px;
    margin: 5rem auto 0rem;
}

#image-gallery figure {
    width: 100%;
    position: relative;
    transition: transform 0.3s ease;
}

#image-gallery figure a {
    display: block;
}

/* when the shell is hovered */
#image-gallery figure:hover {
    transform: translateY(-0.5rem);
    z-index: 1;
}

#image-gallery figure img {
    width: 100%;
    filter: drop-shadow(4px 3px 2px rgba(0, 0, 0, 0.4));
}

#image-gallery figure figcaption {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    right: 1.5rem;
    transform: translateY(-50%);
    font-size: 0.75rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--tertiary-color);
    cursor: pointer;
}

/* --- about me section --- */
#about-me {
    background-color: var(--primary-color);
    position: relative;
    margin-top: 3rem;
    padding-bottom: 3rem;
}

/* image on the left side */
#about-me figure {
    text-align: center;
    padding: 0 1rem;
}

#about-me figure img {
    width: 100%;
    max-width: 350px;
    border-radius: .5rem;
}

/* article on the right side */
#about-me article h2 {
    font-size: 6rem;
    text-transform: uppercase;
    color: var(--secondary-color);
    font-family: 'Akira Expanded', sans-serif;
    text-align: center;
}

#about-me article p {
    font-size: 0.9rem;
    text-align: justify;
    color: var(--secondary-color);
    font-weight: 400;
}

#skills-interests {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2 columns with equal width */
    gap: 1rem;
    margin-top: 2rem;
}

.skills-interests-title {
    font-family: 'Akira Expanded', sans-serif;
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

#skills-interests article {
    text-align: center;
}

#skills-interests article figure {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;   /* spacing between items */
}

#skills-interests article figure img {
    max-width: 23%;
}

/* a slightly larger width for interests icons */
#skills-interests article#interests figure img {
    max-width: 24%;
}

/* ------------------------- [PROJECTS] ------------------------- */
#projects-container {
    background-color: var(--tertiary-color);
}

#projects .two-columns {
    padding: 3rem 1rem;
}

/* image */
#projects .square-img-container {
    display: block;
    overflow: hidden;
    text-align: center;
}

#projects .square-img-container img {
    width: 100%;
    background-color: var(--khaki);
    max-width: 300px;
    aspect-ratio: 1/1;
    border-radius: .75rem;
}

/* article */
.proj-info {
    padding: 1rem;
}

.proj-title {
    font-size: 1.75rem;
    text-transform: uppercase;
    color: #145A65;
    font-family: 'Akira Expanded', sans-serif;
    margin-bottom: 1rem;
}

.proj-info .holder {
    width: 50%;
    position: relative;
    bottom: -0.75rem;
}

.proj-desc {
    font-size: 0.9rem;
    text-align: justify;
    color: #145A65;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.proj-more-btn {
    position: relative;
    display: inline-block;
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.5rem 1.75rem;
    border-radius: 1rem;
    overflow: hidden;

    transition: background-color 0.3s ease;
}

.proj-more-btn::after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-image: linear-gradient(to right, rgba(77, 157, 174, 0), #4D9DAE);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.proj-more-btn:hover::after {
    opacity: 1;
}

.colored-proj {
    background-color: var(--primary-color);
    color: var(--tertiary-color);
    margin: 2rem 0;
}

/* setting the font color for all children */
.colored-proj * {
    color: var(--tertiary-color);
}

.colored-proj .proj-more-btn {
    border-color: var(--tertiary-color);
    color: var(--primary-color);
    background-color: var(--tertiary-color);
}

.colored-proj .proj-more-btn:hover {
    background-color: var(--tertiary-color);
    color: var(--primary-color);
}

.colored-proj .square-img-container img {
    background-color: rgba(20, 90, 101, 0.32) !important;
    border: 3px solid #1B879F !important;
}

/* ------------------------- [SPECIFIC PROJECT] ------------------------- */
/* project introduction */
#project-container {
    background-color: #4D9DAE;

    display: flex;
    flex-direction: column;
}

.project-info {
    padding: 1rem;
}

.project-title {
    font-size: 2.25rem;
    text-transform: uppercase;
    color: var(--tertiary-color);
    font-family: 'Akira Expanded', sans-serif;
    margin-bottom: 1rem;
}

.project-desc {
    font-size: 1rem;
    text-align: justify;
    color: var(--tertiary-color);
    font-weight: 400;
    margin-bottom: 1.5rem;
}

/* image */
#project-top .square-img-container {
    display: block;
    text-align: center;
    margin: 0 1rem;
}

#project-top .square-img-container img {
    width: 100%;
    height: 100%;
    max-width: 400px;
    aspect-ratio: 16/9;
    background-color: var(--primary-color);
}

/* project information */
#project-bottom {
    background-color: var(--primary-color);
    margin-top: 3rem;
    flex: 1;
    display: flex;  /* fill the remaining space */
    flex-direction: column;
}

#more-info {
    background-color: var(--tertiary-color);
    width: 95%;
    max-width: 1024px;  /* limit the width */
    margin: 1rem auto 0;    /* center the content */
    padding: 2rem 3rem 1rem;
    border-top-left-radius: 1.75rem;
    border-top-right-radius: 1.75rem;
    flex: 1;
}

#more-info h2 {
    margin-bottom: 1rem;
}

#more-info .title {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--primary-color);
    font-family: 'Akira Expanded', sans-serif;
    margin-bottom: 1rem;
}

#more-info .desc {
    text-align: justify;
    color: var(--primary-color);
    font-weight: 300;
    margin-bottom: 1.5rem;
}

#more-info .desc a {
    color: #52DEF4;
    text-decoration: underline;
    font-weight: 400;
    transition: all 0.3s ease;
}

#more-info .desc a:hover {
    color: var(--primary-color);
    transform: scale(1.5) !important;
    background-color: var(--secondary-color);
}

#project-bottom .holder {
    position: relative;
    bottom: -0.8rem;
}

/* ------------------------- [OUTCOMES] ------------------------- */
#outcomes-container {
    background-color: var(--tertiary-color);
    display: flex;
    flex-direction: column;
}

.outcome-top,
.outcome-bottom {
    max-width: 1024px;
    width: 95%;
    margin: 1rem auto 0;
}

.outcome-desc {
    text-align: center;
    max-width: 700px;
    margin: 1rem auto 0;
    color: #145A65;
    font-weight: 700;
    font-size: 1.5rem;
}

#outcomes-container .holder {
    width: 95%;
    max-width: 1024px;
    margin: 3rem auto 0;
}

.outcome-more-info {
    text-align: justify;
    color: var(--primary-color);
}

.outcome-bottom {
    padding-bottom: 5rem;
    flex: 1;
}

.outcome-bottom section {
    margin-top: 2rem;
}

.outcome-title {
    background-color: #145A65;
    display: inline-block;
    padding: .5rem 2.5rem;
    border-radius: 2rem;
    color: var(--tertiary-color);
    font-family: 'Lexend Exa', sans-serif;
    text-transform: uppercase;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.evidences-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.evidences-container figure {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--primary-color);
    cursor: pointer;
}

.evidences-container img {
    opacity: 0.5;

    transition: opacity 0.3s ease;
}

.evidences-container figure.active img,
.evidences-container figure:hover img {
    opacity: 1;
}

.evidences-container figure:hover figcaption {
    font-weight: 500;
    color: #145A65;
    transition: color 0.3s ease;
}

.evidences-container figure.active figcaption {
    font-weight: 800;
    color: #145A65;
}

.evidence {
    background-color: var(--primary-color);
    padding: 0 1rem 6rem;
    position: relative;
    display: none;
}

/* scroll to top style */
.evidence .scroll-to-top-btn {
    display: none;
    background-color: var(--secondary-color);
    font-size: 1.5rem;
    color: var(--primary-color);
    padding: .25rem .5rem;
    border-radius: .25rem;
    transition: background-color 0.3s ease;
    /* position at the bottom right of the screen */
    position: fixed;
    bottom: 3rem;
    right: 1rem;
    /* appear on top of everything */
    z-index: 3;
}

.evidence .scroll-to-top-btn:hover {
    background-color: var(--tertiary-color);
}

.evidence .scroll-to-top-btn.show {
    display: block;
}

.evidence .container {
    max-width: 1024px;
    margin: 0 auto;
}

/* only show when there is a classname .show */
.evidence.show {
    display: block;
}


/* close button */
.close-btn {
    position: absolute;
    right: 2rem;
    top: -3rem;
}

.close-btn img {
    width: 40px;
}

.evidence .section-title {
    color: var(--tertiary-color);
}

.evidence h3 {
    color: var(--tertiary-color);
    font-size: 1.5rem;
}

.evidence h4 {
    color: var(--tertiary-color);
    font-size: 1.1rem;
    margin-bottom: 1.3rem;
}

.evidence h4 a {
    color: #00FFFF;
    text-decoration: underline;
}

.evidence h4 a:hover {
    color: #33CCCC;
}

.evidence-desc {
    color: var(--tertiary-color);
    text-align: justify;
    font-weight: 300;
    line-height: 1.5rem;
    margin: 1.3rem auto;
}

.evidence-desc ul {
    padding-left: 2rem;
    margin: 0;
}

.evidence-desc li {
    margin-bottom: 0.5rem;
}

.evidence-desc a {
    color: #00FFFF;
    text-decoration: underline;
}

.evidence-desc a:hover {
    color: #33CCCC;
}

/* reduce margin when .evidence-desc follows an h3 */
.evidence h3 + .evidence-desc {
    margin-top: 0.8rem;
}

.evidence-image-container {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin: 1.3rem auto;
    padding: 10px;  /* add padding to create space around content */
    overflow-x: auto;   /* enable horizontal scrolling */
    overflow-y: hidden; /* hide vertical scrolling */
    white-space: nowrap; /* prevent wrapping of content */
    height: 320px;
}

/* reduce margin when .evidence-image-container follows an h3 */
.evidence h3 + .evidence-image-container {
    margin-top: 0.8rem;
}

/* WebKit browsers styling */
.evidence-image-container::-webkit-scrollbar {
    width: thin;    /* width of vertical scrollbar */
}

.evidence-image-container img {
    background-color: var(--tertiary-color);
    border-radius: .5rem;
    height: 100% !important;
}

.evidence-image-container img:last-child {
    margin-right: 0 !important; /* remove the margin for the last image in the scroll container */
}

/* ------------------------- [CONTACT] ------------------------- */
#contact-container {
    background-color: var(--primary-color);
    background-image:
        /* gradient */
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 75%, #C7BCAF 100%),
        /* image/gif */
        url('../images/home/hero-bg.gif');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;

    /* to make the first child element consume all the possible space */
    display: flex;
    flex-direction: column;
}

#contacts {
    flex: 1;
}

#contacts .section-title {
    color: var(--tertiary-color);
}

#contacts #contact-details {
    background-color: rgba(229, 223, 216, 0.9);
    width: 95%;
    /* Limit the width */
    max-width: 1024px;
    /* Center the content */
    margin: 1rem auto 2rem;
    border-radius: 1.75rem;
    padding: 3rem 2rem;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    row-gap: 2rem;
}

#contacts #contact-details figure {
    display: flex;
    align-items: center;
}

#contacts #contact-details figure .circle-img-container {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 1rem;
    overflow: hidden;
    background-color: var(--primary-color);
    /* Center child */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

#contacts #contact-details figure img {
    width: 70%;
}

#contacts #contact-details figure figcaption {
    background-color: var(--tertiary-color);
    flex: 1;
    transform: translateX(-1rem);
    text-align: center;
    padding: 1rem 2rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    color: var(--primary-color);
    /* Break letters */
    word-break: break-all;
}

#contacts #contact-details figure figcaption a {
    color: var(--primary-color);
}

#feedback {
    background-color: var(--primary-color);
    margin-top: 5rem;
}

#feedback section {
    display: flex;
    justify-content: center;
    align-items: center;
}

#feedback .section-title {
    color: var(--tertiary-color);
}

#feedback figure {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#feedback figure img {
    width: 25%;
    max-width: 200px;
    cursor: pointer;
}

/* Modal */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1.5rem;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: var(--secondary-color);
    width: 80%;
    max-width: 560px;
    text-align: center;
}

.modal .close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.2rem;
}

.modal img {
    width: 150px;
}

.modal textarea {
    width: 100%;
    height: 100px;
    margin: 1rem 0;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--primary-color);
    resize: none;
}

.modal #submit-btn {
    background-color: var(--primary-color);
    color: var(--tertiary-color);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

/* ------------------------- [MEDIA QUERIES] ------------------------- */
/* medium devices (landscape tablets, 768px to 991px) */
@media only screen and (max-width: 991px) {

    /* image container */
    #image-gallery {
        grid-template-columns: repeat(3, 1fr);
        max-width: 700px;
    }
}

/* wave */
@media(max-width:850px) {
    .wave-top-1::before {
        height: 20.5px
    }

    .wave-top-2::before {
        height: 20.5px
    }

    .wave-bottom-1::before {
        height: 20.5px
    }

    .wave-bottom-2::before {
        height: 20.5px
    }
}

/* small devices (portrait tablets and large phones, 600px to 767px) */
@media only screen and (max-width: 767px) {

    .padding-top {
        padding-top: 9rem;
    }

    .two-columns {
        grid-template-columns: 1fr;
    }

    #hero-title {
        font-size: 3.25rem;
    }

    #hero-subtitle {
        font-size: 1.25rem;
    }

    #hero-btn {
        font-size: 1rem;
    }

    /* reverse order for specific items */
    .colored-proj .grid-item:nth-child(1) {
        order: 2;
    }

    .colored-proj .grid-item:nth-child(2) {
        order: 1;
    }

    .proj-info {
        text-align: center;
    }

    .proj-info .holder {
        width: 100%;
    }

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

/* small devices (phones, 468px to 600px) */
@media only screen and (max-width: 600px) {

    #hero-title {
        font-size: 2.75rem;
    }

    #hero-subtitle {
        font-size: 1rem;
    }

    #hero-btn {
        font-size: .8rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    /* image container */
    #image-gallery {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #about-me article h2 {
        font-size: 4rem;
    }

    #skills-interests {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin: 0 auto;
    }
}

/* extra small devices (phones, 468px and down) */
@media only screen and (max-width: 468px) {
    .padding-top {
        padding-top: 11rem;
    }

    footer p {
        font-size: 0.75rem;
    }

    .evidences-container {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}