*{
    padding: 0;
    margin: 0;
    font-family: 'Times New Roman', Times, serif;
    box-sizing: border-box;
  }
  
  /*  theme variables */
  :root{
  --bg-main: linear-gradient(160deg, rgba(255,0,0,.3), rgba(0,0,255,.35), rgba(0,128,0,.35));
  --text-main: #111827;
  
  --card-bg: linear-gradient(180deg,#eef2f6,#ffffff);
  --screen-bg: linear-gradient(180deg,#0b1220,#0f1724);
  
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --muted-text: #8790a2;
  --light-box: #eef2ff;
  }
  
  /*  dark mode */
  body.dark{
  --bg-main: linear-gradient(160deg,#0b1220,#111827,#0b1220);
  --text-main: #e5e7eb;
  
  --card-bg: linear-gradient(180deg,#0f172a,#020617);
  --screen-bg: linear-gradient(180deg,#111827,#020617);
  
  --accent: #6366f1;
  --accent-dark: #4f46e5;
  --muted-text: #9ca3af;
  --light-box: #0f172a;
  }
  
  body{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: var(--bg-main);
  color: var(--text-main);
  scroll-behavior: smooth;
  font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
    font-family: sans-serif;
  }
  
  /*  For  seo */
  .seo-content{
    max-width: 50vw;
    min-height: 100vh;
    color: var(--text-main);
  }
  
  
  .seo-content h1{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   margin-bottom: 20px;
   margin-top: 10px;
   text-align: center;
   
  }
  
  .atm-header{
   font-size: 2rem;
   font-weight: 700;
   color: #1f2937;
   color: var(--accent);
   display: inline-block;
   position: relative;
   cursor: pointer;
   transition: color 0.3s ease;
  }
  
  /* underline */
  .atm-header::after{
   content: "";
   position: absolute;
   left: 0;
   bottom: -6px;
   width: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--accent), var(--accent-dark));
   transition: width 0.4s ease;
   border-radius: 5px;
  }
  
  .atm-features{
   list-style: none;
   padding: 0;
   margin-top: 14px;
  }
  
  .atm-features li{
   padding: 10px 14px;
   margin-bottom: 8px;
   border-radius: 10px;
   /* background: #f3f4f6; */
   background: var(--light-box);
   cursor: pointer;
   transition: all 0.35s ease;
   position: relative;
   overflow: hidden;
  }
  
  /* Hover effect */
  .atm-features li:hover{
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
  transform: translateX(6px);
  /* box-shadow: 0 8px 20px rgba(79,70,229,0.35); */
  box-shadow: 0 6px 18px rgba(37,99,235,0.35);
  }
  
  /* subtle shine effect */
  .atm-features li::after{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
  transition: 0.5s;
  }
  
  .atm-features li:hover::after{
  left: 100%;
  }
  
  .atm-features strong{
    margin-right:5px;
  }
  
  
  /* atm box */
  
  .main-container{
  width:350px;
  min-height: 95vh;
  background: var(--card-bg);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(16,24,40,0.12);
  overflow:hidden;
  border:1px solid rgba(2,6,23,0.06);
  z-index: 10;
  }
  
  .bank-name {
  width:360px;
  text-align: center;
  font-size: 2rem;
  
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  color: #2563eb;
  font-weight: 1000;
  margin-bottom: .2rem;
  letter-spacing: 1px;
  background-image: linear-gradient(130deg, rgb(30, 40, 231) 80% , rgb(26, 25, 25) 15%);
  
  background-clip: text;
  color:transparent;
  display: none;
  /* visibility: hidden; */
  }
  
  
  /* atm screen */
  
  .screen-area{
  background: var(--screen-bg);
  color:white;
  
  margin: 5px 12px;                 /* side se andar */
  border-radius: 14px;            /* rounded edges */
  box-shadow:
   inset 0 0 0 1px rgba(255,255,255,0.04),
   inset 0 8px 18px rgba(0,0,0,0.45);
   /* border-bottom: 2px solid black; */
  }
  
  .screen-area .screen-inner{
  /* background:linear-gradient(180deg,#0b1220, #0f1724);border-radius:10px; */
  background: var(--screen-bg);
   border-radius: 10px;
   padding: 1rem;
   min-height:160px;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   gap: 10px;
   margin: 1rem 1rem .1rem 1rem;
   position: relative;
  }
  
  .hidden{
  display: none;
  }
  
  .screen-area h2{
  margin:0px;
  font-size:1rem;
  letter-spacing:.2px;
  }

 .screen-inner #accMsg {
  position: absolute;
  text-align: center;
  font-weight: bolder;
  /* top: 48%; */
  top: 100%;
  left: 18%;
  margin-top: 5px;
  color: red;
  background-color: blue;
  /* padding: 3%   10%; */
  /* display: block; */
  border-radius: 1rem;
}


  .screen-inner .note{
  margin:0px;
  color: var(--muted-text);
  font-size:.85rem;  
  }

  
  .screen-inner input{
  width:100%;
  padding:.45rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  background:transparent;
  color:white;    
  font-size:1.1rem;
  }
  
  .screen-inner button{
  margin-top:.55rem;
  padding:.45rem .6rem;
  border-radius:8px;
  border:none;
  background:var(--accent);
  color:white;
  font-weight:500;
  cursor:pointer;
  }
  
  .screen-inner button:hover{
   background:var(--accent-dark);
  }
  
  .muted{
   color:#cdd7eb;
   font-size:0.90rem;
   line-height: 0.9rem;
   }
  
   #process-icon{
     padding:1.4rem;
     border-bottom:1px solid rgb(224, 225, 232);
     background: linear-gradient(180deg,#a2c0ff 0%, rgba(17,24,39,0.02) 100%);
     color:white;
   
   }
  
   #process-icon .circle{
     height: 1.5rem;
     width :1.5rem;
     border: 2px solid rgba(255, 255, 255, 0.417);
      border-bottom:2px solid var(--accent);
     color:white;
     border-radius:50%;
     animation: icon-rotate 1s linear infinite;
   }
  
   @keyframes icon-rotate  {
     100%{
       border-bottom:2px solid  rgb(36, 57, 214);
       transform: rotateZ(360deg);
     }
   }



   /*  screen pin for pin dots */

   .pin-box {
    position: relative;
    width: 200px;
    margin: 10px auto;
  }
  
  #pinInput {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }
  
  #pinDots {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 8px;
  }
  
  #pinDots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    transition: 0.2s;
  }
  
  #pinDots span.active {
    background: black;
  }


  
   /* MINI STATEMENT SCREEN */
   #screen-mini {
     text-align: center;
     padding: 10px;
   }
  
   .title {
     font-size: 24px;
     margin-bottom: 15px;
     font-weight: bold;
     color: #f1f2f1;
   }
  
   .mini-box {
     width: 85%;
     margin: auto;
     background: var(--light-box);
     padding: 15px;
     border-radius: 12px;
     max-height: 250px;
     overflow-y: auto;
     box-shadow: 0 0 10px rgba(0,0,0,0.2);
   }
  
   .mini-list p {
     background: white;
     padding: 10px;
     border-radius: 8px;
     margin-bottom: 5px;
     font-size: 15px;
     text-align: left;
     border-left: 5px solid var(--accent);
     color: var(--text-main);
     border-bottom: 1px solid black;
   }
  
   .btn-back {
     margin-top: 15px;
     padding: 10px 25px;
     background: #1b5e20;
     background:#2563eb;
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
   }
  
   .btn-back:hover{
     background:#1d4ed8;
   }
  
   
   .btn-back {
     margin-top: 15px;
     padding: 10px 25px;
     /* background: #1b5e20; */
     background:#2563eb;
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
   }
  
   .btn-back:hover{
     background:#1d4ed8;
   }
  
  

   /*   massege ke sath help button hai uska desining */

  
  .help-btn {
    display: inline-block;
    margin-top: 5px;
    margin-left: 0.9rem;
    padding: 4px 10px;
    background: #00bcd4;
    color: black;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.3s ease-in;
    animation: pulse 1s infinite;
  }
  
  .help-btn:hover {
    background: #00acc1;
  }
  

  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
  }
  
     /* side buttons */
  .sides{
     display:flex;
     justify-content:space-between;
     padding: .5rem 1rem .1rem 1rem;
     }
  .side-col{
     display:flex;
     flex-direction:column;
     gap: 0px;
     }
     .side-btn{
       margin-bottom: 1rem;
       cursor: pointer;
       border: none;
       background-color: transparent;
  
     }
  
     .side-btn img{
       width:  1.8rem;
       height: 1.8rem;
       /* border: 2px solid rgb(139, 136, 136); */
       border: 2px solid #c7d2fe;
  
       border-radius: 5px;
       padding: 0.1rem 0.1rem;
     }
     .side-btn span{
       color: var(--accent);
  
     }
  
     body.dark .side-btn span{
       color: #e5e7eb;
     }
  
     .card-slot{
       display:flex;
       align-items:center;
       justify-content:center;
      
        color:#1e293b;
   
       }
       body.dark .card-slot{
         background: linear-gradient(180deg,#020617,#020617);
         color:#e5e7eb;
       }
   
       
       .indicator{
       width:60%;
       height:25px;
       border-radius:6px;
       background:linear-gradient(90deg,#2563eb,#06b6d4);
       opacity:.9;
       }
       .bottom{
       display:flex;
       align-items:center;
       justify-content:space-between;
       padding:.4rem;
       }
  
     .cash-slot{
      position: relative;   
      height:30px;
      min-width:40%;
      background:linear-gradient(180deg,#f8fafc , #eef2ff);
      border-radius:18px;
      border:1px solid rgba(2,6,23,0.04);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#353a45;
      font-size:0.85rem;
      cursor: pointer;
      overflow: hidden;  
      transition: background 0.6s linear , color 0.4s linear;  
    }
    .cash-slot:hover{
      background: linear-gradient(90deg, #4877f9, #2857f2);
      color: white;
    }
    
    #cash-slot:active {
      transform: scale(0.96);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.562);
    }
  
  
  
     /* help btn  */
   /* ! Note: linear-gradient ke sath transition property nhi use kr skte ho  */
       #helpBtn{
       font-weight:525;
       cursor:pointer; 
       height:30px;
       min-width:50%;
       background:linear-gradient(180deg,#f8fafc,#eef2ff);
       border-radius:18px;
       border:1px solid rgba(2,6,23,0.04);
       display:flex;
       align-items:center;
       justify-content:center;
       color:#353a45;
       font-size:0.85rem;
       transition: background 0.6s ease-in, color 0.4s linear; 
       }
  
       #helpBtn:hover{
        background: linear-gradient(90deg, #4877f9, #2857f2);
        color: white;
       }

       #helpBtn:active {
        transform: scale(0.96);
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      }

    
  
  
       /* account model  */
      .modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(4px);
        z-index: 1000;
      }
      
      .modal-content {
        background: linear-gradient( 135deg, #141e30, #243b55 );
        color: #ffffff;
        width: 90%;
        max-width: 420px;
        margin: 10% auto;
        padding: 22px;
        border-radius: 14px;
        position: relative;
        text-align: center;
        animation: pop 0.3s ease;
      }
      
      /* Glow Effect */
      .glow {
        box-shadow: 0 0 8px rgba(120, 120, 255, 0.4), 0 0 18px rgba(120, 120, 255, 0.25);
      }
      
      @keyframes pop {
        from {
          transform: scale(0.9);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }
      
      .close-btn {
        position: absolute;
        right: 14px;
        top: 12px;
        width: 34px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #4b4b9a; /* soft bluish text */
        background: rgba(120, 120, 255, 0.15); /* light related bg */
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.25s ease;
      }
      .close-btn:hover {
        background: rgba(120, 120, 255, 0.3);
        color: #ffffff;
      
        box-shadow:
          0 0 8px rgba(120, 120, 255, 0.7),
          0 0 14px rgba(120, 120, 255, 0.4);
      
        transform: scale(1.08);
      }
      
      h2 {
        font-size: 20px;
        margin-bottom: 12px;
      }
      
      h2 span {
        font-size: 14px;
        color: #bfc8ff;
      }
      
      pre {
        background: rgba(255, 255, 255, 0.08);
        color: #eaeaff;
        padding: 14px;
        border-radius: 8px;
        font-size: 14px;
        text-align: left;
        box-shadow: inset 0 0 6px rgba(0,0,0,0.08);
      }
      
      #copyBtn {
        margin-top: 12px;
        padding: 10px 16px;
        border: none;
        border-radius: 8px;
        background: #5a5af5;
        color: #fff;
        cursor: pointer;
        transition: 0.3s;
      }
      
      #copyBtn:hover {
        background: #4343e6;
        box-shadow: 0 0 10px rgba(90, 90, 245, 0.7);
      }
      
      .warning {
        margin-top: 14px;
        font-size: 13px;
        color: #b00020;
        line-height: 1.4;
      }
      
  
  
       /* hidden screens - we toggle with .hidden */
   .screen-area  .hidden{
       display:none
       }
   
       /* menu list */
   .menu{
       display:flex;
       flex-direction:column;
       gap:.6rem;
       width:100%;
       color: black;
   }
  
   .menu button{
       padding:.6rem;
       border-radius:8px;
       border:1px solid rgba(2,6,23,0.06);
       background:white;
       cursor:pointer;
       }
       /* small helpers */
   .row{
       display:flex;
       gap:.5rem;
   }
   .right{
       margin-left:auto;
   }
   .note{
       font-size:0.8rem;
       color:#6b7280;
   }
  
  
  
   /* Admin Panel Button */
  #adminPanelBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #4CAF50; /* Green */
  color: white;
  border: none;
  padding: 12px 18px;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index:1000;
  transition: 0.3s;
  }
  
  #adminPanelBtn:hover {
  background-color: #45a049;
  transform: scale(1.05);
  }
  
  
  
  
  #screen-admin {
    position: fixed;
    inset: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    height:50%;
    padding: 1.5rem;
    background: linear-gradient( 135deg, #0f172a, #020617 );
    border-radius: 18px;
    box-shadow: 0 0 18px rgba(90, 90, 245, 0.35), 0 15px 45px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #e0e7ff;
    z-index: 1000;
    /* transform: translateZ(50); */
  }
  
  #screen-admin.hidden {
    display: none;
  }
  
  
  body.dark #screen-admin {
    background: linear-gradient( 135deg, #020617,  #000000 );
  }
  
  #screen-admin-title{
    margin-top: 20px;
  }
  
  #screen-admin input {
    width: 85%;
    padding: 10px 8px;
    margin: 1.4px 2px;
    font-size: 15px;
    border-radius: 10px;
    background: rgba(20, 19, 19, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    outline: none;
    transition: 0.25s;
  }
  #screen-admin input:active {
    background: rgba(20, 19, 19, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }
  
  #screen-admin input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
  
  #screen-admin input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.7);
    color: #ffffff; 
  }
  
  #screen-admin button {
    padding: 10px 18px;
    margin: 5px 5px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: 0.25s;
  }
  
  /* Unlock */
  #adminUnlock {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
  }
  
  #adminUnlock:hover {
    transform: scale(1.06);
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.7);
  }
  
  /* Back */
  #adminBack {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
  }
  
  #adminBack:hover {
    transform: scale(1.06);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
  }
  
  #adminMsg {
    margin: 10px  0px;
    font-size: 14px;
    color: #c7d2fe;
    font-weight: 600;
  }
  
  
  
  
  
  /* ADMIN ACTIVE STATE  */
  /* ATM visible rahega, sirf interaction block hoga */
  .admin-active .screen-area,
  .admin-active .side-btn{
  pointer-events:none;
  opacity:.8;
  }
  
  #screen-admin,
  #screen-admin *{
  pointer-events:auto;
  opacity:1;
  }
  
  /*screen admin */
  
  #screen-admin {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  
  .admin-active .side-btn,
  .admin-active .menu button,
  .admin-active input,
  .admin-active button:not(#adminUnlock):not(#adminBack) {
  pointer-events: none;
  opacity: 0.6;
  }
  
  
  
   /*  faq section */
  
  .faq-section{
    max-width: 50vw;
    height: auto;
    margin: 4rem auto;
    padding: 2rem;
    color: var(--text-main);
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: 0 10px 30px rgba(16,24,40,0.12);
    border: 1px solid rgba(2,6,23,0.06);
  }
  
  .faq-section h2{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    font-size: 2rem;
    margin-top: 15px;
    margin-bottom: 2rem;
    color: var(--accent);
    position: relative;
  }
  
  /* Underline animation */
  .faq-section h2::after{
    content:"";
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg,var(--accent),var(--accent-dark));
    display:block;
    margin:10px auto 0;
    border-radius:4px;
  }
  
  /* FAQ Item */
  .faq-item{
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--light-box);
    transition: 0.3s ease;
    border: 1px solid rgba(2,6,23,0.05);
  }
  
  /* Question Button */
  .faq-question{
    width:100%;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
    border:none;
    text-align:left;
    cursor:pointer;
    color: var(--text-main);
    position: relative;
    transition: 0.3s ease;
  }
  
  /* Hover effect */
  .faq-question:hover{
    background: linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:#fff;
  }
  
  /* Arrow icon */
  .faq-question::after{
    content:"+";
    position:absolute;
    right:20px;
    font-size:1.2rem;
    transition:0.3s ease;
  }
  
  /* Active state */
  .faq-item.active .faq-question::after{
    content:"−";
  }
  
  .faq-item.active .faq-question{
    background: linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:#fff;
  }
  
  /* Answer */
  .faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
    background: var(--card-bg);
  }
  
  .faq-answer p{
    padding: 1rem 1.2rem;
    font-size: 0.95rem;
    line-height:1.6;
    color: var(--muted-text);
  }
  
  /* ===============================
     RESPONSIVE for faq */
  
  @media(max-width:768px){
    .faq-section{
      max-width: 90%;
      padding: 1.5rem;
    }
  }
  
  @media(max-width:480px){
    .faq-section{
      max-width: 100%;
      margin: 2rem 0;
      padding: 1rem;
    }
  }
  
   /* footer */
  
  .footer{
  min-height: auto;
  padding: 40px   0; 
  margin-top: 20vh; 
  width: 100%; 
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  }
  
  .footer-wrapper{
  max-width: 1100px;
  margin: auto;
  padding: 60px 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem , 2.3rem ,2.5rem);
  }
  
  .footer h2{
  font-size: 26px;
  margin-bottom: 14px;
  color: #fff;
  }
  
  .footer h3{
  font-size: 18px;
  margin-bottom: 12px;
  color: #c7d2fe;
  }
  
  .footer p{
  font-size: 14px;
  line-height: 1.6;
  color: #cbd5f5;
  }
  
  .footer ul{
  list-style: none;
  padding: 0;
  }
  
  .footer ul li{
  margin-bottom: 10px;
  }
  
  .footer ul li a{
  color: #cbd5f5;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  }
  
  /*hover animation */
  .footer ul li a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
  }
  
  
  .footer ul li a:hover{
  color: #fff;
  }
  
  .footer ul li a:hover::after{
  width: 100%;
  }
  
  .social-links li a{
  font-weight: 500;
  }
  
  .copyright{
  margin-top: 20px;
  font-size: 12px;
  opacity: 0.7;
  }
  

  
