@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  transition: all 0.3s ease;
}

:root {
  --white: #fff;
  --black: #24292d;
  --nav-main: #4070f4;
  --switchers-main: #0b3cc1;
  --light-bg: #F0F8FF;
  --sidebar-dark: #333;
}

body {
  color: var(--black);
  background-color: var(--light-bg);
}

body[data-theme="dark"] {
  --white: #fff;
  --black: #000;
  --nav-main: #2c2f36;
  --switchers-main: #555;
  --light-bg: #000;
}

body[data-theme='dark'] .light-dark i {
    color: white; /* Ensure the icon stays white in dark mode */
  }
  
  body .light-dark i {
    color: white; /* Ensure the icon stays white in light mode */
  }

nav {
  position: fixed;
  height: 70px;
  width: 100%;
  background: var(--nav-main);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

nav .navbar {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1300px;
  margin: auto;
  padding: 0 30px;
  justify-content: space-between;
}

nav .navbar .logo a {
  font-size: 30px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
}

.navbar .nav-links li {
  margin: 0 8px;
  list-style: none;
}

.navbar .nav-links a {
  font-size: 18px;
  font-weight: 400;
  color: var(--white);
}

/* Login Button */
nav .navbar .login-btn {
  padding: 10px 20px;
  background-color: var(--white);
  color: var(--nav-main);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 7.5%;
}

.search-container {
  display: flex;
  align-items: center;
  width: 60%; 
}

.search-container input {
  padding: 8px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 25px;
  width: 100%;
}

.search-container button {
  margin-left: 10px;
  background-color: var(--nav-main);
  border: none;
  color: var(--white);
  padding: 10px;
  font-size: 18px;
  border-radius: 50%;
  cursor: pointer;
}

/* Sidebar*/
.side-nav {
    position: fixed; /* Fix the sidebar to the side of the page */
    top: 70px; /* Position it directly below the navbar */
    left: -450px; /* Initially hidden */
    height: calc(100vh - 70px); /* Adjust height to take full screen minus navbar height */
    width: 450px;
    background-color: var(--nav-main);
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease-in-out;
    padding-top: 20px;
    color: var(--white); /* Sidebar links are white */
    z-index: 1000; /* Make sidebar appear above other content */
  }
  
.side-nav.open {
    left: 0; /* Show sidebar when open */
}

.side-nav ul {
    list-style: none;
    padding: 0;
    font-size: 1.15em;
    margin-left: 20%;
}

.side-nav ul li {
    padding: 10px 20px;
}

.side-nav ul li a {
    color: var(--white); /* Sidebar links are white */
    text-decoration: none;
    font-size: 18px;
}

.side-nav ul li a:hover {
    background-color: var(--switchers-main);
    border-radius: 5px;
}

body[data-theme="dark"] nav .nav-links a,
body[data-theme="dark"] .logo a,
body[data-theme="dark"] .side-nav ul li a {
  color: var(--white);
}

/* Home content */
.home-content {
height: 100vh;
width: 100%;
background: var(--light-bg);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* Center content horizontally */
padding: 0 60px;
position: relative; /* Ensure content is positioned correctly */
z-index: 0; /* Make sure content is at the base */
}

.home-content h2 {
color: var(--black); /* Default text color */
font-size: 50px;
text-align: center; /* Center text */
}

.home-content h3 {
color: var(--black);
font-size: 42px;
margin-top: -8px;
text-align: center;
}

.home-content h3 span {
color: var(--nav-main);
}

.home-content p {
color: var(--black);
font-size: 16px;
width: 45%;
text-align: justify;
margin: 4px 0 30px 0;
text-align: center; /* Ensure paragraph text is aligned */
}

/* In Dark Mode for home-content */
body[data-theme='dark'] .home-content {
    background-color: #121212; /* Darker background */
  }
  
  body[data-theme='dark'] .home-content h2,
  body[data-theme='dark'] .home-content h3,
  body[data-theme='dark'] .home-content p {
    color: var(--white); /* White text color in dark mode */
  }

.toggle-back {
font-weight: bold;
color: #4070f4;
text-decoration: underline;
cursor: pointer;
}

.page-content {
    padding: 100px 20px 20px; /* Add top padding to move content below the navbar */
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--light-bg); /* Light background color */
    color: var(--black); /* Text color */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  body[data-theme="dark"] .page-content {
    background-color: #121212; /* Dark background color */
    color: var(--white); /* White text color */
  }
  
/* Breadcrumbs */
.breadcrumb {
    font-size: 18px;
    margin: 20px 0;
    color: var(--black);
  }
  
  .breadcrumb a {
    color: var(--black);
    text-decoration: none;
  }
  
  .breadcrumb a:hover {
    text-decoration: underline;
  }
  
  .breadcrumb span {
    color: var(--black);
  }
  
  /* Dark Mode for Breadcrumbs */
  body[data-theme='dark'] .breadcrumb,
  body[data-theme='dark'] .breadcrumb a,
  body[data-theme='dark'] .breadcrumb span {
    color: var(--white);
  }

  h1 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  p {
    font-size: 1rem;
    margin-bottom: 20px;
  }
  
  .card-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  
  .card {
    background-color: var(--nav-main);
    padding: 20px;
    border-radius: 10px;
    flex: 1;
    min-width: 250px;
    text-align: center;
    color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .card a {
    text-decoration: none; /* Remove underline */
    color: white; /* Set link text color to white */
    display: block; /* Make the entire card clickable */
    padding: 20px;
    transition: background-color 0.3s ease; /* Optional hover effect */
}
  
  .card .icon {
    font-size: 2rem;
    margin-bottom: 10px;
  }
  
  .card h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  .card p {
    font-size: 0.9rem;
  }
  
  body[data-theme="dark"] .card {
    background-color: var(--switchers-main);
    color: var(--white);
  }
  
  .card:hover {
    background-color: var(--switchers-main);
    color: var(--white);
  }

/* Style the dropdown menu to look like cards */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--nav-main);
    min-width: 250px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 10px;
    color: var(--white);
    z-index: 1000;
  }
  
  .dropdown-content a {
    display: block;
    padding: 15px;
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
  }
  
  .dropdown-content a:hover {
    background-color: var(--switchers-main);
  }
  
