body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #6a0dad; 
      color: #fff;
      overflow-x: hidden;
    }
    

    .calculator-box {
      margin: 3em;
      padding: 2em;
      background-color: #fff;
      border-radius: 0.8em;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
      color: #000;
    }

    h1 {
      margin-bottom: 1em;
      font-size: 1.5em;
      text-align: center;
    }
    
    /* ✅ h2 now same size as h1 */
h2 {
  font-size: 1.2em;
  text-align: center;
}

    a{
      text-decoration: none;
      color: white;
    }

    .calculator-operation {
      display: flex;
      flex-direction: column;
      gap: 1em;
    }

    .input-container {
      display: flex;
      flex-direction: row;
      gap: 0.5em;
    }

    input[type="number"],
    select,
    input[type="text"] {
      padding: 0.8em;
      border-radius: 0.5em;
      border: 1px solid #3f3f3f;
      font-size: 1em;
      width: 100%;
      box-sizing: border-box;
    }

    input:disabled{
        color: black;
    }

    .calculator-button {
      padding: 0.8em 2em;
      background-color: #6a0dad;
      color: #fff;
      font-size: 1em;
      border: none;
      border-radius: 0.5em;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .calculator-button:hover {
      background-color: #4b078c;
    }

    @media (max-width: 600px) {
      .calculator-box {
        margin: 1em;
        padding: 1.2em;
      }
    }

    /* footer  */
    .footer-menu a{
      padding:0px 20px;
      background-color: #4B078C;
      border-radius: 2px;
    }
    
    .footer-menu a h1{
     font-size:14px;
     font-weight:400;
    }


    /* --------- navbar -----------    */
    header {
      /*max-width: 90vw;*/
      margin: 0 auto;
      background-color: #6A0DAD;
      color: #fff;
      padding: 0px 10px;
      position: relative;
      border-bottom:1px solid white;
    }

    .container {
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display:flex;
      flex-direction:row;
      justify-content:center;
      align-items:center;
      column-gap:8px;
    }
    
    .logo h1{
        font-size: 1.5em;
      font-weight: bold;
       padding-top:6px;
    }
    
    /* ✅ Replacement for h1 in logo */

  .logo-text {
  font-size: 1.5em;
  font-weight: bold;
  color: white;
  padding-top: 6px;
  display: inline-block;
}
    nav {
      display: flex;
      gap: 20px;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background 0.3s;
    }

    nav a:hover {
      background-color: #4b078c;
    }

    .toggle-button {
      display: none;
      flex-direction: column;
      cursor: pointer;
      gap: 5px;
    }

    .toggle-button span {
      height: 3px;
      width: 25px;
      background-color: white;
      border-radius: 2px;
    }
    
    /*Color WHite for google translate */
    .goog-te-gadget{
        color:white!important;
    } 
    
    .VIpgJd-ZVi9od-l4eHX-hSRGPd, .VIpgJd-ZVi9od-l4eHX-hSRGPd:link, .VIpgJd-ZVi9od-l4eHX-hSRGPd:visited, .VIpgJd-ZVi9od-l4eHX-hSRGPd:hover, .VIpgJd-ZVi9od-l4eHX-hSRGPd:active {
    color: white!important;
    }

    /* Mobile Menu */
    .mobile-menu {
      display: none;
      flex-direction: column;
      background-color: #4b078c;
      position: absolute;
      top: 70px;
      left: 0;
      width: 100%;
      padding: 10px 0;
      animation: slideDown 0.3s ease forwards;
    }

    .mobile-menu a {
      padding: 10px 20px;
      border-top: 1px solid #4b078c;
      text-decoration: none;
      color:white;
    }

    .mobile-menu.show {
      display: flex;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 768px) {
      nav {
        display: none;
      }

      .toggle-button {
        display: flex;
      }
      
      .logo h1{
        font-size: 15px;
      font-weight: bold;
     
    }
    
    .logo img{
        width:30px;
    }
    
    header{
        padding: 5px 10px;
    }
    }
    
   

.0