/*===== Google Fonts =====*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&family=Jost:wght@100..900&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display:wght@400..900&display=swap');

/*===== Variables CSS =====*/
:root {
    /*===== Colors =====*/
    --hue: 210;
    --first-color: hsl(var(--hue), 60%, 40%);
    --title-color: hsl(var(--hue), 4%, 12%);
    --text-color: hsl(var(--hue), 4%, 20%);
    --body-color: hsl(var(--hue), 30%, 92%);
    --container-color: hsl(0, 0%, 100%);
    --border-color: hsl(var(--hue), 4%, 16%);
    --white-color: hsl(0, 0%, 100%);
    --shadow-color: hsla(var(--hue), 80%, 10%, 0.2);

    /*===== Font Family=====*/
    --title-font: 'Playfair Display', serif;
    --text-font: 'DM Sans', sans-serif;
    --body-font: 'Jost', sans-serif;
    --second-font: 'Montserrat Alternates', sans-serif;

    /*===== Font Sizes =====*/
    --big--font-size: 5.5rem;
    --h1-font-size: 2.75rem;
    --h2-font-size: 1.75rem;
    --h3-font-size: 1.5rem;
    --larger-font-size: 1.25rem;
    --large-font-size: 1.125rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.8125rem;

    /*===== Font Weight =====*/
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;
    --font-black: 800;

    /*===== Transition =====*/
    --transition: cubic-bezier(0.3, 0, 0.3, 1);
}

/* Responsive Typography — handled inside each breakpoint below */

/*===== Dark Theme =====*/
.dark {
    --title-color: hsl(0, 0%, 100%);
    --text-color: hsl(0, 0%, 92%);
    --body-color: hsl(var(--hue), 10%, 8%);
    --container-color: hsl(var(--hue), 10%, 16%);
    --border-color: hsl(var(--hue), 4%, 65%);
    --shadow-color: hsla(var(--hue), 0%, 100%, 0.2);
}

.dark.shape {
    filter: invert(1);
}
/*===== Base =====*/

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

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: hsl*(var(--hue), 20%, 65%) hsl(var(--hue), 20%, 85%);
}

body,
button,
input,
textarea {
    color: var(--text-color);
    font-family: var(--text-font);
    font-size: var(--normal-font-size);
}

body {
    background-color: var(--body-color);
}

h1,
h2,
h3,
h4 {
    color: var(--title-color);
    font-family: var(--second-font);
    font-weight: var(--font-bold);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea {
    border: none;
    outline: none;
    background-color: transparent;
}

/*===== REUSABLE CSS CLASSES =====*/
.social-links {
    display: inline-flex;
    column-gap: 1.25rem;
}

.social-link {
    color: var(--title-color);
    font-size: var(--h3-font-size);
    transition: color 0.7 var(--transition);
}

.social-link:hover {
    color: var(--first-color);
}

.section {
    padding-block: 5rem;
}

.btn,
.home-link {
    display: inline-block;
    color: var(--title-color);
    font-size: var(--small-font-size);
    font-weight: var(--font-bold);
    position: relative;

    border: 2px solid var(--border-color);
    box-shadow: 4px 4px var(--shadow-color);
    padding: 1rem 2.5rem;
    border-radius: 3rem;
}

.home-link:hover{
    color: var(--white-color);
}

.home-link::before{
    content: '';
    position: absolute;
    inset: 2px;
    background-color: var(--first-color);
    border-radius: inherit;
    transform: scale(0.3);
    filter: blur(10px);
    opacity: 0;
    z-index: -10;
    transition: all 0.7s var(--transition);
}

.home-link:hover::before {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
}

.btn {
    border: 2px solid var(--border-color);
    box-shadow: 4px 4px var(--shadow-color);
    padding: 1rem 2.5rem;
    border-radius: 3rem;
    transition: color 0.7s var(--transition);
}

.btn:hover{
    color: var(--white-color);
}

.btn::before{
    content: '';
    position: absolute;
    inset: 2px;
    background-color: var(--first-color);
    border-radius: inherit;
    transform: scale(0.3);
    filter: blur(10px);
    opacity: 0;
    z-index: -10;
    transition: all 0.7s var(--transition);
}

.btn:hover::before {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
}

.section-title {
    font-size: var(--h1-font-size);
    text-align: center;
    margin-bottom: 4.25rem;
}

.section-title::after
{
    content: attr(data-title);
    display: block;
    color: var(--first-color);
    font-family: var(--body-font);
    font-size: var(--large-font-size);
}

.link {
    display: inline-flex;
    align-items: center;
    column-gap: 1.25rem;
    color: var(--title-color);
    font-weight: var(--font-bold);
}

.link-icon{
    color: var(--first-color);
    font-size: 1.25rem;
    transition: transform 0.3s var(--transition);
}

.link:hover .link-icon {
    transform: translateX(-0.5rem);
}


/*===== LAYOUT =====*/
.container {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.grid{
    display: grid;
}
/*===== HEADER & NAV =====*/
.header {
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    max-width: 1540px;
}

.nav-logo,
.nav-link{
    color: var(--title-color);
    font-weight: var(--font-bold);
}

.nav-logo {
    font-family: var(--second-font);
    font-size: var(--h3-font-size);
}

.nav-buttons{
    display: flex;
    align-items: center;
    column-gap: 1.75rem;
}

.nav-settings,
.nav-toggle{
    cursor: pointer;
}

.nav-settings{
    font-size: 1.5rem;
}

.nav-toggle{
    width: 28px;
    height: 28px;
    position: relative;

}

.nav-toggle::before,
.nav-toggle::after{
    content: '';
    width: 100%;
    height: 2px;
    background-color: var(--title-color);
    position: absolute;
    left: 0;
    transition: all 0.7s var(--transition);
}

.nav-toggle::before{
    top: 7px;
}

.nav-toggle::after{
    bottom: 7px;
}

.nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    background-color: var(--container-color);
    width: 512px;
    height: 100%;
    padding: 9rem 0 0 9.5rem;
    transition: right 1s var(--transition);
}

.nav-list {
    margin-bottom: 2.5rem;
}
.nav-item{
    margin-bottom: 1.25rem;
}

.nav-link {
    font-size: var(--larger-font-size);
    transition: color 0.3s var(--transition);
}

.nav-link::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: var(--first-color);
    transition: width 0.3s var(--transition);
}

