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: 10px 40px;
       }

       .logo img {
           height: 75px;
           transition: all 0.3s ease;

       }

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

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

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


       /* روابط تسجيل الدخول */
       .auth-links {
           display: flex;
           align-items: center;
           gap: 10px;
           /* المسافة بين الزرين */
           justify-content: flex-end;
           /* يخليهم في أقصى اليمين */
           margin-left: auto;
           transform: translate(-40px);
       }

       .auth-links a {
           display: flex;
           align-items: center;
           gap: 8px;
           color: #095668;
           font-weight: bold;
           text-decoration: none;
           font-size: 0.95rem;
           background-color: #ffffff;
           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: #ffffff;
       }

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



       .nav-links {
           list-style: none;
           display: flex;
           margin: 0;
           padding: 0;
       }

       .nav-links li {
           position: relative;
       }

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

       .nav-links a:hover {
           background-color: #c8792e;
           border-radius: 4px;
       }

       /* Dropdown */
       .dropdown-menu {
           display: none;
           position: absolute;
           background-color: white;
           min-width: 80px;
           top: 40px;
           left: 0.5;
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
           border-radius: 4px;
           z-index: 999;
       }

       .dropdown-menu li a {
           color: #095668;
           padding: 10px 15px;
       }

       .dropdown-menu li a:hover {
           background-color: #f4f4f4;
       }

       .dropdown:hover .dropdown-menu {
           display: block;
       }

       /* ضبط مقاس الشاشات*/
       /* للأجهزة اللوحية */
       @media (max-width: 768px) {
           header {
               flex-wrap: wrap;
               padding: 10px 20px;
           }

           .nav-links {
               flex-wrap: wrap;
               gap: 10px;
           }
       }

       /* للهواتف (400px – 450px) */
       @media (max-width: 450px) {
           header {
               flex-direction: column;
               align-items: center;
               gap: 15px;
               padding: 10px;
           }

           .logo img {
               height: 60px;
           }

           .auth-links {
               transform: none;
               margin-left: 0;
               gap: 8px;
           }

           .auth-links a {
               font-size: 0.85rem;
               padding: 6px 12px;
           }

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

           .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: 60px;
           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: 1.2em;
           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: #000000;
           font-weight: bold;
       }

       .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;
       }