@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');



:root{
    --primaryFont: "Inter", serif;
    --secondaryFont: "Montserrat", sans-serif, serif;
    --Orange: #e3720f;
    --Main-Color: #EBECE7;
    --DarkBG: #06171D;
    --hover-line-color: #000; /* Default black */

}



/* Light Mode (default) */
/* default body */
/* body {
    cursor: none;
    background: var(--Main-Color);
    transition: background-color 0.1s, color 0.1s;
    color: #000;
    transition: all 0.1s linear;
    margin: 0;
    padding: 0;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
  }
   */



  
/* ---------------------DARK Mode */


/* -----------------------------Toggle Button Styling */
.toggle-container {
  height: fit-content;
  width: 120px;
  background-color: var(--DarkBG);
  display: flex;
  justify-content: start;
  align-items: center;
  position: fixed;
  bottom: 5%;
  right: -2.4%; /* Initially positioned outside */
  z-index: 2000;
  padding: 10px;
  border-radius: 50px;
  opacity: 0;  /* Initially invisible */
  transform: translateX(200px);  /* Positioned 200px to the right */
  transition: opacity 1s ease, transform 1s ease;  /* Smooth transition */
}

/* Toggle Button Styling */
.toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #f1c40f; /* Default light mode color */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.toggle-button:hover {
  transform: scale(1.1);
}

.toggle-button:active {
  transform: scale(0.95);
}

/* Icon Styling */
#toggle-icon {
  font-size: 1.5rem;
  color: white;
  transition: transform 0.3s ease;
}

/* Dark Mode Styling */
.dark-mode .toggle-button {
  background-color: #34495e; /* Dark mode color */
}

.dark-mode #toggle-icon {
  transform: rotate(360deg);
}

/* -----------------------------Fix for Mobile Overflow */
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important; /* Prevent horizontal scrolling */
  }
  .toggle-container {
    right: -12%; /* Adjust to keep it within the viewport on mobile */
    transform: translateX(0); /* Keep it fully visible */
  }
}
/* -----------------------------Fix for Horizontal Overflow */


  
  /* -----------------------------Toggle Button Styling */




body.dark-mode {
    background-color: #06171D;
    color: var(--Main-Color);
    transition: background-color 0.3s, color 0.3s;
  }
  
  body.dark-mode a {
    color: var(--Main-Color);
    border-color: var(--Main-Color);
    border-width: 1px;
  }
  
  body.dark-mode button,   body.dark-mode .arrow-circle ,body.dark-mode .nav-mob > .nav-btn-mob > label > span{
    border-color: var(--Main-Color);
  }
/* card1 */
  body.dark-mode .vCard3, body.dark-mode .vCard7 {
    background-color: var(--Main-Color);
  }
  body.dark-mode .dark3Title, body.dark-mode .light3Title, body.dark-mode .headingCard3, body.dark-mode .cont3 {
    color: var(--DarkBG);
  }
  /* card2 */
  body.dark-mode .vCard3 {
    background-color: var(--Main-Color);
  }
  body.dark-mode .dark3Title, body.dark-mode .light3Title, body.dark-mode .headingCard3, body.dark-mode .cont3 {
    color: var(--DarkBG);
  }

  body.dark-mode .card-4{
    background-color:#495558;
  }

  body.dark-mode .lower p, body.dark-mode .nav > .nav-links > a{
    color: var(--Main-Color);
  }
  /* body.dark-mode .box-right,  body.dark-mode .box-right-inverted{
    background-color: #06171d0f;
  } */

  
  
  body.dark-mode::after {
    --pseudo-color: var(--Main-Color);
  }
/* ---------------------DARK Mode */