/* === Table of Contents ===
1. Global Variables
2. Base Reset & Typography
3. Layout (Container, Section)
4. Common Components
    4.1 Navigation (Main Nav, Mobile Nav, Hamburger)
    4.2 Buttons (Base, CTA, Download, Tab, Link)
    4.3 Cards (Base, Case Study, Testimonial, Recharge, Portfolio, Result)
    4.4 Forms
    4.5 Tabs
    4.6 Footer
    4.7 Misc Elements (Tags, Icons, Links)
5. Page-Specific Styles / Overrides
    5.1 Home Page (Hero, Case Studies, Testimonials, CTA)
    5.2 About Page (Hero, Experience, Process, Recharge)
    5.3 Case Study Page (Hero, Details, Solution, Results)
    5.4 Portfolio Page (Process Header, Grid, Rows)
    5.5 Contact Page
    5.6 Process Section (Visual)
6. Responsive Styles
    6.1 Max-width: 991px (Tablets)
    6.2 Max-width: 768px (Mobile - Large)
    6.3 Max-width: 480px (Mobile - Small)
*/

/* =================================== */
/* 1. Global Variables                 */
/* =================================== */
:root {
  --primary-color: #2C2C2C;
  --accent-color: #f85463;
  --text-color: #3d3d3d;
  --text-color-light: #666;
  --text-color-lighter: #777;
  --text-color-heading: #444;
  --background-light: #FFFEFB;
  --background-main: linear-gradient(#f6f2eb 0%, #fffdfb 100%);
  --background-card: white;
  --background-checkered: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><rect width="20" height="20" fill="%23f0f0f0"/><rect x="20" y="20" width="20" height="20" fill="%23f0f0f0"/><rect width="20" height="20" x="20" fill="%23ffffff"/><rect y="20" width="20" height="20" fill="%23ffffff"/></svg>');
  --background-placeholder: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="10" height="10" fill="%23f5f5f5"/><rect x="10" y="10" width="10" height="10" fill="%23f5f5f5"/></svg>');
  --border-color: #d9d9d9;
  --border-color-light: #e0e0e0;
  --border-color-lighter: #f5f5f5;
  --shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-card: 0px 0px 1px rgba(0, 0, 0, 0.05);
  --shadow-focus: 0 0 0 2px rgba(0, 13, 255, 0.2);

  --container-width: 1440px;
  --container-padding: 52px;
  --font-primary: 'Iowan Old Style', serif;
  --font-secondary: Inter, -apple-system, Roboto, Helvetica, sans-serif;

  --transition-speed: 0.3s;
}

/* =================================== */
/* 2. Base Reset & Typography          */
/* =================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  /* display: flex; */ /* Temporarily commented out for testing */
  /* flex-direction: column; */ /* Temporarily commented out for testing */
  /* min-height: 100vh; */ /* Temporarily commented out for testing */
  font-family: var(--font-secondary);
  color: var(--text-color);
  background-image: var(--background-main);
  background-attachment: fixed;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block; /* Remove extra space below images */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--text-color-heading);
  line-height: 1.3;
}

h1 {
  font-size: 100px;
  line-height: 1.2;
} /* 72px */
h2 {
  font-size: 40px;
  line-height: 1.1;
} /* 44px */
h3 {
  font-size: 28px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 20px;
}
h6 {
  font-size: 18px;
}

p {
  font-size: 16px;
  line-height: 1.6; /* 25.6px */
  color: var(--text-color-light);
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  text-decoration: none;
  color: var(--text-color);
  transition: color var(--transition-speed) ease;
}

a:hover {
  color: var(--primary-color);
}

/* Add underline effect for specific links on hover */
.nav-link,
.card-link > span, /* Target the span inside the link */
.view-all-link > span,
.learn-more-link > span,
.company-link,
footer.footer .social-link > span {
  position: relative;
  display: inline-block; /* Needed for pseudo-element positioning */
  padding-bottom: 2px; /* Space for the underline */
}

.nav-link::after,
.card-link > span::after,
.view-all-link > span::after,
.learn-more-link > span::after,
.company-link::after,
footer.footer .social-link > span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--primary-color);
  transition: width var(--transition-speed) ease;
}

.nav-link:hover::after,
.card-link:hover > span::after,
.view-all-link:hover > span::after,
.learn-more-link:hover > span::after,
.company-link:hover::after,
footer.footer .social-link:hover > span::after {
  width: 100%;
}

ul,
ol {
  padding-left: 20px;
  list-style: none; /* Removing default list styles */
}

/* =================================== */
/* 3. Layout (Container, Section)    */
/* =================================== */
.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%;
}

.section {
  margin-top: 80px;
  width: 100%;
}

.section-header {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 820px;
}

.section-header .header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.section-header .section-title {
  text-align: center;
}

.section-label {
  color: var(--accent-color);
  font-size: 20px;
  line-height: 1.8; /* 36px */
  display: block;
  margin-bottom: 8px;
}

.section-title {
  font-size: 40px; /* Use h2 size */
  line-height: 1.1; /* 44px */
  margin-top: 0; /* Reset margin */
  margin-bottom: 16px; /* Default bottom margin */
}

/* Allow main content to grow and push footer down */
.main-content, /* index.html */
.aboutme-main-content, /* aboutme.html */
.contact-main-content, /* contact.html */
.work-content, /* work.html */
.case-study-main-content /* case_study/caseStudy.html */ {
  /* flex-grow: 1; */ /* Temporarily commented out for testing */
  /* max-width: var(--container-width); Already handled by .container */
  margin-left: auto;
  margin-right: auto;
}

