/* ===== Moksha Homeo Clinic - code logo ===== */
.moksha-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    line-height: 1;
}

.moksha-logo .ml-badge {
    width: 64px;
    height: 64px;
    flex: none;
    display: block;
}

/* rotating ring text (rotates around the badge centre) */
.moksha-logo .ml-ring {
    transform-origin: 120px 120px;
    animation: ml-spin 14s linear infinite;
}

.moksha-logo .ml-ring-text {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600;
    fill: #fff;
}

@keyframes ml-spin {
    to {
        transform: rotate(360deg);
    }
}

.moksha-logo:hover .ml-ring {
    animation-duration: 5s;
}

/* speeds up on hover */
@media (prefers-reduced-motion: reduce) {
    .moksha-logo .ml-ring {
        animation: none;
    }
}

/* wordmark */
.moksha-logo .ml-text {
    display: flex;
    flex-direction: column;
    font-family: 'Lora', Georgia, serif;
}

.moksha-logo .ml-name {
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: .02em;
    color: #0B5A86;
}

.moksha-logo .ml-sub {
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: .01em;
    color: #B3262D;
    margin-top: 3px;
    padding-bottom: 4px;
    border-bottom: 2px solid #111;
}

.moksha-logo .ml-tag {
    font-weight: 400;
    font-size: .62rem;
    letter-spacing: .06em;
    color: #111;
    margin-top: 4px;
}

/* dark background version (footer) */
.moksha-logo.logo-dark .ml-name {
    color: #fff;
}

.moksha-logo.logo-dark .ml-sub {
    color: #E4C766;
    border-bottom-color: #E4C766;
}

.moksha-logo.logo-dark .ml-tag {
    color: #DDEDE7;
}

/* mobile */
@media (max-width: 575px) {
    .moksha-logo .ml-badge {
        width: 50px;
        height: 50px;
    }

    .moksha-logo .ml-name {
        font-size: 1.95rem;
    }

    /* was 1.7rem */
    .moksha-logo .ml-sub {
        font-size: 1.3rem;
    }

    /* was 1.12rem */
    .moksha-logo .ml-tag {
        font-size: .7rem;
    }

    /* was .62rem */
}

.moksha-logo { gap: 16px; }
.moksha-logo .ml-badge { width: 92px; height: 92px; flex: none; display: block; }   /* was 64px */

/* mobile */
@media (max-width: 575px) {
  .moksha-logo .ml-badge { width: 68px; height: 68px; }                              /* was 50px */
}