.login-button {
  border: 2px solid #000000;
  padding-left: 9px;
  padding-right: 9px;
  padding-top: 0px;
  padding-bottom: 0px;
  box-sizing: border-box;
  border-radius: 0.7em;
  width: 8em;
  height: 3em;
  align-items: center;
  position: relative;
  display: flex;
  justify-content: center;
  margin-left: 30px;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.login-button:hover {
  box-shadow: 0 0 10px #3471F0;
  background-color: #3471F0;
}

.login-button:hover p, .login-button:hover a { 
  color: #ffffff;
}

.login-button p {
  font-family: "poppins-regular";
  font-weight: 100;
  font-size: 25px;
  text-align: center;
  margin-bottom: 0px;
  color: #000000;
  transition: color 0.3s ease;
  z-index: 1;
}

.login-button a {
  text-decoration: none;
  color: inherit;
}

.demo-button {
  /* border: 2px solid #000000; */
  background-color: #000000;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 0px;
  padding-bottom: 0px;
  box-sizing: border-box;
  border-radius: 0.7em;
  width: 25em;
  height: 3.5em;
  align-items: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 350px;
  margin-top: 60px;
  /* transition: box-shadow 0.3s ease, background-color 0.3s ease; */
}

/* .demo-button:hover {
  box-shadow: 0 0 10px #3471F0;
  background-color: #3471F0;
} */

/* .demo-button:hover p, .demo-button:hover a { 
  color: #ffffff;
} */

.demo-button p {
  font-family: "poppins-regular";
  font-weight: 100;
  font-size: 25px;
  text-align: center;
  margin-bottom: 0px;
  color: #ffffff;
  transition: color 0.3s ease;
  z-index: 1;
}

.demo-button a {
  text-decoration: none;
  display: block;
  color: inherit;
}


.nac ul li {
    --c: #3471F0;
    color: var(--c);
    font-size: 16px;
    
    border-radius: 0.5em;
    width: 12em;
    height: 3em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 3em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
    background-color: #3471f0;
  }
  
  .nac ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: #ffa2c7;
    transform: translateY(150%);
    /* border-radius: 50%; */
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    /* transition-delay: calc((var(--n) - 1) * 0.1s); */
    z-index: -1;
  }

  .nac ul li{
    color: #fff;
  text-decoration: none;
  font-size: 22px;
  font-family: "poppins-semi-b";
  text-transform: capitalize;
  }
  

  

  
  .nac ul li span:nth-child(1) {
    --n: 1;
  }
  
  .nac ul li span:nth-child(2) {
    --n: 2;
  }
  
  .nac ul li span:nth-child(3) {
    --n: 3;
  }
  
  .nac ul li span:nth-child(4) {
    --n: 4;
  }

