@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "Poppins" , "serif";
}
body{
    background-color: #222831;
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
    padding: 0 0.5rem;
    max-width: 1200px;
}
.navigation ul{
    display: flex;
    list-style-type: none;
    gap: 2rem;

}
.navigation a{
    text-decoration: none;
    color: white;
}

.navigation a:hover{
    color: red;
}

hr{
    opacity: 10%;
}
.hero{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5rem auto;
    max-width: 1200px;
}
.arrow{
    display: flex;
    position: absolute;
    transform: translate(-4.5rem, 1rem);
}
.heroSub {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.name {
    font-size: 3rem;
    color: white;
    position: relative;
    animation: shine 3s infinite;
    text-shadow: 
        0 0 5px #fff, 
        0 0 10px #fff, 
        0 0 20px #00adb5, 
        0 0 40px #00adb5, 
        0 0 80px #00adb5;
}
  
@keyframes shine {
    0% {
        text-shadow: 
            0 0 5px #fff, 
            0 0 10px #fff, 
            0 0 20px #00adb5, 
            0 0 40px #00adb5, 
            0 0 80px #00adb5;
    }
    50% {
        text-shadow: 
            0 0 10px #fff, 
            0 0 20px #fff, 
            0 0 30px #00fff0, 
            0 0 60px #00fff0, 
            0 0 100px #00fff0;
    }
    100% {
        text-shadow: 
            0 0 5px #fff, 
            0 0 10px #fff, 
            0 0 20px #00adb5, 
            0 0 40px #00adb5, 
            0 0 80px #00adb5;
    }
}

.title{
    font-size: 4rem;
    color: rgb(166, 14, 166);
}
.heroBtns {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
@keyframes hireMeGlow {
    0% {
      box-shadow: 0 0 10px rgba(0, 173, 181, 0.3);
    }
    50% {
      box-shadow: 0 0 20px rgba(0, 173, 181, 0.7);
    }
    100% {
      box-shadow: 0 0 10px rgba(0, 173, 181, 0.3);
    }
  }
  
  .hireMe {
      background-color: #00adb5;
      color: #eeeeee;
      border-radius: 24px;
      text-decoration: none;
      padding: 0.5rem 1.5rem;
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
      font-weight: bold;
      letter-spacing: 0.5px;
  
      animation: hireMeGlow 2.5s infinite ease-in-out;
      transition: transform 0.3s ease;
  }
  
  /* تأثير إضافي عند hover (في PC فقط) */
  @media (hover: hover) {
    .hireMe:hover {
        transform: scale(1.08) translateY(-2px);
        background-color: #00ced1;
    }
  }
  

.cv {
    background-color: rgba(57,62,70,0.75);
    color: #eeeeee;
    border-radius: 24px;
    text-decoration: none;
    padding: 0.5rem 1.5rem;
    text-shadow: 0px 4px 4px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(4px);

    /* Glow */
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.4);
    transition: all 0.3s ease;
}

.cv:hover {
    transform: scale(1.06) translateY(-2px);
    box-shadow: 0 0 18px rgba(138, 43, 226, 0.8);
    background-color: rgba(75, 0, 130, 0.7); /* لون بنفسجي غامق */
}


.heroImg {
    transition: transform 0.5s ease-in-out;
}

.heroImg:hover {
    animation: pulseEffect 1s ease-in-out infinite;
}

@keyframes pulseEffect {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1); /* تكبير الصورة عند 50% */
    }
    100% {
        transform: scale(1);
    }
}







.aboutMe{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5rem auto;
    max-width: 1200px;
    gap: 10rem;
}

.textContainer{
    display: flex;
    flex-direction: column;
}

.textTitle{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 2rem;
}

.aboutName{
    color: #eeeeee;
}

.aboutTitle{
    color: #54cfe8;
}

.aboutMePar{
    text-align: justify;
    color: rgba(238, 238, 238, 0.75);
}

.light {
    animation: glow 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px #f9e64f); /* توهج مبدئي */
}
.telegramSection {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    background-color: #222831; /* اللون الذي طلبته */
  }
  
  .telegramButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #29A9EA;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 30px;
    font-weight: bold;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    direction: rtl;
    animation: scaleGlowAnimation 2s infinite alternate; /* حركة التكبير والتوهج */
  }
  
  .telegramButton:hover {
    background-color: #1c8cc6;
  }
  
  .telegramIcon {
    width: 20px;
    height: 20px;
  }
  
  .telegramText {
    font-family: 'Arial', sans-serif;
  }
  
  /* تعريف حركة التكبير والتوهج */
  @keyframes scaleGlowAnimation {
    0% {
      transform: scale(1); /* الحجم العادي */
      box-shadow: 0 0 8px rgba(41, 169, 234, 0.5); /* توهج خفيف */
    }
    100% {
      transform: scale(1.1); /* الحجم المكبر */
      box-shadow: 0 0 20px rgba(41, 169, 234, 1); /* توهج أقوى */
    }
  }
  
