html,body {
            height: 100%;
    }

        body {
            color: #fff;
            background-color: #000;
            background-image: url("../images/main-bg.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
        }

        a {
            color: #5dc3ff;
        }

        h1 {
            text-shadow: 1px 1px 10px #9800ff;
        }

        h6 {
            font-weight: normal;
            line-height: 25px;
            margin:0;
        }

        h6 > a {
            color: #ffffff;
            font-weight: bold;
        }


        .modal-content {
            border: 2px double transparent;
      background-image: linear-gradient(rgb(57 51 104), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: rgba(111, 76, 255, 0.5) 0px 0px 20px 0px;
        }

        .modal-content a{
            color: #fff;
        }

        .close {
            color: #fff !important;
            position: absolute;
            right: 10px;
            top: 2px;
        }

        
      .card-box {
      background-color: rgb(0 0 0 / 70%);
            padding: 25px;
            border-radius: 20px;
            border: 2px double transparent;
      background-image: linear-gradient(rgb(57 51 104), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: rgba(111, 76, 255, 0.5) 0px 0px 20px 0px;
        }

        .card-box::before {
            content: "";
            background-image: url(../images/box-border-01.png);
            display: block;
            position: absolute;
            width: 56px;
            height: 119px;
            left: 5px;
            bottom: -7px;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .card-box::after {
            content: "";
            background-image: url(../images/box-border-02.png);
            display: block;
            position: absolute;
            width: 56px;
            height: 119px;
            right: 5px;
            top: -8px;
            background-size: contain;
            background-repeat: no-repeat;
        }

        

        .text-gradient {
            color: #58d2ff;
            /*
          background: linear-gradient(to right, #74fffa, #f6c5ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          */
        }


        .top-nav-menu a{
            background-color: #9400fc;
            padding: 10px 10px;
            border-radius: 0 0 10px 20px;
            color: #fff;
            font-weight: bold;
            font-size: 12px;
        }

        a:hover {
            text-decoration: none;
        }

        .text-s1 {
            color: #00b4ff;
        }

        .list-s1 .list-group-item {
            background-color: transparent;
            border-color: rgb(0 208 255 / 17%);
          padding-left: 0;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .list-icon {
            font-size: 30px;
            margin-right: 15px;
        }

        hr {
            border-top: 1px solid rgb(0 208 255 / 17%);
        }

        .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
            color: #fff;
            background-color: transparent;
        }

        .nav-pills .nav-link {
            color: rgb(255 255 255 / 56%);
        }

        @media screen and (max-width: 991px) {
            body {

                background-image: url("../images/main-bg-mobile.jpg");

            }
        }