.main-logo {
    font-size: 1.5em; /* Makes it 50% larger than a standard H1 */
    font-weight: 800; /* Extra bold for that tech/sporty look */
    letter-spacing: -1px; /* Tighter professional spacing */
    color: #030F21;
}

.logo-orange {
  color: #EE961C !important;
  font-weight: bold;
}

.deep-navy {
  color: #030F21;
  font-weight: bold;
}

.alert-red {
    color: #C62828;
    font-weight: 700;
}

.alert-box {
    background-color: #fdf2f2; /* Light red tint */
    border-left: 6px solid #C62828; /* Professional Red */
    padding: 20px;
    margin: 25px 0;
    border-radius: 4px;
    font-size: 0.95rem;
}

.md-logo img {
    height: 5.5rem !important; /* Default is usually around 1.5rem to 2rem */
    width: auto !important;
    margin-top: -5px;
}

.md-header {
    height: 6rem !important; 
}

.md-tabs, .md-main__inner {
    margin-top: 1rem;
}

/* Style the Sidebar container */
.md-nav--primary {
    background-color: #f8f9fa; /* A very light grey background */
    font-size: 0.9rem;
}

/* Style the Titles (Home, App Setup, Coaching Guides) */
.md-nav__link {
    font-weight: 600;
    color: #333 !important;
}

.md-nav__link--active {
    font-weight: 700 !important;
    color: #000 !important;
}

.hero-studio-img {
    display: block;
    /* 0 top margin, auto sides, 1.5rem bottom margin */
    margin: 0 auto 1.5rem 0; 
    max-width: 65%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12));
    /* Remove any default padding */
    padding-top: 0;
}

/* Optional: Slight lift effect when the user hovers over it */
.hero-studio-img:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.18));
}

.screenshot-grid {
    display: flex;
    gap: 15px;
    margin: 10px 0;
}

.screenshot-grid img {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    width: 120px; /* Adjust as needed */
    height: auto;
    cursor: pointer;
    transition: transform 0.2s;
}

.screenshot-grid img:hover {
    transform: scale(1.05);
}