/* PORTAL CSS */



#be-portal {

  background-color: #000;

}



#be-portal img {

  width: 100%;

}



#be-portal a {

  color: #f9a33e;

}



/* #be-portal #portal-intro {

  background: #f89828 url("/download/b2c_be_nl/pic/ekwb/portal/pattern_ekwb_white_10.png") 100% 100% repeat-x;

  color: white;

  text-shadow: 0 0 0px #9b9b9b;

} */



#be-portal h1 {

  font-size: 3em;

  color: #fff;

}



#be-portal h2 {

  font-size: 2.5em;

  padding: 20px 0;

  text-wrap: balance;

  color: #fff;

}



#be-portal h3 {

  font-size: 2em;

  padding: 0 0 20px 0;

  text-transform: uppercase;

  color: #fff;

}



#be-portal p {

  color: #fff;

}



@media (max-width: 767px) {

  #be-portal h1 {

    font-size: 2.5em;

  }

  #be-portal h2 {

    font-size: 1.7em;

  }

}



@media screen and (min-width: 1200px) {

  #be-portal #portal-intro .col-12.p-5,

  #be-portal #portal-footer .col-12.p-5 {

    padding: 3rem 15rem !important;

  }

}



/* Card Styles */

#be-portal .ducky-card {

  background-color: #020202;

  color: #fff;

  border-radius: 12px;

  overflow: hidden;

  height: 100%;

  display: flex;

  flex-direction: column;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  transition: transform 0.3s ease;

}



#be-portal .ducky-card:hover {

  transform: translateY(-5px);

}



#be-portal .card-image {

  height: 0;

  padding-bottom: 56.25%; /* 16:9 aspect ratio */

  position: relative;

  overflow: hidden;

}



#be-portal .card-image img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



#be-portal .card-content {

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



#be-portal .card-content h2 {

  color: #f9a33e;

  font-size: 1.8rem;

  margin-bottom: 1rem;

  padding: 0;

}



#be-portal .card-content p {

  margin-bottom: 1.5rem;

  flex-grow: 1;

}



#be-portal .ducky-btn {

  display: inline-block;

  background-color: #f89828;

  color: white;

  padding: 10px 20px;

  text-decoration: none;

  border-radius: 4px;

  text-transform: uppercase;

  font-weight: bold;

  transition: background-color 0.3s;

  text-align: center;

  align-self: flex-start;

}



#be-portal .ducky-btn:hover {

  background-color: #f9a33e;

  color: white;

}



#be-portal .catButton {

  display: inline-block;

  background-color: #f89828;

  color: white;

  padding: 10px 20px;

  text-decoration: none;

  border-radius: 4px;

  text-transform: uppercase;

  font-weight: bold;

  transition: background-color 0.3s;

  text-align: center;

  align-self: flex-start;

}



#be-portal .catButton:hover {

  background-color: #f9a33e;

  color: white;

}



#be-portal .ducky-btn-inverse {

  display: inline-block;

  background-color: white;

  color: black;

  padding: 10px 20px;

  text-decoration: none;

  border-radius: 4px;

  text-transform: uppercase;

  font-weight: bold;

  transition: background-color 0.3s;

  text-align: center;

  align-self: flex-start;

}



#be-portal .ducky-btn-inverse:hover {

  background-color: #f0f0f0;

  color: black;

}



#be-portal .cornered {

  border-radius: 12px;

  background: #000;

}



@media (max-width: 767px) {

  #ducky_special div.w-75 {

    width: 100% !important;

  }



  .mobile {

    display: block;

  }

  .desktop {

    display: none;

  }



  #be-portal .ducky-card {

    margin-bottom: 1rem;

  }

}



#be-portal .duckygradient {

  background-image: linear-gradient(80deg, rgba(236, 179, 32, 1) 3%, rgb(150, 72, 0) 99%);

  color: transparent;

  background-clip: text;

  -webkit-background-clip: text;

  font-size: 5em;

  font-weight: 600;

}



.scrolling-container {

  width: 100%;

  overflow: hidden;

  white-space: nowrap;

  padding: 30px 0;

}



.scrolling-text {

  display: inline-block;

  white-space: nowrap;

  animation: scroll 20s linear infinite;

}



.scrolling-text span {

  display: inline-block;

  font-size: 5em;

  padding: 0 50px;

}



@keyframes scroll {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}



.mobile {

  display: none;

}



.desktop {

  display: block;

}



.ducky-bg-change {

  background-color: #1d2223;

}



#ducky_special img {

  border-radius: 12px 12px 0 0;

}