/* =========================================================
  🧩 WRAPPER
========================================================= */
.sec-who-am-i { padding: var(--section-padding) 0; position: relative; }

.sec-who-am-i .wrapped { flex-direction: column; gap: var(--section-gap); padding: 0 var(--wrapper-padding); width: 100%; max-width: var(--width-wrap-1400); }
.sec-who-am-i .wrapped .section-content { display: flex; flex-direction: column; gap: var(--box-gap); margin: auto; }

/* =========================================================
  🧩 TABS
========================================================= */
.sec-who-am-i .tabs-wrapper { overflow: visible; display: flex; flex-direction: row; position: relative; width: 100%; }

.sec-who-am-i .tabs--hor-list { border-radius: var(--br-32); background: var(--section-bg-box); border: 1px solid var(--color-black-200); padding: var(--space-4); gap: var(--space-16); display: flex; flex-direction: row; align-items: flex-start; position: relative; }
.sec-who-am-i .tabs--hor-list { gap: var(--space-16); }

.sec-who-am-i .tabs--hor-list li.tab { width: auto; position: relative; }

.sec-who-am-i .tabs--hor-list li.tab button { cursor: pointer; border-radius: var(--br-32); width: auto; align-items: center; }
.sec-who-am-i .tabs--hor-list li.tab button { font: var(--h7-font); letter-spacing: var(--h7-ls); border: none; transition: var(--trans-complete-effect); }

.sec-who-am-i .tabs--hor-list li.active button { background: var(--tab-vertical-bg-active); color: var(--tab-vertical-text-inverse); border: none; }
.sec-who-am-i .tabs--hor-list li.active button span { z-index: 2; }

/* =========================================================
  🧩 TABS - ARROWS
========================================================= */
.sec-who-am-i .tabs-wrapper .tabs-arrow { position: absolute; cursor: pointer; z-index: 5; top: 50%; transform: translateY(-50%) !important; }
.sec-who-am-i .tabs-wrapper .tabs-arrow--left { left: -24px; }
.sec-who-am-i .tabs-wrapper .tabs-arrow--right { right: -24px; }

/* =========================================================
  🧩 TABS - CONTENT
========================================================= */
.sec-who-am-i .tabs-content { width: 100%; display: flex; flex-direction: row; overflow: hidden; position: relative; }

.sec-who-am-i .tabs-content .tab-content { display: none; transition: opacity 1.45s ease; opacity: 0; text-align: center; margin: auto; }
.sec-who-am-i .tabs-content .tab-content.active { display: flex; opacity: 1; }

.sec-who-am-i .tabs-content .tab-content p { font: var(--h2-font); letter-spacing: var(--h2-ls); line-height: var(--lh-135); color:var(--section-text-heading); }



/* =========================================================
  🧩 RWD - MEDIA QUERIES
========================================================= */
@media (min-width: 1px) and (max-width: 640px) {
  .sec-who-am-i { padding-top: calc(var(--section-padding) / 1.5); }

  .sec-who-am-i .tabs--hor-list li.tab button { font-size: var(--fs-l); padding: var(--space-16) var(--space-16); }

  .sec-who-am-i .tabs-arrow { top: 50%; transform: translateY(-50%) !important; }

  .sec-who-am-i .wrapped .section-content { width: 100%; gap: calc(var(--box-gap) / 2); }

  /* 🧩 TABS - LIST */
  .sec-who-am-i .wrapped .tabs--hor-list { width: 100%; max-width: 100%; overflow-x: auto !important; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: var(--space-8); margin: auto; }
  .sec-who-am-i .wrapped .tabs--hor-list::-webkit-scrollbar { display: none; }

  .sec-who-am-i .wrapped .tabs--hor-list li.tab { flex: 0 0 auto; }
  .sec-who-am-i .tabs--hor-list li.tab { flex: 0 0 auto; }

  .sec-who-am-i .wrapped .tabs-arrow { display: flex; }

  .sec-who-am-i .tabs-content .tab-content { min-width: 100%; max-width: 100%; }
  .sec-who-am-i .tabs-content .tab-content p { font-size: var(--fs-h4); text-align: center; }
}

