.logo {
            display: flex;
            align-items: start;
            gap: 15px;
            
    }

.logo-image {

            height: auto;
            max-height: 250px;
            width: 225px;
            display: block;
                        margin-left: 10%;

}
.logo-text {
    display: flex;
    flex-direction: column;
}
.mid-image{
           height: 100%;
           
            width: 100%;
}
.logo-text h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin: 0;
    color: #fff;
}

.logo-text span {
    font-size: 11px;
    opacity: 0.9;
    font-weight: 300;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 3px;
}

/* For responsive design */
@media (max-width: 768px) {
    .logo {
        gap: 10px;
    }
    
    .logo-image {
        height: 40px;
    }
    
    .logo-text h1 {
        font-size: 22px;
    }
    
    .logo-text span {
        font-size: 9px;
    }
}