/*  get source code */
  .download-btn {
    background-color: #28a745; 
    color: white;
    padding: clamp(8px , 12px  , 15px)   clamp(20px , 25px  , 28px);
    /* padding: 12px 25px; */
    margin: 20px 0;
    text-align: center; 
    text-decoration: none;
    font-weight: bold;
    border-radius: clamp(5px, 8px, 10px);
    display: inline-block;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  
  .download-btn:hover {
    background-color: #218838;
    transform: scale(1.05); /* Chhota sa zoom effect */
    color: white;
  }
  
  
  
  /* Appearence part or Theme Toggle Button */
  .theme-toggle{
  position: relative;
  width: 70px;
  height: 34px;
  border-radius: 30px;
  border: none;
  background: #e5e7eb;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  transition: background 0.4s ease;
  }
  
  .theme-toggle .icon{
  font-size: 16px;
  z-index: 2;
  }
  
  .toggle-ball{
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: white;
  left: 4px;
  transition: transform 0.4s ease;
  }
  
  body.dark .theme-toggle{
  background: #334155;
  }
  
  .toggle-ball{
  background: white;
  }
  
  
  
  body.dark .toggle-ball{
  transform: translateX(36px);
  }
  
  
  /* icon animation */
  body.dark .sun{
  opacity: 0.3;
  }
  
  body:not(.dark) .moon{
  opacity: 0.3;
  }
  
  /* language box */
  
  .lang-box {
  position: relative;
  bottom: 15px;
  left: 0;
  /* transform: translateX(-50%); */
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  z-index: 10;
  }
  
  
  
  
  .lang-box button {
  height: 45px;
  line-height: 16px;
  padding: 8px 16px;
  border-radius: 20px;
  border: none;
  /* background: #222; */
  background: rgb(0, 0, 0);
  color: #ebb2f2;;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3 linear, background 0.5 linear ,box-shadow 0.5 linear;
  }
  
  .lang-box button:hover {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  box-shadow:1px 1px 20px #4a537d;
  }
  
  body.dark .lang-box button{
  color: #f0e2e2;;
  background:linear-gradient(160deg, rgba(0, 0, 0, 0.396), rgba(0, 0, 139, 0.559), rgba(0, 33, 0, 0.469)) ;
  
  }


  
  /* footer bootom */

  .footer-bottom{
    margin-top:3rem;
    padding-top:1.5rem;
    padding-bottom: 1.1rem;
    border-top:2px solid var(--muted-text);
    display: block;
    color: var(--accent);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
  }
  
  .footer-bottom a{
    color: var(--light-box);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s  ease-in;
  }

  body.dark .footer-bottom a {
    color: lightblue ;
    transition: all 0.3s  ease-in;
  }
  
  .footer-bottom a:hover{
    text-decoration: underline;
    color: var(--accent);
  }


  
  
  /*Responsive for footer part */


  @media(max-width: 900px){
  .footer-wrapper{
   grid-template-columns: 1fr;
   text-align: center;
  }
  }
  
  
  /* responsive */
  @media (max-width:435px){
   body{
     padding:0.5rem 1rem 0.5rem 1rem;
     align-items: flex-start;
     background-image: var(--bg-main);
     color: var(--text-main);
   }
   /* atm box */
  
  .main-container{
  width:350px;
  max-height: 95vh;
  background: var(--card-bg);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(16,24,40,0.12);
  overflow:hidden;
  border:1px solid rgba(2,6,23,0.06);
  
  }
  
    
   .screen-area{
     padding: .3rem;
   }
   
   .screen-area .screen-inner{
    padding: 4px;
    min-height: 33vh;
     height: auto;
    gap: 20px;
   margin: 1rem 1rem 1rem 1rem;
   }
   .sides{
     padding:1rem;
     }
  .side-col{
     gap: 10px;
     }
     .side-btn{
       margin-bottom: 0.5rem;
     }
     .side-btn img{
       width:  2.2rem;
       height: 2rem;
       padding: 0.15rem 0.15rem;
     }
     .side-btn span{
       color: rgb(22, 22, 43);
     }
     .card-slot{
       border-top:1px dashed rgba(2,6,23,0.04);
       padding:.5rem;
       }
       .indicator{
       width:60%;
       height:35px;
       border-radius:6px;
       background:linear-gradient(90deg,#2563eb,#06b6d4);
       opacity:.9;
       
       }
       .bottom{
       padding:1rem;
       }
       .cash-slot , #helpBtn {
       height:35px;
       min-width:40%;
       font-size:0.85rem;
        font-weight:bold;
      }
     
       .footer{
         border-radius: 18px;
         margin-bottom: 1rem;
       }
       .footer-wrapper{
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
       }
       .footer-wrapper .about, .footer-wrapper .footer-col{
         text-align: left;
       }
  
  
  }
  
  
  
  
  /* RESPONSIVE MEDIA QUERIES */
  
  /*  MOBILE (≤480px) */
  @media (max-width:480px){
  
  body{
   padding:0.5rem;
   align-items:flex-start;
  }
  
  .seo-content{
   max-width:100%;
   min-height:auto;
  }
  
  .main-container{
   width:100%;
   min-height:auto;
  }
  
  .screen-area{
   padding:.3rem;
  }
  
  .footer{
   margin-top:2rem;
   border-radius:12px;
  }
  
  .footer-wrapper{
    grid-template-columns:1fr;
    text-align:left;
   }
  }


  
  /*  LARGE MOBILE / SMALL TABLET (481px–600px) */
  @media (min-width:481px) and (max-width:600px){
  
  .seo-content{
   max-width:95%;
  }
  
  .main-container{
   width:90%;
  }
  
  .footer-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }
  
  
  .footer-wrapper .footer-col:nth-child(1) {
    grid-column: 1 / span 2; 
    text-align: left;      
    
  }  


  .footer-wrapper .footer-col:nth-child(4){
    grid-column: 1 / span 2;
  }

  .footer-wrapper .footer-col:last-child{
    grid-column: 1 /span 2;
  }
  }
  
  /* TABLET (601px–768px) */
  @media (min-width:601px) and (max-width:768px){
  
  .seo-content{
   max-width:85%;
  }
  
  .main-container{
   width:380px;
  }
  
  .footer-wrapper{
   grid-template-columns:1fr 1fr;
    text-align: left;
  }
  .footer-col:nth-child(1){
    grid-column: 1/ span 2;
  }
  .footer-col:nth-child(4){
    grid-column: 1/span2;
  }
  .footer-col:nth-child(5){
    grid-column: 1/span2;
  }


  }
  
  /* LARGE TABLET / SMALL LAPTOP (769px–1024px) */
  @media (min-width:769px) and (max-width:1024px){
  
  .seo-content{
   max-width:70%;
  }
  
  .main-container{
   width:400px;
  }

  
  .footer-wrapper{
   grid-template-columns:1fr 1fr 0.3fr; 
    text-align: left;
  }
  .footer-col:nth-child(1){
    grid-column: 1/ span 4;
  }
  .footer-col:nth-child(2){
    grid-column:  1 ;
  }
  .footer-col:nth-child(3){
    grid-column:  2 ;
  }

  .footer-col:nth-child(4){
    grid-column: 1/span 4;
  }
  .footer-col:nth-child(5){
    grid-column: 1/span 4;
  }

  }
  

  /*  DESKTOP (≥1025px) */
  @media (min-width:1025px){

  .seo-content{
   max-width:50%;
  }
  
  .main-container{
   width:420px;
  }

  }
  
  
  
  
   /*   END */