@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    background: #eee;
}

a, a:hover{text-decoration-line: none;}

header {
    position: relative;
    width: 100%;
    min-height: 80px;
    overflow: hidden;
    background: url('../img/header.jpg');
    background-size:cover;
    vertical-align: center;
    padding-bottom: 30px;
}

header::before {
  content: "";
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 150%;
  background: rgb(21 25 39 / 90%);
}

.header{
    height:100px;
}

.login-btn {
    background: #ffa500;
    border-radius: 50px;
    padding: 10px 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transition: .2s;
}

.login-btn i {
    margin-right: 3px;
}

.login-btn:hover {
    background: #b77806;
    color: #fff;
}

nav.header-menu a {
    font-size: 14px;
    margin: 0 15px;
    font-weight: 700;
}

.login-btn-outline {
    background: transparent;
    border:1px solid #ffa500;
    border-radius: 50px;
    padding: 10px 15px;
    color: #ffa500;
    font-size: 14px;
    font-weight: 700;
    transition: .2s;
}

.login-btn-outline i {
    margin-right: 3px;
}

.login-btn-outline:hover {
    background: #b77806;
    color: #fff;
}

span.header-text{
    font-size:32px!important;
    font-weight: 700!important;
}

p.header-text{
    font-size:16px;
}

.card-body {
    background: rgb(255 255 255 / 0.1);
    backdrop-filter: blur(10px);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.card{
    background: transparent;
}

.card-header {
    background: rgb(255 255 255 / 0.3);
    backdrop-filter: blur(10px);
    font-weight: 700;
    text-align: center;
    color: #fff;
}

.form-control {
    background: #1f1a29;
    border: 1px solid rgb(255 255 255 / 35%);
    height: calc(1.5em + .75rem + 12px);
}

.input-group-text {
    background: #1f1a29;
    border: 1px solid rgb(255 255 255 / 0.35);
    padding: 15px;
}

.input-group-text i {
    color: #fff;
}

.mycontent-left {
  border-right: 1px dashed #333;
}

section.features {
    margin: 100px 0;
}

.featured-card {
    position: relative;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 50px 25px;
    text-align: center;
    box-shadow: 0px 5px 10px 2px rgb(0 0 0 / 2%);
    transition: .2s;
    -webkit-transition: .2s;
    margin: 20px 0;
}

.featured-card:hover{
    position: relative;
    background-color: #5170e9;
    transform: scale(1.1);
    color: #fff!important;
}

.featured-card h4 {
    font-size: 14px;
    background: #b1b1b12b;
    border-radius: 5px;
    padding: 10px 30px;
    text-align: center;
    font-weight: 700;
}

.featured-card p {
    text-align: center;
    font-size: 14px;
    margin-top: 24px;
}

.featured-card img {
    margin: 20px 0;
}

section.text-area {
    background: #5170E9;
    margin: 100px 0 0 0;
    padding: 100px 0;
}

.text-area h4 {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
}

.text-area p {
    margin-top: 25px;
    font-size: 16px;
    color: #fff;
}

.text-area-label {
    position: relative;
    background: #ffa500;
    border-radius: 50px;
    padding: 5px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

section.footerbefore {
    text-align: center;
    background: #393648;
    color: #fff;
    border-radius: 5px;
    position: relative;
    width: 100%;
    padding: 50px;
    z-index:1;
    top: 90px;
}

footer {
    position: relative;
    width: 100%;
    background: #1c1e31;
    padding: 130px 0 35px 0;
    text-align: center;
}

footer ul {
    list-style-type: none;
    display: block;
    margin: auto;
    width: 100%;
    margin-left: inherit;
}

footer ul li {
    margin: 0 25px;
    display: inline-block;
}

footer ul li a {
    color: #fff;
    transition: .2s;
    font-weight: 700;
}

footer  ul li a:hover {
    color: #8d96cc;
}

body.dark-mode {
    background: #2b2d38;
    color: #fff;
}

body.dark-mode .featured-card {
    background: #474150;
}

.mp-card{
    background: #fff;
    border-radius:5px;
    position: relative;
    box-shadow: 0px 5px 10px 2px rgb(0 0 0 / 2%);
    transition: .2s;
    -webkit-transition: .2s;
    color:#333;
    overflow: hidden;
}

body.dark-mode .mp-card{
    background: #474150;
    transition: .2s;
    -webkit-transition: .2s;
}

body.dark-mode .card-header{
    background: #474150;
    color: #fff;
    border-bottom:1px solid #333;
    transition: .2s;
    -webkit-transition: .2s;
}

body.dark-mode .card-body{
    background: #474150;
    color: #fff;
    transition: .2s;
    -webkit-transition: .2s;
}

.mp-card .card-header{
    background: #fff;
    border-bottom:1px solid #eee;
    color:#333;
    transition: .2s;
    -webkit-transition: .2s;
}

.mp-card .card-body{
    background: #fff;
    color:#333;
    transition: .2s;
    -webkit-transition: .2s;
}

.mp-card .form-control {
    border: unset;
    background: #f1efef;
    font-size: 14px;
    transition: .2s;
    -webkit-transition: .2s;
}

.mp-card .input-group-text {
    background: #f1efef;
    font-size: 14px;
    border: unset;
    transition: .2s;
    -webkit-transition: .2s;
}

.mp-card .input-group-text i {
    color:#6a6a6a;
    transition: .2s;
    -webkit-transition: .2s;
}

body.dark-mode .mp-card .form-control {
    border: unset;
    background: #373141;
    font-size: 14px;
    color:#fff;
    transition: .2s;
    -webkit-transition: .2s;
}

body.dark-mode .mp-card .input-group-text {
    background: #373141;
    font-size: 14px;
    border: unset;
    transition: .2s;
    -webkit-transition: .2s;
}

body.dark-mode .mp-card .input-group-text i {
    color:#e6e4e4;
    transition: .2s;
    -webkit-transition: .2s;
}

.table thead th {
    font-size: 14px;
    transition: .2s;
    -webkit-transition: .2s;
}

.table thead {
    background: #d4d4d4;
    transition: .2s;
    -webkit-transition: .2s;
}

.table td#tableTitle {
    background: #d0a900!important;
    border-radius: 0;
    font-size: 14px;
    transition: .2s;
    -webkit-transition: .2s;
}

.table tr {
    font-size: 14px;
    transition: .2s;
    box-shadow: inset 0px 8px 19px -6px rgba(191,191,191,0.3);
    transition: .2s;
    -webkit-transition: .2s;
}

.table {
    margin-bottom: 0;
    transition: .2s;
    -webkit-transition: .2s;
}

body.dark-mode .table thead {
    background: #373442;
    color: #fff;
    transition: .2s;
    -webkit-transition: .2s;
}

body.dark-mode .table td, .table th {
    border: unset;
    transition: .2s;
    -webkit-transition: .2s;
}

body.dark-mode tbody {
    color: #fff;
    transition: .2s;
    -webkit-transition: .2s;
}

body.dark-mode .table-hover tbody tr:hover {
    color: #fff;
    background: rgb(0 0 0 / 37%);
    transition: .2s;
    -webkit-transition: .2s;
}

@media (max-width: 501px){

    .header-menu{
        display:none;
    }

    footer ul {
        list-style-type: none;
        display: unset;
    }

    footer ul li {
        text-align: center;
        width:100%;
        margin: 10px 0 10px 0;
        float:left;
        display: unset;
    }

    section.footerbefore {
        border-radius: 0;
    }

    .mp-card{
        overflow-x: scroll;
    }

}

@media (min-width: 501px){

    .mobile-menu{
        display:none;
    }

}

#mobilemenu .modal-body ul {
    list-style: none;
    padding: 0;
}

#mobilemenu .modal-body ul li {
    background: rgb(0 0 0 / 14%);
    margin: 5px 0;
    border-radius: 5px;
    padding: 5px;
}

#mobilemenu .modal-body ul li a {
    color:#000;
}
.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    color: black;
}
.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
    color: black;
}