:root {
  /* CSS HEX */
  --platinum: #ccdbdcff;
  --platinum-light: #F3F6F7;


  /* CSS HEX */
  --electric-indigo: #7300ebff;
  --chrysler-blue: #5a00d1ff;
  --antiflash-white: #f3f6f7ff;
  --light-sea-green: #00a9a5ff;
  --bright-pink-crayola: #f05365ff;
  --paars: var(--chrysler-blue);
  --bs-danger: var(--electric-indigo);
  --bs-success: var(--dark-slate-gray);
  --bs-card-title-color: var(--paars);
  --textfont: darkslategray;
  --bs-modal-color: darkslategray;
  --bs-dark-rgb: darkslategray;
}

h1,
h2,
h3,
h4 {
  font-family: 'Fira Sans Extra Condensed', sans-serif;
}

.bg-contrast {
  background-color: var(--light-sea-green);
}

.fontgrad {
  color: var(--electric-indigo);
  background: linear-gradient(0deg, #5a00d1ff 35%, white 45%, #5a00d1ff 65%);
   -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-bg-primary {
  background-color: var(--electric-indigo) !important;
  color: white;
}

.btn-light,
.text-bg-light {
  background-color: var(--light-sea-green) !important;
  color: white !important;
}

.list-group-item.list-group-item-secondary {
  background-color: var(--platinum-light) !important;
}

/* .list-group-numbered > .list-group-item::before {
  background-color: var(--electric-indigo)!important;
} */

html,
body {
  color: var(--textfont);
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  /* font-family: 'Fira Sans Extra Condensed', sans-serif; */
  /* font-size: 1.1rem; */
  font-size: 17px;
  font-family: var(--bs-font-sans-serif);
  background-color: var(--platinum-light)
}

.navbar {
  background-color: var(--platinum-light)
}

.nrround {
  color: white;
  background-color: var(--electric-indigo);
  max-height: 1.2em;
  min-width: 30px;
  text-align: center;
}

.text-white a {
  color: white;
}

html {
  /*  overflow: hidden;  */
  scroll-behavior: smooth;
}

.paars {
  color: var(--electric-indigo);
}

.introtext, .introtext a {
  background-color: var(--electric-indigo);
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}

.vetgroot {
  font-size: calc(1.475rem + 7.7vw);
  color: var(--electric-indigo);
}

.teringgroot {
  font-size: calc(1.475rem + 3.7vw);
  color: var(--electric-indigo);
}


.bestgroot {
  font-size: calc(1.475rem + 1.7vw);
  color: var(--bright-pink-crayola);
}

/* h2 {
  font-size: 110%;
  font-weight: bold;
  margin-bottom: 0;
} */

h1,
h2,
h3,
h4,
h5,
h6,
svg {
  /* font-family: 'Fira Sans Extra Condensed', sans-serif; */
  /* color: var(--bs-red); */
  font-weight: 700;
}

.smalltext {
  font-size: 65%;
}

.smalllogo {
  max-width: 100px;
}

.section-header {
  text-align: center;
}

/* .shadow-lg {
  box-shadow: 0 0.1rem 3rem rgba(0, 0, 0, .175) !important;
} */


img {
  image-rendering: -webkit-optimize-contrast;
}

.btn-paars {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--chrysler-blue);
  --bs-btn-border-color: var(--chrysler-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--light-sea-green);
  --bs-btn-hover-border-color: var(--light-sea-green);
  ;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--electric-indigo);
  ;
  --bs-btn-active-border-color: var(--electric-indigo);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--electric-indigo);
  --bs-btn-disabled-border-color: var(--electric-indigo);
}


.btn-green {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--electric-indigo);
  --bs-btn-border-color: var(--electric-indigo);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-green);
  --bs-btn-hover-border-color: var(--bs-green);
  ;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--electric-indigo);
  --bs-btn-disabled-border-color: var(--electric-indigo);
}

.card-deck {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin-right: -15px;
  margin-left: -15px;
}


.icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  vertical-align: sub;
}


/* cards */
.card img {
  width: 100%;
  max-height: 125px;
  ;
}

.card h3 {
  color: var(--textfont);
  font-weight: 700;
}

.bg-red {
  background-color: var(--bs-red);
}

.strikediag {
  /* color: red; */
  background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}

.logo-icon {
  max-width: 150px;
}

.lc-block {
  font-weight: 300;
}


#products.container>.container {
  margin-top: 0 !important
}


#zebottom a {
  color: var(--textfont);
}


#cardwithmodals .card:hover {
  cursor: pointer
}

