@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:#8f8f8f;font-family:Poppins,sans-serif;overflow-x:hidden}section{padding:60px 7%;position:relative;overflow:hidden}.section-title{color:#222;text-align:center;font-size:64px;font-weight:700}.section-line{background:#333;border-radius:20px;width:240px;height:5px;margin:18px auto 60px}.reveal{opacity:0;transition:all .8s;transform:translateY(40px)}.reveal.active{opacity:1;transform:translateY(0)}.navbar{z-index:1000;justify-content:center;width:100%;display:flex;position:fixed;top:20px}.nav-container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#202020bf;border-radius:50px;justify-content:space-between;align-items:center;width:92%;max-width:1250px;padding:22px 38px;display:flex}.logo{color:#fff;font-size:20px;font-weight:600}.nav-links{gap:40px;display:flex}.nav-links a{color:#fff;font-size:19px;text-decoration:none;transition:all .3s;position:relative}.nav-links a:hover{color:#bfbfbf;transform:scale(1.08)}.nav-links a.active:after{content:"";background:#fff;width:100%;height:2px;position:absolute;bottom:-8px;left:0}.nav-social{gap:18px;display:flex}.nav-social a{color:#fff;font-size:21px;transition:all .3s}.nav-social a:hover{transform:scale(1.2)}.menu-icon{color:#fff;cursor:pointer;font-size:28px;display:none}.hero-section{background:radial-gradient(at 50% 110%,#ffffff59 0%,#ffffff1a 30%,#00000073 60%,#000000f2 100%),linear-gradient(#000,#111,#000);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.hero-title{text-align:center;color:#ffffff42;white-space:nowrap;z-index:1;width:100%;font-size:7.5vw;font-weight:450;line-height:1;position:absolute;top:210px;left:50%;transform:translate(-50%)}.hero-img{z-index:2;width:36vw;min-width:280px;max-width:675px;display:block;position:absolute;bottom:0}.hero-buttons{z-index:3;gap:20px;display:flex;position:absolute;bottom:120px;left:120px}.primary-btn,.secondary-btn{color:#fff;border:1px solid #ffffff40;border-radius:10px;padding:15px 32px;font-size:26px;text-decoration:none;transition:all .3s}.primary-btn:hover,.secondary-btn:hover{color:#000;background:#6b6b6b}.about-section{background:#888;padding:80px 10%}.about-content{justify-content:center;align-items:center;gap:80px;margin-top:60px;display:flex}.about-image img{border-radius:14px;width:460px}.about-text{text-align:justify;color:#111;max-width:950px;font-size:24px;line-height:1.7}.tech-section{background:#888;padding:35px 0;position:relative;overflow:hidden}.tech-section:before,.tech-section:after{content:"";z-index:2;width:120px;height:100%;position:absolute;top:0}.tech-section:before{background:linear-gradient(90deg,#888,#0000);left:0}.tech-section:after{background:linear-gradient(270deg,#888,#0000);right:0}.tech-track{color:#222;grid-auto-columns:4.5rem;grid-auto-flow:column;gap:85px;width:max-content;font-size:42px;animation:20s linear infinite scroll;display:grid}.tech-track:hover{animation-play-state:paused}.tech-track i:hover{color:#4f4f4f;text-shadow:0 0 10px #cecece,0 0 20px #a6a6a6,0 0 30px #838383;transform:scale(1.3)}@keyframes scroll{to{transform:translate(-50%)}}.projects-section{background:#888;padding:80px 7%}.projects-grid{grid-template-columns:repeat(3,1fr);justify-content:center;gap:28px;margin-top:60px;display:grid}.project-card{background:#fff;border-radius:18px;flex-direction:column;width:420px;height:720px;transition:all .3s;display:flex;overflow:hidden}.project-card:hover{transform:translateY(-8px)}.project-image{min-height:250px;overflow:hidden}.project-image img{object-fit:cover;width:100%;height:100%;transition:all .4s}.project-card:hover img{transform:scale(1.05)}.project-content{flex-direction:column;flex:1;padding:24px;display:flex}.project-content h3{margin-bottom:14px;font-size:22px}.project-content p{color:#555;font-size:17px;line-height:1.7}.project-skill{flex-wrap:wrap;gap:8px;margin-top:auto;margin-bottom:22px;display:flex}.project-skill span{color:#fff;background:#000;border-radius:20px;padding:7px 14px;font-size:13px}.project-buttons{gap:14px;margin-top:18px;display:flex}.project-buttons a{color:#000;border:1px solid #000;border-radius:30px;padding:11px 24px;text-decoration:none;transition:all .3s}.project-buttons a:hover{color:#fff;background:#000}.services-section{background:#888;padding:70px 7%}.services-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.service-card{text-align:center;background:#fff;border-radius:16px;padding:45px 30px;transition:all .3s}.service-card:hover{transform:translateY(-8px)}.service-card i{color:#444;margin-bottom:30px;font-size:50px}.service-card h3{margin-bottom:16px;font-size:30px}.service-card p{color:#555;font-size:17px;line-height:1.8}.contact-section{background:#666;min-height:90vh;padding:100px 7% 0}.contact-content{grid-template-columns:1fr 430px;align-items:center;gap:50px;margin-top:20px;margin-bottom:40px;display:grid}.contact-info h3{color:#111;margin-bottom:20px;font-size:64px}.contact-description{color:#111;max-width:700px;font-size:24px;line-height:1.7}.contact-details{flex-direction:column;gap:20px;margin-top:20px;display:flex}.contact-details p{color:#111;align-items:center;gap:16px;font-size:24px;display:flex}.contact-form{flex-direction:column;gap:24px;display:flex}.input-box{position:relative}.input-box input,.input-box textarea{color:#fff;background:#111;border:1px solid #444;border-radius:14px;outline:none;width:100%;padding:18px;font-size:18px}.input-box textarea{resize:none;height:220px}.input-box label{color:#9c9c9c;pointer-events:none;padding:0 8px;font-size:16px;transition:all .3s;position:absolute;top:20px;left:16px}.input-box input:focus+label,.input-box input:not(:placeholder-shown)+label,.input-box textarea:focus+label,.input-box textarea:not(:placeholder-shown)+label{color:#fff;background:#666;border-radius:4px;font-size:13px;top:-11px;left:14px}.contact-btn{color:#fff;cursor:pointer;background:linear-gradient(90deg,#666,#2f2f2f);border:none;border-radius:12px;padding:18px;font-size:24px;font-weight:500;transition:all .3s}.contact-btn:hover{background:#000}.footer{background:#050505;justify-content:space-between;align-items:center;padding:28px 7%;display:flex}.footer-container{justify-content:space-between;align-items:center;width:100%;display:flex}.footer p{color:#fff;font-size:18px}.footer-social{gap:18px;display:flex}.footer-social a{color:#fff;font-size:25px;transition:all .3s}.footer-social a:hover{color:#aaa;transform:scale(1.2)}@media screen and (width<=768px){html,body{overflow-x:hidden}section{padding:110px 20px 70px}.navbar{top:14px}.nav-container{border-radius:28px;width:90%;padding:18px 22px}.logo{font-size:18px}.menu-icon{font-size:34px;display:block}.nav-social{display:none}.nav-links{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;visibility:hidden;background:#000000f2;border-radius:28px;flex-direction:column;gap:26px;width:72%;max-width:280px;padding:35px 28px;transition:all .3s;display:flex;position:fixed;top:105px;left:50%;transform:translate(-50%)}.nav-links.active{opacity:1;visibility:visible}.hero-title{white-space:normal;width:95%;font-size:15vw;line-height:1;top:180px}.hero-img{width:78vw;max-width:320px}.hero-buttons{justify-content:center;gap:12px;width:88%;bottom:70px;left:50%;transform:translate(-50%)}.primary-btn,.secondary-btn{text-align:center;width:50%;padding:14px 10px;font-size:15px}.section-title{font-size:52px;line-height:1.1}.section-line{width:140px;margin:12px auto 0}.about-content{flex-direction:column;gap:40px}.about-image img{width:260px}.about-text{text-align:justify;width:100%;font-size:15px;line-height:2}.projects-grid,.services-grid{grid-template-columns:1fr;justify-items:center}.project-card{width:100%;max-width:360px;height:auto}.contact-content{grid-template-columns:1fr;gap:30px}.contact-info{text-align:center}.contact-details p{justify-content:center;font-size:16px}.footer-container{text-align:center;flex-direction:column;gap:18px}}@media screen and (width<=480px){.hero-title{font-size:16vw;top:190px}.hero-img{width:82vw}.hero-buttons{width:90%}.primary-btn,.secondary-btn{font-size:14px}.section-title{font-size:44px}.about-image img{width:240px}.about-text{font-size:14px}.contact-info h3{font-size:44px}}