.header{width:100vw;height:100vh;position:relative}.header-main{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-color:#0000;background-image:linear-gradient(#00000080,#00000080),url(/images/bg_image.webp);background-position:0 0,50% -50vh;background-repeat:repeat,no-repeat;background-size:cover;background-attachment:scroll,fixed;background-origin:padding-box,padding-box;background-clip:border-box,border-box;width:100vw;height:65vh;position:relative}.hello-card{color:#fcf6ed;flex-direction:column;align-items:center;width:100vw;height:300px;display:flex;position:absolute;top:70%;left:50%;transform:translate(-50%)translateY(-50%)}.hello-card span{letter-spacing:2px;font-size:1.6rem}.hello-card span:first-child{padding-bottom:2rem}.hello-card span:last-child{padding-top:2rem}.hello-card h1{font-family:Montserrat,Arial,sans-serif;font-size:5rem;font-weight:500}.welcome-card{text-align:center;background-color:#fcf6ed;flex-direction:column;align-items:center;width:100vw;height:35vh;display:flex;position:absolute;bottom:0}.welcome-card div{color:#131313;margin-top:4rem}.welcome-card div h2{margin-bottom:1rem;font-size:2rem;font-weight:500}.welcome-card div p{text-align:left;width:600px;font-size:1.5rem}.welcome-card .scroll-animation{width:50px}.scroll-down{z-index:10;cursor:pointer;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.mouse{opacity:.8;border:2px solid #131313;border-radius:60px;width:30px;height:50px;transition:all .3s ease-in-out;position:relative}.wheel{background:#131313;border-radius:50%;width:5px;height:5px;transition:all .3s ease-in-out;animation:1.5s ease-in-out infinite scrollAnimation;position:absolute;top:10px;left:50%;transform:translate(-50%)}@keyframes scrollAnimation{0%{opacity:1;top:10px}70%{opacity:1;top:10px}to{opacity:0;top:30px}}.scroll-down:hover .mouse{border-color:var(--accent-color);opacity:1}.scroll-down:hover .wheel{background:var(--accent-color)}
.about-me{color:#fcf6ed;background-color:#131313;flex-direction:column;justify-content:space-between;width:100vw;padding:5rem 10rem;display:flex;position:relative}.about-me .about-me-div{flex-direction:row;justify-content:center;align-items:center;display:flex}.about-me .about-me-div .profile-image{border:none;border-radius:5px;height:50vh;margin-right:50px;overflow:hidden;box-shadow:0 4px 8px #0003,0 6px 20px #00000030}.about-me .about-me-div .profile-image img{object-fit:cover;height:50vh}.about-me .about-me-div .about-me-content{width:50vw}.about-me .about-me-div .about-me-content h2{margin:0;font-size:5rem;font-weight:400}.about-me .about-me-div .about-me-content .about-me-job,.about-me .about-me-div .about-me-content .about-me-job span{color:#46aeab;height:4rem;font-size:3rem;display:inline-block}.about-me .about-me-div .about-me-content p{width:50%;margin-top:2rem;margin-bottom:1rem}.about-me .about-me-div .about-me-content li{padding:1rem 0}.about-me .about-me-div .about-me-content li,span,p,button,a{font-size:1.5rem}.about-me .about-me-div .about-me-content .about-me-li-title{width:18rem;display:inline-block}.about-me .about-me-div .about-me-content .about-me-scontent{margin-left:3rem;display:inline-block}.about-me .about-me-div .about-me-content button{color:#46aeab;background-color:#0000;border:1px solid #46aeab;margin-top:1rem;padding:1rem 1.5rem;font-weight:600;transition:all .3s}.about-me .about-me-div .about-me-content button:hover{color:#131313;cursor:pointer;background-color:#46aeab;border:1px solid #131313;border-radius:5px}
.services{background-color:var(--bg-color);width:100%;color:var(--text-primary);box-sizing:border-box;flex-direction:column;justify-content:space-between;padding:5rem 10%;display:flex;position:relative}.services .card-area{flex-flow:wrap;justify-content:center;align-items:center;gap:2rem;display:flex}.services .card{text-align:center;width:350px;height:400px;color:var(--text-primary);cursor:pointer;background-color:#1a1a1a;border:1px solid #fcf6ed1a;border-radius:15px;flex-direction:column;justify-content:center;align-items:center;padding:2rem;transition:all .4s ease-in-out;display:flex}.services .card .icon-wrapper{color:var(--accent-color);margin-bottom:2rem;font-size:4rem;transition:color .3s}.services .card .icon-wrapper svg{width:80px!important;height:80px!important}.services .card:hover .icon-wrapper svg{color:var(--accent-color)}.services .card .card-title{margin-bottom:1.5rem;font-size:2.5rem;font-weight:500}.services .card .card-text{color:#fcf6edb3;font-size:1.4rem;line-height:1.6}.services .card.active{border-color:var(--accent-color);z-index:10;background-color:#222;transform:scale(1.1);box-shadow:0 10px 30px #00000080}.services .card.blurred{filter:blur(5px);opacity:.5;transform:scale(.9)}@media (max-width:768px){.services .card-area{flex-direction:column}.services .card{width:100%;height:auto}}
.skills-section{background-color:var(--bg-color);width:100%;color:var(--text-primary);box-sizing:border-box;padding:5rem 10%}.skills-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));justify-content:center;gap:2rem;display:grid}.skill-card{background-color:#1a1a1a;border:1px solid #fcf6ed1a;border-radius:15px;flex-direction:column;padding:2rem;transition:transform .3s,border-color .3s;display:flex}.skill-card:hover{border-color:var(--accent-color);transform:translateY(-5px);box-shadow:0 10px 20px #0003}.skill-header{border-bottom:1px solid #ffffff1a;align-items:center;gap:1.5rem;margin-bottom:2rem;padding-bottom:1rem;display:flex}.skill-icon{color:var(--accent-color);align-items:center;font-size:2.5rem;display:flex}.skill-header h3{margin:0;font-size:2rem;font-weight:500}.skill-item{margin-bottom:1.5rem}.skill-item:last-child{margin-bottom:0}.skill-info{color:#fcf6edcc;justify-content:space-between;margin-bottom:.5rem;font-size:1.4rem;font-weight:400;display:flex}.progress-bar-bg{background-color:#ffffff1a;border-radius:10px;width:100%;height:8px;overflow:hidden}.progress-bar-fill{background-color:var(--accent-color);border-radius:10px;height:100%;animation:1.5s ease-out forwards fillBar}@keyframes fillBar{0%{width:0}}@media (max-width:768px){.skills-section{padding:5rem 2rem}.skills-grid{grid-template-columns:1fr}}.show-more-btn{color:var(--accent-color);cursor:pointer;opacity:.8;background:0 0;border:none;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:1.5rem;padding:.5rem 0;font-size:1.2rem;font-weight:600;transition:all .3s;display:flex}.show-more-btn:hover{opacity:1;background-color:#46aeab1a;border-radius:5px}.skill-card{min-height:300px}
.resume-section{background-color:var(--bg-color);width:100%;color:var(--text-primary);box-sizing:border-box;padding:5rem 10%}.timeline-container{max-width:1000px;margin:0 auto;padding:2rem 0;position:relative}.timeline-container:after{content:"";background-color:#fcf6ed1a;border-radius:2px;width:4px;margin-left:-2px;position:absolute;top:0;bottom:0;left:50%}.timeline-item{background-color:inherit;box-sizing:border-box;width:50%;padding:10px 40px;position:relative}.timeline-item.left{text-align:right;left:0}.timeline-item.right{text-align:left;left:50%}.timeline-icon{border:3px solid var(--accent-color);z-index:10;width:50px;height:50px;color:var(--accent-color);background-color:#1a1a1a;border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;display:flex;position:absolute;top:15px;right:-25px;box-shadow:0 0 10px #00000080}.timeline-item.right .timeline-icon{left:-25px;right:auto}.timeline-content{background-color:#1a1a1a;border:1px solid #fcf6ed1a;border-radius:10px;padding:2rem;transition:transform .3s;position:relative}.timeline-content:hover{border-color:var(--accent-color);transform:translateY(-5px)}.timeline-date{color:var(--accent-color);margin-bottom:.5rem;font-size:1.4rem;font-weight:600;display:block}.timeline-title{margin:.5rem 0;font-size:2rem}.timeline-place{color:#fcf6ed99;margin-bottom:1.5rem;font-size:1.6rem;font-style:italic;font-weight:400}.timeline-desc{opacity:.9;font-size:1.4rem;line-height:1.6}.timeline-badge{background-color:var(--accent-color);color:#131313;opacity:0;border-radius:5px;padding:2px 10px;font-size:1rem;font-weight:700;transition:opacity .3s;position:absolute;top:-10px;right:20px}.timeline-item.left .timeline-badge{left:20px;right:auto}.timeline-content:hover .timeline-badge{opacity:1}.timeline-content:before{content:" ";border:10px solid #0000;border-left-color:#1a1a1a;border-right-width:0;position:absolute;top:25px;right:-10px}.timeline-item.right .timeline-content:before{border-width:10px 10px 10px 0;border-color:#0000 #1a1a1a #0000 #0000;left:-10px;right:auto}@media (max-width:768px){.timeline-container:after{left:30px}.timeline-item{width:100%;padding-left:70px;padding-right:20px}.timeline-item.left,.timeline-item.right{text-align:left;left:0}.timeline-item.left .timeline-icon,.timeline-item.right .timeline-icon{left:5px;right:auto}.timeline-item.left .timeline-content:before,.timeline-item.right .timeline-content:before{border-width:10px 10px 10px 0;border-color:#0000 #1a1a1a #0000 #0000;left:-10px;right:auto}.timeline-item.left .timeline-badge{left:auto;right:20px}}.timeline-icon.education{color:#ff9f43;border-color:#ff9f43}.timeline-icon.work{color:var(--accent-color);border-color:var(--accent-color)}.timeline-icon.project{color:#54a0ff;border-color:#54a0ff}.timeline-icon.certificate{color:#feca57;border-color:#feca57}.timeline-container{transition:all .5s;position:relative}.fade-overlay{background:linear-gradient(to bottom,transparent 0%,var(--bg-color)80%);z-index:20;cursor:pointer;justify-content:center;align-items:flex-end;width:100%;height:300px;padding-bottom:20px;transition:opacity .3s;display:flex;position:absolute;bottom:0;left:0}.fade-overlay:hover .resume-toggle-btn{background-color:var(--accent-color);color:#131313}.resume-toggle-btn{border:1px solid var(--accent-color);color:var(--accent-color);cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#131313cc;border-radius:30px;align-items:center;gap:10px;padding:10px 25px;font-size:1.2rem;font-weight:600;transition:all .3s;display:flex}.resume-toggle-btn:hover{background-color:var(--accent-color);color:#131313;transform:translateY(-2px);box-shadow:0 5px 15px #46aeab4d}.timeline-container.collapsed{padding-bottom:0;overflow:hidden}