/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */
/* For Webkit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: #1f2937;
}

::-webkit-scrollbar-thumb {
  border-radius: 100vh;
  background: linear-gradient(rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234));
}

/* For Firefox */
* {
  scrollbar-width: auto; /* Maintains the original width */
  scrollbar-color: rgb(147, 51, 234) #1f2937; /* Uses the primary color of the gradient */
}

/* Custom styles for Firefox thumb */
.scrollbar-thumb::scrollbar-thumb {
  background: linear-gradient(rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234));
  border-radius: 100vh;
}

/* For Internet Explorer and Edge (Legacy) */
body {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.hidden {
    display: none;
}
.custom-element-right {
  right: -400px !important;
}

.selected {
    background-color: #9d50bb !important;
    color: #fff !important;
}

.mainbtn {
    padding: 15px 20px !important;
    font-size: 16px !important;
    margin: 10px !important;
}

.mainbtn2 {
    padding: 15px 20px !important;
    font-size: 16px !important;
    margin: 10px !important;
}

.subbtn {
    padding: 10px 10px !important;
    font-size: 16px !important;
    margin: 10px !important;
}

.subbtn2 {
    padding: 10px 10px !important;
    font-size: 16px !important;
    margin: 10px !important;
}

@media (max-width: 1366px) {
  .main-container.slider .silder-container .slider-content h1 {
    line-height: 58px !important;
    font-size: 42px !important;
}
  .custom-element-right {
  width: 100% !important;
  max-height: 400px !important;
  right: -300px !important;
  overflow: auto !important;
}
}
.sec-normal {
    padding: 60px 0 !important;
}
.btn-123:focus {
      background-color: #9d50bb; /* Active button color */
      color: #fff !important;
    }

.wpc-vps-info .h-plans-info .price2 {
    font-size: 46px !important;
    font-weight: 700;
    display: -webkit-inline-box;
    color: #414142;
}

.h-plans-info .price2 {
    margin-bottom: 2px;
}
.btn-default-yellow {
    background-color: #fdd700!important;
    color: #000 !important;
    border: none;
}
.btn-default-yellow:hover {
    background-color: #212529!important;
    color: #fff !important;
    border: none;
}
.casestudy img {
    opacity: .5;
    width: 100%;
}
.blog .sidebar .categories .heading a {
    font-size: 15px !important;
}
.blog .sidebar .categories .heading a.active{
    font-size: 15px !important;
}
.blog .sidebar .categories .heading a .svg {
    height: 20px !important;
}
.pt-31 {
    padding-top: 31px !important;
}
.blog .wrap-blog .wrapper {
    padding: 25px 80px 80px 80px !important;
}


.blog .sidebar .categories .line:not(.active), .pricing.table.tablepage, .sec-bg2 {
    background-color : rgb(147, 51, 234);
}


#promo-popup {
 position: fixed;
 bottom: 25px;
 left: 50%;
 transform: translateX(-50%);
 background-color: #000;
 color: #fff;
 border-radius: 50px;
 box-shadow: 0 2px 15px rgba(0,0,0,0.3);
 z-index: 9999;
 max-width: 70%;
 width: 100%;
 /* display: none; */
 animation: fadeInUp 0.5s ease-out forwards;
 font-family: Arial, sans-serif;
 overflow: hidden;
 padding: 0;
}

.scroll-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.scroll-container {
  overflow: hidden;
  flex: 1;
  padding: 10px; /* 10px padding on both sides to prevent text hitting edges */
}

.scroll-track {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-loop 15s linear infinite;
  font-weight: bold;
  font-size: 1rem;
  animation-play-state: running;
}

.scroll-container:hover .scroll-track {
  animation-play-state: paused;
}

#close-popup {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  margin-left: 15px;
  cursor: pointer;
  line-height: 1;
}

@keyframes scroll-loop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes fadeInUp {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  #promo-popup {
    border-radius: 25px;
  }

  .scroll-track {
    font-size: 0.85rem;
    animation-duration: 15s;
  }

  #close-popup {
    font-size: 1.2rem;
  }
}