/* Add custom CSS styles below */ 
:root {
    --color-primary:#18588C;
    --color-primary-dark:#18588C;
    --color-primary-light: #ebd2ae;
    --color-primary-reverse: #eee;
    --f-h: white;
    --1: #213655;
    --2:#213655;
    --logo: url("https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/vXNbRB/O7DZO5DGc6g0n6euCL7RK9NTwexQT7h3v0vKRheU.png");
    --img-back: url("");
    --col-back: #F3ECE6;
    --pr-back:#fff;
    --pr-color:var(--1);
    --linear: linear-gradient(-225deg, #000 0, var(--color-primary) 29%, #000 67%, #68111b 100%);
}


body.index:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 999999;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* دعم Safari */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: var(--logo);
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 360px;
    animation-name: fade-in;
    animation-duration: 2.5s;
    transform: scale(0);
    border: none;
}

@keyframes fade-in {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    75% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(.1);
    }
}
@keyframes logo-movement {
  0% {
    opacity: 0;
    transform: translate(-100%, -50%) scale(0.6) rotate(-30deg); 
  }
  25% {
    opacity: 1;
    transform: translate(-30vw, -50%) scale(1.1) rotate(10deg); 
  }
  50% {
    opacity: 1;
    transform: translate(50vw, -50%) scale(1.5) rotate(0deg); 
  }
  75% {
    opacity: 1;
    transform: translate(70vw, -50%) scale(1.2) rotate(-10deg); 

  }
  100% {
    opacity: 0;
    transform: translate(100vw, -50%) scale(0.6) rotate(30deg); 
      
  }
}

@keyframes background-fade {
  0% {
    opacity: 1; 
  }
  25% {
    opacity: 1; 
  }
  75% {
    opacity: 1; 
  }
  100% {
    opacity: 0; 
  }
}