:root{--dark-blue: #22447a;--light-blue: #378bfa;--white: #ffffffb3;--color: #6984ae}html{scroll-behavior:smooth}*{font-family:League Spartan,sans-serif;margin:0;padding:0;box-sizing:border-box;outline:none;border:none;text-decoration:none;transition:all .3s cubic-bezier(.16,.8,.62,1.52);text-transform:none}.navbar{display:flex;justify-content:space-between;align-items:center;height:70px;padding:1.5rem 8rem;width:100%;background:transparent;transition:transform .3s ease-in-out,box-shadow .3s ease-in-out}.navbar.scrolled{box-shadow:0 4px 6px #0000001a;background:#fff;position:fixed;top:0;left:0;transform:translateY(0);z-index:999}.navbar .logo h1{font-size:1.5rem;color:var(--dark-blue);padding:.1rem .4rem;border:2px solid var(--dark-blue);text-transform:uppercase}.navbar .nav-list{display:flex;gap:2rem;z-index:1}.nav-list li,.navbar .mobile-responsive{list-style:none}.nav-list li a,.navbar .mobile-responsive li a{color:var(--dark-blue);font-size:18px}.nav-list li a:hover,.navbar .mobile-responsive li a:hover{color:var(--light-blue)}.navbar .download{display:flex;align-items:center;gap:.3rem}.menu-btn{color:var(--dark-blue);font-size:30px;z-index:1;display:none}.home{height:90vh;width:100%;display:flex;justify-content:center;align-items:center;padding:4rem 6%}.home .content{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;height:100%}.content .text{flex:1 1 45%;height:100%;min-width:400px;display:flex;flex-direction:column;justify-content:center;padding:0rem 0rem 0rem 2rem}.text span{font-size:18px;color:var(--light-blue);letter-spacing:2px}.text h1{font-size:2.8rem;font-weight:lighter}.text h1 span{font-size:3rem;font-weight:700}.text p{font-size:18px;width:90%;margin:1rem 0;line-height:24px}.text .buttons{display:flex;align-items:center;gap:1.5rem;margin-top:.5rem}.buttons .icons{font-size:1.5rem;cursor:pointer;color:#22447a;transition:all .3s ease-in-out}.buttons .icons:hover{color:var(--light-blue)}.content .image{flex:1 1 40%;height:100%;min-width:400px;display:flex;align-items:center;justify-content:center;overflow:hidden}.image img{width:90%;height:90%;object-fit:contain}.variety{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.5rem;width:100%;height:100%;padding:3rem 6%}.box{display:flex;gap:.6rem;padding:1.5rem 1rem;box-shadow:#00000026 1.95px 1.95px 2.6px;justify-content:center;flex:1;min-width:250px;transition:all .3s ease-in-out}.box:hover{box-shadow:#959da533 0 8px 24px}.box .icons{color:var(--dark-blue);font-size:3rem;transition:all .3s ease-in-out}.box div{display:flex;flex-direction:column;gap:.5rem}.box div span{color:var(--dark-blue);font-size:20px;font-weight:700;transition:all .3s ease-in-out}.box:hover div span,.box:hover .icons{color:var(--light-blue)}.box div p{width:80%;line-height:23px;color:#22447ad1}.container{width:100%;height:100%;padding:3rem 0%}.container .title{display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-size:22px;color:#22447a;letter-spacing:1.5px;padding:50px 0}.title h1:after{content:"";height:6px;width:80%;background:var(--light-blue);border-radius:6px;position:relative;display:block;margin:.5rem auto}.container .container-main{width:100%;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:40px;margin:30px auto}.container-image{height:500px;width:100%;overflow:hidden}.container-image img{width:100%;height:100%;object-fit:contain}.container-main .text{width:100%;height:100%;padding:1rem auto}.text p{font-size:17px;color:#777}.user-detail{width:100%;padding:0rem 8rem 0rem 0rem}.user-detail .info{display:flex;align-items:center;justify-content:space-between;margin-top:-.7rem}.user-detail .info p,.user-detail .info p a{color:#444}.user-detail .info:last-child{margin:.5rem 0rem 0rem}.timeline-wrapper{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:2rem 12%}.timeline-row{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.heading{font-size:2.3rem;margin:2rem 0;display:flex;align-items:center;gap:1rem;color:var(--dark-blue)}.heading .timeline-icon{font-size:2.5rem;color:var(--light-blue)}.content-box{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:2rem;margin:0 2rem;background-color:#ffffff26;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:3px solid var(--dark-blue);border-radius:1rem;font-size:14px;transition:.4s ease;cursor:pointer}.content-box:hover{box-shadow:0 0 25px var(--light-blue);border:3px solid var(--light-blue)}.timeline-box{display:flex;flex-direction:column;gap:2rem;border-left:5px solid var(--dark-blue);width:100%}.timeline-box h3{font-size:1.3rem;color:var(--dark-blue)}.date{font-size:1rem;color:var(--light-blue);font-weight:700;display:flex;align-items:center;gap:.5rem}.content-box:before{position:absolute;content:"";width:25px;height:25px;background:var(--dark-blue);border-radius:50%;left:-50px;top:90px}.content-box p{font-size:16px;color:#666}.skill-container{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.row{padding:0rem 10%;width:100%;display:flex;justify-content:space-between;margin-top:70px}.row .col{flex-basis:46%}.row .sub-title h2{position:relative;color:var(--dark-blue);font-size:22px;font-family:helvetica;display:inline-block;margin-bottom:30px;margin-left:5rem}.row .sub-title h2:before{content:"";position:absolute;width:50%;height:1px;top:125%;left:0;background-color:gray}.row .sub-title h2:after{content:"";position:absolute;width:25%;height:3px;top:calc(125% - 1px);left:0;background-color:#0072b1}.subject{font-size:18px;font-weight:thin;color:gray;padding-bottom:15px;text-transform:uppercase}.progress-bar{position:relative;width:100%;height:5px;background-color:gray;border-radius:15px;margin-bottom:20px}.progress-bar:after{position:absolute;content:attr(value);top:-35px;right:0;color:gray;font-size:18px}.progress-line{position:absolute;width:0%;height:7px;background-color:#0072b1;border-radius:15px;top:-1px;animation:animate 1.5s cubic-bezier(1,.2,.2,1) forwards}@keyframes animate{to{width:100%}}.progress-line:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;top:50%;left:100%;transform:translate(-50%,-50%);background-color:#0072b1}.portfolio-container{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem;padding:0rem 4%;height:100%}.portfolio-container .portfolio-box{width:280px;height:430px;overflow:hidden;background:#eeedeb;margin-top:1rem;padding:1rem;display:flex;flex-direction:column;gap:1rem;border-radius:20px}.portfolio-box .portfolio-image{border-radius:10px;width:100%;height:50%;object-fit:contain}.portfolio-box .project-details{display:flex;flex-direction:column;gap:.5rem}.project-details h5{font-size:1.2rem}.project-details p{font-size:1rem;color:gray}.project-details .technologies{display:flex;gap:.5rem;align-items:center;background:#fff;width:max-content;padding:.3rem .8rem;border-radius:15px;margin-top:.2rem}.technologies img{width:25px;height:25px}.project-details a{display:flex;align-items:center;gap:10px;margin-top:.5rem;color:#666;transition:all .3s ease}.project-details a:hover{color:#0072b1}.contact{display:flex;flex-direction:column;gap:2rem;padding:3rem 0rem}.contact .top{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.top img{width:200px;height:200px;border-radius:50%;border:10px solid #0072b1}.top .contact-description{width:50%;text-align:center;font-size:16px;line-height:22px;color:#555}.top .contact-links{display:flex;gap:1rem}.contact-links .link a{text-decoration:none;color:#22447a;font-size:24px;transition:all .3s ease-in-out}.contact-links .link a:hover{color:#0072b1}.bottom{display:flex;justify-content:space-around;align-items:center;padding:2rem 8%;flex-wrap:wrap;gap:2rem}.bottom .contact-box{width:300px;height:200px;display:flex;align-items:center;flex-direction:column;gap:.5rem;box-shadow:#63636333 0 2px 8px}.contact-box span{margin-top:2rem;width:4rem;height:4rem;border-radius:50%;background:#0072b1;font-size:2rem;display:flex;justify-content:center;align-items:center;color:#fafafa}.contact-box h4{font-size:16px;font-weight:600}.contact-box p{font-size:16px;color:#555}.footer{background:#22447a;padding:1.5rem 1rem;display:flex;justify-content:center;align-items:center;color:#fafafa;font-size:16px}@media (max-width: 1200px){.navbar{padding:0rem 2rem}}@media (max-width: 1080px){.navbar{padding:0rem 1rem}.navbar .nav-list{gap:1rem}.box div p{width:100%}.container .container-main{padding:0rem 2rem}}@media (max-width: 944px){.home{position:relative;height:100%}}@media (max-width: 900px){.navbar{padding:0rem 2rem}.navbar .nav-list,.btn{display:none}.navbar .menu-btn{display:inline-block}.navbar .mobile-responsive{display:flex;align-items:center;flex-direction:column;gap:2rem;font-weight:700;background:#ffffffda;height:100vh;padding:3rem 2rem;width:100%;position:absolute;top:4.2rem;left:0;z-index:9999}.home .content{gap:4rem}.content .text,.content .image{flex:1 1 100%;min-width:100px}.text h1{font-size:2rem;font-weight:lighter}.text h1 span{font-size:2.2rem;font-weight:700}.text p{width:100%}.text .buttons{gap:1rem;flex-wrap:wrap}.container{height:100%;padding:1rem 0rem}.container .container-main{grid-template-columns:repeat(1,1fr)}}@media (max-width: 768px){.skills-container{padding:30px 8%}.skills-container .row{flex-direction:column}.top .contact-description{width:80%}}@media (max-width: 568px){.skills-container .main-title h1{font-size:36px}.skills-container .row{margin-top:30px}.row .col:nth-child(2){margin-top:20px}}@media (max-width: 530px){.content-box:before{left:-50px}.container .container-main{padding:0rem 1rem}.container-image{height:100%}.user-detail{padding:0rem 1rem 0rem 0rem}.timeline-wrapper{padding:2rem 1rem}.row .sub-title h2{position:relative;color:var(--dark-blue);font-size:18px;margin-left:0rem}.subject{font-size:14px;color:gray}.skills-container{padding:30px 2%}.home{padding:0rem 3%}.content .text{padding:0rem}}@media (max-width: 400px){.navbar{padding:0rem 1rem}.navbar .logo h1{font-size:1.2rem;padding:.1rem .4rem}.menu-btn{font-size:25px}.home .content{gap:5rem;padding:4rem .4rem}.variety{padding:3rem 1rem}.timeline-box{margin-left:1rem}}@media (max-width: 350px){.text h1{font-size:1.8rem}.text h1 span{font-size:2rem}.text p{font-size:14px}.top .contact-description{width:90%}}