@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
* {
text-decoration: none;
text-transform: capitalize;
outline: none;
list-style: none;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: weight;
font-style: normal
}
/* animation */
/* تنسيق النجوم */
#twinkling-stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

/* تنسيق كل نجمة */
.star {
position: absolute;
background: radial-gradient(circle, #ffffff 10%, #bb86fc 70%, transparent); /* تدرج من أبيض للبنفسجي */
border-radius: 50%;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); /* توهج خفيف */
animation: twinkle 5s ease-in-out infinite, move 10s linear infinite;
}

/* أنيميشن التلألؤ */
@keyframes twinkle {
0%, 100% {
opacity: 0.4;
transform: scale(0.7);
}
50% {
opacity: 1;
transform: scale(1);
}
}

/* أنيميشن الحركة العشوائية */
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(calc(-50px + 100px * var(--rand-x)), calc(-50px + 100px * var(--rand-y)));
}
}
.mytrac img, .mytrac h1, .mytrac h3, .mytrac p, .mytrac .btn, .mytrac .contact {
position: relative;
z-index: 2;
}
/* start css */
.container{
width: 100%;
}
.mytrac{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 30px;
min-height: 100vh;
position: relative;
padding-top: 80px;
overflow: hidden;
background: #0f172a; 
color: #fff;
}
.mytrac img{
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
animation: float 4s ease-in-out infinite; /* حركة تأرجح ناعمة */
box-shadow: 0 4px 15px rgba(187, 134, 252, 0.4); /* ظل بنفسجي فاتح */


}

.mytrac h1 {
font-size: 2.5em;
margin-bottom: 10px;
animation: colorChange 6s ease-in-out infinite; /* تغيير اللون كل 6 ثواني */
text-shadow: 0 0 10px rgba(187, 134, 252, 0.5); /* ظل ناعم للنص */
}

/* أنيميشن تغيير اللون */
@keyframes colorChange {
0% {
color: #ffffff; 
}
50% {
color: #bb86fc; 
}
100% {
color: #003cd5; 
}
}

@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
@keyframes shadowPulse {
0% {
text-shadow: 0 0 10px rgba(187, 134, 252, 0.5);
box-shadow: 0 4px 15px rgba(187, 134, 252, 0.4);
}
50% {
text-shadow: 0 0 20px rgba(187, 134, 252, 0.7);
box-shadow: 0 10px 20px rgba(187, 134, 252, 0.6); /* الظل يكبر شوية */
}
100% {
text-shadow: 0 0 10px rgba(187, 134, 252, 0.5);
box-shadow: 0 4px 15px rgba(124, 17, 255, 0.4); /* رجوع للحجم الأصلي */
}
}
.mytrac h3 {
font-size: 1.5em;
margin-bottom: 15px;
}

.mytrac p {
font-size: 1.2em;
max-width: 600px;
margin-bottom: 20px;
color: #bb86fc;
text-align: center;
font-size: 22px;
line-height: 1.5;
text-shadow: 0 0 8px rgba(0, 221, 235, 0.4); 
animation: textColorChange 7s ease-in-out infinite; 
}
@keyframes textColorChange {
0% {
color: #0bdaff;
}
50% {
color: #6ab9ff; 
text-shadow: 0 0 10px rgba(0, 221, 235, 0.6);
}
100% {
color: #759dad; 
text-shadow: 0 0 8px rgba(5, 48, 51, 0.4); 
}
}
.mytrac h2{
font-size: 40px;
}

.mytrac .btn{
display: flex;
gap:100px;
}
.contact{
width: 60%;
margin:  0 auto 30px;
}
.contact ul {
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}

.contact ul li {
margin: 10px 0;
position: relative;
z-index: 2; 
animation: slideIn 1s ease-out forwards; 
animation-delay: calc(0.2s * var(--i)); 
}

