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

body {
    font-family: "Almarai", sans-serif;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

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

.hover\:scale-102:hover {
    transform: scale(1.02);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

.backdrop-blur-md {
    backdrop-filter: blur(12px);
}

.bg-clip-text {
    background-clip: text;
    -webkit-background-clip: text;
}

.text-transparent {
    color: transparent;
}

[dir="rtl"] .translate-x-full {
    transform: translateX(100%);
}

[dir="rtl"] .translate-x-0 {
    transform: translateX(0);
}

.transition-all {
    transition: all 0.3s ease;
}

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

.transition-colors {
    transition: color 0.3s ease, background-color 0.3s ease;
}

.transition-opacity {
    transition: opacity 0.3s ease;
}

.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

.group:hover .group-hover\:translate-x-1 {
    transform: translateX(0.25rem);
}

.group:hover .group-hover\:grayscale-0 {
    filter: grayscale(0);
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.hidden {
    display: none;
}

.block {
    display: block;
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-0 {
    --tw-brightness: brightness(0);
}

.invert {
    --tw-invert: invert(100%);
}

.grayscale {
    --tw-grayscale: grayscale(100%);
}

.grayscale-0 {
    --tw-grayscale: grayscale(0);
}

.drop-shadow-lg {
    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
}
/* Learning management */

.images-inside-text{
    position: absolute;
    background-color: #5A86FF;
    top: 75%;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: 0.5s;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
}

.images-inside-text-head{
    position: absolute;
    background: linear-gradient(to bottom, transparent, #5A86FF);
    top: 75%;
    left: 3px;
    right: 3px;
    bottom: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.9;
    transition: 0.5s;
    box-sizing: border-box;
}

.images-main-div:hover .images-inside-text{
    opacity: 1;
    top: 0;
    transform: scale(1, 1);
}

.images-main-div:hover .images-inside-text-head{
    opacity: 0;
    transform: scale(0.5, 0.5);
}

h1,h2,h3,h4,h5,h6,p{
    color: rgb(55 64 81);
}
.text-white{
    color: #ffff !important;
}

/* Lock icon */


.lock-icon{
    position: absolute;
    width: 24px;
    height: 29px;
    left: 109px;
    top: 16px;
}

/* Add this to your CSS file */
.gradient-border {
  padding: 1px;
  border-radius: 0.4rem; /* match Tailwind's rounded-lg */
  background: linear-gradient(to bottom, #0075E2, #FFC857);
}