:root {
  /* Colors */
  --black: #000000;
  --white: #ffffff;
  --red: #dc2626;
  --grey: #cbcccf;
  --darkgrey: #c6c6c6;
  --green: #00cd33;
  --darkgreen: #0a7e27;
  --blue: #1d64fd;
  --darkblue: #211bd5;
  --purple: #b86bff;
  --pink: #d6a8ff;

  /* Background Colors */
  --bgwhite: #ffffff;
  --bgred: #ead3d3d8;
  --bggrey: #c0c4ccdd;
  --bggreen: #eaf7edc6;
  --bgblue: #030f2b;
  --bgpurple: #e1c6f9c9;
  --bgcyan: #e5fafae8;
  --bgbrown: #6c616181;
  --bgpink: #f8e6f9ed;
  --bgnavy: #07220b;
  --bgyellow: #fbf9ebd1;

  --muted: #858390;
  --fade: rgba(255, 255, 255, 0.211);
  --fade-strong: rgba(255, 255, 255, 0.08);

  --toputil: rgba(7, 3, 15, 0.6);
  --border: rgba(17, 24, 39, 0.16);
  --lightheading: #bec1c7;
  --lighttext: #93969b;

  --shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --max: 1400px;
  --maxnav: 1350px;
  --shadow: 0 14px 30px rgba(0,0,0,0.15);

  --container-min: 320px;
  --container-max: 1400px;
  --content-max: 1180px;
  --container-padding: auto;
  --nav-h: 92px;
  --util-h: 36px
}

