:root {
    --current-dir: right;
}
* {
    direction: rtl;
	}

    body {
        direction: rtl;
        font-family: 'Tajawal', sans-serif;
        font-weight: 400;
    }

    .btn-primary {
        /* background: linear-gradient(135deg, #15314b 0%, #2c8d44 100%); */
        background: linear-gradient(135deg, #81D4FA 0%, #29B6F6 100%);

        transition: all 0.3s
    cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }


    .btn-primary:hover {
        background: linear-gradient(135deg, #29B6F6 0%, #81D4FA 100%);
    }

    .bg-primary-gradient {
        background: linear-gradient(135deg, #81D4FA 0%, #29B6F6 100%);
    }

    .primary-color {
        color: #29B6F6;
    }

    .text-position {
        text-align: right;
    }

    .shape path {
        fill: #29B6F6; /* solid color */
        transition: fill 0.3s ease;
      }

      .shape:hover path {
        fill: #81D4FA;
      }

      .shape circle {
        fill: #29B6F6 !important;
        transition: fill 0.3s ease;
      }

      .shape:hover circle {
        fill: #81D4FA !important;
      }

      .flip-x {
        transform: scaleX(-1);
      }

      

    /*Start Animations*/
@-webkit-keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}
@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}
@-webkit-keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}
	50% {
		opacity: 1;
	}
}
@keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}
	50% {
		opacity: 1;
	}
}
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
  }

  @keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(25px) rotate(-8deg); }
  }

  @keyframes blob {
    0%, 100% { transform: scale(1) translate(0, 0); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { transform: scale(1.05) translate(20px, -10px); border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%; }
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-float-slow {
    animation: float-slow 10s ease-in-out infinite;
  }

  .animate-blob {
    animation: blob 8s ease-in-out infinite;
  }