/* General body styles */
body {
    font-family: Arial, sans-serif; /* Use a clean, sans-serif font */
    background-color: #f8f9fa; /* Light background color */
    color: #333; /* Dark text color for readability */
}

/* Header styles */
h1 {
    font-size: 3.5rem; /* Larger font size for the header */
    color: #0f077b; /* Bootstrap primary color */
    text-align: center; /* Center the header */
    margin-bottom: 20px; /* Space below the header */
}

/* Image styles */
.detail-image {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it behaves like a block element */
    margin: 0 auto; /* Center the image */
}

/* Paragraph styles */
p {
    font-size: 2.5rem; /* Slightly larger font size for the paragraph */
    line-height: 1.5; /* Increase line height for better readability */
    text-align: justify; /* Center the paragraph text */
    margin: 0 20px; /* Add horizontal margin for spacing */
}

/* Button styles */
.back-button {
    display: inline-block; /* Make the button inline-block */
    margin-bottom: 20px;
    margin-left: 1250px;
    background-color: whitesmoke;
    color: #0f077b;
}
.back-button:hover{
    background-color: #0f077b;
    color: whitesmoke;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: 4rem; /* Smaller font size for smaller screens */
    }
.back-button {
    display: inline-block; /* Make the button inline-block */  
    background-color: whitesmoke;
    color: #0f077b;
}
    p {
        font-size: 2rem; /* Smaller font size for smaller screens */
    }
}
@media (max-width: 600px){
  .back-button {
    margin-left: auto;
    margin-top: -55px;
    color: #0f077b;
    position: absolute;
}
.navbar .navbar-brand{
    font-size: 30px;
}
.navbar-collapse{
    margin-left: 80%;
}
}
.book-session{
    margin-left: 35%;
    background-color: #0f077b;
    color: whitesmoke;
    width: 30%;
    padding: 10px 0 10px 0;
    font-size: 1.9rem;
}
@media (max-width: 600px) {
  .book-session{
    width: 100%;
    margin: 10px 0 10px 0;
    
  }
}
button {
    background-color: #0f077b;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 3px 6px rgba(#0f077b);
    font-weight: 900;
    font-size: 1.5rem;
    color: white;
    user-select: none;
    outline-offset: 3px;
  }
  button:hover, button:focus {
    background-color: #0f077b;
  }
  @media (max-width: 600px) {
    .footer-box {
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 12px 15px;
    }
    .col-md-8, .col-md-4 {
      flex: none;
      width: 100%;
      text-align: center;
    }
    button {
      font-size: 1.2rem;
      padding: 12px 30px;
      width: 100%;
      max-width: 200px;
    }
  }
.col-md-4 img{
    width: 400px;
    height: 300px;
}