/* NID Portfolio Website - Main CSS */
/* ========================================
   Base Styles & Reset
   ======================================== */
* {margin: 0;padding: 0;box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {font-family: 'M PLUS 1p', sans-serif;color: #232323;background-color: #f9fafb;line-height: 1.5;overflow-x: hidden;}
a {text-decoration: none;color: inherit;}
img {max-width: 100%;height: auto;display: block;}
button {font-family: 'M PLUS 1p', sans-serif;}

/* Header */
.header {position: fixed;top: 0;left: 0;right: 0;background-color: rgba(255, 255, 255, 0.7);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);z-index: 50;}
.header-container {max-width: 1000px;margin: 0 auto;padding: 0 1rem;display: flex;align-items: center;justify-content: space-between;height: 4rem;}
@media (min-width: 640px) {.header-container {padding: 0 1.5rem;}}
@media (min-width: 1024px) {.header-container {padding: 0 2rem;}}
.logo-link {display: flex;align-items: center;}
.logo-svg {height: 27px;width: 80px;}
.nav {display: none;gap: 2rem;}
@media (min-width: 768px) {.nav {display: flex;}}
.nav-link {color: #232323;letter-spacing: 0.2px;transition: color 0.3s;font-weight: bold;font-size: 14px;}
.nav-link:hover {color: #4154a3;}
.nav-link.active {color: #4154a3;border-bottom: 2px solid #4154a3;}
.language-switcher {display: none;align-items: center;gap: 0.5rem;margin-left: 2rem;}
@media (min-width: 768px) {.language-switcher {display: flex;}}
.language-link {color: #232323;font-size: 14px;font-weight: bold;letter-spacing: 0.2px;transition: color 0.3s;cursor: pointer;}
.language-link:hover {color: #4154a3;}
.language-link.active {color: #4154a3;}
.language-divider {color: #d1d5db;font-size: 14px;font-weight: bold;}
.mobile-menu-btn {display: block;padding: 0.5rem;background: none;border: none;cursor: pointer;}
@media (min-width: 768px) {.mobile-menu-btn {display: none;}}

/* Main Content */
.main-content {padding-top: 4rem;min-height: calc(100vh - 4rem);}
.container {max-width: 1000px;margin: 0 auto;padding: 0 1rem;}
@media (min-width: 640px) {.container {padding: 0 1.5rem;}}
@media (min-width: 1024px) {.container {padding: 0 2rem;}}

/* Hero Section */
.hero {width: 100%;height: 480px;position: relative;overflow: hidden;}
@media (min-width: 640px) {.hero {height: 600px;}}
@media (min-width: 768px) {.hero {height: 720px;}}
.hero-background {width: 100%;height: 100%;object-fit: cover;}
.hero-overlay {position: absolute;inset: 0;background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2), rgba(0,0,0,0.5));}
.hero-content {position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;}
.hero-content > div {text-align: center;padding: 0 1rem;}
.hero-logo {width: 350px;height: auto;margin: 0 auto 1.5rem;}
@media (min-width: 640px) {.hero-logo {width: 500px;}}
.hero-subtitle {font-size: 18px;color: white;margin-bottom: 2rem;letter-spacing: 0.67px;text-shadow: 0 2px 4px rgba(0,0,0,0.3);}
@media (min-width: 640px) {.hero-subtitle {font-size: 22px;}}
@media (min-width: 768px) {.hero-subtitle {font-size: 26px;}}
.hero-description {font-size: 14px;color: rgba(255,255,255,0.9);max-width: 42rem;margin: 0 auto 2rem;line-height: 1.6;}
@media (min-width: 640px) {.hero-description {font-size: 16px;}}
.desktop-br {display: none;}
@media (min-width: 768px) {.desktop-br {display: block;}}

/* Page Hero */
.page-hero {width: 100%;height: 300px;position: relative;overflow: hidden;margin-bottom: 3rem;}
.page-hero-image {width: 100%;height: 100%;object-fit: cover;}
.page-hero-overlay {position: absolute;inset: 0;background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));display: flex;align-items: center;justify-content: center;}
.page-hero-title {font-size: 3rem;color: white;letter-spacing: 0.1em;text-shadow: 0 2px 8px rgba(0,0,0,0.5);font-weight: 400;}
@media (min-width: 768px) {.page-hero-title {font-size: 4rem;}}

/* Sections */
.section {padding: 5rem 0;}
.section-small {padding: 3rem 0;}
.section-title {font-size: 2rem;letter-spacing: 0.1em;margin-bottom: 1.5rem;text-align: center;font-weight: 400;}
@media (min-width: 768px) {.section-title {font-size: 2.5rem;}}
.section-divider {width: 60px;height: 3px;background-color: #4154a3;margin: 0 auto 2rem;}
.section-cta {text-align: center;margin-top: 3rem;}

/* Buttons */
.btn-primary {display: inline-block;padding: 0.875rem 2rem;background-color: #4154a3;color: white;border: none;border-radius: 4px;font-weight: bold;font-size: 14px;letter-spacing: 0.1em;cursor: pointer;transition: all 0.3s;}
.btn-primary:hover {background-color: #2e3d7a;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(65, 84, 163, 0.3);}
.btn-secondary {display: inline-block;padding: 0.875rem 2rem;background-color: transparent;color: #4154a3;border: 2px solid #4154a3;border-radius: 4px;font-weight: bold;font-size: 14px;letter-spacing: 0.1em;cursor: pointer;transition: all 0.3s;}
.btn-secondary:hover {background-color: #4154a3;color: white;}

/* Introduction Section */
.intro-section {max-width: 1000px;margin: 0 auto;padding: 5rem 1rem;}
@media (min-width: 640px) {.intro-section {padding: 5rem 1.5rem;}}
@media (min-width: 1024px) {.intro-section {padding: 5rem 2rem;}}
.intro-content {text-align: center;margin-bottom: 3rem;}
.intro-text {font-size: 1rem;line-height: 1.8;color: #232323;max-width: 800px;margin: 0 auto 3rem;}

/* Highlights */
.highlights-grid {display: grid;grid-template-columns: 1fr;gap: 2rem;margin-bottom: 3rem;}
@media (min-width: 768px) {.highlights-grid {grid-template-columns: repeat(3, 1fr);}}
.highlight-card {background-color: white;padding: 2rem;border-radius: 8px;box-shadow: 0 1px 3px rgba(0,0,0,0.1);text-align: center;}
.highlight-title {font-size: 1.25rem;margin-bottom: 1rem;color: #4154a3;font-weight: 500;}
.highlight-description {font-size: 0.95rem;line-height: 1.7;color: #4b5563;}

/* Featured Work */
.featured-work-section {margin-top: 5rem;margin-bottom: 5rem;}
.featured-list {display: flex;flex-direction: column;gap: 1.5rem;margin-top: 2rem;}
.featured-item {display: block;border-left: 4px solid #4154a3;padding-left: 1.5rem;padding-top: 1rem;padding-bottom: 1rem;transition: background-color 0.15s ease-in-out;}
.featured-item:hover {background-color: #f9fafb;}
.featured-header {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 0.5rem;flex-wrap: wrap;gap: 0.5rem;}
.featured-title {font-size: 1.25rem;color: #232323;font-weight: 400;letter-spacing: 0.025em;}
.featured-period {font-size: 0.875rem;color: #4154a3;white-space: nowrap;letter-spacing: 0.025em;}
.featured-description {font-size: 0.875rem;line-height: 1.625;color: #232323;font-family: 'M PLUS 1p', sans-serif;}

/* Portfolio Preview */
.portfolio-preview-section {margin-top: 5rem;margin-bottom: 5rem;}
.portfolio-preview-grid {display: grid;grid-template-columns: 1fr;gap: 2rem;margin-top: 2rem;}
@media (min-width: 768px) {.portfolio-preview-grid {grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 1024px) {.portfolio-preview-grid {grid-template-columns: repeat(3, 1fr);}}
.portfolio-preview-card {background-color: white;border-radius: 8px;overflow: hidden;box-shadow: 0 1px 3px rgba(0,0,0,0.1);transition: all 0.3s;display: block;}
.portfolio-preview-card:hover {box-shadow: 0 4px 12px rgba(0,0,0,0.15);transform: translateY(-4px);}
.portfolio-preview-image {width: 100%;height: 200px;overflow: hidden;}
.portfolio-preview-image img {width: 100%;height: 100%;object-fit: cover;}
.portfolio-preview-content {padding: 1.5rem;}
.portfolio-preview-title {font-size: 1.125rem;margin-bottom: 0.5rem;color: #232323;font-weight: 500;}
.portfolio-preview-category {font-size: 0.875rem;color: #4154a3;margin-bottom: 0.5rem;}
.portfolio-preview-period {font-size: 0.875rem;color: #6b7280;letter-spacing: 0.025em;}

/* CTA Section */
.cta-section {text-align: center;padding: 4rem 1rem;margin-bottom: 3rem;}
.cta-title {font-size: 2.5rem;font-weight: 400;letter-spacing: 0.1em;margin-bottom: 1.5rem;color: #232323;}
@media (min-width: 768px) {.cta-title {font-size: 3rem;}}
.cta-description {font-size: 1rem;line-height: 1.8;color: #232323;max-width: 600px;margin: 0 auto 2rem;}
@media (min-width: 768px) {.cta-description {font-size: 1.125rem;}}

/* About Page */
.about-content {max-width: 800px;margin: 0 auto;padding: 3rem 1rem;}
.about-section {margin-bottom: 4rem;}
.about-text {font-size: 1rem;line-height: 1.8;color: #232323;margin-bottom: 1.5rem;}
.skills-grid {display: grid;grid-template-columns: 1fr;gap: 2rem;margin-top: 2rem;}
@media (min-width: 768px) {.skills-grid {grid-template-columns: repeat(2, 1fr);}}
.skill-category {background-color: white;padding: 1.5rem;border-radius: 8px;box-shadow: 0 1px 3px rgba(0,0,0,0.1);}
.skill-category-title {font-size: 1.25rem;margin-bottom: 1rem;color: #4154a3;font-weight: 500;}
.skill-list {list-style: none;padding: 0;}
.skill-list li {padding: 0.5rem 0;border-bottom: 1px solid #e5e7eb;}
.skill-list li:last-child {border-bottom: none;}

/* Job History */
.job-history-content {max-width: 900px;margin: 0 auto;padding: 3rem 1rem;}
.job-card {background-color: white;padding: 2rem;border-radius: 8px;box-shadow: 0 1px 3px rgba(0,0,0,0.1);margin-bottom: 2rem;}
.job-header {margin-bottom: 1.5rem;padding-bottom: 1rem;border-bottom: 2px solid #e5e7eb;}
.job-title {font-size: 1.5rem;margin-bottom: 0.5rem;color: #232323;font-weight: 500;}
.job-period {font-size: 0.95rem;color: #6b7280;margin-bottom: 0.5rem;}
.job-company {font-size: 1rem;color: #4154a3;font-weight: 500;}
.job-description {font-size: 0.95rem;line-height: 1.8;color: #232323;margin-bottom: 1.5rem;}
.job-responsibilities {margin-top: 1.5rem;}
.job-responsibilities-title {font-size: 1.125rem;margin-bottom: 1rem;color: #232323;font-weight: 500;}
.job-responsibilities-list {list-style: none;padding: 0;}
.job-responsibilities-list li {padding: 0.5rem 0 0.5rem 1.5rem;position: relative;line-height: 1.7;}
.job-responsibilities-list li::before {content: "•";position: absolute;left: 0;color: #4154a3;font-weight: bold;}

/* Portfolio Page */
.portfolio-content {max-width: 1200px;margin: 0 auto;padding: 3rem 1rem;}
.portfolio-section {margin-bottom: 4rem;}
.portfolio-section-title {font-size: 2rem;letter-spacing: 0.1em;margin-bottom: 2rem;text-align: center;font-weight: 400;}
.portfolio-grid {display: grid;grid-template-columns: 1fr;gap: 2rem;}
@media (min-width: 768px) {.portfolio-grid {grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 1024px) {.portfolio-grid {grid-template-columns: repeat(3, 1fr);}}
.portfolio-item {background-color: white;border-radius: 8px;overflow: hidden;box-shadow: 0 1px 3px rgba(0,0,0,0.1);transition: all 0.3s;cursor: pointer;}
.portfolio-item:hover {box-shadow: 0 4px 12px rgba(0,0,0,0.15);transform: translateY(-4px);}
.portfolio-item-image {width: 100%;height: 200px;object-fit: contain;background-color: #f3f4f6;}
.portfolio-item-content {padding: 1.5rem;}
.portfolio-item-title {font-size: 1.125rem;margin-bottom: 0.5rem;color: #232323;font-weight: 500;}
.portfolio-item-category {font-size: 0.875rem;color: #4154a3;margin-bottom: 0.5rem;}
.portfolio-item-period {font-size: 0.875rem;color: #6b7280;}
.portfolio-item-description {font-size: 0.875rem;color: #6b7280;}

/* Modal */
.modal {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.75);z-index: 100;align-items: center;justify-content: center;padding: 1rem;}
.modal.active {display: flex;}
.modal-content {background-color: white;border-radius: 8px;max-width: 800px;width: 100%;max-height: 90vh;overflow-y: auto;position: relative;}
.modal-close {position: absolute;top: 1rem;right: 1rem;background: none;border: none;font-size: 2rem;cursor: pointer;color: #232323;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: all 0.3s;z-index: 1;}
.modal-close:hover {background-color: #f3f4f6;}
.modal-image {width: 100%;height: 100%;object-fit: contain;}
.modal-body {padding: 2rem;}
.modal-image-container {position: relative;aspect-ratio: 16/9;background-color: #f3f4f6;}
.modal-image-counter {position: absolute;top: 1rem;left: 1rem;background-color: rgba(0,0,0,0.7);color: white;padding: 0.5rem 1rem;border-radius: 4px;font-size: 0.875rem;}
.modal-nav-btn {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0,0,0,0.5);color: white;border: none;width: 48px;height: 48px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;transition: all 0.3s;}
.modal-nav-btn:hover {background-color: rgba(0,0,0,0.8);}
.modal-nav-prev {left: 1rem;}
.modal-nav-next {right: 1rem;}
.modal-details {padding: 2rem;}
.modal-details h2 {font-size: 1.75rem;margin-bottom: 1rem;color: #232323;font-weight: 500;}
.modal-details p {font-size: 1rem;line-height: 1.8;color: #232323;margin-bottom: 1rem;}
.modal-details ul {list-style: none;padding: 0;margin: 1rem 0;}
.modal-details ul li {padding: 0.5rem 0 0.5rem 1.5rem;position: relative;line-height: 1.7;}
.modal-details ul li::before {content: "✓";position: absolute;left: 0;color: #4154a3;font-weight: bold;}

/* Footer */
.footer {padding: 2rem 1.5rem;border-top: 1px solid #e5e7eb;background-color: #f9fafb;}
.footer-container {max-width: 896px;margin: 0 auto;padding: 0 1rem;}
@media (min-width: 640px) {.footer-container {padding: 0 1.5rem;}}
@media (min-width: 1024px) {.footer-container {padding: 0 2rem;}}
.footer-links {display: flex;flex-direction: column;gap: 1rem;justify-content: center;margin-bottom: 1.5rem;}
@media (min-width: 640px) {.footer-links {flex-direction: row;}}
.footer-link {display: flex;align-items: center;gap: 0.75rem;padding: 0.875rem 1.5rem;transition: all 0.3s;color: #4154a3;border-radius: 4px;border: 2px solid #4154a3;background-color: white;font-weight: 500;justify-content: center;}
.footer-link:hover {background-color: #4154a3;color: #ffffff;}
.footer-icon {width: 24px;height: 24px;flex-shrink: 0;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234154a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");background-size: contain;background-repeat: no-repeat;transition: all 0.3s;}
.footer-link:hover .footer-icon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");}
.footer-link-text {font-family: 'M PLUS 1p', sans-serif;letter-spacing: 0.05em;transition: color 0.3s;font-size: 14px;}
.footer-copyright {text-align: center;font-size: 0.875rem;color: #232323;padding-top: 1.5rem;padding-bottom: 2rem;}

/* About Page Additional Styles */
.about-hero {width: 100%;height: 300px;overflow: hidden;margin-bottom: 3rem;}
.about-hero-image {width: 100%;height: 100%;object-fit: cover;}
.about-container {max-width: 900px;margin: 0 auto;padding: 0 1rem 3rem;}
.about-page-title {font-size: 2.5rem;letter-spacing: 0.1em;margin-bottom: 3rem;text-align: center;font-weight: 400;}
@media (min-width: 768px) {.about-page-title {font-size: 3rem;}}
.about-sections {display: flex;flex-direction: column;gap: 3rem;}
.about-section-block {background-color: white;padding: 2rem;border-radius: 8px;box-shadow: 0 1px 3px rgba(0,0,0,0.1);}
.about-section-title {font-size: 1.5rem;margin-bottom: 1.5rem;color: #4154a3;font-weight: 500;letter-spacing: 0.05em;}
.about-section-content p {font-size: 1rem;line-height: 1.8;color: #232323;margin-bottom: 1rem;}
.about-section-content p:last-child {margin-bottom: 0;}
.skills-grid-about {display: grid;grid-template-columns: 1fr;gap: 1.5rem;margin-top: 1rem;}
@media (min-width: 640px) {.skills-grid-about {grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 1024px) {.skills-grid-about {grid-template-columns: repeat(3, 1fr);}}
.skill-card {background-color: #f9fafb;padding: 1.5rem;border-radius: 6px;border-left: 3px solid #4154a3;}
.skill-card-title {font-size: 1.125rem;margin-bottom: 0.75rem;color: #4154a3;font-weight: 500;}
.skill-card-text {font-size: 0.95rem;line-height: 1.6;color: #4b5563;}
.job-description-list {list-style: none;padding: 0;}
.job-description-list li {padding: 0.5rem 0 0.5rem 1.5rem;position: relative;line-height: 1.7;}
.job-description-list li::before {content: "•";position: absolute;left: 0;color: #4154a3;font-weight: bold;}

/* Job History Page Styles */
.job-history-hero {width: 100%;height: 300px;overflow: hidden;margin-bottom: 3rem;}
.job-history-hero-image {width: 100%;height: 100%;object-fit: cover;}
.job-history-container {max-width: 1000px;margin: 0 auto;padding: 0 1rem 3rem;}
.job-history-page-title {font-size: 2.5rem;letter-spacing: 0.1em;margin-bottom: 3rem;text-align: center;font-weight: 400;}
@media (min-width: 768px) {.job-history-page-title {font-size: 3rem;}}
.job-history-timeline {display: flex;flex-direction: column;gap: 2rem;position: relative;padding-left: 2rem;}
.job-history-timeline::before {content: '';position: absolute;left: 6px;top: 0;bottom: 0;width: 3px;background-color: #4154a3;}
.job-history-item {background-color: white;padding: 2rem;border-radius: 8px;box-shadow: 0 1px 3px rgba(0,0,0,0.1);position: relative;}
.job-history-title {font-size: 1.75rem;margin-bottom: 0.75rem;color: #232323;font-weight: 500;}
.job-history-period {font-size: 1rem;color: #6b7280;margin-bottom: 0.5rem;}
.job-history-company {font-size: 1.125rem;color: #4154a3;margin-bottom: 0.5rem;font-weight: 500;}
.job-history-role {font-size: 0.95rem;color: #4b5563;margin-bottom: 1.5rem;}
.job-label {display: inline-block;background-color: #4154a3;color: white;padding: 0.25rem 0.75rem;border-radius: 4px;font-size: 0.75rem;font-weight: bold;margin-bottom: 1rem;}
.job-history-description {font-size: 0.95rem;line-height: 1.8;color: #232323;margin-bottom: 1.5rem;}
.job-history-projects {margin-top: 1.5rem;}
.job-history-project {margin-bottom: 2rem;padding-bottom: 2rem;border-bottom: 1px solid #e5e7eb;}
.job-history-project:last-child {margin-bottom: 0;padding-bottom: 0;border-bottom: none;}
.project-name {font-size: 1.125rem;margin-bottom: 0.5rem;color: #232323;font-weight: 500;}
.project-period {font-size: 0.875rem;color: #6b7280;margin-bottom: 0.75rem;}
.project-description {font-size: 0.95rem;line-height: 1.7;color: #4b5563;margin-bottom: 0.75rem;}
.project-achievement {font-size: 0.95rem;line-height: 1.7;color: #232323;margin-bottom: 0.5rem;}
.job-history-note {font-size: 0.875rem;color: #6b7280;margin-top: 1rem;font-style: italic;}
.job-history-dot {width: 16px;height: 16px;background-color: #4154a3;border-radius: 50%;position: absolute;left: -8px;top: 2rem;border: 3px solid white;box-shadow: 0 0 0 3px #4154a3;}

/* Portfolio Page Styles */
.portfolio-hero {width: 100%;height: 300px;overflow: hidden;margin-bottom: 3rem;}
.portfolio-hero-image {width: 100%;height: 100%;object-fit: cover;}
.portfolio-container {max-width: 1200px;margin: 0 auto;padding: 0 1rem 3rem;}
.portfolio-page-title {font-size: 2.5rem;letter-spacing: 0.1em;margin-bottom: 3rem;text-align: center;font-weight: 400;}
@media (min-width: 768px) {.portfolio-page-title {font-size: 3rem;}}
.modal-image-container {position: relative;}
.modal-image-counter {position: absolute;top: 1rem;left: 1rem;background-color: rgba(0,0,0,0.7);color: white;padding: 0.5rem 1rem;border-radius: 4px;font-size: 0.875rem;}
.modal-nav-btn {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0,0,0,0.5);color: white;border: none;width: 48px;height: 48px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;transition: all 0.3s;}
.modal-nav-btn:hover {background-color: rgba(0,0,0,0.8);}
.modal-nav-prev {left: 1rem;}
.modal-nav-next {right: 1rem;}
.modal-details {padding: 2rem;}
.modal-details h2 {font-size: 1.75rem;margin-bottom: 1rem;color: #232323;font-weight: 500;}
.modal-details p {font-size: 1rem;line-height: 1.8;color: #232323;margin-bottom: 1rem;}
.modal-details ul {list-style: none;padding: 0;margin: 1rem 0;}
.modal-details ul li {padding: 0.5rem 0 0.5rem 1.5rem;position: relative;line-height: 1.7;}
.modal-details ul li::before {content: "✓";position: absolute;left: 0;color: #4154a3;font-weight: bold;}

/* Contact Page Styles (already mostly defined) */
.page-title {font-size: 2.5rem;letter-spacing: 0.1em;margin-bottom: 2rem;text-align: center;font-weight: 400;color: #232323;}
@media (min-width: 768px) {.page-title {font-size: 3rem;}}

/* Utility Classes */
.w-full {width: 100%;}
.h-full {height: 100%;}
.h-\[300px\] {height: 300px;}
.max-w-\[1000px\] {max-width: 1000px;}
.max-w-4xl {max-width: 896px;}
.mx-auto {margin-left: auto;margin-right: auto;}
.px-4 {padding-left: 1rem;padding-right: 1rem;}
@media (min-width: 640px) {.sm\:px-6 {padding-left: 1.5rem;padding-right: 1.5rem;}}
@media (min-width: 1024px) {.lg\:px-8 {padding-left: 2rem;padding-right: 2rem;}}
.py-\[150px\] {padding-top: 150px;padding-bottom: 150px;}
.pt-8 {padding-top: 2rem;}
.pt-6 {padding-top: 1.5rem;}
.pb-8 {padding-bottom: 2rem;}
.p-4 {padding: 1rem;}
.p-6 {padding: 1.5rem;}
.overflow-hidden {overflow: hidden;}
.object-cover {object-fit: cover;}
.text-5xl {font-size: 3rem;line-height: 1;}
.text-2xl {font-size: 1.5rem;line-height: 2rem;}
.text-lg {font-size: 1.125rem;line-height: 1.75rem;}
.text-sm {font-size: 0.875rem;line-height: 1.25rem;}
.tracking-wider {letter-spacing: 0.05em;}
.tracking-wide {letter-spacing: 0.025em;}
.mb-16 {margin-bottom: 4rem;}
.mb-12 {margin-bottom: 3rem;}
.mb-8 {margin-bottom: 2rem;}
.mb-6 {margin-bottom: 1.5rem;}
.mb-4 {margin-bottom: 1rem;}
.mb-3 {margin-bottom: 0.75rem;}
.mb-2 {margin-bottom: 0.5rem;}
.mt-6 {margin-top: 1.5rem;}
.mt-4 {margin-top: 1rem;}
.space-y-12 > * + * {margin-top: 3rem;}
.space-y-6 > * + * {margin-top: 1.5rem;}
.border-l-2 {border-left-width: 2px;}
.border-t {border-top-width: 1px;}
.border-\[#4154a3\] {border-color: #4154a3;}
.border-gray-200 {border-color: #e5e7eb;}
.pl-8 {padding-left: 2rem;}
.pb-8 {padding-bottom: 2rem;}
.relative {position: relative;}
.absolute {position: absolute;}
.-left-\[9px\] {left: -9px;}
.top-0 {top: 0;}
.w-4 {width: 1rem;}
.h-4 {height: 1rem;}
.w-10 {width: 2.5rem;}
.h-10 {height: 2.5rem;}
.bg-\[#4154a3\] {background-color: #4154a3;}
.bg-gray-50 {background-color: #f9fafb;}
.rounded-full {border-radius: 9999px;}
.rounded {border-radius: 0.25rem;}
.text-\[#4154a3\] {color: #4154a3;}
.text-\[#232323\] {color: #232323;}
.text-gray-600 {color: #4b5563;}
.font-medium {font-weight: 500;}
.leading-relaxed {line-height: 1.625;}
.italic {font-style: italic;}
.flex {display: flex;}
.flex-col {flex-direction: column;}
@media (min-width: 640px) {.sm\:flex-row {flex-direction: row;}}
.flex-shrink-0 {flex-shrink: 0;}
.items-center {align-items: center;}
.justify-center {justify-content: center;}
.gap-3 {gap: 0.75rem;}
.gap-4 {gap: 1rem;}
.hover\:bg-\[#4154a3\]:hover {background-color: #4154a3;}
.hover\:text-white:hover {color: #ffffff;}
.transition-colors {transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;}
.group:hover .group-hover\:text-white {color: #ffffff;}
.text-center {text-align: center;}
.fill-\[#4154a3\] {fill: #4154a3;}
.fill-white {fill: white;}
.group:hover .group-hover\:fill-white {fill: white;}
.group:hover .group-hover\:fill-\[#4154a3\] {fill: #4154a3;}

/* Custom Bracket Classes - Fixed */
.border-\[#4154a3\],
.border-\[\#4154a3\] {
  border-color: #4154a3 !important;
}

.-left-\[9px\],
.-left-\[9px\] {
  left: -9px !important;
}

.bg-\[#4154a3\],
.bg-\[\#4154a3\] {
  background-color: #4154a3 !important;
}

.text-\[#4154a3\],
.text-\[\#4154a3\] {
  color: #4154a3 !important;
}

.text-\[#232323\],
.text-\[\#232323\] {
  color: #232323 !important;
}

.h-\[300px\],
.h-\[300px\] {
  height: 300px !important;
}

.max-w-\[1000px\],
.max-w-\[1000px\] {
  max-width: 1000px !important;
}

.py-\[150px\],
.py-\[150px\] {
  padding-top: 150px !important;
  padding-bottom: 150px !important;
}

.hover\:bg-\[#4154a3\]:hover,
.hover\:bg-\[\#4154a3\]:hover {
  background-color: #4154a3 !important;
}

.fill-\[#4154a3\],
.fill-\[\#4154a3\] {
  fill: #4154a3 !important;
}

.group:hover .group-hover\:fill-\[#4154a3\],
.group:hover .group-hover\:fill-\[\#4154a3\] {
  fill: #4154a3 !important;
}

/* Job History Timeline Styles */
.job-timeline-item {
  border-left: 2px solid #4154a3;
  padding-left: 2rem;
  padding-bottom: 2rem;
  position: relative;
}

.job-timeline-dot {
  position: absolute;
  left: -9px;
  top: 0;
  width: 1rem;
  height: 1rem;
  background-color: #4154a3;
  border-radius: 9999px;
}

.job-timeline-period {
  font-size: 0.875rem;
  letter-spacing: 0.025em;
  color: #4154a3;
}

.job-timeline-title {
  font-size: 1.5rem;
  letter-spacing: 0.025em;
  margin-bottom: 1rem;
}

.job-timeline-meta {
  font-size: 0.875rem;
  color: #232323;
  margin-bottom: 0.75rem;
  letter-spacing: 0.025em;
}

.job-timeline-content {
  color: #232323;
  margin-bottom: 1rem;
  line-height: 1.625;
}

.job-timeline-project {
  background-color: #f9fafb;
  padding: 1.5rem;
  border-radius: 0.25rem;
}

.job-timeline-project-title {
  font-size: 1.125rem;
  letter-spacing: 0.025em;
  margin-bottom: 0.5rem;
}

.job-timeline-project-period {
  font-size: 0.875rem;
  color: #4154a3;
  margin-bottom: 0.75rem;
}

.job-timeline-project-description {
  color: #232323;
  margin-bottom: 0.75rem;
  line-height: 1.625;
}

.job-timeline-note {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 1rem;
  font-style: italic;
}

/* Footer SVG Icon Styles */
.footer-download-icon {
  width: 100%;
  height: 100%;
  display: block;
}

.footer-download-icon .icon-circle {
  fill: #4154a3;
  transition: fill 0.15s ease-in-out;
}

.footer-download-icon .icon-path {
  fill: white;
  transition: fill 0.15s ease-in-out;
}

.group:hover .footer-download-icon .icon-circle {
  fill: white;
}

.group:hover .footer-download-icon .icon-path {
  fill: #4154a3;
}

/* Footer Download Link Hover Styles */
.footer-download-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  transition: all 0.15s ease-in-out;
  border-radius: 4px;
}

.footer-download-link:hover {
  background-color: #4154a3;
}

.footer-download-link .download-text {
  color: #4154a3;
  letter-spacing: 0.025em;
  transition: color 0.15s ease-in-out;
}

.footer-download-link:hover .download-text {
  color: white;
}