body{
    background: linear-gradient(298deg, #f6f7fc, #f6f7fc);
  }
  .bg-default{
    background: #5030dc;
  }
  .bg-span{
    background: #eeddf0;
    color: #5030dc;
  }
  .text-main-color{
    color: #5030dc;
  }
  .bg-1{
    background: #febfda;
  }
  .bg-2{
    background: #cbc6fe;
  }
  .bg-3{
    background: #ffe8a4;
  }
  .bg-4{
    background: #d5ffd7;
  }
  .bg-p{
    background: #f93188;
  }
  .text-p{
    color:#f93188;
  }
  .img-before{
    position: relative;
  }
  .img-before::before{
    content: '';
    position: absolute;
    height: 99%;
    width: 100%;
    background: linear-gradient(4deg, #000000a6, #00000000);
    border-radius: 10px;
  }
  footer{
    background: #e6e0e04a;
  }
  .bg-cont{
    background: #6042de;
  }
  .grediant-bg3 {
    background: linear-gradient(115deg, #5030dc, #64E9FF);
  }
  .whatsgradient{
    background: linear-gradient(115deg, #77af7f, #23d83f);
  }
  .themeht-btn.primary-btn {
    background: linear-gradient(115deg, #5030dc,  #5235d7);
  }
  .themeht-btn {
    transform: perspective(1px) translateZ(0);
    position: relative;
    overflow: hidden;
    z-index: 9;
    padding: 10px 10px 10px 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    border: none;
    font-weight: 500;
  }
  .themeht-btn:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0;
    background: linear-gradient(115deg, #103CE7, #64E9FF);
    clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
    opacity: 1;
    transition: 0.6s;
    z-index: -1;
  }
  .themeht-btn:hover:before {
    clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
  }
  
  .main-nav ul.sub-menu {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    z-index: 99999;
    box-shadow: 0px 25px 70px rgba(8, 10, 55, 0.08);
    background: #fff;
    border-radius: 20px;
    margin: 0;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
  }
  .main-nav ul li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
  }