/* ------------------------- [FONT IMPORTS] ------------------------- */
/* importing google fonts: lexend exa */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@100..900&family=Quicksand:wght@300..700&family=Russo+One&display=swap');

/* custom font imports for akira expanded and nexa bold */
/* 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] ------------------------- */
/* define color scheme and reusable values */
: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);
}

/*
    removes the default margin and padding of the page
    sets the box-sizing to border-box to include padding and border in the element's total width and height
    sets the default font to 'Lexend Exa' and sans-serif as a fallback
    sets the scroll-behavior to smooth for smooth scrolling
    sets the z-index to 2 to ensure the elements are above the background
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lexend Exa', sans-serif;  /* set default font */
    scroll-behavior: smooth;
    z-index: 2;
}

/*
    making the body tag a flex container with column direction
    to make the footer stick to the bottom of the page
*/
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;  /* take up the full height of the viewport */
}

/* 
    setting the flex-grow property to 1 for the main element
    this is to make the main element take up the remaining space,
    making the footer stick to the bottom of the page
*/
main {
    flex-grow: 1;
    background-color: var(--secondary-color);
    position: relative;
    overflow: hidden;
}

/* ------------------------- [GENERAL STYLES] ------------------------- */
/* removes the default style for a button */
button {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

/* common section title styling */
.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;
}

/* making a container display the children elements within two columns */
.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;
}

/* 
    adding a padding on the top
    this is usually used to add space at the top of the page
    so that the navigation bar does not overlap the content
*/
.padding-top {
    padding-top: 7rem;  /* add space at the top */
}

/* removes the underline decoration */
a {
    text-decoration: none;
}

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

/* 
    reference: https://wavier.art/
    wave effect styles
    this creates a wave effect on the top and bottom of the element
*/
.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>");
}

/* animation for wave effect */
.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;
    }
}

.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
    this creates a wavy line effect
*/
.wavy-line {
    width: 50%;
    height: 50px;
    overflow: hidden;
    transform: translateY(-10px);
    position: relative;
}

/* full width will make it consume the whole width */
.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;
}

/* white variant of curly line */
.wavy-line-white:before {
    text-decoration-color: var(--tertiary-color);
}

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

/* bottom leaf image in background */
.bottom-leaf {
    position: absolute;
    bottom: -50px;
    right: -80px;
    z-index: 1;
    width: 200px;
}

/* ------------------------- [NAVIGATION BAR] ------------------------- */
/* this will make the navbar be fixed on the top part of the page */
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;
}

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

/* 
    making the navigation bar a flex container
    with center alignment
*/
header nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* 
    updating the nav links style
    adding padding ang changing the font color
*/
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 links will have a background color
    to make it stand out and will serve as an indication that it is the active page
*/
header nav ul li a.active {
    background-color: var(--tertiary-color);
    color: var(--primary-color);
}

/* 
    hover effect for the nav links
    when hovered, the background color will change
*/
header nav ul li a:hover {
    background-color: var(--tertiary-color);
}

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

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

/* 
    dropdown content styling
    this will be the submenu that will appear when the parent is hovered
    initially, it will be hidden
*/
.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] ------------------------- */
/* adding bg color in the 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 --- */
/*
    styles the hero section to center content vertically and horizontally,
    with a full viewport height and a layered background (gradient and image).
*/
#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: var(--tertiary-color);
    background-color: var(--primary-color);
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 75%, #C7BCAF 100%),
        url('../images/home/hero-bg.gif');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* styles the main hero title with a bold, uppercase font for emphasis. */
#hero-title {
    font-size: 5rem;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: .25rem;
    color: var(--white);
    font-family: 'Akira Expanded', sans-serif;
}

/* styles the hero subtitle with a slightly smaller size and medium font weight. */
#hero-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--white);
    font-family: 'Nexa Bold', sans-serif;
}

/* styles the hero button with a custom hover effect that displays an image overlay. */
#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;
}

/* adds an image overlay effect to the button on hover. */
#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 --- */
/* adds a gradient background and padding to the learning outcomes section. */
#learning-outcomes {
    background: linear-gradient(#C7BCAF, var(--secondary-color));
    padding: 3rem 0;
}

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

/* styles each figure in the gallery with hover animation and ensures proper positioning. */
#image-gallery figure {
    width: 100%;
    position: relative;
    transition: transform 0.3s ease;
}

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

/* moves the figure slightly upwards when hovered for a hover effect. */
#image-gallery figure:hover {
    transform: translateY(-0.5rem);
    z-index: 1;
}

/* ensures all images in the gallery are responsive and have a shadow effect. */
#image-gallery figure img {
    width: 100%;
    filter: drop-shadow(4px 3px 2px rgba(0, 0, 0, 0.4));
}

/* positions the caption in the center of the image and styles it. */
#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 --- */
/* adds a background color and spacing for the about me section. */
#about-me {
    background-color: var(--primary-color);
    position: relative;
    margin-top: 3rem;
    padding-bottom: 3rem;
}

