@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap');

 * {
   font-family: 'Cairo', sans-serif;
 }

 /* Custom Animations */

 /* Gradient Text */
 .gradient-text {
   background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 /* Card Hover Effect */
 .card-hover {
   transition: all 0.3s ease;
 }

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

 /* Mobile Menu Animation */
 #mobileMenu {
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: max-height 0.5s ease, opacity 0.35s ease, padding 0.35s ease;
   padding-bottom: 0;
 }

 #mobileMenu.open {
   max-height: 500px;
   /* غيّرها حسب طول القائمة */
   opacity: 1;
   padding-bottom: 1rem;
 }


 /* Scroll Animation Trigger */
 .scroll-animate {
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.8s ease-out;
 }

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

 /* Custom Scrollbar */
 ::-webkit-scrollbar {
   width: 10px;
 }

 ::-webkit-scrollbar-track {
   background: #f1f1f1;
 }

 ::-webkit-scrollbar-thumb {
   background: #1E40AF;
   border-radius: 5px;
 }

 ::-webkit-scrollbar-thumb:hover {
   background: #1e3a8a;
 }

 

 /* ضروري: تحكم بسيط في السلوك البصري */






 /*heder*/

 .line {
   fill: none;
   stroke: rgb(0, 0, 0);
   /* غيّرها حسب لون خلفيتك */
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 3;
   transition:
     stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
     stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
 }

 .line-top-bottom {
   stroke-dasharray: 12 63;
 }

 /* لما يتفعل (تتحول لعلامة +) */
 .peer:checked+svg {
   transform: rotate(45deg);
 }

 .peer:checked+svg .line-top-bottom {
   stroke-dasharray: 20 300;
   stroke-dashoffset: -32.42;
 }







 /*adress title*/
.about-title::before,
.about-title::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 3px solid #0400ff;
}

.about-title::before {
  top: -6px;
  left: -20px;
  border-right: none;
  border-bottom: none;
}

.about-title::after {
  bottom: -6px;
  right: -20px;
  border-left: none;
  border-top: none;
}






 /* الدائرة الخلفية */


 /*الدواير اللي بتلف*/

 .venn {
   margin: 0 auto;
   /* تخليها في النص أفقياً */
   display: block;
   /* مهم عشان margin auto يشتغل */
   overflow: hidden;
   position: relative;
   border-radius: 50%;
   background: #00337A;
   text-transform: uppercase;
   font-size: 24px;
   color: white;
   font-weight: bold;
   line-height: 1;
   width: 50vmin;
   height: 50vmin;
   padding: 40px;
 }

 .venn .title {
   position: relative;
   z-index: 1;
   text-align: center;
   display: block;
   font-size: 32px;
 }

 .venn .subtitle {
   position: absolute;
   inset: 53% 0 0 0;
   text-align: center;
   font-size: 28px;
 }

 .venn__circles {
   position: absolute;
   inset: auto 0 12% 0;
   margin: auto;
   width: 78%;
   height: 73%;
   transform-origin: 50% 55%;
   animation: venn_rotate 7s linear infinite;
 }

 .venn__circles i {
   animation: venn_rotate 7s linear infinite;
   animation-direction: reverse;
   position: absolute;
   bottom: 0;
   margin: auto;
   width: 62%;
   aspect-ratio: 1/1;
   border-radius: 50%;
   background: rgba(51, 91, 205, 0.5);
 }

 /* التلات دواير */
 .venn__circles i:nth-child(1) {
   left: 0;
 }

 .venn__circles i:nth-child(2) {
   right: 0;
   --animation-delay: calc(-7s / 3 * 2);
 }

 .venn__circles i:nth-child(3) {
   left: 0;
   right: 0;
   bottom: auto;
   --animation-delay: calc(-7s / 3);
 }

 .venn__circles em {
   font-style: normal;
   position: absolute;
   inset: 35% 5%;
   animation: venn_rotate 7s linear infinite;
   animation-delay: var(--animation-delay);
   display: flex;
   align-items: flex-end;
   justify-content: center;
 }

 .venn__circles em:after {
   content: attr(data-text);
   text-align: center;
   width: 100%;
   animation: venn_rotate 7s linear infinite;
   animation-delay: var(--animation-delay);
   animation-direction: reverse;
 }