/* =================================== */
/* 4. Common Components              */
/* =================================== */

/* ----------------------------------- */
/* 4.1 Navigation                    */
/* ----------------------------------- */
.main-nav {
  display: flex;
  min-height: 99px;
  width: 100%;
  padding: 16px var(--container-padding);
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  box-sizing: border-box;
  margin-bottom: 32px;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}

.brand-logo {
  width: 50px;
  aspect-ratio: 0.98;
  object-fit: contain;
}

.brand-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-name {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  margin: 0;
}

.brand-surname {
  font-weight: 400;
  font-size: 20px;
}

.brand-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* Desktop Links */
.desktop-nav-links {
  display: flex;
  align-items: center;
}

.nav-link {
  padding: 24px;
  color: var(--text-color);
}

.nav-link.active {
  border-bottom: 1px solid var(--primary-color);
}

/* Hamburger Menu */
.hamburger-menu {
  display: none; /* Hidden by default, shown in media query */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin-left: auto; /* Push to right if needed */
  z-index: 1010; /* Above mobile nav */
}

.hamburger-bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--text-color);
  margin: 5px 0;
  transition: all var(--transition-speed) ease-in-out;
}

/* Mobile Navigation Panel */
.mobile-nav-links {
  display: none; /* Hidden by default */
  position: absolute;
  top: 80px; /* Position below header */
  right: 0;
  left: 0; /* Make full width */
  background-color: var(--background-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  flex-direction: column;
  z-index: 1000;
}

.mobile-nav-links.active {
  display: flex;
}

.mobile-nav-links .nav-link {
  padding: 12px 16px;
  display: block;
  width: 100%;
  text-align: left;
  border-bottom: none; /* Remove desktop active style */
}

.mobile-nav-links .nav-link.active {
  font-weight: bold;
  color: var(--primary-color);
}

/* ----------------------------------- */
/* 4.2 Buttons                       */
/* ----------------------------------- */
/* Base Button Styles (applied via specific classes) */
.cta-button, /* index.html, aboutme.html CTA */
.form-submit-button, /* contact.html Form */
.download-button, /* aboutme.html Experience */
.tab-button, /* work.html Tabs */
.view-all-link, /* index.html Case Studies */
.learn-more-link /* index.html Testimonials */ {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  font-family: var(--font-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-speed) ease,
    color #2C2C2C ease,
    border-color #2C2C2C ease;
  white-space: nowrap;
}

/* Icon within buttons */
.cta-button .button-arrow,
.form-submit-button .button-arrow,
.download-button .download-icon {
  width: 16px;
  height: 16px;
}
.view-all-link .link-arrow, /* Adjust if icons differ */
.learn-more-link img {
  width: 18px; /* Example size */
  aspect-ratio: 1;
}

/* Primary Style (CTA, Form Submit) */
.cta-button,
.form-submit-button {
  background-color: #2C2C2C;
  color: white;
}

.cta-button:hover,
.form-submit-button:hover {
  background-color: #110606; /* #0009cc2 Darken primary */
  color: white;
}

/* Outline Style (Download Resume) */
.download-button {
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 500; /* Slightly lighter weight */
}

.download-button:hover {
  background-color: var(--background-light);
  color: var(--primary-color);
}

/* Link Style (View All, Learn More) */
.view-all-link,
.learn-more-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--primary-color);
  padding: 12px; /* Less padding */
  font-family: var(--font-primary); /* Specific font */
  font-weight: 700;
  align-self: center; /* Specific to these links */
  margin-top: 20px; /* Specific margin */
}

.view-all-link:hover,
.learn-more-link:hover {
  text-decoration: underline;
  color: var(--primary-color);
}

/* Tab Button Style */
.tab-button {
  background: none;
  border: none;
  color: var(--text-color-lighter); /* #999 */
  font-size: 16px;
  padding: 16px 8px; /* Adjusted padding */
  cursor: pointer;
  position: relative;
  transition: color var(--transition-speed) ease;
  border-radius: 0; /* Override base radius */
  font-weight: 400; /* Normal weight */
}

.tab-button:hover {
  color: var(--primary-color);
}

.tab-button.tab-active /* Active state handled by JS */ {
  color: var(--primary-color);
}

.tab-button.tab-active::after {
  content: '';
  position: absolute;
  bottom: -1px; /* Align with bottom border */
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--primary-color);
  /* Add animation if needed */
}

/* ----------------------------------- */
/* 4.3 Cards                         */
/* ----------------------------------- */

