.logoc {
            position: relative;
            width: auto;
            height: 100px;
            margin-top: -40px;
          
            
        }
        .box {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-shadow: 1px 1px 2px black;
             overflow: hidden;
        }

   
   #box1 {
               background-color: transparent; /* Clear background */
            z-index: 2; /* Ensure they are visible over the background */
            width: auto;
            height: 80px;
            border: 1px solid #094581;
         
            padding: 5px;
        }

        #box2 {
              background-color: transparent; /* Clear background */
            z-index: 2; /* Ensure they are visible over the background */
            width: 300px;
            height: 80px;
            opacity: 1;
           border: 2px solid #e089b5;
         
            padding: 5px;
        }
        
        .icon {
            height: 70px;
            align-self: flex-start;
            animation: logo-twinkle 15s ease-in-out 2s infinite;
        }

        .text-large {
            font-size: 25px;
            width: 100%;
            text-align: center;
            animation: logo-slideInFadeIn 3s ease-in-out infinite, logo-colorChange 3s infinite alternate;
            margin-left: 32%;
        }

        .text-small {
            font-size: 20px;
            width: 100%;
            text-align: center;
            animation: logo-fadeIn 3s ease-in-out infinite;
            margin-left: 30%;
             text-shadow: 
                 -1px -1px 0px black,  /* Top-left shadow */
                 1px -1px 0px black,   /* Top-right shadow */
                 -1px 1px 0px black,   /* Bottom-left shadow */
                 1px 1px 0px black;    /* Bottom-right shadow */
        }

        .divider {
            width: 70%;
            height: 1.5px;
            background: linear-gradient(to right, transparent, rgba(255, 105, 180, 0.8), rgba(12, 19, 191, 0.8), transparent);
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: auto;
            margin-right: 3px;
            position: relative;
            overflow: hidden;
        }

        .divider::before {
            content: "";
            position: absolute;
            top: 0;
            left: -150%;
            width: 300%;
            height: 100%;
            background: linear-gradient(to right, transparent, rgba(255, 255, 0, 0.8) 25%, rgba(0, 255, 0, 0.8) 50%, rgba(255, 0, 0, 0.8) 75%, transparent);
            animation: logo-shine 3s infinite ease-in-out;
        }

        @keyframes logo-slideInFadeIn {
            0% { opacity: 0; transform: translateX(-20px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        @keyframes logo-twinkle {
            0%, 20% { opacity: 1; transform: scale(1); }
            10%, 90% { opacity: 0.5; transform: scale(1.1); }
        }

        @keyframes logo-fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        @keyframes logo-colorChange {
            0% { color: #ff6347; }
            25% { color: #1e90ff; }
            50% { color: #3cb371; }
            75% { color: #ffa500; }
            100% { color: #ff69b4; }
        }

        @keyframes logo-shine {
            0%, 100% { left: -150%; }
            50% { left: 150%; }
        }

        @keyframes logo-bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        @keyframes logo-pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
@media (max-width: 768px) {
    .logoc {
         top: 10px ; /* Position at the top */
    left: 30px; /* Position on the left */
        height: 50px;
        margin-top: -20px;
        
        
          position: absolute; /* Changed from relative to absolute */
    
    width: auto;
    height: 100px;
    margin-top: 0; /* Reset margin-top as it is no longer needed */
    }
    


    .box, #box1, #box2 {
        height: 50px;
    }

    #box2 {
        width: 230px;
    }

    .icon {
        height: 35px;
    }
    .text-large{
         position: absolute; /* Changed from relative to absolute */
        font-size: 18.5px; /* 50% reduction of .text-large */
         margin-bottom: 20px;
    } 
    .text-small {
         position: absolute; /* Changed from relative to absolute */
        font-size: 16.5px; /* 50% reduction of .text-large */
        margin-top: 25px; /* Reset margin-top as it is no longer needed */
        
    }
          .divider {
            width: 75%;
            height: 2px;
            background: linear-gradient(to right, transparent, rgba(255, 105, 180, 0.8), rgba(12, 19, 191, 0.8), transparent);
            margin-top: 8px;
            margin-bottom: 5px;
            margin-left: auto;
            margin-right: 0px;
            position: relative;
            overflow: hidden;
        }

        .divider::before {
            content: "";
            position: absolute;
            top: 0;
            left: -150%;
            width: 300%;
            height: 100%;
            background: linear-gradient(to right, transparent, rgba(255, 255, 0, 0.8) 25%, rgba(0, 255, 0, 0.8) 50%, rgba(255, 0, 0, 0.8) 75%, transparent);
            animation: logo-shine 3s infinite ease-in-out;
        }

 
}