body {
    font-family: Poppins, sans-serif;
    color: #000;
}

.btn-primary {
    background-color: #0047ff;
    color: #ffffff;
    border-color: #fff;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #ffffff;
    color: #0047ff;
    border-color: #0047ff;
}

.logo {
    width: 100%;
    max-width: 125px;
}

.divider-primary {
    color: #0047ff;
    border-width: 10px;
    opacity: 1;
    border-radius: 20px;
    width: 65px;
}

/* Ribbon CSS */

.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 9px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#0047FF 0%, #147AFF 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #147AFF;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #147AFF;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #147AFF;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #147AFF;
}

#mobileNavbarBottom a {
  font-size: 0.5em;
}

.btnWebsites {
  width: 20vw;
  height: 20vw;
  max-width: 100px;
  max-height: 100px;
  font-size: 0.5em;
}

.btnWebsitesPrimary {
  /* fallback for old browsers */
  background: #1e5799; /* Old browsers */
  background-image: linear-gradient(to right, #0047FF , #00B2FF);
}

.btnWebsitesWarning {
  /* fallback for old browsers */
  background: #1e5799; /* Old browsers */
  background-image: linear-gradient(to right, #FF4646 , #992A2A);
}

/******** Hero Banner Gallery Viewer Start *********/

.hero-scroll-container img {
    width: 100px;
    height: auto;
    border-radius: 10px;
    cursor: pointer;
}

/* Container for the image and the icon */
.hero-container {
    display: inline-block;
}

/* Icon container */
.hero-icon-container {
 z-index: 1; /* Ensure the icon is above the image */
}

.currentBackground {
    opacity: 0.5;
}

.enlarge-on-hover {
    transition: transform 0.2s ease-in-out; /* Add a smooth transition effect */
}

.enlarge-on-hover:hover,
.enlarge-on-hover:focus {
    transform: scale(1.1); /* Scale the image to 110% when hovered over or focused on */
}

/******** Hero Banner Gallery Viewer End *********/

/***** JQuery UI Styling Start ********/

.sortable-placeholder {
  border: 2px dashed #ccc;
  background-color: #f9f9f9;
}

/******* JQuery UI Styling End *********/


/**************** Overwritten Bootstrap Classes Start ****************/

.bg-dark {
  background-color: #212529 !important;
}

.link-light {
  color: #6B7A89 !important;
}

.active {
  color: #93ABC2 !important;
}

.package {
  font-size: 10px;
}

.activeTemplate {
  background-image: linear-gradient(45deg, #00d021, #006a11);
}

.btnSelectTemplate {
  background-image: linear-gradient(to right, #0047FF, #00B2FF);
}

.btnTemplate {
  background-image: linear-gradient(to right, #0047FF, #00B2FF);
}

.image-scroll-container {
  white-space: nowrap !important;
  width: 100% !important;
}
.image-scroll-container img {
    width: 100px !important;
    height: auto !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}


/**************** Overwritten Bootstrap Classes End ****************/


.modal {
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
}