/* Fonts */

/* logo font*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@900&display=swap');
/*Noto fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic&display=swap');

:root {
    --primary-purple: #5f63d7;
    --secondary-purple: #e2e3ff;
    --light-purple-bg: #f7f7ff;
    --line-bg: #d1d1d1;
    --white: #ffffff; 
  }

.bg-purple {
    background-color:var(--primary-purple);
  }

.logo{
    font-family: 'Archivo', sans-serif;
    letter-spacing: -1.5px;
}

.logo-image {
    max-height: 60px; 
    margin-right: 10px;
}

html, body {
    font-family: 'Noto Kufi Arabic', 'Noto Sans', sans-serif;
    overflow-x: hidden; /* Prevent scroll on narrow devices */
}

.fw-500{
    font-weight: 500;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  /*font-size: 14px; */
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}

.container {
  max-width: 960px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color:var(--primary-purple);
  color: rgb(209, 217, 221);
}

/* underline color */

.underline-1 {
    text-decoration-line: underline;
    text-decoration-color:  var(--primary-purple);
    text-decoration-thickness: 0.1em;
}

.underline-2 {
    text-decoration-line: underline;
    text-decoration-color:  var(--primary-purple);
    text-decoration-thickness: 0.2em; 
}

.underline-3 {
    text-decoration-line: underline;
    text-decoration-color:  var(--white);
    text-decoration-thickness: 0.1em; 
}

/* Booking page */
.col-1-appointments{
    background-color:lavender;
}

.col-2-appointments{
    background-color:lavender;
}

.col-3-appointments{
    background-color:lavender;
}

.box{
    box-sizing: border-box;
    border: 5px solid transparent;
    background-clip:padding-box;
}

/* Appointment Cards - Statuses */
.card-header-new{
    background-color:lightgray;
}

.card-header-confirmed{
    background-color:green;
}

.card-header-cancelled{
    background-color:red;
}

.dashboard-cards{
    display: flex;
    justify-content: space-between;
    text-align: center;
    gap:3em;
}

.text-white {
    color:  var(--white);
}

.message-box {
    background-color: #d4edda; 
    border-color: #c3e6cb; 
    border-radius: .25rem; 
    padding: 10px; 
}

.odd-row {
    background-color: #f0f0f0; /* Light gray background for odd rows */
}

.even-row {
    background-color: #ffffff; /* White background for even rows */
}