@font-face {
  font-family: "Onest";
  src: url(../fonts/Onest-VariableFont_wght.ttf) format("truetype");
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: "Caveat";
  src: url(../fonts/Caveat-VariableFont_wght.ttf) format("truetype");
  font-style: normal;
  font-weight: 100 900;
}

body {
      font-family: 'Onest', sans-serif;
      font-weight: 500!important;
      font-size: 16px;
    }
    .navbar-brand{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: rgb(0,122,254);
      font-weight: 600;
    }
    .brand-logo{
      height: 40px;
      margin-right: 3px;
    }
    .grd-bg {
      background-image: url('../bg-hero.png');
      background-repeat: no-repeat;
      background-size: cover;         /* Ensures it fills the screen */
      background-position: center;    /* Keeps image centered */
      background-attachment: fixed;
    }
    .hero{
      padding: 6rem 0;
      text-align: left;
    }
    .form-card {
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      border-radius: 16px;
      padding: 2rem!important;
    }
    .form-card label{
      color: #3d3d3d;
      margin-bottom: 7px;
    }
    .ilnk-ico{
      position: absolute;
      top: 9px;
      left: 10px;
      font-size: 22px;
      color: #c5c0c0;
    }
    .feature-icon {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    footer.footerbox {
        background: #0f172a;
        color: #9299a9;
        padding: 6rem 0 2.5rem 0;
      }
    .footer-link {
        color: #9299a9;
        text-decoration: none;
        padding-top: 5px;
        padding-bottom: 5px;
        display: block;
    }
    .footer-link:hover {
      color: white;
    }
    .gradient-cta {
      background: linear-gradient(to right, #00cf6b, #007AFE);
      border-radius: 1rem;
    }

    .btn {
        border-radius: 10px;
        padding-top: 11px;
        padding-left: 17px;
        padding-right: 17px;
        padding-bottom: 12px;
    }

    .btn-success {
        background-image: linear-gradient(to right, #0079fe, #00cf6b);
        border: none;
        color: white;
        transition: all 0.3s ease;
        background-size: 130% 100%;
	      background-position: left center;
    }

    .btn-success:hover {
        filter: brightness(1.03);
        background-position: right center; 
        box-shadow: 0 0 5px rgba(0, 207, 107, 0.5);
      }

    .btn-light{
      border-color: rgba(209, 213, 219, 1);
    }

    .bg-light{
      background-color: #f6f6f6!important;
    }

    .bg-white{
      background-color: #ffffff!important;
    }

    .btn.small{
        padding-top: 9px;
        padding-left: 17px;
        padding-right: 17px;
        padding-bottom: 9px;
    }
    .hero h1{
      color: #353e60;
      font-size: 2.95rem;
    }
    .fw700{
        font-weight: 700;
    }
    .fcblue{
        color: #0077f7;
    }
    .hero h1 span{
      font-family: 'Caveat';
      font-weight: 700;
      font-size: 56px;
      font-style: italic;
      color: #01b35d;
      margin-right: 20px;
    }
    .hero p{
      font-size: 19px;
      max-width: 547px;
      margin-bottom: 30px;
    }
    .form-control, .form-select{
      min-height: 49px;
      border-radius: 12px;
      font-weight: 400;
    }
    .form-control::placeholder{
      color: #c5c0c0;
    }
    .pl-38{
      padding-left: 38px;
    }
    .font-semibold {
        font-weight: 700;
        color: #353e60;
    }
    .cc-card{
      background-color: #fff;
      border-radius: 16px!important;
      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      cursor: pointer;
      transition: 0.3s;
    }
    .cc-card:hover, .cc-card.active{
      background-color: rgb(248 253 251) !important;
      border-color: rgb(0 207 107);
      box-shadow: 0px 0px 0px 2px rgb(0 207 107) !important;
      position: relative;
      bottom: 2px;
    }
     .cc-card:hover h5{
      color: rgb(0 207 107);
     }
     .fea-card{
      background-color: #fff;
      border-radius: 16px!important;
      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      cursor: pointer;
      transition: 0.3s;
    }
    .fea-card:hover, .fea-card.active{
      background: linear-gradient(180deg, #ffffff 0%, var(--token-e58dc871-81f4-4a09-84e4-9fd3d0bf8d91, #55eda3) 100%);
      position: relative;
      bottom: 2px;
      color: #282828;
    }
     .fea-card:hover h5{
      color: rgb(1, 103, 54);
     }
    .feature-icon img{
      max-width: 50px;
      margin-top: 15px;
      margin-bottom: 20px;
    }
    .py-7 {
      padding-top: 5rem !important;
      padding-bottom: 5rem !important;
    }
    .footer-line {
        border-top: 1px solid #2c3856;
        color: #313f5f !important;
        padding-top: 40px;
    }
    .table-responsive{
        background-color: #fff;
        padding: 25px;
        border-radius: 4px;
    }
    .table-light tr th{
        font-weight: 500!important;
        padding: 17px 0px 17px 8px!important;
        color: #20a967;
    }
    .user-info{
        color: #20a967!important;
    }
    .table {
        color: #3d3d3d;
        font-size: 16px;
    }
    .dwn-btn{
        padding: 4px 4px; 
        border-radius: 5px;
    }
    div:where(.swal2-container) h2:where(.swal2-title) {
        padding-top: 50px!important;
    }
    div:where(.swal2-container) div:where(.swal2-html-container) {
        padding-bottom: 27px!important;
    }
    .alert-success.curl{
        padding-top: 8px;
        padding-bottom: 8px;
        margin-top: 5px;
        margin-bottom: 6px;
        display: inline-block;
        color: #009b4e;
    }
  .qrcbx {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0px;
      min-height: 256px;
  }
  .qrcbx canvas{
      width: 200px;
      height: 200px;
  }
.navbar.navbar-expand-md.navbar-light.bg-white.shadow-sm, .bg-white-custom.shadow-sm {
	border-bottom: 0px !important;
	background: linear-gradient(to bottom, #d6fbf6,rgba(255,255,255,0)) !important;
	box-shadow: none !important;
}
.shwqr-btn{
      margin-right:4px; 
      width: 85px; 
      padding-top: 5px;
      padding-bottom: 5px;
      border-radius: 5px;
      font-weight: 500;
      font-size: 12px;
}
.urllnk{
      padding-top: 8px;
      padding-bottom: 8px;
      display: block;
}
#url-pagination{
      display: flex;
      justify-content: end;
}
#url-pagination .btn.btn-sm.btn-light{
      padding: 6px;
      height: 35px;
      width: 21px;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
	    background-color: #e06666!important;
}
.highlightdiv {
	margin-top: 15px !important;
	display: block !important;
	background-color: #ddf7eb !important;
	padding: 20px 19px;
	border-radius: 0px 0px 15px 15px;
	background-image: linear-gradient(#fff, #ddf7eb);
}
.bi.bi-person-fill{
  font-size: 22px;
  position: relative;
  bottom: -1px;
}
a {
	color: rgb(58, 123, 220);
	text-decoration: underline;
}
footer{
  font-size: 16px;
}
footer small{
  opacity: 0.7;
}
.h2, h2 {
    font-size: 1.7rem;
}

    @media (max-width: 576px){

        .lgn-frm {
        max-width: 350px!important;
        }

        footer p.mb-1{
            font-size: 14px;
        }
        .dwn-btn {
            padding: 3px 1px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
        }
        .shwqr-btn{
          margin-bottom: 6px;
        }

    }