.portfolio-hero{position:relative;overflow:hidden}.portfolio-hero .main-content{position:relative;z-index:10;max-width:72rem;margin:0;padding:0}.portfolio-hero .main-content .hero-title{text-align:center;margin-bottom:4rem;transition:all 1s ease .3s}.portfolio-hero .main-content .hero-title.visible{opacity:1;transform:translateY(0)}.portfolio-hero .main-content .hero-title.hidden{opacity:0;transform:translateY(2.5rem)}.portfolio-hero .main-content .hero-title h1{font-size:3rem;line-height:1.2;font-weight:700;color:#fff;margin-bottom:2rem}@media(min-width:1024px){.portfolio-hero .main-content .hero-title h1{font-size:4.5rem}}.portfolio-hero .main-content .hero-title p{color:#9ca3af;font-size:1.125rem;max-width:64rem;margin:0 auto;line-height:1.75}.portfolio-hero .main-content .about-card{max-width:64rem;transition:all 1s ease .5s}.portfolio-hero .main-content .about-card.visible{opacity:1;transform:translateY(0)}.portfolio-hero .main-content .about-card.hidden{opacity:0;transform:translateY(2.5rem)}.portfolio-hero .main-content .about-card .card-content .header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.portfolio-hero .main-content .about-card .card-content .header .avatar{width:3rem;height:3rem;background:#334155;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:1.125rem;border:1px solid rgba(75,85,99,.5)}.portfolio-hero .main-content .about-card .card-content .header .info h3{color:#fff;font-weight:600;font-size:1.125rem}.portfolio-hero .main-content .about-card .card-content .header .info p{color:#9ca3af;font-size:.875rem}.portfolio-hero .main-content .about-card .card-content .grid-container{display:grid;gap:5rem}@media(min-width:1024px){.portfolio-hero .main-content .about-card .card-content .grid-container{grid-template-columns:1fr 1fr}}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .info-items{padding-bottom:1.5rem}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .info-items .item{display:flex;align-items:center;gap:.75rem;color:#d1d5db;transition:color .3s ease;cursor:pointer;margin-bottom:1rem}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .info-items .item:hover{color:#fff}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .info-items .item:hover svg{color:#ef4444}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .info-items .item svg{color:#9ca3af;width:1.125rem;height:1.125rem;transition:color .3s ease}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .description p{color:#d1d5db;line-height:1.75;margin-bottom:1.5rem}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .description .buttons{display:flex;gap:1rem;flex-wrap:wrap}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .description .buttons button{padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;transition:all .3s ease;background:rgba(0,0,0,0);border:1px solid #4b5563;color:#d1d5db}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .description .buttons button.primary{background:#ef4444;border-color:#ef4444;color:#fff}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .description .buttons button.primary:hover{background:hsl(0,84.236453202%,50.1960784314%);border-color:hsl(0,84.236453202%,50.1960784314%);transform:translateY(-2px)}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .description .buttons button.secondary:hover{border-color:#ef4444;color:#fff;transform:translateY(-2px)}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-top:1rem;margin-top:2rem;border-top:1px solid rgba(51,65,85,.5);border-bottom:1px solid rgba(51,65,85,.5);padding-bottom:1rem}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .stats .stat{text-align:center}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .stats .stat .value{font-size:1.875rem;font-weight:700;color:#fff;margin-bottom:.25rem}.portfolio-hero .main-content .about-card .card-content .grid-container .left-column .stats .stat .label{color:#9ca3af;font-size:.875rem}.portfolio-hero .main-content .about-card .card-content .grid-container .right-column .services h4,.portfolio-hero .main-content .about-card .card-content .grid-container .right-column .skills h4{color:#fff;font-weight:600;margin-bottom:1rem}.portfolio-hero .main-content .about-card .card-content .grid-container .right-column .skills .skill-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.portfolio-hero .main-content .about-card .card-content .grid-container .right-column .skills .skill-grid .skill{background:rgba(51,65,85,.3);border:1px solid rgba(75,85,99,.5);padding:.5rem;border-radius:.5rem;text-align:center;color:#d1d5db;font-size:.875rem;transition:all .3s ease;cursor:pointer}.portfolio-hero .main-content .about-card .card-content .grid-container .right-column .skills .skill-grid .skill:hover{border-color:#ef4444;color:#fff;transform:translateY(-2px)}.portfolio-hero .main-content .about-card .card-content .grid-container .right-column .services{margin-top:2rem}.portfolio-hero .main-content .about-card .card-content .grid-container .right-column .services .service{display:flex;align-items:center;gap:.75rem;color:#d1d5db;transition:color .3s ease;cursor:pointer;margin-bottom:.5rem}.portfolio-hero .main-content .about-card .card-content .grid-container .right-column .services .service:hover{color:#fff}.portfolio-hero .main-content .about-card .card-content .grid-container .right-column .services .service:hover .dot{background:#ef4444}.portfolio-hero .main-content .about-card .card-content .grid-container .right-column .services .service .dot{width:.5rem;height:.5rem;background:#4b5563;border-radius:9999px;transition:background .3s ease}.portfolio-hero .main-content .about-card .card-content .grid-container .right-column .services .service span{font-size:.875rem}