/*
 * style.css
 * This file is where you put your custom styles.
 * It loads AFTER Bootstrap, so you can override any default styles.
 */

/* Optional: Set a minimum height on the body so the footer is visible */
body {
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI",
               "Noto Sans", "Noto Sans CJK SC",
               "PingFang SC", "Microsoft YaHei",
               sans-serif;
}

/* Custom style for the large icons in the feature section (requires a basic icon set like Bootstrap Icons) */
.icon-large {
    font-size: 3rem; 
    color: #0d6efd; /* Bootstrap primary blue */
    margin-bottom: 15px;
}

/* You can change the background color of the main content here */
main {
    background-color: #f8f9fa; /* A very light grey */
}

/* Target the Logo Text */
.navbar-brand {
    font-family: 'Poppins', sans-serif !important;
    /* Optional: If you want it bigger than the default */
    font-size: 1.5rem; 
}

/* Optional: Apply the same font to the main headline */
h1, h2 {
    font-family: 'Poppins', sans-serif;
}
.logo-hint {
    color: #ffffff !important;   /* white */
}

.logo-math {
	color: #00ff00 !important;  
}
.logo-localname {
	color: #ADD8E6 !important;
	font-size: 12px !important;
}
.highlight {
  font-size: 16px;
  color: #06c;
  font-weight: 700;
/*  background-color: #e7f1ff; 
  padding: 4px 8px;
  border-radius: 6px;*/
}
.img-frame {
    height: 80px;
    overflow: hidden;
    position: relative;
}

.img-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .img-frame img {
        width: auto;
        height: auto;
    }
}
.image-wrapper {
    display: flex;
    justify-content: center;
}

/* Ensure image never exceeds card width */
.image-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

.hero {
    background-image: url("images/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    min-height: 400px;

    display: flex;
    align-items: center;
    color: white;
}

.trademark {
    font-size: 0.35em;
    position: relative;
    margin-left: 1px;
	top: -1.5em;
    font-weight: normal;
	color: #73FBFD;
}