.contact ul li a {
color: #fff;
text-decoration: none;
font-size: 1.1em;
display: flex;
gap: 7px;
padding: 10px 15px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
justify-content: center;
backdrop-filter: blur(5px);
transition: all 0.3s ease;
font-size: 1.1em;
align-items: center;
}
.contact ul li a:hover {
color: #00ddeb; 
background: rgba(0, 221, 235, 0.2); 
transform: translateX(10px);
box-shadow: 0 0 15px rgba(0, 221, 235, 0.4); 
}

/* تنسيق الأيقونات */
.contact ul li a i {
font-size: 1.3em;
transition: transform 0.3s ease; 
color: #00ddeb;
}
.contact ul li a:hover i {
transform: scale(1.2); 
}

/* أنيميشن دخول العناصر */
@keyframes slideIn {
0% {
opacity: 0;
transform: translateY(20px);}
100% {
opacity: 1;
transform: translateY(0); 
}
}




/* STYLE BTN */
/* From Uiverse.io by jawad_8494 */ 
.super-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 28px;
background: linear-gradient(145deg, #0f0f0f, #1c1c1c);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 100px;
color: #fff;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
overflow: hidden;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
backdrop-filter: blur(8px);
z-index: 1;
}

.super-button::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, #00ffff, #ff00ff, #00ffff);
animation: rotate 4s linear infinite;
z-index: -2;
}

.super-button::after {
content: "";
position: absolute;
inset: 2px;
background: #0a0a0a;
border-radius: inherit;
z-index: -1;
}

.super-button:hover {
transform: scale(1.05);
box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
}

.super-button:hover .arrow {
transform: translateX(6px);
}

.arrow {
width: 22px;
height: 22px;
transition: transform 0.3s ease-in-out;
color: #00ffff;
}

@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* btn2 */

/* From Uiverse.io by gharsh11032000 */ 
.animated-button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  border: none;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: #ffffff40;
  box-shadow: 0 0 0 2px #ffffff20;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.animated-button span:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #2196F3;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
}

.animated-button span:first-child {
  position: relative;
  z-index: 1;
}

.animated-button:hover {
  box-shadow: 0 0 0 5px #2195f360;
  color: #ffffff;
}

.animated-button:active {
  scale: 0.95;
}

.animated-button:hover span:last-child {
  width: 150px;
  height: 150px;
  opacity: 1;
}




/* start navbar */
.nav-links{
position: relative;
display: flex;
flex-direction: column;
margin-top: 0;
}
.nav-bar{
width:100%;
margin:  0 auto;
background-color: #000000;
font-size: 25px;
z-index: 3;
position: sticky;
top: 0;
z-index: 4;
}

.nav-bar ul{
width:60%;
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px;

}
.nav-bar ul li a{
color: #ffffff6b;
padding: 10px 20px  ;
border-radius: 15px;
text-decoration: none;
transition: all 0.3s ease;
animation: navSlideIn 0.8s ease-out forwards; 
animation-delay: calc(0.2s * var(--i));
}
.nav-bar ul li a.active{
background-color: #003cd5;
color: #fff;
box-shadow: 0 0 10px rgba(98, 0, 234, 0.5); /* ظل بنفسجي */
text-shadow: 0 0 5px rgba(98, 0, 234, 0.7); /* ظل نص بنفسجي */
}
.nav-bar ul li a:hover {
background-color: #00ddeb; /* أزرق سماوي */
color: #fff;
box-shadow: 0 0 15px rgba(0, 221, 235, 0.6); /* ظل أزرق سماوي */
text-shadow: 0 0 8px rgba(0, 221, 235, 0.8); /* ظل نص أزرق سماوي */
transform: translateY(3px); /* حركة خفيفة لفوق */

}
@keyframes navSlideIn {
0% {
opacity: 0;
transform: translateX(-20px); /* البداية من الشمال */
}
100% {
opacity: 1;
transform: translateX(0); /* الرجوع لمكانها */
}
}
/* about me */
.about-me{
display: flex;
flex-direction: column;
gap: 30px;
background-color: #182f6c;
justify-content: center;
align-items: center;
color: #fff;
padding-top: 20px;
}
.about-me h1{
font-size: 50px;
transition: 1s;
padding: 10px 15px;
}
.about-me p{
width: 50%;
line-height: 1.9;
transition: 1s;
padding: 10px 15px;
margin-bottom:10px;

}