.nav-link:hover::after,
.active-link::after {
    width: 100%;
}

.active-link {
    color: var(--first-color);
}
.nav-link:hover {
    color: var(--first-color);
}

/* Show menu */
.show-menu {
    right: 0;
}

.animate-toggle::before {
    transform: rotate(45deg);
    top: 14px;
}

.animate-toggle::after {
    transform: rotate(-45deg);
    bottom: 12px;
}

/* Active link */

/* Change background header */


/*===== MAIN=====*/


/*===== HOME =====*/
.home-container {
    padding-block: 4.25rem;
}

.home-content {
    position: relative;

}

.home-subtitle {
    font-size: var(--large-font-size);
    font-weight: var(--font-bold);
    margin-bottom: 2rem;
}

.home-subtitle span,

.home-title span {
    color: var(--first-color);
}

.home-job span {
    color: var(--first-color);
}

.home-title {
    color: var(--white-color);
    font-size: var(--big--font-size);
    font-weight: var(--font-black);
    -webkit-text-stroke: 2px hsl(0, 0%, 0%);
    text-shadow: 4px 4px var(--shadow-color);
}

.home-job {
    font-size: var(--h3-font-size);
    font-weight: var(--font-semi-bold);
    margin-block: 1.5rem 2.5rem;
}

.home-banner{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.home-img-wrapper {
    width: clamp(21rem, 12.6rem + 33.6vw, 42rem);
    border-radius: 0 0 100vw 100vw;
    overflow: hidden;
}

.home-img-wrapper::before {
    content: '';
    position: absolute;
    inset: auto 0 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--first-color);
}

.home-profile{
    position: relative;
    z-index: 10;
    aspect-ratio: 21/25;
    object-fit: cover;

}

.home-data{
    border: 2px solid var(--border-color);
    background-color: var(--container-color);
    box-shadow: 4px 4px var(--shadow-color);
    padding-inline: 1.25rem;
    width: 240px;
    height: 80px;
    border-radius: 3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    position: absolute;
    z-index: 100;
}

.home-data-one {
    bottom: 20%;
    left: clamp(-3.75rem, -4.65rem + 3.6vw, -1.5rem);
}

.home-data-two{
    bottom: 12%;
    right: clamp(-3rem, -5.2rem + 8.8vw, 2.5rem);
}

