body { font-family: Arial, sans-serif; margin: 0; background: #f5f5f5; }
    h1, h2 { font-size: 1.0em; margin: 0px; padding: 5px;}
    .container { display: flex; height: 100vh; }
    .sidebar { width: 200px; background-image: radial-gradient(ellipse at top left, #6699FF, #6666CC, #00CCFF); color: #fff; padding: 18px; }
    .sidebar h3 { margin-bottom: 15px; cursor: pointer; user-select: none; transition: all 0.3s ease; }
    .sidebar2 { font-size: 0.9em; background-image: color: #fff; padding: 18px; }
.sidebar2.collapsed .toggle-arrow { transform: rotate(-180deg); }
.sidebar2.collapsed .external-links { max-height: 0; margin-bottom: 40px; }
    .external-links button {
      display: block;
      width: 100%;
      margin: 5px 0;
      padding: 8px;
      border: none;
      background: #007cba;
      color: white;
      border-radius: 3px;
      cursor: pointer;
    }
    .external-links button:hover { background: #005a87; }
    .external-links { overflow: hidden; transition: max-height 0.3s ease; max-height: 500px; }
.sidebar button { font-size: 0.7em; display: block; width: 100%; padding: 10px; margin-bottom: 5px; border: none; clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); background: grey; color: #fff; cursor: pointer; text-align: left; }
    .sidebar button:hover { background: #0E5077; color: #FFFF00; }
    .content { flex: 1; padding: 15px; overflow-y: auto; }
    .tabs button { font-size: 0.6em; padding: 8px; margin-right: 1px; border: none; background: #0073e6; color: #fff; border-radius: 12px 12px 0 0; /* TL TR BR BL */ cursor: pointer; }
    .tabs button:hover { background: #005bb5; }
    .tab-content { display: none; margin-top: 8px; }
    .tab-content.active { display: block; }
    iframe { width: 100%; height: 485px; border: 1px solid #ccc; border-radius: 4px; }
    .cta-buttons { margin-top: 12px; }
    .cta-buttons button { font-size: 0.7em; padding: 8px 12px; margin-right: 8px; border: none; cursor: pointer; border-radius: 8px; }
    .cta-white { background: #4CAF50; color: white; }
    .cta-seo { background: #F76503; color: white; }
    .cta-seo:hover, .cta-white:hover { background-color: #0E5077; color: #FFFF00; transform: scale(1.1); box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.5); }
    img { width: 30px; height: 30px; padding-right: 10px; }
/* Overlay background */
.popup-overlay {
  display: none; /* hidden by default */
  position: fixed;
  top: 0; left: 35%;
  width: 450px;
  margin: 10px auto;
  z-index: 9999;
}
/* Popup box */
.popup-content {
  position: relative;
  width: 100%; height: 100%;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin: 10px auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease;
}
/* Close button */
.close-btn {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 28px;
  cursor: pointer;
  color: red;
}
.close-btn:hover { color: #000; }
/* Simple animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
  .bio-form {
    margin-top: 1rem;
    max-width: 100%;
    background: #f9fbfc;
    padding: 1.5rem;
    border-radius: 12px;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
        .modal-header h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
        }
       .modal-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
	    padding: 12px;
            text-align: center;
        }
  .bio-form label {
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 600;
    color: #333;
    font-size: 0.7rem;
  }
  .bio-form input,
  .bio-form textarea {
    width: 100%;
    padding: 6px;
    margin-top: 0.2rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.7rem;
    transition: border 0.2s ease;
    box-sizing: border-box;
  }
  .bio-form input:focus,
  .bio-form textarea:focus {
    border-color: #0072b1;
    outline: none;
  }
  .bio-form button {
    background: blue;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 1rem;
    transition: background 0.3s ease;
  }

  .bio-form button:hover {
    background: #0072b1;
  }
.g-recaptcha iframe {
  border: none !important;
  box-shadow: none !important;
}
     a {
	  text-decoration: none;
	  display: block;
}
.floating-tooltip {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  font-family: sans-serif;
}

.tooltip-icon {
  cursor: pointer;
  font-size: 36px;
  color: #f39c12; /* gold/orange accent */
  text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* offset-x | offset-y | blur-radius | color */
}

.tooltip-text {
  visibility: hidden;
  width: 250px;
  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: 14px;
  line-height: 1.3;
}

.floating-tooltip:hover .tooltip-text {
  visibility: visible;
}

     #copyright {
          white-space: nowrap;
          font-size: 0.7em;
          text-align: right;
	  padding-right: 10px;
          color: darkgrey;
}
@media (max-width: 1024px) { iframe { height: 500px; } }
@media (max-width: 768px) { iframe { height: 400px; } }
@media (max-width: 480px) { iframe { height: 300px; } }