* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Aria', sans-serif;
     line-height: 1.6;
     color: #333;
     overflow-x: hidden;
     direction: rtl;
 }

 html {
     scroll-behavior: smooth;
 }

 /* Loading Screen */
 .loading-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 10000;
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .loading-screen.hidden {
     opacity: 0;
     visibility: hidden;
     transform: scale(1.1);
 }

 .loading-spinner {
     width: 60px;
     height: 60px;
     border: 4px solid rgba(255, 255, 255, 0.3);
     border-top: 4px solid white;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 1rem;
 }

 .loading-text {
     color: white;
     font-size: 1.2rem;
     font-weight: 600;
     animation: pulse 1.5s ease-in-out infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* Scroll Progress Indicator */
 .scroll-progress {
     position: fixed;
     top: 0;
     left: 0;
     width: 0%;
     height: 4px;
     background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
     z-index: 9999;
     transition: width 0.1s ease;
     box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
 }

 /* Header */
 .header {
     position: fixed;
     top: 0;
     width: 100%;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(15px);
     z-index: 1000;
     padding: 1rem 0;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     transform: translateY(-100%);
     animation: slideDown 0.8s ease 2.5s forwards;
 }

 .header.scrolled {
     background: rgba(255, 255, 255, 0.98);
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(20px);
 }

 .nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2rem;
 }

 .logo {
     font-size: 1.8rem;
     font-weight: 700;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: logoGlow 3s ease-in-out infinite alternate;
     cursor: pointer;
     transition: transform 0.3s ease;
 }

 .logo:hover {
     transform: scale(1.05);
 }

 @keyframes logoGlow {
     0% {
         filter: drop-shadow(0 0 5px rgba(102, 126, 234, 0.3));
     }

     100% {
         filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.6));
     }
 }

 .nav-links {
     display: flex;
     list-style: none;
     gap: 2rem;
 }

 .nav-links li {
     opacity: 0;
     transform: translateY(-20px);
     animation: slideInNav 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }

 .nav-links li:nth-child(1) {
     animation-delay: 3s;
 }

 .nav-links li:nth-child(2) {
     animation-delay: 3.1s;
 }

 .nav-links li:nth-child(3) {
     animation-delay: 3.2s;
 }

 .nav-links li:nth-child(4) {
     animation-delay: 3.3s;
 }

 .nav-links li:nth-child(5) {
     animation-delay: 3.4s;
 }

 .nav-links li:nth-child(6) {
     animation-delay: 3.5s;
 }

 @keyframes slideInNav {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .nav-links a {
     text-decoration: none;
     color: #333;
     font-weight: 500;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     padding: 0.8rem 1.2rem;
     border-radius: 30px;
     overflow: hidden;
 }

 .nav-links a::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
     transform: scaleX(0);
     transform-origin: right;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: -1;
 }

 .nav-links a:hover::before {
     transform: scaleX(1);
     transform-origin: left;
 }

 .nav-links a:hover {
     color: #667eea;
     transform: translateY(-3px);
 }

 .mobile-menu {
     display: none;
     flex-direction: column;
     cursor: pointer;
     padding: 0.5rem;
 }

 .mobile-menu span {
     width: 25px;
     height: 3px;
     background: #333;
     margin: 3px 0;
     transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: 2px;
 }

 .mobile-menu.active span:nth-child(1) {
     transform: rotate(-45deg) translate(-5px, 6px);
 }

 .mobile-menu.active span:nth-child(2) {
     opacity: 0;
 }

 .mobile-menu.active span:nth-child(3) {
     transform: rotate(45deg) translate(-5px, -6px);
 }

 /* Enhanced Floating Background */
 .floating-elements {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: -1;
     overflow: hidden;
 }

 .floating-shape {
     position: absolute;
     opacity: 0.08;
     animation: floatAround 25s infinite linear;
     border-radius: 50%;
 }

 .floating-shape:nth-child(1) {
     top: 10%;
     left: 10%;
     width: 120px;
     height: 120px;
     background: linear-gradient(45deg, #667eea, #764ba2);
     animation-duration: 30s;
 }

 .floating-shape:nth-child(2) {
     top: 60%;
     right: 10%;
     width: 80px;
     height: 80px;
     background: linear-gradient(45deg, #f093fb, #f5576c);
     animation-duration: 35s;
     animation-direction: reverse;
 }

 .floating-shape:nth-child(3) {
     bottom: 20%;
     left: 20%;
     width: 100px;
     height: 100px;
     background: linear-gradient(45deg, #4facfe, #00f2fe);
     animation-duration: 40s;
 }

 .floating-shape:nth-child(4) {
     top: 30%;
     right: 30%;
     width: 60px;
     height: 60px;
     background: linear-gradient(45deg, #43e97b, #38f9d7);
     animation-duration: 28s;
 }

 @keyframes floatAround {
     0% {
         transform: translate(0, 0) rotate(0deg) scale(1);
     }

     25% {
         transform: translate(100px, -80px) rotate(90deg) scale(1.1);
     }

     50% {
         transform: translate(-80px, -120px) rotate(180deg) scale(0.9);
     }

     75% {
         transform: translate(-120px, 80px) rotate(270deg) scale(1.05);
     }

     100% {
         transform: translate(0, 0) rotate(360deg) scale(1);
     }
 }

 /* Hero Section with Swiper */
 .hero {
     height: 100vh;
     position: relative;
     overflow: hidden;
 }

 .hero-swiper {
     width: 100%;
     height: 100%;
 }

 .hero-slide {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     background-size: cover;
     background-position: center;
 }

 .hero-slide:nth-child(1) {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }

 .hero-slide:nth-child(2) {
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 }

 .hero-slide:nth-child(3) {
     background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 }

 .hero-slide:nth-child(4) {
     background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
 }

 .hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.3);
     z-index: 2;
 }

 .hero-content {
     position: relative;
     z-index: 3;
     text-align: center;
     color: white;
     max-width: 800px;
     padding: 0 2rem;
 }

 .hero h1 {
     font-size: 3.8rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
     opacity: 0;
     animation: slideUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 3s forwards;
     text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }

 .hero p {
     font-size: 1.4rem;
     margin-bottom: 2.5rem;
     opacity: 0;
     animation: slideUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 3.3s forwards;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }

 .cta-button {
     display: inline-block;
     padding: 1.2rem 2.5rem;
     background: rgba(255, 255, 255, 0.2);
     color: white;
     text-decoration: none;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1.1rem;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     backdrop-filter: blur(15px);
     border: 2px solid rgba(255, 255, 255, 0.3);
     opacity: 0;
     animation: slideUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 3.6s forwards;
     position: relative;
     overflow: hidden;
 }

 .cta-button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: left 0.6s ease;
 }

 .cta-button:hover::before {
     left: 100%;
 }

 .cta-button:hover {
     background: rgba(255, 255, 255, 0.3);
     transform: translateY(-5px) scale(1.05);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
 }

 /* Custom Swiper Pagination for Hero */
 .hero-swiper .swiper-pagination {
     bottom: 40px;
 }

 .hero-swiper .swiper-pagination-bullet {
     width: 14px;
     height: 14px;
     background: rgba(255, 255, 255, 0.5);
     opacity: 1;
     margin: 0 10px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
 }

 .hero-swiper .swiper-pagination-bullet::before {
     content: '';
     position: absolute;
     top: -8px;
     left: -8px;
     right: -8px;
     bottom: -8px;
     border: 2px solid transparent;
     border-radius: 50%;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .hero-swiper .swiper-pagination-bullet-active {
     background: white;
     transform: scale(1.4);
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
 }

 .hero-swiper .swiper-pagination-bullet-active::before {
     border-color: rgba(255, 255, 255, 0.6);
 }

 /* Enhanced Particles */
 .particles {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 2;
 }

 .particle {
     position: absolute;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     animation: particle-float 12s infinite linear;
     pointer-events: none;
 }

 .particle:nth-child(odd) {
     animation-direction: reverse;
     background: rgba(255, 255, 255, 0.08);
 }

 @keyframes particle-float {
     0% {
         transform: translateY(100vh) rotate(0deg) scale(0);
         opacity: 0;
     }

     10% {
         opacity: 1;
         transform: translateY(90vh) rotate(36deg) scale(1);
     }

     90% {
         opacity: 1;
         transform: translateY(10vh) rotate(324deg) scale(1);
     }

     100% {
         transform: translateY(-10vh) rotate(360deg) scale(0);
         opacity: 0;
     }
 }

 /* Section Styles */
 .section {
     padding: 6rem 0;
     max-width: 1200px;
     margin: 0 auto;
     padding-left: 2rem;
     padding-right: 2rem;
     position: relative;
 }

 .section-title {
     text-align: center;
     font-size: 2.8rem;
     font-weight: 700;
     margin-bottom: 4rem;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     position: relative;
 }

 .section-title::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 120px;
     height: 4px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 2px;
 }

 /* About Section */
 .about {
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     position: relative;
     overflow: hidden;
 }

 .about::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -50%;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
     animation: rotate 30s linear infinite;
 }

 @keyframes rotate {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .about-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
     position: relative;
     z-index: 2;
 }

 .about-text {
     font-size: 1.15rem;
     line-height: 1.8;
 }

 .about-text p {
     margin-bottom: 2rem;
     position: relative;
     padding-right: 1.5rem;
     text-align: justify;
 }

 .about-text p::before {
     content: '';
     position: absolute;
     right: 0;
     top: 0;
     width: 4px;
     height: 100%;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 2px;
 }

 .about-image {
     text-align: center;
 }

 .about-image i {
     font-size: 10rem;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: iconFloat 4s ease-in-out infinite;
     filter: drop-shadow(0 0 30px rgba(102, 126, 234, 0.4));
 }

 @keyframes iconFloat {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
     }

     50% {
         transform: translateY(-20px) rotate(5deg);
     }
 }

 /* Project Cards */
 .projects-swiper {
     padding: 2rem 0 4rem 0;
 }