.home-data-no{
    color: var(--first-color);
    font-family: var(--second-font) ;
    font-size: 2.25rem;
    font-weight: var(--font-bold);
    text-align: center;
}

.home-data-title{
    font-size: var(--smaller-font-size);
}

.home-date-title span {
    color: var(--first-color);
}

.shape{
    position: absolute;
    z-index: -10;
}

.shape-1{
    width: clamp(6.5rem, 3.5rem + 12vw, 14rem);
    top: 9%;
    right: 6%;

}

.shape-2,
.shape-3{
    width: clamp(4rem, 2.1rem + 7.6vw, 8.75rem);

}

.shape-2{
    bottom: 8%;
    left: -12%;

}

.shape-3{
    bottom: 0;
    right: -2%;
}

.home-description{
    font-size: var(--large-font-size);
    max-width: 520px;
}

.home-socials {
    margin-block: 1.75rem 2.5rem;
}

.home-btns{
    display: flex;
    align-items: center;
    column-gap: 4.5rem;
}

.home-link::before{
    content: '';
    position: absolute;
    left: -124%;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 2px;
    background-color: var(--border-color);
}

/*===== WORK DROPDOWN STYLES =====*/
/* Container for the dropdown button to position the dropdown menu correctly. */
.work-dropdown {
    position: relative;
}

/* Styles for the dropdown menu itself. It's hidden by default. */
.work-dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--container-color);
    box-shadow: 4px 4px var(--shadow-color);
    border: 2px solid var(--border-color);
    border-radius: 1.5rem;
    min-width: 160px;
    /* Position the dropdown below the button */
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    overflow: hidden;
    padding: 0.5rem 0;
}

/* This class is toggled by JavaScript to show the dropdown menu. */
.show-work-dropdown {
    display: block;
}

/* Styles for the individual items (links) within the dropdown. */
.work-dropdown-item {
    color: var(--title-color);
    padding: 1rem 1.5rem;
    display: block;
    font-weight: var(--font-medium);
    transition: 0.3s;
    text-align: center;
}

/* Hover effect for dropdown items. */
.work-dropdown-item:hover {
    background-color: var(--first-color);
    color: var(--white-color);
}

/*===== ABOUT =====*/
.card {
    background-color: var(--container-color);
    padding: 2rem 2.25rem;
    border-radius: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--transition), box-shadow 0.4s var(--transition);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px var(--shadow-color);
}

.card::before{
    content: '';
    position: absolute;
    right: -1.5rem;
    bottom: -1.5rem;
    width :120px;
    height: 120px;
    background-image: url(/assets/img/shape-3.png);
    background-size: cover;
}

.about-subtitle{
    font-size: var(--smaller-font-size);
}

.about-title{
    font-size: var(--h3-font-size);
    margin-block: 2rem 1rem;
}

.about-description{
    min-height: 175px;
}

/* swiper */
.swiper-pagination {
    position: initial;
    margin-top: 3rem;
}

.swiper-pagination-bullets::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background-color: var(--border-color);
}

.swiper-pagination-bullet {
    border: 2px solid var(--border-color);
    background-color:  var(--container-color);
    opacity: 1;
    position: relative;
    z-index: 10;
}

.swiper-pagination-bullet:not(:last-child) {
    margin-right: 1.25rem !important;
}

.swiper-pagination-bullet-active {
    background-color: var(--first-color);
    transform: scale(1.7);
    border-width: 1px;
}
/*===== Skills =====*/
.skills-container {
    grid-template-columns: repeat(3,1fr);
    gap: 4rem 1.5rem;
}

.skills-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.skills-header,
.skills-description{
    padding-inline: 1.75rem;
}

.skills-name{
    font-size: var(--larger-font-size);
}

.skills-value{
    color: var(--title-color);
    font-weight: var(--font-bold);
}

.skills-value b {
    color: var(--first-color);
}

.skills-description{
    margin-block: 1rem 1.75rem;
}

.skills-bar,
.skills-percentage {
    height: 2px;
}

.skills-bar {
    background-color: var(--shadow-color);
}

.skills-percentage {
    display: block;
    background-color: var(--first-color);
    position: relative;
}

.skills-percentage::before {
    content: '';
    position: absolute;
    right: 0;
    top: -0.75rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--container-color);
    border: 2px solid var(--border-color);
    box-shadow: 4px 4px var(--shadow-color);
}
/*===== Projects =====*/
.projects-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem 2.5rem;
    margin-bottom: 3.75rem;
    cursor: pointer;
}

