:root {
  --primary: #dd946f;
  --primary-hover: #cd7d7c;
  --background: #261e5a;
  --navbar-height: 60px;
}

@media (min-width: 600px) {
  .menu-icon {
    display: none;
  }
  
  .menu-icon-close {
    display: none;
  }

  .custom-align-2 {
    text-align: end;
  }

  .detail-box .btn {
    margin-top: 0;
    margin-bottom: 15px;
  }

  .custom-bidon {
    text-align: center;
  }

  .custom-align {
    text-align: center;
  }

  .custom-align-2 {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .hidden-notmobile {
    display: block;
  }
  .menu-icon {
    display: block;
  }
  
  .menu-icon-close {
    display: block;
    position: absolute;
    top: 50px;
    right: 50px;
  }
  
  .menu {
    display: none;
  }

  .custom-align {
    text-align: center;
  }

  .custom-align-2 {
    text-align: center;
  }

  .gray-background {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .custom-bidon {
    text-align: center;
  }

  .detail-box .btn {
    margin-top: 0;
    overflow: hidden;
    margin-bottom: 15px;
  }

  .navigation--mobile {
    top: 0;
    position: absolute;
    right: 0px;
    display: flex;
    padding: 80px 60px;
    min-height: 100%;
    background-color: var(--background);
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
    opacity: 1;
    animation: fadein 0.3s forwards;
    z-index: 999;
  }

  @keyframes fadein {
    0% {
      opacity: 0;
      width: 0;
      height: 0;
    }
    100% {
      opacity: 1;
      width: 100%;
      height: calc(100vh - var(--navbar-height));
    }
  }

  .navigation--mobile--fadeout {
    animation: fadeout 300ms forwards;
  }

  @keyframes fadeout {
    0% {
      opacity: 1;
      width: 100%;
      height: calc(100vh - var(--navbar-height));
    }
    100% {
      opacity: 0;
      width: 0;
      height: 0;
    }
  }
}

@media (max-width: 991px) {
  .social-media-list li {
    margin-bottom: 10px;
  }
  .container .bder-right {
    border-right-style: none;
  }
}