/* ============================================
   Mubreq - Modern Professional Design
   ============================================ */

 :root {
     --primary-color: #1a56db;
     --primary-dark: #1e40af;
     --secondary-color: #0ea5e9;
     --accent-color: #f59e0b;
     --dark-color: #1e293b;
     --light-color: #f8fafc;
     --text-color: #334155;
     --text-light: #64748b;
     --border-color: #e2e8f0;
     --gradient-primary: linear-gradient(135deg, #1a56db 0%, #0ea5e9 100%);
     --gradient-dark: linear-gradient(135deg, #201c91ea 0%, #2B27C4 100%);
     --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
     --transition: all 0.3s ease;
 }

 /* ============================================
   Reset & Base Styles
   ============================================ */

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

 body {
     font-family: 'Alexandria', sans-serif;
     color: var(--text-color);
     background: var(--light-color);
     overflow-x: hidden;
     line-height: 1.6;
 }

 html {
     scroll-behavior: smooth;
 }

 a {
     text-decoration: none;
     transition: var(--transition);
 }

 img {
     max-width: 100%;
     height: auto;
 }

 section {
     position: relative;
 }

 /* ============================================
   Animated Background Particles
   ============================================ */

 .particles-background {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
     overflow: hidden;
 }

 .particles-background::before,
 .particles-background::after {
     content: '';
     position: absolute;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     filter: blur(100px);
     opacity: 0.3;
     animation: float-particle 20s ease-in-out infinite;
 }

 .particles-background::before {
     background: var(--primary-color);
     top: -200px;
     right: -200px;
 }

 .particles-background::after {
     background: var(--secondary-color);
     bottom: -200px;
     left: -200px;
     animation-delay: -10s;
 }

 @keyframes float-particle {

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

     33% {
         transform: translate(100px, -100px) scale(1.1);
     }

     66% {
         transform: translate(-100px, 100px) scale(0.9);
     }
 }

 /* ============================================
   Modern Navbar
   ============================================ */

 .modern-navbar {
     padding: 1rem 0;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(20px);
     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .modern-navbar.scrolled {
     padding: 0.7rem 0;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 }

 .navbar-brand {
     transition: transform 0.3s ease;
 }

 .navbar-brand:hover {
     transform: scale(1.05);
 }

 .navbar-brand .logo {
     height: 50px;
     transition: var(--transition);
 }

 .modern-navbar.scrolled .logo {
     height: 45px;
 }

 .navbar-nav .nav-link {
     color: var(--text-color);
     font-weight: 600;
     font-size: 1rem;
     padding: 0.5rem 1.2rem !important;
     margin: 0 0.3rem;
     position: relative;
     transition: var(--transition);
 }

 .navbar-nav .nav-link::before {
     content: '';
     position: absolute;
     bottom: 0;
     right: 50%;
     width: 0;
     height: 3px;
     background: var(--gradient-primary);
     border-radius: 2px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .navbar-nav .nav-link:hover::before,
 .navbar-nav .nav-link.active::before {
     width: 100%;
     right: 0;
 }

 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-link.active {
     color: var(--primary-color);
 }

 /* ============================================
   Buttons
   ============================================ */
 .btn-primary-custom {
     background: var(--gradient-primary);
     color: white;
     border: none;
     padding: 0.8rem 2rem;
     border-radius: 50px;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;

     /* محاذاة لليمين */
     margin-left: auto;

     position: relative;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 4px 15px rgba(26, 86, 219, 0.3);
 }

 .btn-primary-custom::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.5s;
 }

 .btn-primary-custom:hover::before {
     left: 100%;
 }

 .btn-primary-custom:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(26, 86, 219, 0.4);
     color: white;
 }


 .pulse-btn {
     animation: pulse-animation 2s infinite;
 }

 @keyframes pulse-animation {

     0%,
     100% {
         box-shadow: 0 4px 15px rgba(26, 86, 219, 0.3);
     }

     50% {
         box-shadow: 0 4px 25px rgba(26, 86, 219, 0.5);
     }
 }

 .btn-outline-light {
     border: 2px solid rgba(255, 255, 255, 0.5);
     color: white;
     background: transparent;
     backdrop-filter: blur(10px);
 }

 .btn-outline-light:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: white;
     color: white;
     transform: translateY(-2px);
 }

 .hover-lift {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .hover-lift:hover {
     transform: translateY(-5px);
 }

 /* ============================================
   Hero Section
   ============================================ */

 .hero-section {
     position: relative;
     overflow: visible;
     padding: 110px 20px 40px;
     background: #ffffff;
 }

 .hero-overlay {
     display: none;
 }

 .carousel,
 .carousel-inner,
 .carousel-item {
     height: auto;
     min-height: 60vh;
 }

 .carousel {
     border-radius: 40px;
     overflow: hidden;
     box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
 }

 .carousel-slide {
     position: relative;
     height: 100%;
     min-height: 85vh;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,133.3C672,139,768,181,864,181.3C960,181,1056,139,1152,128C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') bottom center no-repeat;
     background-size: cover;
     display: flex;
     align-items: center;
 }

 .carousel-slide::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(26, 86, 219, 0.95) 0%, rgba(14, 165, 233, 0.9) 100%);
     z-index: 1;
 }

 .hero-content {
     position: relative;
     z-index: 10;
     text-align: right;
 }

 .hero-tag {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.6rem 1.2rem;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     border-radius: 50px;
     color: white;
     font-size: 0.9rem;
     font-weight: 500;
     margin-bottom: 1.5rem;
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .hero-title {
     font-size: 4.5rem;
     font-weight: 900;
     color: white;
     line-height: 1.2;
     margin-bottom: 1rem;
     text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 }

 .gradient-text {
     background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     display: inline-block;
     line-height: 1.4;
     margin-top: -100px;
 }

 .hero-tagline {
     font-size: 1.5rem;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.95);
     margin-bottom: 1rem;
 }

 .hero-description {
     font-size: 1.2rem;
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.8;
     margin-bottom: 2rem;
     max-width: 600px;
     margin-left: auto;
 }

 .hero-buttons {
     display: flex;
     gap: 1rem;
     justify-content: flex-end;
     flex-wrap: wrap;
 }

 /* Hero Stats */
 .hero-stats {
     display: flex;
     gap: 3rem;
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
 }

 .stat-item {
     text-align: center;
 }

 .stat-number {
     font-size: 3rem;
     font-weight: 900;
     color: white;
     line-height: 1;
     margin-bottom: 0.5rem;
 }

 .stat-label {
     font-size: 0.95rem;
     color: rgba(255, 255, 255, 0.8);
     font-weight: 500;
 }


 .floating-elements {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 2;
     pointer-events: none;
 }

 .tech-icon {
     position: absolute;
     left: var(--x);
     top: var(--y);
     font-size: 3rem;
     color: rgba(255, 255, 255, 0.179);
     animation: float-tech 6s ease-in-out infinite;
     animation-delay: var(--delay);
 }

 @keyframes float-tech {

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

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

 /* Hero Illustrations */
 .hero-illustration {
     position: relative;
     z-index: 10;
 }

 .code-window {
     background: rgba(30, 41, 59, 0.95);
     border-radius: 15px;
     padding: 1.5rem;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
     backdrop-filter: blur(10px);
     animation: code-glow 3s ease-in-out infinite;
 }

 @keyframes code-glow {

     0%,
     100% {
         box-shadow: 0 20px 60px rgba(26, 86, 219, 0.4);
     }

     50% {
         box-shadow: 0 25px 70px rgba(14, 165, 233, 0.5);
     }
 }

 .window-header {
     display: flex;
     gap: 0.5rem;
     margin-bottom: 1rem;
 }

 .dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
 }

 .dot.red {
     background: #ff5f56;
 }

 .dot.yellow {
     background: #ffbd2e;
     animation-delay: 0.3s;
 }

 .dot.green {
     background: #27c93f;
     animation-delay: 0.6s;
 }

 @keyframes pulse-dot {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.5;
     }
 }

 .code-content {
     font-family: 'Courier New', monospace;
     font-size: 1rem;
     line-height: 1.8;
 }

 .code-line {
     opacity: 0;
     animation: type-line 0.5s forwards;
 }

 .code-line:nth-child(1) {
     animation-delay: 0.5s;
 }

 .code-line:nth-child(2) {
     animation-delay: 1s;
 }

 .code-line:nth-child(3) {
     animation-delay: 1.5s;
 }

 .code-line:nth-child(4) {
     animation-delay: 2s;
 }

 @keyframes type-line {
     to {
         opacity: 1;
     }
 }

 .keyword {
     color: #c678dd;
 }

 .variable {
     color: #e06c75;
 }

 .string {
     color: #98c379;
 }

 .function {
     color: #61afef;
 }

 .method {
     color: #56b6c2;
 }

 .indent {
     padding-right: 2rem;
 }

 /* Tech Globe */
 .tech-globe {
     position: relative;
     width: 300px;
     height: 300px;
     margin: 0 auto;
 }

 .globe-ring {
     position: absolute;
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     animation: rotate-ring 10s linear infinite;
 }

 .ring-1 {
     width: 100%;
     height: 100%;
     animation-duration: 8s;
 }

 .ring-2 {
     width: 80%;
     height: 80%;
     top: 10%;
     left: 10%;
     animation-duration: 12s;
     animation-direction: reverse;
 }

 .ring-3 {
     width: 60%;
     height: 60%;
     top: 20%;
     left: 20%;
     animation-duration: 15s;
 }

 @keyframes rotate-ring {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .globe-core {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 120px;
     height: 120px;
     background: var(--gradient-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 4rem;
     color: white;
     animation: pulse-core 2s ease-in-out infinite;
     box-shadow: 0 0 50px rgba(26, 86, 219, 0.5);
 }

 @keyframes pulse-core {

     0%,
     100% {
         transform: translate(-50%, -50%) scale(1);
     }

     50% {
         transform: translate(-50%, -50%) scale(1.1);
     }
 }

 /* Partnership Visual */
 .partnership-visual {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 3rem;
 }

 .circle-connection {
     position: relative;
     width: 300px;
     height: 150px;
 }

 .circle {
     position: absolute;
     width: 100px;
     height: 100px;
     background: var(--gradient-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.5rem;
     color: white;
     box-shadow: 0 10px 40px rgba(26, 86, 219, 0.4);
     animation: bounce-circle 2s ease-in-out infinite;
 }

 .circle.c1 {
     top: 0;
     right: 0;
 }

 .circle.c2 {
     bottom: 0;
     left: 0;
     animation-delay: 0.5s;
 }

 @keyframes bounce-circle {

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

     50% {
         transform: translateY(-15px);
     }
 }

 .connection-line {
     position: absolute;
     width: 140px;
     height: 3px;
     background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(-30deg);
     animation: pulse-line 2s ease-in-out infinite;
 }

 @keyframes pulse-line {

     0%,
     100% {
         opacity: 0.5;
         box-shadow: 0 0 10px rgba(26, 86, 219, 0.3);
     }

     50% {
         opacity: 1;
         box-shadow: 0 0 20px rgba(26, 86, 219, 0.6);
     }
 }

 /* Carousel Controls */
 .modern-control {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
 }


 .modern-indicators button {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.5);
     border: none;
     margin: 0 6px;
     transition: var(--transition);
 }

 .modern-indicators button.active {
     width: 40px;
     border-radius: 6px;
     background: white;
 }

 /* Scroll Indicator */
 .scroll-indicator {
     position: absolute;
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
     animation: bounce-indicator 2s infinite;
 }

 @keyframes bounce-indicator {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateX(-50%) translateY(0);
     }

     40% {
         transform: translateX(-50%) translateY(-10px);
     }

     60% {
         transform: translateX(-50%) translateY(-5px);
     }
 }

 .mouse {
     width: 26px;
     height: 40px;
     border: 2px solid rgba(255, 255, 255, 0.5);
     border-radius: 15px;
     position: relative;
     margin: 0 auto 8px;
 }

 .wheel {
     width: 4px;
     height: 8px;
     background: white;
     border-radius: 2px;
     position: absolute;
     top: 8px;
     left: 50%;
     transform: translateX(-50%);
     animation: scroll-wheel 1.5s infinite;
 }

 @keyframes scroll-wheel {
     0% {
         opacity: 1;
         top: 8px;
     }

     100% {
         opacity: 0;
         top: 24px;
     }
 }

 .arrow {
     text-align: center;
 }

 .arrow span {
     display: block;
     width: 10px;
     height: 10px;
     border-bottom: 2px solid white;
     border-left: 2px solid white;
     transform: rotate(-45deg);
     margin: -5px auto;
     animation: scroll-arrow 1.5s infinite;
 }

 .arrow span:nth-child(2) {
     animation-delay: 0.2s;
 }

 @keyframes scroll-arrow {
     0% {
         opacity: 0;
     }

     50% {
         opacity: 1;
     }

     100% {
         opacity: 0;
     }
 }

 /* ============================================
   Animations
   ============================================ */

 .fade-in-up {
     opacity: 0;
     animation: fadeInUp 0.8s ease-out forwards;
 }

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

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

 .fade-in-right {
     opacity: 0;
     animation: fadeInRight 1s ease-out forwards;
 }

 @keyframes fadeInRight {
     from {
         opacity: 0;
         transform: translateX(-40px);
     }

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

 .reveal-animation {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .reveal-animation.revealed {
     opacity: 1;
     transform: translateY(0);
 }

 /* ============================================
   Section Utilities
   ============================================ */

 .section-padding {
     padding: 100px 0;
 }

 .section-header {
     text-align: center;
     margin-bottom: 3rem;
 }

 .section-tag {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 1.2rem;
     background: linear-gradient(135deg, rgba(26, 86, 219, 0.1), rgba(14, 165, 233, 0.1));
     border-radius: 50px;
     color: var(--primary-color);
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 1rem;
     border: 1px solid rgba(26, 86, 219, 0.2);
 }

 .section-tag.light {
     background: rgba(255, 255, 255, 0.15);
     border-color: rgba(255, 255, 255, 0.2);
     color: white;
 }

 .section-title {
     font-size: 3rem;
     font-weight: 900;
     color: var(--dark-color);
     margin-bottom: 1rem;
     line-height: 1.2;
 }

 .section-subtitle {
     font-size: 1.2rem;
     color: var(--text-light);
     max-width: 700px;
     margin: 0 auto;
 }

 /* ============================================
   About Section
   ============================================ */

 /* .about-section {
     background: white;
 } */

 .about-image-wrapper {
     position: relative;
     text-align: center;
 }

 .image-decorations {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     z-index: -1;
 }

 .decoration-circle {
     position: absolute;
     width: 400px;
     height: 400px;
     border: 3px dashed var(--primary-color);
     border-radius: 50%;
     top: -50px;
     right: -50px;
     opacity: 0.2;
     animation: rotate-decoration 20s linear infinite;
 }

 @keyframes rotate-decoration {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .decoration-dots {
     position: absolute;
     width: 150px;
     height: 150px;
     bottom: -30px;
     left: -30px;
     background-image: radial-gradient(circle, var(--secondary-color) 2px, transparent 2px);
     background-size: 20px 20px;
     opacity: 0.3;
 }

 .about-image-wrapper img {
     position: relative;
     z-index: 1;
     transition: transform 0.5s ease;
     max-width: 85%;
 }

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

 .floating-badge {
     position: absolute;
     bottom: 30px;
     left: 30px;
     background: var(--gradient-primary);
     color: white;
     padding: 1rem 1.5rem;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(26, 86, 219, 0.4);
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-weight: 700;
     animation: float-badge 3s ease-in-out infinite;
 }

 @keyframes float-badge {

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

     50% {
         transform: translateY(-10px);
     }
 }

 .about-content .lead {
     font-size: 1rem;
     font-weight: 400;
     color: var(--text-color);
     margin-bottom: 1.5rem;
     text-align: justify;
     direction: rtl;
 }


 .name-meaning-box {
     background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
     border-radius: 20px;
     padding: 2rem;
     margin-top: 2rem;
     display: flex;
     gap: 1.5rem;
     border: 2px solid rgba(26, 86, 219, 0.1);
     transition: all 0.3s ease;
 }

 .name-meaning-box:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(26, 86, 219, 0.15);
 }

 .meaning-icon {
     width: 60px;
     height: 60px;
     background: var(--gradient-primary);
     border-radius: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     color: white;
     flex-shrink: 0;
 }

 .meaning-content h4 {
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--dark-color);
     margin-bottom: 0.8rem;
 }

 .meaning-content h4 span {
     color: var(--primary-color);
 }

 .meaning-content p {
     color: var(--text-color);
     line-height: 1.8;
     margin: 0;
 }

 /* Vision & Mission Cards - تصميم مبتكر */
 .vision-mission-card {
     position: relative;
     background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
     border-radius: 50px 10px 50px 10px;
     padding: 3rem 2rem;
     box-shadow: 0 15px 50px rgba(26, 86, 219, 0.12);
     overflow: visible;
     transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     border: none;
     transform: perspective(1000px) rotateY(0deg);
 }

 /* خط زخرفي متموج */
 .vision-mission-card::before {
     content: '';
     position: absolute;
     top: -5px;
     left: 50%;
     transform: translateX(-50%);
     width: 80%;
     height: 4px;
     background: var(--gradient-primary);
     border-radius: 10px;
     box-shadow: 0 0 20px rgba(26, 86, 219, 0.5);
 }

 /* دائرة زخرفية */
 .vision-mission-card::after {
     content: '';
     position: absolute;
     top: -15px;
     right: 30px;
     width: 30px;
     height: 30px;
     background: var(--gradient-primary);
     border-radius: 50%;
     box-shadow: 0 5px 15px rgba(26, 86, 219, 0.4);
     animation: float-badge 3s ease-in-out infinite;
 }

 .vision-mission-card:hover {
     transform: perspective(1000px) rotateY(5deg) translateY(-15px);
     box-shadow: 0 25px 70px rgba(26, 86, 219, 0.25);
     border-radius: 10px 50px 10px 50px;
 }

 /* أيقونة مبتكرة - شكل معين */
 .vision-mission-card .card-icon {
     width: 90px;
     height: 90px;
     background: var(--gradient-primary);
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.8rem;
     color: white;
     margin: 0 auto 2rem;
     transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     position: relative;
     transform: rotate(45deg);
     box-shadow: 0 10px 30px rgba(26, 86, 219, 0.4);
 }

 .vision-mission-card .card-icon i {
     transform: rotate(-45deg);
 }

 .vision-mission-card:hover .card-icon {
     transform: rotate(45deg) scale(1.15);
     box-shadow: 0 15px 40px rgba(26, 86, 219, 0.6);
     animation: pulse-rotate 1s ease-in-out;
 }

 @keyframes pulse-rotate {

     0%,
     100% {
         transform: rotate(45deg) scale(1.15);
     }

     50% {
         transform: rotate(45deg) scale(1.25);
     }
 }

 /* النصوص */
 .vision-mission-card h3 {
     font-size: 2rem;
     font-weight: 900;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 1.2rem;
     text-align: center;
     position: relative;
 }

 .vision-mission-card h3::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background: var(--gradient-primary);
     border-radius: 10px;
 }

 .vision-mission-card p {
     color: var(--text-color);
     line-height: 2;
     margin: 0;
     text-align: center;
     font-size: 1.05rem;
 }

 /* زخرفة متحركة */
 .card-decoration {
     position: absolute;
     bottom: -30px;
     left: -30px;
     width: 100px;
     height: 100px;
     background: linear-gradient(135deg, rgba(26, 86, 219, 0.1), rgba(14, 165, 233, 0.1));
     border-radius: 50%;
     opacity: 0;
     transition: all 0.6s ease;
     filter: blur(20px);
 }

 .vision-mission-card:hover .card-decoration {
     opacity: 1;
     transform: scale(2) translate(20px, -20px);
 }

 /* تأثير الضوء المتحرك */
 .vision-mission-card {
     background:
         linear-gradient(135deg, #ffffff 0%, #f8fafc 100%),
         radial-gradient(circle at 50% 0%, rgba(26, 86, 219, 0.05), transparent 70%);
 }

 /* شكل مختلف للبطاقة الثانية */
 .vision-mission-card:nth-child(2) {
     border-radius: 10px 50px 10px 50px;
 }

 .vision-mission-card:nth-child(2):hover {
     border-radius: 50px 10px 50px 10px;
 }

 .vision-mission-card:nth-child(2)::after {
     left: 30px;
     right: auto;
 }

 /* إضافة خطوط زخرفية متحركة */
 .vision-mission-card:nth-child(1) .card-icon {
     background: linear-gradient(135deg, #1a56db 0%, #8b5cf6 100%);
 }

 .vision-mission-card:nth-child(2) .card-icon {
     background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
 }

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

 .value-item {
     text-align: center;
     padding: 2.5rem 2rem;
     background: white;
     border-radius: 20px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border: 2px solid transparent;
 }

 .value-item:hover {
     border-color: var(--primary-color);
     box-shadow: 0 15px 50px rgba(26, 86, 219, 0.15);
 }

 .value-item .value-icon {
     width: 70px;
     height: 70px;
     background: linear-gradient(135deg, rgba(26, 86, 219, 0.1), rgba(14, 165, 233, 0.1));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     font-size: 2rem;
     color: var(--primary-color);
     transition: all 0.3s ease;
 }

 .value-item:hover .value-icon {
     background: var(--gradient-primary);
     color: white;
     transform: rotateY(360deg);
 }

 .value-item h5 {
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--dark-color);
     margin-bottom: 0.8rem;
 }

 .value-item p {
     color: var(--text-light);
     margin: 0;
     line-height: 1.6;
 }

 /* ============================================
   Services Section
   ============================================ */

 .services-section {
     background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
 }

 .modern-card {
     background: white;
     border-radius: 25px;
     padding: 2.5rem;
     height: 100%;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border: 2px solid transparent;
     position: relative;
     overflow: hidden;
 }

 .modern-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(26, 86, 219, 0.05), transparent);
     transition: left 0.6s;
 }

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

 .modern-card:hover {
     border-color: var(--primary-color);
     box-shadow: 0 20px 60px rgba(26, 86, 219, 0.15);
     transform: translateY(-5px);
 }

 .service-icon-wrapper {
     position: relative;
     width: 90px;
     height: 90px;
     margin: 0 auto 2rem;
 }

 .icon-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(26, 86, 219, 0.1), rgba(14, 165, 233, 0.1));
     border-radius: 20px;
     transition: all 0.4s ease;
 }

 .modern-card:hover .icon-bg {
     background: var(--gradient-primary);
     transform: rotate(5deg) scale(1.05);
 }

 .service-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 3rem;
     color: var(--primary-color);
     transition: all 0.4s ease;
 }

 .modern-card:hover .service-icon {
     color: white;
     transform: translate(-50%, -50%) scale(1.05);
 }

 .service-card h4 {
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--dark-color);
     margin-bottom: 1rem;
     text-align: center;
 }

 .service-card p {
     color: var(--text-color);
     line-height: 1.8;
     margin-bottom: 1.5rem;
     text-align: center;
 }

 .features-list {
     list-style: none;
     padding: 0;
     margin: 0 0 2rem 0;
 }

 .features-list li {
     padding: 0.7rem 0;
     color: var(--text-color);
     display: flex;
     align-items: center;
     gap: 0.8rem;
     font-size: 0.95rem;
 }

 .features-list i {
     color: var(--primary-color);
     font-size: 1.1rem;
     flex-shrink: 0;
 }

 .service-link {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--primary-color);
     font-weight: 700;
     padding: 0.8rem 1.5rem;
     background: linear-gradient(135deg, rgba(26, 86, 219, 0.1), rgba(14, 165, 233, 0.1));
     border-radius: 50px;
     transition: all 0.3s ease;
     margin-top: auto;
 }

 .service-link:hover {
     background: var(--gradient-primary);
     color: white;
     transform: translateX(-5px);
 }

 /* ============================================
   Why Us Section
   ============================================ */

 .why-us-section {
     background: var(--gradient-dark);
     position: relative;
     overflow: hidden;
 }

 .section-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.03" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,133.3C672,139,768,181,864,181.3C960,181,1056,139,1152,128C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
     opacity: 0.5;
 }

 .modern-why-card {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(20px);
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 25px;
     padding: 2.5rem;
     text-align: center;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 .modern-why-card:hover {
     background: rgba(255, 255, 255, 0.15);
     border-color: rgba(255, 255, 255, 0.4);
     transform: translateY(-10px);
 }

 .why-icon-wrapper {
     width: 80px;
     height: 80px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     font-size: 2.5rem;
     color: white;
     transition: all 0.4s ease;
 }

 .modern-why-card:hover .why-icon-wrapper {
     background: white;
     color: var(--primary-color);
     transform: scale(1.1) rotate(10deg);
 }

 .modern-why-card h5 {
     font-size: 1.3rem;
     font-weight: 700;
     color: white;
     margin-bottom: 1rem;
 }

 .modern-why-card p {
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.8;
     margin: 0;
 }

 .card-glow {
     position: absolute;
     bottom: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     opacity: 0;
     transition: opacity 0.4s ease;
 }

 .modern-why-card:hover .card-glow {
     opacity: 1;
 }

 /* ============================================
   Workflow Section
   ============================================ */

 .workflow-section {
     background: white;
 }

 .workflow-timeline {
     position: relative;
     max-width: 900px;
     margin: 0 auto;
 }

 .timeline-line-modern {
     position: absolute;
     top: 0;
     right: 50%;
     width: 3px;
     height: 100%;
     background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
     transform: translateX(50%);
 }

 .workflow-step {
     position: relative;
     display: flex;
     align-items: center;
     gap: 3rem;
     margin-bottom: 4rem;
 }

 .workflow-step:nth-child(even) {
     flex-direction: row-reverse;
 }

 .step-number {
     width: 80px;
     height: 80px;
     background: var(--gradient-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     font-weight: 900;
     color: white;
     flex-shrink: 0;
     box-shadow: 0 10px 30px rgba(26, 86, 219, 0.3);
     position: relative;
     z-index: 2;
 }

 .step-content-modern {
     flex: 1;
     background: white;
     border-radius: 20px;
     padding: 2rem;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     border: 2px solid transparent;
     transition: all 0.4s ease;
     display: flex;
     gap: 1.5rem;
     align-items: flex-start;
 }

 .workflow-step:hover .step-content-modern {
     border-color: var(--primary-color);
     box-shadow: 0 15px 50px rgba(26, 86, 219, 0.15);
     transform: translateX(-10px);
 }

 .workflow-step:nth-child(even):hover .step-content-modern {
     transform: translateX(10px);
 }

 .step-icon {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, rgba(26, 86, 219, 0.1), rgba(14, 165, 233, 0.1));
     border-radius: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     color: var(--primary-color);
     flex-shrink: 0;
     transition: all 0.3s ease;
 }

 .workflow-step:hover .step-icon {
     background: var(--gradient-primary);
     color: white;
     transform: scale(1.1);
 }

 .step-content-modern h4 {
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--dark-color);
     margin-bottom: 0.5rem;
 }

 .step-content-modern p {
     color: var(--text-color);
     margin: 0;
     line-height: 1.6;
 }



 /* ============================================
   Contact Section
   ============================================ */

 .contact-section {
     background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
 }

 .contact-form-wrapper {
     background: white;
     border-radius: 25px;
     padding: 3rem;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
 }

 .contact-form-wrapper h3 {
     font-size: 2rem;
     font-weight: 800;
     color: var(--dark-color);
 }

 .modern-input {
     border: 2px solid var(--border-color);
     border-radius: 15px;
     padding: 1rem 1.5rem;
     font-size: 1rem;
     transition: all 0.3s ease;
     background: white;
 }

 .modern-input:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.1);
     outline: none;
 }

 .form-floating>.modern-input {
     padding: 1.625rem 1.5rem 0.625rem;
 }

 .form-floating>label {
     padding: 1rem 1.5rem;
 }

 .modern-alert {
     border-radius: 15px;
     padding: 1.5rem;
     border: none;
     display: flex;
     align-items: center;
     gap: 1rem;
     animation: slideInDown 0.5s ease;
 }

 @keyframes slideInDown {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

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

 .contact-info-wrapper {
     background: var(--gradient-dark);
     border-radius: 25px;
     padding: 3rem;
     color: white;
     height: 100%;
 }

 .contact-info-wrapper h3 {
     color: white;
     font-weight: 800;
 }

 .contact-info-list {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
 }

 .contact-info-item {
     display: flex;
     gap: 1.5rem;
     align-items: flex-start;
     padding: 1.5rem;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 15px;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     transition: all 0.3s ease;
 }

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

 .info-icon {
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: white;
     flex-shrink: 0;
 }

 .info-content h5 {
     font-size: 1.1rem;
     font-weight: 700;
     color: white;
     margin-bottom: 0.5rem;
 }

 .info-content a,
 .info-content p {
     color: rgba(255, 255, 255, 0.8);
     margin: 0;
 }

 .info-content a:hover {
     color: white;
 }

 .social-links-modern {
     display: flex;
     gap: 1rem;
 }

 .social-link {
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.15);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.5rem;
     transition: all 0.3s ease;
     border: 2px solid rgba(255, 255, 255, 0.2);
 }

 .social-link:hover {
     background: white;
     color: var(--primary-color);
     transform: translateY(-5px);
 }

 /* ============================================
   Footer
   ============================================ */

 .modern-footer {
     background: var(--dark-color);
     color: white;
     padding: 4rem 0 2rem;
 }

 .footer-brand h3 {
     font-size: 2.5rem;
     font-weight: 900;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 0.5rem;
 }

 .footer-tagline {
     font-size: 1.3rem;
     color: rgba(255, 255, 255, 0.7);
 }

 .footer-title {
     font-size: 1.3rem;
     font-weight: 700;
     color: white;
     margin-bottom: 1.5rem;
     position: relative;
     padding-bottom: 0.8rem;
 }

 .footer-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 50px;
     height: 3px;
     background: var(--gradient-primary);
     border-radius: 2px;
 }

 .footer-links {
     list-style: none;
     padding: 0;
 }

 .footer-links li {
     margin-bottom: 0.8rem;
 }

 .footer-links a {
     color: rgba(255, 255, 255, 0.7);
     transition: all 0.3s ease;
     display: inline-block;
 }

 .footer-links a:hover {
     color: white;
     transform: translateX(-5px);
 }

 .footer-contact {
     list-style: none;
     padding: 0;
 }

 .footer-contact li {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
     margin-bottom: 1rem;
     color: rgba(255, 255, 255, 0.7);
 }

 .footer-contact i {
     color: var(--secondary-color);
     font-size: 1.2rem;
     margin-top: 0.2rem;
 }

 .footer-bottom {
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     text-align: center;
 }

 .footer-bottom p {
     color: rgba(255, 255, 255, 0.5);
     margin: 0;
 }

 /* ============================================
   Back to Top
   ============================================ */

 .back-to-top {
     position: fixed;
     bottom: 30px;
     left: 30px;
     width: 50px;
     height: 50px;
     background: var(--gradient-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.5rem;
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     box-shadow: 0 5px 20px rgba(26, 86, 219, 0.4);
     z-index: 999;
 }

 .back-to-top.show {
     opacity: 1;
     visibility: visible;
 }

 .back-to-top:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(26, 86, 219, 0.5);
 }


 /* ============================================
   Responsive Design
   ============================================ */

 @media (max-width: 991px) {
     .hero-title {
         font-size: 3rem;
     }

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

     /* .hero-section {
                padding: 100px 20px 40px;
            } */

     .carousel {
         border-radius: 35px;
     }

     .carousel-slide {
         min-height: 80vh;
     }

     .hero-stats {
         gap: 2rem;
     }

     .stat-number {
         font-size: 2.5rem;
     }

     .workflow-step {
         flex-direction: column !important;
         text-align: center;
     }

     .timeline-line-modern {
         display: none;
     }

     .step-content-modern {
         flex-direction: column;
         text-align: center;
     }
 }

 @media (max-width: 767px) {
     .section-padding {
         padding: 60px 0;
     }

     /* Hero Section with curved design */
     .hero-section {
         padding: 90px 15px 30px;
     }

     .carousel {
         border-radius: 25px;
     }

     .carousel-slide {
         min-height: 45px;
         padding: 40px 20px;
     }

     /* Hero Title */
     .hero-title {
         font-size: 2.2rem;
     }

     .hero-tagline {
         font-size: 1.1rem;
         margin-top: 15px;
     }

     .hero-description {
         font-size: 0.95rem;
         max-width: 100%;
     }

     /* Hero Buttons */
     .hero-buttons {
         flex-direction: column;
         align-items: stretch;
         gap: 0.8rem;
     }

     .hero-buttons .btn {
         justify-content: center;
         padding: 1rem 1.5rem;
     }

     /* Hero Stats - عرض أفقي */
     .hero-stats {
         flex-direction: row;
         gap: 1rem;
         justify-content: space-around;
         padding-top: 1.5rem;
         margin-top: 2rem;
     }

     .stat-item {
         flex: 1;
     }

     .stat-number {
         font-size: 2rem;
     }

     .stat-label {
         font-size: 0.8rem;
     }

     /* إظهار الرسوم التوضيحية والأيقونات */
     .col-lg-5.d-none.d-lg-block {
         display: block !important;
         margin-top: 2rem;
     }

     .hero-illustration {
         max-width: 100%;
         padding: 0 1rem;
     }

     /* Code Window */
     .code-window {
         padding: 1rem;
     }

     .code-content {
         font-size: 0.75rem;
         line-height: 1.6;
     }

     .window-header .dot {
         width: 8px;
         height: 8px;
     }

     /* Tech Globe */
     .tech-globe {
         width: 200px;
         height: 200px;
     }

     .globe-core {
         width: 80px;
         height: 80px;
         font-size: 2.5rem;
     }

     .globe-ring {
         border-width: 1px;
     }

     /* Partnership Visual */
     .partnership-visual {
         padding: 2rem 1rem;
     }

     .circle-connection {
         width: 200px;
         height: 100px;
     }

     .circle {
         width: 70px;
         height: 70px;
         font-size: 1.8rem;
     }

     .connection-line {
         width: 100px;
     }

     /* Floating Tech Icons - تخفيف لكن إبقاء مرئية */
     .floating-elements {
         opacity: 0.3;
     }

     .tech-icon {
         font-size: 2rem;
     }

     /* Carousel Controls */
     .modern-control {
         width: 45px;
         height: 45px;
     }

     .carousel-control-prev-icon,
     .carousel-control-next-icon {
         width: 18px;
         height: 18px;
     }

     .modern-indicators {
         bottom: 15px;
     }

     .modern-indicators button {
         width: 8px;
         height: 8px;
     }

     .modern-indicators button.active {
         width: 25px;
     }

     /* Scroll Indicator */
     .scroll-indicator {
         bottom: 15px;
     }

     .mouse {
         width: 20px;
         height: 32px;
     }

     .arrow span {
         width: 8px;
         height: 8px;
     }

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

     .section-subtitle {
         font-size: 0.95rem;
     }

     .section-tag {
         font-size: 0.85rem;
         padding: 0.4rem 1rem;
     }

     /* About Section */
     .about-section .row {
         flex-direction: column-reverse;
     }

     .about-image-wrapper {
         order: 2;
         margin-top: 2rem;
     }

     .about-content {
         order: 1;
     }

     .about-image-wrapper img {
         max-width: 80%;
         margin-bottom: 0;
     }

     .decoration-circle {
         width: 250px;
         height: 250px;
     }

     .floating-badge {
         bottom: 15px;
         left: 15px;
         padding: 0.8rem 1.2rem;
         font-size: 0.9rem;
     }

     .name-meaning-box {
         flex-direction: column;
         text-align: center;
     }

     .meaning-icon {
         margin: 0 auto 1rem;
         width: 50px;
         height: 50px;
         font-size: 1.5rem;
     }

     .meaning-content h4 {
         font-size: 1.2rem;
     }

     /* Vision Mission Cards */
     /* .vision-mission-card {
                padding: 2rem;
            }

            .vision-mission-card .card-icon {
                width: 60px;
                height: 60px;
                font-size: 2rem;
            }

            .vision-mission-card h3 {
                font-size: 1.5rem;
            } */

     /* Values */
     .values-grid {
         grid-template-columns: 1fr;
         gap: 1.5rem;
     }

     .value-item {
         padding: 2rem 1.5rem;
     }

     .value-item .value-icon {
         width: 60px;
         height: 60px;
         font-size: 1.8rem;
     }

     .value-item h5 {
         font-size: 1.2rem;
     }

     /* Services */
     .modern-card {
         padding: 2rem;
     }

     .service-icon-wrapper {
         width: 70px;
         height: 70px;
     }

     .service-icon {
         font-size: 2.5rem;
     }

     .service-card h4 {
         font-size: 1.3rem;
     }

     .service-card p {
         font-size: 0.95rem;
     }

     .features-list li {
         font-size: 0.9rem;
         padding: 0.5rem 0;
     }

     .service-link {
         padding: 0.7rem 1.2rem;
         font-size: 0.9rem;
     }

     /* Why Us */
     .modern-why-card {
         padding: 2rem;
     }

     .why-icon-wrapper {
         width: 60px;
         height: 60px;
         font-size: 2rem;
     }

     .modern-why-card h5 {
         font-size: 1.2rem;
     }

     .modern-why-card p {
         font-size: 0.95rem;
     }

     /* Workflow */
     .workflow-step {
         margin-bottom: 2rem;
     }

     .step-number {
         width: 60px;
         height: 60px;
         font-size: 1.5rem;
         margin: 0 auto 1rem;
     }

     .step-icon {
         width: 50px;
         height: 50px;
         font-size: 1.5rem;
     }

     .step-content-modern {
         padding: 1.5rem;
     }

     .step-content-modern h4 {
         font-size: 1.3rem;
     }

     .step-content-modern p {
         font-size: 0.95rem;
     }

     /* Contact */
     .contact-form-wrapper,
     .contact-info-wrapper {
         padding: 2rem;
     }

     .contact-form-wrapper h3,
     .contact-info-wrapper h3 {
         font-size: 1.5rem;
     }

     .info-icon {
         width: 40px;
         height: 40px;
         font-size: 1.2rem;
     }

     .info-content h5 {
         font-size: 1rem;
     }

     .social-link {
         width: 45px;
         height: 45px;
         font-size: 1.3rem;
     }

     /* Footer */
     .footer-brand h3 {
         font-size: 2rem;
     }

     .footer-tagline {
         font-size: 1.1rem;
     }

     .footer-title {
         font-size: 1.2rem;
     }

     /* Navbar Mobile */
     .navbar-nav .nav-link {
         padding: 0.8rem 1rem !important;
         text-align: center;
     }

     .btn-primary-custom {
         width: 100%;
         justify-content: center;
     }

     /* Buttons */
     .btn-lg {
         padding: 0.9rem 1.5rem;
         font-size: 0.95rem;
     }
 }

 @media (max-width: 767px) {

     /* Vision & Mission Cards - نسخة الجوال */
     .vision-mission-card {
         position: relative;
         background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
         border-radius: 30px 10px 30px 10px;
         padding: 2rem 1.5rem;
         box-shadow: 0 10px 35px rgba(26, 86, 219, 0.12);
         overflow: visible;
         transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
         border: none;
         margin-bottom: 2rem;
     }

     /* خط زخرفي متموج */
     .vision-mission-card::before {
         content: '';
         position: absolute;
         top: -4px;
         left: 50%;
         transform: translateX(-50%);
         width: 70%;
         height: 3px;
         background: var(--gradient-primary);
         border-radius: 10px;
         box-shadow: 0 0 15px rgba(26, 86, 219, 0.4);
     }

     /* دائرة زخرفية */
     .vision-mission-card::after {
         content: '';
         position: absolute;
         top: -12px;
         right: 20px;
         width: 24px;
         height: 24px;
         background: var(--gradient-primary);
         border-radius: 50%;
         box-shadow: 0 4px 12px rgba(26, 86, 219, 0.4);
         animation: float-badge 3s ease-in-out infinite;
     }

     /* أيقونة مبتكرة - شكل معين */
     .vision-mission-card .card-icon {
         width: 70px;
         height: 70px;
         background: var(--gradient-primary);
         border-radius: 15px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 2rem;
         color: white;
         margin: 0 auto 1.5rem;
         transition: all 0.4s ease;
         position: relative;
         transform: rotate(45deg);
         box-shadow: 0 8px 25px rgba(26, 86, 219, 0.35);
     }

     .vision-mission-card .card-icon i {
         transform: rotate(-45deg);
     }

     /* النصوص */
     .vision-mission-card h3 {
         font-size: 1.5rem;
         font-weight: 900;
         background: var(--gradient-primary);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         margin-bottom: 1rem;
         text-align: center;
         position: relative;
     }

     .vision-mission-card h3::after {
         content: '';
         position: absolute;
         bottom: -8px;
         left: 50%;
         transform: translateX(-50%);
         width: 50px;
         height: 2.5px;
         background: var(--gradient-primary);
         border-radius: 10px;
     }

     .vision-mission-card p {
         color: var(--text-color);
         line-height: 1.8;
         margin: 0;
         text-align: center;
         font-size: 0.95rem;
     }

     /* زخرفة متحركة */
     .card-decoration {
         position: absolute;
         bottom: -20px;
         left: -20px;
         width: 80px;
         height: 80px;
         background: linear-gradient(135deg, rgba(26, 86, 219, 0.08), rgba(14, 165, 233, 0.08));
         border-radius: 50%;
         opacity: 0.7;
         filter: blur(15px);
     }

     /* شكل مختلف للبطاقة الثانية */
     .vision-mission-card:nth-child(2) {
         border-radius: 10px 30px 10px 30px;
     }

     .vision-mission-card:nth-child(2)::after {
         left: 20px;
         right: auto;
     }

     /* ألوان مختلفة للأيقونات */
     .vision-mission-card:nth-child(1) .card-icon {
         background: linear-gradient(135deg, #1a56db 0%, #8b5cf6 100%);
     }

     .vision-mission-card:nth-child(2) .card-icon {
         background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
     }

     /* تحسين المسافات */
     .row.g-4 {
         gap: 1.5rem !important;
     }
 }

 @media (max-width: 575px) {

     /* Hero with curved design */
     .hero-section {
         padding: 85px 10px 25px;
     }

     .carousel {
         border-radius: 20px;
     }

     . .carousel-slide {
         min-height: 45vh;
         /* غيّرها حسب اللي يناسبك */
         padding: 20px 12px;
     }

     /* Hero */
     .hero-title {
         font-size: 1.8rem;
         margin-bottom: 0.8rem;
     }

     .hero-tagline {
         font-size: 1rem;
     }

     .hero-description {
         font-size: 0.9rem;
     }

     .hero-buttons .btn {
         padding: 0.9rem 1.2rem;
         font-size: 0.9rem;
     }

     .hero-stats {
         gap: 0.8rem;
     }

     .stat-number {
         font-size: 1.8rem;
     }

     .stat-label {
         font-size: 0.75rem;
     }

     /* Illustrations - أصغر ولكن مرئية */
     .hero-illustration {
         margin-top: 1.5rem;
         padding: 0 0.5rem;
     }

     .code-window {
         padding: 0.8rem;
     }

     .code-content {
         font-size: 0.7rem;
     }

     .tech-globe {
         width: 180px;
         height: 180px;
     }

     .globe-core {
         width: 70px;
         height: 70px;
         font-size: 2rem;
     }

     .circle {
         width: 60px;
         height: 60px;
         font-size: 1.5rem;
     }

     .floating-elements {
         opacity: 0.2;
     }

     .tech-icon {
         font-size: 1.5rem;
     }

     /* Navbar */
     .modern-navbar {
         padding: 0.8rem 0;
     }

     .navbar-brand .logo {
         height: 40px;
     }

     /* Sections */
     .section-padding {
         padding: 50px 0;
     }

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

     .section-subtitle {
         font-size: 0.9rem;
     }

     .section-tag {
         font-size: 0.8rem;
         padding: 0.4rem 0.9rem;
     }

     /* About */
     .about-content .lead {
         font-size: 0.95rem;
     }

     .decoration-circle {
         width: 200px;
         height: 200px;
     }

     .floating-badge {
         padding: 0.7rem 1rem;
         font-size: 0.85rem;
     }

     /* Cards */
     .vision-mission-card,
     .modern-card,
     .value-item,
     .modern-why-card {
         padding: 1.5rem;
     }

     .vision-mission-card .card-icon,
     .value-item .value-icon,
     .why-icon-wrapper {
         width: 50px;
         height: 50px;
         font-size: 1.5rem;
     }

     .service-icon-wrapper {
         width: 60px;
         height: 60px;
     }

     .service-icon {
         font-size: 2rem;
     }

     /* Typography */
     h3,
     .service-card h4 {
         font-size: 1.2rem;
     }

     h5 {
         font-size: 1.1rem;
     }

     p {
         font-size: 0.9rem;
     }

     /* Contact */
     .contact-form-wrapper,
     .contact-info-wrapper {
         padding: 1.5rem;
     }

     .info-icon {
         width: 35px;
         height: 35px;
         font-size: 1.1rem;
     }

     .social-link {
         width: 40px;
         height: 40px;
         font-size: 1.2rem;
     }

     /* Footer */
     .footer-brand h3 {
         font-size: 1.8rem;
     }

     .footer-tagline {
         font-size: 1rem;
     }

     .footer-title {
         font-size: 1.1rem;
     }

     /* Workflow */
     .step-number {
         width: 55px;
         height: 55px;
         font-size: 1.3rem;
     }

     .step-icon {
         width: 45px;
         height: 45px;
         font-size: 1.3rem;
     }

     /* Scroll Indicator */
     .scroll-indicator {
         bottom: 10px;
         transform: scale(0.8) translateX(-62.5%);
     }

     /* Carousel Controls */
     .modern-control {
         width: 40px;
         height: 40px;
     }

     /* Back to Top */
     .back-to-top {
         width: 45px;
         height: 45px;
         bottom: 20px;
         left: 20px;
         font-size: 1.3rem;
     }
 }

 /* ============================================
   Print Styles
   ============================================ */

 @media print {

     .modern-navbar,
     .back-to-top,
     .scroll-indicator,
     .floating-elements {
         display: none !important;
     }
 }

 /* ============================================
   إضافات خاصة لعرض العناصر في الجوال
   ============================================ */

 /* Force show illustrations on mobile */
 @media (max-width: 991px) {
     .d-lg-block {
         display: block !important;
         margin-top: -460px;
     }

     .hero-illustration {
         margin: 2rem auto 0;
         text-align: center;
     }
 }

 /* Tablet optimizations */
 @media (min-width: 768px) and (max-width: 991px) {
     .hero-title {
         font-size: 3.2rem;
     }

     .hero-stats {
         flex-direction: row;
         justify-content: center;
     }

     .code-window {
         max-width: 500px;
         margin: 0 auto;
     }

     .tech-globe {
         width: 250px;
         height: 250px;
     }
 }

 /* Landscape mobile */
 @media (max-width: 767px) and (orientation: landscape) {
     .hero-section {
         min-height: auto;
         padding: 80px 0 40px;
     }

     .carousel,
     .carousel-inner,
     .carousel-item {
         height: auto;
         min-height: 100vh;
     }

     .hero-illustration {
         display: none !important;
     }

     .hero-stats {
         margin-top: 1.5rem;
         padding-top: 1rem;
     }
 }

 /* Small device optimizations */
 @media (max-width: 375px) {
     .hero-title {
         font-size: 1.6rem;
     }

     .stat-number {
         font-size: 1.6rem;
     }

     .stat-label {
         font-size: 0.7rem;
     }
 }

 /* ============================================
   تحسينات السلايد المنحني
   ============================================ */

 /* Adjust row inside carousel */
 .carousel-slide .row {
     position: relative;
     z-index: 10;
 }

 /* Better spacing for content inside curved slider */
 .carousel-slide .container {
     padding-top: 30px;
     padding-bottom: 30px;
 }

 /* Scroll indicator adjustment for curved design */
 .scroll-indicator {
     bottom: 20px;
 }

 /* Carousel controls positioning for curved design */
 .carousel-control-prev,
 .carousel-control-next {
     top: 50%;
     transform: translateY(-50%);
 }

 /* Indicators positioning */
 .carousel-indicators {
     bottom: 20px;
 }

 /* Desktop specific curved design */
 @media (min-width: 992px) {
     .hero-section {
         padding: 120px 40px 50px;
     }

     .carousel {
         border-radius: 45px;
     }

     .carousel-slide {
         min-height: 88vh;
     }
 }

 /* Large screens */
 @media (min-width: 1400px) {
     .hero-section {
         padding: 120px 60px 60px;
     }

     .carousel {
         border-radius: 50px;
     }
 }

 /* Landscape mobile adjustments */
 @media (max-width: 767px) and (orientation: landscape) {
     .hero-section {
         padding: 80px 15px 20px;
     }

     .carousel-slide {
         min-height: 100vh;
         padding: 30px 20px;
     }
 }

 @media (max-width: 767px) {

     /* Hero Section - نصف الشاشة */
     .hero-section {
         padding: 90px 15px 30px;
         max-height: none !important;
     }

     .carousel {
         border-radius: 25px;
     }

     .carousel-slide {
         min-height: 60vh;
         padding: 30px 15px;
     }

     /* تنسيق الصفوف - النص فوق والصور تحت */
     .carousel-slide .row {
         flex-direction: column;
         min-height: auto !important;
     }

     .carousel-slide .col-lg-7 {
         order: 1;
         margin-bottom: 2rem;
     }

     .carousel-slide .col-lg-5 {
         order: 2;
     }

     /* إظهار الرسوم التوضيحية */
     .col-lg-5.d-none.d-lg-block {
         display: block !important;
     }

     /* Hero Content - محاذاة في المنتصف */
     .hero-content {
         text-align: center !important;
     }

     .hero-title {
         font-size: 2rem;
         margin-bottom: 1rem;
         text-align: center;
     }

     .hero-tagline {
         font-size: 1rem;
         margin-top: 10px;
         text-align: center;
     }

     .hero-description {
         font-size: 0.9rem;
         margin-bottom: 1.5rem;
         text-align: center;
         margin-left: auto;
         margin-right: auto;
     }

     /* Buttons */
     .hero-buttons {
         flex-direction: row;
         justify-content: center;
         gap: 0.8rem;
     }

     .hero-buttons .btn {
         padding: 0.8rem 1.2rem;
         font-size: 0.9rem;
     }

     /* Illustrations - أصغر */
     .hero-illustration {
         max-width: 100%;
         padding: 0;
         text-align: center;
     }

     .code-window {
         padding: 0.8rem;
         max-width: 280px;
         margin: 0 auto;
     }

     .code-content {
         font-size: 0.7rem;
     }

     .tech-globe {
         width: 150px;
         height: 150px;
         margin: 0 auto;
     }

     .globe-core {
         width: 60px;
         height: 60px;
         font-size: 2rem;
     }

     .partnership-visual {
         padding: 1rem;
     }

     .circle-connection {
         width: 180px;
         height: 90px;
         margin: 0 auto;
     }

     .circle {
         width: 60px;
         height: 60px;
         font-size: 1.5rem;
     }

     /* إخفاء أزرار التنقل والـ indicators */
     .carousel-control-prev,
     .carousel-control-next,
     .carousel-indicators {
         display: none !important;
     }

     /* Floating Icons - شفافية خفيفة */
     .floating-elements {
         opacity: 0.2;
     }

     .tech-icon {
         font-size: 1.5rem;
     }
 }

 @media (max-width: 767px) {

     /* إخفاء indicators في الجوال */
     .carousel-indicators,
     .modern-indicators {
         display: none !important;
     }
 }

 @media (max-width: 991px) {

     /* Modern Mobile Navbar */
     .modern-navbar {
         padding: 0.8rem 0;
     }

     .navbar-brand .logo {
         height: 45px;
     }

     /* القائمة المنسدلة - تصميم احترافي */
     .navbar-collapse {
         position: fixed;
         top: 0;
         right: -100%;
         width: 280px;
         height: 100vh;
         background: linear-gradient(135deg, #1a56db 0%, #0ea5e9 100%);
         padding: 80px 0 30px;
         transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
         z-index: 9999;
         box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
         overflow-y: auto;
     }

     .navbar-collapse.show {
         right: 0;
     }

     /* Overlay عند فتح القائمة */
     .navbar-collapse.show::before {
         content: '';
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.6);
         z-index: -1;
         animation: fadeIn 0.3s ease;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
         }

         to {
             opacity: 1;
         }
     }


     /* القائمة */
     .navbar-nav {
         flex-direction: column;
         padding: 0 1.5rem;
         gap: 0;
     }

     .nav-item {
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }

     .nav-item:last-child {
         border-bottom: none;
     }

     .nav-link {
         color: white !important;
         font-size: 1.1rem;
         font-weight: 600;
         padding: 1.2rem 1rem !important;
         position: relative;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }

     .nav-link::after {
         content: '←';
         opacity: 0;
         transform: translateX(10px);
         transition: all 0.3s ease;
     }

     .nav-link:hover,
     .nav-link.active {
         background: rgba(255, 255, 255, 0.15);
         padding-right: 1.5rem !important;
     }

     .nav-link:hover::after,
     .nav-link.active::after {
         opacity: 1;
         transform: translateX(0);
     }

     .nav-link::before {
         display: none;
     }

     /* زر تواصل معنا في القائمة */
     .navbar-nav::after {
         content: '';
         display: block;
         margin-top: 2rem;
     }

     .btn-primary-custom.d-none.d-lg-block {
         display: none !important;
     }

     /* إضافة زر تواصل في القائمة */
     .navbar-collapse .navbar-nav {
         position: relative;
     }

     /* زر الهامبرجر */
     .navbar-toggler {
         border: 2px solid var(--primary-color);
         border-radius: 10px;
         padding: 0.5rem 0.7rem;
         transition: all 0.3s ease;
     }

     .navbar-toggler:focus {
         box-shadow: 0 0 0 0.25rem rgba(26, 86, 219, 0.25);
     }

     .navbar-toggler-icon {
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231a56db' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
         width: 1.5rem;
         height: 1.5rem;
     }

     /* Animation للعناصر */
     .navbar-collapse.show .nav-item {
         animation: slideInRight 0.4s ease forwards;
         opacity: 0;
     }

     .navbar-collapse.show .nav-item:nth-child(1) {
         animation-delay: 0.1s;
     }

     .navbar-collapse.show .nav-item:nth-child(2) {
         animation-delay: 0.2s;
     }

     .navbar-collapse.show .nav-item:nth-child(3) {
         animation-delay: 0.3s;
     }

     .navbar-collapse.show .nav-item:nth-child(4) {
         animation-delay: 0.4s;
     }

     @keyframes slideInRight {
         from {
             opacity: 0;
             transform: translateX(30px);
         }

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

     /* شعار الشركة في القائمة */
     .navbar-collapse.show::before {
         content: '';
         position: absolute;
         top: 25px;
         left: 50%;
         transform: translateX(-50%);
         width: 80px;
         height: 80px;
         background: url('assets/img/logocol.png') center/contain no-repeat;
         opacity: 0.2;
     }
 }

 @media (max-width: 767px) {
     .navbar-collapse {
         width: 260px;
     }

     .navbar-brand .logo {
         height: 40px;
     }

     .nav-link {
         font-size: 1rem;
         padding: 1rem 0.8rem !important;
     }
 }

 @media (max-width: 991px) {

     /* Modern Mobile Navbar */
     .modern-navbar {
         padding: 0.8rem 0;
     }

     .navbar-brand .logo {
         height: 45px;
     }

     /* القائمة المنسدلة - تصميم احترافي */
     .navbar-collapse {
         position: fixed;
         top: 0;
         right: -100%;
         width: 280px;
         height: 100vh;
         background: linear-gradient(135deg, #1a56db 0%, #0ea5e9 100%);
         padding: 80px 0 30px;
         transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
         z-index: 9999;
         box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
         overflow-y: auto;
     }

     .navbar-collapse.show {
         right: 0;
     }

     /* Overlay عند فتح القائمة */
     .navbar-collapse.show::before {
         content: '';
         position: fixed;
         top: 0;
         left: 0;
         right: 280px;
         height: 100%;
         background: rgba(0, 0, 0, 0.6);
         z-index: -1;
         animation: fadeIn 0.3s ease;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
         }

         to {
             opacity: 1;
         }
     }

     /* زر الإغلاق */
     .close-menu {
         position: absolute;
         top: 20px;
         right: 20px;
         width: 45px;
         height: 45px;
         background: rgba(255, 255, 255, 0.2);
         border: 2px solid rgba(255, 255, 255, 0.3);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.3rem;
         cursor: pointer;
         backdrop-filter: blur(10px);
         transition: all 0.3s ease;
         z-index: 10;
     }

     .close-menu:hover {
         background: rgba(255, 255, 255, 0.3);
         transform: rotate(90deg);
     }

     .close-menu i {
         font-size: 1.2rem;
     }

     /* القائمة */
     .navbar-nav {
         flex-direction: column;
         padding: 0 1.5rem;
         gap: 0;
         margin: 0 !important;
     }

     .nav-item {
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }

     .nav-item:last-child {
         border-bottom: none;
     }

     .nav-link {
         color: white !important;
         font-size: 1.1rem;
         font-weight: 600;
         padding: 1.2rem 1rem !important;
         position: relative;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }

     .nav-link::after {
         content: '←';
         opacity: 0;
         transform: translateX(10px);
         transition: all 0.3s ease;
     }

     .nav-link:hover,
     .nav-link.active {
         background: rgba(255, 255, 255, 0.15);
         padding-right: 1.5rem !important;
     }

     .nav-link:hover::after,
     .nav-link.active::after {
         opacity: 1;
         transform: translateX(0);
     }

     .nav-link::before {
         display: none;
     }

     /* زر تواصل معنا في القائمة */
     .mobile-contact-btn {
         padding: 1.5rem;
         margin-top: 2rem;
     }

     .mobile-contact-btn .btn {
         background: white;
         color: var(--primary-color);
         border: none;
         padding: 1rem;
         font-weight: 700;
         border-radius: 50px;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.5rem;
         box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
         transition: all 0.3s ease;
     }

     .mobile-contact-btn .btn:hover {
         transform: translateY(-3px);
         box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
         background: #f8fafc;
     }

     /* زر الهامبرجر */
     .navbar-toggler {
         border: 2px solid var(--primary-color);
         border-radius: 10px;
         padding: 0.5rem 0.7rem;
         transition: all 0.3s ease;
         z-index: 1;
     }

     .navbar-toggler:focus {
         box-shadow: 0 0 0 0.25rem rgba(26, 86, 219, 0.25);
     }

     .navbar-toggler-icon {
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231a56db' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
         width: 1.5rem;
         height: 1.5rem;
     }

     /* Animation للعناصر */
     .navbar-collapse.show .nav-item {
         animation: slideInRight 0.4s ease forwards;
         opacity: 0;
     }

     .navbar-collapse.show .nav-item:nth-child(1) {
         animation-delay: 0.1s;
     }

     .navbar-collapse.show .nav-item:nth-child(2) {
         animation-delay: 0.2s;
     }

     .navbar-collapse.show .nav-item:nth-child(3) {
         animation-delay: 0.3s;
     }

     .navbar-collapse.show .nav-item:nth-child(4) {
         animation-delay: 0.4s;
     }

     .navbar-collapse.show .mobile-contact-btn {
         animation: slideInRight 0.4s ease forwards;
         animation-delay: 0.5s;
         opacity: 0;
     }

     @keyframes slideInRight {
         from {
             opacity: 0;
             transform: translateX(30px);
         }

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

 @media (max-width: 767px) {
     .navbar-collapse {
         width: 260px;
     }

     .navbar-brand .logo {
         height: 40px;
     }

     .nav-link {
         font-size: 1rem;
         padding: 1rem 0.8rem !important;
     }

     .close-menu {
         width: 40px;
         height: 40px;
         top: 15px;
         right: 15px;
     }
 }

 /* ============================================
   Projects Section
   ============================================ */

 .projects-section {
     background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
     position: relative;
     overflow: hidden;
 }

 .projects-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 20% 50%, rgba(26, 86, 219, 0.03), transparent 50%),
         radial-gradient(circle at 80% 80%, rgba(14, 165, 233, 0.03), transparent 50%);
     pointer-events: none;
 }

 /* Project Card */
 .project-card {
     background: white;
     border-radius: 25px;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border: 2px solid transparent;
     display: flex;
     flex-direction: column;
     height: 300px;
 }

 .project-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 60px rgba(26, 86, 219, 0.15);
     border-color: var(--primary-color);
 }

 .project-card {
     height: auto !important;
     min-height: auto !important;
 }

 /* Project Slider */
 .project-slider {
     width: 100%;
     height: 280px;
     position: relative;
     overflow: hidden;
     background: #f8fafc;
 }

 .project-slider .swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .project-slider .swiper-slide img {
     width: 100%;
     height: 69% !important;
     object-fit: cover;
     transition: transform 0.6s ease;
 }

 .project-card:hover .swiper-slide img {
     transform: scale(1.1);
 }


 .project-slider .swiper-pagination-bullet {
     width: 8px;
     height: 8px;
     background: white;
     opacity: 0.5;
     transition: all 0.3s ease;
 }

 .project-slider .swiper-pagination-bullet-active {
     width: 25px;
     border-radius: 4px;
     background: white;
     opacity: 1;
 }

 /* Swiper Navigation Arrows */
 .swiper-button-next,
 .swiper-button-prev {
     width: 45px;
     height: 45px;
     background: rgba(255, 255, 255, 0.95);
     border-radius: 50%;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
     transition: all 0.3s ease;
     opacity: 0;
 }

 .project-card:hover .swiper-button-next,
 .project-card:hover .swiper-button-prev {
     opacity: 1;
 }

 .swiper-button-next::after,
 .swiper-button-prev::after {
     font-size: 1.2rem;
     color: var(--primary-color);
     font-weight: 900;
 }

 .swiper-button-next:hover,
 .swiper-button-prev:hover {
     background: white;
     transform: scale(1.1);
     box-shadow: 0 8px 30px rgba(26, 86, 219, 0.3);
 }

 .swiper-button-next:hover::after,
 .swiper-button-prev:hover::after {
     color: var(--primary-dark);
 }

 /* تعديل موضع الأسهم */
 .swiper-button-next {
     left: 15px;
     right: auto;
 }

 .swiper-button-prev {
     right: 15px;
     left: auto;
 }

 /* Project Info */
 .project-info {
     padding: 2rem;
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .project-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 1rem;
     gap: 1rem;
 }

 .project-info h4 {
     font-size: 21px;
     font-weight: 800;
     color: var(--dark-color);
     margin: 0;
     flex: 1;
 }

 .project-category {
     display: inline-block;
     padding: 0.4rem 1rem;
     background: linear-gradient(135deg, rgba(26, 86, 219, 0.1), rgba(14, 165, 233, 0.1));
     color: var(--primary-color);
     border-radius: 50px;
     font-size: 0.85rem;
     font-weight: 600;
     white-space: nowrap;
 }

 .project-description {
     color: var(--text-color);
     line-height: 1.8;
     margin-bottom: 1.5rem;
     font-size: 0.95rem;
 }

 /* Project Tags */
 .project-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin-bottom: 1.5rem;
 }

 .project-tags .tag {
     padding: 0.4rem 1rem;
     background: #f8fafc;
     border: 1px solid var(--border-color);
     border-radius: 20px;
     font-size: 0.85rem;
     color: var(--text-light);
     font-weight: 500;
     transition: all 0.3s ease;
 }

 .project-card:hover .tag {
     border-color: var(--primary-color);
     color: var(--primary-color);
     background: rgba(26, 86, 219, 0.05);
 }

 /* Project Link */
 .project-link {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--primary-color);
     font-weight: 700;
     text-decoration: none;
     transition: all 0.3s ease;
     margin-top: auto;
 }

 .project-link:hover {
     gap: 1rem;
     color: var(--primary-dark);
 }

 .project-link i {
     font-size: 1.1rem;
     transition: transform 0.3s ease;
 }

 .project-link:hover i {
     transform: translateX(-5px);
 }

 /* Responsive */
 @media (max-width: 991px) {
     .project-slider {
         height: 250px;
     }

     .project-info h4 {
         font-size: 1.3rem;
     }
 }

 @media (max-width: 767px) {
     .project-slider {
         height: 220px;
     }

     .project-info {
         padding: 1.5rem;
     }

     .project-info h4 {
         font-size: 1.2rem;
     }

     .project-description {
         font-size: 0.9rem;
     }

     .project-card {
         margin-bottom: 2rem;
     }

     /* أسهم أصغر في الجوال */
     .swiper-button-next,
     .swiper-button-prev {
         width: 35px;
         height: 35px;
         opacity: 1;
     }

     .swiper-button-next::after,
     .swiper-button-prev::after {
         font-size: 1rem;
     }

     .swiper-button-next {
         left: 10px;
     }

     .swiper-button-prev {
         right: 10px;
     }
 }


 /* ============================================
   Values Section - تصميم احترافي مبتكر مع خلفية متحركة
   ============================================ */

 .values-section {
     position: relative;
     padding: 80px 0;
     overflow: hidden;
     background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
 }

 /* ============================================
   خلفية متحركة
   ============================================ */

 .animated-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     overflow: hidden;
     pointer-events: none;
 }

 /* أشكال هندسية متحركة كبيرة */
 .shape {
     position: absolute;
     border-radius: 50%;
     filter: blur(100px);
     opacity: 0.2;
     animation: float-shape 25s ease-in-out infinite;
 }

 .shape-1 {
     width: 500px;
     height: 500px;
     background: linear-gradient(135deg, #1a56db, #0ea5e9);
     top: -150px;
     right: -150px;
     animation-delay: 0s;
 }

 .shape-2 {
     width: 450px;
     height: 450px;
     background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
     bottom: -120px;
     left: -120px;
     animation-delay: -8s;
 }

 .shape-3 {
     width: 400px;
     height: 400px;
     background: linear-gradient(135deg, #f59e0b, #ec4899);
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     animation-delay: -16s;
 }

 @keyframes float-shape {

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

     25% {
         transform: translate(80px, -80px) scale(1.2) rotate(90deg);
         opacity: 0.3;
     }

     50% {
         transform: translate(-50px, 100px) scale(0.9) rotate(180deg);
         opacity: 0.15;
     }

     75% {
         transform: translate(60px, 50px) scale(1.1) rotate(270deg);
         opacity: 0.25;
     }
 }

 /* دوائر عائمة صغيرة متحركة */
 .floating-circles {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
 }

 .floating-circles .circle {
     position: absolute;
     width: 20px;
     height: 20px;
     background: var(--primary-color);
     border-radius: 50%;
     opacity: 0.3;
     animation: float-circle 20s ease-in-out infinite;
     box-shadow: 0 0 30px rgba(26, 86, 219, 0.5);
 }

 .floating-circles .circle:nth-child(1) {
     top: 15%;
     left: 8%;
     animation-delay: 0s;
     width: 15px;
     height: 15px;
 }

 .floating-circles .circle:nth-child(2) {
     top: 55%;
     right: 12%;
     animation-delay: -4s;
     width: 25px;
     height: 25px;
 }

 .floating-circles .circle:nth-child(3) {
     bottom: 25%;
     left: 25%;
     animation-delay: -8s;
     width: 18px;
     height: 18px;
 }

 .floating-circles .circle:nth-child(4) {
     top: 35%;
     right: 20%;
     animation-delay: -12s;
     width: 22px;
     height: 22px;
 }

 .floating-circles .circle:nth-child(5) {
     bottom: 15%;
     right: 35%;
     animation-delay: -16s;
     width: 16px;
     height: 16px;
 }

 @keyframes float-circle {

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

     25% {
         transform: translateY(-120px) translateX(50px) scale(1.3);
         opacity: 0.5;
     }

     50% {
         transform: translateY(-80px) translateX(-60px) scale(0.8);
         opacity: 0.2;
     }

     75% {
         transform: translateY(-150px) translateX(30px) scale(1.5);
         opacity: 0.6;
     }
 }

 /* ============================================
   Container و Grid
   ============================================ */

 .values-container {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2.5rem;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2rem;
 }

 /* ============================================
   Value Card - تصميم 3D Flip
   ============================================ */

 /* إصلاح مشكلة ظهور الوجه الخلفي أسفل البطاقة */
 .value-card {
     perspective: 1500px;
     height: 280px;
     position: relative;
     z-index: 1;
 }

 .value-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     transform-style: preserve-3d;
 }

 .value-card:hover .value-card-inner {
     transform: rotateY(180deg);
 }

 .value-front,
 .value-back {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     border-radius: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 2.5rem;
 }

 .value-front {
     background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
     box-shadow: 0 15px 50px rgba(26, 86, 219, 0.12);
     border: 2px solid transparent;
     position: absolute;
     overflow: hidden;
     z-index: 2;
     transform: rotateY(0deg);
 }

 .value-back {
     background: var(--gradient-primary);
     transform: rotateY(180deg);
     box-shadow: 0 25px 70px rgba(26, 86, 219, 0.35);
     color: white;
     z-index: 1;
 }

 /* تأكد من عدم تأثير البطاقات على بعضها */
 .values-container {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2.5rem;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2rem;
 }

 /* ============================================
   الوجه الأمامي والخلفي
   ============================================ */

 .value-front,
 .value-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     border-radius: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 2.5rem;
 }

 /* الوجه الأمامي */
 .value-front {
     background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
     box-shadow: 0 15px 50px rgba(26, 86, 219, 0.12);
     border: 2px solid transparent;
     position: relative;
     overflow: hidden;
     z-index: 2;
 }

 .value-card:hover .value-front {
     border-color: var(--primary-color);
 }

 /* تأثير اللمعان المتحرك */
 .card-shine {
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(45deg,
             transparent 30%,
             rgba(255, 255, 255, 0.4) 50%,
             transparent 70%);
     transform: rotate(45deg);
     animation: shine 4s infinite;
 }

 @keyframes shine {
     0% {
         left: -200%;
     }

     50%,
     100% {
         left: 200%;
     }
 }

 /* ============================================
   الأيقونة المتحركة
   ============================================ */

 .value-icon-wrapper {
     position: relative;
     width: 110px;
     height: 110px;
     margin-bottom: 1.8rem;
 }

 /* حلقة النبض */
 .icon-pulse {
     position: absolute;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     border-radius: 50%;
     opacity: 0.4;
     animation: pulse-ring 2.5s ease-out infinite;
 }

 @keyframes pulse-ring {
     0% {
         transform: scale(0.7);
         opacity: 0.6;
     }

     50% {
         transform: scale(1.3);
         opacity: 0.2;
     }

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

 /* الأيقونة نفسها */
 .value-icon-wrapper i {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 85px;
     height: 85px;
     background: var(--gradient-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.8rem;
     color: white;
     box-shadow: 0 12px 35px rgba(26, 86, 219, 0.4);
     z-index: 2;
     animation: icon-float 3.5s ease-in-out infinite;
 }

 @keyframes icon-float {

     0%,
     100% {
         transform: translate(-50%, -50%) translateY(0);
     }

     50% {
         transform: translate(-50%, -50%) translateY(-12px);
     }
 }

 /* العنوان */
 .value-front h5 {
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--dark-color);
     text-align: center;
     margin: 0;
     position: relative;
     z-index: 2;
 }

 /* ============================================
   الوجه الخلفي
   ============================================ */

 .value-back {
     background: var(--gradient-primary);
     transform: rotateY(180deg);
     box-shadow: 0 25px 70px rgba(26, 86, 219, 0.35);
     color: white;
 }

 .value-back p {
     font-size: 1.1rem;
     line-height: 1.9;
     text-align: center;
     margin: 0;
     color: white;
 }

 .decorative-line {
     width: 70px;
     height: 4px;
     background: white;
     border-radius: 10px;
     margin-top: 1.8rem;
     animation: expand-line 0.8s ease-out;
 }

 @keyframes expand-line {
     from {
         width: 0;
         opacity: 0;
     }

     to {
         width: 70px;
         opacity: 1;
     }
 }

 /* ============================================
   ألوان متنوعة للبطاقات
   ============================================ */

 .value-card:nth-child(1) .value-icon-wrapper i {
     background: linear-gradient(135deg, #1a56db, #0ea5e9);
 }

 .value-card:nth-child(2) .value-icon-wrapper i {
     background: linear-gradient(135deg, #0ea5e9, #06b6d4);
 }

 .value-card:nth-child(3) .value-icon-wrapper i {
     background: linear-gradient(135deg, #8b5cf6, #a855f7);
 }

 .value-card:nth-child(4) .value-icon-wrapper i {
     background: linear-gradient(135deg, #f59e0b, #f97316);
 }

 .value-card:nth-child(5) .value-icon-wrapper i {
     background: linear-gradient(135deg, #ec4899, #f43f5e);
 }

 .value-card:nth-child(6) .value-icon-wrapper i {
     background: linear-gradient(135deg, #10b981, #14b8a6);
 }

 .value-card:nth-child(1) .value-back {
     background: linear-gradient(135deg, #1a56db, #0ea5e9);
 }

 .value-card:nth-child(2) .value-back {
     background: linear-gradient(135deg, #0ea5e9, #06b6d4);
 }

 .value-card:nth-child(3) .value-back {
     background: linear-gradient(135deg, #8b5cf6, #a855f7);
 }

 .value-card:nth-child(4) .value-back {
     background: linear-gradient(135deg, #f59e0b, #f97316);
 }

 .value-card:nth-child(5) .value-back {
     background: linear-gradient(135deg, #ec4899, #f43f5e);
 }

 .value-card:nth-child(6) .value-back {
     background: linear-gradient(135deg, #10b981, #14b8a6);
 }

 .value-card:nth-child(1) .icon-pulse {
     background: linear-gradient(135deg, #1a56db, #0ea5e9);
 }

 .value-card:nth-child(2) .icon-pulse {
     background: linear-gradient(135deg, #0ea5e9, #06b6d4);
 }

 .value-card:nth-child(3) .icon-pulse {
     background: linear-gradient(135deg, #8b5cf6, #a855f7);
 }

 .value-card:nth-child(4) .icon-pulse {
     background: linear-gradient(135deg, #f59e0b, #f97316);
 }

 .value-card:nth-child(5) .icon-pulse {
     background: linear-gradient(135deg, #ec4899, #f43f5e);
 }

 .value-card:nth-child(6) .icon-pulse {
     background: linear-gradient(135deg, #10b981, #14b8a6);
 }

 /* ============================================
   Responsive
   ============================================ */

 @media (max-width: 991px) {
     .values-container {
         grid-template-columns: repeat(2, 1fr);
         gap: 2rem;
         padding: 0 1.5rem;
     }

     .value-card {
         height: 250px;
     }

     .value-icon-wrapper {
         width: 95px;
         height: 95px;
         margin-bottom: 1.5rem;
     }

     .value-icon-wrapper i {
         width: 75px;
         height: 75px;
         font-size: 2.3rem;
     }

     .value-front h5 {
         font-size: 1.3rem;
     }

     .value-back p {
         font-size: 1rem;
     }
 }

 @media (max-width: 767px) {
     .values-section {
         padding: 60px 0;
     }

     .values-container {
         grid-template-columns: 1fr;
         gap: 1.5rem;
         padding: 0 1rem;
     }

     .value-card {
         height: 230px;
     }

     .value-icon-wrapper {
         width: 85px;
         height: 85px;
         margin-bottom: 1.2rem;
     }

     .value-icon-wrapper i {
         width: 65px;
         height: 65px;
         font-size: 2rem;
     }

     .value-front h5 {
         font-size: 1.15rem;
     }

     .value-back p {
         font-size: 0.95rem;
         line-height: 1.7;
     }

     /* تقليل حجم الأشكال المتحركة */
     .shape {
         filter: blur(70px);
     }

     .shape-1 {
         width: 350px;
         height: 350px;
     }

     .shape-2 {
         width: 320px;
         height: 320px;
     }

     .shape-3 {
         width: 280px;
         height: 280px;
     }
 }

 @media (max-width: 480px) {
     .value-card {
         height: 210px;
     }

     .value-front,
     .value-back {
         padding: 2rem 1.5rem;
     }
 }