@media (min-width: 768px) {
.desktop_padding{

padding:11px 11%;

}



}





@media (max-width: 768px) {

.mobilehide{display: none;}
.mobilecssh1{font-size: 1.5em !important;color:white;}

.page-header{padding:12% !important;z-index: 999 !important;}



.mobiel0{margin-top: 0px !important;}








}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.animated-move {
  animation: float 3s ease-in-out infinite;
}


@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}

.animated-move {
  animation: bounce 2s infinite;
}


@keyframes slide {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

.animated-move {
  animation: slide 2.5s ease-in-out infinite;
}






/* Slide in from left */
/* One-time float animation */
/* Will apply after slide-in finishes */
.floating {
  animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}







.plugin-box {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  color: #000;
  padding: 20px;
  border-radius: 10px;
  transition: color 0.3s ease;
}

/* Create radial background layer */
.plugin-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 0%;
  background: radial-gradient(circle at top left, #C5172E 0%, #38040e 100%);
  transition: width 0.6s ease, height 0.6s ease;
  z-index: 0;
}

/* Hover effect: grow background */
.plugin-box:hover::before {
  width: 200%;
  height: 200%;
}

/* Ensure content stays above background */
.plugin-box > * {
  position: relative;
  z-index: 1;
}

/* Optional: text color transition */
.plugin-box:hover {
  color: #fff;
  transform: translateY(-5px);
}

.plugin-box:hover h5,
.plugin-box:hover p,
.plugin-box:hover .plugin-icon,
.plugin-box:hover .plugin-number {
  color: #fff;
  transition: color 0.5s ease;
}

.smalbox-wrapper {
  position: relative;
  overflow: visible; /* let icon escape */
}

.smalbox-inner {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.smalbox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 0%;
  background: radial-gradient(circle at top left, #C5172E 0%, #38040e 100%);
  transition: width 0.6s ease, height 0.6s ease;
  z-index: 0;
}

.smalbox:hover::before {
  width: 250%;
  height: 250%;
}

.smalbox > * {
  position: relative;
  z-index: 1;
}

.smalbox:hover {
  color: #fff;
}

.smalbox:hover img {
  filter: brightness(0) invert(1);
}