@media (min-width: 430px) and (max-width: 640px) {
  .sec-who-am-i .wrapped .tabs--hor-list { width: calc(100% - 48px); }

  .sec-who-am-i .tabs-wrapper .tabs-arrow--left { left: -4px; }
  .sec-who-am-i .tabs-wrapper .tabs-arrow--right { right: -4px; }
}

@media (min-width: 480px) and (max-width: 640px) {
  .sec-who-am-i .wrapped .tabs--hor-list { width: calc(100% - 72px); }
}

@media (min-width: 640px) and (max-width: 781px) {
  .sec-who-am-i { padding-top: calc(var(--section-padding) / 1.5); }
  .sec-who-am-i .wrapped .section-content { width: auto; }

  /* 🧩 TABS - LIST */
  .sec-who-am-i .tabs--hor-list { gap: var(--space-8); overflow: hidden; margin: auto; max-width: unset; }
  .sec-who-am-i .wrapped .tabs--hor-list { width: calc(100% - 72px); }

  .sec-who-am-i .tabs-wrapper .tabs-arrow--left { left: -4px; }
  .sec-who-am-i .tabs-wrapper .tabs-arrow--right { right: -4px; }

  .sec-who-am-i .tabs--hor-list li.tab { flex: 0 0 auto; }
  .sec-who-am-i .tabs--hor-list li.tab button { font-size: var(--fs-l); padding: var(--space-16) var(--space-24); }

  .sec-who-am-i .wrapped .tabs-arrow { display: flex; }

  /* 🧩 TABS - CONTENT */
  .sec-who-am-i .tabs-content .tab-content p { font-size: var(--fs-h2); text-align: center; }
}

@media (min-width: 781px) and (max-width: 1023px) {
  .sec-who-am-i { padding-top: calc(var(--section-padding) / 1.5); }
  .sec-who-am-i .wrapped .section-content { width: 100%; gap: calc(var(--box-gap) / 2); }

  /* 🧩 TABS - LIST */
  .sec-who-am-i .tabs--hor-list { gap: var(--space-8); margin: auto; }
  .sec-who-am-i .tabs--hor-list li.tab { flex: 0 0 auto; }
  .sec-who-am-i .tabs--hor-list li.tab button { font-size: var(--fs-l); padding: var(--space-16) var(--space-24); }

  .sec-who-am-i .wrapped .tabs--hor-list { width: auto; max-width: 100%; overflow-x: auto !important; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: auto; }
  .sec-who-am-i .wrapped .tabs--hor-list::-webkit-scrollbar { display: none; }

  .sec-who-am-i .tabs-wrapper .tabs-arrow { display: none; }

  /* 🧩 TABS - CONTENT */
  .sec-who-am-i .tabs-content .tab-content { width: auto; min-width: unset; max-width: 740px; margin: auto; }
  .sec-who-am-i .tabs-content .tab-content p { font-size: var(--fs-h2); text-align: center; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .sec-who-am-i .wrapped .section-content { width: auto; }

  /* 🧩 TABS - LIST */
  .sec-who-am-i .tabs--hor-list { overflow: visible; width: auto !important; margin: auto; max-width: unset; }
  .sec-who-am-i .tabs--hor-list li.tab button { padding: var(--space-16) var(--space-32); }
	.sec-who-am-i .tabs--hor-list li.tab button { font: var(--h7-font); letter-spacing: var(--h7-ls); }
  .sec-who-am-i .tabs-wrapper .tabs-arrow { display: none; }

  /* 🧩 TABS - CONTENT */
  .sec-who-am-i .tabs-content .tab-content { min-width: 100%; max-width: 920px; }
  .sec-who-am-i .tabs-content .tab-content p { font-size: var(--fs-h2); text-align: center; }
}

@media (min-width: 1200px) {
  .sec-who-am-i .wrapped { max-width: var(--width-wrap-1400); }

  /* 🧩 TABS - LIST */
  .sec-who-am-i .tabs--hor-list { margin: auto; }
  .sec-who-am-i .tabs--hor-list li.tab button { padding: var(--space-16) var(--space-32); }
  .sec-who-am-i .tabs-wrapper .tabs-arrow { display: none; }

  /* 🧩 TABS - CONTENT */
  .sec-who-am-i .tabs-content .tab-content { width: 100%; max-width: 1020px; }
}