.about-me h1:hover,.about-me p:hover{
background-color: #1158a8ba;
border-radius: 20px;
color: #00ffff;
box-shadow: 0 0 15px rgba(0, 221, 235, 0.6);
}
.about-me2 {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 30px;
width: 80%;
margin: 20px auto;
}

.my-educ {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border-radius: 15px;
padding: 20px;
width: 100%;
transition: all 0.3s ease;
}

.my-educ:hover {
background: rgba(0, 221, 235, 0.2);
box-shadow: 0 0 15px rgba(0, 221, 235, 0.6);
border: 2px solid #00ddeb;
transform: translateY(-5px);
}

.my-educ h2 {
font-size: 1.8em;
color: #fff;
margin-bottom: 10px;
}
.my-educ p {
font-size: 1em;
color: #bb86fc;
line-height: 1.6;
}

.my-educ p span {
color: #00ddeb;
font-weight: bold;
}





/* Responsive Design */

/* شاشات الموبايل الصغيرة (حتى 576px) */
@media (max-width: 576px) {
.mytrac {
gap: 20px; /* تقليل المسافة بين العناصر */
}

.mytrac img {
width: 100px; /* تصغير الصورة */
height: 100px;
}

.mytrac h1 {
font-size: 1.5rem; /* تصغير حجم الخط */
}

.mytrac h2 {
font-size: 1rem; /* تصغير حجم الخط */
}

.mytrac p {
font-size: 1rem; /* تصغير حجم الوصف */
max-width: 90%; /* جعل الوصف ياخد مساحة أكبر */
}

.mytrac .btn {
flex-direction: column; /* ترتيب الأزرار عموديًا */
gap: 20px; /* تقليل المسافة بين الأزرار */
}

.super-button, .button {
padding: 10px 20px; /* تصغير الأزرار */
font-size: 14px; /* تصغير حجم الخط */
}

.contact {
width: 90%; /* جعل السوشيال ميديا أعرض */
}

.contact ul {
flex-direction: column; /* ترتيب السوشيال ميديا عموديًا */
gap: 15px;
}

.contact ul li a {
font-size: 1em; /* تصغير حجم النص */
padding: 8px 12px; /* تصغير الـ padding */
}

.nav-bar ul {
width: 90%; /* جعل الـ Navigation Bar أعرض */
flex-wrap: wrap; /* السماح بتكسير العناصر إذا ما اتسعت */
padding: 10px; /* تصغير الـ padding */
}

.nav-bar ul li a {
font-size: 12px; /* تصغير حجم الخط */
padding: 8px 15px; /* تصغير الـ padding */
}

.about-me {
padding: 15px; /* تصغير الـ padding */
}

.about-me h1 {
font-size: 2em; /* تصغير حجم الـ h1 */
}

.about-me p {
width: 90%; /* جعل الوصف أعرض */
font-size: 1em; /* تصغير حجم الخط */
line-height: 1.6; /* تحسين المسافة بين السطور */
}  
.about-me2 {
flex-direction: column;
width: 90%;
gap: 20px;
}
.my-educ {
width: 100%;
padding: 15px;
}
.my-educ h2 {
font-size: 1.5em;
}
.my-educ p {
font-size: 1em;
}
}