/* Base Card Style (applied via specific classes) */
.case-study-card, /* index.html */
.testimonial-card, /* index.html */
.recharge-card, /* aboutme.html */
.portfolio-card, /* work.html */
.result-card /* case_studies/caseStudy.html */ {
  border: 1px solid var(--border-color-lighter); /* Default light border */
  border-radius: 16px; /* Default radius */
  overflow: hidden;
  background-color: var(--background-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column; /* Default stack */
  transition: transform var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease;
}

/* Common Card Image Styling */
.case-study-card .card-image, /* index.html */
.recharge-card .card-image, /* img in aboutme.html */
.portfolio-card .card-image-container /* div in work.html */ {
  width: 100%;
  object-fit: cover;
  background-image: var(--background-placeholder); /* Placeholder bg */
  background-size: 20px 20px;
}

.case-study-card .card-image {
  min-width: 600px;
}

/* Common Card Content Styling */
.case-study-card .card-content, /* index.html */
.testimonial-card .testimonial-content, /* index.html (specific structure) */
.recharge-card .card-content, /* aboutme.html */
.portfolio-card .card-info, /* work.html */
.result-card /* case_studies/caseStudy.html (direct text) */ {
  padding: 32px; /* Default padding */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Common Card Header */
.case-study-card .card-header {
  margin-bottom: 16px;
}

/* Common Card Label / Chip */
.case-study-card .chip, /* index.html */
.portfolio-card .card-label /* work.html */ {
  display: inline-block;
  padding: 8px 16px;
  background-color: rgba(246, 241, 235, 100); /* Accent bg */
  border-radius: 8px;
  font-size: 14px;
  color: black;
  font-family: var(--font-secondary);
  margin-bottom: 16px;
  width: fit-content;
}
.portfolio-card .card-label {
  /* Specific adjustments for portfolio */
  padding: 4px 12px;
  border-radius: 4px;
}

/* Common Card Title */
.case-study-card .card-title, /* index.html */
.recharge-card .card-title, /* aboutme.html */
.portfolio-card .card-title /* work.html */ {
  font-family: var(--font-primary);
  font-size: 24px; /* Default: h4 size */
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 16px 0;
  color: var(--text-color-heading);
}
.case-study-card .card-title {
  font-size: 28px;
  margin-top: 0;
} /* Specific size */
.recharge-card .card-title {
  font-size: 20px;
  margin-bottom: 12px;
} /* Specific size */
.portfolio-card .card-title {
  font-size: 22px;
} /* Specific size */

/* Common Card Description */
.case-study-card .card-description, /* index.html */
.recharge-card .card-description /* aboutme.html */ {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-color-light);
  margin: 0 0 24px 0;
  flex-grow: 1;
}
.case-study-card .card-description p,
.recharge-card .card-description p {
  margin-bottom: 0;
}

/* Common Card Link */
.case-study-card .card-link, /* index.html */
.portfolio-card .card-link /* work.html */ {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  font-family: var(--font-secondary);
  margin-top: auto; /* Push to bottom within content */
}
.case-study-card .card-link {
  padding-top: 24px;
} /* Space above */
.portfolio-card .card-link {
  margin-top: 16px;
} /* Specific margin */

.case-study-card .card-link:hover,
.portfolio-card .card-link:hover {
  text-decoration: underline;
}

/* Common Card Link Icon */
.case-study-card .link-arrow, /* img */
.portfolio-card .card-link svg /* svg */ {
  width: 18px;
  aspect-ratio: 1;
}
.portfolio-card .card-link svg {
  width: 16px;
  height: 16px;
}

/* Common Card Tags */
.case-study-card .card-tags {
  display: flex;
  gap: 20px;
  margin-top: 16px; /* Space above tags */
}

.case-study-card .tag {
  font-size: 14px;
  color: var(--text-color-lighter);
  font-family: var(--font-secondary);
}

/* --- Specific Card Type Styles --- */

/* Case Study Card (Index Page) */
.case-study-card {
  flex-direction: row;
  min-height: 600px;
  border-color: var(--border-color-lighter); /* #f5f5f5 */
}

.case-study-card .card-content {
  width: 50%;
  padding: 48px;
}

.case-study-card .card-image {
  flex: 1;
  border-radius: 0 16px 16px 0;
}

/* Testimonial Card (Index Page) */
.testimonial-card {
  width: 350px;
  max-width: 100%;
  padding: 40px;
  border-color: var(--border-color);
}

.testimonial-card .testimonial-content {
  padding: 0;
}

.testimonial-card .quote-mark {
  color: var(--accent-color);
  margin-bottom: 24px;
  display: block;
  text-align: left;
  /* font-size: 32px; Example size, use img */
  width: 25px; /* Let image define size */
  height: 25px;
}

.testimonial-card .testimonial-text {
  font-size: 16px;
  line-height: 1.5; /* 24px */
  text-align: left;
  margin: 0;
  color: var(--text-color); /* Darker text */
}

.testimonial-card .testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  text-align: left;
}

.testimonial-card .author-image {
  width: 56px;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%;
}

.testimonial-card .author-info {
  /* Container for name/title */
}

.testimonial-card .author-name {
  font-family: var(--font-primary);
  font-size: 20px; /* Use h5 size */
  font-weight: 700;
  margin: 0;
  color: var(--text-color-heading);
}

.testimonial-card .author-title {
  font-size: 14px;
  margin: 4px 0 0;
  color: var(--text-color);
  font-family: var(--font-secondary);
}

/* Recharge Card (About Page) */
.recharge-card {
  max-width: 600px;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-color: var(--border-color);
}

.recharge-card .card-image {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--border-color);
}

.recharge-card .card-content {
  padding: 32px;
  text-align: left;
}

/* Portfolio Card (Work Page) */
.portfolio-card {
  box-shadow: var(--shadow-sm);
  border-radius: 8px;
  border: none;
}

.portfolio-card .card-image-container {
  height: 300px;
  width: 100%;
  border-radius: 8px 8px 0 0;
}

.portfolio-card .card-info {
  padding: 20px;
}

/* Portfolio Card Size Modifier */
.portfolio-card.small-card .card-image-container {
  height: 200px;
}
.portfolio-card.small-card .card-title {
  font-size: 18px; /* h6 size */
}

