/* navbar styles */
.navbar {
    background-color: #1A1B1E; /* Change this color to whatever you like */
    height: 60px;
}

.navbar a {
    color: white; /* Ensures the text color is readable against the background */
    font-size: 16px; /* Adjust this value to change the font size */
    font-family: "Roboto", sans-serif;  /* You can replace Arial with your desired font */
    
}

.navbar-logo {
    height: 30px; /* Adjust the logo height if necessary */
    max-height: 100%; /* Ensure it doesn't exceed the navbar's height */
    padding-right: 60px;
}

.navbar-nav > li {
  margin-right: 20px; /* Adjust this value to increase or decrease spacing */
}

.figure-caption {
    font-size: 14px;          
    color: #A6A6A6;           
}


/* body styles */
body {
    font-family: "Open Sans", sans-serif;  
    font-size: 16.5px;
}

p {
    text-align: justify;  /* This justifies the text */
}

a {
    text-decoration: none;  /* Removes the underline */
    color: #1940c3;
}

a:hover {
    color: #00e71a;               /* Optional: change color on hover */
}


/* sidebar styles */
.sidebar a.active {
  font-weight: bold;
  color: #1940c3;
}

.sidebar-logo{
  height: 80px; 
}


/* footer styles */
footer a {
  text-decoration: underline;
}

footer {
  font-size: 16px;
}


/* code chunk styles */
.cell-output {
    background-color: #F6F8FE; /* Light gray background */
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 30px; /* Space between thumbnail and details */
  margin: 20px 20px;
}

.contact-card img {
  border-radius: 10%;
  width: auto; /* Allows the image width to adjust naturally */
  height: 150px; /* Maintains consistent height */
  max-width: 200px; /* Prevents the image from exceeding the container size */
  object-fit: cover; /* Ensures no cropping occurs */
}

.contact-details {
   font-family: "Open Sans", sans-serif;  
    font-size: 16.5px;
}

.contact-card .contact-title {
  font-size: 20px; /* Makes the title larger */
  font-weight: bold; /* Makes the title bold */
  margin-bottom: 10px; /* Adds spacing below the title */
  color: #1940c3;
}


.contact-details p {
    margin: 1px 0;
}