@media (max-width: 640px) {
  .venn {
    width: 80vmin;   /* بدل 50vmin */
    height: 80vmin;  /* نفس النسبة */
  }
}

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

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




 /*services*/
 .circle-before {
   position: absolute;
   top: 0;
   width: 150px;
   height: 150px;
   background-color: #1C398E;
   border: 6px solid #FFDE59;
   border-radius: 50%;
   opacity: 0.5;
   z-index: 10;
   transition: all 0.6s;
 }

 /* لما اعمل hover على الكارت، خلي النصوص كلها أبيض */
 .single-service:hover .title,
 .single-service:hover .description,
 .single-service:hover a {
   color: white !important;
 }

 .single-service .icon {
   background-color: #1C398E;
   color: #ffffff;
   transition: all 0.3s ease;
   width: 70px !important;
   height: 70px !important;
   line-height: 70px !important;
   font-size: 40px !important;
 }

 /* كمان ممكن نغير لون الأيقونة لو حبيت تبقى متناسقة */
 .s3r {
  transition: color 0s; /* مفيش تأخير في الحالة العادية */
}

.single-service:hover .s3r {
  color: #ffffff;
  transition-delay: 0.3s; /* التأخير يشتغل بس أثناء الهوفر */
}



 /* 🔸 نسخة عربية (دائرة على الشمال) */
 .dir-rtl .circle-before {
   left: 0;
   transform: translate(-40%, -40%);
 }

 .dir-rtl .single-service:hover .circle-before {
   width: 100%;
   height: 100%;
   transform: none;
   border: 0;
   border-radius: 0;
   opacity: 1;
 }







 /* Custom CSS for Tailwind Integration */

 /* Define Custom Color (Replace with your actual Tailwind config value if needed) */
 :root {
   --finix-primary: #1C398E;
   /* The red color used extensively */
 }

 .text-finix-primary {
   color: var(--finix-primary);
 }

 
 /* Feature Item Styling */
 .feature-item {
   background-color: #fff;
   padding: 30px;
   margin: 30px;
   position: relative;
   overflow: hidden;
   transition: transform 0.5s ease-in-out;
   /* Tailwind equivalent: transition-transform duration-500 */
   border-radius: 0.5rem;
   /* Added for a slight modern touch, adjust as needed */
 }

 /* Before element for Feature Item */
 .feature-item::before {
   content: "";
  position: absolute;
  top: -85px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 180px;
  background-color: #aebbe0;
  border-radius: 50% / 60%;
  z-index: 1;
 }

 /* Feature Icon Styling */
 .feature-item .ft-icon i {
   position: relative;
   z-index: 2;
   /* Ensure icon is above the ::before element */
   color: var(--finix-primary);
   background-color: #fff;
   height: 97px;
   width: 100px;
   line-height: 97px;
   border-radius: 50%;
   font-size: 31px;
   transition: background-color 0.5s, color 0.5s;
   /* Tailwind equivalent: transition duration-500 */
 }

 /* Hover Effects */
 .feature-item:hover {
   transform: translateY(-10px);
 }

 .feature-item:hover .ft-icon i {
   background-color: var(--finix-primary);
   color: #fff;
 }

 /* Play Animation Button Styling */
 .play-animation-btn {
   height: 90px;
   width: 90px;
   display: inline-flex;
   /* Changed from inline-block for better icon centering */
   justify-content: center;
   align-items: center;
   font-size: 55px;
   color: var(--finix-primary);
   background-color: #fff;
   border-radius: 50%;
   position: absolute;
   /* Adjust these values based on the final layout of your image */
   right: 50px;
   /* Reduced value from original 262px for modern relative positioning */
   bottom: 50px;
   z-index: 10;
 }

 .play-animation-btn i {
   position: relative;
   z-index: 2;
   /* Ensure icon is above the animating circle */
 }

 /* Play Button Animation */
 .play-animation-btn::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 90px;
   width: 90px;
   background-color: var(--finix-primary);
   border-radius: 50%;
   animation: playbtn 1.6s ease-out infinite;
   z-index: 1;
 }

 @keyframes playbtn {

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

   50% {
     transform: scale(1.5);
     opacity: 0.7;
   }

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