/* Result Card (Case Study Page) */
.result-card {
  padding: 30px;
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  background-color: var(--background-light);
  border: none;
  box-shadow: none;
}

/* ----------------------------------- */
/* 4.4 Forms                         */
/* ----------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px; /* Default spacing if not using gap */
}

.form-label {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 8px;
}

.form-input,
.form-textarea {
  font-family: var(--font-secondary);
  font-size: 16px;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--background-card);
  color: var(--text-color);
  transition: border-color var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #aaa;
  font-family: var(--font-secondary);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: var(--shadow-focus);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Specific form layout for contact page */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px; /* Space between form groups */
}

.contact-form .form-group {
  margin-bottom: 0; /* Use gap instead */
}

.contact-form .form-submit-button {
  align-self: flex-start;
}

/* ----------------------------------- */
/* 4.5 Tabs                          */
/* ----------------------------------- */
.tab-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align items to top */
  gap: 40px;
  border-bottom: 1px solid var(--border-color-light); /* #eee */
  width: 100%;
  flex-wrap: wrap; /* Allow wrapping */
}

/* Uses .tab-button for styling */

.tab-content-container {
  /* Optional wrapper */
  padding-top: 40px; /* Space above content */
}

.tab-content {
  display: none; /* Hidden by default */
}

.tab-content.active {
  display: block; /* Show active content */
  animation: fadeIn 0.5s ease forwards;
}

/* Add a simple fadeIn keyframe */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ----------------------------------- */
/* 4.6 Footer                        */
/* ----------------------------------- */
footer.footer /* Use footer element selector */ {
  margin-top: 80px; /* Ensure space above footer */
  background-color: var(--background-light);
  padding: 52px 0; /* Only vertical padding */
}

footer.footer .container {
  /* Container needed for padding */
}

footer.footer .footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 52px;
  flex-wrap: wrap;
}

footer.footer .copyright {
  font-size: 16px;
  margin: 0;
  color: var(--text-color);
  text-align: center; /* Center text */
  flex-basis: 100%; /* Take full width on wrap */
  order: 2; /* Move below links on wrap */
}

footer.footer .social-links {
  display: flex;
  gap: 32px;
  order: 1; /* Keep first */
}

footer.footer .social-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-color);
  text-decoration: none;
  font-size: 14px;
}

footer.footer .social-icon {
  width: 16px;
  aspect-ratio: 1;
}

/* ----------------------------------- */
/* 4.7 Misc Elements                 */
/* ----------------------------------- */
.highlight {
  color: var(--accent-color);
  font-weight: 700;
}

/* Lottie Player Icons */
.hero-subheading-wrapper dotlottie-player, /* index.html */
.cta-icon-container dotlottie-player, /* contact.html */
.process-title-container dotlottie-player /* work.html */ {
  /* Define common size or override per instance */
  width: 60px;
  height: 60px;
}

.title-icon {
  /* Icon near About page title */
  aspect-ratio: 1;
  object-fit: contain;
  width: 28px;
  height: 28px;
}

/* Checkered background for images */
.image-checkered-bg {
  background-image: var(--background-checkered);
  background-size: 40px 40px;
}

/* Company Link in Hero */
.company-link {
  color: var(--text-color);
  text-decoration: underline;
}

/* =================================== */
/* 5. Page-Specific Styles / Overrides */
/* =================================== */

/* ----------------------------------- */
/* 5.1 Home Page (index.html)        */
/* ----------------------------------- */
/* Hero Section */
main.main-content .hero-section .hero-content {
  display: flex;
  align-items: center; /* Align text and image */
  gap: 80px;
}

main.main-content .hero-section .hero-text {
  flex: 1;
}

main.main-content .hero-section .hero-heading {
  font-size: 100px; /* H1 size */
  line-height: .99;
  margin-bottom: 24px;
}

main.main-content .hero-section .hero-subheading-wrapper {
  display: flex;
  align-items: center;
  gap: 80px;
}

main.main-content .hero-section .hero-subheading {
  font-size: 20px;
  line-height: 1.8;
  color: var(--text-color);
  margin: 0;
}

main.main-content .hero-section .hero-image {
  flex-basis: 45%; /* Adjust size */
  max-width: 500px; /* Limit size */
  max-height: 500px;
  object-fit: contain;
  border-radius: 8px;
}

/* Case Studies Section */
.case-studies-section .section-title br {
  display: none;
} /* Remove break */

