* { margin: 0; padding: 0; box-sizing: border-box; }
        .custom-page {
            background-image: radial-gradient(ellipse at top left, #6699FF, #6666CC, #00CCFF);
            min-height: 100vh;
            padding: 20px;
            max-width: 100%; }
        .header {
            background-image: radial-gradient(ellipse at top left, #6699FF, #6666CC, #00CCFF);
            color: white;
            padding: 30px;
            border-radius: 12px 12px 0 0; /* TL TR BR BL */
            text-align: center; }
        .header h1 {
            font-size: 2.0rem;
            margin-bottom: 10px;
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
        .header p { font-size: 1.0rem; opacity: 0.9; }
        .custom-container {
            margin: 0 auto;
            font-family: 'Arial', sans-serif;
            background: #f9f9f9;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 5px 10px 3px rgba(0,0,0,0.2); }
        .custom-content {
	    display: flex;
            flex-direction: column;
            align-items: left; /* only effective inside a flex */
            justify-content: left; /* only effective inside a flex */
            text-align: left;
	    background: #fcfcf7;
	    margin: 10px auto;
            padding: 40px; }
       .floating-tooltip {
            position: absolute;
            top: 25px; right: 25px;
            z-index: 100;
            font-family: sans-serif; }
       .tooltip-icon {
            cursor: pointer;
            font-size: 40px;
            color: orange; 
            text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* offset-x | offset-y | blur-radius | color */
}
       .tooltip-text {
            visibility: hidden;
            width: 180px;
            background-color: rgba(0,0,0,0.85);
            color: #fff;
            text-align: left;
            padding: 8px;
            border-radius: 5px;
            position: absolute;
            top: 25px; right: 10px;
            font-size: 12px;
            line-height: 1.3; }
      .floating-tooltip:hover .tooltip-text { visibility: visible; }
blockquote {
  background: linear-gradient(135deg, #e8f4ff, #f0f8ff);
  border-left: 5px solid #2196F3; 
  border-radius: 10px; text-align: left;
  margin: 1.2em 0; /* Vertical margin for spacing, no horizontal margin */
  padding: 0.5em 1em; 
  font-style: italic; 
  color: #0E5077;
  line-height: 1.4; }
blockquote:before { color: #E73D50;
  font-family: Georgia, "Times New Roman", serif;
  content: open-quote;
  font-size: 4.6em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em; }
blockquote p { display: inline; }
blockquote a {display: inline-block !important;}
       #copyright { font-size: 0.7em; text-align: right; padding: 10px; color: darkgrey; }
    .cta-white { font-size: 0.9em !important; background: #4CAF50 !important; color: white; border: none; cursor: pointer; padding: 6px 8px !important; border-radius: 8px !important; }
    .cta-seo { font-size: 0.9em !important; background: #F76503 !important; color: white; border: none; cursor: pointer; padding: 6px 8px !important; border-radius: 8px !important; }
    .cta-seo:hover, .cta-white:hover { background-color: #0E5077 !important; color: #FFFF00 !important; transform: scale(1.1); box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.5); }
    a { display: inline-block !important; text-decoration:none !important;}
a:focus, button:focus { outline: 3px solid #ff8c00; outline-offset: 2px; }