/* styles the image in the about me section with a centered layout and rounded corners. */
#about-me figure {
    text-align: center;
    padding: 0 1rem;
}

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

/* styles the article in the about me section with a bold, large heading and justified text. */
#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;
}

/* sets a two-column grid layout for the skills and interests section with spacing between items. */
#skills-interests {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2 columns with equal width */
    gap: 1rem;
    margin-top: 2rem;
}

/* styles the section title with a bold font and centered alignment. */
.skills-interests-title {
    font-family: 'Akira Expanded', sans-serif;
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* aligns and spaces items within the skills and interests section. */
#skills-interests article {
    text-align: center;
}

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

/* ensures icons in the skills and interests section have consistent sizes. */
#skills-interests article figure img {
    max-width: 23%;
}

/* slightly increases the icon size for interests in the skills and interests section. */
#skills-interests article#interests figure img {
    max-width: 24%;
}

/* ------------------------- [PROJECTS] ------------------------- */
/* sets the background color for the projects section. */
#projects-container {
    background-color: var(--tertiary-color);
}

/* adds padding to the two-column layout inside the projects section. */
#projects .two-columns {
    padding: 3rem 1rem;
}

/* centers and contains images within a square container with rounded corners. */
#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;
}

/* adds padding around project details. */
.proj-info {
    padding: 1rem;
}

/* styles project titles with uppercase text and bold fonts. */
.proj-title {
    font-size: 1.75rem;
    text-transform: uppercase;
    color: #145A65;
    font-family: 'Akira Expanded', sans-serif;
    margin-bottom: 1rem;
}

/* positions elements within the project information section. */
.proj-info .holder {
    width: 50%;
    position: relative;
    bottom: -0.75rem;
}

/* styles project descriptions with justified text and a smaller font size. */
.proj-desc {
    font-size: 0.9rem;
    text-align: justify;
    color: #145A65;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

/* adds a styled button with a hover effect that reveals a gradient overlay. */
.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;
}

/* adds distinct styling for highlighted projects with customized colors. */
.colored-proj {
    background-color: var(--primary-color);
    color: var(--tertiary-color);
    margin: 2rem 0;
}

/* ensures all children of highlighted projects inherit the font color. */
.colored-proj * {
    color: var(--tertiary-color);
}

/* customizes button styles for highlighted projects. */
.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);
}

/* styles images in highlighted projects with custom borders and background colors. */
.colored-proj .square-img-container img {
    background-color: rgba(20, 90, 101, 0.32) !important;
    border: 3px solid #1B879F !important;
}

/* ------------------------- [SPECIFIC PROJECT] ------------------------- */
/* styles the container for a specific project with a vertical layout. */
#project-container {
    background-color: #4D9DAE;

    display: flex;
    flex-direction: column;
}

/* adds padding to the project information section. */
.project-info {
    padding: 1rem;
}

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

/* styles the project description with justified text and medium font weight. */
.project-desc {
    font-size: 1rem;
    text-align: justify;
    color: var(--tertiary-color);
    font-weight: 400;
    margin-bottom: 1.5rem;
}

/* centers and styles images with a 16:9 aspect ratio for the specific project. */
#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);
}

/* styles the bottom section of the specific project with flexible spacing. */
#project-bottom {
    background-color: var(--primary-color);
    margin-top: 3rem;
    flex: 1;
    display: flex;  /* fill the remaining space */
    flex-direction: column;
}

/* styles a detailed information section with rounded corners and padding. */
#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;
}

/* adds styling to titles and descriptions inside the additional info section. */
#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;
}

/* customizes links within the description, including hover effects. */
#more-info .desc a {
    color: #52DEF4;
    text-decoration: underline;
    font-weight: 400;
}

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

/* positions elements within the project bottom section. */
#project-bottom .holder {
    position: relative;
    bottom: -0.8rem;
}

/* ------------------------- [OUTCOMES] ------------------------- */
/* defines the overall layout and background color for the outcomes section. */
#outcomes-container {
    background-color: var(--tertiary-color);
    display: flex;
    flex-direction: column;
}

/* centers and limits the width of the top and bottom sections. */
.outcome-top,
.outcome-bottom {
    max-width: 1024px;
    width: 95%;
    margin: 1rem auto 0;
}

/* styles the description text in the outcomes section. */
.outcome-desc {
    text-align: center;
    max-width: 700px;
    margin: 1rem auto 0;
    color: #145A65;
    font-weight: 700;
    font-size: 1.5rem;
}

/* centers the content holder and defines maximum width. */
#outcomes-container .holder {
    width: 95%;
    max-width: 1024px;
    margin: 3rem auto 0;
}

/* adds styling to additional information text. */
.outcome-more-info {
    text-align: justify;
    color: var(--primary-color);
}

/* adds padding and sets flexible height for the bottom section. */
.outcome-bottom {
    padding-bottom: 5rem;
    flex: 1;
}

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

/* styles the title blocks with background color, rounded edges, and uppercase text. */
.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;
}

