body {
    font-family: Arial, sans-serif; /* Use a clean, sans-serif font */
    background-color: #f8f9fa; /* Light background color */
}

/* 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 */
}
h3{
    background-color: white;
    color: #0f077b;
    background-position: 100%;
    text-align: center;
}
/* 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 */
}

ul{
    text-align: center;
    font-size: medium;
}
/* 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;
}
section{
    padding-top: 15px;
    padding-bottom: 15px;
}
@media (max-width: 600px){
  .back-button {
    margin-left: auto;
    margin-top: -65px;
    color: #0f077b;
    position: absolute;
}
.navbar .navbar-brand{
    font-size: 30px;
}
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem; /* Smaller font size for smaller screens */
    }

    p {
        font-size: 1.5rem; /* Smaller font size for smaller screens */
    }
}

table{
    margin-left: 35%;
    text-align: left;
    font-size: 1.9rem;
}

td{
    padding-left: 15%;
    margin: 15%;
}
td img{
    width: 15rem;
    height: 15rem;
    margin-left: -50px;
    margin-right: 150px;
    margin-bottom: 50px;
    align-items: center;
    
}
tr{
    padding-left: 50px;
    padding-right: 50px;
    text-align: center;
}

@media (max-width: 600px){
 table{
    width: 100%;
    margin-left: 20%;
}
tr{ padding: auto;
    margin: auto;
}
td img{
    align-items: center; 
}
}
.contact {
    background-color: #0f077b;
    color: #f5c70f;
    text-align: center;
    padding: 10px;
    height: 70px;
  }
.contact p{
    text-align: center;
}
.contact img{
    width: 3rem;
    height: 3rem;
  }
.footer-ribbon{
    background-color: #f5c70f;
    color: #0f077b;
    text-align: center;
    margin-top: -35px;
    margin-left: 38%;
    width: 300px;
}
form { 
margin: 0 auto; 
width:250px;
height: auto;
  }
@media (max-width: 600px){
.contact p{
    text-align: center;
    font-size: 100%;
}
.contact img{
    width: 3rem;
    height: 3rem;
  }
.footer-ribbon{
    margin-top: -4%;
    margin-left: 15%;    
}
.container h3, .container p{
    font-size: 2rem;
}
form { 
margin: 0 auto; 
width:250px;
height: auto;
  }
}