*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{background-color:#1c1b1b}#about{width:100%;height:100%;display:flex;overflow:hidden}.leftabout{width:50%;height:100vh;display:flex;justify-content:center;align-items:center;gap:40px}.circle-line{display:flex;justify-content:center;align-items:center;flex-direction:column}.circle{width:60px;height:60px;border-radius:50px;background-color:#0cf993;box-shadow:4px 5px 40px #2eefcf}.line{width:2px;height:130px;background-color:#02e224fa}.aboutdetail{display:flex;gap:55px;flex-direction:column}.aboutdetail ul{list-style:none}.aboutdetail h1{background:linear-gradient(to right,#04e4f4,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:30px}.aboutdetail li{color:#c1e8e0;font-size:15px;line-height:20px}.aboutdetail span{color:#3ef3a5;font-size:14px}.rightabout{width:50%;height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:18px}@media (max-width: 750px){#about{flex-direction:column}.leftabout{width:100%;padding:10%}.rightabout{width:100%}}@media (max-width: 600px){.aboutdetail h1{font-size:20px}.aboutdetail li{font-size:12px;line-height:18px}.aboutdetail span{font-size:10px}}.card{width:100%;max-width:380px;height:220px;background-color:#1b1b1cf7;border-radius:10px;box-shadow:2px 2px 10px #000,2px 20px 20px #000;position:relative;overflow:hidden;transition:all .3s ease;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;text-align:center}.card:hover{box-shadow:5px 5px 10px #77f9f9,2px 2px 20px #fb0707}.about-card .hovercard{width:100%;height:100%;background:linear-gradient(to top right,#76def3,#f58f8f);position:absolute;bottom:0;transform:translateY(100%);transition:all .75s ease;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.about-card .hovercard img{height:80%;filter:drop-shadow(2px 2px 10px black)}.about-card:hover .hovercard{transform:translateY(0)}.card h1{background:linear-gradient(to right,#9cf5fc,#fff);background-clip:text;-webkit-background-clip:text;color:transparent;font-size:1.6rem}.project-card{perspective:1000px}.project-card .card-inner{position:relative;width:100%;height:100%;transition:transform .8s ease;transform-style:preserve-3d}.project-card:hover .card-inner{transform:rotateY(180deg)}.project-card .card-front,.project-card .card-back{position:absolute;width:100%;height:100%;border-radius:10px;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box;padding:15px}.project-card .card-front{background-color:#1b1b1cf7}.project-card .card-back{background:linear-gradient(to top right,#3bceebb0,#f25e5e);transform:rotateY(180deg);color:#111;justify-content:space-between}.card-desc{font-size:1.2rem;text-align:center;margin-top:15px;flex-grow:1}.card-buttons{display:flex;justify-content:space-evenly;width:100%;margin-bottom:10px}.btn{text-decoration:none;padding:8px 14px;border-radius:6px;font-weight:600;transition:all .3s ease}.live-btn{background-color:#6ef142;color:#000}.github-btn{background-color:#000;color:#fff}.live-btn:hover{background-color:#1ffaef;color:#000;box-shadow:4px 4px 8px #04e4f4}.github-btn:hover{background-color:#1e1e1e;box-shadow:3px 3px 8px #fff}@media (max-width: 1024px){.card{height:200px;max-width:320px}.card h1{font-size:1.4rem}}@media (max-width: 768px){.card{height:180px;max-width:280px}.card h1{font-size:1.2rem}.card-desc{font-size:.9rem}.btn{padding:6px 10px;font-size:.8rem}}@media (hover: none){.project-card .card-inner{transform:none}.project-card:active .card-inner{transform:rotateY(180deg)}}#home{width:100%;height:100%;display:flex;overflow:hidden}.lefthome{width:50%;height:100vh;display:flex;justify-content:center;align-items:center;color:#f0f8ff}.righthome{width:50%;height:100vh;display:flex;justify-content:center;align-items:center}.righthome img{width:71%;padding-top:15px;filter:drop-shadow(2px 2px 20px red)}.homedetails{font-size:2vmax;margin-left:10px}.line1{font-size:.8em}.line2{font-size:2.5em;background:linear-gradient(to right,#fb0606,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}.line3{font-size:1em}.homedetails button{padding:10px 30px;background-color:#de3315;color:#000;border:2px solid rgb(222,51,21);margin-top:30px;border-radius:20px;font-size:19px;transition:all .4s ease;cursor:pointer}.homedetails button:hover{background-color:transparent;color:#de3315}.button-container{margin-top:20px}.social-links{display:flex;gap:20px;margin-top:30px;align-items:center}.social-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;text-decoration:none;border-radius:20px;font-size:16px;font-weight:500;transition:all .4s ease;cursor:pointer;border:2px solid transparent}.linkedin-btn{background:linear-gradient(45deg,#0077b5,#00a0dc);color:#fff;border-color:#0077b5}.linkedin-btn:hover{background:transparent;color:#0077b5;border-color:#0077b5;box-shadow:0 0 15px #0077b54d}.github-btn{background:linear-gradient(45deg,#333,#555);color:#fff;border-color:#333}.github-btn:hover{background:transparent;color:#333;border-color:#333;box-shadow:0 0 15px #3333334d}.social-btn svg{width:20px;height:20px;transition:transform .3s ease}.social-btn:hover svg{transform:scale(1.1)}@media (max-width: 768px){#home{flex-direction:column-reverse;height:auto}.lefthome{width:100%;height:50vh}.righthome{width:100%;height:50%;padding-top:25px;align-items:end}.social-links{flex-direction:column;gap:15px;margin-top:20px}.social-btn{font-size:14px;padding:10px 16px}.button-container{margin-top:20px;text-align:center}.social-btn svg{width:18px;height:18px}}nav{width:100%;height:80px;display:flex;justify-content:space-between;align-items:center;padding:20px;position:fixed;top:0;z-index:20;background-color:#1c1b1b}nav ul a{cursor:pointer}nav ul a:hover{color:#f92626;border-bottom:2px solid white}.active{color:#f92626;border-bottom:2px solid white}nav ul{display:flex;align-items:center;justify-content:center;gap:20px;color:#fff;list-style:none;font-size:20px}nav h1{font-size:30px;background:linear-gradient(to right,#fb0606,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}.hamburger{display:flex;justify-content:center;align-items:center;gap:8px;flex-direction:column;display:none;cursor:pointer}.ham{width:40px;height:2px;background-color:#fff;transition:all .6s}.mobilemenu{position:absolute;top:80px;width:100%;height:100vh;background-color:#0c0c0c74;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);right:0;transform:translate(100%);flex-direction:column;transition:all .6s;gap:50px}.activemobile{transform:translate(0)}.activeham .ham:nth-child(1){transform:rotate(45deg);position:relative;top:8px}.activeham .ham:nth-child(2){opacity:0}.activeham .ham:nth-child(3){transform:rotate(-45deg);position:relative;top:-12px}@media (max-width: 768px){.destopmenu{display:none}.hamburger{display:flex}}#projects{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:30px}.slider{width:90%;height:300px;display:flex;align-items:center;overflow-x:scroll;overflow-y:hidden;gap:30px;scrollbar-width:none}#projects h1{font-size:3vmax;background:linear-gradient(to right,#04e4f4,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}#contact{width:100%;height:100%;display:flex;overflow:hidden}.leftcontact{width:50%;height:100vh;display:flex;align-items:center;justify-content:center}.leftcontact img{width:51%;filter:drop-shadow(5px 5px 10px rgb(255,38,0))}.rightcontact{width:50%;height:100vh;display:flex;align-items:center;justify-content:center}form{width:80%;height:70%;background-color:#2a292970;box-shadow:8px 8px 20px #302d2c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;border-radius:20px}form:hover{box-shadow:8px 8px 20px #00fbff,2px 2px 10px #ff2600}form input{width:80%;height:50px;border:3px solid rgb(8,255,234);border-radius:20px;padding:20px;outline:none}#textarea{width:80%;height:120px;border:3px solid rgb(8,255,234);border-radius:20px;padding:20px;outline:none}#btn{width:100px;height:50px;border:3px solid rgb(8,255,234);background-color:#35f3f0;display:flex;align-items:center;justify-content:center;padding:0;font-size:20px;cursor:pointer;transition:all .5s ease}#btn:hover{background-color:transparent;color:#08ffea}@media (max-width: 768px){#contact{flex-direction:column;height:100%}.leftcontact{width:100%;height:50vh}.leftcontact img{width:70%}.rightcontact{width:100%}.contact-social-links{margin-top:30px}.contact-social-buttons{flex-direction:column;gap:15px}.contact-social-btn{font-size:14px;padding:10px 16px}}.contact-social-links{margin-top:40px;text-align:center}.contact-social-links h3{color:#08ffea;font-size:24px;margin-bottom:20px;background:linear-gradient(to right,#08ffea,#fff);background-clip:text;-webkit-background-clip:text;color:transparent}.contact-social-buttons{display:flex;gap:20px;justify-content:center;align-items:center}.contact-social-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;text-decoration:none;border-radius:20px;font-size:16px;font-weight:500;transition:all .4s ease;cursor:pointer;border:2px solid transparent}.contact-social-btn.linkedin{background:linear-gradient(45deg,#0077b5,#00a0dc);color:#fff;border-color:#0077b5}.contact-social-btn.linkedin:hover{background:transparent;color:#0077b5;border-color:#0077b5;box-shadow:0 0 15px #0077b54d}.contact-social-btn.github{background:linear-gradient(45deg,#333,#555);color:#fff;border-color:#333}.contact-social-btn.github:hover{background:transparent;color:#555;border-color:#555;box-shadow:0 0 15px #5555554d}.contact-social-btn svg{width:20px;height:20px;transition:transform .3s ease}.contact-social-btn:hover svg{transform:scale(1.1)}
