.elementor-10 .elementor-element.elementor-element-8481f74:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-8481f74 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#007BFF;}.elementor-10 .elementor-element.elementor-element-8481f74 > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-10 .elementor-element.elementor-element-8481f74, .elementor-10 .elementor-element.elementor-element-8481f74 > .elementor-background-overlay{border-radius:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-8481f74{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:20px;margin-bottom:20px;padding:0px 0px 0px 0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-10 .elementor-element.elementor-element-8b88c52{text-align:center;}.elementor-10 .elementor-element.elementor-element-8b88c52 .elementor-heading-title{color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-10 .elementor-element.elementor-element-3c4a9e5{text-align:center;color:var( --e-global-color-astglobalcolor4 );}/* Start custom CSS for html, class: .elementor-element-b061087 *//* Keyboard Container */
  .keyboard-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    margin: 10px 0;
  }

  /* Keyboard wrapper for scaling */
  .keyboard {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 20px;
    padding: 18px;
    background: #f5f5f5;
    border-radius: 12px;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
    transform-origin: top center;
    transition: transform 0.3s ease-in-out;
  }

  /* Responsive scaling */
  @media (max-width: 1200px) { .keyboard { transform: scale(0.9); } }
  @media (max-width: 992px)  { .keyboard { transform: scale(0.8); } }
  @media (max-width: 768px)  { .keyboard { transform: scale(0.7); } }
  @media (max-width: 576px)  { .keyboard { transform: scale(0.6); } }

  /* Sections */
  .mainkey,
  .numpad,
  .navclusterkey {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .rowkey {
    display: flex;
    gap: 6px;
  }

  /* Key styling */
  .key {
    background: #ffffff;
    padding: 14px;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    min-width: 28px;
    cursor: pointer;
    user-select: none;
    border: 1px solid #ddd;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
    font-weight: 500;
  }
  .key:hover {
    background: #e3f2fd;
    transform: scale(1.05);
  }
  .key.active {
    background: #00bfff !important;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0px 0px 10px rgba(0, 191, 255, 0.6);
  }

  /* Font responsiveness */
  @media (max-width: 1200px) { .key { font-size: 15px; } }
  @media (max-width: 992px)  { .key { font-size: 12px; } }
  @media (max-width: 768px)  { .key { font-size: 11px; } }
  @media (max-width: 576px)  { .key { font-size: 10px; } }

  /* Special Keys */
  .key.wide { min-width: 80px; }
  .key.extra-wide { min-width: 120px; }
  .key.space { min-width: 300px; }
  .key.small { min-width: 30px; }
  .key.tall {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }/* End custom CSS */