html,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.text-primary {
  color: #420067;
}

.bg-primary {
  background-color: #420067;
}
.bg-secondary {
  background-color: #aa8bba;
}
.bg-pink {
  background-color: #eae1ee;
}
.border-primary {
  border-color: #420067;
}
.bg-image {
  background-image: url("../img/bgimg.jpg");
  background-size: cover;
  position: relative;
  z-index: 1;
}
.bg-image:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(66 0 103 / 40%);
  z-index: -1;
}
.logo-div {
  position: relative;
  min-width: 400px;
}
.logo-div a img {
  max-width: 200px;
  align-items: center;
  display: flex;
  height: 100%;
  object-fit: contain;
  justify-content: center;
}
.logo-div a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-div:after {
  content: "";
  position: absolute;
  right: -60px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 60px solid transparent;
  border-top: 93px solid #420067;
}

@media screen and (max-width: 1024px) {
  .logo-div {
    position: relative;
    min-width: 100%;
  }
  .logo-div:after {
    border: 0;
    display: none;
  }
  .main_menu {
    transform: translateX(-100%);
    position: absolute;
    z-index: 999;
    height: 100%;
    width: 87%;
    transition: all 0.8s;
  }
  .main_menu.active {
    transform: translateX(0%);
    transition: all 0.8s;
  }
  .menu-open .fa-bars:before {
    content: "\f00d";
  }
}