.case-studies-container {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* Testimonials Section */
.testimonials-section .section-label {
  /* Uses h2 in HTML */
  font-size: 20px; /* Override h2 size */
  line-height: 1.8;
  color: var(--accent-color);
  font-weight: 400; /* Normal weight */
}
.testimonials-section .section-title {
  /* Uses p in HTML */
  font-size: 40px; /* Override p size */
  line-height: 1.1;
  font-weight: 700;
  color: var(--text-color-heading);
}

.testimonials-container {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 40px 0;
}

.testimonials-footer {
  display: flex;
  justify-content: center;
}

/* CTA Section */
.cta-section {
  padding: 80px 0;
  text-align: center;
}

.cta-section .cta-content {
  display: flex;
  flex-direction: row; /* Side-by-side */
  gap: 80px;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 800px;
  margin: 0 auto 32px; /* Space below */
}

.cta-section .cta-label {
  font-size: 18px;
  color: var(--accent-color);
  margin-bottom: 16px;
}

.cta-section .cta-title {
  font-family: var(--font-primary);
  font-size: 40px;
  line-height: 1.3;
  color: var(--text-color-heading);
  font-weight: 600;
  margin-bottom: 0; /* Handled by wrapper */
}

.cta-section .cta-icon-container dotlottie-player {
  width: 80px;
  height: 80px;
}

.cta-section .cta-action {
  /* Wrapper for button */
  display: flex;
  justify-content: center;
}

/* ----------------------------------- */
/* 5.2 About Page (aboutme.html)     */
/* ----------------------------------- */
/* Hero Section */
main.aboutme-main-content .hero-section .hero-content-new {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

main.aboutme-main-content .hero-left-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

main.aboutme-main-content .hero-right-column {
  flex-basis: 40%;
  max-width: 600px;
}

main.aboutme-main-content .hero-section-title {
  font-size: 60px;
  line-height: 1.2;
}

main.aboutme-main-content .section-title-wrapper {
  display: flex;
  margin-top: 8px;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}

main.aboutme-main-content .title-icon {
  bottom: 60px;
  right: 120px;
}

main.aboutme-main-content .hero-description {
  font-size: 20px;
  line-height: 1.8;
  color: var(--text-color);
}

main.aboutme-main-content .hero-bottom-image-container {
  margin-top: 40px;
}
main.aboutme-main-content .hero-bottom-image {
  width: 100%;
  max-width: 650px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-color);
}

main.aboutme-main-content .hero-profile-image {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

/* Experience Section */
.experience-section .section-title {
  /* Default h2 styles */
}

.experience-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.experience-list {
  /* Container for items */
}

.experience-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-color-light);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.experience-item:last-child {
  border-bottom: none;
}

.experience-content {
  /* Container for title and company */
}

.experience-item .position-title {
  /* Corrected selector */
  font-family: var(--font-primary);
  font-size: 24px; /* h4 size */
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-color-heading);
}

.experience-item .company-name {
  /* Corrected selector */
  font-size: 16px;
  color: var(--text-color-light);
  margin: 0;
  font-family: var(--font-secondary);
}

.experience-item .experience-date {
  /* Corrected selector */
  font-family: var(--font-primary);
  font-size: 40px; /* Large date */
  line-height: 1.1; /* 44px */
  color: #aaaaaa;
  white-space: nowrap;
  margin-left: 20px;
}

/* Animation trigger for experience items */
.experience-item.animate {
  animation: fadeInUp 0.8s ease forwards;
}

/* Process Section (About Page - Text & Image) */
.aboutme-process-section {
  background-color: var(--background-light);
  margin-top: 20px;
}

.aboutme-process-section .container {
  max-width: 1440px;
  padding-top: 80px;
  padding-bottom: 80px;
}

.aboutme-process-section .process-container {
  /* Wrapper for text content */
  max-width: 1000px; /* Limit width */
  margin: 0 auto 40px; /* Center and add space below */
}