@media (min-width: 577px) and (max-width: 820px) {
.mytrac {
gap: 15px; 
}

.mytrac img {
width: 120px; 
height: 120px;
}

.mytrac h1 {
font-size: 2em; 
}

.mytrac h2 {
font-size: 1.8em; 
}

.mytrac p {
font-size: 1.1em;
max-width: 80%;
}

.mytrac .btn {
gap: 50px;  
flex-direction: row; 
}

.contact {
width: 80%; /* جعل السوشيال ميديا أعرض */
}

.contact ul {
flex-direction: column; /* الإبقاء على السوشيال ميديا أفقيًا */
gap: 10px;
flex-wrap: wrap; /* السماح بتكسير العناصر إذا ما اتسعت */
}


.nav-bar ul {
width: 80%; /* جعل الـ Navigation Bar أعرض */
padding: 15px;
}

.nav-bar ul li a {
font-size: 15px; /* تصغير حجم الخط */
padding: 10px 15px;
}

.about-me h1 {
font-size: 2.5em; /* تصغير حجم الـ h1 */
}

.about-me p {
width: 70%; /* جعل الوصف أعرض */
font-size: 1.1em; /* تصغير حجم الخط */
}
.about-me2 {
flex-direction: column;
width: 80%;
gap: 20px;
}
.my-educ {
width: 100%;
padding: 15px;
}
.my-educ h2 {
font-size: 1.6em;
}
.my-educ p {
font-size: 1.05em;
}
}

/* شاشات اللاب توب والديسكتوب الصغيرة (من 769px إلى 992px) */
@media (min-width: 820px) and (max-width:1200px) {
.mytrac {
gap: 30px;
padding: 40px;
padding-bottom: 100px; /* إضافة مساحة سفلية لتجنب التداخل */
}

.mytrac img {
width: 140px;
height: 140px;
}

.mytrac h1 {
font-size: 2.2em;
}

.mytrac h2 {
font-size: 2em;
}

.mytrac p {
font-size: 1.15em;
max-width: 70%;
}

.contact {
width: 70%; /* تصغير العرض عشان ما يتداخلش */
margin: 0 auto; /* التأكد إنها مركزة */
}

.contact ul li a  {
font-size: 15px;
margin-left: -20px;
}

.nav-links {
margin-top: -50px; /* إزالة الـmargin-top السلبي */
}

.nav-bar ul {
width: 70%;
}

.about-me p {
width: 60%;
font-size: 1.15em;
}

.about-me2 {
width: 70%;
gap: 25px;
}

.my-educ {
width: 150%;
padding: 15px;
}
.my-educ h2 {
font-size: 1.6em;
}
.my-educ p {
font-size: 0.75em;
}
}

/* content page */
.cards{
display: flex;
width: 100%;
justify-content: space-around;
background-color: #182f6c;
padding-top:50px ;
padding-bottom: 20px;

}
.card {
background: rgba(255,255,255,0.05);
border: solid 3px  rgb(0, 85, 243);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
width: 360px;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);transition: 1s ease-in-out;
}
.card:hover{
  border-color: black;
  scale: 1.1;
}

.card h3 {
margin-bottom: 20px;
font-size: 25px;
color: #4db8ff;
}

/* Progress bars */
.skill {
margin-bottom: 15px;
}

.skill-name {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}

.progress {
background: #1a1a1a;
border-radius: 10px;
height: 10px;
overflow: hidden;
}

.progress-bar {
height: 100%;
border-radius: 10px;
width: 0;
transition: width 2s ease;
}

