.navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .navbar-brand {
    margin-bottom: 10px;
  }

  .navbar-nav {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .brandIMG{
    background-image: url(/content/images/IMG_studiocut.png);
    width: 100px;
    height: 100px;
    background-size: 100px;
    margin-right: -12px;
  }
  /* .brandIMG:hover{

    background-image: url(/content/images/IMGhh_studiocut.png);
    background-size: 150px;
    transition: 0.8s;
} */
  .navmenu{
    margin-top: -10px;
  }
  .nav-link1{
    font-size: 25px;
    margin-right: 20px;
    
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;


  }
  .nav-link:hover{
    text-decoration: underline;
  }
  .bg{
    background-color: #31222d;

  }
.div-brand{
  display: inline-flex;
  flex-direction: row; /* Align items in a column */
  justify-content: center; /* Center items vertically */
  align-items: center; /* Center items horizontally */
}
.div-brand > h2 {
  font-size: 60px;
  color: aliceblue;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.with-particles {
  position: relative;
}

#particles-js {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
  top: 0;
  left: 0;
}





.sign {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 25%;
  margin-top: 150px;
  margin-bottom: -50px;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  letter-spacing: 2px;
  font-family: "Clip";
  text-transform: uppercase;
  font-size: 5em;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #50030e,
    -0.2rem 0.1rem 1rem #490413, 0.2rem 0.1rem 1rem #2a051a,
    0 -0.5rem 2rem #900808, 0 0.5rem 3rem #581c36;
  animation: shine 2s forwards, flicker 3s infinite;
  white-space: nowrap; /* Prevent text from wrapping */
}



@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #50030e,
    -0.2rem 0.1rem 1rem #490413, 0.2rem 0.1rem 1rem #2a051a,
    0 -0.5rem 2rem #900808, 0 0.5rem 3rem #581c36;
  }
  28%,
  33% {
    color: #a80909;
    text-shadow: none;
  }
  82%,
  97% {
    color: #b71313;
    text-shadow: none;
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}

@keyframes shine {
  0% {
    color: #6f0606;
    text-shadow: none;
  }
  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #50030e,
    -0.2rem 0.1rem 1rem #490413, 0.2rem 0.1rem 1rem #2a051a,
    0 -0.5rem 2rem #900808, 0 0.5rem 3rem #581c36;
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}
.section-1 {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.section-1 > h1 {
  color: aliceblue;
  margin-bottom: 2rem; /* Adjust the spacing as needed */
}
.section-2 {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.section-2 > h1 {
  color: aliceblue;
  margin-bottom: 2rem; /* Adjust the spacing as needed */
}
.section-3 {
  margin-top: 25px;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 200px; /* Ensure the section takes up the full viewport height */
}
.section-3 > h1 {
  color: aliceblue;
}
.cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Allows cards to wrap if they overflow */
}
.card {
  margin: 1rem; /* Adjust spacing between cards */
  border-width: 3px;
  border-color: #aa3664;
}
.vouches{
  width: 18rem;
  border-width: 3px;
  border-color: gold;
}
.card-body {
  color: aliceblue;
  background-color: #212020;
}
.btn-card{
  border-color: #aa3664;
  background-color: #212020;
}
.stars {
  color: gold;
  margin-bottom: 50px;
}
.list-group-item {
  display: block;
  background-color: transparent;
  height: 40px ;
}


.copyright {
  color: aliceblue;
  text-align: center; /* Center text inside the paragraph */

}
hr {
  margin-top: -115px;
  color: #ff2483;
  background-color: #ff2483;
  width: 650px;
  height: 3px;
}
/* .vouch-name {
  margin-left: -100px;
  display: inline-flex;
  justify-content: left;
} */
.ign{
  text-align: left;
  margin-left: 10%;

}
.card-text{
  text-align: center;
  margin-left: auto;
  display: flex;
  justify-content: left;
  margin-top: 20px;

}
.card-img{
  margin-right: 20px;
  margin-bottom: 20px;
  float:left;
  width: 64px;height: 64px;
  border-radius: 25px;
}
.pricing-basic {
  width: 18rem; height: 23rem;
  margin: 1rem; /* Adjust spacing between cards */
  border-width: 3px;
  border-color: #3685aa;

}
.pricing-premium {
  width: 18rem; height: 24rem;
  margin: 1rem; /* Adjust spacing between cards */
  border-width: 3px;
  border-color: #93aa36;

}
.pricing-ultimate {
  width: 18rem; height: 26rem;
  margin: 1rem; /* Adjust spacing between cards */
  border-width: 3px;
  border-color: #38aa36;

}
.pricing-enterprise {
  width: 18rem; height: 28rem;
  margin: 1rem; /* Adjust spacing between cards */
  border-width: 3px;
  border-color: #5d36aa;

}
.btn-pricing {
  display: inline-flex;
  justify-content: end;
}
.staff-owner {
  width: 18rem;
  border-width: 3px;
  border-style:dashed;
  border-color: rgb(143, 0, 0);
}
.staff-managers{
  width: 18rem;
  border-width: 3px;
  border-style:dashed;
  border-color: rgb(60, 0, 255);
}
.staff-developers {
  width: 18rem;
  border-width: 3px;
  border-style:dashed;
  border-color: rgb(61, 203, 0);
}
.staff {
  width: 18rem;
  border-width: 3px;
  border-style:dashed;
  border-color: rgb(0, 217, 255);
}
.md-toggle{
  background-color: rgb(199, 0, 76);
  padding: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 3rem;
  margin-left: auto; /* Align the burger icon to the right */
  border-color: aliceblue;
  border-width: 5px;
  font-size: 30px;
}
.we-do {
  width: 18rem;
}
/* Custom styles for the .md-toggle class */

@media (max-width: 900px) {
  html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body, html {
    overflow-x: hidden;
  }
  .navbar-nav .nav-link1 {
    font-size: 3.25rem; /* Larger font size for mobile */
  }
  .div-brand{
    margin-top: 30px;
    padding-left: 75px;
    padding-right: 75px;

  }
  .sign {
    width: 50%;
    height: 50%;
    font-size: 3em;
  }
  .cards {
    flex-direction: column;
  }
  .we-do {
    width: 40rem;
  }
  .vouches {
    width: 30rem;
  }
  .pricing-basic{
    width: 40rem;
    height: 30rem;

  }
  .pricing-premium{
    width: 40rem;
    height: 32rem;

  }
  .pricing-ultimate{
    width: 40rem;
    height: 33rem;

  }
  .pricing-enterprise{
    width: 40rem;
    height: 34rem;

  }
  .card-title{
    font-size: 50px;
  }
  .card-text{
    font-size: 30px;
  }
  .copyright{
    font-size: 20px;
  }
  .staff-owner{
    width: 30rem;
    height: 15rem;

  }
  .staff-managers{
    width: 30rem;
    height: 15rem;

  }
  .staff-developers{
    width: 30rem;
    height: 15rem;

  }
  .staff{
    width: 30rem;
    height: 15rem;

  }
  .btn-card{
    padding: 8px 15px; /* Smaller padding */
    font-size: 28px;   /* Smaller font size */
    width: 100%;       /* Full width to ensure visibility */
    text-align: center;
    display: flow-root;
  }


}