.aboutme-process-section .process-content {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.aboutme-process-section .process-header {
  flex: 1;
}
.aboutme-process-section .section-label {
  /* Uses h2 in HTML */
  font-size: 20px;
  line-height: 1.8;
  color: var(--accent-color);
  font-weight: 400;
}
.aboutme-process-section .process-description {
  /* Uses p in HTML */
  font-family: var(--font-primary);
  font-size: 40px;
  line-height: 1.1;
  margin: 0;
  color: var(--text-color-heading);
  font-weight: 400; /* Override p */
}

.aboutme-process-section .process-icon {
  width: 60px;
  margin-top: 20px;
}

/* Apply common styles to both illustration images */
.process-illustration-web,
.process-illustration-mobile {
  width: 100%;
  max-width: 1000px; /* Limit width */
  margin-left: auto;
  margin-right: auto;
  display: block;
  border-radius: 8px;
}

.process-illustration-web {
  display: block;
}

.process-illustration-mobile {
  display: none;
}

/* Recharge Section (About Page) */
.recharge-section {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.recharge-header {
  text-align: center;
  margin-bottom: 40px;
}

.recharge-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin-top: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.recharge-card:nth-child(odd) {
  align-self: flex-start;
}
.recharge-card:nth-child(even) {
  align-self: flex-end;
}

/* ----------------------------------- */
/* 5.3 Case Study Page (case_study/*) */
/* ----------------------------------- */
/* Hero Section */
.case-study-hero {
  /* Targets section in caseStudy.html */
  padding-top: 80px; /* Add padding like other sections */
}

.case-study-hero .container {
  /* Standard container behavior */
}

.case-study-hero .hero-text-container {
  /* Wrapper for label/title */
  max-width: 820px; /* Limit width like section headers */
  margin-bottom: 40px;
}

.case-study-hero .hero-text-container .section-label {
  /* Standard label */
}

.case-study-hero .hero-text-container .hero-title {
  /* Specific h2 */
  /* font-size: 60px; H1 size */
  line-height: 1.2;
  margin-top: 8px; /* Space after label */
  margin-bottom: 0;
}

.case-study-hero-image {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 80px; /* Space below image */
}

/* Project Details Section */
.case-study-project-details {
  /* Specific class from caseStudy.html */
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 100px;
  flex-wrap: wrap;
  line-height: 1.5;
  /* Padding handled by container */
}

.case-study-project-details .details-sidebar {
  width: 280px;
  flex-shrink: 0;
  padding: 0;
}

.case-study-project-details .detail-group {
  margin-bottom: 32px;
}

.case-study-project-details .detail-title {
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 8px;
  color: var(--text-color);
}

.case-study-project-details .detail-group p.detail-text {
  /* Target specific p */
  font-family: var(--font-secondary);
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  color: var(--text-color);
  /* Breaks in HTML handle multiple lines */
}

.case-study-project-details .content-main {
  flex: 1;
  min-width: 300px;
  line-height: 1.5;
  max-width: none; /* Override general .content-main */
}

.case-study-project-details .content-main .section-title {
  font-size: 32px;
  line-height: 1.4;
  margin-bottom: 16px;
  font-family: var(--font-primary);
}

.case-study-project-details .content-main .section-text p,
.case-study-project-details .content-main .problem-section p.detail-text, /* Target specific p */
.case-study-project-details .content-main .overview-section p.detail-text {
  font-family: var(--font-secondary);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-color);
  margin-bottom: 1em;
}
.case-study-project-details .content-main p:last-child {
  margin-bottom: 0;
}

.case-study-project-details .problem-section .accent-image {
  max-width: 100px;
  margin-top: 20px;
}

/* Solution Section */
.case-study-solution-section {
  background-color: var(--background-light);
  padding: 80px 0;
  margin-top: 80px;
  /* section class adds margin-top, adjust if needed */
}

.case-study-solution-section .solution-container {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: var(--container-width);
  margin: 0 auto;
}

.case-study-solution-section .solution-image-wrapper {
  flex: 1;
  min-width: 300px;
}

.case-study-solution-section .solution-image {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.case-study-solution-section .solution-content {
  flex: 1;
  min-width: 300px;
}

.case-study-solution-section .solution-text p {
  margin-bottom: 20px; /* Space above list */
}

.case-study-solution-section .solution-list {
  padding-left: 20px;
  margin-top: 20px;
  line-height: 2;
  font-family: var(--font-secondary);
  font-size: 16px;
  color: var(--text-color);
  list-style: disc; /* Add list style */
}

.case-study-solution-section .solution-list li {
  margin-bottom: 32px;
}
.case-study-solution-section .solution-list li:last-child {
  margin-bottom: 0;
}

.case-study-solution-section .solution-content .accent-image {
  max-width: 100px;
  margin-top: 40px;
}

/* Results Section */
.results-section {
  /* Target section */
  padding-bottom: 80px; /* Add bottom padding */
}

.case-study-results-section .results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(333px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

/* Uses .result-card styling - make sure .result-card exists */
.result-card {
  /* Ensure base styles are applied */
  border: 1px solid var(--border-color-lighter);
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--background-light);
  box-shadow: var(--shadow-card);
  display: flex;
  padding: 30px;
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  border: none; /* Override base */
  box-shadow: none; /* Override base */
}

/* ----------------------------------- */
/* 5.4 Portfolio Page (work.html)     */
/* ----------------------------------- */
/* Process Header (Work Page specific) */
main.work-content .process-section .process-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px; /* Center and space */
}
main.work-content .process-section .process-label {
  font-size: 18px;
  margin-bottom: 16px;
  color: var(--accent-color);
}
main.work-content .process-section .process-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
main.work-content .process-section .process-title {
  font-size: 36px;
  font-weight: 600;
  color: var(--text-color-heading);
}
main.work-content .process-section .process-title br {
  display: block;
} /* Keep break */

main.work-content .process-section .process-title-container dotlottie-player {
  position: absolute;
  right: 60px;
  top: 0;
  width: 32px;
  height: 32px; /* Specific size */
}

/* Portfolio Grid Section */
.portfolio-container {
  padding: 40px 20px;
  /*
  background-color: white;  Space below tabs */
  /* Wrapper inside tabs */
  /* Container styles might not be needed if using .container already */
}
.portfolio-content {
  max-width: 1440px;
  margin: 0 auto;
}

.portfolio-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

/* Portfolio Row Layouts */
.portfolio-row {
  /* Base class for rows - not used directly? */
  display: flex;
  gap: 40px;
  width: 100%;
  flex-wrap: wrap;
}

.row-2-cards {
  /* Specific class for 2-col layout */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.row-3-cards {
  /* Specific class for 3-col layout */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Uses .portfolio-card styling */

/* ----------------------------------- */
/* 5.5 Contact Page (contact.html)   */
/* ----------------------------------- */
.contact-section {
  padding: 80px 0;
}

.contact-content-wrapper {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.contact-text-column {
  flex: 1;
  max-width: 50%;
}

.contact-text-column .section-label {
  margin-bottom: 16px;
  font-size: 20px; /* Back to default label size */
  color: var(--accent-color);
}

.contact-text-column .contact-title {
  /* Specific title class */
  font-size: 60px;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 32px;
}

.contact-icon-container dotlottie-player {
  width: 60px;
  height: 60px;
  margin-top: 24px;
}

.contact-form-column {
  flex: 1;
  max-width: 500px;
}

/* Uses .contact-form styles */

/* ----------------------------------- */
/* 5.6 Process Section (Visual - work.html) */
/* ----------------------------------- */
section#process.process-section {
  /* ID selector from work.html */
  padding: 80px 0;
}

section#process.process-section .section-header {
  margin-bottom: 60px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

section#process.process-section .section-header .section-label {
  /* Default label styles */
}
section#process.process-section .section-header .section-title {
  /* Default title styles */
}
section#process.process-section .desktop-break {
  /* <br> tag */
  display: block;
}

