@charset "UTF-8";
/*!
Theme Name: Sindi Shishmani
Theme URI: http://underscores.me/
Author: Sindi Shishmani
Author URI: http://Sindi%20Miho
Description: CV Site for Sindi Shishmani
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sindishishmani
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Sindi Shishmani is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: #fff;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
a {
  color: #4169e1;
}
a:visited {
  color: #800080;
}
a:hover, a:focus, a:active {
  color: #191970;
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type=button],
input[type=reset],
input[type=submit] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}
button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
  border-color: #ccc #bbb #aaa;
}
button:active, button:focus,
input[type=button]:active,
input[type=button]:focus,
input[type=reset]:active,
input[type=reset]:focus,
input[type=submit]:active,
input[type=submit]:focus {
  border-color: #aaa #bbb #bbb;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}
.container.small {
  max-width: 1000px;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
.header {
  padding: 1rem 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}
.header.scrolled {
  padding: 0.75rem 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.header.scrolled .logo {
  font-size: 1rem;
}
@media (min-width: 800px) {
  .header.scrolled .logo {
    font-size: 1rem;
  }
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 800px) {
  .header .container {
    justify-content: flex-start;
  }
}
.header .logo {
  font-weight: 800;
  font-size: 2.2rem;
  color: #000;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #000 0%, #333 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoSlideIn 0.8s ease 0.2s both;
}
@media (min-width: 800px) {
  .header .logo {
    font-size: 1.5rem;
  }
}
.header .logo::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #000, #333);
  transition: width 0.3s ease;
  border-radius: 1px;
}
.header .logo:hover {
  transform: translateY(-1px);
}
.header .logo:hover::after {
  width: 100%;
}
.header .nav-toggle {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}
@media (min-width: 800px) {
  .header .nav-toggle {
    display: none;
  }
}
.header .nav-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}
.header .nav-toggle .hamburger {
  width: 24px;
  height: 18px;
  position: relative;
  transform: rotate(0deg);
  transition: 0.3s ease-in-out;
}
.header .nav-toggle .hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #000;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
.header .nav-toggle .hamburger span:nth-child(1) {
  top: 0px;
}
.header .nav-toggle .hamburger span:nth-child(2), .header .nav-toggle .hamburger span:nth-child(3) {
  top: 8px;
}
.header .nav-toggle .hamburger span:nth-child(4) {
  top: 16px;
}
.header .nav-toggle .hamburger.active span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}
.header .nav-toggle .hamburger.active span:nth-child(2) {
  transform: rotate(45deg);
}
.header .nav-toggle .hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
}
.header .nav-toggle .hamburger.active span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}
.header .nav-primary {
  margin-left: auto;
}
@media (max-width: 800px) {
  .header .nav-primary {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
  }
  .header .nav-primary.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
}
.header .nav-primary ul {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 800px) {
  .header .nav-primary ul {
    flex-direction: column;
    gap: 0;
    padding: 2rem 1.5rem;
  }
}
@media (min-width: 800px) {
  .header .nav-primary ul {
    align-items: center;
  }
}
.header .nav-primary li {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  animation: navItemSlideIn 0.6s ease forwards;
}
.header .nav-primary li:nth-child(1) {
  animation-delay: 0.4s;
}
.header .nav-primary li:nth-child(2) {
  animation-delay: 0.5s;
}
.header .nav-primary li:nth-child(3) {
  animation-delay: 0.6s;
}
.header .nav-primary li:nth-child(4) {
  animation-delay: 0.7s;
}
.header .nav-primary li:nth-child(5) {
  animation-delay: 0.8s;
}
.header .nav-primary li:nth-child(6) {
  animation-delay: 0.9s;
}
.header .nav-primary li:nth-child(7) {
  animation-delay: 1s;
}
.header .nav-primary li:nth-child(8) {
  animation-delay: 1.1s;
}
.header .nav-primary li:nth-child(9) {
  animation-delay: 1.2s;
}
.header .nav-primary li:nth-child(10) {
  animation-delay: 1.3s;
}
.header .nav-primary a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.75rem 1.25rem;
  border-radius: 25px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
@media (max-width: 800px) {
  .header .nav-primary a {
    display: block;
    padding: 1rem 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 1.1rem;
  }
}
.header .nav-primary a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.08) 100%);
  border-radius: 25px;
  transform: scale(0);
  transition: transform 0.3s ease;
  z-index: -1;
}
@media (max-width: 800px) {
  .header .nav-primary a::before {
    border-radius: 0;
  }
}
.header .nav-primary a:hover {
  color: #000;
  transform: translateY(-2px);
}
@media (max-width: 800px) {
  .header .nav-primary a:hover {
    transform: translateX(10px);
  }
}
.header .nav-primary a:hover::before {
  transform: scale(1);
}
.header .nav-primary a.current-menu-item, .header .nav-primary a.current_page_item {
  color: #000;
  font-weight: 600;
}
.header .nav-primary a.current-menu-item::before, .header .nav-primary a.current_page_item::before {
  transform: scale(1);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.12) 100%);
}
.header .header-cta {
  margin-left: 1.5rem;
}
@media (max-width: 800px) {
  .header .header-cta {
    margin: 1rem 0 0 0;
    text-align: center;
  }
}
.header .header-cta a {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #000 0%, #333 100%);
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.header .header-cta a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}
.header .header-cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.header .header-cta a:hover::before {
  left: 100%;
}

body {
  padding-top: 5rem;
}
@media (min-width: 800px) {
  body {
    padding-top: 5.5rem;
  }
}

@keyframes logoSlideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes navItemSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.header-scroll-behavior {
  transition: all 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  .header {
    background: rgba(0, 0, 0, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  .header.scrolled {
    background: rgba(0, 0, 0, 0.98);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
  }
  .header .logo {
    background: linear-gradient(135deg, white 0%, #ccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .header .logo::after {
    background: linear-gradient(90deg, white, #ccc);
  }
}
@media (prefers-color-scheme: dark) and (max-width: 800px) {
  .header .nav-primary {
    background: rgba(0, 0, 0, 0.98);
    border-top-color: rgba(255, 255, 255, 0.1);
  }
}
@media (prefers-color-scheme: dark) {
  .header .nav-primary a {
    color: #ccc;
  }
  .header .nav-primary a:hover, .header .nav-primary a.current-menu-item, .header .nav-primary a.current_page_item {
    color: white;
  }
  .header .nav-primary a::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.15) 100%);
  }
  .header .nav-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .header .hamburger span {
    background: white;
  }
}
.site-footer {
  padding: 1rem;
  background-color: #000;
  text-align: center;
  color: #fff;
}

.section-about {
  padding: 120px 0;
}
.section-about .section-title {
  margin-bottom: 2rem;
  font-size: 1rem;
  text-align: center;
}
.section-about .section-title span {
  display: inline-block;
  padding: 0.2rem 2rem;
  background-color: #e5e7eb;
  font-weight: normal;
  border-radius: 15px;
}
@media (min-width: 800px) {
  .section-about .container {
    display: flex;
    gap: 120px;
    align-items: center;
  }
}
.section-about .about-content {
  width: 50%;
}
.section-about .about-image {
  width: 50%;
}
.section-about .about-image img {
  width: 100%;
}

.section-experience {
  padding: 4rem 0;
  background: linear-gradient(135deg, rgba(75, 85, 99, 0.02) 0%, rgba(75, 85, 99, 0.05) 100%);
}
.section-experience .section-title {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  text-align: center;
}
.section-experience .section-title span {
  display: inline-block;
  padding: 0.5rem 2.5rem;
  background: linear-gradient(135deg, #000 0%, rgb(25.5, 25.5, 25.5) 100%);
  color: #fff;
  font-weight: 600;
  border-radius: 25px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.section-experience .section-title span:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.section-experience .section-description {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 1.1rem;
  color: #333333;
  font-weight: 300;
}
.section-experience .experience-list {
  margin: 0 auto;
}
.section-experience .experience-list .item {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
  padding: 0;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(75, 85, 99, 0.1);
}
.section-experience .experience-list .item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.section-experience .experience-list .item:last-child {
  margin-bottom: 0;
}
@media (min-width: 800px) {
  .section-experience .experience-list .item {
    flex-direction: row;
    align-items: stretch;
  }
}
.section-experience .experience-list .item .item-image {
  width: 100%;
  height: 200px;
  background-color: rgba(75, 85, 99, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
@media (min-width: 800px) {
  .section-experience .experience-list .item .item-image {
    width: 180px;
    min-width: 180px;
    height: auto;
  }
}
.section-experience .experience-list .item .item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.section-experience .experience-list .item .item-image img:hover {
  transform: scale(1.05);
}
.section-experience .experience-list .item .item-content {
  flex: 1;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.section-experience .experience-list .item .item-content h3 {
  margin: 0 0 1rem 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
}
.section-experience .experience-list .item .item-content .company-description {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: rgba(75, 85, 99, 0.03);
  border-radius: 8px;
  border-left: 4px solid #000;
  font-style: italic;
  color: rgb(38.25, 38.25, 38.25);
  line-height: 1.5;
}
.section-experience .experience-list .item .item-content .what-did-i-do {
  margin-top: auto;
}
.section-experience .experience-list .item .item-content .what-did-i-do h4 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  padding-bottom: 0.5rem;
}
.section-experience .experience-list .item .item-content .what-did-i-do h4:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #000;
}
.section-experience .experience-list .item .item-content .what-did-i-do p, .section-experience .experience-list .item .item-content .what-did-i-do ul, .section-experience .experience-list .item .item-content .what-did-i-do ol {
  line-height: 1.6;
  color: rgb(25.5, 25.5, 25.5);
  margin-bottom: 1rem;
}
.section-experience .experience-list .item .item-content .what-did-i-do p:last-child, .section-experience .experience-list .item .item-content .what-did-i-do ul:last-child, .section-experience .experience-list .item .item-content .what-did-i-do ol:last-child {
  margin-bottom: 0;
}
.section-experience .experience-list .item .item-content .what-did-i-do ul {
  padding-left: 1.5rem;
}
.section-experience .experience-list .item .item-content .what-did-i-do ul li {
  margin-bottom: 0.5rem;
  position: relative;
}
.section-experience .experience-list .item .item-content .what-did-i-do ul li:before {
  content: "•";
  color: #000;
  font-weight: bold;
  position: absolute;
  left: -1rem;
}
.section-experience .experience-list .item .item-meta {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.08) 100%);
  padding: 1.5rem 2rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: #000;
  text-align: center;
  letter-spacing: 0.5px;
  border-top: 1px solid rgba(75, 85, 99, 0.1);
}
@media (min-width: 800px) {
  .section-experience .experience-list .item .item-meta {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    width: 120px;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-top: none;
    border-left: 1px solid rgba(75, 85, 99, 0.1);
  }
}
.section-experience .item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}
.section-experience .item:nth-child(1) {
  animation-delay: 0.1s;
}
.section-experience .item:nth-child(2) {
  animation-delay: 0.2s;
}
.section-experience .item:nth-child(3) {
  animation-delay: 0.3s;
}
.section-experience .item:nth-child(4) {
  animation-delay: 0.4s;
}
.section-experience .item:nth-child(5) {
  animation-delay: 0.5s;
}
.section-experience .item:nth-child(6) {
  animation-delay: 0.6s;
}
.section-experience .item:nth-child(7) {
  animation-delay: 0.7s;
}
.section-experience .item:nth-child(8) {
  animation-delay: 0.8s;
}
.section-experience .item:nth-child(9) {
  animation-delay: 0.9s;
}
.section-experience .item:nth-child(10) {
  animation-delay: 1s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.section-get-in-touch {
  padding: 6rem 0;
  background: linear-gradient(135deg, rgba(229, 231, 235, 0.1) 0%, rgba(229, 231, 235, 0.3) 50%, rgba(229, 231, 235, 0.1) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.section-get-in-touch::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 70%, rgba(0, 0, 0, 0.03) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(0, 0, 0, 0.02) 0%, transparent 50%);
  animation: float 20s ease-in-out infinite;
  z-index: 0;
}
.section-get-in-touch .container {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}
.section-get-in-touch .section-title {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  text-align: center;
}
.section-get-in-touch .section-title span {
  display: inline-block;
  padding: 0.7rem 3rem;
  background: linear-gradient(135deg, #000 0%, rgb(38.25, 38.25, 38.25) 100%);
  font-weight: 700;
  color: #fff;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.section-get-in-touch .section-title span::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}
.section-get-in-touch .section-title span:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
.section-get-in-touch .section-title span:hover::before {
  left: 100%;
}
.section-get-in-touch > p:first-of-type {
  font-size: 1.3rem;
  line-height: 1.6;
  color: rgb(25.5, 25.5, 25.5);
  margin-bottom: 3rem;
  font-weight: 300;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 800px) {
  .section-get-in-touch > p:first-of-type {
    font-size: 1.4rem;
  }
}
.section-get-in-touch a[href^=mailto] {
  display: inline-block !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #000 !important;
  text-decoration: none !important;
  padding: 1rem 2rem 1rem 4rem !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%) !important;
  border: 2px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 50px !important;
  margin: 0 0 3rem 0 !important;
  transition: all 0.4s ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}
.section-get-in-touch a[href^=mailto]::before {
  content: "" !important;
  position: absolute !important;
  left: 1.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23000000' class='bi bi-envelope' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}
.section-get-in-touch a[href^=mailto]:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important;
  background: linear-gradient(135deg, #000 0%, rgb(25.5, 25.5, 25.5) 100%) !important;
  color: white !important;
  border-color: #000 !important;
  text-decoration: none !important;
}
.section-get-in-touch a[href^=mailto]:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' class='bi bi-envelope' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z'/%3E%3C/svg%3E") !important;
  transform: translateY(-50%) scale(1.1) !important;
}
@media (min-width: 800px) {
  .section-get-in-touch a[href^=mailto] {
    font-size: 1rem !important;
  }
}
.section-get-in-touch > p:last-of-type {
  font-size: 1.1rem;
  color: #333333;
  margin-bottom: 2rem;
  font-weight: 400;
}
.section-get-in-touch ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.section-get-in-touch ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.9rem;
  color: #000 !important;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  font-size: 0;
  text-indent: -9999px;
}
.section-get-in-touch ul li a i {
  font-size: 1.6rem;
  transition: all 0.3s ease;
  text-indent: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.section-get-in-touch ul li a[href*=github]:hover {
  background: linear-gradient(135deg, #333 0%, #24292e 100%) !important;
  color: white !important;
  border-color: #333 !important;
}
.section-get-in-touch ul li a[href*=github]:hover i {
  color: white !important;
  transform: translate(-50%, -50%) scale(1.1);
}
.section-get-in-touch ul li a[href*=linkedin]:hover {
  background: linear-gradient(135deg, #0077b5 0%, #005885 100%) !important;
  color: white !important;
  border-color: #0077b5 !important;
}
.section-get-in-touch ul li a[href*=linkedin]:hover i {
  color: white !important;
  transform: translate(-50%, -50%) scale(1.1);
}
.section-get-in-touch ul li a[href*="x.com"]:hover, .section-get-in-touch ul li a[href*=twitter]:hover {
  background: linear-gradient(135deg, #000 0%, #333 100%) !important;
  color: white !important;
  border-color: #000 !important;
}
.section-get-in-touch ul li a[href*="x.com"]:hover i, .section-get-in-touch ul li a[href*=twitter]:hover i {
  color: white !important;
  transform: translate(-50%, -50%) scale(1.1);
}
.section-get-in-touch ul li a:hover {
  transform: translateY(-8px) scale(1.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
@media (min-width: 800px) {
  .section-get-in-touch ul li a {
    width: 70px;
    height: 70px;
  }
  .section-get-in-touch ul li a i {
    font-size: 1.8rem;
  }
}
.section-get-in-touch ul li {
  animation: floatSocial 3s ease-in-out infinite;
}
.section-get-in-touch ul li:nth-child(1) {
  animation-delay: 0s;
}
.section-get-in-touch ul li:nth-child(2) {
  animation-delay: 0.5s;
}
.section-get-in-touch ul li:nth-child(3) {
  animation-delay: 1s;
}
@media (min-width: 800px) {
  .section-get-in-touch {
    padding: 8rem 0;
  }
  .section-get-in-touch ul {
    gap: 2rem;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}
@keyframes floatSocial {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }
  100% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
}
.section-get-in-touch a[href^=mailto] {
  animation: pulse 4s ease-in-out infinite !important;
}

.section-hero {
  padding: 3rem 0;
  background: linear-gradient(135deg, rgba(75, 85, 99, 0.02) 0%, rgba(75, 85, 99, 0.08) 50%, rgba(75, 85, 99, 0.02) 100%);
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
@media (min-width: 800px) {
  .section-hero {
    padding: 5rem 0;
    min-height: 80vh;
  }
}
@media (min-width: 1024px) {
  .section-hero {
    padding: 6rem 0;
    min-height: 85vh;
  }
}
.section-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at 25% 75%, rgba(0, 0, 0, 0.03) 0%, transparent 50%), radial-gradient(circle at 75% 25%, rgba(0, 0, 0, 0.025) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.02) 0%, transparent 50%);
  animation: heroFloat 30s ease-in-out infinite;
  z-index: 0;
}
.section-hero::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 10%;
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.03), transparent);
  border-radius: 50%;
  animation: heroDecoration 20s linear infinite;
  z-index: 0;
}
@media (min-width: 800px) {
  .section-hero::after {
    width: 300px;
    height: 300px;
  }
}
.section-hero .container {
  position: relative;
  z-index: 1;
}
@media (min-width: 800px) {
  .section-hero .container {
    display: flex;
    gap: 4rem;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .section-hero .container {
    gap: 6rem;
  }
}
.section-hero .hero-content {
  margin-bottom: 3rem;
}
@media (min-width: 800px) {
  .section-hero .hero-content {
    width: 60%;
    margin-bottom: 0;
  }
}
.section-hero .hero-content h1 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #000;
  margin-bottom: 2rem;
  line-height: 1.2;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: heroTextReveal 1s ease 0.3s forwards;
  background: linear-gradient(135deg, #000 0%, #333 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (min-width: 800px) {
  .section-hero .hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .section-hero .hero-content h1 {
    font-size: 4rem;
  }
}
.section-hero .hero-content h1::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, #000, #666);
  border-radius: 2px;
  animation: heroUnderline 1.5s ease 0.8s forwards;
}
.section-hero .hero-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
  font-weight: 300;
  max-width: 100%;
  opacity: 0;
  transform: translateY(20px);
  animation: heroTextReveal 1s ease 0.6s forwards;
}
@media (min-width: 800px) {
  .section-hero .hero-content p {
    font-size: 1.2rem;
    line-height: 1.8;
  }
}
@media (min-width: 1024px) {
  .section-hero .hero-content p {
    font-size: 1.3rem;
  }
}
.section-hero .hero-content p strong, .section-hero .hero-content p b {
  font-weight: 600;
  color: #000;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
.section-hero .hero-content::after {
  content: "Scroll to explore my work ↓";
  display: block;
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: #666;
  font-weight: 400;
  opacity: 0;
  animation: heroTextReveal 1s ease 1.2s forwards;
}
@media (min-width: 800px) {
  .section-hero .hero-content::after {
    margin-top: 3rem;
  }
}
.section-hero .hero-image {
  position: relative;
}
@media (min-width: 800px) {
  .section-hero .hero-image {
    width: 40%;
  }
}
.section-hero .hero-image::before {
  content: "";
  position: absolute;
  top: -5%;
  left: -5%;
  right: -5%;
  bottom: -5%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
  border-radius: 30px;
  z-index: -1;
  opacity: 0;
  animation: heroImageReveal 1s ease 0.9s forwards;
}
.section-hero .hero-image img {
  width: 100%;
  height: auto;
  border-radius: 25px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
  filter: brightness(0.95) contrast(1.05);
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  animation: heroImageReveal 1.2s ease 0.6s forwards;
}
.section-hero .hero-image img:hover {
  transform: scale(1.02) translateY(-5px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
  filter: brightness(1) contrast(1.1);
}
.section-hero .hero-image::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 50px;
  height: 50px;
  background: linear-gradient(45deg, #000, #333);
  border-radius: 50%;
  opacity: 0.8;
  animation: heroImageFloat 4s ease-in-out infinite;
  z-index: -1;
}
@media (min-width: 800px) {
  .section-hero .hero-image::after {
    width: 70px;
    height: 70px;
    top: -15px;
    right: -15px;
  }
}

@keyframes heroFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(30px, -20px) rotate(2deg) scale(1.05);
  }
  66% {
    transform: translate(-20px, 30px) rotate(-1deg) scale(0.95);
  }
}
@keyframes heroDecoration {
  0% {
    transform: rotate(0deg);
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.3;
  }
}
@keyframes heroTextReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroUnderline {
  to {
    width: 60px;
  }
}
@keyframes heroImageReveal {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes heroImageFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(180deg);
  }
}
@media (max-width: 800px) {
  .section-hero {
    min-height: 60vh;
    padding: 2rem 0;
  }
  .section-hero .hero-content {
    text-align: center;
  }
  .section-hero .hero-content h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
  .section-hero .hero-content p {
    font-size: 1rem;
    line-height: 1.6;
  }
  .section-hero .hero-content::after {
    margin-top: 2rem;
    font-size: 0.8rem;
  }
  .section-hero .hero-image {
    max-width: 300px;
    margin: 0 auto;
  }
}
@media (prefers-color-scheme: dark) {
  .section-hero {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.9) 50%, rgba(0, 0, 0, 0.95) 100%);
  }
  .section-hero .hero-content h1 {
    background: linear-gradient(135deg, white 0%, #ccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .section-hero .hero-content p {
    color: rgba(255, 255, 255, 0.9);
  }
  .section-hero .hero-content::after {
    color: rgba(255, 255, 255, 0.6);
  }
}
.section-member {
  padding: 5rem 1.25rem;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.02) 100%);
  position: relative;
  overflow: hidden;
}
@media (min-width: 800px) {
  .section-member {
    padding: 6rem 0;
  }
}
.section-member::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle at 20% 80%, rgba(0, 0, 0, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0, 0, 0, 0.025) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(0, 0, 0, 0.02) 0%, transparent 50%);
  animation: platformsFloat 25s ease-in-out infinite;
  z-index: 0;
}
.section-member > * {
  position: relative;
  z-index: 1;
}
.section-member .section-title {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  text-align: center;
}
.section-member .section-title span {
  display: inline-block;
  padding: 0.7rem 3rem;
  background: linear-gradient(135deg, #000 0%, #333 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.section-member .section-title span::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}
.section-member .section-title span:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
.section-member .section-title span:hover::before {
  left: 100%;
}
.section-member .section-description {
  text-align: center;
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 4rem;
  font-weight: 300;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
@media (min-width: 800px) {
  .section-member .section-description {
    font-size: 1.3rem;
    margin-bottom: 5rem;
  }
}
.section-member .member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 800px) {
  .section-member .member-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .section-member .member-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
  }
}
.section-member .member-grid .skill {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-radius: 15px;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  cursor: default;
  opacity: 0;
  transform: translateY(40px) scale(0.9);
  animation: platformsFadeInUp 0.8s ease forwards;
}
.section-member .member-grid .skill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 15px;
  z-index: 1;
}
.section-member .member-grid .skill:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 15px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
}
.section-member .member-grid .skill:hover::before {
  opacity: 1;
}
.section-member .member-grid .skill:hover img {
  transform: scale(1.05);
  filter: brightness(1.05);
}
.section-member .member-grid .skill:hover .skill-name {
  color: #000;
  font-weight: 600;
}
.section-member .member-grid .skill img {
  width: auto;
  height: 50px;
  max-width: 80px;
  object-fit: contain;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  filter: brightness(0.95);
}
@media (min-width: 800px) {
  .section-member .member-grid .skill img {
    height: 55px;
    max-width: 90px;
  }
}
@media (min-width: 1024px) {
  .section-member .member-grid .skill img {
    height: 60px;
    max-width: 100px;
  }
}
.section-member .member-grid .skill .skill-name {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
  transition: all 0.3s ease;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 2;
}
@media (min-width: 800px) {
  .section-member .member-grid .skill .skill-name {
    font-size: 0.95rem;
    margin-top: 1.2rem;
  }
}
@media (min-width: 1024px) {
  .section-member .member-grid .skill .skill-name {
    font-size: 1rem;
  }
}
.section-member .member-grid .skill:nth-child(1) {
  animation-delay: 0.1s;
}
.section-member .member-grid .skill:nth-child(2) {
  animation-delay: 0.2s;
}
.section-member .member-grid .skill:nth-child(3) {
  animation-delay: 0.3s;
}
.section-member .member-grid .skill:nth-child(4) {
  animation-delay: 0.4s;
}
.section-member .member-grid .skill:nth-child(5) {
  animation-delay: 0.5s;
}
.section-member .member-grid .skill:nth-child(6) {
  animation-delay: 0.6s;
}
.section-member .member-grid .skill:nth-child(7) {
  animation-delay: 0.7s;
}
.section-member .member-grid .skill:nth-child(8) {
  animation-delay: 0.8s;
}
.section-member .member-grid .skill:nth-child(9) {
  animation-delay: 0.9s;
}
.section-member .member-grid .skill:nth-child(10) {
  animation-delay: 1s;
}
.section-member .member-grid .skill:nth-child(11) {
  animation-delay: 1.1s;
}
.section-member .member-grid .skill:nth-child(12) {
  animation-delay: 1.2s;
}
.section-member .member-grid .skill:nth-child(13) {
  animation-delay: 1.3s;
}
.section-member .member-grid .skill:nth-child(14) {
  animation-delay: 1.4s;
}
.section-member .member-grid .skill:nth-child(15) {
  animation-delay: 1.5s;
}
.section-member .member-grid .skill:nth-child(16) {
  animation-delay: 1.6s;
}
.section-member .member-grid .skill:nth-child(17) {
  animation-delay: 1.7s;
}
.section-member .member-grid .skill:nth-child(18) {
  animation-delay: 1.8s;
}
.section-member .member-grid .skill:nth-child(19) {
  animation-delay: 1.9s;
}
.section-member .member-grid .skill:nth-child(20) {
  animation-delay: 2s;
}
.section-member .member-grid .platform-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  cursor: pointer;
}
.section-member .member-grid .platform-link:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.section-member .member-grid .platform-link:hover .external-link-icon {
  opacity: 1;
  transform: scale(1.2);
}
.section-member .member-grid .platform-link:hover .skill-name {
  color: #000;
  font-weight: 600;
}
.section-member .member-grid .platform-link:hover img {
  transform: scale(1.08);
  filter: brightness(1.1);
}
.section-member .member-grid .platform-link .external-link-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #000 0%, #333 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transition: all 0.3s ease;
  transform: scale(0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 3;
}
@media (min-width: 800px) {
  .section-member .member-grid .platform-link .external-link-icon {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}
.section-member .member-grid .platform-link[href*="github.com"]:hover {
  box-shadow: 0 12px 35px rgba(51, 51, 51, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.section-member .member-grid .platform-link[href*="github.com"]:hover .external-link-icon {
  background: linear-gradient(135deg, #333 0%, #24292e 100%);
}
.section-member .member-grid .platform-link[href*="linkedin.com"]:hover {
  box-shadow: 0 12px 35px rgba(0, 119, 181, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.section-member .member-grid .platform-link[href*="linkedin.com"]:hover .external-link-icon {
  background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
}
.section-member .member-grid .platform-link[href*="twitter.com"]:hover, .section-member .member-grid .platform-link[href*="x.com"]:hover {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.section-member .member-grid .platform-link[href*="twitter.com"]:hover .external-link-icon, .section-member .member-grid .platform-link[href*="x.com"]:hover .external-link-icon {
  background: linear-gradient(135deg, #000 0%, #333 100%);
}
.section-member .member-grid .platform-link[href*="stackoverflow.com"]:hover {
  box-shadow: 0 12px 35px rgba(244, 128, 36, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.section-member .member-grid .platform-link[href*="stackoverflow.com"]:hover .external-link-icon {
  background: linear-gradient(135deg, #f48024 0%, #d4630a 100%);
}
.section-member .member-grid .platform-link[href*="medium.com"]:hover {
  box-shadow: 0 12px 35px rgba(0, 171, 108, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.section-member .member-grid .platform-link[href*="medium.com"]:hover .external-link-icon {
  background: linear-gradient(135deg, #00ab6c 0%, #008a55 100%);
}
.section-member .member-grid .platform-link[href*="dribbble.com"]:hover {
  box-shadow: 0 12px 35px rgba(234, 76, 137, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.section-member .member-grid .platform-link[href*="dribbble.com"]:hover .external-link-icon {
  background: linear-gradient(135deg, #ea4c89 0%, #d73670 100%);
}
.section-member .member-grid .platform-link[href*="behance.net"]:hover {
  box-shadow: 0 12px 35px rgba(23, 105, 255, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.section-member .member-grid .platform-link[href*="behance.net"]:hover .external-link-icon {
  background: linear-gradient(135deg, #1769ff 0%, #0d47a1 100%);
}
.section-member .member-grid .platform-link[href*="codepen.io"]:hover {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.section-member .member-grid .platform-link[href*="codepen.io"]:hover .external-link-icon {
  background: linear-gradient(135deg, #000 0%, #333 100%);
}
.section-member .member-grid .platform-link[href*="instagram.com"]:hover {
  box-shadow: 0 12px 35px rgba(228, 64, 95, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.section-member .member-grid .platform-link[href*="instagram.com"]:hover .external-link-icon {
  background: linear-gradient(135deg, #e4405f 0%, #c13584 100%);
}
.section-member .skill.popular {
  background: linear-gradient(145deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 1px solid rgba(255, 215, 0, 0.15);
}
.section-member .skill.popular:hover {
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.15), 0 4px 15px rgba(0, 0, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.25);
}
.section-member .skill.popular.platform-link:hover {
  box-shadow: 0 12px 35px rgba(255, 215, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.section-member .skill.featured {
  animation: platformsBreathe 4s ease-in-out infinite;
}

@keyframes platformsFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(30px, -30px) rotate(2deg);
  }
  66% {
    transform: translate(-20px, 20px) rotate(-1deg);
  }
}
@keyframes platformsFadeInUp {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes platformsBreathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
.platform-link.loading {
  pointer-events: none;
  opacity: 0.7;
}
.platform-link.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-top: 2px solid #000;
  border-radius: 50%;
  animation: platformLoading 1s linear infinite;
  transform: translate(-50%, -50%);
  z-index: 10;
}

@keyframes platformLoading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.platform-link:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
  border-radius: 15px;
}
.platform-link:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 15px rgba(0, 0, 0, 0.08);
}

@media (max-width: 800px) {
  .section-member .member-grid .skill {
    padding: 1.25rem 0.75rem;
  }
  .section-member .member-grid .skill img {
    height: 40px;
    max-width: 70px;
  }
  .section-member .member-grid .skill .skill-name {
    font-size: 0.85rem;
    margin-top: 0.75rem;
  }
  .section-member .member-grid .skill.platform-link .external-link-icon {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    top: 0.75rem;
    right: 0.75rem;
  }
}
.section-skills {
  padding: 5rem 0;
  background: linear-gradient(135deg, rgba(229, 231, 235, 0.02) 0%, rgba(229, 231, 235, 0.08) 50%, rgba(229, 231, 235, 0.02) 100%);
  position: relative;
  overflow: hidden;
}
.section-skills::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 25% 25%, rgba(0, 0, 0, 0.02) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.015) 0%, transparent 50%);
  animation: skillsBackground 30s ease-in-out infinite;
  z-index: 0;
}
.section-skills .container {
  position: relative;
  z-index: 1;
}
.section-skills .section-title {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  text-align: center;
}
.section-skills .section-title span {
  display: inline-block;
  padding: 0.7rem 3rem;
  background: linear-gradient(135deg, #000 0%, rgb(38.25, 38.25, 38.25) 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.section-skills .section-title span::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}
.section-skills .section-title span:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
.section-skills .section-title span:hover::before {
  left: 100%;
}
.section-skills .section-description {
  text-align: center;
  font-size: 1.2rem;
  color: rgb(38.25, 38.25, 38.25);
  margin-bottom: 4rem;
  font-weight: 300;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
@media (min-width: 800px) {
  .section-skills .section-description {
    font-size: 1.3rem;
    margin-bottom: 5rem;
  }
}
.section-skills .skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 800px) {
  .section-skills .skills-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .section-skills .skills-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 3rem;
  }
}
.section-skills .skills-grid .skill {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  animation: skillsFadeInUp 0.6s ease forwards;
}
.section-skills .skills-grid .skill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, transparent 50%, rgba(0, 0, 0, 0.01) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 20px;
  z-index: 1;
}
.section-skills .skills-grid .skill:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
}
.section-skills .skills-grid .skill:hover::before {
  opacity: 1;
}
.section-skills .skills-grid .skill:hover img {
  transform: scale(1.1) rotate(5deg);
  filter: brightness(1.1);
}
.section-skills .skills-grid .skill:hover .skill-name {
  color: #000;
  font-weight: 600;
}
.section-skills .skills-grid .skill img {
  width: auto;
  height: 60px;
  max-width: 80px;
  object-fit: contain;
  transition: all 0.4s ease;
  filter: brightness(0.95);
  position: relative;
  z-index: 2;
}
@media (min-width: 800px) {
  .section-skills .skills-grid .skill img {
    height: 70px;
    max-width: 90px;
  }
}
@media (min-width: 1024px) {
  .section-skills .skills-grid .skill img {
    height: 80px;
    max-width: 100px;
  }
}
.section-skills .skills-grid .skill .skill-name {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgb(25.5, 25.5, 25.5);
  transition: all 0.3s ease;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 2;
}
@media (min-width: 800px) {
  .section-skills .skills-grid .skill .skill-name {
    font-size: 1rem;
    margin-top: 1.8rem;
  }
}
@media (min-width: 1024px) {
  .section-skills .skills-grid .skill .skill-name {
    font-size: 1.1rem;
    margin-top: 2rem;
  }
}
.section-skills .skills-grid .skill:nth-child(1) {
  animation-delay: 0.05s;
}
.section-skills .skills-grid .skill:nth-child(2) {
  animation-delay: 0.1s;
}
.section-skills .skills-grid .skill:nth-child(3) {
  animation-delay: 0.15s;
}
.section-skills .skills-grid .skill:nth-child(4) {
  animation-delay: 0.2s;
}
.section-skills .skills-grid .skill:nth-child(5) {
  animation-delay: 0.25s;
}
.section-skills .skills-grid .skill:nth-child(6) {
  animation-delay: 0.3s;
}
.section-skills .skills-grid .skill:nth-child(7) {
  animation-delay: 0.35s;
}
.section-skills .skills-grid .skill:nth-child(8) {
  animation-delay: 0.4s;
}
.section-skills .skills-grid .skill:nth-child(9) {
  animation-delay: 0.45s;
}
.section-skills .skills-grid .skill:nth-child(10) {
  animation-delay: 0.5s;
}
.section-skills .skills-grid .skill:nth-child(11) {
  animation-delay: 0.55s;
}
.section-skills .skills-grid .skill:nth-child(12) {
  animation-delay: 0.6s;
}
.section-skills .skills-grid .skill:nth-child(13) {
  animation-delay: 0.65s;
}
.section-skills .skills-grid .skill:nth-child(14) {
  animation-delay: 0.7s;
}
.section-skills .skills-grid .skill:nth-child(15) {
  animation-delay: 0.75s;
}
.section-skills .skills-grid .skill:nth-child(16) {
  animation-delay: 0.8s;
}
.section-skills .skills-grid .skill:nth-child(17) {
  animation-delay: 0.85s;
}
.section-skills .skills-grid .skill:nth-child(18) {
  animation-delay: 0.9s;
}
.section-skills .skills-grid .skill:nth-child(19) {
  animation-delay: 0.95s;
}
.section-skills .skills-grid .skill:nth-child(20) {
  animation-delay: 1s;
}
.section-skills .skills-grid .skill:nth-child(21) {
  animation-delay: 1.05s;
}
.section-skills .skills-grid .skill:nth-child(22) {
  animation-delay: 1.1s;
}
.section-skills .skills-grid .skill:nth-child(23) {
  animation-delay: 1.15s;
}
.section-skills .skills-grid .skill:nth-child(24) {
  animation-delay: 1.2s;
}
.section-skills .skills-grid .skill:nth-child(25) {
  animation-delay: 1.25s;
}
.section-skills .skills-grid .skill:nth-child(26) {
  animation-delay: 1.3s;
}
.section-skills .skills-grid .skill:nth-child(27) {
  animation-delay: 1.35s;
}
.section-skills .skills-grid .skill:nth-child(28) {
  animation-delay: 1.4s;
}
.section-skills .skills-grid .skill:nth-child(29) {
  animation-delay: 1.45s;
}
.section-skills .skills-grid .skill:nth-child(30) {
  animation-delay: 1.5s;
}
.section-skills .skills-grid .skill:nth-child(31) {
  animation-delay: 1.55s;
}
.section-skills .skills-grid .skill:nth-child(32) {
  animation-delay: 1.6s;
}
.section-skills .skills-grid .skill:nth-child(33) {
  animation-delay: 1.65s;
}
.section-skills .skills-grid .skill:nth-child(34) {
  animation-delay: 1.7s;
}
.section-skills .skills-grid .skill:nth-child(35) {
  animation-delay: 1.75s;
}
.section-skills .skills-grid .skill:nth-child(36) {
  animation-delay: 1.8s;
}
.section-skills .skills-grid .skill:nth-child(37) {
  animation-delay: 1.85s;
}
.section-skills .skills-grid .skill:nth-child(38) {
  animation-delay: 1.9s;
}
.section-skills .skills-grid .skill:nth-child(39) {
  animation-delay: 1.95s;
}
.section-skills .skills-grid .skill:nth-child(40) {
  animation-delay: 2s;
}
.section-skills .skills-grid .skill:nth-child(41) {
  animation-delay: 2.05s;
}
.section-skills .skills-grid .skill:nth-child(42) {
  animation-delay: 2.1s;
}
.section-skills .skills-grid .skill:nth-child(43) {
  animation-delay: 2.15s;
}
.section-skills .skills-grid .skill:nth-child(44) {
  animation-delay: 2.2s;
}
.section-skills .skills-grid .skill:nth-child(45) {
  animation-delay: 2.25s;
}
.section-skills .skills-grid .skill:nth-child(46) {
  animation-delay: 2.3s;
}
.section-skills .skills-grid .skill:nth-child(47) {
  animation-delay: 2.35s;
}
.section-skills .skills-grid .skill:nth-child(48) {
  animation-delay: 2.4s;
}
.section-skills .skills-grid .skill:nth-child(49) {
  animation-delay: 2.45s;
}
.section-skills .skills-grid .skill:nth-child(50) {
  animation-delay: 2.5s;
}
@media (max-width: 800px) {
  .section-skills .skills-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@keyframes skillsBackground {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1) rotate(2deg);
    opacity: 0.8;
  }
}
@keyframes skillsFadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.skill.featured::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #000, #333333, #000);
  border-radius: 22px;
  z-index: -1;
  animation: skillsPulse 3s ease-in-out infinite;
}

@keyframes skillsPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.02);
  }
}
.skill.frontend:hover {
  box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2), 0 8px 25px rgba(0, 0, 0, 0.08);
}
.skill.backend:hover {
  box-shadow: 0 20px 40px rgba(231, 76, 60, 0.2), 0 8px 25px rgba(0, 0, 0, 0.08);
}
.skill.tools:hover {
  box-shadow: 0 20px 40px rgba(243, 156, 18, 0.2), 0 8px 25px rgba(0, 0, 0, 0.08);
}
.skill.database:hover {
  box-shadow: 0 20px 40px rgba(39, 174, 96, 0.2), 0 8px 25px rgba(0, 0, 0, 0.08);
}

.section-work {
  padding: 3rem 0 6rem;
  background: linear-gradient(135deg, rgba(75, 85, 99, 0.01) 0%, rgba(75, 85, 99, 0.04) 50%, rgba(75, 85, 99, 0.01) 100%);
  position: relative;
  overflow: hidden;
}
.section-work::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 15% 85%, rgba(0, 0, 0, 0.02) 0%, transparent 50%), radial-gradient(circle at 85% 15%, rgba(0, 0, 0, 0.015) 0%, transparent 50%);
  animation: workBackground 20s ease-in-out infinite;
  z-index: 0;
}
.section-work .container {
  position: relative;
  z-index: 1;
}
.section-work .section-title {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  text-align: center;
}
.section-work .section-title span {
  display: inline-block;
  padding: 0.7rem 3rem;
  background: linear-gradient(135deg, #000 0%, rgb(38.25, 38.25, 38.25) 100%);
  font-weight: 700;
  color: #fff;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.section-work .section-title span::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}
.section-work .section-title span:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
.section-work .section-title span:hover::before {
  left: 100%;
}
.section-work .section-description {
  text-align: center;
  font-size: 1.2rem;
  color: rgb(38.25, 38.25, 38.25);
  margin-bottom: 4rem;
  font-weight: 300;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
@media (min-width: 800px) {
  .section-work .section-description {
    font-size: 1.3rem;
    margin-bottom: 5rem;
  }
}
.section-work .work-list {
  max-width: 1200px;
  margin: 0 auto;
}
.section-work .work-list .item {
  margin-bottom: 3rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: workFadeInUp 0.8s ease forwards;
}
.section-work .work-list .item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.08);
}
.section-work .work-list .item:hover .item-media img, .section-work .work-list .item:hover .item-media video {
  transform: scale(1.05);
}
.section-work .work-list .item:hover .item-description h3 a {
  color: rgb(12.75, 12.75, 12.75);
  transform: translateX(5px);
}
.section-work .work-list .item:last-child {
  margin-bottom: 0;
}
@media (min-width: 800px) {
  .section-work .work-list .item {
    display: flex;
    align-items: stretch;
  }
}
.section-work .work-list .item:nth-child(1) {
  animation-delay: 0.15s;
}
.section-work .work-list .item:nth-child(2) {
  animation-delay: 0.3s;
}
.section-work .work-list .item:nth-child(3) {
  animation-delay: 0.45s;
}
.section-work .work-list .item:nth-child(4) {
  animation-delay: 0.6s;
}
.section-work .work-list .item:nth-child(5) {
  animation-delay: 0.75s;
}
.section-work .work-list .item:nth-child(6) {
  animation-delay: 0.9s;
}
.section-work .work-list .item:nth-child(7) {
  animation-delay: 1.05s;
}
.section-work .work-list .item:nth-child(8) {
  animation-delay: 1.2s;
}
.section-work .work-list .item:nth-child(9) {
  animation-delay: 1.35s;
}
.section-work .work-list .item:nth-child(10) {
  animation-delay: 1.5s;
}
.section-work .work-list .item:nth-child(11) {
  animation-delay: 1.65s;
}
.section-work .work-list .item:nth-child(12) {
  animation-delay: 1.8s;
}
.section-work .work-list .item:nth-child(13) {
  animation-delay: 1.95s;
}
.section-work .work-list .item:nth-child(14) {
  animation-delay: 2.1s;
}
.section-work .work-list .item:nth-child(15) {
  animation-delay: 2.25s;
}
.section-work .work-list .item:nth-child(16) {
  animation-delay: 2.4s;
}
.section-work .work-list .item:nth-child(17) {
  animation-delay: 2.55s;
}
.section-work .work-list .item:nth-child(18) {
  animation-delay: 2.7s;
}
.section-work .work-list .item:nth-child(19) {
  animation-delay: 2.85s;
}
.section-work .work-list .item:nth-child(20) {
  animation-delay: 3s;
}
.section-work .work-list .item .item-media {
  background: linear-gradient(135deg, rgba(75, 85, 99, 0.03) 0%, rgba(75, 85, 99, 0.08) 100%);
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 800px) {
  .section-work .work-list .item .item-media {
    width: 50%;
  }
}
.section-work .work-list .item .item-media::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.02) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.015) 0%, transparent 50%);
  z-index: 1;
}
.section-work .work-list .item .item-media img, .section-work .work-list .item .item-media video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}
.section-work .work-list .item .item-media img:hover, .section-work .work-list .item .item-media video:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.section-work .work-list .item .item-media video {
  cursor: pointer;
}
.section-work .work-list .item .item-media video:hover {
  filter: brightness(1.05);
}
.section-work .work-list .item .item-description {
  padding: 2.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (min-width: 800px) {
  .section-work .work-list .item .item-description {
    width: 50%;
  }
}
.section-work .work-list .item .item-description h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}
@media (min-width: 800px) {
  .section-work .work-list .item .item-description h3 {
    font-size: 1.6rem;
  }
}
.section-work .work-list .item .item-description h3 a {
  color: #000;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  display: inline-block;
}
.section-work .work-list .item .item-description h3 a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #000, #333333);
  transition: width 0.3s ease;
}
.section-work .work-list .item .item-description h3 a:hover::after {
  width: 100%;
}
.section-work .work-list .item .item-description h3 a[target=_blank]::before {
  content: "↗";
  font-size: 0.8em;
  margin-left: 0.5rem;
  opacity: 0.6;
  transition: all 0.3s ease;
}
.section-work .work-list .item .item-description h3 a[target=_blank]:hover::before {
  opacity: 1;
  transform: translate(2px, -2px);
}
.section-work .work-list .item .item-description > p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgb(25.5, 25.5, 25.5);
  margin-bottom: 2rem;
  flex-grow: 1;
}
.section-work .work-list .item .item-description .work-skills {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}
.section-work .work-list .item .item-description .work-skills .skill {
  display: flex;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(75, 85, 99, 0.05) 0%, rgba(75, 85, 99, 0.08) 100%);
  border-radius: 25px;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgb(12.75, 12.75, 12.75);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.section-work .work-list .item .item-description .work-skills .skill:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.12) 100%);
  color: #000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.section-work .work-list .item .item-description .work-skills .skill img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 3px;
  transition: transform 0.3s ease;
}
.section-work .work-list .item .item-description .work-skills .skill:hover img {
  transform: scale(1.1);
}
.section-work .work-list .item .item-description .work-skills .skill .skill-title {
  white-space: nowrap;
}

@keyframes workBackground {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20px, -20px) scale(1.05);
  }
}
@keyframes workFadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.work-list .item.featured {
  border: 2px solid rgba(0, 0, 0, 0.1);
}
.work-list .item.featured::before {
  content: "Featured";
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, #000 0%, rgb(25.5, 25.5, 25.5) 100%);
  color: white;
  padding: 0.3rem 1rem;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
}
.work-list .item.featured:hover {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

@media (max-width: 800px) {
  .section-work .work-list .item .item-media {
    padding: 1.5rem;
  }
  .section-work .work-list .item .item-description {
    padding: 1.5rem;
  }
  .section-work .work-list .item .item-description h3 {
    font-size: 1.3rem;
  }
  .section-work .work-list .item .item-description .work-skills .skill {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
  .section-work .work-list .item .item-description .work-skills .skill img {
    width: 18px;
    height: 18px;
  }
}

/*# sourceMappingURL=style.css.map */