.badge {
  /*opacity: 0.5;*/
  background-color: var(--bs-gray-500);
  /*background : linear-gradient(90deg, var(--bs-gray-500) 0%, var(--bs-gray-800) 100%);*/
}

.card-body .card-title,
.modal-header .modal-headertitle {
  display: flex;
}

.card-body .badge {
  max-height: 33px;
}

.modal-header .badge {
  max-height: 38px;
}


.badge.Nocode {
  background-color: #530d53;
}

.badge.Identification {
  background-color: #530d53;
}

.badge.Hetzner {
  background-color: #00cafd;
}

.badge.Edge {
  background-color: #ce00ce;
}

.badge.PayPal {
  background-color: #530d53;
}

.badge.AI {
  background-color: #8a06f6;
}

.badge.Bun {
  color: black;
  background-color: rgb(249 241 225)
}

.badge.Backoffice {
  background-color: #4a45ca
}

.badge.Bootstrap {
  background-color: #322f88
}

.badge.CSS {
  background-color: #e38e6c
}

.badge.CMS {
  background-color: #bb7559
}

.badge.Dashboard {
  background-color: lightsalmon;
}

.badge.Forms {
  background-color: #1ce6c0;
}

.badge.Hosting {
  background-color: #17bd9e;
}

.badge.HTML {
  background-color: #11806b;
}

.badge.Headless {
  background-color: lightsalmon;
}

.badge.Invoicing {
  background-color: #5550ea
}

.badge.Images {
  background-color: #5550ea
}

.badge.Jamstack {
  background-color: #5550ea
}

.badge.Javascript {
  background-color: purple
}

.badge.Maps {
  background-color: blue
}

.badge.Multilanguage {
  background-color: black
}

.badge.Nodejs {
  background-color: red
}

.badge.PHP {
  background-color: red
}

.badge.SEO {
  background-color: cyan;
  color: black
}

.badge.Serverless {
  background-color: #400080
}

.badge.Usability {
  background-color: teal;
}

.badge.Webcomponents {
  background-color: #ff7d1f
}

.badge.Webscraping {
  background-color: #ff7d1f
}

.badge.webworkers {
  background-color: #371137;
}

.badge.WooCommerce {
  background-color: lightcoral;
}

.badge.WordPress {
  background-color: yellow;
  color: black
}

.popover-header {
  font-size: 110%;
  font-weight: bold;
  padding: 2%;
}

.popover-body {
  font-size: 90%;
  font-weight: 300;
  padding: 2%;

}


/* ani */
     
/* Container for the sentence */
    .sentence {
      display: flex; /* Align items side by side */
      /* font-family: 'Fira Sans Extra Condensed', sans-serif; */
      /* font-family: 'Fira Sans Extra Condensed', sans-serif; */
      /* font-size: calc(.5rem + 1.2vw); Controls the font size */
      align-items: center; /* Ensures left and right are aligned vertically */
    }

    /* Fixed part - the left side of the sentence */
    .fixed {
      font-family: 'Fira Sans Extra Condensed', sans-serif;
      margin-right: 10px; /* Spacing between the fixed part and the slider */
      line-height: 1.5em;  /* Adjust the line-height to match with animated text */
      white-space: nowrap; /* Prevents wrapping */
    }

    /* Container for the animated part (right side) */
    .slider {
      position: relative;
      overflow: hidden; /* Hides anything that moves out of bounds */
      height: 1.5em; /* Ensures the height of the animated part matches the line height */
    }

    /* The elements in the slider will be stacked vertically */
    .slider span {
      display: flex;
      flex-direction: column;
      animation: slide 10s infinite; /* Increased duration to ensure all 6 items show */
    }

    /* Keyframes for sliding the sentences vertically */
    @keyframes slide {
      0% { transform: translateY(0); }
      10% { transform: translateY(0); }
      20% { transform: translateY(-1.5em); } /* Moves by one line height */
      30% { transform: translateY(-3em); }
      40% { transform: translateY(-4.5em); }
      50% { transform: translateY(-6em); }
      60% { transform: translateY(-7.5em); }
      70% { transform: translateY(-9em); } /* Final element goes off-screen */
      80% { transform: translateY(-9em); } /* Holds the last element for a moment */
      90% { transform: translateY(0); } /* Resets to the first element */
      100% { transform: translateY(0); }
    }

    /* Each sentence line in the slider */
    .slider div {
      text-align: left;
      line-height: 1.5em;  /* Matches line-height to prevent overflow */
      font-size: inherit;  /* Inherits font size from the parent container */
    }