.process-visual-container {
  margin-top: 40px;
  text-align: center;
}

.process-web-img,
.process-mobile-img {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.process-web-img {
  display: block;
} /* Show web by default */
.process-mobile-img {
  display: none;
} /* Hide mobile by default */

/* =================================== */
/* 6. Responsive Styles              */
/* =================================== */

/* ----------------------------------- */
/* 6.1 Max-width: 991px (Tablets)   */
/* ----------------------------------- */
@media (max-width: 991px) {
  :root {
    --container-padding: 32px; /* Reduce padding */
  }

  h1,
  main.main-content .hero-section .hero-heading, /* index.html */
  main.aboutme-main-content .hero-section-title, /* aboutme.html */
  .case-study-hero .hero-title, /* case_study/ */
  .contact-text-column .contact-title /* contact.html */ {
    font-size: 100px;
  }
  h2,
  .section-title {
    font-size: 36px;
  }

  .main-nav {
    padding: 16px var(--container-padding);
  }

  .section {
    margin-top: 60px;
  }

  /* Hero adjustments */
  main.main-content .hero-section .hero-content {
    /* index.html */
    gap: 40px;
  }
  main.aboutme-main-content .hero-section .hero-content-new {
    /* aboutme.html */
    flex-direction: column;
    gap: 40px;
  }
  main.aboutme-main-content .hero-right-column {
    /* aboutme.html */
    max-width: 100%;
  }

  /* Card adjustments */
  .case-study-card {
    /* index.html */
    flex-direction: column;
    min-height: auto;
  }
  .case-study-card .card-content {
    width: 100%;
    padding: 32px;
  }
  .case-study-card .card-image {
    border-radius: 0;
    height: 300px;
  }

  /* About page */
  .experience-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Case Study Page */
  .case-study-project-details {
    gap: 60px;
  }
  .solution-container {
    flex-direction: column;
  }
  .results-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  /* Portfolio Page (work.html) */
  .row-2-cards,
  .row-3-cards {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  /* Contact Page */
  .contact-content-wrapper {
    flex-direction: column;
    gap: 40px;
  }
  .contact-text-column,
  .contact-form-column {
    max-width: 100%;
  }

  /* Process Section */
  section#process.process-section .section-header {
    margin-bottom: 40px;
  }
  main.work-content .process-section .process-title {
    font-size: 30px;
  }
  main.work-content .process-section .process-title-container dotlottie-player {
    right: 20px;
  }
  .aboutme-process-section .process-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .aboutme-process-section .process-description {
    font-size: 32px;
  }
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(333px, 1fr));
  gap: 30px;
}