/* creates a grid layout for displaying evidence with equal columns and spacing. */
.evidences-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* styles each figure within the evidence grid for alignment and interactivity. */
.evidences-container figure {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--primary-color);
    cursor: pointer;
}

/* adds hover and active states to images within the evidence grid. */
.evidences-container img {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

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

/* adds hover and active states to figure captions. */
.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;
}

/* styles the evidence details and sets the section to be hidden by default. */
.evidence {
    background-color: var(--primary-color);
    padding: 0 1rem 6rem;
    position: relative;
    display: none;
}

/* scroll-to-top button styling for the evidence section. */
.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;
}

/* sets the maximum width and centers the container. */
.evidence .container {
    max-width: 1024px;
    margin: 0 auto;
}

/* displays the evidence section when the "show" class is applied. */
.evidence.show {
    display: block;
}


/* positions and sizes the close button for the evidence section. */
.close-btn {
    position: absolute;
    right: 2rem;
    top: -3rem;
}

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

/* defines styles for titles, subtitles, and descriptions within the evidence section. */
.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;
}

/* adds link-specific styles within h4 elements. */
.evidence h4 a {
    color: #00FFFF;
    text-decoration: underline;
}

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

/* styles paragraphs and lists within the evidence description. */
.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;
}

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

/* styles the image and media container with horizontal scrolling enabled. */
.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;
}

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

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

/* styles iframe, video, and images within the media container. */
.evidence-image-container iframe,
.evidence-image-container video,
.evidence-image-container img {
    background-color: var(--tertiary-color);
    border-radius: .5rem;
    height: 100% !important;
}

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

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

    display: flex;
    flex-direction: column;
}

/* fills available space within the container for the contacts section. */
#contacts {
    flex: 1;
}

/* adds a tertiary color to the section title text. */
#contacts .section-title {
    color: var(--tertiary-color);
}

/* styles the contact details container with a translucent background, grid layout, and rounded corners. */
#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;
}

/* aligns contact detail figures horizontally and centers items. */
#contacts #contact-details figure {
    display: flex;
    align-items: center;
}

/* styles the circular image container with centering and overflow properties. */
#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;
}

/* resizes images within the circular container. */
#contacts #contact-details figure img {
    width: 70%;
}

/* styles captions with background color, rounded edges, and centered text. */
#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;
}

/* adds primary color to links within the captions. */
#contacts #contact-details figure figcaption a {
    color: var(--primary-color);
}

/* adds a solid primary background color and top margin for separation. */
#feedback {
    background-color: var(--primary-color);
    margin-top: 5rem;
}

/* centers content within the feedback section. */
#feedback section {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* styles the feedback section title with tertiary color. */
#feedback .section-title {
    color: var(--tertiary-color);
}

/* aligns feedback images in a flexible layout and enables interaction. */
#feedback figure {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    cursor: pointer;
}

/* limits feedback image size with a max width. */
#feedback figure img {
    width: 25%;
    max-width: 200px;
}

/* centers and styles the modal with a box-shadow and secondary background color. */
.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;
}

/* positions the close button at the top right of the modal. */
.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;
}

/* styles the textarea with padding, rounded edges, and a non-resizable feature. */
.modal textarea {
    width: 100%;
    height: 100px;
    margin: 1rem 0;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--primary-color);
    resize: none;
}

/* styles the submit button with uppercase text and rounded corners. */
.modal #submit-btn {
    background-color: var(--primary-color);
    color: var(--tertiary-color);
    text-transform: uppercase;
    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) {
    /* adjusts grid layout for image gallery on medium-sized screens. */
    #image-gallery {
        grid-template-columns: repeat(3, 1fr);
        max-width: 700px;
    }
}

/* wave responsiveness */
/* sdjusts wave heights for screens narrower than 850px to maintain design proportions. */
@media (max-width: 850px) {
    .wave-top-1::before,
    .wave-top-2::before,
    .wave-bottom-1::before,
    .wave-bottom-2::before {
        height: 20.5px;
    }
}

/* small devices (portrait tablets and large phones, 600px to 767px) */
@media only screen and (max-width: 767px) {
    /* adjusts top padding for better spacing. */
    .padding-top {
        padding-top: 9rem;
    }

    /* converts two-column layouts to single column. */
    .two-columns {
        grid-template-columns: 1fr;
    }

    /* scales down hero section text sizes. */
    #hero-title {
        font-size: 3.25rem;
    }

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

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

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

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

    /* centers project information and adjusts container width. */
    .proj-info {
        text-align: center;
    }

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

    /* adjusts evidence container to a two-column grid. */
    .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;
    }

    /* scales down section titles. */
    .section-title {
        font-size: 1.75rem;
    }

    /* adjusts grid layout and spacing for the image gallery. */
    #image-gallery {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* scales down about-me heading size. */
    #about-me article h2 {
        font-size: 4rem;
    }

    /* converts skills and interests layout to a single column. */
    #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;
    }

    /* scales down footer text size. */
    footer p {
        font-size: 0.75rem;
    }

    /* converts evidence container to a single column and increases gap for readability. */
    .evidences-container {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}