/* Parent container holding all horse cards */
body {
    background: url('/home/localhost/hsi_ss_themes/classic/media/images/background.jpg') center/cover no-repeat;
}

.horse-grid {
    display: flex;
    flex-wrap: wrap;  /* This ensures that if there's no space in one row, it moves to the next */
    gap: 20px;        /* Adds space between each horse container */
    justify-content: center; /* Align the containers horizontally in the center */
    overflow: hidden; /* Prevents overflow */
}

/* General styles for the container */
.horse-details .container {
    width:100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    background-color: #f9f9f9; /* Light background for content */
    border-radius: 10px; /* Rounded corners for the container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow for elevation */
    margin-bottom: 20px;
}

/* Style for the horse image */
.horse-details .horse-img {
    width: 100%;
    border-radius: 8px; /* Rounded corners for the image */
    margin-bottom: 20px;
}

/* Info Grid */
.horse-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns of equal width */
    gap: 20px; /* Space between columns */
    margin-bottom: 20px;
}

.horse-info-grid .info-column p {
    margin: 0;
}

/* Description section */
.horse-description {
    margin-top: 20px;
}

h3 {
    color: #228B22; /* Forest Green for headings */
}

.horse-description p {
    line-height: 1.5;
}

/* Action buttons */
.action-buttons {
    margin-top: 30px;
}

.action-buttons .btn {
    display: inline-block;
    padding: 10px 15px;
    background-color: #8B4513;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.action-buttons .btn:hover {
    background-color: #228B22;
}

.pedigree {
    width: 100%; /* Full width */
    margin-top: 20px; /* Space above the pedigree */
}
.pedigree-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four equal columns */
     /*gap: 10px; Space between columns */
   /* border: 1px solid red;  Temporary border to see grid boundaries */
   
} 


.pedigree-grid div {
    width: 100%; /* Ensures the div fills the full column width */
    text-align: center; /* Centers text inside each column */
   /* border: 1px solid rgb(68, 210, 108);  Temporary border to see grid boundaries */
}
.pedigree-grid table {
    width: 100%; /* Ensure the table fills the column */
    text-align: center; /* Center content */
    border-collapse: collapse;
}
.pedigree-grid td {
    /* border: 1px solid #ccc; /* Optional: Borders for table cells */
    padding: 8.9px; /* Padding for readability */
}
.column {
    width: 25%;
  /*   padding: 10px; Padding for each column */
    text-align: center; /* Center align text */
    /*border: 1px solid #ccc;  Optional: border for better visibility */
   /* border: 1px solid red; /*Temporary border to visualize rows */
    background-color: #f9f9f9; /* Light background color */
    display: flex; /* Enable flexbox layout */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    
}
.row {
  /*   border: 1px solid red; /* Temporary border to visualize rows */
    margin: 5px 0; /* Space between rows */
    padding: 5px; /* Padding within each row */
    display: flex; /* Enable flexbox layout */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */  
}

.table-row-border {
    border-bottom: 2px solid black; /* Adjust thickness and color as needed */
}

.table-cell-border {
    border-bottom: 2px solid black; /* Adjust thickness and color as needed */
}
.table-row-border-dotted {
    border-bottom: 2px dotted black; /* Change to dotted */
}
/* Horse AI Profile Section */
.profile-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #B5C68970;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 20px;
}

.profile-text {
    width: 60%;
}

.profile-text p {
   
    margin-bottom: 10px;
}

.profile-link {
    color: #228B22;
    
    text-decoration: none;
}

.profile-link:hover {
    color: #0056b3;
}

.qr-code {
    width: 30%;
    text-align: right;
}

.qr-code img {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.profile-text a {
    text-decoration: underline;
    color: #228B22;
}

.profile-text a:hover {
    color: #0056b3;
}
.green-text {
    color: #228B22;
    font-weight: bold;
}