a{
    text-decoration: none;
 }

 .project-card {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(20px);
     border-radius: 25px;
     padding: 2.5rem;
     border: 1px solid rgba(255, 255, 255, 0.3);
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
     height: auto;
 }

 .project-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
     transition: left 0.8s ease;
 }

 .project-card:hover::before {
     left: 100%;
 }

 .project-card:hover {
     transform: translateY(-20px) scale(1.03);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
     border-color: rgba(102, 126, 234, 0.4);
 }

 .project-icon {
     font-size: 3.5rem;
     margin-bottom: 1.5rem;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     display: inline-block;
 }

 .project-card:hover .project-icon {
     transform: scale(1.2) rotate(10deg);
     filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.6));
 }

 .project-card h3 {
     font-size: 1.6rem;
     font-weight: 600;
     margin-bottom: 1.5rem;
     color: #333;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .project-card:hover h3 {
     color: #667eea;
     transform: translateY(-3px);
 }

 .project-card p {
     color: #666;
     line-height: 1.7;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .project-card:hover p {
     color: #555;
 }

 /* Gallery Section */
 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .gallery-item {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .gallery-item:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
 }

 .gallery-item img {
     width: 100%;
     height: 250px;
     object-fit: cover;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .gallery-item:hover img {
     transform: scale(1.1);
 }

 .gallery-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
     opacity: 0;
     transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 2rem;
 }

 .gallery-item:hover .gallery-overlay {
     opacity: 1;
 }

 /* Team Section */
 .team {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     position: relative;
     overflow: hidden;
 }

 .team::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="%23ffffff08"/></svg>') repeat;
     animation: backgroundMove 25s linear infinite;
 }

 @keyframes backgroundMove {
     0% {
         transform: translate(0, 0);
     }

     100% {
         transform: translate(100px, 100px);
     }
 }

 .team-swiper {
     padding: 2rem 0 4rem 0;
 }

 .team-member {
     text-align: center;
     padding: 2.5rem;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(20px);
     border-radius: 25px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
     height: auto;
 }

 .team-member::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     transform: scale(0);
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .team-member:hover::before {
     transform: scale(1);
 }

 .team-member:hover {
     transform: translateY(-20px) scale(1.05);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
 }

 .team-avatar {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
     margin: 0 auto 1.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.2rem;
     color: white;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     box-shadow: 0 8px 25px rgba(255, 154, 158, 0.3);
 }

 .team-avatar::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: left 0.6s ease;
 }

 .team-member:hover .team-avatar::before {
     left: 100%;
 }

 .team-member:hover .team-avatar {
     transform: scale(1.15) rotate(5deg);
     box-shadow: 0 12px 35px rgba(255, 154, 158, 0.5);
 }

 .team-member h4 {
     font-size: 1.4rem;
     font-weight: 600;
     margin-bottom: 0.8rem;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .team-member:hover h4 {
     transform: translateY(-3px);
     text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }

 .team-member p {
     opacity: 0.9;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     font-size: 1.05rem;
 }

 .team-member:hover p {
     opacity: 1;
     transform: translateY(-2px);
 }

 /* Features Section */
 .features-swiper {
     padding: 2rem 0;
 }

 .feature-item {
     text-align: center;
     padding: 2.5rem;
     background: rgba(255, 255, 255, 0.08);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(10px);
     height: auto;
 }

 .feature-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
     opacity: 0;
     transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .feature-item:hover::before {
     opacity: 1;
 }

 .feature-item:hover {
     background: rgba(255, 255, 255, 0.15);
     transform: translateY(-15px) scale(1.03);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .feature-icon {
     font-size: 3rem;
     margin-bottom: 1.5rem;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     display: inline-block;
 }

 .feature-item:hover .feature-icon {
     transform: scale(1.2) rotate(10deg);
     filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.6));
 }

 .feature-item h3 {
     font-size: 1.3rem;
     font-weight: 600;
     margin-bottom: 1rem;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .feature-item:hover h3 {
     transform: translateY(-2px);
 }

 .feature-item p {
     line-height: 1.6;
     opacity: 0.9;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .feature-item:hover p {
     opacity: 1;
 }

 /* Timeline Section */
 .timeline {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     position: relative;
     overflow: hidden;
 }

 .timeline::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="%23ffffff08"/></svg>') repeat;
     animation: backgroundMove 25s linear infinite;
 }

 .timeline-swiper {
     padding: 2rem 0 4rem 0;
 }

 .timeline-item {
     text-align: center;
     padding: 3rem 2rem;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(20px);
     border-radius: 25px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
     height: auto;
 }

 .timeline-item:hover {
     transform: translateY(-15px) scale(1.03);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
 }

 .timeline-year {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
     color: #fff;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }

 .timeline-title {
     font-size: 1.4rem;
     font-weight: 600;
     margin-bottom: 1rem;
 }

 .timeline-description {
     font-size: 1rem;
     line-height: 1.6;
     opacity: 0.9;
 }

 /* Testimonials Slider */
 .testimonials {
     background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
     padding: 6rem 0;
     position: relative;
     overflow: hidden;
 }

 .testimonials::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 236, 210, 0.3) 0%, transparent 70%);
     animation: rotate 40s linear infinite;
 }

 .testimonials-swiper {
     max-width: 900px;
     margin: 3rem auto 0;
     padding: 2rem 0;
 }

 .testimonial-slide {
     text-align: center;
     padding: 2rem;
 }

 .testimonial-content {
     background: rgba(255, 255, 255, 0.95);
     padding: 3rem;
     border-radius: 25px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
     margin-bottom: 1.5rem;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(20px);
 }

 .testimonial-content::before {
     content: '';
     position: absolute;
     top: -3px;
     left: -3px;
     right: -3px;
     bottom: -3px;
     background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
     border-radius: 28px;
     z-index: -1;
     opacity: 0;
     transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .testimonial-content:hover::before {
     opacity: 1;
 }

 .testimonial-content:hover {
     transform: translateY(-8px) scale(1.02);
     box-shadow: 0 30px 70px rgba(0, 0, 0, 0.2);
 }

 .testimonial-text {
     font-size: 1.2rem;
     font-style: italic;
     margin-bottom: 2rem;
     color: #333;
     position: relative;
     line-height: 1.7;
 }

 .testimonial-text::before,
 .testimonial-text::after {
     content: '"';
     font-size: 2.5rem;
     color: #667eea;
     font-weight: bold;
     opacity: 0.7;
 }

 .testimonial-author {
     font-weight: 600;
     color: #667eea;
     margin-bottom: 0.5rem;
     font-size: 1.1rem;
 }

 .testimonial-company {
     color: #666;
     font-size: 0.95rem;
 }

 /* Custom Swiper Navigation */
 .swiper-button-next,
 .swiper-button-prev {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     margin-top: -25px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
 }

 .swiper-button-next::after,
 .swiper-button-prev::after {
     font-size: 18px;
     font-weight: bold;
 }

 .swiper-button-next:hover,
 .swiper-button-prev:hover {
     transform: scale(1.1);
     box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
 }

 .swiper-button-disabled {
     opacity: 0.5;
 }

 /* Custom Swiper Pagination */
 .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background: rgba(102, 126, 234, 0.3);
     opacity: 1;
     margin: 0 8px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .swiper-pagination-bullet-active {
     background: #667eea;
     transform: scale(1.3);
     box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
 }

 /* Contact Section */
 .contact {
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
     color: white;
     position: relative;
     overflow: hidden;
 }

 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,0 100,50 50,100 0,50" fill="%23ffffff06"/></svg>') repeat;
     animation: backgroundMove 30s linear infinite reverse;
 }

 .contact-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     position: relative;
     z-index: 2;
 }

 .contact-form {
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(20px);
     padding: 3rem;
     border-radius: 25px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 }

 .contact-form:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-8px);
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
 }

 .form-group {
     margin-bottom: 2rem;
     position: relative;
 }

 .form-group label {
     display: block;
     margin-bottom: 0.8rem;
     font-weight: 500;
     font-size: 1.05rem;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .form-group input,
 .form-group textarea {
     width: 100%;
     padding: 1.2rem;
     border: none;
     border-radius: 15px;
     background: rgba(255, 255, 255, 0.2);
     color: white;
     font-family: 'Aria', sans-serif;
     direction: rtl;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     font-size: 1rem;
     backdrop-filter: blur(10px);
 }

 .form-group input:focus,
 .form-group textarea:focus {
     outline: none;
     background: rgba(255, 255, 255, 0.3);
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }

 .form-group input::placeholder,
 .form-group textarea::placeholder {
     color: rgba(255, 255, 255, 0.7);
 }

 .submit-btn {
     width: 100%;
     padding: 1.3rem;
     background: rgba(255, 255, 255, 0.2);
     color: white;
     border: none;
     border-radius: 15px;
     font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     font-family: 'Aria', sans-serif;
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(10px);
 }

 .submit-btn::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     transform: translate(-50%, -50%);
 }

 .submit-btn:hover::before {
     width: 400px;
     height: 400px;
 }

 .submit-btn:hover {
     background: rgba(255, 255, 255, 0.3);
     transform: translateY(-5px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
 }

 .contact-info h3 {
     font-size: 1.6rem;
     margin-bottom: 2rem;
     font-weight: 600;
 }

 .contact-item {
     display: flex;
     align-items: center;
     margin-bottom: 1.5rem;
     gap: 1.2rem;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     padding: 1rem;
     border-radius: 15px;
 }

 .contact-item:hover {
     background: rgba(255, 255, 255, 0.15);
     transform: translateX(-8px);
 }

 .contact-item i {
     font-size: 1.3rem;
     width: 35px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .contact-item:hover i {
     transform: scale(1.2) rotate(5deg);
     color: #fff;
 }

 /* Live Chat Widget */
 .chat-widget {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.5rem;
     cursor: pointer;
     z-index: 1000;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
     animation: chatPulse 2s infinite;
 }

 .chat-widget:hover {
     transform: scale(1.1);
     box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
 }

 @keyframes chatPulse {

     0%,
     100% {
         box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
     }

     50% {
         box-shadow: 0 4px 20px rgba(102, 126, 234, 0.6), 0 0 0 10px rgba(102, 126, 234, 0.1);
     }
 }

 /* Footer */
 .footer {
     background: #1a1a1a;
     color: white;
     text-align: center;
     padding: 4rem 0;
     position: relative;
     overflow: hidden;
 }

 .footer::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, #667eea, #764ba2, #f093fb, #f5576c, transparent);
     animation: gradientMove 4s ease-in-out infinite;
 }

 @keyframes gradientMove {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 .footer-content {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2rem;
     position: relative;
     z-index: 2;
 }

 .social-links {
     margin: 2.5rem 0;
 }

 .social-links a {
     display: inline-block;
     margin: 0 1.2rem;
     font-size: 1.6rem;
     color: white;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     padding: 0.8rem;
     border-radius: 50%;
     position: relative;
     overflow: hidden;
 }

 .social-links a::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, #667eea, #764ba2);
     border-radius: 50%;
     opacity: 0;
     transform: scale(0);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: -1;
 }

 .social-links a:hover::before {
     opacity: 1;
     transform: scale(1);
 }

 .social-links a:hover {
     color: white;
     transform: translateY(-8px) rotate(10deg) scale(1.1);
 }

 /* Enhanced Animations */
 @keyframes slideDown {
     from {
         transform: translateY(-100%);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(40px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.05);
         opacity: 0.8;
     }
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .nav-links {
         display: none;
         position: absolute;
         top: 100%;
         left: 0;
         width: 100%;
         background: rgba(255, 255, 255, 0.98);
         backdrop-filter: blur(20px);
         flex-direction: column;
         padding: 1.5rem 0;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
         border-radius: 0 0 20px 20px;
     }

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

     .mobile-menu {
         display: flex;
     }

     .hero h1 {
         font-size: 2.8rem;
     }

     .hero p {
         font-size: 1.2rem;
     }

     .about-content,
     .contact-content {
         grid-template-columns: 1fr;
         gap: 3rem;
     }

     .section {
         padding: 4rem 0;
         padding-left: 1.5rem;
         padding-right: 1.5rem;
     }

     .section-title {
         font-size: 2.2rem;
     }

     .floating-shape {
         display: none;
     }

     .project-card,
     .team-member,
     .feature-item {
         padding: 2rem;
     }

     .testimonial-content {
         padding: 2rem;
     }

     .contact-form {
         padding: 2rem;
     }

     .swiper-button-next,
     .swiper-button-prev {
         width: 40px;
         height: 40px;
         margin-top: -20px;
     }

     .swiper-button-next::after,
     .swiper-button-prev::after {
         font-size: 14px;
     }

     .gallery-grid {
         grid-template-columns: 1fr;
     }

     .chat-widget {
         width: 50px;
         height: 50px;
         font-size: 1.2rem;
         bottom: 20px;
         right: 20px;
     }
 }

 @media (max-width: 480px) {
     .hero h1 {
         font-size: 2.2rem;
     }

     .hero p {
         font-size: 1.1rem;
     }

     .nav {
         padding: 0 1rem;
     }

     .section-title {
         font-size: 1.8rem;
     }

     .about-image i {
         font-size: 6rem;
     }

     .project-icon,
     .feature-icon {
         font-size: 2.5rem;
     }

     .team-avatar {
         width: 80px;
         height: 80px;
         font-size: 1.8rem;
     }
 }

 /* Ripple Effect */
 .ripple {
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.6);
     transform: scale(0);
     animation: ripple-animation 0.6s linear;
     pointer-events: none;
 }

 @keyframes ripple-animation {
     to {
         transform: scale(4);
         opacity: 0;
     }
 }