.projects-item{
    color: --var(--title-color);
    font-size: var(--small-font-size);
    font-weight: var(--font-bold);
    cursor: pointer;
    position: relative;
    transition: color 0.7s var(--transition);
}

.projects-item:hover{
    color: var(--first-color)
}

.projects-item::before{
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--first-color);
    transition: width 0.3s var(--transition);
}

/* ====== Active projects item ====== */
.active-project {
    color: var(--first-color);
}

.active-project::before {
    width: 60%;
}

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

.projects-img{
    height: 240px;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.projects-category{
    color: var(--first-color);
    font-size: var(--smaller-font-size);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.projects-title{
    font-size: var(--h3-font-size);
    margin-block: 0.75rem 1.75rem;
}

.projects-description{
    min-height: 125px;
}

/*===== Photography =====*/
.photography-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem 2.5rem;
    margin-bottom: 3.75rem;
    cursor: pointer;
}

.photography-item{
    color: --var(--title-color);
    font-size: var(--small-font-size);
    font-weight: var(--font-bold);
    cursor: pointer;
    position: relative;
    transition: color 0.7s var(--transition);
}

.photography-item:hover{
    color: var(--first-color)
}

.photography-item::before{
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--first-color);
    transition: width 0.3s var(--transition);
}

/* ====== Active projects item ====== */
.active-photography{
    color: var(--first-color);
}
.active-photography::before{
    width: 60%;
}

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

.car-img{
    height: 250px;
    width: 15000%;
    object-fit: cover;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.portrait-img{
    height: 450px;
    width: 150000%;
    object-fit: cover;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.groups-img{
    height: 250px;
    width: 15000%;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}
.photography-img{
    height: 250px;
    width: 15000%;
    object-fit: cover;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.photography-category{
    color: var(--first-color);
    font-size: var(--smaller-font-size);
}

.photography-title{
    font-size: var(--h3-font-size);
    margin-block: 0.75rem 1.75rem;
}

.photography-description{
    min-height: 125px;
}

/*===== PHOTOGRAPHY LOAD MORE (UX IMPROVEMENT) =====*/
.photography-wrapper {
    position: relative;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out;
}

/* Height limit only for the "All" filter since it shows every photo */
.photography-wrapper.all-active {
    max-height: 600px;
}

.photography-wrapper.expanded {
    max-height: 4000px; /* Large enough to show all, transition handles the rest */
}

/* Gradient Fade Overlay */
.photography-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, transparent, var(--body-color));
    z-index: 10;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s var(--transition);
}

.photography-wrapper.expanded .photography-overlay {
    opacity: 0;
}

.load-more-container {
    text-align: center;
    margin-top: 2rem;
    display: none; /* Hidden by default, shown via JS if needed */
}

.load-more-container.show {
    display: block;
}

/*===== FEATURED SECTION =====*/

/* Scroll wrapper — horizontal scroll on small screens */
.featured-scroll-wrapper {
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--first-color) transparent;
}
.featured-scroll-wrapper::-webkit-scrollbar { height: 4px; }
.featured-scroll-wrapper::-webkit-scrollbar-thumb {
    background: var(--first-color);
    border-radius: 4px;
}

/* Horizontal track */
.featured-track {
    display: flex;
    gap: 1.25rem;
    width: max-content; /* prevents flex children from wrapping */
}

/* ── Card ── */
.featured-card {
    display: flex;
    flex-direction: column;
    width: 280px;           /* ← card width */
    flex-shrink: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: var(--container-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px var(--shadow-color);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s var(--transition), box-shadow 0.3s var(--transition);
}
.featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px var(--shadow-color);
}

/* ── Thumbnail (top area) ── */
.featured-thumb {
    position: relative;
    height: 150px;          /* ← thumbnail height */
    background: linear-gradient(135deg,
        hsl(var(--hue), 40%, 82%),
        hsl(var(--hue), 60%, 65%));
    overflow: hidden;
}

/* Real photo thumbnail */
.featured-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--transition);
}
.featured-card:hover .featured-thumb-img { transform: scale(1.05); }

/* Hover overlay with link icon */
.featured-thumb-hover {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: hsla(var(--hue), 60%, 10%, 0.35);
    color: #fff;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s var(--transition);
}
.featured-card:hover .featured-thumb-hover { opacity: 1; }

