html {
     scroll-behavior: smooth;
 }

 body {
     background: black;
     margin: 0;
     font-family: 'Orbitron', sans-serif;
     color: white;
     overflow-x: hidden;
 }


 .video-background {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     overflow: hidden;
 }

 .video-desktop {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .video-mobile {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: none;
 }


 @media (max-width: 768px) {
     .video-desktop {
         display: none;
     }

     .video-mobile {
         display: block;
     }
 }





 .content {
     font-family: 'Orbitron', sans-serif;
     font-size: 2.2rem;
     margin-bottom: 15px;
     color: #00eaff;
     text-shadow: 0 0 10px rgba(0, 200, 255, 0.6);
     overflow: hidden;
     width: fit-content;
     margin: 120px auto 0 auto;
     animation: blink 0.7s infinite;
     text-align: center;
 }

 @keyframes blink {
     50% {
         border-color: transparent;
     }
 }


 .smoke {
     position: fixed;
     width: 30px;
     height: 30px;
     background: radial-gradient(circle, rgba(0, 200, 255, 0.6) 0%, rgba(0, 180, 255, 0) 80%);
     border-radius: 50%;
     pointer-events: none;
     transform: translate(-50%, -50%);
     animation: fade 1.5s ease-out forwards;
     mix-blend-mode: screen;
     z-index: 50;
 }

 @keyframes fade {
     from {
         opacity: 0.7;
         transform: translate(-50%, -50%) scale(1);
     }

     to {
         opacity: 0;
         transform: translate(-50%, -50%) scale(2);
     }
 }

 /* الـ NAV */
 nav {
     position: fixed;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 25px;
     padding: 10px 25px;
     background: rgba(0, 0, 0, 0.55);
     border: 1px solid rgba(255, 255, 255, 0.6);
     border-radius: 20px;
     box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
     z-index: 10;
     width: auto;
     text-align: center;
     justify-content: center;

 }

 nav a {
     color: #e4e4e4;
     text-decoration: none;
     font-size: 1.1rem;
     transition: 0.3s;
 }

 nav a:hover {
     color: #00eaff;
     text-shadow: 0 0 8px #00eaff;
 }


 .hamburger {
     display: none;
 }

 .nav-links {
     display: flex;
     gap: 25px;
 }


 @media (max-width: 768px) {}

 .about-section {
     display: flex;
     justify-content: center;
     margin: 150px auto;
     max-width: 1000px;
     padding: 20px;
 }

 .about-card {
     display: flex;
     gap: 30px;
     background: rgba(15, 15, 25, 0.7);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 20px;
     box-shadow: 0 0 25px rgba(0, 200, 255, 0.3);
     padding: 20px;
     align-items: center;
 }

 .about {
     flex: 1;
     color: #e4e4e4;
     font-family: 'Poppins', sans-serif;
 }

 .about h2 {
     font-family: 'Orbitron', sans-serif;
     font-size: 2.1rem;
     margin-bottom: 15px;
     color: #00eaff;
     text-shadow: 0 0 10px rgba(0, 200, 255, 0.6);
 }

 .about h1 {
     font-family: 'Orbitron', sans-serif;
     font-size: 2.3rem;
     margin-bottom: 15px;
     color: #00eaff;
     text-shadow: 0 0 10px rgba(0, 200, 255, 0.6);
 }

 .ui {
     font-family: 'Orbitron', sans-serif;
     font-size: large;
     margin-bottom: 15px;
     color: #00eaff;
     text-shadow: 0 0 10px rgb(0, 200, 255);
 }

 .about p {
     font-size: 1.2rem;
     line-height: 1.7;
     color: #f5f5f5;
 }

 .cv-container {
     font-family: 'Orbitron', sans-serif;
     color: #00eaff;
     font-weight: 700;
     display: inline-flex;
     gap: 10px;
     align-items: center;
     text-shadow: 0 0 10px rgba(0, 200, 255, 0.6);
 }

 .cv-btn {
     background: #00eaff;
     color: black;
     padding: 5px 10px;
     border-radius: 8px;
     text-decoration: none;
     font-family: 'Orbitron', sans-serif;
     font-weight: 700;
     transition: 0.3s;
     font-size: 0.9rem;
 }

 .cv-btn:hover {
     background: transparent;
     color: #00eaff;
     border: 1px solid #00eaff;
     box-shadow: 0 0 10px #00eaff;
 }



 .about-images {
     position: relative;
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .about-images img {
     width: 250px;
     height: 250px;
     object-fit: cover;
     border-radius: 20px;
     border: 2px solid #fff;
     box-shadow: 0 0 15px rgba(0, 200, 255, 0.4);
     transition: opacity 0.5s ease;
 }

 .arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     font-size: 2rem;
     color: #fff;
     cursor: pointer;
     user-select: none;
     transition: 0.3s;
     background: none;
     border: none;
 }

 .arrow:hover {
     color: #00eaff;
 }

 .arrow.left {
     left: 10px;
 }

 .arrow.right {
     right: 10px;
 }

 /* Projects Section */
 .projects-section {
     margin: 100px auto;
     max-width: 1200px;
     text-align: center;
     padding: 50px 20px;
 }

 .projects-section h2 {
     font-size: 2.5rem;
     color: #00eaff;
     text-shadow: 0 0 10px rgba(0, 200, 255, 0.6);
     margin-bottom: 40px;
 }

 .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
 }

 .project-card {
     background: rgba(15, 15, 25, 0.7);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 20px;
     padding: 20px;
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .project-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 0 20px rgba(0, 200, 255, 0.5);
 }

 .project-card img {
     width: 100%;
     border-radius: 15px;
     margin-bottom: 15px;
 }

 .project-card h3 {
     color: #fff;
     margin-bottom: 10px;
 }

 .project-card p {
     color: #ccc;
     font-size: 1rem;
     margin-bottom: 15px;
 }

 .project-card .btn {
     display: inline-block;
     padding: 8px 15px;
     color: #00eaff;
     border: 1px solid #00eaff;
     border-radius: 10px;
     text-decoration: none;
     transition: 0.3s;
 }

 .project-card .btn:hover {
     background: #00eaff;
     color: #000;
 }

 /* Contact Section */
 .contact-section {
     margin: 100px auto;
     max-width: 700px;
     text-align: center;
     padding: 50px 20px;
 }

 .contact-section h2 {
     font-size: 2.5rem;
     color: #00eaff;
     text-shadow: 0 0 10px rgba(0, 200, 255, 0.6);
     margin-bottom: 40px;
 }

 .contact-form {
     display: flex;
     flex-direction: column;
     gap: 20px;
     background: rgba(15, 15, 25, 0.7);
     padding: 30px;
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 0 25px rgba(0, 200, 255, 0.3);
 }

 .contact-form input,
 .contact-form textarea {
     padding: 12px 15px;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     background: rgba(0, 0, 0, 0.3);
     color: #fff;
     font-size: 1rem;
     font-family: 'Poppins', sans-serif;
     outline: none;
     resize: none;
 }

 .contact-form input::placeholder,
 .contact-form textarea::placeholder {
     color: #ccc;
 }

 .contact-form button {
     padding: 12px 20px;
     font-size: 1rem;
     font-weight: 600;
     border: 1px solid #00eaff;
     border-radius: 10px;
     background: transparent;
     color: #00eaff;
     cursor: pointer;
     transition: 0.3s;
 }

 .contact-form button:hover {
     background: #00eaff;
     color: #000;
     box-shadow: 0 0 15px rgba(0, 200, 255, 0.6);
 }

 .contact-form button:active {
     padding: 12px 20px;
     font-size: 1rem;
     font-weight: 600;
     border: 1px solid #00eaff;
     border-radius: 10px;
     background: transparent;
     color: #00eaff;
     cursor: pointer;
     transition: 0.3s;
 }


 /* Rating Section */
 .rating-section {
     margin: 100px auto;
     max-width: 700px;
     text-align: center;
     padding: 50px 20px;
 }

 .rating-section h2 {
     font-size: 2.5rem;
     color: #00eaff;
     text-shadow: 0 0 10px rgba(0, 200, 255, 0.6);
     margin-bottom: 30px;
 }

 .rating-form {
     display: flex;
     flex-direction: column;
     gap: 20px;
     background: rgba(15, 15, 25, 0.7);
     padding: 30px;
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 0 25px rgba(0, 200, 255, 0.3);
 }

 .rating-form .stars {
     display: flex;
     justify-content: center;
     gap: 15px;
     font-size: 2rem;
     cursor: pointer;
 }

 .rating-form .stars i {
     font-size: 2rem;
     color: rgba(255, 255, 255, 0.3);
     cursor: pointer;
     transition: transform 0.2s, color 0.2s;
 }

 .rating-form .stars i.active,
 .rating-form .stars i.hovered {
     color: #00eaff;
     /* التيل الكبير */
     transform: scale(1.2);
 }


 .rating-form input {
     padding: 12px 15px;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     background: rgba(0, 0, 0, 0.3);
     color: #fff;
     font-size: 1rem;
     font-family: 'Poppins', sans-serif;
     outline: none;
     resize: none;
 }

 .rating-form input::placeholder,
 .rating-form textarea::placeholder {
     color: #ccc;
 }

 .rating-form textarea {
     padding: 12px 15px;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     background: rgba(0, 0, 0, 0.3);
     color: #fff;
     font-size: 1rem;
     font-family: 'Poppins', sans-serif;
     outline: none;
     resize: none;
 }

 .rating-form textarea::placeholder {
     color: #ccc;
 }

 .rating-form button {
     padding: 12px 20px;
     font-size: 1rem;
     font-weight: 600;
     border: 1px solid #00eaff;
     border-radius: 10px;
     background: transparent;
     color: #00eaff;
     cursor: pointer;
     transition: 0.3s;
 }

 .rating-form button:hover {
     background: #00eaff;
     color: #000;
     box-shadow: 0 0 15px rgba(0, 200, 255, 0.6);
 }

 .rating-form button:active {

     padding: 12px 20px;
     font-size: 1rem;
     font-weight: 600;
     border: 1px solid #00eaff;
     border-radius: 10px;
     background: transparent;
     color: #00eaff;
     cursor: pointer;
     transition: 0.3s;
 }






 /* Testimonials Section */
 /* .testimonials-section {
     margin: 100px auto;
     max-width: 85%;
     text-align: center;
     padding: 50px 20px;
     justify-content: center;
     justify-items: center;
 }

 .testimonials-section h2 {
     font-size: 2.5rem;
     color: #00eaff;
     text-shadow: 0 0 10px rgba(0, 200, 255, 0.6);
     margin-bottom: 40px;
 }

 .testimonials-box {
     width: fit-content;
     height: fit-content;
     position: relative;
     background: rgba(15, 15, 25, 0.7);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 20px;
     box-shadow: 0 0 25px rgba(0, 200, 255, 0.3);
     padding: 30px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .testimonials-slider {
     display: flex;
     transition: transform 0.5s ease-in-out;
     width: 100%;
     justify-content: center;
 }

 .testimonial-card {
     flex: 0 0 80%;
     max-width: 600px;
     background: rgba(0, 0, 0, 0.199);
     border: 2px solid rgba(255, 255, 255, 0.441);
     border-radius: 15px;
     padding: 20px;
     margin: 0 auto;
     color: #fff;
     display: none;
 }

 .testimonial-card.active {
     display: block;
 }

 .testimonial-card h3 {
     margin-bottom: 10px;
     color: #00eaff;
 }

 .testimonial-card .stars {
     color: #00eaff;
     margin-bottom: 10px;
 }

 .testimonial-card p {
     font-size: 0.95rem;
     margin-bottom: 12px;
     color: #ddd;
 }

 .testimonial-card a {
     display: inline-block;
     padding: 6px 12px;
     border: 1px solid #00eaff;
     border-radius: 8px;
     color: #00eaff;
     text-decoration: none;
     transition: 0.3s;
     font-size: 0.9rem;
 }

 .testimonial-card a:hover {
     background: #00eaff;
     color: #000;
     box-shadow: 0 0 10px #00eaff;
 }

 .arrow {
     background: transparent;
     border: none;
     color: #00eaff;
     text-shadow: #00eaff 0 0 10px;
     font-size: 2rem;
     cursor: pointer;
     padding: 10px;
     transition: 0.3s;
 }

 .arrow:hover {
     color: #fff;
 } */



 


 /* Social Section */
 .social-section {
     margin: 100px auto;
     text-align: center;
 }

 .social-section h2 {
     font-size: 2.5rem;
     color: #00eaff;
     text-shadow: 0 0 10px rgba(0, 200, 255, 0.6);
     margin-bottom: 40px;
 }

 .social-cards {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 25px;
 }

 .social-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 10px;
     width: 120px;
     padding: 20px;
     background: rgba(15, 15, 25, 0.7);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 0 20px rgba(0, 200, 255, 0.3);
     text-decoration: none;
     color: #fff;
     transition: 0.3s;
     font-size: 1.2rem;
 }

 .social-card i {
     font-size: 2rem;
 }

 .social-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 0 25px rgba(0, 200, 255, 0.7);
     color: #00eaff;
 }




 @media (max-width: 768px) {

     nav {
         top: 16px;
         right: 16px;
         left: auto;
         transform: none;
         padding: 6px 10px;
         border-radius: 12px;
         width: fit-content;
     }


     .hamburger {
         display: flex;
         width: 36px;
         height: 28px;
         flex-direction: column;
         justify-content: center;
         gap: 5px;
         background: transparent;
         border: none;
         cursor: pointer;
         z-index: 10001;
     }

     .hamburger span {
         display: block;
         height: 3px;
         width: 100%;
         background: #00eaff;
         border-radius: 2px;
         transition: transform .25s ease, opacity .25s ease, background .25s ease;
     }


     .nav-links {
         display: none;
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, .92);
         backdrop-filter: blur(4px);
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 22px;
         z-index: 9999;
     }

     nav.open .nav-links {
         display: flex;
     }

     nav.open .hamburger span:nth-child(1) {
         transform: translateY(8px) rotate(45deg);
     }

     nav.open .hamburger span:nth-child(2) {
         opacity: 0;
     }

     nav.open .hamburger span:nth-child(3) {
         transform: translateY(-8px) rotate(-45deg);
     }

     .nav-links a {
         font-size: 1.2rem;
         padding: 10px 14px;
         color: #00eaff;
         text-shadow: 0 0 8px #00eaff;
         font-size: 1.2rem;
         padding: 10px 14px;
         transition: color 0.3s, text-shadow 0.3s;
     }

     .nav-links a:hover {
         color: #fff;
         text-shadow: 0 0 12px #00eaff, 0 0 20px #00eaff;
     }


     .about-section {
         margin: 110px auto 60px;
         padding: 16px;
         max-width: 95%;
     }

     .about-card {
         flex-direction: column;
         text-align: center;
         gap: 16px;
         padding: 16px;
     }

     .about h1 {
         font-size: clamp(1.3rem, 5.2vw, 1.8rem);
     }

     .about h2 {
         font-size: clamp(1.1rem, 4.6vw, 1.5rem);
         margin-bottom: 10px;
     }

     .about p {
         font-size: 1rem;
         line-height: 1.6;
     }

     .about-images img {
         width: min(65vw, 260px);
         height: auto;
         aspect-ratio: 1/1;
     }

     .cv-container {
         justify-content: center;
         flex-wrap: wrap;
         gap: 8px;
     }

     /* .testimonials-box {
         width: 90%;
         height: fit-content;
         position: relative;
         background: rgba(15, 15, 25, 0.7);
         border: 1px solid rgba(255, 255, 255, 0.3);
         border-radius: 20px;
         box-shadow: 0 0 25px rgba(0, 200, 255, 0.3);
         padding: 30px;
         overflow: hidden;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .testimonial-card {
         display: inline-block;
         background: rgba(0, 0, 0, 0.199);
         border: 2px solid rgba(255, 255, 255, 0.441);
         border-radius: 15px;
         padding: 20px;
         margin: 0 30px;
         vertical-align: top;
         color: #fff;
         white-space: normal;
     }

     .arrow {
         margin-left: -8px;
         margin-right: -8px;
         z-index: 10;
         touch-action: manipulation;

     } */


 }