#sp-section-2 {
  background-color: white;
}

.dis-top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
  }

  .dis-top div {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    
  }

  .dis-img img {
    width: 300px;
    margin: auto;
  }

  .dis-img {
    flex-basis: 100%
  }

  .dis-mid {
    text-align: center;
    margin-bottom: 15px;
  }

  .dis-bot {
    text-align: center;
  }

  .dis-bot img {
    display: initial;
  }

/*body {
   background: rgb(2,0,36);
background: linear-gradient(180deg, rgb(2, 0, 36) 0%, rgb(7, 65, 91) 69%, rgb(32, 105, 120) 100%);
}

#sp-header
{
  background: #052245;
}

#sp-header
{
  box-shadow: 0 1px 0px 0px rgb(255, 255, 255);
}

.logo-image
{
  height: 105px;
  background-color: #fff;
  padding: 3px;
  border-radius: 8px;
}
*/

body {
/*background: rgb(21,55,97);
background: linear-gradient(183deg, rgba(21,55,97,1) 0%, rgba(82,175,230,1) 100%); */
  background-color: white;
}

#sp-main-body
{
  padding: 100px 0;
  min-height: 100vh;
}

.layout-boxed .body-innerwrapper
{
  max-width: 1240px;
  margin: 0 auto;
  box-shadow: 0px 0px 40px rgba(20, 32, 77, 0.8);
}

.line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: #CAEBFF;
  opacity: 0.8;
  animation: fadeInOut 5s linear infinite, extendLine 5s linear infinite;
}

.circle {
  position: absolute;
  background-color: transparent;
  border: 3px solid #000;
  border-radius: 50%;
  border-color: #CAEBFF;
  width: 20px;
  height: 20px;
  bottom: -20px; /* Adjusted to be below the viewport */
  left: -8px; /* Adjusted to align circles with lines */
  animation: fadeInOut 5s linear infinite, moveCircle 5s linear infinite;
}

@keyframes extendLine {
  0% {
    height: 0;
  }
  100% {
    height: 100vh;
  }
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
    filter: blur(4px);
  }
  50% {
    opacity: 1;
    filter: blur(0px);
  }
}


@keyframes moveCircle {
  0% {
    transform: translateX(0px) translateY(-53px);
  }
  100% {
    transform: translateX(0px) translateY(calc(-104.5vh + 10px));
  }
}

.rounded-triangle {
  z-index: 0;
  opacity: .8;
  position: fixed;
  --size: 760px; /* Initial size */
  --speed: 10s; /* Duration of the animation */
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8); /* Easing function */
  left: calc(25% - var(--size)/2);
  top: calc(50% - var(--size)/2);
  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 5));
  background: linear-gradient(90deg, rgba(82,175,230,1) 0%, rgba(82,175,230,1) 100%);
  /*background-image: linear-gradient(183deg, rgb(11, 118, 213) 0%, rgba(167,62,194,0.7) 100%);*/
  animation: rotateAnimation var(--speed) var(--easing) infinite;
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
}

@keyframes rotateAnimation {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.66); /* Adjust scaling for balloon effect */
  }
}


/* GRID ANIMATION */

/* Background data (Original source: https://subtlepatterns.com/grid-me/) */
$bg-url: url("http://human2ai.eu/images/Bg-tile_grid.png");
$bg-width: 50px;
$bg-height: 50px;

/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
  100% { background-position: 50px 50px; }
}
@-moz-keyframes    bg-scrolling-reverse {
  100% { background-position: 50px 50px; }
}
@-o-keyframes      bg-scrolling-reverse {
  100% { background-position: 50px 50px; }
}
@keyframes         bg-scrolling-reverse {
  100% { background-position: 50px 50px; }
}

@-webkit-keyframes bg-scrolling {
  0% { background-position: 50px 50px; }
}
@-moz-keyframes    bg-scrolling {
  0% { background-position: 50px 50px; }
}
@-o-keyframes      bg-scrolling {
  0% { background-position: 50px 50px; }
}
@keyframes         bg-scrolling {
  0% { background-position: 50px 50px; }
}

/* Main styles */
body {
  /* img size is 50x50 */
  background: url("http://human2ai.eu/images/Bg-tile_grid.png") repeat 0 0;
  
  -webkit-animation: bg-scrolling 1.5s infinite; /* Safari 4+ */
  -moz-animation:    bg-scrolling 1.5s infinite; /* Fx 5+ */
  -o-animation:      bg-scrolling 1.5s infinite; /* Opera 12+ */
  animation:         bg-scrolling 1.5s infinite; /* IE 10+ */
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function:    linear;
  -o-animation-timing-function:      linear;
  animation-timing-function:         linear;
}

/* ANIMATION END */

body { cursor: url("http://human2ai.eu/images/cur2.png"), auto; }

.logos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Adjust space between logos as needed */
}

.partnerlogo {
  flex: 0 1 auto;
  width: 10%;
  max-height: 60px;
  object-fit: contain;
}

@media screen and (max-width: 600px) {
    .partnerlogo {
        width: 40%; /* Adjust for two logos per line on smaller screens */
    }
}







.article-intro-image{
  margin: -20px -20px 20px -20px;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid #f5f5f5;
  overflow: hidden;
  max-height: 200px;
  position: relative!important;
  }

.article-list .article .article-intro-image img {
  position: relative!important;
 /* top: -75%!important;*/
  /*left: 50%;*/
transform: translate(0%, -30%);
  min-height: 100%;
  min-width: 100%;
}

.article {
  background-color: white;
}

.article-header h2 {
  font-weight: bold;
  }
}