/* Icon-only thumbnail (no photo) */
.featured-thumb--icon {
    display: grid;
    place-items: center;
    font-size: 3rem;
    color: var(--first-color);
}

/* ── Card body (bottom area) ── */
.featured-body {
    padding: 1rem 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

/* Badge / source label */
.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--first-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.featured-title {
    font-size: var(--normal-font-size);
    font-weight: var(--font-bold);
    color: var(--title-color);
    line-height: 1.3;
    margin: 0;
}

.featured-desc {
    font-size: var(--small-font-size);
    color: var(--text-color);
    opacity: 0.85;
    line-height: 1.5;
    margin: 0;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Large screens: switch to auto grid, no scroll */
@media screen and (min-width: 1024px) {
    .featured-scroll-wrapper { overflow-x: visible; }
    .featured-track {
        width: auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    .featured-card { width: auto; }
}

/*===== RESUME =====*/
.resume-container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
}

.resume-title {
    font-size: var(--h3-font-size);
    margin-bottom: 2rem;
    padding-left: 1.5rem; /* Align title roughly with content */
}

.resume-item {
    border-left: 2px solid var(--border-color);
    padding-left: 3rem;
    position: relative;
    padding-bottom: 3.5rem; /* Creates the space for the connecting line */
}

/* Remove line for the last item in each list so it ends cleanly */
.resume-item:last-child {
    border-left: 2px solid transparent;
    padding-bottom: 0;
}

.resume-icon {
    position: absolute;
    left: -1.35rem; /* Center the icon over the border line */
    top: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--body-color);
    border: 2px solid var(--first-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--first-color);
    font-size: 1.25rem;
    box-shadow: 0 4px 8px var(--shadow-color);
    z-index: 10;
    transition: all 0.4s var(--transition);
}

/* Hover Effect for Resume Item */
.resume-item:hover .resume-icon {
    background-color: var(--first-color);
    color: var(--white-color);
    transform: scale(1.1);
    box-shadow: 0 0 16px var(--first-color);
}

.resume-subtitle {
    font-size: var(--large-font-size);
    font-weight: var(--font-bold);
    color: var(--title-color);
}

.resume-place {
    font-size: var(--normal-font-size);
    color: var(--text-color);
    opacity: 0.8;
    margin-top: 0.25rem;
}

.resume-date {
    display: inline-block;
    background-color: var(--container-color);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.85rem;
    border-radius: 2rem;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
    margin-block: 0.5rem 1rem;
}

.resume-description {
    margin-bottom: 0.5rem; /* Change this value to custom space out the descriptions */
}

/* Prevents extra space at the bottom of the card */
.resume-description:last-child {
    margin-bottom: 0;
}


/*===== Contact =====*/
.contact-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}
.contact-card {
    background-color: var(--container-color);
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
    margin-bottom: 1rem;
    border: 2px solid var(--border-color);
    box-shadow: 4px 4px var(--shadow-color);
}
.contact-icon {
    font-size: 2rem;
    color: var(--first-color);
    margin-bottom: 0.25rem;
}
.contact-card-title {
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
}
.contact-card-data {
    display: block;
    margin-bottom: 0.75rem;
}
.contact-button {
    color: var(--first-color);
    font-size: var(--small-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.25rem;
}
.contact-form-div {
    position: relative;
    margin-bottom: 2rem;
    height: 4rem;
}
.contact-form-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--border-color);
    background: none;
    color: var(--text-color);
    outline: none;
    padding: 1.5rem;
    border-radius: 0.75rem;
    z-index: 1;
}
.contact-form-tag {
    position: absolute;
    top: -0.75rem;
    left: 1.25rem;
    font-size: var(--smaller-font-size);
    padding: 0.25rem;
    background-color: var(--body-color);
    z-index: 10;
}
.contact-form-area {
    height: 11rem;
}
.contact-form-area textarea {
    resize: none;
}
.contact-status {
    display: none;
    font-size: var(--small-font-size);
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    margin-top: 0.75rem;
}
.contact-status--success {
    display: block;
    background: hsl(145, 55%, 90%);
    color: hsl(145, 55%, 22%);
}
.contact-status--error {
    display: block;
    background: hsl(0, 60%, 93%);
    color: hsl(0, 60%, 35%);
}

/*===== FOOTER =====*/
.footer-container {
    text-align: center;
    margin-block: 2rem;
}

.footer-socials {
    display: flex;
    justify-content: center;
    column-gap: 1.5rem;
    margin-bottom: 2rem;
}

