body,
html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("../images/technologies-business-encipher.jpg");

  /* Add the blur effect */
  filter: blur(4px);
  -webkit-filter: blur(4px);

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

/* .TECHNOLOGIES {
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.container1 {
  position: relative;
  width: 150px;
  height: 150px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: #c7bfbf;
  border-radius: 10px;
}

.container1:hover .overlay {
  opacity: 1;
}

.text {
  color: rgb(3, 3, 3);
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.tech-details {
  display: flex;
  justify-content: center;
  padding: 20px;
  gap: 20px;
  flex-wrap: wrap;
  margin: 20px 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 4px 1px rgb(94, 92, 92);
} */

.section-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
}


.technologies {
  display: flex;
  justify-content: center;
  padding: 10px;
  flex-wrap: wrap;
}
:root {
  --color1: #232323;
  --color2: #0a0909;
  --color3: #2e2c28b7;
  --transitionDuration: 1s;
}

/* Reset Default Settings */
* {
  box-sizing: border-box;
  margin: 0;
}

.card {
  background-color: var(--color1);
  color: var(--color2);
  width: 350px;
  height: 500px;
  letter-spacing: 1px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  margin: 20px;

  /* Flex */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 'Nike' label in the background */
.card::before {
  /* color: var(--color3); */
  width: fit-content;
  height: fit-content;
  font-size: 200px;
  font-weight: bold;
  font-style: italic;
  opacity: 15%;
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}

/* Circle */
.card::after {
  /* background-color: var(--color3); */
  width: 400px;
  height: 400px;
  border-radius: 50%;
  z-index: 0;

  /* Transition */
  transition-duration: calc(var(--transitionDuration) / 2);
  transition-property: width, height, transform;
  transition-timing-function: ease-in-out;

  content: "";
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(45%, -45%);
}

.card:hover::after {
  width: 500px;
  height: 500px;
  transform: translate(30%, -62%);
}

.card__img {
  width: 150px;
  height: 200px;
  z-index: 1;
  transition: top var(--transitionDuration);

  /* Position */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
}

.card:hover .card__img {
  top: 24%;
}

.card__title {
  font-weight: 500;
  transition: top var(--transitionDuration);
  text-align: center;
  /* Position */
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translateX(-50%);
  
}

.card:hover .card__title {
  top: 50%;
}

.card__content {
  height: 70px;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  opacity: 0;
  transition: top var(--transitionDuration),
    opacity var(--transitionDuration) calc(var(--transitionDuration) / 2);

  /* Position */
  position: absolute;
  left: 50%;
  top: 150%;
  transform: translate(-50%, -50%);

  /* Flex */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card:hover .card__content {
  opacity: 100%;
  top: 70%;
}






.card1::after {
  background-color: #f06529;
}
.card2::after {
  background-color: #2965f1;
}
.card3::after {
  background-color: #f0db4f;
}
.card4::after {
  background-color: #490cc29a;
}
.card5::after {
  background-color: #5382a1;
}
.card6::after {
  background-color: #61dbfb;
}
.card7::after {
  background-color: #61dbfa;
}
.card8::after {
  background-color: #4643df;
}
.card9::after {
  background-color: #4fccfe;
}
.card10::after {
  background-color: #0d0b66;
}


.card__sizeTitle1 {
  
  margin-top: 26px;
}

.card__sizeTitle2 {
  
  margin-top: 15px;
}