.sd-bg-flutter {
  background-color: var(--sd-flutter);
}

.flutter-border {
  border: 1px dashed var(--tech-flutter);
}

.flutter-name {
  color: var(--tech-flutter);
}

.sd-color-flutter {
  color: var(--sd-secondary);
}

.laravel-name {
  color: var(--tech-laravel);
}
.laravel-border {
  border: 1px dashed var(--tech-laravel);
}
.laravel-bg {
  background: linear-gradient(
    0deg,
    rgba(239, 84, 74, 1) 0%,
    rgba(191, 26, 15, 1) 100%
  );
}

.node-name {
  color: var(--tech-node);
}
.node-border {
  border: 1px dashed var(--tech-node);
}
.node-bg {
  background: linear-gradient(
    0deg,
    rgba(146, 204, 81, 1) 0%,
    rgba(117, 178, 48, 1) 100%
  );
}

.xd-name {
  color: var(--tech-xd);
}
.xd-border {
  border: 1px dashed var(--tech-xd);
}
.xd-bg {
  background: linear-gradient(
    0deg,
    rgba(239, 123, 234, 1) 0%,
    rgba(178, 32, 135, 1) 100%
  );
}

.sd-bg-adobe {
  background-color: var(--sd-adobe);
}
.sd-color-adobe {
  color: var(--sd-purple);
}

.sd-bg-html {
  background-color: var(--sd-html);
}
.sd-color-html {
  color: var(--sd-orange);
}

.html-name {
  color: var(--tech-bootstrap);
}
.html-border {
  border: 1px dashed var(--tech-bootstrap);
}
.html-bg {
  background: linear-gradient(
    0deg,
    rgba(218, 107, 78, 1) 0%,
    rgba(191, 79, 50, 1) 100%
  );
}

.css-db-name {
  color: var(--tech-mongo-db);
}
.css-db-border {
  border: 1px dashed var(--tech-mongo-db);
}
.css-db-bg {
  background: linear-gradient(
    0deg,
    rgba(38, 77, 228, 1) 0%,
    rgba(22, 52, 170, 1) 100%
  );
}
.sd-bg-android{
  background: #cffcd2
}
.sd-color-css {
  color: var(--sd-blue);
}
.sd-port-hr1 hr{
    height: 0px;
    border: 1px dashed grey;
    background: #fff;
    width: 250px;
    position:relative;
    bottom:12px;
}