@keyframes glow {
    0% {
        filter: drop-shadow(0 0 5px #f9e64f);
    }
    50% {
        filter: drop-shadow(0 0 20px #fff176);
    }
    100% {
        filter: drop-shadow(0 0 5px #f9e64f);
    }
}

.AboutMeImg {
    transition: transform 0.2s ease-in-out;
}

.AboutMeImg:hover {
    animation: shakeLoop 0.5s ease-in-out infinite;
}

@keyframes shakeLoop {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-3px, 2px); }
    50% { transform: translate(3px, -2px); }
    75% { transform: translate(-2px, 1px); }
    100% { transform: translate(0, 0); }
}


.Works{

    background-image: url("assets/svg/background.svg");
    padding: 10rem 10rem;
    margin: 5rem 0rem;
}

.projectTitle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    font-size: 2rem;
    width: 100%;         /* مهم باش ياخذ العرض كامل */
    margin-left: 0;      /* نتاكد بلي ما يتزحزحش */
  }
  .WorksContainer {
    width: 100%;
    display: block; /* أو flex مع justify-content: flex-start */
  }  
  section.Works {
    text-align: left;
  }
  
  

.person {
    animation: glowEffect 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px #00ffff); /* اللون الأزرق الفاتح */
}

@keyframes glowEffect {
    0% {
        filter: drop-shadow(0 0 5px #00ffff);
    }
    50% {
        filter: drop-shadow(0 0 20px #00ffff);
    }
    100% {
        filter: drop-shadow(0 0 5px #00ffff);
    }
}

.contactContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
}

.contactTitle{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
    font-size: 2rem;
}
.contact{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5rem;
    gap: 20rem;
}
.contact h3, .contact a {
    color: white;
    text-decoration: none;
}

.emailAndPhone{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.socialMedia{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.socialMedia{
    display: flex;
    align-items: center;
    border-radius: 50px;
    background-color: rgba(57, 62, 70, 0.5);
    backdrop-filter: blur(4px);
    padding: 1rem;
}
.socialMedia img {
    width: 24px;
    height: 24px;
}

.gmail {
    animation: softGlow 1.6s ease-in-out infinite;
    filter: drop-shadow(0 0 6px #38bdf8); 
}

@keyframes softGlow {
    0% {
        filter: drop-shadow(0 0 6px #38bdf8);
    }
    50% {
        filter: drop-shadow(0 0 16px #c084fc); 
    }
    100% {
        filter: drop-shadow(0 0 6px #38bdf8);
    }
}


.footer {
    color: #eeeeee;
    padding: 2rem;
    text-align: center;
}
.aboutNameWorks{
    color: #eeeeee;
    text-align: left;
}

.aboutTitleWorks{
    color: #54cfe8;
    text-align: left;
}
@media (max-width: 1250px) {

    .aboutMePar{
        margin-left: 10px;
        margin-right: 10px;
    }
    header {
      margin-left: 1rem;
      margin-right: 1rem;
    }
    .hero {
      flex-direction: column;
      align-items: center;
      gap: 2rem;
    }
    .heroImg {
      width: 400px;
    }
    .name,
    .title {
      font-size: 2rem;
    }
    .arrow {
      display: none;
    }
    .aboutMe {
      flex-direction: column-reverse;
      align-items: center;
      gap: 5rem;
    }
    .textContainer {
      align-items: center;
      margin: 0rem 5rem;
      gap: 1rem;
      margin-left: 20px;
    }
    .aboutName {
      font-size: 2rem;
      margin-right: 10px;
      margin-left: 15px
      
    }
    .aboutTitle{
        font-size: 2rem;
        
    }
    .person{
        width: 60px;
        margin-right: 50px;
    }

    .light {
      width: 60px;
    }
    .aboutMeImg {
      width: 400px;
    }
    .worksTitle {
        display: flex;
        flex-direction: column;
        align-items: left;
        font-size: 1.5rem;
        gap: 0.5rem;
        text-align: left;
      }
    
      .worksTitle .icon {
        width: 40px;
        height: auto;
        
      }
    
      .worksContainer {
        padding: 2rem 1rem;
      }
    .projectTitle {
      margin-left: 1rem;
    }
    .works ul {
      flex-direction: column;
      gap: 1rem;
    }
    .contactContainer {
      margin: 7rem 5rem;
      gap: 2rem;
    }
    .contact {
      flex-direction: column;
      gap: 1rem;
      margin-right: 0;
      font-size: 0.95rem;
    }
  }