.spinning-image {
  /* Animation properties */
  animation-name: spin; /* Name of our keyframe animation */
  animation-duration: 10s; /* How long one full rotation takes (4 seconds) */
  animation-iteration-count: infinite; /* Keep spinning forever */
  animation-timing-function: linear; /* Constant speed throughout the rotation */
  }

  /* Define the keyframe animation */
  @keyframes spin {
  from {
    transform: rotate(0deg); /* Start at 0 degrees */
  }
  to {
    transform: rotate(360deg); /* End at 360 degrees (one full circle) */
  }
  }
  .circle{
    max-width: 400px;
  }
  .joy{
    left:8%;margin-top:-30px;max-width:400px;
  }
  /* Media queries for better mobile responsiveness */
  @media (max-width: 768px) { /* For typical tablet and mobile screens */
      .circle {
          max-width: 300px;
      }
      .joy {
          left:2%;margin-top:-30px;max-width:300px;
      }
  }

  @media (max-width: 576px) { /* For smaller mobile screens */
      .circle {
          max-width: 300px;
      }
      .joy {
          left:2%;margin-top:-30px;max-width:300px;
      }
  }
  /* Custom styles for the preloader animation */
    #preloader-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffff; /* Changed to white */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999; /* Ensure it's on top of everything */
        transition: opacity 0.5s ease-out;
    }

    #preloader-container.hidden {
        opacity: 0;
        pointer-events: none; /* Disable interactions after hiding */
    }

    #preloader-l {
        position: relative;
        width: 105px;
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .circle-l {
        width: 50px;
        height: 50px;
        border: 2px solid #613ddf; /* Blue border for glasses */
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        /* Subtle pulse animation for the circles */
        animation: pulse 2s infinite alternate ease-in-out;
    }

    .dot-l {
        width: 8px;
        height: 8px;
        background-color: #000000; /* Changed to black */
        border-radius: 50%;
        position: absolute;
        /* Animation for the dot to spin within its circle */
        animation: spinEye 1.5s infinite linear;
    }

    /* Make the second dot spin in the opposite direction */
    .circle-l:last-child .dot-l {
        animation-direction: reverse; /* Spin in the opposite direction */
        animation-delay: 0s; /* Ensure no delay for opposite spin */
    }

    /* Keyframe animations */
    @keyframes spinEye {
        0% { transform: translate(-50%, -50%) rotate(0deg) translateX(13px) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg) translateX(13px) rotate(-360deg); }
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        100% { transform: scale(1.05); }
    }

    /* Responsive adjustments */
    @media (max-width: 640px) {
        #preloader-l {
            width: 105px;
            height: 75px;
        }
        .circle-l {
            width: 50px;
            height: 50px;
            border-width: 2px;
        }
        .dot-l {
            width: 8px;
            height: 8px;
        }
        @keyframes spinEye {
            0% { transform: translate(-50%, -50%) rotate(0deg) translateX(10px) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg) translateX(10px) rotate(-360deg); }
        }
    }
    .video-button{
      cursor: pointer;
    }
    #play-image:hover{
      opacity: 1 !important;
    }
    .modal-content {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        border: none;
    }
    .modal-header {
        border: none;
        padding: 10px 15px;
    }
    .modal-header .btn-close {
        background-color: #613ddf;
        color: #fff;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        opacity: 1;
        background-image: none;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .modal-header .btn-close::before {
        content: '×';
    }
    .modal-body .ratio-16x9 iframe {
        width: 100%;
        height: 100%;
    }
    @media (max-width: 768px) {
        .modal-dialog {
            max-width: 90vw;
        }
    }
    @media (max-width: 576px) {
        .modal-dialog {
            margin: 1rem;
        }
        .modal-body .ratio-16x9 iframe {
            min-height: 200px;
        }
    }
    .eskooly-header{
      background: linear-gradient(45deg, #3144de, #241655, #141482);
      background-size: 400% 400%;
      animation: GradientAnimation 15s ease infinite;
    }
    @keyframes GradientAnimation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }