body {
  background: linear-gradient(
    to right,
    rgba(158, 171, 230, 0.25),
    rgba(204, 172, 236, 0.25)
  );

  font-family: "Lato", sans-serif;
  max-height: 100%;
  min-height: 100vh;
}

#algo-logo {
  height: auto;
  width: 80px;
}
#nav-bar-logo {
  height: auto;
  width: 40px;
  margin-top: -10px;
}

/* Search bar popover stuff */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9998;
}

.search-bar {
  position: fixed;
  top: 50%;
  left: 50%;
  border: white 2px;
  transform: translate(-50%, -50%);
  /* Adjust the opacity value (0.8) as desired */
  padding: 10px;
  z-index: 9999;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
/* end SB */
@media (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: block;
    border: none;
    margin-top: 0;
    top: 150%;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
  }

  .navbar .nav-item:hover .dropdown-menu {
    top: 100%;
    visibility: visible;
    transition: 0.5s;
    opacity: 1;
  }
}

/* end SB */
.form-check-input[type="checkbox"]:checked + .form-check-label::before {
  background-color: #131339;
}
.form-check-input:checked {
  color: #131339 !important;
  background-color: #131339 !important;
  border-color: #131339 !important;
}
.btn-blue {
  background-color: #131339;
  color: whitesmoke;
}
.nav-item a.nav-link:hover {
  color: lightgray !important;
}
.btn-light-blue {
  background-color: #24245e;
  color: whitesmoke;
}

.btn-light-green {
  background-color: #30903d !important;
  color: whitesmoke;
}

.btn-light-blue-nav {
  background-color: #24245e;
  color: whitesmoke;
}

/* gradient text on landing */
.purple-shade-text {
  background: linear-gradient(90deg, #59cad1, #6267f0 51%, #d462f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.white-grad-nav-bar {
  /* fallback for old browsers */
  background: linear-gradient(
    90deg,
    rgba(85, 0, 227, 1) 0%,
    rgba(198, 61, 255, 1) 100%
  );
}

.dark-blue-background {
  background: linear-gradient(to bottom, #131339, #0d0d26);
}

@media (max-width: 990px) {
  .main-image {
    display: none;
  }
}

.nav-link {
  color: white;
}

h1 {
  font-family: "Lato", sans-serif;
}

.nav-item {
  font-size: 18px;
  margin-right: 12px;
}
#ball {
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 25px;
  position: absolute;
  top: 0;
  left: 20%;
  visibility: hidden;
}

.textarea-container {
  position: relative;
}
.textarea-container textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
@media screen and (min-width: 778px) {
  .textarea-container button {
    position: absolute;
    top: 30%;
    right: 50%;
    font-size: 30px;
    padding: 30px;
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .textarea-container button {
    position: absolute;
    top: 30%;
    right: 30%;
    font-size: 30px;
    padding: 30px;
  }
}

.hidethis {
  visibility: hidden;
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:visited {
  background-color: #333333 !important;
}

.bg-secondary {
  background-color: #333333 !important;
}

.bg-puzzlcat {
  background-color: #131339 !important;
}

.btn-social,
.btn-social:hover,
.btn-social:active,
.btn-social:visited {
  background-color: #19194d !important;
}

.fade-in {
  animation: fade-in 2s linear 1;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.card-link,
.card-link:hover,
.card-link:active,
.card-link:visited {
  background-color: rgba(102, 126, 234, 0.5);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-color: rgba(102, 126, 234, 0.5);
}
.form-check-input {
  clear: left;
}

.form-switch.form-switch-sm {
  margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
  height: 1rem;
  width: calc(1rem + 0.75rem);
  border-radius: 2rem;
}

.form-switch.form-switch-md {
  margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
  height: 1.5rem;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
}

.form-switch.form-switch-lg {
  margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}

.form-switch.form-switch-xl {
  margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
  height: 2.5rem;
  width: calc(4rem + 0.75rem);
  border-radius: 5rem;
}

.twitter-blue {
  background-color: #1da1f2 !important;
}

.facebook-blue {
  background-color: #3b5998 !important;
}
.dark-purple-grad {
  /* fallback for old browsers */
  background: #2421b5;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(
    to top,
    rgba(36, 33, 181, 0.5),
    rgba(46, 9, 83, 0.5)
  );

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(
    to top,
    rgba(36, 33, 181, 0.5),
    rgba(46, 9, 83, 0.5)
  );
}

.icon-services-index {
  width: 124px;
  height: 124px;
}

.searched-image {
  width: 300px;
  height: 200px;
}

.blog-sub-image {
  width: 600px;
  height: auto;
  margin-bottom: 30px;
}

.blog-card {
  height: 500px;
}

.portfolio-item {
  margin-bottom: 30px;
}

.portfolio-item > .card {
  background: #e6e9f0;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(
    to right,
    rgba(230, 233, 240, 0.5),
    rgba(238, 241, 245, 0.5)
  );

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(
    to right,
    rgba(230, 233, 240, 0.5),
    rgba(238, 241, 245, 0.5)
  );
}

.green-grad {
  /* fallback for old browsers  0d7377 */
  background: #0d7377;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to top, #0d7377, #1d8287);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to top, #0d7377, #1d8287);
}

.purple-grad {
  /* fallback for old browsers  131339 */
  background: #131339;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to top, #131339, #241443);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to top, #131339, #241443);
}

.gradient-custom {
  /* fallback for old browsers */

  background: -webkit-linear-gradient(
    to right,
    rgba(158, 171, 230, 0.25),
    rgba(204, 172, 236, 0.25)
  );

  background: linear-gradient(
    to right,
    rgba(158, 171, 230, 0.25),
    rgba(204, 172, 236, 0.25)
  );
}

.lp {
  /* fallback for old browsers */

  background: -webkit-linear-gradient(
    to right,
    rgba(158, 171, 230, 0.25),
    rgba(204, 172, 236, 0.25)
  );

  background: linear-gradient(
    to right,
    rgba(158, 171, 230, 0.25),
    rgba(204, 172, 236, 0.25)
  );
}

.green-light {
  /* fallback for old browsers */
  background: #b1d9b7;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(left, #b1d9b7, #8cd8aa);

  /* Opera 11.1-12 */
  background: -o-linear-gradient(left, #b1d9b7, #8cd8aa);

  /* Firefox 3.6-15 */
  background: -moz-linear-gradient(left, #b1d9b7, #8cd8aa);

  /* Standard syntax */
  background: linear-gradient(to right, #b1d9b7, #8cd8aa);
}

#ideas {
  /*     font-size: 72px;
  background: linear-gradient(
90deg, #BD17C5, #9817C5 51%, #6917C5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
}
.grad-text {
  background: linear-gradient(90deg, #131339, #6267f0 51%, #d462f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grad-text-green {
  background: linear-gradient(90deg, #131339, #30cfd0 51%, #43e97b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grad-text-red {
  background: #f00;
  background: linear-gradient(to right, #f00, #fff, #f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grad-text-red-anim {
  background: linear-gradient(90deg, #ff0000, #0000ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-animation: animateGradient 5s linear infinite;
}

@keyframes animateGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.grad-text-rainbow {
  background: linear-gradient(
    to right,
    #131339,
    #ff0,
    #0f0,
    #0ff,
    #00f,
    #f0f,
    #f00
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grad-text-blue {
  background: linear-gradient(90deg, #131339, #4facfe 51%, #30cfd0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grad-purp {
  background: linear-gradient(90deg, #814dff, #9e9aff 51%, #c2c2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grad-text-orange {
  background: linear-gradient(90deg, #131339, #fa709a 51%, #f093fb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Container holding the image and the text */
.icontainer {
  position: relative;
  text-align: center;
  color: white;
}

/* Centered text */
.icentered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ocontainer {
  position: relative;
  width: 50%;
  max-width: 300px;
}

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

.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.8); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: 0.5s ease;
  opacity: 1;
  color: white;
  font-size: 20px;
  padding: 12px;
  text-align: center;
}

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

#main-content {
  min-height: 90vh;
}

.img-xs {
  height: auto;
  width: 50px;
}

.img-sm {
  height: auto;
  width: 100px;
}

.img-md {
  height: auto;
  width: 200px;
}

.img-lg {
  height: auto;
  width: 400px;
}

body.overflow-hidden {
  overflow: hidden;
}

.cookie-consent-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

.cookie-consent-content {
  position: fixed;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.btn-accept {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  margin: 20px 0;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.btn-accept:hover {
  background-color: #45a049;
}

.to-upgrade-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

.to-upgrade-content {
  position: fixed;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.glow {
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.8);
}



.btn-content {
  display: flex;
  align-items: center;
}

.btn-content svg {
  margin-left: 4px; /* Adjust the spacing between the text and the icon as needed */
}