@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



:root {
  --primaryBg: #94C3FF;
  --primary: #0C54FF;
  /* --primary: #40314c; */
  --secondary: #7d8597;
  --secondaryBg: #fbedcf;


  --white: #ffffff;
  --lightGrey: #818181;
  --textGrey: #5b5b5b;
  --bgGrey : #efefef;
  --dark : #001233;
  /* --dark: #281b33; */

  --clr1: #7d8597;
  --clr2: #7d8597;
  --clr3: #5c677d;
  --clr4: #33415c;
  --clr5: #002855;
  --clr6: #023e7d;
  --clr7: #0353a4;
  --clr8: #0466c8;
}

body {
  font-family: 'Nunito', sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
  background-image: url('../images/bg-new.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(180deg,
      #520082 0%,
      rgba(67, 156, 180, 0.480759) 51.74%,
      rgba(217, 217, 217, 0) 100%);
  z-index: 1;
  pointer-events: none;
  /* allow clicks to pass through if needed */
}

.content {
  position: relative;
  z-index: 2;
  color: white;
  padding: 40px 20px;
}

.headings {
  width: 80%;
  margin: auto;
  margin-top: 180px !important;
}

.headings h1 {
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: 0.05cm;
}

.custom-dark-input {
  background-color: #333;
  color: #fff;
  border: 2px solid #0466c8;
  border-radius: 25px;
  padding: 7px 12px;
}

.custom-dark-input::placeholder {
  color: #ccc;
  /* lighter placeholder */
}

.custom-dark-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  /* optional glow */
}

@media (max-width: 768px) {
  .content h1 {
    font-size: 24px;
  }

  .content p {
    font-size: 16px;
  }

  .headings {
    width: 100%;
  }

  .headings h1 {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .content {
    padding: 20px 20px;
  }

  .headings {
    width: 100%;
  }

  .headings h1 {
    font-size: 2rem;
  }
}

/* ===========================================
* Thememing
===========================================*/


/* --------------- Background ---------------- */
.bg-primary{
  background-color: var(--primaryBg) !important;
  color: var(--primary) !important;
}

.bg-secondary{
  background-color: var(--secondary) !important;
  color: var(--white) !important;
}

/* --------------- Text ---------------- */

.text-primary{
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

/* --------------- Buttons ---------------- */

.btn{
  border: none;
  font-size: 0.8rem !important;
  padding: 8px 20px !important;
}

.btn:hover {
  transform: scale(1.01) !important;
}

.btn-sm {
  padding: 3px 10px !important;
  font-size: 0.7rem !important;
}

.btn-xs {
  padding: 2px 10px !important;
  border-radius: 0 !important;
  font-size: 0.7rem !important;
}

.btn-icon{
  border-radius: 50%;
  height: 25px;
  width: 25px;
  padding: 2px 2px;
  margin-left: 10px;
  margin-right: 10px;
}

.btn-primary{
  background-color: var(--primaryBg) !important;
  color: var(--primary) !important;
}

.btn-primary:hover {
  background-color: var(--dark) !important;
}

.btn-white {
  background-color: var(--white) !important;
  color: var(--primary) !important;
}

.btn-secondary {
  background-color: var(--secondary) !important;
  color: var(--white) !important;
}

.btn-secondary:hover {
  background-color: var(--clr3) !important;
  /* color: var(--white); */
}

/* --------------- Alert ---------------- */
.alert {
  font-size: 0.85rem;
  border-style: none;
}



small{
  padding-top:0;
  margin-top: 0;
  color: var(--lightGrey);
  font-size: 0.75rem;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

/************************************************************************/
/* Navbar */
/************************************************************************/
.navbar a.heading{
	padding-left: 90px;
}

.navbar a i{
  font-size: 1.1rem;
  color: var(--white);
}


/* For Chrome, Edge, Safari */
.hide-scrollbar {
  overflow-y: scroll;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

/************************************************************************/
/* FORMS */
/************************************************************************/

.form-label, .form-check-label{
  font-size: 0.7rem;
  margin-bottom: 0;
}

.form-btns{
  text-align: right;
}

input:read-only{
  background-color: #e8e8e8 !important;
}

.input-group-text{
  font-size: 0.7rem;
}





/************************************************************************/
/* Mobile Styles */
/************************************************************************/
@media (max-width: 767px) {
  .sidebar {
    display: none;
  }
  .content {
    margin-left: 0;
  }

  .navbar a.heading {
    padding-left: 0;
    font-size: 1rem;
  }

  .search-box {
    max-width: 100%;
  }

  
}