h1 { margin-top: 10px; font-size: 3.0rem; font-weight: 680; padding-top: 12px; padding-bottom: 4px; color: #000000;}
h2 { margin-top: 10px; font-size: 2.5rem; font-weight: 645; padding-top: 12px; padding-bottom: 4px; color: #000000;}
h3 { font-size: 1.5rem; font-weight: 640; padding-top: 2px; padding-bottom: 0px; color: #131010;}
h4 { font-size: 1.3rem; font-weight: 620; padding-top: 2px; padding-bottom: 4px; color: #252424;}
h5 { font-size: 1.1rem; font-weight: 600; padding-top: 2px; padding-bottom: 4px; color: #252424;}

p { font-size: 1.0rem; font-weight: 600; padding-bottom: 8px; color: #1f1e1e; text-shadow: #1d64fd;}


/* Sections */
section {
  position: relative;
  width: 100%;
  min-height: 200px;
  z-index: 1;
  padding: 0;
  align-items: center;
}

.section-blue {
  background-color: var(--bgblue);
}

.section-green {
  background-color: var(--bggreen);
}

.section-red {
  background-color: var(--bgred);
}

.section-grey {
  background-color: var(--bggrey);
}

.section-purple {
  background-color: var(--bgpurple);
}

.section-pink {
  background-color: var(--bgpink);
}

.section-cyan {
  background-color: var(--bgcyan);
}

.section-brown {
  background-color: var(--bgbrown);
}

.section-navy {
  background-color: var(--bgnavy);
}

.section-yellow {
  background-color: var(--bgyellow);
}

.section-blue,
.section-green,
.section-red,
.section-grey,
.section-purple,
.section-pink,
.section-cyan,
.section-brown,
.section-navy,
.section-yellow {
  padding: 56px 0;
}

.flex-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--content-max);
  height: 100%;
}

.grid-inner {
  display: grid;
  align-items: center;
  justify-content: center;
  width: var(--content-max);
  height: 100%;
}

.split-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  flex-direction: row;
  gap: 32px;
  align-items: start;
  align-content: start;
  justify-items: center;
  text-align: start;
  max-width: var(--content-max);
  min-width: 660px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.split-inner-left {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px;
  align-items: start;
  align-content: start;
  justify-items: start;
  text-align: left;
  max-width: 720px;
}

.split-inner-right {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  align-content: start;
  justify-items: start;
  text-align: left;
  max-width: 480px;
}

.skills-card {
  width: 100%;
}

.skills-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  color: var(--black);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 610;
}

.skills-card-list li {
  padding-left: 24px;
  position: relative;
}

.skills-card-list li::before {
  content: "▸";
  position: absolute;
  left: 4px;
  color: var(--blue);
  font-weight: 700;
  font-size: 16px;
}

.center-title {
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-bottom: 24px;
  color: var(--black);
  margin-top: 0px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.left-title {
  text-align: left;
  display: grid;
  justify-items: left;
  margin-bottom: 24px;
  color: var(--black);
  align-items: center;
  margin-top: 12px;
}

.center-title-white {
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-bottom: 24px;
  color: var(--white);
  margin-top: 12px;
}

.left-title-white {
  text-align: left;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--white);
  margin-top: 12px;
}

.center-subtitle {
  text-align: center;
  display: flex;
  gap: 12px;
  justify-items: center;
  margin-bottom: 4px;
  color: var(--darkgrey);
  padding: 0 6px;
}

.center-subtitle-white {
  text-align: center;
  display: flex;
  gap: 12px;
  justify-items: center;
  margin-bottom: 4px;
  color: var(--lightheading);
  padding: 0 6px;
}

.left-subtitle {
  text-align: left;
  display: flex;
  text-decoration: underline;
  justify-items: center;
  margin-bottom: 0px;
  color: var(#0f0f0f);
  padding: 0 6px;

}

.left-subtitle-white {
  text-align: left;
  display: flex;
  gap: 12px;
  justify-items: center;
  margin-bottom: 4px;
  color: var(--lightheading);
}

.center-content-white {
  text-align: center;
  display: flex;
  gap: 12px;
  justify-items: center;
  margin-bottom: 0px;
  color: var(--lighttext);
  margin-top: 18px;
}


.left-content-white {
  text-align: left;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--lighttext);
  margin-top: 18px;
}



.center-content {
  text-align: center;
  display: flex;
  gap: 12px;
  justify-items: center;
  margin-bottom: 8px;
  color: var(--darkgrey);
  padding: 0 8px;
}

.left-content {
  text-align: left;
  display: flex;
  gap: 12px;
  justify-items: center;
  margin-top: 18px;
  margin-bottom: 0px;
  color: var(--black);
  padding: 0 8px;
  line-height: 1.6;
  font-size: 16px;
  font-weight: 620;
}

.center-title-white h1,
.center-title h1,
.center-title-white h2,
.center-title h2,
.center-subtitle-white h3,
.center-subtitle-white h4,
.center-subtitle h3,
.center-subtitle h4,
.center-content span,
.center-content-white span,
.center-content-white p,
.center-content p {
  text-align: center;
  margin-top: 10px;
}

.left-title-white h1,
.left-title h1,
.left-title-white h2,
.left-title h2,
.left-subtitle-white h3,
.left-subtitle-white h4,
.left-subtitle h3,
.left-subtitle h4,
.left-content span,
.left-content-white span,
.left-content-white p,
.left-content p {
  text-align: left;
}

.card {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--bgwhite);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 24px rgba(218, 212, 212, 0.12);
  display: grid;
  gap: 14px;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 12px 32px rgba(139, 138, 138, 0.15);
  transform: translateY(-2px);
}

.card-title {
  font-size: 18px;
  font-weight: 620;
  color: var(--black);
  margin-bottom: 2px;
}

.card-title-white {
  font-size: 18px;
  font-weight: 620;
  color: var(--white);
  margin-bottom: 2px;
}


.card-content {
  font-size: 16px;
  font-weight: 620;
  color: var(--black);
}

.section-image {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  object-fit: cover;
}

.inner-image {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  object-fit: cover;
  padding: 10px;
}

.inner-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.section-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: var(--hero-img);
  object-fit: cover;
  width: var(--content-max);
  z-index: 1;
  padding: 80px 0 60px;
}

.split-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Skills Section Styles */
.skills-category {
  margin-bottom: 24px;
}

.skills-category:last-child {
  margin-bottom: 0;
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

.skill-tag {
  display: inline-block;
  padding: 10px 18px;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: var(--white);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  white-space: nowrap;
}

.skill-tag:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.45);
}

/* Responsive Section Padding */

@media (min-width: 900px) {
  .section-blue,
  .section-green,
  .section-red,
  .section-grey,
  .section-purple,
  .section-pink,
  .section-cyan,
  .section-brown,
  .section-navy,
  .section-yellow {
    padding: 56px 0;
  }
}


@media (min-width: 768px) and (max-width: 1200px) {
  .section-blue,
  .section-green,
  .section-red,
  .section-grey,
  .section-purple,
  .section-pink,
  .section-cyan,
  .section-brown,
  .section-navy,
  .section-yellow {
    padding: 44px 0;
  }
}


@media (max-width: 767px) {
  .section-blue,
  .section-green,
  .section-red,
  .section-grey,
  .section-purple,
  .section-pink,
  .section-cyan,
  .section-brown,
  .section-navy,
  .section-yellow {
    padding: 32px 0;
  }
}