/*cancel button*/


.cancel-anim-button {
        position: relative;
        padding: 15px 20px;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 4px;
        cursor: pointer;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 45px;
        min-width: 140px;
        border:1px solid lightgray;
        background:white !important;
        color:#30a3c2 !important;
    }
    .cancel-anim-button:hover{
         transform: scale(1.1);
         background:#30a3c2;
    }
    
    /*upgrade button animation*/
    
    .upgrade-button {
        color: #fff;
        background: #30A3C2; /* Primary Color */
        border: 2px solid #30A3C2;
    }

    .upgrade-button:hover {
        transform: scale(1.1);
    }
    
    .upgrade-button .arrow-upgrade {
        font-size: 20px;
        font-weight: 1200;
        line-height: 1;
    }
    
    
    .upgrade-button-add {
        position: relative;
        padding: 15px 20px;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 4px;
        cursor: pointer;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 45px;
        min-width: 140px;
    }


   .upgrade-button-add span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
    
    /*next button*/
    
    .button-11 {
        position: relative;
        padding: 15px 20px;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 4px;
        cursor: pointer;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 45px;
        min-width: 140px;
    }

    .next-button {
        color: #fff;
        background: #30A3C2; /* Primary Color */
        border: 2px solid #30A3C2;
    }

    .next-button:hover {
        transform: scale(1.1);
        background: #18AEFA;
        /*box-shadow: 0 0 15px #00aaff;*/
    }


    .button-11 span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }

    .next-button .arrow-right {
        font-size: 20px;
        font-weight: 1200;
        line-height: 1;
        animation: bounce 1.5s infinite ease-in-out;
    }

    @keyframes bounce {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(8px, 0); }
    }

.free-trial-btn {
  background: #007bff;
  color: white;
  font-size: 1rem;
  padding: 8px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease-in-out, background 0.3s ease-in-out;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.free-trial-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: #30A3C2;
  text-decoration: none;
  color: white;
}

.free-trial-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 80%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-10deg);
  animation: shimmer 4s infinite;
}

@keyframes shimmer {
  0% { left: -80%; }
  50% { left: 130%; }
  100% { left: 130%; }
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .free-trial-btn {
    font-size: 0.9rem;
    padding: 10px 20px;
  }
}





.try-demo-btn {
  background: #007bff;
  color: white;
  font-size: 1rem;
  padding: 8px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease-in-out, background 0.3s ease-in-out;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.try-demo-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: #30A3C2;
  text-decoration: none;
  color: white;
}

.try-demo-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 80%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-10deg);
  animation: shimmer-right 4s infinite;
}

@keyframes shimmer-right {
  0% { left: 130%; }
  50% { left: -80%; }
  100% { left: -82%; }
}




        .container-dashboard {
            background: transparent;
            backdrop-filter: blur(20px);
            border-radius: 20px;
        }
        
        
        
        .back-button {
            width:100%;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
              background: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 12px;
            font-weight: 600;
            font-size: 15px;
            letter-spacing: -0.025em;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
            position: relative;
            overflow: hidden;
        }

        .back-button::before {
            content: '';
              background: rgba(255, 255, 255, 0.4);

            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            transition: left 0.5s;
        }

        .back-button:hover::before {
            left: 100%;
        }

        .back-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
             background: #30A3C2;
        }

        .back-button:active {
            transform: translateY(0);
            box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
        }

        .arrow-icon {
            width: 16px;
            height: 16px;
            transition: transform 0.3s ease;
        }

        .back-button:hover .arrow-icon {
            transform: translateX(-3px);
        }
        
        
        
        
        .back-btn-outlined {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            color: #495057;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .back-btn-outlined:hover {
            border-color: #30A3C2;
            color: #30A3C2;
            background: #f8fdff;
        }
        
        
        
        
        .back-btn-circular {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 50%;
            color: #666;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .back-btn-circular:hover {
            border-color: #30A3C2;
            color: #30A3C2;
            transform: scale(1.1);
        }
        
        
        
        
         .continue-button {
            cursor: pointer;
            font-weight: 700;
            transition: all 0.2s;
            padding: 5px 20px;
            border-radius: 100px;
            background: #30a3c2;
            border: 1px solid transparent;
            display: flex;
            align-items: center;
            font-size: 15px;
            text-decoration:none;
            color:white;
        }

        .continue-button:hover {
            background: #30a3c2;
        }

        .continue-button > svg {
            width: 28px;
            margin-left: 10px;
            transition: transform 0.3s ease-in-out;
        }

        .continue-button:hover svg {
            transform: translateX(5px);
        }

        .continue-button:active {
            transform: scale(0.95);
        }
        
        
        /* Responsive adjustments */
@media (max-width: 768px) {
  .try-demo-btn {
    font-size: 0.9rem;
    padding: 1px 10px;
  }
  .continue-button{
      padding:1px 10px;
      font-size:12px;
  }
  .continue-button > svg{
      width:21px;
  }
}








        /* From Uiverse.io by adamgiebl */ 
        .cssbuttons-io-button {
            background: #30a3c2;
            color: white;
            font-family: inherit;
            padding: 0.35em;
            padding-left: 1.2em;
            font-size: 17px;
            font-weight: 500;
            border-radius: 0.9em;
            border: none;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center; 
            box-shadow: inset 0 0 1.6em -0.6em #30a3c2;
            overflow: hidden;
            position: relative;
            height: 2.6em;
            padding-right: 3.3em;
            cursor: pointer;
        }

        .cssbuttons-io-button .icon {
            background: white;
            margin-left: 1em;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 2.0em;
            width: 2.2em;
            border-radius: 0.7em;
            box-shadow: 0.1em 0.1em 0.6em 0.2em #30a3c2;
            right: 0.3em;
            transition: all 0.3s;
            gap: 0.5em;
        }

        .cssbuttons-io-button:hover .icon {
            width: calc(100% - 0.6em);
        }

        .cssbuttons-io-button .icon svg {
            width: 1.1em;
            transition: transform 0.3s;
            color: #30a3c2;
            flex-shrink: 0;
            margin-right: 41px;
        }

        .cssbuttons-io-button:hover .icon svg {
            transform: translateX(0.1em);
            margin-right: 0 !important;
        }

        .cssbuttons-io-button:active .icon {
            transform: scale(0.95);
        }

        .cssbuttons-io-button .icon-text {
            color: #30a3c2;
            font-weight: 600;
            font-size: 15px;
            opacity: 0;
            transition: opacity 0.3s;
            white-space: nowrap;
        }

        .cssbuttons-io-button:hover .icon-text {
            opacity: 1;
        }






.button-ex {
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  border: none;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--clr);
  background-color: #fff;
  border:1px solid #30a3c2;
  color: #30a3c2;
  border-radius: 10rem;
  font-weight: 600;
  padding: 0.55rem 1.5rem;
  padding-left: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  transition: background-color 0.3s;
}

.button__icon-wrapper {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  color: var(--clr);
  background-color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.button-ex:hover {
  background-color: var(--clr);
  color: white;
}

.button-ex:hover .button__icon-wrapper {
  color: var(--clr);
  background-color:white;
}

.button__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.button-ex:hover .button__icon-svg:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.button-ex:hover .button__icon-svg--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}