/* ----------------------------------- */
/* 6.2 Max-width: 768px (Mobile Lrg) */
/* ----------------------------------- */
@media (max-width: 768px) {
  :root {
    --container-padding: 20px; /* Further reduce padding */
  }

  body {
    background-image: linear-gradient(
      #f6f2eb 0%,
      #fffdfb 100%
    ); /* Simpler gradient? */
  }

  h1,
  main.main-content .hero-section .hero-heading, /* index.html */
  main.aboutme-main-content .hero-section-title, /* aboutme.html */
  .case-study-hero .hero-title /* case_study/ */ {
    font-size: 48px;
    line-height: 1.2;
  }
  h2,
  .section-title {
    font-size: 32px;
    line-height: 1.2;
  }

  /* Navigation */
  .main-nav {
    justify-content: space-between;
  }
  .desktop-nav-links {
    display: none;
  }
  .hamburger-menu {
    display: block;
    margin-left: auto; /* Ensure hamburger is pushed right */
  }
  .brand-container {
    flex: 0 1 auto;
    margin-right: 10px;
  }

  /* Layout & Typography */
  .section-header,
  .section-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Hero Section (Index) */
  main.main-content .hero-section .hero-content {
    flex-direction: column;
  }
  main.main-content .hero-section .hero-image {
    display: none;
  }

  /* Card adjustments */
  .case-study-card {
    /* index.html */
    flex-direction: column-reverse;
  }
  .case-study-card .card-image {
    border-radius: 16px 16px 0 0;
    height: 250px;
  }
  .case-study-card .card-description p {
    display: none;
  }
  .case-study-card .card-content {
    padding: 24px;
  }

  /* Hide 3rd card in lists (Index) */
  .case-studies-container .case-study-card:nth-of-type(n + 3),
  .testimonials-container .testimonial-card:nth-of-type(n + 3) {
    display: none;
  }
  .testimonials-container {
    gap: 20px;
  }
  .testimonial-card {
    width: 100%;
  } /* Full width */

  /* CTA Section (Index, About) */
  .cta-section {
    padding: 60px 20px;
  }
  .cta-section .cta-title {
    font-size: 32px;
  }
  .cta-section .cta-icon-container dotlottie-player {
    /* Icon positioning might need adjustment or hiding */
    margin: 20px auto 0;
  }
  .cta-section .cta-content {
    flex-direction: column;
    gap: 20px;
  }
  .cta-section .cta-text {
    /* Wrapper div if exists */
    text-align: center;
  }

  /* About Page */
  main.aboutme-main-content .hero-section .hero-bottom-image {
    display: none;
  } /* Hide profile on mobile */
  .experience-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px 0;
  }
  .experience-item .experience-date {
    font-size: 24px;
    line-height: 1.1;
    color: var(--text-color-light);
    margin-left: 0;
    margin-top: 8px;
  }
  .recharge-header .section-title {
    font-size: 32px;
  }
  .recharge-content {
    gap: 40px;
  }
  .recharge-card {
    max-width: 90%;
  }
  .recharge-card .card-content {
    padding: 24px;
  }
  .recharge-card:nth-child(odd),
  .recharge-card:nth-child(even) {
    align-self: center;
  }
  .about-section-title-wrapper .title-icon {
    position: static;
    margin: 8px auto 16px;
  }

  /* Case Study Page */
  .case-study-hero-image {
    margin-top: 20px;
  }
  .case-study-project-details {
    flex-direction: column;
    gap: 40px;
    padding: 0; /* Remove horizontal padding */
  }
  .details-sidebar {
    width: 100%;
  }
  .content-main .section-title {
    font-size: 28px;
  }
  .results-grid {
    grid-template-columns: 1fr;
  }

  /* Portfolio Page (work.html) */
  .row-2-cards,
  .row-3-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .portfolio-section .container {
    /* padding-left: 0; */
    /* padding-right: 0; */
  }
  .portfolio-content {
    max-width: 100%;
    margin: 0 auto;
  }
  .tab-container {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
  }
  main.work-content .process-section .process-title br {
    display: none;
  }
  main.work-content .process-section .process-title-container dotlottie-player {
    position: static;
    margin-top: 20px;
  }
  main.work-content .process-section .process-title-container {
    flex-direction: column;
  }

  /* Contact Page */
  .contact-section {
    padding: 40px 0;
  }
  .contact-text-column .contact-title {
    display: none;
  } /* Hide large title */
  .contact-text-column .section-label {
    /* Make label act as title */
    color: var(--text-color-heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
    text-align: left;
  }
  .contact-text-column .section-text p {
    /* Assuming text exists */
    text-align: left;
  }
  .contact-text-column {
    margin-bottom: 20px;
    display: block;
  }
  .contact-icon-container {
    margin-top: 8px;
  }
  .contact-form-column {
    max-width: 100%;
  }
  .contact-form .form-submit-button {
    width: 100%;
    margin-top: 10px;
  }
  .contact-form-column .form-input,
  .contact-form-column .form-textarea {
    filter: drop-shadow(0 0.5px 2.5px rgba(0, 0, 0, 0.1));
  }

  /* Footer */
  footer.footer .footer-content {
    gap: 24px;
  }
  footer.footer .copyright {
    order: 1;
    margin-bottom: 16px;
  }
  footer.footer .social-links {
    order: 2;
  }

  /* Process Section Visuals (work.html, aboutme.html) */
  .process-web-img {
    display: none;
  }
  .process-mobile-img {
    display: block;
  }
  section#process.process-section .container,
  .aboutme-process-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  section#process.process-section .section-header p,
  .aboutme-process-section .process-header p {
    /* If p exists */
    margin-top: 10px;
  }
  .aboutme-process-section .process-icon {
    display: none;
  } /* Hide icon */
  section#process.process-section .desktop-break {
    display: none;
  } /* Hide <br> */

  .process-illustration-web {
    display: none;
  }

  .process-illustration-mobile {
    display: block;
  }

  /* About Page */
  .aboutme-main-content .experience-list .experience-item:nth-of-type(n + 2) {
    display: none;
  }
}

/* ----------------------------------- */
/* 6.3 Max-width: 480px (Mobile Sml) */
/* ----------------------------------- */
@media (max-width: 480px) {
  h1,
  main.main-content .hero-section .hero-heading, /* index.html */
  main.aboutme-main-content .hero-section-title, /* aboutme.html */
  .case-study-hero .hero-title /* case_study/ */ {
    font-size: 28px;
  }
  h2,
  .section-title {
    font-size: 28px;
  }

  /* Buttons */
  .cta-button,
  .form-submit-button,
  .download-button,
  .tab-button,
  .view-all-link,
  .learn-more-link {
    padding: 10px 20px;
    font-size: 14px;
  }
  .cta-button .button-arrow,
  .form-submit-button .button-arrow,
  .download-button .download-icon {
    width: 14px;
    height: 14px;
  }

  /* Tabs */
  .tab-container {
    gap: 12px;
  }
  .tab-button {
    padding: 16px 10px;
    font-size: 14px;
  }

  /* Hero (Index) */
  main.main-content .hero-section .hero-subheading-wrapper {
    align-items: flex-start;
    gap: 24px;
  }
  main.main-content .hero-section .hero-subheading {
    font-size: 18px;
    line-height: 1.7;
  }

  /* Case Study Details */
  .case-study-project-details .detail-text {
    font-size: 16px;
    line-height: 1.75; /* 28px */
  }

  /* CTA Section (Index, About) */
  .cta-section .cta-title {
    font-size: 28px;
  }
  .cta-section .cta-title br {
    display: none;
  }

  /* Portfolio Cards (Work) */
  .portfolio-card .card-title {
    font-size: 18px;
  }
  .portfolio-card.small-card .card-title {
    font-size: 16px;
  }

  /* Experience (About) */
  .experience-item .experience-date {
    font-size: 20px;
  }
}

/* Add Animation Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Style for sections initially hidden */
.section-animated {
  opacity: 0; /* Start hidden */
}

/* Style for sections when they become visible */
.section-visible {
  animation: fadeInUp 0.8s ease forwards;
}