:root {
    /* Light Mode Colors */
    --bg-color: #eceef2;
    --text-color: #727476;
    --primary-color: #0460e5;
    --secondary-color: #11d5ff;
    --box-color: #0460e5;
    --counter-color: #0e0e0e;
    --counter-text: #11d5ff;
    --icon-text: #0460e5;
    --heading-text: #000;

  }
  
  [data-theme="dark"] {
    /* Dark Mode Colors */
    --bg-color: #121212;
    --text-color: #727476;
    --primary-color: #0460e5;
    --secondary-color: #11d5ff;
    --box-color: #11d5ff;
    --counter-color: #2e2f2f;
    --counter-text: #0460e5;
    --icon-text: #11d5ff;
    --heading-text: #fff;

  }
  

.reusable-title{
    margin-top: 100px;
    height: 200px;
    width: 100%;
    background-color: var(--counter-text);
}
  

.reusable-title h1{
    background-color: var(--counter-text);
    color: var(--bg-color);
    font-size: 60px;
    font-size: 700;
    text-align: center;
    padding-top: 3rem;
}