body {
         margin: 0;
         font-family: 'Cairo', sans-serif;
         background-color: #f9f9f9;
       }

       /* ===== شريط متحرك احترافي مع glow وتأثير أيقونة ===== */
       .animated-banner {
         width: 100%;
         margin: 25px auto;
         overflow: hidden;
         background: linear-gradient(135deg, #ff7e5f, #feb47b, #095668);
         padding: 15px 0;
         border-radius: 20px;
         position: relative;
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
       }

       .animated-banner::before {
         content: "";
         position: absolute;
         inset: 0;
         background: inherit;
         filter: blur(18px);
         z-index: -1;
         border-radius: inherit;
       }

       .banner-text {
         display: inline-block;
         color: #ffffff;
         font-size: 1.35rem;
         font-weight: bold;
         white-space: nowrap;
         text-decoration: none;
         animation: moveText 9s linear infinite;
         text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
       }

       .banner-text i {
         margin: 0 8px;
         animation: flicker 1.8s infinite;
       }

       /* حركة النص */
       @keyframes moveText {
         0% {
           transform: translateX(100%);
         }

         100% {
           transform: translateX(-100%);
         }
       }

       /* تأثير فلاش للأيقونة 🔥 */
       @keyframes flicker {

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

         50% {
           opacity: 0.6;
           transform: scale(1.15);
         }
       }

       /* Glow stronger عند hover */
       .banner-text:hover {
         text-shadow: 0 0 12px #fff, 0 0 25px #fff;
         letter-spacing: 1px;
       }


       /* 🎨 إعدادات أساسية */
       header {
         background-color: #e9eef9;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 12px 40px;
         flex-wrap: wrap;
         gap: 15px;
         position: relative;
         z-index: 100;
       }

       /* اللوجو */
       .logo img {
         height: 75px;
         transition: all 0.3s ease;
       }

       .logo img:hover {
         transform: scale(1.1);
       }

       /* زر اللغة */
       .lang-switch button {
         font-weight: bold;
         font-size: 0.95rem;
         background-color: #fff;
         padding: 8px 54px;
         border-radius: 20px;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
         transition: all 0.3s ease;
         cursor: pointer;
         border: none;

       }

       .lang-switch button:hover {
         background-color: #c8792e;
         color: #fff;
       }

       /* روابط التسجيل */
       .auth-links {
         display: flex;
         align-items: center;
         justify-content: flex-end;
         gap: 10px;
         margin-left: 200px;
         flex-wrap: wrap;
       }

       .auth-links a {
         display: flex;
         align-items: center;
         gap: 8px;
         color: #095668;
         font-weight: bold;
         text-decoration: none;
         font-size: 0.95rem;
         background-color: #fff;
         padding: 8px 14px;
         border-radius: 20px;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
         transition: all 0.3s ease;
       }

       .auth-links a:hover {
         background-color: #c8792e;
         color: #fff;
       }

       .auth-links i {
         font-size: 1.1rem;
       }

       /* الروابط العادية (للكبير فقط) */
       .nav-links {
         list-style: none;
         display: flex;
         gap: 15px;
         flex-wrap: wrap;
       }

       .nav-links a {
         color: #095668;
         text-decoration: none;
         padding: 10px 15px;
         display: block;
         font-weight: bold;
         border-radius: 8px;
         transition: 0.3s;
       }

       .nav-links a:hover {
         background-color: #c8792e;
         color: #fff;
       }

       /* زر المينيو */
       .menu-toggle {
         display: none;
         font-size: 1.8rem;
         color: #095668;
         cursor: pointer;
         transition: 0.3s;
         position: relative;
       }

       .menu-toggle:hover {
         color: #c8792e;
       }

       /* قائمة الموبايل */
       /* قائمة الموبايل */
       .mobile-menu {
         display: none;
         position: absolute;
         top: 100%;
         /* 👈 يخليها تبدأ من تحت المينيو مباشرة */
         right: 0;
         /* تظهر تحت الزر مباشرة */
         background: #ffffff;
         box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
         border-radius: 12px;
         width: 200px;
         text-align: center;
         overflow: hidden;
         z-index: 999;
         transform: translateY(10px);
         opacity: 0;
         transition: all 0.3s ease;
       }

       /* عرض عند التفعيل */
       .mobile-menu.active {
         display: block;
         opacity: 1;
         transform: translateY(0);
         /* 👈 تنزلق لتحت بسلاسة */
       }

       /* العناصر داخل القائمة */
       .mobile-menu ul {
         list-style: none;
         margin: 0;
         padding: 0;
       }

       .mobile-menu li {
         border-bottom: 1px solid #eee;
       }

       .mobile-menu li:last-child {
         border-bottom: none;
       }

       .mobile-menu a {
         display: block;
         padding: 12px;
         color: #095668;
         text-decoration: none;
         font-weight: bold;
         transition: 0.3s;
       }

       .mobile-menu a:hover {
         background-color: #c8792e;
         color: #fff;
         transform: scale(1.03);
       }


       /* انيميشن ناعم */
       @keyframes fadeSlide {
         from {
           opacity: 0;
           transform: translateY(-10px);
         }

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

       /* 📱 استجابة */
       @media (max-width: 1000px) {
         .nav-links {
           display: none;
         }

         .menu-toggle {
           display: block;
         }

         header {
           flex-direction: column;
           align-items: center;
           text-align: center;
           padding: 15px 20px;
         }

         .auth-links {
           justify-content: center;
         }
       }

       /* ✅ من 450px لحد 597px */
       @media (min-width: 450px) and (max-width: 597px) {
         header {
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 15px;
           padding: 10px 15px;
         }

         .logo img {
           height: clamp(95px, 12vw, 110px);
           /* يتغير حجمه تدريجياً */
         }

         /* ✅ الأزرار الأربعة جنب بعض وفي النص */
         .auth-links {
           display: flex;
           justify-content: center;
           /* توسيط أفقي */
           align-items: center;
           /* توسيط رأسي */
           gap: clamp(6px, 1.5vw, 10px);
           /* المسافة بينهم متجاوبة */
           flex-wrap: nowrap;
           /* كلهم في صف واحد */
           width: 10%;
           margin: 0 auto;
           transform: none;
         }

         .auth-links a {
           font-size: clamp(0.75rem, 2vw, 0.95rem);
           /* حجم الخط متجاوب */
           padding: clamp(5px, 1vw, 8px) clamp(10px, 2vw, 14px);
           /* مساحة متجاوبة */
           text-align: center;
           white-space: nowrap;
           border-radius: 20px;
           transition: all 0.3s ease;
         }

         .lang-switch button {
           margin-right: 0;
           font-size: clamp(0.75rem, 2vw, 0.9rem);
           padding: clamp(5px, 1vw, 8px) clamp(10px, 2vw, 14px);
         }

         .nav-links {
           justify-content: center;
           gap: 10px;
         }

         .nav-links a {
           text-align: center;
         }
       }

       /* ✅ من 598px لحد 768px */
       @media (min-width: 598px) and (max-width: 768px) {
         header {
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 15px;
           padding: 15px 20px;
         }

         .logo img {
           height: clamp(90px, 11vw, 105px);
           /* حجم متجاوب متناسق */
         }

         /* ✅ الأزرار الأربعة جنب بعض ومتمركزين */
         .auth-links {
           display: flex;
           justify-content: center;
           /* توسيط أفقي */
           align-items: center;
           /* توسيط رأسي */
           flex-wrap: nowrap;
           gap: 10px;
           width: 100%;
           margin: 0 auto;
           transform: none;
         }

         .auth-links a {
           font-size: clamp(0.85rem, 1.8vw, 0.95rem);
           padding: 8px 14px;
           text-align: center;
           white-space: nowrap;
           border-radius: 20px;
           transition: all 0.3s ease;
         }

         .lang-switch button {
           font-size: clamp(0.8rem, 1.5vw, 0.9rem);
           padding: 6px 12px;
           margin-right: 0;
         }

         .nav-links {
           justify-content: center;
           gap: 15px;
         }

         .nav-links a {
           text-align: center;
           font-size: clamp(0.85rem, 1.5vw, 0.95rem);
         }
       }

       /* ✅ من 769px لحد 1000px */
       @media (min-width: 769px) and (max-width: 1000px) {
         header {
           display: flex;
           flex-direction: column;
           /* يخلي العناصر فوق بعض */
           align-items: center;
           /* توسيط أفقي */
           justify-content: center;
           gap: 20px;
           padding: 15px 30px;
         }

         .logo img {
           height: clamp(95px, 10vw, 110px);
           /* متجاوب بشكل ناعم */
         }

         /* ✅ الأزرار الأربعة متوسطين في النص وجنب بعض */
         .auth-links {
           display: flex;
           justify-content: center;
           align-items: center;
           flex-wrap: nowrap;
           gap: 12px;
           width: 100%;
           margin: 0 auto;
           transform: none;
         }

         .auth-links a {
           font-size: clamp(0.85rem, 1.3vw, 1rem);
           padding: 8px 16px;
           border-radius: 20px;
           text-align: center;
           white-space: nowrap;
           transition: all 0.3s ease;
         }

         .lang-switch button {
           font-size: clamp(0.85rem, 1.2vw, 1rem);
           padding: 8px 14px;
           margin-right: 0;
         }

         .nav-links {
           justify-content: center;
           gap: 20px;
         }

         .nav-links a {
           text-align: center;
           font-size: clamp(0.9rem, 1.2vw, 1rem);
         }
       }

       /* ✅ من 1001px فما فوق (الوضع الكامل للديسكتوب) */
       @media (min-width: 1001px) {
         header {
           display: flex;
           flex-direction: row;
           /* يخلي العناصر جنب بعض */
           align-items: center;
           justify-content: space-between;
           padding: 15px 40px;
           gap: 0;
         }

         /* ✅ اللوجو */
         .logo img {
           height: 85px;
         }

         /* ✅ إظهار الـ NAV */
         nav {
           display: block !important;
           /* يرجع الnav */
           width: auto;
           margin: 0;
           padding: 0;
         }

         /* ✅ إظهار الروابط في صف أفقي */
         .nav-links {
           display: flex !important;
           flex-direction: row !important;
           /* أفقية */
           align-items: center;
           justify-content: flex-start;
           list-style: none;
           gap: 20px;
           margin: 0;
           padding: 0;
         }

         .nav-links li {
           display: inline-block;
         }

         .nav-links a {
           display: block;
           text-decoration: none;
           color: #095668;
           padding: 10px 15px;
           font-size: 1rem;
           font-weight: bold;
           border-radius: 6px;
           transition: background 0.3s ease;
         }

         .nav-links a:hover {
           background-color: #c8792e;
           color: #fff;
         }

         /* ✅ إخفاء أي مينيو */
         .menu-icon {
           display: none !important;
         }

         /* ✅ auth-links واللغة يرجعوا لمكانهم */
         .auth-links {
           display: flex !important;
           align-items: center;
           justify-content: flex-end;
           gap: 10px;
           flex-wrap: nowrap;
           width: auto;
           margin-left: auto;
           transform: none;
           margin-right: 20px;
         }

         .auth-links a {
           font-size: 0.95rem;
           padding: 8px 14px;
           border-radius: 20px;
           background: #fff;
           color: #095668;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
           transition: all 0.3s ease;
         }

         .auth-links a:hover {
           background-color: #c8792e;
           color: #fff;
         }

         .lang-switch button {
           font-size: 0.95rem;
           padding: 8px 14px;
           margin-right: 20px;
           border-radius: 20px;
           background: #fff;
           color: #095668;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
           cursor: pointer;
           transition: all 0.3s ease;
           margin-right: 40px;
         }

         .lang-switch button:hover {
           background-color: #c8792e;
           color: #fff;
         }
       }


       @media (max-width: 450px) {
         header {
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 10px;
           padding: 8px;
         }

         .logo img {
           height: 50px;
         }

         /* ✅ الأزرار في النص وتصغر تلقائيًا */
         .auth-links {
           display: flex;
           justify-content: center;
           /* ف النص */
           align-items: center;
           flex-wrap: wrap;
           /* لو الشاشة صغيرة جدًا ينزلوا سطر */
           width: 100%;
           gap: 6px;
           margin: 0 auto;
           transform: none;
         }

         .auth-links a {
           font-size: clamp(0.7rem, 2vw, 0.85rem);
           /* 👈 حجم متجاوب */
           padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 10px);
           /* 👈 مساحة متجاوبة */
           text-align: center;
           white-space: nowrap;
           transition: all 0.3s ease;
         }

         .lang-switch button {
           margin-right: 0;
           font-size: clamp(0.75rem, 2vw, 0.85rem);
           padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 12px);
         }

         .nav-links {
           flex-direction: column;
           align-items: center;
           width: 100%;
         }

         .nav-links a {
           width: 100%;
           text-align: center;
           padding: 10px;
         }
       }



       @media (max-width: 450px) {
         header {
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 15px;
           padding: 10px;
         }

         .logo img {
           height: 85px;
         }

         /* ✅ توسيط الأزرار جنب بعض */
         .auth-links {
           display: flex;
           flex-wrap: wrap;
           /* يخليهم ينزلوا سطر لو المساحة صغيرة */
           justify-content: center;
           /* يخليهم ف النص */
           align-items: center;
           width: 100%;
           gap: 6px;
           margin: 0 auto;
           transform: none;
         }

         .auth-links a {
           font-size: 0.8rem;
           padding: 6px 10px;
           text-align: center;
           white-space: nowrap;
           /* يمنع تكسر الكلام */
         }

         .lang-switch button {
           margin-right: 0;
           font-size: 0.8rem;
           padding: 6px 10px;
         }

         .nav-links {
           flex-direction: column;
           align-items: center;
           width: 100%;
         }

         .nav-links a {
           width: 100%;
           text-align: center;
           padding: 10px;
         }
       }


       /* ====== الهيرو ====== */
       .hero {
         background: linear-gradient(rgba(18, 84, 99, 0.6), rgba(31, 103, 120, 0.6)),
           url('ph1.jpg') center/cover no-repeat;
         color: white;
         text-align: center;
         padding: 100px 20px;
       }

       .hero h1 {
         font-size: 2.5rem;
         margin-bottom: 10px;
       }

       .hero p {
         font-size: 1.2rem;

         margin-bottom: 20px;
       }

       .btn {
         background-color: #c8792e;
         color: white;
         padding: 10px 25px;
         text-decoration: none;
         border-radius: 4px;
         transition: 0.3s;
       }

       .btn:hover {
         background-color: #a45f22;
       }


       /*النبذة التعريفية / من نحن*/
       .about-section {
         position: relative;
         padding: 80px 20px;
         background: linear-gradient(to left, rgba(9, 86, 104, 0.85), rgba(200, 121, 46, 0.85)),
           url('about-bg.jpg') center/cover no-repeat;
         color: white;
         overflow: hidden;
         margin-top: 30px;
       }

       .about-overlay {
         max-width: 1000px;
         margin: auto;
       }

       .about-container {
         display: flex;
         flex-direction: column;
         gap: 50px;
       }

       .about-block {
         background: rgba(255, 255, 255, 0.1);
         padding: 30px;
         border-radius: 15px;
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
         backdrop-filter: blur(6px);
         transform: translateY(50px);
         opacity: 0;
         transition: all 0.8s ease;
       }

       .about-title {
         font-size: 2rem;
         margin-bottom: 15px;
         font-weight: bold;
         color: #ffdf9e;

       }

       .about-text {
         font-size: 1.1rem;
         line-height: 1.8;
         font-weight: bold;
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         color: #f5f5f5;
       }

       /* إظهار عند النزول */
       .about-block.show {
         transform: translateY(0);
         opacity: 1;
       }


       /* When visible */
       .show {
         opacity: 1;
         transform: translateY(0);
       }

       /* Hover effect */
       .about-block:hover {
         transform: scale(1.02);
       }



       /* ====== الخدمات ====== */

       .services-title {
         text-align: center;
         margin: 50px 0 30px;
       }

       .services-btn {
         font-size: 2.2rem;
         font-weight: bold;
         padding: 18px 50px;
         background: linear-gradient(135deg, #ff7e5f, #feb47b);
         color: white;
         border: none;
         border-radius: 12px;
         cursor: pointer;
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
         position: relative;
         overflow: hidden;
         transition: all 0.4s ease;
       }

       .services-btn::before {
         content: "";
         position: absolute;
         top: 0;
         left: -100%;
         width: 200%;
         height: 100%;
         background: rgba(255, 255, 255, 0.2);
         transform: skewX(-20deg);
         transition: all 0.5s ease;
       }

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

       .services-btn:hover {
         transform: scale(1.08) rotate(-1deg);
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
       }

       /* أنيميشن نبض */
       @keyframes pulse {
         0% {
           transform: scale(1);
         }

         50% {
           transform: scale(1.08);
         }

         100% {
           transform: scale(1);
         }
       }


       .custom-services {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         /* 4 كروت في الصف */
         gap: 25px;
         padding: 50px 30px;

       }

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

       .service-title {
         margin-top: 12px;
         font-size: 1.2rem;
         color: #0d7a94;
         font-weight: bold;
         transition: color 0.3s ease;
       }

       .service-item:hover .service-title {
         color: #ff7e5f;
       }

       /* الكارت */
       .custom-flip-card {
         background: transparent;
         width: 88%;
         height: 280px;
         perspective: 1000px;
         transition: transform 0.3s ease;
         margin-bottom: 70px;
       }

       .custom-flip-card:hover {
         transform: translateY(-10px);
       }

       .custom-flip-inner {
         position: relative;
         width: 100%;
         height: 100%;
         text-align: center;
         transition: transform 0.8s;
         transform-style: preserve-3d;
       }

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

       .custom-front,
       .custom-back {
         position: absolute;
         width: 100%;
         height: 100%;
         border-radius: 15px;
         backface-visibility: hidden;
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 20px;
       }

       @keyframes zoomMove {
         0% {
           background-size: 100%;
         }

         50% {
           background-size: 110%;
         }

         100% {
           background-size: 100%;
         }
       }

       /* الوجه الأمامي مع الصور والتظليل */
       .custom-front {
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
       }

       /* خلفيات الكروت مع طبقة تظليل */
       .custom-card1 {
         background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
           url('ct.jpg');
       }

       .custom-card2 {
         background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
           url('jop.png');
       }

       .custom-card3 {
         background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
           url('plus.png');
       }

       .custom-card4 {
         background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
           url('doc.png');
       }

       .custom-card5 {
         background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
           url('life.jpg');
       }

       .custom-card6 {
         background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
           url('nurse.png');
       }

       .custom-card7 {
         background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
           url('rep.png');
       }

       .custom-card8 {
         background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
           url('serv.png');
       }


       /* الوجه الخلفي */
       .custom-back {
         background: linear-gradient(135deg, #0d7a94, #095668);
         color: #000;
         transform: rotateY(180deg);
         border-radius: 15px;
         font-size: 1.1rem;
         line-height: 1.8;
         font-weight: bold;
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         padding: 15px;
         display: flex;
         align-items: center;
         justify-content: center;
       }

       /* ضبط مقاس الشاشات*/
       /* للأجهزة اللوحية (Tablet) */
       @media (max-width: 768px) {
         .custom-services {
           grid-template-columns: repeat(2, 1fr);
         }
       }

       /* للهواتف الصغيرة (400px – 450px) */
       @media (max-width: 450px) {
         .custom-services {
           grid-template-columns: 1fr;
         }

         .custom-flip-card {
           height: 220px;
           margin-bottom: 40px;
         }

         .service-title {
           font-size: 1rem;
         }
       }




       /*الرؤية والرسالة والاهداف*/
       .vision-section {
         padding: 80px 20px;
         background: linear-gradient(135deg, #f9f9f9, #e9eef9);
         text-align: center;
       }

       .vision-container {
         display: flex;
         flex-wrap: wrap;
         gap: 30px;
         justify-content: center;
       }

       .vision-card {
         background: white;
         border-radius: 20px;
         padding: 30px 20px;
         width: 300px;
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
         transition: all 0.4s ease;
         transform: translateY(50px);
         opacity: 0;
         position: relative;
         overflow: hidden;
       }

       .vision-card:hover {
         transform: translateY(-10px) scale(1.05);
         box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
       }

       .vision-card::before {
         content: "";
         position: absolute;
         top: -50%;
         left: -50%;
         width: 200%;
         height: 200%;
         background: rgba(200, 121, 46, 0.05);
         transform: rotate(25deg);
         transition: all 0.6s ease;
         z-index: 0;
       }

       .vision-card:hover::before {
         top: 0;
         left: 0;
       }

       .vision-icon {
         background: linear-gradient(135deg, #095668, #c8792e);
         color: white;
         font-size: 2rem;
         width: 70px;
         height: 70px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         margin: 0 auto 15px;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
         z-index: 1;
         position: relative;
       }

       .vision-card h3 {
         font-size: 1.4rem;
         margin-bottom: 10px;
         color: #095668;
         z-index: 1;
         position: relative;
       }

       .vision-card p {
         font-size: 1.1rem;
         line-height: 1.8;
         font-weight: bold;
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         color: #555;
         line-height: 1.6;
         z-index: 1;
         position: relative;
       }

       /* Animation on scroll */
       .hidden {
         opacity: 0;
         transform: translateY(50px);
         transition: all 0.8s ease;
       }

       .show {
         opacity: 1;
         transform: translateY(0);
       }

       /* Responsive */
       @media (max-width: 768px) {
         .vision-card {
           width: 100%;
         }
       }


       /* Hover effect */
       .vision-card:hover {
         transform: translateY(-10px) scale(1.05);
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
       }

       /* ===== Strategic Section ===== */
       .strategic-section {
         width: 60%;
         margin: 70px auto;
         display: flex;
         flex-direction: column;
         gap: 40px;
         animation: fadeSection 1s forwards;
         background: linear-gradient(135deg, #f9f9f9, #e9eef9);
       }

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

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

       .strategic-item {
         position: relative;
         background: linear-gradient(135deg, #f9f9f9, #e9eef9);
         border-radius: 16px;
         overflow: hidden;
         padding: 35px 32px;
         box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15);
         transition: transform .4s ease;
       }

       .strategic-item:hover {
         transform: translateY(-6px);
       }

       /* gradient layer inside block  */
       .strategic-item::before {
         content: "";
         position: absolute;
         inset: 0;
         background: linear-gradient(115deg, #ff7e5f, #095668, #feb47b);
         opacity: .07;
         animation: moveGradient 5s linear infinite;
         z-index: -1;
       }

       @keyframes moveGradient {
         0% {
           transform: translateX(-30%);
         }

         100% {
           transform: translateX(30%);
         }
       }

       .strategic-item h2 {
         color: #095668;
         font-size: 1.5rem;
         font-weight: bold;
         margin-bottom: 12px;
         transition: color .4s;
       }

       .strategic-item p {
         color: #333;
         font-size: 1.1rem;
         line-height: 1.8;
         font-weight: bold;
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
       }

       .strategic-item:hover h2 {
         color: #c8792e;
       }




       /* Right Sidebar */
       .right-sidebar {
         position: fixed;
         top: 50%;
         right: 0;
         transform: translateY(-50%);
         width: 52px;
         background-color: var(--white);
         border-radius: 8px 0 0 8px;
         box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
         z-index: 1000;
       }

       .sidebar-item {
         display: block;
         text-align: center;
         padding: 10px 0;
         color: var(--dark-gray);
         text-decoration: none;
         font-size: 12px;
         border-bottom: 1px solid #eee;
         transition: background-color 0.3s;
       }

       .sidebar-item i {
         font-size: 20px;
         display: block;
         margin-bottom: 5px;
       }

       .sidebar-item:hover {
         background-color: #f0f0f0;
       }

       .chat-btn,
       .whatsapp-btn {
         background-color: #e5e5e5;
       }

       .chat-btn:hover,
       .whatsapp-btn:hover {
         background-color: #dcdcdc;
       }

       .up-btn {
         background-color: #c8792e;
         color: var(--white);
         font-size: 16px;
         border-radius: 0 0 0 8px;
       }

       .up-btn:hover {
         background-color: #095668;
       }


       .up-btn i {
         font-size: 20px;
       }


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

       .feedback-card {
         background-color: white;
         padding: 20px;
         border-radius: 6px;
       }

       .stats {
         display: flex;
         justify-content: center;
         gap: 40px;
         margin-top: 30px;
       }

       .stat h3 {
         font-size: 2rem;
         color: #c8792e;
       }

       .reviews-section {
         padding: 50px;
         background: #f9f9f9;
         text-align: center;
       }

       .reviews-title {
         font-size: 2rem;
         margin-bottom: 30px;
         color: #0d7a94;
       }

       .reviews-container {
         position: relative;
         max-width: 600px;
         margin: auto;
       }

       .review {
         display: none;
         background: white;
         padding: 25px;
         border-radius: 15px;
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
         animation: fadeIn 0.5s ease-in-out;
       }

       .review.active {
         display: block;
       }

       .review-text {
         font-size: 1.2rem;
         margin-bottom: 15px;
         color: #333;
         font-style: italic;
       }

       .review-name {
         font-weight: bold;
         margin-bottom: 10px;
         color: #0d7a94;
       }

       .stars {
         font-size: 1.5rem;
         color: #ccc;
         cursor: pointer;
         letter-spacing: 5px;
       }

       .stars .active {
         color: gold;
       }

       .reviews-controls button {
         margin: 10px;
         padding: 10px 20px;
         background: #0d7a94;
         color: white;
         border: none;
         border-radius: 8px;
         cursor: pointer;
         transition: background 0.3s ease;
       }

       .reviews-controls button:hover {
         background: #095668;
       }

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

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



       #contact {
         padding: 100px 5%;
         text-align: center;
         position: relative;
         color: #ffffff;
         background-color: #095668;
       }

       #contact h2 {
         font-size: 2.5em;
         margin-bottom: 20px;
         border-bottom: 2px solid #4a80b5;
         display: inline-block;
         padding-bottom: 5px;
         animation: fadeIn 1.5s ease-in-out;
         color: #ffffff;
       }

       #contact p {
         font-size: 1em;
         margin-bottom: 30px;
         color: #e0e0e0;
         animation: fadeIn 1.5s ease-in-out;
       }

       .contact-container {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 30px;
         margin-top: 30px;
       }

       .contact-info {
         background-color: #142d4c;
         padding: 30px;
         border-radius: 8px;
         text-align: left;
         animation: slideInLeft 1s ease-out;
       }

       @keyframes slideInLeft {
         0% {
           transform: translateX(-100%);
           opacity: 0;
         }

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

       .contact-info h3 {
         font-size: 1.8em;
         margin-bottom: 20px;
         color: #d1a4ff;
       }

       .contact-info p {
         font-size: 1em;
         line-height: 1.8;
         margin-bottom: 15px;
         color: #e0e0e0;
         display: flex;
         align-items: center;
         gap: 10px;
       }

       .contact-info i {
         color: #8a52ff;
         font-size: 1.2em;
       }

       .contact-info a {
         color: #b1cd10;
         font-weight: bold;
       }

       /* ✅ تحسين الشكل للشاشات الصغيرة */
       @media (max-width: 450px) {
         .contact-info {
           padding: 20px;
           text-align: center;
           /* يخلي المحتوى في النص */
         }

         .contact-info h3 {
           font-size: 1.4em;
           margin-bottom: 15px;
         }

         .contact-info p {
           font-size: 0.9em;
           flex-direction: column;
           /* يخلي كل عنصر تحت التاني لو المكان ضيق */
           align-items: center;
           text-align: center;
         }

         .contact-info a {
           font-size: 0.9em;
           word-break: break-all;
         }
       }

       .social-links {
         margin-top: 25px;
         display: flex;
         gap: 15px;
       }

       .social-links a {
         color: #8a52ff;
         font-size: 1.5em;
         transition: color 0.3s ease;
       }

       .social-links a:hover {
         color: #d1a4ff;
       }

       .contact-form {
         background-color: #142d4c;
         padding: 30px;
         border-radius: 8px;
         text-align: left;
         animation: slideInRight 1s ease-out;
       }

       @keyframes slideInRight {
         0% {
           transform: translateX(100%);
           opacity: 0;
         }

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

       .contact-form h3 {
         font-size: 1.8em;
         margin-bottom: 20px;
         color: #d1a4ff;
       }

       .form-group {
         margin-bottom: 20px;
       }

       .form-group label {
         display: block;
         margin-bottom: 5px;
         color: #ffffff;
         font-weight: bold;
       }

       .form-group input[type="text"],
       .form-group input[type="email"],
       .form-group textarea {
         width: 100%;
         padding: 10px;
         border: 1px solid #2e2f47;
         border-radius: 5px;
         background-color: #2e2f47;
         color: #ffffff;
         font-size: 1em;
       }

       .form-group textarea {
         resize: vertical;
       }

       .submit-btn {
         background-color: #8a52ff;
         color: #ffffff;
         padding: 12px 25px;
         border: none;
         border-radius: 5px;
         font-size: 1.1em;
         cursor: pointer;
         transition: background-color 0.3s ease;
         font-weight: bold;
         display: flex;
         align-items: center;
         gap: 10px;
       }

       .submit-btn:hover {
         background-color: #a673ff;
       }


       /* ====== الفوتر ====== */
       footer {
         background-color: #095668;
         color: white;
         text-align: center;
         padding: 15px;
       }
             #contact p,
             .contact-info p,
             .contact-form p,
             .contact-info a,
             .contact-form label,
             .form-group input,
             .form-group textarea {
               word-wrap: break-word;
               overflow-wrap: break-word;
               white-space: normal;
               max-width: 100%;
               box-sizing: border-box;
             }
      
             #contact,
             .contact-info,
             .contact-form {
               overflow-x: hidden;
             }
      
             @media (max-width: 450px) {
      
               #contact p,
               .contact-info p,
               .contact-form p {
                 text-align: center;
                 word-break: break-word;
                 line-height: 1.6;
                 padding: 0 5px;
               }
             }

                         @media (min-width: 700px) and (max-width: 1030px) {
                           .contact-container {
                             grid-template-columns: 1fr;
                             gap: 40px;
                           }
            
                           .contact-info,
                           .contact-form {
                             text-align: center;
                             padding: 25px;
                           }
            
                           .contact-info p {
                             flex-direction: column;
                             align-items: center;
                             text-align: center;
                           }
            
                           .contact-info h3,
                           .contact-form h3 {
                             font-size: 1.6em;
                           }
            
                           .form-group input,
                           .form-group textarea {
                             font-size: 0.95em;
                           }
            
                           .submit-btn {
                             justify-content: center;
                           }
                         }


/* ===============================
   Partners Section – Clean Pro
================================ */

.partners-section {
  padding: 100px 15px;
  background: #f6f8f9;
}

/* ===== Section Header ===== */
.section-title {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: #095668;
  margin-bottom: 12px;
}

.section-title::after {
  content: "";
  width: 80px;
  height: 3px;
  background: #ff7e5f;
  display: block;
  margin: 14px auto 0;
}

.section-desc {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 70px;
  font-size: 1.1rem;
  line-height: 1.9;
  color: #555;
}

/* ===== Main Article Container ===== */
.article-partners {
  max-width: 1100px;
  margin: auto;
  padding: 60px 60px;
background: #ECE9E6;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FFFFFF, #ECE9E6);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 16px;
  border: 1px solid #e6e6e6;
}

/* Article Head */
.article-title {
  font-size: 1.9rem;
  color: #095668;
  margin-bottom: 15px;
}

.article-summary {
  font-size: 1.05rem;
  color: #444;
  line-height: 2;
  margin-bottom: 60px;
}

/* ===== Partner Entry ===== */
.partner-entry {
  margin-bottom: 70px;
  padding-bottom: 60px;
  border-bottom: 1px solid #eaeaea;
}

.partner-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Type Label */
.partner-tag {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #fff;
}

.partner-tag.university {
  background: #095668;
}

.partner-tag.hospital {
  background: #063f4c;
}

/* Titles */
.partner-entry h4 {
  font-size: 1.5rem;
  color: #095668;
  margin: 8px 0 6px;
}

.partner-entry h5 {
  font-size: 1.05rem;
  color: #555;
  margin-bottom: 20px;
  font-weight: 500;
}

/* Text */
.partner-entry p {
  font-size: 1.05rem;
  line-height: 2.1;
  color: #333;
  max-width: 950px;
}

/* ===== Images ===== */
.partner-images {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.partner-images img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #ddd;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.partner-images img:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .article-partners {
    padding: 40px 25px;
  }

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

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