.footer-social-link {
    font-size: 1.5rem;
    color: var(--title-color);
    transition: color 0.3s var(--transition), transform 0.3s var(--transition);
}

.footer-social-link:hover {
    color: var(--first-color);
    transform: translateY(-0.25rem);
}


/*===== Style Switcher =====*/
.style-switcher{
    position: fixed;
    top: 0;
    right: -100%;
    width: 450px;
    height: 100%;
    background-color: var(--container-color);
    padding: 5rem 3.5rem;
    z-index: 1000;
    transition: right 1s var(--transition);
}

.style-switcher-title{
    font-size: var(--h3-font-size);
    padding-bottom: 1.25rem;
}

.style-switcher-title,
.style-switcher-item {
    border-bottom: 1px solid var(--shadow-color);
}

.style-switcher-item{
    padding-block: 1rem;
}

.style-switcher-subtitle {
    font-size: var(--large-font-size);
    margin-bottom: 1rem;
}

.style-switcher-colors {
    display: flex;
    column-gap: 0.5rem;
}

.style-switcher-color {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: hsl(var(--hue), 60%, 40%);
    position: relative;
}

/* custom color picker making it into a circle */

.style-switcher-color-custom {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
}

.style-switcher-color i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white-color);
    font-size: 1.25rem;
    display: none;
}

.active-color i {
    display: block;
}

.style-switcher-themes,
.style-switcher-theme {
    display: flex;
}

.style-switcher-themes{
    column-gap: 1.25rem;
}

.style-switcher-theme{
    column-gap: 0.5rem;
}

.style-switcher-input {
    accent-color: var(--first-color);
}

.style-switcher-label {
    color: var(--title-color);
}

.style-switcher-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2rem;
    cursor: pointer;
}

.show-switcher {
    right: 0;
}




/*===== Breakpoints =====*/

/* For large devices */
@media screen and (max-width: 1200px){
    .section-deco:not(.header-deco){
        display: none;
    }

    .home-banner {
        position: relative;
        right: initial;
        top: initial;
        transform: translateY(0);
        width: max-content;
    }

    .home-content{
        text-align: center;
    }

    .home-banner,
    .home-description,
    .home-socials,
    .home-btns{
        margin-inline: auto;
    }

    .home-banner{
        margin-block: 2.5rem;
    }

    .home-data{
        transform: scale(0.9);
    }

    .home-btns{
        flex-direction: column;
        row-gap: 3.75rem;
    }

    .home-link::before{
        top: -3rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 40px;
    }
}

@media screen and (max-width: 1024px){
    :root {
        --big--font-size: 4rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
    }

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

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

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

    .resume-container {
        column-gap: 3rem;
    }
}

/* For medium devices */
@media screen and (max-width: 768px){
    :root {
        --big--font-size: 3rem;
        --h1-font-size: 2rem;
    }

    .nav-menu {
        width: 100%;
        padding: 7rem 0 0 3rem;
    }

    .home-img-wrapper {
        width: clamp(16rem, 80vw, 22rem);
    }

    .home-data-one,
    .home-data-two {
        transform: scale(0.8);
    }

    .skills-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .resume-container {
        flex-direction: column;
    }

    .resume-data {
        width: 100%;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    .projects-container {
        grid-template-columns: 1fr;
    }

    .photography-container {
        grid-template-columns: 1fr;
    }

    .style-switcher {
        width: 100%;
    }
}

@media screen and (max-width: 576px){
    :root {
        --big--font-size: 2.5rem;
        --h1-font-size: 1.75rem;
        --h2-font-size: 1.25rem;
        --h3-font-size: 1.125rem;
        --larger-font-size: 1rem;
        --large-font-size: 0.938rem;
    }

    .container {
        padding-inline: 1rem;
    }

    .section {
        padding-block: 3rem;
    }

    .home-data {
        width: 200px;
        height: 68px;
    }

    .home-data-one {
        left: -0.5rem;
    }

    .home-data-two {
        right: -0.5rem;
    }

    .btn,
    .home-link {
        padding: 0.875rem 2rem;
    }
}

/* For small devices */
@media screen and (max-width: 350px){
    :root {
        --big--font-size: 2rem;
        --h1-font-size: 1.5rem;
    }

    .home-data {
        width: 170px;
        height: 60px;
    }

    .home-data-no {
        font-size: 1.75rem;
    }
}