/* 
button 2 */

  .nac-2 ul li {
    --c: #3471f0;
    color: var(--c);
    font-size: 16px;
    
    border-radius: 0.5em;
    width: 12em;
    height: 3em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 3em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
    background-color: #222222;
  }

  .nac-2 ul {
    padding: 0;
  }


  .nac-2 ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: #3471f0;
    transform: translateY(150%);
    /* border-radius: 50%; */
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    /* transition-delay: calc((var(--n) - 1) * 0.1s); */
    z-index: -1;
  }

  .nac-2 ul li{
    color: #fff;
  text-decoration: none;
  font-size: 22px;
  letter-spacing: 0px;
  text-transform: capitalize;
  font-weight: 400;
  }
  
 

 

  
  .nac-2 ul li span:nth-child(1) {
    --n: 1;
  }
  
  .nac-2 ul li span:nth-child(2) {
    --n: 2;
  }
  
  .nac-2 ul li span:nth-child(3) {
    --n: 3;
  }
  
  .nac-2 ul li span:nth-child(4) {
    --n: 4;
  }

  .login-btn ul li {
    --c: #3471f0;
    color: var(--c);
    font-size: 16px;
    border-radius: 0.5em;
    border: 2px solid #000000;
    box-sizing: border-box;
    width: 12em;
    height: 3em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 3em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
    background-color: #ffffff;
  }

  .login-btn ul {
    padding: 0;
  }


  .login-btn ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: #3471f0;
    transform: translateY(150%);
    /* border-radius: 50%; */
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    /* transition-delay: calc((var(--n) - 1) * 0.1s); */
    z-index: -1;
  }

  .login-btn ul li{
    color: black;
  text-decoration: none;
  font-size: 22px;
  letter-spacing: 0px;
  text-transform: capitalize;
  font-weight: 400;
  }
  
 

 

  
  .login-btn ul li span:nth-child(1) {
    --n: 1;
  }
  
  .login-btn ul li span:nth-child(2) {
    --n: 2;
  }
  
  .login-btn ul li span:nth-child(3) {
    --n: 3;
  }
  
  .login-btn ul li span:nth-child(4) {
    --n: 4;
  }



  .nac-4 ul li {
    --c: #3471f0;
    color: var(--c);
    font-size: 16px;
    
    border-radius: 0.5em;
    width: 12em;
    height: 3em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 3em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
    background-color: #222222;
  }

  .nac-4 ul {
    padding: 0;
  }
  
  .nac-4 ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: #ffffff;
    transform: translateY(150%);
    /* border-radius: 50%; */
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    /* transition-delay: calc((var(--n) - 1) * 0.1s); */
    z-index: -1;
  }

  .nac-4 ul li::after {
    content: url('../img/black-btn-icn.svg');
    position: absolute;
    top: -1px;
    /* left: 0; */
    right: 20px;
  }

  .nac-4 ul li {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-family: "poppins-semi-b";
    text-transform: capitalize;
    width: 250px;
    font-weight: 400;
    letter-spacing: 0px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 20px;
  }
  .offer-inner .main-btn ul li::after {
    display: none;
  }
  .offer-inner .main-btn .nac-2 ul li {
    background-color: #fff;
    padding-right: 0px;
  }
  .offer-inner .main-btn .nac-2 ul li {
    background-color: #fff;
    padding-right: 0px;
    width: 200px;
    color: #000000;
    font-size: 22px;
    height: 63px;
    font-family:"poppins-regular" ;
  }
 
  .offer-inner .main-btn .login-btn ul li {
    background-color: #fff;
    padding-right: 0px;
  }
  .offer-inner .main-btn .login-btn ul li {
    background-color: #fff;
    padding-right: 0px;
    width: 237px;
    color: #000000;
    font-size: 22px;
    height: 63px;
    font-family:"poppins-regular" ;
  }
  
 
  

  
  .nac-4 ul li span:nth-child(1) {
    --n: 1;
  }
  
  .nac-4 ul li span:nth-child(2) {
    --n: 2;
  }
  
  .nac-4 ul li span:nth-child(3) {
    --n: 3;
  }
  
  .nac-4 ul li span:nth-child(4) {
    --n: 4;
  }

  .pricing-plan-button {
    display: flex;
    justify-content: center;
  }

  .premium-cont .white ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: #ffa2c7;
    transform: translateY(150%);
    /* border-radius: 50%; */
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    /* transition-delay: calc((var(--n) - 1) * 0.1s); */
    z-index: -1;
  }

  .pricing-plan-button ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: #ffa2c7;
    transform: translateY(150%);
    /* border-radius: 50%; */
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    /* transition-delay: calc((var(--n) - 1) * 0.1s); */
    z-index: -1;
  }


  .white ul li {
    --c: #3471f0;
    color: var(--c);
    font-size: 16px;
    
    border-radius: 0.5em;
    width: 12em;
    height: 3em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 3em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
    background-color: #ffffff;
  }

  .pricing-plan-button ul li {
    --c: #3471f0;
    color: var(--c);
    font-size: 16px;
    
    border-radius: 0.5em;
    width: 12em;
    height: 3em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 3em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
    background-color: #3471F0;
  }

  .white ul {
    padding: 0;
  }
   
  .pricing-plan-button ul {
    padding: 0;
  }

  .pricing-card-std .pricing-plan-button ul {
    padding: 0;
    margin-top: 22px;
  }

  .pricing-card-prm .pricing-plan-button ul {
    padding: 0;
    margin-top: 22px;
  }

  .pricing-card-free .pricing-plan-button ul li:hover {
    box-shadow: 0 0 20px #3471F0;
    background-color: #3471F0;
  }

  .pricing-card-std .pricing-plan-button ul li:hover {
    box-shadow: 0 0 20px #3471F0;
    background-color: #3471F0;
  }

  .pricing-card-prm .pricing-plan-button ul li:hover {
    box-shadow: 0 0 20px #3471F0;
    background-color: #3471F0;
  }
  

  .white ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: #222222;
    transform: translateY(150%);
    border-radius: 0px;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    /* transition-delay: calc((var(--n) - 1) * 0.1s); */
    z-index: -1;
    transition: 0.5s;
  }

  .pricing-plan-button ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: #222222;
    transform: translateY(150%);
    border-radius: 0px;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    /* transition-delay: calc((var(--n) - 1) * 0.1s); */
    z-index: -1;
    transition: 0.5s;
  }

  .white ul li {
    color: #222222;
    text-decoration: none;
    font-size: 22px;
    font-family: "poppins-semi-b";
    text-transform: capitalize;
  }

  .pricing-plan-button ul li {
    color: #222222;
    text-decoration: none;
    font-size: 22px;
    font-family: "poppins-semi-b";
    text-transform: capitalize;
  }
  
  .white ul li span:nth-child(1) {
    --n: 1;
  }
  
  .white ul li span:nth-child(2) {
    --n: 2;
  }
  
  .white ul li span:nth-child(3) {
    --n: 3;
  }
  
  .white ul li span:nth-child(4) {
    --n: 4;
  }

  .pricing-plan-button ul li span:nth-child(1) {
    --n: 1;
  }
  
  .pricing-plan-button ul li span:nth-child(2) {
    --n: 2;
  }
  
  .pricing-plan-button ul li span:nth-child(3) {
    --n: 3;
  }
  
  .pricing-plan-button ul li span:nth-child(4) {
    --n: 4;
  }

  .btn-icon ul li{
    position: relative;
  }

  .card-body .pricing-plan-button ul li{
    position: relative;
  }

  .btn-icon ul li::after {
    /* content: url('../img/btn-icon.svg'); */
    position: absolute;
    top: 4px;
    /* left: 0; */
    right: 4px;
  }

  .card-body .pricing-plan-button ul li::after {
    /* content: url('../img/btn-icon.svg'); */
    position: absolute;
    top: 4px;
    /* left: 0; */
    right: 4px;
  }

  
  .btn-icon ul li::after {
    content: url('../img/btn-icon.svg');
    position: absolute;
    top: -3px;
    /* left: 0; */
    right: 6px !important;
  }
  .btn-icon ul li {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    /* font-family: "poppins-regular"; */
    text-transform: capitalize;
    padding-right: 43px;
    width: 190px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: normal;
    font-weight: 400;
    font-family: "poppins-semi-b";
  }

  .card-body .pricing-plan-button ul li::after {
    content: url('../img/btn-icon.svg');
    position: absolute;
    top: -3px;
    /* left: 0; */
    right: 6px !important;
  }
  .card-body .pricing-plan-button ul li {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    /* font-family: "poppins-regular"; */
    text-transform: capitalize;
    padding-right: 43px;
    width: 190px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: normal;
    font-weight: 400;
    font-family: "poppins-semi-b";
  }

  .pricing-card-std .card-body .pricing-plan-button ul li {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    /* font-family: "poppins-regular"; */
    text-transform: capitalize;
    padding-right: 43px;
    width: 230px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: normal;
    font-weight: 400;
    font-family: "poppins-semi-b";
  }

  .pricing-card-prm .card-body .pricing-plan-button ul li {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    /* font-family: "poppins-regular"; */
    text-transform: capitalize;
    padding-right: 43px;
    width: 230px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: normal;
    font-weight: 400;
    font-family: "poppins-semi-b";
  }

  @media (min-width: 768px) and (max-width: 991px) {

    .card-body .pricing-plan-button ul li::after {
      content: url(../img/btn-icon.svg);
      position: absolute;
      top: -3px;
      right: 6px !important;
  }

  .pricing-card-prm .card-body .pricing-plan-button ul li::after {
    content: url(../img/btn-icon.svg);
    position: absolute;
    top: -3px;
    right: -3px !important;
  }

  .pricing-card-std .card-body .pricing-plan-button ul li::after {
    content: url(../img/btn-icon.svg);
    position: absolute;
    top: -3px;
    right: -3px !important;
  }

    .card-body .pricing-plan-button ul li {
      color: #fff;
      text-decoration: none;
      font-size: 18px;
      text-transform: capitalize;
      padding-right: 43px;
      width: 170px;
      height: 54px;
      display: flex;
      justify-content: center;
      align-items: center;
      letter-spacing: normal;
      font-weight: 400;
      font-family: "poppins-semi-b";
  }
    .pricing-card-std .card-body .pricing-plan-button ul li {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    text-transform: capitalize;
    padding-right: 43px;
    width: 200px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: normal;
    font-weight: 400;
    font-family: "poppins-semi-b";
  }

  .pricing-card-prm .card-body .pricing-plan-button ul li {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    text-transform: capitalize;
    padding-right: 43px;
    width: 200px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: normal;
    font-weight: 400;
    font-family: "poppins-semi-b";
  }

  }

  .white ul li{
    position: relative;
  }

  .pricing-plan-button ul li{
    position: relative;
  }

  .white ul li::after {
    content: url('../img/btn-icon.svg');
    position: absolute;
    top: -2px;
    /* left: 0; */
    right: 6px;
  }

  .pricing-plan-button ul li::after {
    content: url('../img/btn-icon.svg');
    position: absolute;
    top: -2px;
    /* left: 0; */
    right: 6px;
  }

  .white ul li {
    text-decoration: none;
    font-size: 22px;
    font-family: "poppins-semi-b";
    text-transform: capitalize;
    padding-right: 51px;
    width: 190px;
    letter-spacing: 0px;
    font-weight: 400;
    height: 55px;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .pricing-plan-button ul li {
    text-decoration: none;
    font-size: 22px;
    font-family: "poppins-semi-b";
    text-transform: capitalize;
    padding-right: 51px;
    width: 190px;
    letter-spacing: 0px;
    font-weight: 400;
    height: 55px;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  

  /* form */

  .form-ani-btn ul li {
    --c: #3471f0;
    color: var(--c);
    font-size: 16px;
    
    border-radius: 0.5em;
    width: 12em;
    height: 3em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 3em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
    background-color: #222222;
  }

  .form-ani-btn ul {
    padding: 0;
  }
  
  .form-ani-btn ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: #fff;
    transform: translateY(150%);
    /* border-radius: 50%; */
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    /* transition-delay: calc((var(--n) - 1) * 0.1s); */
    z-index: -1;
  }

  .form-ani-btn ul li{
    color: #fff;
  text-decoration: none;
  font-size: 22px;
  font-family: "poppins-semi-b";
  text-transform: capitalize;
  }
  
 
  
 
  
  .form-ani-btn ul li span:nth-child(1) {
    --n: 1;
  }
  
  .form-ani-btn ul li span:nth-child(2) {
    --n: 2;
  }
  
  .form-ani-btn ul li span:nth-child(3) {
    --n: 3;
  }
  
  .form-ani-btn ul li span:nth-child(4) {
    --n: 4;
  }

  .nac-2 ul li::after {
    content: url('../img/black-btn-icn.svg');
    position: absolute;
    top: -1px;
    /* left: 0; */
    right: 20px;
  }

  .navbar .nac-2 li {
    margin: 0px;
    width: 160px;
    height: 50px;
    display: flex;
  justify-content: center;
  align-items: center;
  }

  .navbar .nac-2 ul li::after {
    content: url('../img/black-btn-icn.svg');
    position: absolute;
    top: -4px;
    /* left: 0; */
    right: 20px;
  }

 

  .nac-2 ul li {
    padding-right: 27px;
    width: 250px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
  font-family: "poppins-semi-b";
  }

  /* .login-btn ul li::after {
    content: url('../img/black-btn-icn.svg');
    position: absolute;
    top: -1px;
    right: 20px;
  } */

  .navbar .login-btn li {
    margin: 0px;
    margin-top: 6px;
    width: 100px;
    height: 45px;
    display: flex;
  justify-content: center;
  align-items: center;
  }

  /* .navbar .login-btn ul li::after {
    content: url('../img/black-btn-icn.svg');
    position: absolute;
    top: -2px;
    right: 20px;
  } */

  .button-group {
    display: flex;
    gap: 4vw; /* Adjust the space between the buttons as needed */
    }
  
    .button-group ul {
    list-style-type: none;
    margin: 10;
    padding: 10;
    }

  .login-btn ul li {
    padding-right: 0px;
    width: 250px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
  font-family: "poppins-semi-b";
  }

  @media (max-width: 1148px) {
    .navbar .login-btn li {
      margin: 0px;
      width: 100px;
      margin-right: 150px; /* Adjust this value as needed */
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    }



      @media (max-width: 1242px) {
        .navbar .login-btn li {
          margin: 0px;
          width: 100px;
          margin-right: 80px; /* Adjust this value as needed */
          height: 45px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        }




        @media (max-width: 1380px) {
          .navbar .login-btn li {
            margin: 0px;
            width: 100px;
            margin-right: 45px; /* Adjust this value as needed */
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .button-group {
            display: flex;
            gap: 1vw; /* Adjust the space between the buttons as needed */
            }
          
            .button-group ul {
            list-style-type: none;
            margin: 10;
            padding: 10;
            }

          }

          @media (max-width: 1220px) {
            .navbar .login-btn li {
              margin: 0px;
              width: 100px;
              margin-right: 150px; /* Adjust this value as needed */
              height: 45px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            }

            @media (max-width: 1260px) {
              .navbar .login-btn li {
                margin: 0px;
                width: 100px;
                margin-right: 80px; /* Adjust this value as needed */
                height: 45px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
              }



              @media (min-width: 1243px) and (max-width: 1260px) {
                .navbar .login-btn li {
                  margin: 0px;
                  width: 100px;
                  margin-right: 50px; /* You might need to adjust this value */
                  height: 45px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }

              @media (min-width: 1081px) and (max-width: 1242px) {
                .navbar .login-btn li {
                  margin: 0px;
                  width: 100px;
                  margin-right: 150px;
                  height: 45px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }

              @media (min-width: 1280px) and (max-width:1380px) {
                .navbar .login-btn li {
                  margin: 0px;
                  margin-top: 0px;
                  width: 100px;
                  margin-right: 50px;
                  height: 50px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
                .button-group {
                  display: flex;
                  gap: 1vw; /* Adjust the space between the buttons as needed */
                  }
                
                  .button-group ul {
                  list-style-type: none;
                  margin: 10;
                  padding: 10;
                  }
              }

              @media (min-width: 1360px) and (max-width:1540px) {
                .navbar .login-btn li {
                  margin: 0px;
                  width: 110px;
                  margin-right: 50px;
                  height: 50px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }

                .button-group {
                  display: flex;
                  gap: 1vw; /* Adjust the space between the buttons as needed */
                  }
                
                  .button-group ul {
                  list-style-type: none;
                  margin: 10;
                  padding: 10;
                  }
              }

              @media (min-width:1500px) and (max-width: 3000px) {
                .navbar .login-btn li {
                  margin: 0px;
                  width: 100px;
                  margin-right: 45px; /* Adjust this value as needed */
                  height: 50px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
      
                .button-group {
                  display: flex;
                  gap: 1vw; /* Adjust the space between the buttons as needed */
                  }
                
                  .button-group ul {
                  list-style-type: none;
                  margin: 10;
                  padding: 10;
                  }
      
                }




  /* hemburgur */

  svg {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .active svg {
    transform: rotate(90deg);
  }
  path {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  path:nth-child(1) {
    transform-origin: 36% 40%;
  }
  path:nth-child(2) {
    stroke-dasharray: 29 299;
  }
  path:nth-child(3) {
    transform-origin: 35% 63%;
  }
  path:nth-child(4) {
    stroke-dasharray: 29 299;
  }
  path:nth-child(5) {
    transform-origin: 61% 52%;
  }
  path:nth-child(6) {
    transform-origin: 62% 52%;
  }
  .active path:nth-child(1) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
  }
  .active path:nth-child(2) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
  }
  .active path:nth-child(3) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
  }
  .active path:nth-child(4) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
  }
  .active path:nth-child(5) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
  }
  .active path:nth-child(6) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
  }
  
  


  .all-ear .pricing-btn-d .btn-icon ul li {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-family: "poppins-semi-b";
    text-transform: capitalize;
    padding-right: 0px;
    height: 50px;
    display: flex;
  align-items: center;
  justify-content: center;
    width: 207px;
  }

  @media screen and (max-width:580px) {

    .banner .btn-icon ul li::after {
      top: 3px !important;
      right: 6px !important;
    } 

  }