*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;scroll-behavior:smooth;font-family:Poppins}:root{--bg-color:#05062f;--second-bg-color:#05062f;--text-color: rgb(255, 255, 255);--main-color: #dba04e;--test-color: #ffffff}html{font-size:50%;overflow-x:hidden}body{background:var(--bg-color);color:var(--text-color)}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background-color:var(--main-color)}::-webkit-scrollbar-track{background-color:var(--bg-color)}.header{position:fixed;width:100%;top:0;left:0;padding:1rem 10%;background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center;z-index:1000}#menu-icon{font-size:3.5rem;color:var(--main-color);display:none;cursor:pointer}.navbar{display:flex;width:100%;justify-content:space-between;align-items:center}.nav-links{display:flex;gap:2rem}.navbar a{font-size:1.8rem;color:var(--test-color);font-weight:500;transition:.3s ease-in-out;border-bottom:3px solid transparent}.navbar a:hover,.navbar a.active{color:var(--main-color);border-bottom:3px solid var(--main-color)}.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem}.navbar .btn{display:inline-block;padding:.7rem 1.5rem;background-color:transparent;box-shadow:none;border-radius:3rem;font-size:1.8rem;color:var(--main-color);border:2px solid var(--main-color);font-weight:600;transition:.3s ease-in-out;text-wrap:nowrap}.navbar .btn:hover{color:var(--test-color);background-color:var(--main-color);transform:scale(1.2) translateY(-5px);box-shadow:0 0 25px var(--main-color)}@media (max-width: 1400px){.header{padding:1rem 5%}.navbar a{font-size:1.6rem}.navbar .btn{font-size:1.6rem;padding:.6rem 1.3rem}}@media (max-width: 1200px){.nav-links{gap:1.5rem}.nav-right{gap:1rem}}@media (max-width: 991px){.header{padding:1.5rem 5%}#menu-icon{display:block;z-index:1002}.navbar{flex-direction:column;position:absolute;top:3rem;left:0;width:100%;background-color:#000000e6;text-align:left;padding:.5rem 0;border-radius:0;box-shadow:0 2px 10px #00000080;display:none;opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out;z-index:1001}.navbar.active{display:flex;flex-direction:column;opacity:1;visibility:visible}.nav-links,.nav-right{flex-direction:column;gap:1.5rem}.nav-links a{font-size:1.8rem;white-space:nowrap;overflow:hidden}}@media screen and (min-width: 769px) and (max-width: 1024px){.header{padding:.7rem 5%}.navbar{width:100%;justify-content:space-between}.nav-links{gap:1.5rem}.navbar a{font-size:1.6rem}.nav-right{gap:1rem}.btn{padding:.8rem 2.5rem;font-size:1.6rem}}@media screen and (min-width: 1024px) and (max-width: 1366px){.header{padding:.7rem 7%}.navbar{width:100%;justify-content:space-between}.nav-links{gap:1.8rem}.navbar a{font-size:1.7rem}.nav-right{gap:1.2rem}}.hero{display:flex;justify-content:center;align-items:center;gap:3rem;background:var(--second-bg-color);padding:5rem 2rem;flex-wrap:wrap}.hero-img{flex:0 0 auto}.hero-img img{width:20vw;max-width:300px;min-width:180px;border-radius:50%;box-shadow:0 0 25px var(--main-color);transition:.4s ease-in-out;display:block}.hero-img img:hover{box-shadow:0 0 25px var(--main-color),0 0 50px var(--main-color),0 0 100px var(--main-color);transform:scale(1.05)}.hero-content{flex:1 1 auto;text-align:center;max-width:650px}.hero-content h2{font-size:clamp(2.5rem,5vw,4rem);text-align:center;margin:2rem 0;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.3);line-height:1.2}.hero-content h2 span{background:linear-gradient(270deg,#3ce5f8 10%,#04f7db);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 200%}.text-animation{font-size:34px;font-weight:600;min-width:280}.text-animation span{position:relative;top:rem}.text-animation span:before{content:"Sababa T";color:var(--main-color);display:inline-block;animation:words 20s infinite}.text-animation span:after{content:"";background-color:var(--bg-color);position:absolute;width:calc(100% + 8px);height:100%;border-left:3px solid var(--bg-color);right:-8px;animation:cursor .6s infinite,typing 20s steps(14) infinite}@keyframes cursor{to{border-left:2px solid var(--main-color)}}@keyframes typing{10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{width:0}5%,20%,25%,40%,45%,60%,65%,80%,85%{width:calc(100% + 8px)}}.hero-content h3{font-size:clamp(1.8rem,4vw,3rem);text-align:center;margin:1.5rem 0;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.3);line-height:1.3}.hero-content p{font-size:clamp(1.2rem,2.5vw,2rem);text-align:center;line-height:1.6;max-width:90%;margin:0 auto;color:#c8c8c8b3;text-shadow:0 0 5px rgba(255,255,255,.2)}.hero-content .btn{margin:2.5rem auto;display:inline-block;font-size:clamp(1rem,1.5vw,1.2rem);padding:clamp(.8rem,2vw,1rem) clamp(1.5rem,3vw,2rem)}.social-icons{display:flex;justify-content:center;align-items:center;gap:1rem}.social-icons a{display:inline-flex;justify-content:center;align-items:center;font-size:2rem;padding:.7rem;background:transparent;border:2px solid var(--main-color);border-radius:50%;color:var(--main-color);margin:3rem .5rem;transition:.3s ease-in-out;position:relative}.social-icons a:after{content:attr(data-title);position:absolute;bottom:-35px;left:50%;transform:translate(-50%);background:var(--main-color);color:#000;padding:5px 10px;font-size:1.2rem;border-radius:5px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,transform .3s ease-in-out}.social-icons a:hover:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(-5px)}.social-icons a:hover{color:var(--test-color);background-color:var(--main-color);transform:scale(1.2) translateY(-5px);box-shadow:0 0 25px var(--main-color)}@media (max-width: 920px){.hero{flex-direction:column;text-align:center;gap:2rem;padding:4rem 1.5rem}.hero-img img{width:35vw;margin:0 auto}.hero-content{width:100%}}@media (max-width: 580px){.hero{padding:3rem 1rem;gap:1.5rem}.hero-img img{width:50vw;min-width:150px}.hero-content h2{margin:1.5rem 0}.hero-content h3{margin:1rem 0}.hero-content p{max-width:100%}.hero-content .btn{margin:2rem auto;width:80%;max-width:300px}}section{min-height:100vh;padding:10rem 15%}.home{display:flex;align-items:center;justify-content:center;gap:15rem}.home-content{display:flex;flex-direction:column;align-items:flex-end;text-align:right}.home-content h1{font-size:6rem;font-weight:700;margin-top:3rem;line-height:1.8;text-align:center;position:relative;top:2rem}.home-content h3{margin:1rem 0;font-size:3.5rem}.home-content p{font-size:1.5rem;font-weight:500;line-height:1.8}.home-img{width:100%;height:60vh;position:relative}.about{display:flex;flex-direction:column;align-items:center;justify-content:center;height:auto;min-height:100vh;padding:clamp(2rem,5vw,5rem) clamp(1rem,10vw,6rem);background:var(--second-bg-color);position:relative;margin-top:3rem}.about-heading{font-size:clamp(2.5rem,5vw,4rem);color:#fff;text-shadow:0 0 10px rgba(255,255,255,.3);margin-bottom:clamp(1rem,2vw,2rem);text-align:center;line-height:1.2}.btn{display:inline-block;padding:1rem 3rem;background:transparent;box-shadow:0 0 25px var(--main-color);border-radius:3rem;font-size:1.8rem;color:var(--main-color);border:2px solid var(--main-color);font-weight:600;transition:.3s ease-in-out;text-wrap:nowrap}.btn:hover{color:var(--test-color);background-color:var(--main-color);transform:scale(1.1) translateY(-5px);box-shadow:0 0 35px var(--main-color)}.about-content{display:flex;align-items:center;justify-content:center;width:100%;flex-wrap:wrap;gap:clamp(1rem,3vw,2rem);margin-top:clamp(1rem,3vw,2rem)}.about-box{width:100%;max-width:700px;padding:clamp(1.2rem,4vw,2rem);border-radius:clamp(10px,2vw,20px);background-color:var(--bg-color);border:2px solid var(--main-color);box-shadow:0 0 15px #ffffff1a;transition:box-shadow .3s ease-in-out,transform .2s ease-in-out;text-align:center;margin-top:clamp(10px,2vw,20px)}.about-box:hover{box-shadow:0 0 25px var(--main-color),0 0 50px var(--main-color);transform:scale(1.02)}.about-box p{font-size:clamp(1rem,3vw,1.8rem);line-height:1.6;color:#fff;text-shadow:0 0 5px rgba(255,255,255,.2)}.sphere-container{width:100%;height:clamp(180px,45vw,350px);position:relative;margin-top:clamp(10px,2vw,20px);border-radius:10px;overflow:visible;z-index:1}.three-scene-container{display:none}@media (max-width: 1280px){.about{padding:4rem clamp(1rem,8vw,5rem)}}@media (max-width: 1024px){.about{padding:3rem clamp(1rem,6vw,4rem)}.about-content{flex-direction:column;align-items:center}.about-box{width:clamp(300px,80%,600px);max-width:none}}@media (max-width: 768px){.about{padding:2.5rem 1.5rem;margin-top:2rem}.about-box{width:clamp(280px,90%,500px)}@media (hover: none){.about-box{box-shadow:0 0 15px #00ffee4d}}}@media (max-width: 480px){.about{padding:2rem 1rem;margin-top:1.5rem;min-height:auto}.about-box{width:100%;border-radius:12px}}@media (prefers-color-scheme: dark){.about-box{box-shadow:0 0 15px #00ffee26}}.canvas{width:100vw;height:100vh}.canvas,.scene-container{transition:all .3s ease}.projects{background-color:var(--second-bg-color);margin-bottom:5rem;padding:4rem 2rem}.projects-box{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;justify-items:center;row-gap:4rem;margin-top:2rem;max-width:1200px;margin-left:auto;margin-right:auto}.project-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:var(--bg-color);border:2px solid var(--main-color);border-radius:1.5rem;padding:2rem;overflow:hidden;cursor:pointer;box-shadow:0 0 5px var(--main-color);transition:all .3s ease;width:100%;height:100%;min-height:350px;perspective:1000px}.project-card:hover{box-shadow:0 0 15px var(--main-color);transform:translateY(-5px)}.project-card .card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s ease}.project-card:hover .card-inner{transform:rotateY(180deg)}.project-card .card-front,.project-card .card-back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.project-card .card-back{background-color:var(--bg-color);color:#fff;transform:rotateY(180deg);padding:2rem;overflow-y:auto}.project-card img{width:100%;height:180px;object-fit:cover;border-radius:1rem;box-shadow:0 0 8px #00ffee80}.project-card h3{margin-top:1.5rem;margin-bottom:1rem;font-size:clamp(1.5rem,3vw,2.5rem);color:#fff}.project-card .card-back p{font-size:clamp(1.4rem,2vw,1.6rem);color:#c8c8c8e6;font-weight:400;line-height:1.6;margin:0}.tech-stack{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0;justify-content:center}.tech-badge{background-color:#00ffee26;border:1px solid var(--main-color);border-radius:1rem;padding:.2rem .6rem;font-size:1.4rem;color:var(--main-color);transition:all .3s ease}.tech-badge:hover{background-color:var(--main-color);color:var(--bg-color)}@media (hover: none){.project-card:active .card-inner{transform:rotateY(180deg)}}@media (max-width: 1200px){.projects-box{grid-template-columns:repeat(3,1fr);gap:2rem}.project-card{padding:1.8rem;min-height:320px}}@media (max-width: 992px){.projects-box{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.projects{margin-top:4rem;padding:3rem 1rem}.projects-box{grid-template-columns:repeat(2,1fr);gap:1.5rem;row-gap:3rem}.project-card{padding:1.5rem;min-height:300px}.project-card img{height:150px}}@media (max-width: 580px){.projects-box{grid-template-columns:1fr}}@media (max-width: 480px){.projects{padding:2rem 1rem;margin-bottom:3rem;margin-top:4rem}.projects-box{grid-template-columns:1fr;gap:2rem}.project-card{max-width:320px;margin:0 auto;padding:1.2rem}.project-card .card-back{padding:1.5rem}}.pagination{display:flex;justify-content:center;gap:10px;margin-top:3rem;flex-wrap:wrap;padding:1rem 0}.pagination button{padding:.5rem 1rem;border:none;background-color:var(--bg-color);color:#fff;border:1px solid var(--main-color);cursor:pointer;font-size:1rem;border-radius:.5rem;transition:all .3s ease}.pagination button.active{background-color:var(--main-color);color:var(--bg-color);box-shadow:0 0 8px var(--main-color)}.pagination button:hover:not(:disabled){box-shadow:0 0 10px var(--main-color);transform:translateY(-2px)}.pagination button:disabled{cursor:not-allowed;opacity:.5}.services{background-color:var(--bg-color);color:#000;margin-bottom:5rem;padding:4rem 2rem}.services h2{color:var(--text-color);text-align:center}.services-container{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;justify-items:center;row-gap:4rem;margin-top:2rem;max-width:1200px;margin-left:auto;margin-right:auto}.service-box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:var(--bg-color);border:2px solid var(--main-color);border-radius:1.5rem;padding:2rem;overflow:hidden;cursor:pointer;box-shadow:0 0 5px var(--main-color);transition:all .3s ease;width:100%;height:100%;min-height:350px;perspective:1000px}.service-box:hover{box-shadow:0 0 15px var(--main-color);transform:translateY(-5px)}.service-box .flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s ease}.service-box:hover .flipper{transform:rotateY(180deg)}.front,.back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--main-color);box-shadow:0 0 5px var(--main-color);transition:.4s ease-in-out;padding:2rem}.front{background:var(--bg-color);color:#fff}.back{background:var(--bg-color);color:#fff;transform:rotateY(180deg);overflow-y:auto}.front i,.back i{font-size:3.5rem;margin-bottom:1rem;color:var(--main-color)}.front h4,.back h4{font-size:clamp(1.5rem,3vw,2.5rem);margin:1rem 0;color:#fff}.front p{font-size:clamp(1rem,2vw,1.4rem);font-weight:400;line-height:1.6;color:#c8c8c8e6}.back p{font-size:clamp(1.4rem,2vw,1.6rem);font-weight:400;line-height:1.6;color:#f0f0f0e6;margin:0}@media (hover: none){.service-box:active .flipper{transform:rotateY(180deg)}}@media (max-width: 1200px){.services-container{grid-template-columns:repeat(3,1fr);gap:2rem}.service-box{padding:1.8rem;min-height:320px}}@media (max-width: 992px){.services-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.services{margin-top:4rem;padding:3rem 1rem}.services-container{grid-template-columns:repeat(2,1fr);gap:1.5rem;row-gap:3rem}.service-box{padding:1.5rem;min-height:300px}}@media (max-width: 580px){.services-container{grid-template-columns:1fr}}@media (max-width: 480px){.services{padding:2rem 1rem;margin-bottom:3rem;margin-top:4rem}.services-container{grid-template-columns:1fr;gap:2rem}.service-box{max-width:320px;margin:0 auto;padding:1.2rem}.front,.back{padding:1.5rem}}.contact{margin:5rem 0 -20rem}.contact h2{margin-bottom:3rem;color:var(--test-color)}.contact form{display:grid;align-items:center;justify-content:center;gap:3rem;margin:5rem 0;text-align:center}.contact form .input-box input,.contact form textarea{width:100%;padding:2.5rem;color:var(--test-color);background-color:var(--bg-color);border-radius:2rem;border:2px solid var(--main-color);margin:1.5rem 0;resize:none}.contact-social-icons{display:flex;justify-content:center;align-items:center;margin-top:3rem}.contact-social-icons a{display:inline-flex;justify-content:center;align-items:center;font-size:2rem;padding:.7rem;background:transparent;border:2px solid var(--main-color);border-radius:50%;color:var(--main-color);margin:3rem .5rem;transition:.3s ease-in-out}.contact-social-icons a:hover{color:var(--test-color);background-color:var(--main-color);transform:scale(1.2) translateY(-5px);box-shadow:0 0 25px var(--main-color)}.heading{text-align:center;font-size:clamp(2.5rem,5vw,4rem)}.education{background-color:var(--bg-color);color:#000;margin-bottom:5rem;padding:4rem 2rem}.education h2{color:var(--text-color);text-align:center}.education-container{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;justify-items:center;row-gap:4rem;margin-top:2rem;max-width:1200px;margin-left:auto;margin-right:auto}.education-box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:var(--bg-color);border:2px solid var(--main-color);border-radius:1.5rem;padding:2rem;overflow:hidden;cursor:pointer;box-shadow:0 0 5px var(--main-color);transition:all .3s ease;width:100%;height:100%;min-height:350px;perspective:1000px}.education-box:hover{box-shadow:0 0 15px var(--main-color);transform:translateY(-5px)}.education-box .flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s ease}.education-box:hover .flipper{transform:rotateY(180deg)}.education-box .front,.education-box .back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--main-color);box-shadow:0 0 5px var(--main-color);transition:.4s ease-in-out;padding:2rem}.education-box .front{background:var(--bg-color);color:#fff}.education-box .back{background:var(--bg-color);color:#fff;transform:rotateY(180deg);overflow-y:auto}.education-box .front i,.education-box .back i{font-size:3.5rem;margin-bottom:1rem;color:var(--main-color)}.education-box .front h4,.education-box .back h4{font-size:clamp(2.5rem,3vw,2.5rem);margin:1rem 0;color:#fff}.education-box .front p{font-size:clamp(1rem,2vw,1.4rem);font-weight:400;line-height:1.6;color:#c8c8c8e6}.education-box .back p{font-size:clamp(1.4rem,2vw,1.6rem);font-weight:400;line-height:1.6;color:#f0f0f0e6;margin:0}.cta-button{margin-top:1.5rem;padding:.8rem 1.5rem;background-color:var(--main-color);color:#110e17;border:none;border-radius:.5rem;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 5px #0003;z-index:2}.cta-button:hover{transform:translateY(-3px);box-shadow:0 4px 8px #0000004d;background-color:#fff;color:var(--main-color)}@media (hover: none){.education-box:active .flipper{transform:rotateY(180deg)}}@media (max-width: 1200px){.education-container{grid-template-columns:repeat(3,1fr);gap:2rem}.education-box{padding:1.8rem;min-height:320px}}@media (max-width: 992px){.education-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.education{margin-top:4rem;padding:3rem 1rem}.education-container{grid-template-columns:repeat(2,1fr);gap:1.5rem;row-gap:3rem}.education-box{padding:1.5rem;min-height:300px}.cta-button{padding:.6rem 1.2rem;font-size:.9rem}}@media (max-width: 580px){.education-container{grid-template-columns:1fr}}@media (max-width: 480px){.education{padding:2rem 1rem;margin-bottom:3rem;margin-top:4rem}.education-container{grid-template-columns:1fr;gap:2rem}.education-box{max-width:320px;margin:0 auto;padding:1.2rem}.education-box .front,.education-box .back{padding:1.5rem}.cta-button{padding:.5rem 1rem;font-size:.85rem}}.footer{background-color:var(--second-bg-color);padding:5px 0}.footer .copyright{text-align:center;font-size:1.8rem;margin-left:20px}.footer .social-icons{text-align:center}.footer ul{text-align:center;font-size:1.8rem}.footer ul li{display:inline-block;margin-left:20px}.footer ul li a{color:#fff;border-bottom:3px solid transparent;transition:.3s ease-in-out}.footer ul li a:hover{border-bottom:3px solid var(--main-color)}.footer .copyright{text-align:center;margin-top:40px;font-size:16px}@media (max-width:900px){#menu-icon{display:block}.navbar{position:absolute;top:100%;left:0;width:30%;padding:1rem 3rem;background:#000c;border-bottom-left-radius:2rem;border-left:2px solid var(--main-color);border-bottom:2px solid var(--main-color)}.navbar a{display:block;font-size:2rem;margin:3rem 0;color:var(--text-color)}.navbar .active{display:block}.gradient-btn{display:none}.home{flex-direction:column-reverse;margin:5rem 0;gap:5rem}.home-content{align-items:center;text-align:center}.home-img img{width:56vw}.about{flex-direction:column-reverse;text-align:center}.about h2{text-align:center;margin:2rem 0}.about img{width:52vw}.contact form{flex-direction:column}}