:root {
  --color-primary-light: #A8E6CF;
  --color-primary: #7DD3C5;
  --color-secondary: #5C9EAD;
  --color-accent: #4A90E2;
  --color-dark: #2C5F2D;
  --color-darker: #dcdcdc;
  --color-white: #FFFFFF;
  --color-light-gray: #F8F9FA;
  --color-gray: #6C757D;
  --nav-height: 80px;
  --color-darker: #1B4F72;
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  /* background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 25%, var(--color-secondary) 50%, var(--color-accent) 75%, var(--color-darker) 100%); */
  background-attachment: fixed;
  background-color: #F8F9FA;
  color: var(--color-darker);
  line-height: 1.2;
  overflow-x: hidden;
}

header {
  padding: 10px;
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

h2 {
  margin-bottom: 5px;
}

header div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

header div a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.heading-div-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.link-btn {
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  font-size: 1rem;
  padding: 10px;
  cursor: pointer;
  border-radius: 25px;
  background-color: var(--color-light-gray);
}

.expert-btn {
  border: none;
  font-size: 1.5rem;
  color: var(--color-white);
  font-weight: 600;
  cursor: pointer;
  padding: 20px;
  border-radius: 25px;
  background-color: var(--color-primary);
}

.input-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

input {
  padding: 10px;
  border-radius: 25px;
  font-size: 1rem;
  border: 1px solid var(--color-primary);
}

input::placeholder {
  color: var(--color-primary);
}

.submit-link {
  background-color: var(--color-primary);
  color: var(--color-white);
  cursor: pointer;
}

.info-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  font-size: 1rem;
}

.expert-div {
  position: absolute;
  z-index: 2;
  border-radius: 25px;
  width: 300px;
  padding: 10px;
  height: 80vh;
  background-color: var(--color-white);
}

.expert-div button {
  border: 1px solid red;
  font-weight: 600;
  padding: 5px;
  border-radius: 25px;
  font-size: 1rem;
  color: red;
  cursor: pointer;
  background-color: transparent;
}

.expert-div div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-color {
  color: var(--color-secondary);
}

.scrollable-div {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
}

/* Grid Container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0px 6px;
}

.box-grid-color {
  padding: 10px;
  margin: 5px;
  border-radius: 25px;
  background-color: #eaeaea;
  height: 82vh;
}

/* Grid Item 1 - Desktop */
.grid-item-1 {
  grid-row: 1 / 4;
  grid-column: 1 / 2;
}

/* Grid Item 2 - Desktop */
.grid-item-2 {
  grid-row: 1 / 4;
  grid-column: 2 / 4;
}

/* Grid Item 3 - Desktop */
.grid-item-3 {
  grid-row: 1 / 4;
  grid-column: 4 / 5;
}

.grid-container p {
  font-size: 1rem;
  margin: auto;
}

span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 0 5px;
}

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

span a:hover {
  text-decoration: underline;
}

.user-pass-alert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: 0;
  margin-top: 0;
  width: 100%;
  text-align: center;
}

progress {
  width: 100%;
  height: 25px;
  -webkit-appearance: none;
  margin-top: 0;
  margin-bottom: 5px;
  /* Remove default styling in WebKit browsers */
  appearance: none;
}

/* Chrome, Safari, Opera */
progress::-webkit-progress-bar {
  background-color: #b9b9b9;
  /* Background of the bar */
  border-radius: 25px;
}

progress::-webkit-progress-value {
  background-color: var(--color-darker);
  /* Fill color */
  border-radius: 25px;
}

/* Firefox */
progress::-moz-progress-bar {
  background-color: var(--color-darker);
  /* Fill color */
  border-radius: 25px;
}


/* Tablet Styles */
@media (max-width: 1024px) and (min-width: 769px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 0px 0px;
  }

  .grid-item-1 {
    grid-row: 1 / 5;
    grid-column: 1 / 2;
  }

  .grid-item-2 {
    grid-row: 1 / 5;
    grid-column: 2 / 3;
  }

  .grid-item-3 {
    grid-row: 5 / 7;
    grid-column: 1 / 3;
  }
}

/* Mobile Styles */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 0px 0px;
  }

  .grid-item-1 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

  .grid-item-2 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }

  .grid-item-3 {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
  }
}