:root {
  --bodycolor: #FFFFFF;
  --textcolor: #000000;
  --textcolorlight: #4A4A4A;
  --themecolor: #ff4f00;
  --themecolordark: #8b2e02;
  --themelight: rgba(255,79,0, 0.33);
  --tabscolor: #696969;
  --footercolor: #F3F3F3;
  --bordercolor: #D1D1D1;
  --borderdark: #A9A9A9;
  --grayborder: #AEAEAE;
  --inputborder: #D1D1D1;
  --placeholder: #C8C8C8;
  --borderlight: #D1D1D1;
  --blackcolor: #000000;
  --darkcolor: #1B1A1F;
  --blacklight: #141414;
  --darkborder: #A9A9A9;
  --redcolor: #DC4453;
  --orangecolor: #FD7E14;
  --whitecolor: #FFFFFF;
  --white94: rgba(255, 255, 255, 0.94);
  --disabledcolor: #B7B7B7;
  --activebgColor: #F3F3F3;
  --lightgraybg: #F7F7F7;
  --lightgreen: #EAFBEC;
  --tableHeadingTr: #F3F3F3;
  --darkGreyBg: #CBCBCB;
  --categorycolor: #2B2A2F;
  --bodylightcolor: #FFFFFF;
  --themeextralight: rgba(255,79,0 / 13%);
  --white:#FFFFFF;
}

.dark-mode {
  --bodycolor: #1B1A1F;
  --textcolor: #BBBABC;
  --textcolorlight: #C7C7C7;
  --themecolor: #ff4f00;
  --themecolordark: #8b2e02;
  --themelight: rgba(255,79,0, 0.33);
  --tabscolor: #696969;
  --footercolor: #000000;
  --bordercolor: #525157;
  --borderdark: #D9D9D9;
  --grayborder: #AEAEAE;
  --inputborder: #525157;
  --placeholder: #C8C8C8;
  --borderlight: #525157;
  --blackcolor: #FFFFFF;
  --darkcolor: #FFFFFF;
  --blacklight: #141414;
  --darkborder: #C7C7C7;
  --redcolor: #DC4453;
  --orangecolor: #FD7E14;
  --whitecolor: #000000;
  --white94: rgba(0, 0, 0, 0.94);
  --disabledcolor: #B7B7B7;
  --activebgColor: #000000;
  --lightgraybg: #000000;
  --lightgreen: #EAFBEC;
  --tableHeadingTr: #141414;
  --darkGreyBg: #CBCBCB;
  --categorycolor: #2B2A2F;
  --bodylightcolor: #27262A;
  --themeextralight: rgba(255,79,0 / 13%);
  --white:#FFFFFF;
}

h1{
  color:var(--blackcolor)
}

p{
 color:var(--blackcolor) !important
}

.price-card {
  border: 2px solid var(--themecolor);
}

.price-card:hover{
    background-color: var(--themecolor);
   animation: lift 0.5s ease;
}

 .price-card span,.price-card p{
  color: var(--blackcolor);
}

.price-card h3{
  color: var(--themecolordark);
}

.price-card a{
  background-color: var(--blackcolor);
  color: var(--themecolor);

}

 @keyframes lift {
    0% { transform: translateY(0); }
    25% { transform: translateY(-15px); }
    50% { transform: translateY(15px); }
    75% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
  }
  

 .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .tab {
            cursor: pointer;
            padding: 10px 20px;
            border: 1px solid #ccc;
            margin: 0 5px;
            border-radius: 5px;
        }

        .tab.active {
            background-color: var(--themecolor);
            color: var(--themecolor);
        }
        .tab:hover{
          background-color: var(--themecolor);
        }

        .tab:focus{
          background-color: var(--themecolor);
        }

        

        .price-card-section {
            display: none;
        }

        .price-card-section.active {
            display: grid;
        }