/* Style the dropdown menu to look like cards */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--nav-main);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 10px;
    color: var(--white);
    z-index: 1000;
    width: auto; /* Let the width adjust dynamically */
    min-width: 250px; /* Minimum width */
    max-width: 300px; /* Maximum width, same as card size */
    margin-top: 10px; /* Space between each dropdown */
  }
  
  .dropdown-content a {
    display: block;
    padding: 15px;
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
  }
  
  .dropdown-content a:hover {
    background-color: var(--switchers-main);
  }
  
  /*Dropdown menu*/
  .dropdown button {
    background-color: var(--nav-main);
    padding: 15px;
    border-radius: 10px;
    color: var(--white);
    text-align: left;
    font-size: 18px;
    cursor: pointer;
    width: 100%; /* Ensure the button takes full width */
    transition: background-color 0.3s ease;
  }
  
  .dropdown button:hover {
    background-color: var(--switchers-main);
  }
  
  /* Ensure dropdown looks similar in both light and dark mode */
  body[data-theme="dark"] .dropdown-content {
    background-color: var(--sidebar-dark);
  }
  
  body[data-theme="dark"] .dropdown button {
    background-color: var(--sidebar-dark);
  }
  
  body[data-theme="dark"] .dropdown-content a:hover {
    background-color: var(--switchers-main);
  }

  /*Theme*/
  .appearance {
    position: fixed; /* Fix position on the screen */
    bottom: 20px;    /* Distance from the bottom */
    right: 20px;     /* Distance from the right */
    background-color: var(--nav-main); /* Match the theme colors */
    border-radius: 50%; /* Make it circular */
    padding: 10px; /* Add padding for better clickability  */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* Optional shadow for emphasis */
    z-index: 1000; /* Ensure it stays above other elements */
  }
  
  .appearance .light-dark {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .appearance .light-dark i {
    color: var(--white); /* Adjust icon color for contrast */
    font-size: 20px; /* Adjust icon size */
    transition: transform 0.3s ease, color 0.3s ease;
  }
  
  .appearance .light-dark:hover i {
    transform: scale(1.1); /* Slightly enlarge on hover */
  }
  
/* Chat Button */
.chat-button {
  position: fixed; /* Fix position on the screen */
  bottom: 80px; /* Distance from the bottom (above the appearance button) */
  right: 20px; /* Align with the appearance button */
  background-color: var(--nav-main); /* Match the theme colors */
  border-radius: 50%; /* Make it circular */
  padding: 10px; /* Add padding for better clickability */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* Optional shadow for emphasis */
  z-index: 1000; /* Ensure it stays above other elements */
  cursor: pointer; /* Indicate clickability */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.chat-button .chat-icon i {
  color: var(--white); /* Adjust icon color for contrast */
  font-size: 20px; /* Adjust icon size */
}

.chat-button:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}


/*Chatbox*/
/* Reset default margin and padding */
body, html {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

.chat-container {
  width: 60%;
  max-width: 1200px;
  height: calc(100vh - 70px);
  margin: 70px auto 0 auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.chatbox {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f5f5;
  font-size: 16px;
}

.chat-input {
  display: flex;
  padding: 20px;
  background-color: white;
  border-top: 1px solid #ccc;
}

.chat-input input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 16px;
  background-color: white;
  color: var(--black);
}

.chat-input button {
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.chat-input button:hover {
  background-color: #0056b3;
}

.message {
  margin: 10px 0;
  padding: 12px 16px;
  border-radius: 8px;
  max-width: 70%;
  font-size: 16px;
  text-align: left;
}

.user-message {
  background-color: #007bff;
  color: white;
  margin-left: auto;
}

.bot-message {
  background-color: white;
  border: 1px solid #ccc;
  color: var(--black);
}

.loading {
  font-style: italic;
  color: #666;
}

/* Dark Mode Styles */
body[data-theme='dark'] .chat-container {
  border-color: #333;
}

body[data-theme='dark'] .chatbox {
  background-color: #1E1E1E;
}

body[data-theme='dark'] .chat-input {
  background-color: #121212;
  border-top-color: #333;
}

body[data-theme='dark'] .chat-input button{
  background-color: #333;
}

body[data-theme='dark'] .chat-input input {
  background-color: #2D2D2D;
  border-color: #333;
  color: var(--white);
}

body[data-theme='dark'] .bot-message {
  background-color: #121212;
  border-color: #333;
  color: var(--white);
}

body[data-theme='dark'] .user-message {
  background-color: #2D2D2D;
  border-color: #333;
  color: var(--white);
}

body[data-theme='dark'] .loading {
  color: #888;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .chat-container {
      width: 100%;
      border: none;
      border-radius: 0;
      height: calc(100vh - 70px);
      margin-top: 70px;
  }
  
  .message {
      max-width: 85%;
  }
}