html,
body {
  margin: 0;
}

body{
  font-family: 'Poppins', sans-serif;
  background: radial-gradient(
    544.72% 214.23% at 50% 211.41%,
    #006aff 0%,
    #fff 100%
  );
  overflow-x: hidden;
  min-height: 100vh;
}

body * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  padding-bottom: 30px;
}
  

.header{
  padding-top:30px ;
  margin-bottom: 10px ;
}

.header-img{
  margin-bottom: 10px;
  width: 130px;
}

.nav{
  display: flex;
  gap: 40px;
}

.nav .header-title{
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-decoration: none;
  color: rgba(10, 15, 21, .5);
  cursor: pointer;
}

.nav .header-title.active{
  color: rgba(10, 15, 21, 1);
}

.card{
  gap: 15px;
  background-color: white;
  padding: 20px;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 1px 0px 6.6px 5px rgba(0, 0, 0, 0.05);
  transition: .3s all ease-in-out;
  
}

.card:hover{
  transform: scale(1.03);
}

.card-body{
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: 0px;
}

.card-title{
  font-size: 22px;
  font-weight: 700;
  color: #0A0F15;
  margin-bottom: 12px;
}

.card-desc{
  color: #0A0F15;
  margin-bottom: 30px;
}

.card-anchor{
  display: flex; 
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: auto;
  color: #006AFF;
  font-size: 22px;
  font-weight: 900;
  text-decoration: none;
}



@media only screen and (max-width: 680px) {
.header{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav .header-title{
  font-size: 20px;
}
}

.nav-tabs::-webkit-scrollbar{
  height: 8px;
  border-radius: 20px;
}

.nav-tabs::-webkit-scrollbar-thumb{
background-color: rgba(10, 15, 21, .3);
border-radius: 20px;
}

/* Night Mode Styles */
body.night-mode {
  background: #121212;
  color: #ffffff;
}

body.night-mode .header,
body.night-mode .sidebar,
body.night-mode .content,
body.night-mode .card {
  background-color: #1e1e1e;
  color: #ffffff;
}

body.night-mode .sidebar a,
body.night-mode .header a {
  color: #ffffff;
}

/* ====================== */
/* Night Mode Styles */
/* ====================== */
body.night-mode {
  background: #121212 !important; 
  color: #ffffff !important;
}

body.night-mode .landing-page {
  background-color: #121212 !important;
  color: #ffffff !important;
}

body.night-mode .header,
body.night-mode .sidebar,
body.night-mode .content,
body.night-mode .card {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

body.night-mode a,
body.night-mode .sidebar a,
body.night-mode .header a,
body.night-mode .card a {
  color: #ffffff !important;
}

body.night-mode .btn {
  background-color: #333333 !important;
  border-color: #444444 !important;
  color: #ffffff !important;
}


/* ======================================== */
/* NightMode Background                     */
/* ======================================== */

body.night-mode {
  background: #121212 !important;
  background-image: none !important;
  color: #ffffff !important;
}

body.night-mode #particles-js,
body.night-mode .landing-page,
body.night-mode .landing-content,
body.night-mode .content {
  background: #121212 !important;
  background-image: none !important;
  color: #ffffff !important;
}


body.night-mode .content,
body.night-mode .cardscontent {
  background: transparent !important; /
}

body.night-mode .card {
  background-color: rgba(30, 30, 30, 0.8) !important; 
  color: #ffffff !important;
}


/* ============================================== */
/* Additional adjustments to remove gray rectangles and make card titles white in night mode */
/* ============================================== */
body.night-mode .header {
  background-color: transparent !important;
}

body.night-mode .card-title {
  color: #ffffff !important;
}


/* ============================================== */
/* Adjust the settings rectangle in night mode */
/* ============================================== */
body.night-mode .modal-content {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border: none !important; 
}

body.night-mode .modal-header,
body.night-mode .modal-footer {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border: none !important; 
}

/* Adjust the close button (X) */
body.night-mode .btn-close {
  filter: invert(1); /* Inverts the color of the icon to be visible on a dark background */
}

/* Adjusts the "Close" button (if it is .btn-secondary) */
body.night-mode .btn-secondary {
  background-color: #444444 !important;
  border-color: #444444 !important;
  color: #ffffff !important;
}

/* Adjusts the color of the switch label and the switched on */
body.night-mode .form-check-label {
  color: #ffffff !important;
}

body.night-mode .form-check-input:checked {
  background-color: #0d6efd !important; 
  border-color: #0d6efd !important;
}

/* ============================================== */
/* Landing Page adjustment in night mode */
/* ============================================== */
body.night-mode .landing-page {
  background: transparent !important; /* Remove the solid background to see the particles */
}

body.night-mode .landing-content {
/* Add a slight semi-transparent background if necessary to improve readability */
  background-color: rgba(18, 18, 18, 0.6) !important;
  padding: 20px;
  border-radius: 8px;
}

body.night-mode .landing-content h1,
body.night-mode .landing-content p {
  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}