.kotlin { background: #3db2ff; }
.android { background: #00e676; }
.csharp { background: #ba68c8; }
.sql { background: #ffca28; }
.compose { background: #002de2; }

/* Recent activity list */
.activity {
list-style: none;
padding: 0;
}

.activity li {
margin-bottom: 15px;
display: flex;
align-items: center;
}

.dot {
width: 20px;
height: 20px;
border-radius: 60%;
margin-right: 10px;
}

.blue { background: #3db2ff; }
.green { background: #00e676; }
.purple { background: #ba68c8; }

.title {
font-weight: bold;
}

.subtitle {
font-size: 13px;
color: #ccc;
}
.dashboard {
padding: 20px 40px;
text-align: center;
background-color: #182f6c;
color: #000000;
}

.dashboard h2 {
margin-bottom: 30px;
font-size: 28px;
color: #fff;
}

.cards2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}

.card2 {
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}

.card2:hover {
transform: translateY(-10px);
}

.icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 15px;
font-size: 22px;
color: white;
}

.blue { background: #3db2ff; }
.green { background: #00e676; }
.purple { background: #ba68c8; }
.yellow { background: #ffca28; }

.card2 h3 {
font-size: 26px;
margin: 10px 0;
}

.card2 p {
font-size: 14px;
color: #ccc;
}
/* Responsive Design for Cards */
@media (max-width: 1100px) {
.cards {
flex-direction: column;
align-items: center;
}
.card {
width: 100%;
max-width: 400px;
margin-bottom: 20px;
}
.skill-name, .title, .subtitle {
font-size: 1em;
}
.progress {
height: 8px;
}
.card h3 {
font-size: 1.3em;
}
}

/* skills page */

.content {
text-align: center;
padding: 20px;
background: linear-gradient(180deg, #1e3c72, #2a5298);

}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.skill-card {
background: rgba(255, 255, 255, 0.1);
border: solid 3px  rgb(0, 85, 243);
border-radius: 15px;
padding: 20px;
text-align: left;
transition:  1s;
}
.skill-card:hover {
transform: scale(1.05);
border-color: black;
}
.skill-icon {
width: 30px;
height: 30px;
background: #00d4ff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
color: #1e3c72;
font-weight: bold;
}
.skill-list {
list-style: none;
padding: 0;
}
.skill-list li {
margin: 10px 0;
font-size: 16px;
color: #d3d3d3;
}

/* projects */
.projects{
padding :20px  ;
background: linear-gradient(180deg, #0c1b38, #020e24);
}
h2 {
      text-align: center;
      margin-bottom: 40px;
      font-size: 28px;
      animation: colorChange 6s ease-in-out infinite; /* تغيير اللون كل 6 ثواني */
text-shadow: 0 0 10px rgba(187, 134, 252, 0.5); /* ظل ناعم للنص */
    }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      max-width: 1200px;
      margin: auto;
    }

    .project-card {
      background: #1c2541;
      border-radius: 15px;
      overflow: hidden;
border: solid 3px  rgb(0, 85, 243);
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      transition: transform 0.3s ease;
      transition: all 1s;
    }

    .project-card:hover {
      transform: translateY(-10px);
      border-color: #ff0606;
    }

    .project-image img {
      width: 100%;
      display: block;
    }

    .project-content {
      padding: 20px;
    }

    .project-content h3 {
      margin: 0 0 10px;
      font-size: 20px;
           font-size: 28px;
      animation: colorChange 6s ease-in-out infinite; /* تغيير اللون كل 6 ثواني */
text-shadow: 0 0 10px rgba(187, 134, 252, 0.5); /* ظل ناعم للنص */
    }

    .project-content p {
      font-size: 14px;
      margin-bottom: 15px;
      color: #0bdaff;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag {
      background: rgba(255,255,255,0.1);
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 13px;
      color: #fff;
    }
    
        .connect-section {
            text-align: center;
            padding-top: 30px;
            padding-bottom: 50px;
         background: linear-gradient(180deg, #0c1b38, #020e24);
        }

        .connect-title {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            background: linear-gradient(135deg, #007bff, #0056b3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .connect-description {
            font-size: 16px;
            color: #0ad6ffaf;
            margin-bottom: 30px;
            line-height: 1.5;
        }

        .buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: white;
        }

        .email-btn {
            background-color: #007bff;
        }

        .email-btn:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
        }

        .linkedin-btn {
            background-color: #0077b5;
        }

        .linkedin-btn:hover {
            background-color: #005a87;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 119, 181, 0.4);
        }

        .github-btn {
            background-color: #333;
        }

        .github-btn:hover {
            background-color: #1a1a1a;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(51, 51, 51, 0.4);
        }

        .btn i {
            font-size: 18px;
        }