.portfolio-hero-section{width:90%;max-width:1600px;margin:auto;height:100vh;position:relative}.portfolio-hero-section .portfolio-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-70%);width:80%;text-align:center}.portfolio-hero-section .portfolio-container .hero-buttons{display:flex;flex-direction:column;gap:1rem;margin:1rem auto;cursor:pointer;display:none}.portfolio-hero-section .portfolio-container .hero-btn{display:block;margin:auto;width:100%;color:var(--white);padding:1rem 2rem;border-radius:2rem}.portfolio-hero-section .portfolio-container .hero-btn.primary{background-color:var(--primary-color);border:none;cursor:pointer;text-align:center}.portfolio-hero-section .portfolio-container .hero-btn.secondary{position:relative;overflow:hidden;border:1px solid var(--black);color:var(--black);z-index:1}.portfolio-hero-section .portfolio-container .hero-btn.secondary:after{content:"";position:absolute;inset:0;background-color:var(--primary-color);border-radius:2rem;transform:scaleX(0);transform-origin:left;transition:transform .4s ease;z-index:-1}.portfolio-hero-section .portfolio-container .hero-btn.secondary:hover:after{transform:scaleX(1)}.portfolio-hero-section .portfolio-container .hero-btn.secondary:hover{border-color:var(--primary-color);color:var(--white)}.portfolio-hero-section .portfolio-container .portfolio-left h1{font-size:clamp(1.5rem,9vw,10rem);margin-bottom:1rem}.portfolio-hero-section .portfolio-container .portfolio-right h2{margin-bottom:1rem;text-align:center;font-size:clamp(1.25rem,2vw,3rem)}.portfolio-hero-section .portfolio-container .portfolio-right p{display:none}@media(min-width:768px){.portfolio-hero-section .portfolio-container{display:flex;flex-direction:row;gap:2rem;align-items:center;justify-content:center;width:100%;top:40%;transform:translate(-50%,-50%);text-align:left}.portfolio-hero-section .portfolio-container .hero-buttons{display:flex;flex-direction:row}.portfolio-hero-section .portfolio-container .hero-buttons .hero-btn{width:-moz-fit-content;width:fit-content;display:block;margin:0}.portfolio-hero-section .portfolio-container .portfolio-left{flex:1 1}.portfolio-hero-section .portfolio-container .portfolio-left h1{width:70%}.portfolio-hero-section .portfolio-container .portfolio-right{flex:1 1;align-items:flex-start}.portfolio-hero-section .portfolio-container .portfolio-right .hero-btn{margin:0 auto 0 0}.portfolio-hero-section .portfolio-container .portfolio-right h2,.portfolio-hero-section .portfolio-container .portfolio-right p{text-align:left;margin-bottom:1.5rem}.portfolio-hero-section .portfolio-container .portfolio-right p{display:block}}.portfolio-projects{width:90%;max-width:1600px;margin:auto auto 4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:2rem;gap:2rem}@media(min-width:768px){.portfolio-projects{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}}@media(min-width:1024px){.portfolio-projects{gap:3rem}}