/* Base (ported from globals.css and component styles) */
:root { color-scheme: light; }
* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; font-family: "Eudoxus Sans", sans-serif; }
.container { overflow-x: clip; position: relative; color: #0D2F3F; }
.bg-primary { background: #F8F7F1 !important; }
.innerWidth { width: 100%; max-width: 1280px; margin-inline: auto; }
.paddings { padding: 1.5rem; }
@media (min-width:640px){ .paddings{ padding: 4rem; } }
.yPaddings { padding-block: 3rem; }
@media (min-width:640px){ .yPaddings{ padding-block: 4rem; } }
@media (min-width:1280px){ .yPaddings{ padding-block: 2rem; } }
.flexCenter{ display:flex; justify-content:center; align-items:center; }
.primaryText{ font-size:3rem; font-weight:700; }
.secondaryText{ line-height:30px; font-size:1rem; font-weight:500; }
@media (max-width:640px){ .primaryText{ font-size:2.5rem; } .secondaryText{ font-size:1.1rem; line-height:40px; } }
.anchor{ display:block; position:relative; top:-100px; visibility:hidden; }

/* Header */
.headerWrapper { position: sticky; top:0; z-index:99; transition: box-shadow 300ms ease; }
.headerWrapper .headerContainer{ position:relative; justify-content:space-between; font-weight:500; min-height:72px; padding-inline:1.5rem; }
@media (min-width:640px){ .headerWrapper .headerContainer{ min-height:84px; padding-inline:4rem; } }
.headerWrapper .name{ font-size:1.5rem; font-weight:500; }
.headerWrapper .menu{ text-transform:uppercase; font-size:1rem; list-style:none; gap:1.5rem; cursor:pointer; display:flex; }
.headerWrapper .menu li a{ color:inherit; text-decoration:none; }
.headerWrapper .menu li:hover{ color:#286f6c; }
.headerWrapper .menuIcon{ display:none; cursor:pointer; font-size:28px; }
@media (max-width:768px){
  .headerWrapper .menu{ position:absolute; right:0; top:3rem; height:calc(100vh - 6.3rem); width:50%; min-width:15rem; background:white; padding:3rem; display:flex; border-radius:10px; transition: right 200ms ease; align-items:flex-start; justify-content:flex-start; flex-direction:column; gap:2rem; box-shadow:0 4px 4px rgba(0,0,0,.05); }
  .headerWrapper .menuIcon{ display:block; }
}

/* Hero */
.heroWrapper{ overflow:hidden; }
.heroWrapper .heroContainer{ position:relative; z-index:1; }
.heroWrapper .upperElements{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.heroWrapper .lowerElements{ margin-top:12rem; display:flex; flex-wrap:wrap; justify-content:space-between; }
.heroWrapper .lowerElements .experience{ display:flex; align-items:center; gap:1rem; }
.heroWrapper .lowerElements .experience > :nth-child(2){ line-height:25px; }
.heroWrapper .lowerElements .certificate{ display:flex; flex-direction:column; align-items:center; }
.heroWrapper .lowerElements .certificate img{ margin-bottom:1rem; width:3.5rem; }
.heroWrapper .person{ position:absolute; bottom:-2rem; left:33%; background-image:url("../assets/splash.webp"); background-repeat:no-repeat; background-size:23rem; }
.heroWrapper .person img{ margin-bottom:-50px; }
.heroWrapper .email{ position:absolute; top:50%; left:0; color:#2196F3; }
@media (max-width:768px){
  .heroWrapper .lowerElements{ margin-top:4rem; gap:2rem; justify-content:center; }
  .heroWrapper .person{ position:relative; left:0; background-size:20rem; display:flex; align-items:center; justify-content:center; background-position:bottom; }
}
@media (max-width:640px){
  .heroWrapper .upperElements{ justify-content:center; text-align:center; gap:2rem; }
  .heroWrapper .email{ display:none; }
  .heroWrapper .person img{ width:23rem; }
}

/* Expertise */
.expertiseWrapper{ background:white; }
.expertiseContainer{ align-items:flex-start; gap:2rem; flex-wrap:wrap; }
.expertiseContainer > div{ flex:1; }
.leftSide{ display:flex; flex-direction:column; gap:2rem; }
.exp{ display:flex; align-items:center; border:1px solid #e7e7e7; border-radius:20px; padding:1.5rem; gap:2rem; transition: box-shadow 200ms ease-out, transform .6s ease, opacity .6s ease; opacity:0; transform: translateX(-40px); }
.exp.in-view{ opacity:1; transform: none; }
.exp:hover{ cursor:pointer; box-shadow:0px 21px 13px rgba(0,0,0,.04); }
.exp > :nth-child(1){ padding:10px; width:3rem; height:3rem; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.exp > :nth-child(2){ display:flex; flex-direction:column; gap:1rem; }
.exp > :nth-child(2) > :nth-child(1){ font-size:1.6rem; font-weight:700; }
.rightSide{ display:flex; flex-direction:column; gap:2rem; }
@media (max-width:640px){ .rightSide{ text-align:center; } }
.stats{ justify-content:flex-start; gap:4rem; }
.stat{ flex-direction:column; justify-content:flex-start; }

/* Work */
.workContainer{ flex-direction:column; gap:2rem; }
.experiences{ width:100%; flex-direction:column; gap:1.4rem; position:relative; }
.expRow{ width:100%; justify-content:space-between; line-height:40px; align-items:flex-start; display:flex; }
.expRow > div{ flex:1; }
.expRow .role{ margin-left:2rem; }
.progressbar{ position:absolute; height:100%; display:flex; flex-direction:column; gap:1.4rem; left:45%; }
.progressbar .line{ position:absolute; height:0%; width:2px; background-image:linear-gradient(black 33%, rgba(255,255,255,0) 0%); background-position:right; background-size:2px 30px; background-repeat:repeat-y; left:48%; z-index:1; border-radius:5px; transition: height 1.5s ease; }
.progressbar > div{ flex:1; padding-top:.8rem; z-index:2; }
.progressbar .circle{ border-radius:50%; background:black; width:1.2rem; height:1.2rem; }

/* Portfolio */
.portfolioWrapper{ background:white; overflow:hidden; }
.portfolioContainer{ flex-direction:column; gap:2rem; }
.heading{ width:100%; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; }
.heading > :nth-child(2){ text-decoration:underline; color:orange; cursor:pointer; }
.portfolioShowCase{ width:100%; gap:1.5rem; justify-content:space-around; flex-wrap:wrap; display:flex; }
.portfolioShowCase > img{ border-radius:20px; max-width:25rem; max-height:18rem; box-shadow:0px 21px 13px rgba(0,0,0,.13); cursor:pointer; }
@media (max-width:640px){ .portfolioShowCase > img{ width:100%; } }
.portfolioSubtitle{ margin-top:10px; }

/* Footer */
.footerWrapper{ background:white; }
.footerContainer{ display:flex; gap:2rem; }
.footerContainer .left{ flex:3; }
.footerContainer .left > *{ display:block; }
.footerContainer .left > :nth-child(2){ margin-top:3rem; }
.footerContainer .left > :nth-child(2) a{ text-decoration:underline; color:orange; }
.footerContainer .right{ flex:1; }
.footerContainer .right .info{ margin-bottom:1rem; }
.footerContainer .right .info > *{ display:block; }
.footerContainer .right .menu{ display:flex; flex-direction:column; gap:2rem; list-style:none; }
.footerContainer .right .menu li{ cursor:pointer; }
.footerContainer .right .menu li:hover{ color:#286f6c; }
@media (max-width:640px){ .footerContainer{ flex-direction:column; align-items:flex-start; } .footerContainer .right .menu{ flex-direction:row; flex-wrap:wrap; } }

/* Simple scroll animations */
[data-animate]{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
[data-animate].in-view{ opacity:1; transform:translateY(0); transition-delay:var(--delay, 0s); }
[data-animate="fade-left"]{ transform:translateX(40px); }
[data-animate="fade-left"].in-view{ transform:translateX(0); }
[data-animate="fade-right"]{ transform:translateX(-40px); }
[data-animate="fade-right"].in-view{ transform:translateX(0); }
[data-animate="fade-up"]{ transform:translateY(40px); }
[data-animate="fade-up"].in-view{ transform:translateY(0); }
[data-animate="grow-y"]{ height:0; }
[data-animate="grow-y"].in-view{ height:92%; }

/* Back to top button */
.backToTop{ position:fixed; right:1.25rem; bottom:1.25rem; width:44px; height:44px; border-radius:999px; border:none; background:#286F6C; color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.15); cursor:pointer; opacity:0; transform:translateY(10px); transition: opacity .3s ease, transform .3s ease, background .2s; z-index:100; }
.backToTop.show{ opacity:1; transform:translateY(0); }
.backToTop:hover{ background:#1f5452; }

/* People slider */
.peopleSlider{ position:relative; display:flex; align-items:center; gap:1rem; }
.peopleViewport{ overflow:hidden; width:100%; }
.peopleSlides{ display:flex; gap:1rem; transition: transform 600ms ease; }
.peopleNav{ background:white; border:1px solid #e7e7e7; border-radius:999px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,.05); }
.peopleCard{ box-shadow: rgb(0 0 0 / 5%) -3px 11px 13px 0px; padding:2rem; display:flex; flex-direction:column; gap:1rem; background:white; border-radius:20px; position:relative; min-width:280px; max-width:360px; }
.peopleCard img{ margin:auto; border-radius:100%; width:3.5rem; height:3.5rem; position:absolute; top:-2rem; filter: drop-shadow(0 4px 4px rgba(0,0,0,.08)); }
.peopleCard p{ text-align:center; font-size:.9rem; line-height:25px; }
.peopleCard .line{ width:100%; border:.2px solid rgb(234,234,234); }
.peopleCard .bio>*{ display:block; text-align:center; }
.peopleCard .bio>:nth-child(1){ font-weight:600; margin-bottom:5px; }
.peopleCard .bio>:nth-child(2){ font-size:.7rem; color:rgb(172,172,172); }