@tailwind base;@tailwind components;@tailwind utilities;:root{scroll-behavior:smooth}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#f0f0f0}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#07c8f9,#0d41e1)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#059ac0,#092e9d)}html{-webkit-transition:0.5s;transition:0.5s}html.dark nav{-webkit-box-shadow:1px 1px 30px -10px white;box-shadow:1px 1px 30px -10px white}html.dark .photo{position:relative}html.dark .photo:before{content:"";position:absolute;width:100%;height:200px;background:-webkit-gradient(linear,left bottom,left top,from(black),color-stop(rgba(0,0,0,0.8)),color-stop(rgba(0,0,0,0.6)),color-stop(rgba(0,0,0,0.4)),color-stop(rgba(0,0,0,0.2)),to(rgba(0,0,0,0)))!important;background:linear-gradient(to top,black,rgba(0,0,0,0.8),rgba(0,0,0,0.6),rgba(0,0,0,0.4),rgba(0,0,0,0.2),rgba(0,0,0,0))!important;bottom:-1px;z-index:9}html.dark .skill:after{color:black!important}html.dark .send-whats-message:hover{-webkit-box-shadow:0px 0px 20px black inset,0 0 15px -10px black!important;box-shadow:0px 0px 20px black inset,0 0 15px -10px black!important}html.dark .toggle-theme{-webkit-box-shadow:0 0 14px -4px white!important;box-shadow:0 0 14px -4px white!important}body{font-family:"Cairo",sans-serif}body nav ul li{-webkit-transition:0.5s;transition:0.5s}body nav ul li a{-webkit-transition:0.5s;transition:0.5s}body .hero .background{width:400px;height:400px;background:linear-gradient(135deg,#07c8f9,#0d41e1);border-radius:40% 60% 70% 30%/50% 40% 60% 40%;-webkit-animation:section-animation 10s linear 0s infinite;animation:section-animation 10s linear 0s infinite;-webkit-transform-origin:center;transform-origin:center}body .about .photo{position:relative}body .about .photo:before{content:"";position:absolute;width:100%;height:200px;background:-webkit-gradient(linear,left bottom,left top,from(white),color-stop(rgba(255,255,255,0.8)),color-stop(rgba(255,255,255,0.6)),color-stop(rgba(255,255,255,0.4)),color-stop(rgba(255,255,255,0.2)),to(rgba(255,255,255,0)));background:linear-gradient(to top,white,rgba(255,255,255,0.8),rgba(255,255,255,0.6),rgba(255,255,255,0.4),rgba(255,255,255,0.2),rgba(255,255,255,0));bottom:-1px;z-index:9}body .name,body .section-header{background:linear-gradient(135deg,#07c8f9,#0d41e1);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 200%;-webkit-animation:name-animation 4s linear 0s infinite;animation:name-animation 4s linear 0s infinite;font-family:"Playfair Display",serif}body .all-projects,body .call-me,body .download-cv{-webkit-transition:0.5s;transition:0.5s}body .all-projects:hover,body .call-me:hover,body .download-cv:hover{-webkit-animation:vibration-animation 1s ease-in-out 0s infinite;animation:vibration-animation 1s ease-in-out 0s infinite}body .arrow-down:hover{-webkit-animation-play-state:paused;animation-play-state:paused}body .skill{position:relative}body .skill:before{content:"";position:absolute;right:-4px;top:14px;border-top:10px solid transparent;border-right:10px solid #07c8f9;border-bottom:10px solid transparent;border-left:10px solid transparent;visibility:hidden;-webkit-transform:scale(0) rotate(-26deg);transform:scale(0) rotate(-26deg);-webkit-transition:0.4s;transition:0.4s;-webkit-transition-delay:0.4s;transition-delay:0.4s}body .skill:after{position:absolute;text-align:center;font-size:12px;font-weight:bold;color:white;top:5px;right:-28px;width:35px;height:20px;background-color:#07c8f9;border-radius:3px;visibility:hidden;-webkit-transform:scale(0) rotate(63deg);transform:scale(0) rotate(63deg);-webkit-transition:0.4s;transition:0.4s}body .skill.bootstrap:after,body .skill.css:after,body .skill.html:after,body .skill.js:after,body .skill.sass:after,body .skill.tailwind:after{content:"90%"}body .skill.react:after{content:"85%"}body .skill.git:after{content:"80%"}body .skill:hover:after{visibility:visible;-webkit-transform:scale(1) rotate(63deg);transform:scale(1) rotate(63deg)}body .skill:hover:before{visibility:visible;-webkit-transform:scale(1) rotate(-26deg);transform:scale(1) rotate(-26deg)}body .project{-webkit-perspective:1300px;perspective:1300px;height:400px}body .project .project-face{-webkit-box-shadow:0px 0px 20px -8px #000;box-shadow:0px 0px 20px -8px #000;-webkit-transition:0.5s;transition:0.5s;position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}body .project .project-face.front{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);background-size:cover}body .project .project-face.front:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7)}body .project .project-face.back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);background:linear-gradient(135deg,#07c8f9,#0d41e1)}body .project.electronic-e-commerce .front{background-image:url("../images/project-5.webp")}body .project.digital-marketing-agency .front{background-image:url("../images/project-6.webp")}body .project.techNex .front{background-image:url("../images/project-4.webp")}body .project.sport-shop .front{background-image:url("../images/project-1.webp")}body .project.math-platform .front{background-image:url("../images/project-2.webp")}body .project.chemistry .front{background-image:url("../images/project-3.webp")}body .project:hover .front{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}body .project:hover .back{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}body .contact .social-links a{-webkit-transition:0.5s;transition:0.5s}body .contact .social-links a.facebook:hover{-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-box-shadow:0 0 15px #2e83f4,0 0 12px black inset;box-shadow:0 0 15px #2e83f4,0 0 12px black inset}body .contact .social-links a.linkedin:hover{-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-box-shadow:0 0 15px #0a66c2,0 0 12px black inset;box-shadow:0 0 15px #0a66c2,0 0 12px black inset}body .contact .social-links a.whatsapp:hover{-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-box-shadow:0 0 15px #25d366,0 0 12px black inset;box-shadow:0 0 15px #25d366,0 0 12px black inset}body .contact .social-links a.instagram:hover{-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-box-shadow:0 0 15px #fd1d1d,0 0 12px black inset;box-shadow:0 0 15px #fd1d1d,0 0 12px black inset}body .contact .send-whats-message:hover{-webkit-box-shadow:0px 0px 20px white inset,0 0 15px -10px black;box-shadow:0px 0px 20px white inset,0 0 15px -10px black}body .toggle-theme{-webkit-box-shadow:0 0 14px -4px black;box-shadow:0 0 14px -4px black}body .dark-btn,body .light-btn{-webkit-transition:0.5s;transition:0.5s;bottom:30px;right:30px}body .light-btn.open{bottom:70px;right:60px}body .dark-btn.open{bottom:20px;right:80px}@-webkit-keyframes name-animation{0%,to{background-position:0% 50%}50%{background-position:50% 100%}}@keyframes name-animation{0%,to{background-position:0% 50%}50%{background-position:50% 100%}}@-webkit-keyframes section-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes section-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes vibration-animation{0%,to{-webkit-transform:scale(1.05) rotate(0deg);transform:scale(1.05) rotate(0deg)}25%,75%{-webkit-transform:scale(1.05) rotate(-5deg);transform:scale(1.05) rotate(-5deg)}50%{-webkit-transform:scale(1.05) rotate(5deg);transform:scale(1.05) rotate(5deg)}}@keyframes vibration-animation{0%,to{-webkit-transform:scale(1.05) rotate(0deg);transform:scale(1.05) rotate(0deg)}25%,75%{-webkit-transform:scale(1.05) rotate(-5deg);transform:scale(1.05) rotate(-5deg)}50%{-webkit-transform:scale(1.05) rotate(5deg);transform:scale(1.05) rotate(5deg)}}