/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

/* app/assets/stylesheets/application.css */


/* Start of Header */

body {
    margin: 0;
    background-color: #7F9F64;
}

/* HEADER CONTAINER */
header {
    width: 100%;
}


/* HERO / HEADER IMAGE */
.header-image {
    position: relative;
    background: url('/assets/dogheader.jpg') no-repeat center center;

    /* Slight zoom-out */
    background-size: 105%;

    background-position: 60% 30%;

    height: 350px;

    /* NEW: left-aligned vertical layout */
    display: flex;
    flex-direction: column;       /* Title on top, subtitle below */
    justify-content: center;      /* Center content vertically */
    align-items: flex-start;      /* LEFT alignment */
    text-align: left;             /* Left text */

    padding-top: 30px;
    padding-left: 40px;           /* Same left padding as nav */
    padding-right: 40px;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
}

/* Soft dark overlay for readability */
.header-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
            circle at left center,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.05)
    );
    z-index: 1;
}

/* Site title */
.header-image h1 {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #ffffff;
    font-family: "Kaushan Script";
    font-weight: 400;
    font-size: 4.6em;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 1px black;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

/* Subtitle tag bottom-right */
.header-image p.subtitle {
    position: relative;          /* NOT absolute anymore */
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 8px 16px;
    margin-top: 12px;            /* space below title */
    border-radius: 8px;
    font-family: "Happy Monkey", system-ui;
    font-size: 1.1em;
    color: #222;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    display: inline-block;
}



/* NAV BAR */
header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 40px;           /* matches header-image padding */
    margin: 0;
    width: 95%;
    background: linear-gradient(90deg, #355317, #426B1F 40%, #5C8430);
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

header nav ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

header nav ul li {
    margin: 0 14px;
}

header nav ul li a {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 0.98rem;          /* slightly larger */
    letter-spacing: 0.06em;
    font-weight: 600;
}

header nav ul li a:hover {
    color: #aef78e;
    text-decoration: none;
}

/* search wrapper on desktop */
.search-wrapper {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.search-wrapper input[type="text"] {
    font-family: "Inter", sans-serif;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;

}

.search-wrapper input[type="submit"] {
    font-family: "Inter", sans-serif;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background-color: #ffffff;
    color: #333;
    cursor: pointer;

}

/* MOBILE STYLES */

@media screen and (max-width: 450px) {

    /* Header adjustments */
    .header-image {
        height: 140px; /* enough room for both title and subtitle */
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        background-position: center 35%;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        overflow: visible;
        z-index: 1;
        border-radius: 0; /* cleaner on small screens */
    }

    .header-image h1 {
        font-size: 2.5rem;
        margin: 0;
        top: 10px;
        color: white;
        position: relative;
        z-index: 3;
        -webkit-text-stroke: 0.4px black;
        font-family: "Kaushan Script", cursive;
    }

    .subtitle {
        position: relative;
        z-index: 3;
        margin-top: -140px;
        background-color: rgba(252, 252, 252, 0.7);
        color: black;
        padding: 6px 25px;
        border-radius: 6px;
        font-size: 0.85rem !important;
        font-family: "Happy Monkey", system-ui;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        text-align: center;
        white-space: nowrap;
        max-width: 90%;
        box-sizing: border-box;
        display: block;
    }

    /* Navigation stack */
    header nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    header nav ul {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        width: 100%;
    }

    header nav ul li {
        margin: 5px 0;
    }

    header nav ul li a {
        font-size: 0.9rem;
    }

    /* Search Form Wrapper */
    .search-wrapper {
        width: 99%;
        padding-right: 12px;
        padding-left: 0; /* aligns with nav links */
        box-sizing: border-box;
    }

    .search-wrapper form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 99%;
    }

    .search-wrapper input[type="text"] {
        width: 99%;
        padding: 8px;
        font-size: 0.95rem;
        border-radius: 4px;
        border: none;
        box-sizing: border-box;
    }

    .search-wrapper input[type="submit"] {
        width: 99%;
        margin-top: 6px;
        padding: 8px;
        font-size: 0.95rem;
        border-radius: 4px;
        border: none;
        background-color: #ffffff;
        color: #333;
        cursor: pointer;
        box-sizing: border-box;
    }

    /* Top breeds heading */
    .our-top-breeds-heading {
        font-size: 2rem;
        flex-direction: column;
        text-align: center;
        margin: 20px 0;
    }

    .our-top-breeds-heading::before,
    .our-top-breeds-heading::after {
        display: none;
    }

    /* Breed gallery: 2-column grid */
    .breed-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 10px;
        padding: 15px;
    }

    .breed-item {
        padding: 10px;
        border-radius: 8px;
        background-color: rgba(252, 252, 252, 0.5);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .breed-item img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid #52734d;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        margin-bottom: 10px;
    }

    .breed-description {
        font-size: 0.75rem;
        margin: 6px 0;
        line-height: 1.3;
        padding: 0 6px;
    }

    .discover-button {
        font-size: 0.8rem;
        padding: 6px;
        width: 90%;
        border-radius: 4px;
    }

    /* Footer spacing (optional) */
    footer {
        padding: 20px 10px;
        text-align: center;
    }
}

/* End of Header */




/* Start of Home Page */



.homepage-intro {
    text-align: center;
    margin: 40px auto;
}

.intro-box {
    max-width: 800px;
    background-color: #f1f9ee;
    padding: 50px 40px;
    font-family: "Roboto", serif;
    font-size: 1.1em;
    color: #2d2d2d;
    line-height: 1.6;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}




/* Styles for the "Our Top Breeds" Section Heading */

.welcome-text-homepage {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Kaushan Script";
    font-weight: 400;
    font-size: 4rem; /* Adjust as needed */
    color: #3b3b3b; /* Adjust to the exact color in the mockup */
    margin: 20px 0;
    position: relative;
}
.our-top-breeds-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Kaushan Script";
    font-weight: 400;
    font-size: 4rem; /* Adjust as needed */
    color: #3b3b3b; /* Adjust to the exact color in the mockup */
    margin: 20px 0;
    position: relative;
}


.our-top-breeds-heading::before, .our-top-breeds-heading::after {
    content: "";
    display: inline-block;
    width: 400px;
    height: 10px;
    background-color: #3b3b3b;
    margin: 0 15px;
    vertical-align: middle;
    border-radius: 2px;
}

/* Adjusting the breed grid layout */
.breed-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Default 5 columns */
    gap: 100px 20px;
    padding: 40px;
}

.breed-item {
    text-align: center;
    border-radius: 10px;
    background-color: rgba(252, 252, 252, 0.5);
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%; /* Ensures each item takes up full height */
}

.breed-item img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid #52734d; /* Adds a border with color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
}

.breed-description {
    font-size: 1rem;
    font-family: "Imprima", sans-serif;
    font-weight: 400;
    color: black;
    margin: 10px 0;
}

.discover-button {
    display: inline-block;
    font-family: "Imprima", sans-serif;
    font-weight: 400;
    width: 70%;
    padding: 10px;
    background-color: #52734d;
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.4rem;
    margin-top: auto; /* Pushes the button to the bottom */
}

.discover-button:hover {
    background-color: #415b39;
}

/* Adjust to 5 columns on extra-large screens */
@media screen and (min-width: 1200px) {
    .breed-gallery {
        grid-template-columns: repeat(5, 1fr);
        gap: 40px 20px;
        padding: 50px;
    }
}

/* Adjust to 4 columns on large screens */
@media screen and (max-width: 1200px) {
    .breed-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px 20px;
    }
}

/* Adjust to 3 columns on medium screens */
@media screen and (max-width: 900px) {
    .breed-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Adjust to 2 columns on small screens */
@media screen and (max-width: 650px) {
    .breed-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Adjust to 1 column on very small screens */
@media screen and (max-width: 450px) {
    .breed-gallery {
        grid-template-columns: 1fr;
    }
}

/* Mobile-specific tweaks */
@media screen and (max-width: 450px) {
    .our-top-breeds-heading {
        font-size: 2rem;
        flex-direction: column;
        text-align: center;
        margin: 20px 0;
    }

    .our-top-breeds-heading::before,
    .our-top-breeds-heading::after {
        display: none;
    }

    .breed-gallery {
        padding: 20px;
        gap: 40px 10px;
    }

    .breed-item {
        padding: 10px;
        max-width: 80%;
        margin: 0 auto;
        border-radius: 8px;
        background-color: rgba(252, 252, 252, 0.5);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .breed-item img {
        width: 220px;
        height: 180px;
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid #52734d;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        margin-bottom: 10px;
    }

    .breed-description {
        font-size: 0.85rem;
        margin: 6px 0;
        line-height: 1.3;
        padding: 0 6px;
    }

    .discover-button {
        font-size: 0.9rem;
        padding: 6px 10px;
        width: 80%;
        border-radius: 4px;
    }
}

/* End of Home Page */


/* Start of Footer */
.footerhighlight{
    padding: 12px;
    background-color: #426B1F;
    font-family: "Inter", sans-serif;
    color: white;
    text-align: Center;
}

.footer-links {
    text-align: center;
    margin-top: 5px;
    font-family: "Inter", sans-serif;
}

/* End of Footer */

/* Start of All Dog Breed */


.all-dog-breed-container {
    display: flex;
    margin-top: 30px;
}
/* Pagination */
.pagination-controls {
    text-align: left;
    margin: 20px 0 0 0; /* Remove bottom margin */
    font-family: "Imprima", serif;
    display: flex;
    flex-direction: column; /* Stack elements */
    gap: 10px; /* Add spacing between rows */
}

.pagination-buttons {
    display: flex; /* Arrange buttons side by side */
    gap: 10px; /* Spacing between buttons */
}

.prev-page-button, .next-page-button {
    display: inline-block;
    padding: 10px 15px;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 5px;
    margin: 0;
}

.prev-page-button {
    background-color: #6c757d;
    color: white;
}

.prev-page-button:hover {
    background-color: #5a6268;
}

.next-page-button {
    background-color: #52734d;
    color: white;
}

.next-page-button:hover {
    background-color: #415b39;
}

/* No More Results Message */
.no-more-results {
    text-align: left;
    color: #666;
    font-size: 1rem;
}
/* Pagination Info */
.pagination-info {
    font-family: "Imprima", serif; /* Use the Imprima font */
    font-size: 1rem; /* Adjust font size */
    color: black; /* Set color to black */
    margin-bottom: 0; /* Remove bottom margin */
}


/* Filter section*/

.no-results {
    text-align: center;
    padding: 20px;
    font-family: "Imprima", serif;
    font-size: 1.2rem;
    color: #555;
}

.clear-filters-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.clear-filters-button:hover {
    background-color: #5a6268;
}

.all-dog-breed-filter-section h3 {
    font-weight: bold;
    font-size: 1.5rem; /* Adjust as needed */
    text-align: left; /* Align the text */
    margin-bottom: 20px; /* Add space below the title */
    color: #3b3b3b; /* Optional: change text color */

    /* Full-width underline */
    position: relative;
    padding-bottom: 10px; /* Adds space between the text and the line */
}

.all-dog-breed-filter-section h3::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px; /* Adjust thickness of the underline */
    background-color: #52734d; /* Underline color */
}

/* Add underline before the buttons */
.all-dog-breed-filter-buttons {
    position: relative;
    padding-top: 20px; /* Adds space between the line and the buttons */
    margin-top: 20px; /* Adds space between the buttons and other content */
}

.all-dog-breed-filter-buttons::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px; /* Thickness of the line */
    background-color: #52734d; /* Line color */
}



.all-dog-breed-filter-section {
    padding: 20px;
    background-color: rgba(252, 252, 252, 0.5);
    border-radius: 10px;
    font-family: "Imprima", serif;
    font-size: 1.5rem;
}

.all-dog-breed-filter-group, .all-dog-breed-filter-size {
    margin-bottom: 30px;
}

.all-dog-breed-filter-group h4, .all-dog-breed-filter-size h4 {
    font-weight: bold;
    margin-bottom: 10px;
}

.filter-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
    gap: 10px; /* Space between checkboxes */
    padding-left: 0; /* Remove additional padding */
    margin-top: 10px; /* Add some spacing above checkboxes */
}

label {
    display: flex;
    align-items: center; /* Align text and checkbox vertically */
    font-size: 1.2rem; /* Adjust text size */
}

input[type="checkbox"] {
    margin-right: 15px; /* Space between checkbox and label text */
}


.all-dog-breed-clear-button {
    width: 40%;
    padding: 10px;
    background-color: #52734d;
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
    font-family: "Imprima", serif;
    font-weight: 400;
    font-size: 1rem;
}

.all-dog-breed-clear-button:hover {
    background-color: #415b39;
}

.all-dog-breed-submit-button {
    width: 40%;
    padding: 10px;
    background-color: #52734d;
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
    font-family: "Imprima", serif;
    font-weight: 400;
    font-size: 1rem;
}

.all-dog-breed-submit-button:hover {
    background-color: #415b39;
}

/* End of Filter section*/

/* Styling for the All Breeds heading */
.all-dog-breed-heading {
    font-family: "Kaushan Script";
    font-weight: 400;
    font-size: 4rem; /* Adjust as needed */
    text-align: center;
    color: #3b3b3b;
    margin-bottom: 30px;
    margin-top: 0;
    position: relative;
}

.all-dog-breed-heading::before,
.all-dog-breed-heading::after {
    content: "";
    display: inline-block;
    width: 350px; /* Adjust length of the line */
    height: 10px; /* Adjust thickness of the line */
    background-color: #3b3b3b; /* Line color */
    margin: 0 15px; /* Space between line and text */
    vertical-align: middle;
    border-radius: 2px; /* For rounded edges */
}

/* Breed Name Styling */
.all-dog-breed-name {
    font-family: "Jaini", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    text-transform: uppercase;
    margin: 10px 0; /* Add some spacing between name and other elements */
}

/* Keywords Styling */
.all-dog-breed-keywords {
    font-family: "Imprima", serif;
    font-size: 1.2rem;
    color: #52734d; /* Green color for keywords */
    margin-bottom: 10px; /* Add consistent spacing */
    font-style: italic;
    text-align: center;
}

/* Breed Description Styling */
.all-dog-breed-description {
    font-family: "Imprima", serif;
    font-weight: 400;
    font-size: 1rem;
    color: #666;
    margin: 10px 0;
    min-height: 50px; /* Ensure consistent height across all cards */
    text-align: center;
}

/* Gallery Section */
.all-dog-breed-gallery-section {
    width: 80%;
    padding: 20px;
}

/* Grid Layout for Cards */
.all-dog-breed-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Fixed 4 columns */
    gap: 40px 30px;
    padding: 40px 0;
}

.all-dog-breed-load-more-button {
    display: inline-block;
    padding: 10px 20px; /* Adjust padding for better click area */
    text-decoration: none; /* Remove underline */
    background-color: #52734d;
    color: #ffffff;
    border-radius: 5px;
    font-family: "Imprima", serif;
    font-weight: 400;
    font-size: 1.5rem;
    text-align: center;
    margin-top: 20px; /* Space between gallery and button */
}

.all-dog-breed-load-more-button:hover {
    background-color: #415b39; /* Darken background on hover */
}


/* Card Styling */
.all-dog-breed-item {
    text-align: center;
    border-radius: 10px;
    background-color: rgba(252, 252, 252, 0.5);
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center; /* Center all elements horizontally */
    justify-content: space-between; /* Distribute elements vertically */
    height: 100%; /* Consistent height for all cards */
}

/* Image Styling */
.all-dog-breed-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px; /* Spacing between image and breed name */
    border: 3px solid #52734d; /* Adds a border with color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
    display: block;
}

/* Discover Button Styling */
.all-dog-breed-discover-button {
    display: block;
    width: 50%;
    padding: 10px;
    background-color: #52734d;
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
    font-family: "Imprima", serif;
    font-weight: 400;
    font-size: 1rem;
    margin-top: auto; /* Push the button to the bottom */
    text-align: center; /* Center text inside the button */
}

.all-dog-breed-discover-button:hover {
    background-color: #415b39;
}

/* Responsive Adjustments */

@media (max-width: 900px) {
    .all-dog-breed-cards {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
}

@media (max-width: 600px) {
    .all-dog-breed-cards {
        grid-template-columns: 1fr; /* Single column on small screens */
    }
}



/* Mobile-specific tweaks */
@media screen and (max-width: 450px) {
    /* Stack filter and gallery sections */
    .all-dog-breed-container {
        flex-direction: column;
    }

    .all-dog-breed-filter-section,
    .all-dog-breed-gallery-section {
        width: 100%;
        padding: 10px 15px;
        box-sizing: border-box;
    }

    /* Filter checkboxes in one column */
    .filter-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Buttons full-width and spaced */
    .all-dog-breed-clear-button,
    .all-dog-breed-submit-button {
        width: 100%;
        margin-bottom: 10px;
        font-size: 1rem;
    }

    /* Pagination centered and stacked */
    .pagination-controls {
        align-items: center;
        text-align: center;
    }

    .pagination-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .pagination-buttons a {
        width: 100%;
        font-size: 1rem;
    }

    /* Breed card grid to single column */
    .all-dog-breed-cards {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    /* Adjust heading decoration */
    .all-dog-breed-heading {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }

    .all-dog-breed-heading::before,
    .all-dog-breed-heading::after {
        width: 30px;
        height: 4px;
    }

    /* Image scale down */
    .all-dog-breed-image {
        width: 220px;
        height: 180px;
        object-fit: cover;
        border-radius: 10px;
    }

    /* Discover button full width */
    .all-dog-breed-discover-button {
        width: 80%;
        font-size: 1rem;
        margin-top: 0 !important;
    }

    /* Breed card padding tweak */
    .all-dog-breed-item {
        padding: 10px;
        max-width: 300px;
        width: 100%;
        margin: 0 auto;
    }

    /* Breed name */
    .all-dog-breed-name {
        font-size: 1.8rem;
        margin: 5px 0;
    }

    /* Keywords */
    .all-dog-breed-keywords {
        font-size: 1rem;
        margin-bottom: 3px;
        margin-top: 3px;
    }

    /* Description */
    .all-dog-breed-description {
        font-size: 0.9rem;
        margin: 4px 0;
    }
    .all-dog-breed-description,
    .all-dog-breed-keywords,
    .all-dog-breed-name {
        line-height: 1.2;
    }

    /* Filter section */
    .all-dog-breed-filter-columns {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: -25px;
    }

    .all-dog-breed-filter-columns label {
        margin-bottom: 4px;
    }


    .all-dog-breed-filter-group,
    .all-dog-breed-filter-size {
        flex: 1;
        min-width: 150px;
    }




}



/* End of All Dog Breed */


/* Start of Dog Breed Profile */

.back-to-breeds .btn {
    padding: 0.5rem 1rem;
    background-color: #52734d;
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
    font-family: "Imprima", serif;
    font-weight: 400;
    font-size: 1.3rem;
    margin-top: auto; /* Push the button to the bottom */
    text-align: center; /* Center text inside the button */
}
.back-to-breeds .btn:hover {
    background-color: #415b39;
}


/* Container for the main content and ads */
.breed-profile-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Full 12-column grid */
    gap: 20px;
    padding: 20px;
}

.breed-profile-main {
    grid-column: span 9; /* Main content spans 9 columns */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.breed-profile-ads {
    grid-column: span 3; /* Ads span 3 columns */
}

/* Hero and Details Section */
.breed-profile-hero-details {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Nested 12-column grid */
    gap: 20px;
    align-items: start;
}

.breed-profile-hero-left {
    grid-column: span 4; /* Hero section spans 4 columns */
    text-align: center;
}

.breed-profile-hero-image {
    width: 100%; /* Full width of the parent container */
    max-width: 400px; /* Maximum width */
    aspect-ratio: 1 / 1; /* Ensures a square (1:1) aspect ratio */
    object-fit: cover; /* Crop the image to fit the square without distortion */
    border-radius: 10px;
    margin-bottom: 20px;
    border: 10px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.breed-profile-name {
    font-family: "Kavoon", serif;
    font-size: 2.5rem; /* Increase font size */
    color: #3b3b3b;
    background-color: rgba(252, 252, 252, 0.8);
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    margin-top: 20px; /* Add more spacing above */
    margin-bottom: 20px; /* Ensure enough space below */
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-align: center;
    width: auto; /* Adjust width dynamically */
    max-width: 300px; /* Limit max width */
    position: relative; /* Prevent overlapping */
    z-index: 1; /* Ensure it layers properly */
}

.breed-profile-keywords {
    font-style: italic;
    font-family: "Imprima", serif;
    font-size: 2rem;
    color: black;
    margin-top: 10px;
}

.breed-profile-description {
    font-family: "Imprima", serif;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto;
    max-width: 400px;
}

/* Details Section */
.breed-profile-details {
    grid-column: span 8; /* Details section spans 8 columns */
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 0; /* Ensure it stays below name */
}

.breed-profile-title {
    font-family: "Kaushan Script", cursive;
    font-size: 3rem;
    text-align: center;
    color: #3b3b3b;
    margin-bottom: 0;
    margin-top: 0;
    text-shadow: -1px -1px 0 #f5f2f2, 1px -1px 0 #f5f2f2, -1px 1px 0 #f5f2f2, 1px 1px 0 #f5f2f2;
}

.breed-profile-title .breed-name {
    color: #52734d;
    font-weight: bold;
    text-shadow: -1px -1px 0 #f5f2f2, 1px -1px 0 #f5f2f2, -1px 1px 0 #f5f2f2, 1px 1px 0 #f5f2f2;
}

.breed-profile-data-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.breed-profile-column {
    padding: 10px;
    font-family: "Imprima", serif;
    font-size: 1.2rem;
    color: #333;
}

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

.breed-profile-column strong {
    color: #52734d;
}

/* Gallery Section */
.breed-profile-gallery-section {
    grid-column: span 8; /* Gallery spans 8 columns */
    text-align: center;
    margin-top: 10px;
}

.breed-profile-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
}

.breed-profile-carousel-wrapper {
    width: 750px;
    overflow: hidden;
    margin: 0 auto;
}

.breed-profile-carousel-images {
    display: flex;
    transition: transform 0.5s ease;
}

.breed-profile-carousel-image {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #415b39;
    margin: 0 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.breed-profile-carousel-image:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.breed-profile-carousel-button {
    border: none;
    background-color: #416324;
    color: #ffffff;
    font-size: 1.4rem;   /* Safe size for < and > */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;      /* Prevents cropping */
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.breed-profile-carousel-button:hover {
    background-color: #2f4b18;
}


/* Modal Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: 50px auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}

.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}

/* Ads Section */
.breed-profile-ads-right {
    height: 700px;
    width: 90%; /* Responsive width */
    background-color: #e5e5e5;
    color: #333;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    font-size: 1.5rem;
    margin-right: 50px;
}


/* Breed Survey */

.breed-survey {
    font-family: "Imprima", serif;
    font-size: 1.2rem;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin-top: 30px;
    text-align: center;
}

.breed-survey p {
    margin-bottom: 10px;
    color: #333;
}

.breed-survey .btn {
    font-family: "Imprima", serif;
    font-size: 1.1rem;
    padding: 8px 14px;
    border-radius: 6px;
}

.breed-survey .survey-counts {
    font-size: 1rem;
    margin-top: 10px;
    color: #666;
}

#vote-feedback {
    font-family: "Imprima", serif;
    font-size: 1rem;
}


/* Responsive Adjustments */
@media (max-width: 1200px) {
    .breed-profile-container {
        grid-template-columns: 1fr; /* Single-column layout */
        padding: 10px;
    }

    .breed-profile-main {
        grid-column: span 12;
    }

    .breed-profile-ads {
        grid-column: span 12;
        margin-top: 20px;
    }

    .breed-profile-hero-details {
        flex-direction: column; /* Stack hero and details vertically */
        align-items: center; /* Center align elements */
        text-align: center; /* Center text alignment */
    }

    .breed-profile-hero-left {
        width: 100%;
        margin-bottom: 20px;
    }

    .breed-profile-hero-image {
        width: 100%;
        height: auto;
        max-width: 300px; /* Ensure image scales down */
    }

    .breed-profile-name {
        font-size: 2.2rem;
        margin-bottom: 15px; /* Ensure proper spacing */
        text-align: center;
    }

    .breed-profile-keywords {
        font-size: 1.5rem;
    }

    .breed-profile-description {
        font-size: 1rem;
        padding: 0 20px;
    }

    .breed-profile-details {
        width: 100%;
        padding: 10px;
    }

    .breed-profile-title {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .breed-profile-data-columns {
        grid-template-columns: 1fr; /* Single column layout */
    }

    .breed-profile-column {
        margin-bottom: 20px;
    }

    .breed-profile-gallery-section {
        margin-top: 20px;
        width: 100%;
    }

    .breed-profile-carousel-image {
        width: 100px; /* Smaller thumbnails */
        height: 80px;
    }
}

@media (max-width: 768px) {
    .breed-profile-name {
        font-size: 1.8rem;
        margin-bottom: 20px; /* Ensure spacing below breed name */
    }

    .breed-profile-title {
        font-size: 1.8rem;
    }

    .breed-profile-carousel-image {
        width: 80px;
        height: 60px;
    }

    .breed-profile-description {
        font-size: 0.9rem;
        padding: 0 10px;
    }
}

/* Smallest Screens */
@media (max-width: 650px) {
    .breed-profile-container {
        grid-template-columns: 1fr; /* Single-column layout */
        gap: 10px; /* Reduce gap */
    }

    .breed-profile-main {
        grid-column: span 12;
    }

    .breed-profile-ads {
        grid-column: span 12;
        order: 3; /* Move ads to the bottom */
        text-align: center;
    }

    .breed-profile-hero-details {
        display: flex;
        flex-direction: column; /* Stack image and details vertically */
        align-items: center; /* Center-align content */
        gap: 15px;
    }

    .breed-profile-hero-image {
        width: 90%; /* Adjust image size for small screens */
        height: auto;
        max-width: 300px; /* Limit max size */
    }

    .breed-profile-name {
        font-size: 2.2rem; /* Adjust font size */
        margin-bottom: 15px; /* Add spacing below name */
        line-height: 1.2; /* Adjust for two-line names */
        text-align: center;
    }

    .breed-profile-keywords {
        font-size: 1.2rem;
        margin-top: 5px;
    }

    .breed-profile-details {
        max-width: 100%; /* Take full width */
        padding: 15px; /* Reduce padding */
        box-shadow: none; /* Simplify shadows */
    }

    .breed-profile-title {
        font-size: 1.8rem; /* Smaller title font size */
        text-align: center;
    }

    .breed-profile-data-columns {
        grid-template-columns: 1fr; /* Single column for data */
        gap: 10px;
    }

    .breed-profile-column {
        padding: 10px; /* Reduce padding */
        text-align: left; /* Keep text alignment */
    }

    .breed-profile-gallery-section {
        grid-column: span 12;
        text-align: center;
    }

    .breed-profile-carousel-image {
        width: 120px;
        height: 100px;
        margin: 5px auto; /* Center images */
    }

    .breed-profile-carousel-button {
        font-size: 1.5rem; /* Smaller arrow buttons */
        padding: 3px 5px;
    }

    .modal-content {
        max-width: 90%; /* Ensure modal images fit smaller screens */
    }
}


/* Mobile-specific tweaks */
@media screen and (max-width: 450px) {
    /* 1. Make the hero image just a little smaller */
    .breed-profile-hero-image {
        width: 85%;
        max-width: 250px;
        height: auto;
        margin: 0 auto 15px auto;
    }

    /* 2. Force breed-profile-column to single column (even if it defaulted earlier) */
    .breed-profile-data-columns {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: -25px !important;
    }

    .breed-profile-column {
        padding: 10px;
        font-size: 1rem;
        margin-top: -25px;
    }

    /* 3. Tighter spacing for carousel images and consistent margin */
    .breed-profile-carousel-images {
        gap: 3px;
        justify-content: center;
    }

    .breed-profile-carousel-image {
        width: 100px;
        height: 80px;
        margin: 0 4px; /* smaller gap between images */
        border-radius: 8px;
    }

    /* Optional: Center the "Back to All Breeds" button */
    .back-to-breeds {
        text-align: center;
        margin-top: 20px;
    }

    .breed-profile-description {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .breed-profile-keywords {
        font-size: 1rem;
        margin-top: 5px;
    }

    .breed-profile-title {
        margin-bottom: 0;
    }

    .breed-profile-column p {
        margin: 6px 0; /* top and bottom margin equal and small */
        line-height: 1.4;
    }

    .breed-profile-ads-right {
        width: 95%;
        height: 300px; /* Or even smaller, depending on your needs */
        font-size: 1.2rem;
        margin: 10px auto;
        padding: 10px;
    }


}



/* End of Dog Breed Profile */


/* Start of Legal Page */

.legal-text {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: "Roboto", serif;
    line-height: 1.6;
    font-size: 16px;
    color: #222;
}
.legal-text a {
    color: #005c2e; /* or any green/neutral tone you prefer */
    text-decoration: underline;
}

.legal-text a:hover {
    color: #003b1e;
}
.legal-text h2 {
    margin-top: 1.5rem;
}


/* End of Legal Page */

/* Start of About Page */

.about-page-wrapper {
    max-width: 1400px; /* Set the maximum width for the layout */
    margin: 0 auto; /* Center the layout horizontally */
    padding: 0 20px; /* Add padding for smaller screens */
}

.about-page {
    font-family: "Roboto", serif;
    font-weight: 400;
    color: #2F3D27; /* Text color */
    padding: 40px 20px;
    background: none; /* Remove any default background */
}

.about-page .about-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    background: none; /* Remove background from the header container */
}

.about-page .about-header h1 {
    font-family: "Kaushan Script", 'Arial', sans-serif;
    font-size: 4rem; /* Large, prominent header */
    font-weight: 400;
    color: #3b3b3b;
    margin: 0;
    background: none; /* Remove any background */
    position: relative;
}

.about-page .about-header h1::before,
.about-page .about-header h1::after {
    content: "";
    display: inline-block;
    width: 250px; /* Decorative line length */
    height: 8px; /* Thickness of decorative lines */
    background-color: #3b3b3b; /* Line color matching text */
    margin: 0 10px; /* Space between the line and text */
    vertical-align: middle;
    border-radius: 2px; /* Rounded edges */
}

.about-page .author-card {
    grid-column: 1 / 2; /* Spans the first column */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the content horizontally */
    text-align: center; /* Center text */
    background-color: rgba(255, 255, 255, 0.8); /* White with transparency */
    border: 3px solid #B8D8B8; /* Light green border */
    border-radius: 10px; /* Rounded corners */
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 250px;
}

.about-page .author-card .author-name {
    font-family: Jaini, serif;
    font-size: 2rem;
    color: rgb(55, 90, 60);
    margin-bottom: 15px;
}

.about-page .about-content {
    display: grid;
    grid-template-columns: 1fr 4fr 2fr; /* Adjusted columns for combined Mission/Core Values */
    gap: 30px; /* Space between columns */
    justify-content: center; /* Center align the grid */
    align-items: start; /* Align items to the top */
}

.about-page .mission-core-values {
    grid-column: 2 / 3; /* Spans the second column */
    grid-row: 1 / span 2; /* Combines Mission and Core Values in one container */
    background-color: rgba(255, 255, 255, 0.8);
    border: 3px solid #B8D8B8;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.about-page .mission-core-values .mission-section,
.about-page .mission-core-values .core-values-section {
    margin-bottom: 20px; /* Space between Mission and Core Values inside the container */
}

.about-page .services-section {
    grid-column: 3 / 4; /* Adjust to fit after Mission/Core Values */
    grid-row: 1 / span 2; /* Span two rows to match the height of Mission/Core Values */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-start;
    align-items: center; /* Center align content */
    background-color: rgba(255, 255, 255, 0.8);
    border: 3px solid #B8D8B8;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    min-height: 995px;
}

.about-page .author-card .author-image {
    width: 150px; /* Smaller image size */
    height: 150px; /* Keep square dimensions */
    object-fit: cover; /* Ensure proportional scaling */
    border-radius: 50%; /* Circular image */
    margin-bottom: 15px;
    border: 4px solid #FFFFFF; /* White border around the image */
}

.about-page .mission-core-values img,
.about-page .services-section img {
    max-width: 100%; /* Ensure images do not exceed the container width */
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: 8px; /* Rounded corners for images */
    object-fit: cover; /* Ensure proportional scaling */
    margin: 0 auto 15px auto; /* Center image horizontally */
    border: 4px solid #FFFFFF; /* White border */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for the image */
    display: block;
}

.about-page .mission-core-values h2,
.about-page .services-section h2 {
    font-family: "Kaushan Script", 'Arial', sans-serif;
    font-size: 2.5rem;
    color: #3b3b3b;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 0;
    text-shadow: -1px -1px 0 #f5f5f5, 1px -1px 0 #f5f5f5, -1px 1px 0 #f5f5f5, 1px 1px 0 #f5f5f5; /* Border effect */

}

.about-page .author-card h2 {
    font-family: "Kaushan Script", Arial, sans-serif;
    font-size: 1.5rem;
    color: rgb(59, 59, 59);
    margin-bottom: 10px;
}

.about-page .author-discover-button {
    width: 73%; /* Smaller width for Discover button */
    padding: 10px;
    background-color: #52734d; /* Button background */
    color: #ffffff; /* Button text color */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline from links */
    font-family: "Imprima", serif; /* Font styling */
    font-weight: 400; /* Regular font weight */
    font-size: 1rem; /* Font size */
    border: none; /* Remove border */
    text-align: center; /* Center text inside button */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.about-page .author-discover-button:hover {
    background-color: #415b39; /* Darker green on hover */
}

.about-page .services-explore-button {
    width: 90%; /* Larger width for Services button */
    padding: 12px; /* Slightly larger padding for emphasis */
    background-color: #52734d; /* Button background */
    color: #ffffff; /* Button text color */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline from links */
    font-family: "Imprima", serif; /* Font styling */
    font-weight: 400; /* Regular font weight */
    font-size: 1.2rem; /* Slightly larger font size for emphasis */
    border: none; /* Remove border */
    text-align: center; /* Center text inside button */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    margin-top: 20px; /* Add spacing above the button */
    margin-bottom: 20px; /* Add spacing above the button */
}

.about-page p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
    color: #4E774A;
}

.about-page p strong {
    color: #2F3D27;
}

@media (max-width: 900px) {
    .about-page .about-content {
        grid-template-columns: 1fr; /* Stack all sections in a single column */
        gap: 20px;
    }

    .about-page .mission-core-values,
    .about-page .services-section {
        grid-column: auto;
        grid-row: auto; /* Reset for responsiveness */
    }
}

/* Mobile-specific tweaks */
@media screen and (max-width: 450px) {
    .about-page-wrapper {
        padding: 0 10px;
    }

    .about-page {
        padding: 20px 10px;
    }

    .about-page .about-header h1 {
        font-size: 2.0rem;
    }

    .about-page .about-header h1::before,
    .about-page .about-header h1::after {
        width: 30px;
        height: 5px;
    }

    .about-page .author-card {
        padding: 15px;
        width: 100%; /* Make it stretch to container width */
        box-sizing: border-box; /* Prevent padding from increasing total width */
    }

    .about-page .author-card .author-image {
        width: 120px;
        height: 120px;
        margin-bottom: 10px;
    }

    .about-page .author-card h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .about-page .author-card .author-name {
        font-size: 1.8rem;
    }

    .about-page .author-discover-button {
        width: 100%;
        font-size: 1rem;
    }

    .about-page .mission-core-values,
    .about-page .services-section {
        padding: 15px;
    }

    .about-page .mission-core-values h2,
    .about-page .services-section h2 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .about-page p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .about-page ul li {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 8px;
    }

    .about-page .services-explore-button {
        width: 100%;
        font-size: 1rem;
        padding: 10px;
    }

    .about-page .mission-core-values img,
    .about-page .services-section img {
        max-height: 150px;
        margin: 10px auto;
    }
}


/* End of About Page */





/* Start of Contact Page */


/* Contact Page Styles */
.contact-page-wrapper {
    max-width: 1400px; /* Set the maximum width for the layout */
    margin: 0 auto; /* Center the layout horizontally */
    padding: 0 20px; /* Add padding for smaller screens */
}


.contact-page {
    font-family: "Roboto", serif;
    color: #2F3D27;
    padding: 40px 20px;
    background: none; /* No default background */
}


.contact-page .contact-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    background: none; /* Remove background from the header container */
}


.contact-page .contact-header h1 {
    font-family: "Kaushan Script", 'Arial', sans-serif;
    font-size: 4rem; /* Large, prominent header */
    font-weight: 400;
    color: #3b3b3b;
    margin: 0;
    background: none; /* Remove any background */
    position: relative;
}


.contact-page .contact-header h1::before,
.contact-page .contact-header h1::after {
    content: "";
    display: inline-block;
    width: 250px; /* Decorative line length */
    height: 8px; /* Thickness of decorative lines */
    background-color: #3b3b3b; /* Line color matching text */
    margin: 0 10px; /* Space between the line and text */
    vertical-align: middle;
    border-radius: 2px; /* Rounded edges */
}


.contact-page .contact-content {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr; /* Three columns: Author, Form, FAQs */
    gap: 30px; /* Add spacing between sections */
    align-items: start; /* Align items to the top */
}


.contact-page .author-card {
    grid-column: 1 / 2; /* Spans the first column */
    background-color: rgba(255, 255, 255, 0.8);
    border: 3px solid #B8D8B8;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    width: 250px;
    margin: 0 auto;
}


.contact-page .author-card .author-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #FFFFFF;
    margin-bottom: 15px;
}


.contact-page .author-card h2 {
    font-family: "Kaushan Script", 'Arial', sans-serif;
    font-size: 1.5rem;
    color: #3b3b3b;
    margin-bottom: 10px;
}


.contact-page .author-card .author-name {
    font-family: "Jaini", serif;
    font-size: 2rem;
    color: #375A3C;
    margin-bottom: 15px;
}


.contact-page .author-discover-button {
    display: inline-block;
    width: 65%;
    background-color: #52734d;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-family: "Imprima", serif;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.contact-page .author-discover-button:hover {
    background-color: #415b39;
}


.contact-page .contact-form-container {
    grid-column: 2 / 3; /* Spans the middle column */
    background-color: rgba(255, 255, 255, 0.8);
    border: 3px solid #B8D8B8;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}


.contact-page .contact-form-container h2 {
    font-family: "Kaushan Script", 'Arial', sans-serif;
    font-size: 2.5rem;
    color: #3b3b3b;
    margin-bottom: 20px;
    text-align: center;
}


.contact-page .contact-form {
    margin-bottom: 20px;
}


.contact-page .form-group {
    margin-bottom: 20px;
}


.contact-page .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 1rem;
}


.contact-page .form-group input,
.contact-page .form-group textarea {
    width: 98%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #B8D8B8;
    border-radius: 5px;
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1);
}


.contact-page .form-group input:focus,
.contact-page .form-group textarea:focus {
    border-color: #52734d;
    outline: none;
}


.contact-page .contact-submit-button {
    background-color: #52734d;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.contact-page .contact-submit-button:hover {
    background-color: #415b39;
}


.contact-page .faqs-section {
    grid-column: 3 / 4; /* Spans the last column */
    background-color: rgba(255, 255, 255, 0.8);
    border: 3px solid #B8D8B8;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}


.contact-page .faqs-section h2 {
    font-family: "Kaushan Script", 'Arial', sans-serif;
    font-size: 2.5rem;
    color: #3b3b3b;
    margin-bottom: 20px;
    text-align: center;
    margin-top:0;
}


.contact-page .faq h3 {
    font-size: 1.2rem;
    color: #2F3D27;
    margin-bottom: 10px;
}


.contact-page .faq p {
    font-size: 1rem;
    line-height: 1.8;
    color: #4E774A;
    margin-bottom: 20px;
    word-wrap: break-word; /* Ensures long text wraps properly */
}


@media (max-width: 900px) {
    .contact-page .contact-content {
        grid-template-columns: 1fr; /* Stack all sections vertically */
        gap: 20px;
    }


    .contact-page .author-card,
    .contact-page .contact-form-container,
    .contact-page .faqs-section {
        grid-column: auto; /* Reset column spans */
    }


    /* Mobile-specific tweaks for Contact Page */
    @media screen and (max-width: 450px) {
        .contact-page {
            padding: 20px 10px;
        }


        .contact-page .contact-header h1 {
            font-size: 1.5rem;
            line-height: 1.2;
        }


        .contact-page .contact-header h1::before,
        .contact-page .contact-header h1::after {
            width: 30px;
            height: 4px;
            margin: 0 5px;
        }


        .contact-page .author-card {
            padding: 15px;
            width: 100%;              /* ✅ Makes the card fill the container */
            box-sizing: border-box;   /* ✅ Prevents padding from pushing total width over 100% */
        }


        .contact-page .author-card .author-image {
            width: 110px;
            height: 110px;
            margin-bottom: 0;
        }


        .contact-page .author-card h2 {
            font-size: 1.4rem;
            margin-bottom: 0;
        }


        .contact-page .author-card .author-name {
            font-size: 2.0rem;
            margin-bottom: 20px;
        }


        .author-discover-button {
            display: block;
            width: 100%;
            font-size: 1rem;
            padding: 10px 20px;
            box-sizing: border-box;
        }


        .contact-page .contact-form-container {
            padding: 15px;
        }


        .contact-page .contact-form-container h2 {
            font-size: 1.8rem;
            margin-bottom: 15px;
        }


        .contact-page .form-group label {
            font-size: 0.95rem;
            margin-bottom: 6px;
        }


        .contact-page .form-group input,
        .contact-page .form-group textarea {
            width: 100%;
            font-size: 0.95rem;
            padding: 8px;
        }


        .contact-page .contact-submit-button {
            width: 100%;
            font-size: 1rem;
            padding: 10px;
            margin-top: 10px;
        }


        .contact-page .contact-message p {
            font-size: 0.95rem;
            line-height: 1.6;
        }


        .contact-page .contact-message .signature {
            font-style: italic;
            margin-top: 10px;
            font-size: 0.9rem;
            text-align: right;
        }


        .contact-page .faqs-section {
            padding: 15px;
        }


        .contact-page .faqs-section h2 {
            font-size: 1.8rem;
        }


        .contact-page .faq h3 {
            font-size: 1rem;
            margin-bottom: 6px;
        }


        .contact-page .faq p {
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 15px;
        }


        .contact-page .form-group input,
        .contact-page .form-group textarea {
            width: 100%;
            box-sizing: border-box;
            padding: 8px;
        }


        .contact-page .contact-form-container {
            padding: 15px;
            box-sizing: border-box;
        }




    }




}


/* End of Contact Page */








.flash.notice {
    color: #3c763d;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}


.flash.alert {
    color: #a94442;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}


/* Start of Author Dog Page */
.author-dog-page-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #7F9F64;
}


.author-dog-page {
    max-width: 1200px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.5);
}


.author-dog-header {
    background: none; /* Ensure no background is applied to the header container */
    padding: 0; /* Reset padding if any */
    margin: 0 auto; /* Center the header */
}


.author-dog-header h1 {
    font-family: "Kaushan Script", 'Arial', sans-serif;
    font-size: 4rem; /* Large, prominent header */
    font-weight: 400;
    color: #3b3b3b;
    margin: 0;
    background: none; /* Remove any background from h1 */
    position: relative;
    text-align: center;
}


.author-dog-header h1::before,
.author-dog-header h1::after {
    content: "";
    display: inline-block;
    width: 250px; /* Decorative line length */
    height: 8px; /* Thickness of decorative lines */
    background-color: #3b3b3b; /* Line color matching text */
    margin: 0 10px; /* Space between the line and text */
    vertical-align: middle;
    border-radius: 2px; /* Rounded edges */
}


.author-dog-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}


.author-dog-main {
    display: flex;
    flex-direction: column;
}


.author-dog-layout {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px;
}


.author-dog-left-column {
    flex: 1;
    min-width: 300px;
    text-align: center;
}


.author-dog-hero-image {
    width: 100%; /* Full width of the parent container */
    max-width: 400px; /* Maximum width */
    object-fit: cover; /* Crop the image to fit the square without distortion */
    border-radius: 10px;
    margin-bottom:0;
    border: 10px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.author-dog-name {
    font-family: "Kavoon", serif;
    font-size: 2.8rem; /* Increase font size */
    color: #3b3b3b;
    background-color: rgba(252, 252, 252, 0.8);
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    margin-top: 20px; /* Add more spacing above */
    margin-bottom: 20px; /* Ensure enough space below */
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-align: center;
    width: auto; /* Adjust width dynamically */
    max-width: 300px; /* Limit max width */
    position: relative; /* Prevent overlapping */
    z-index: 1; /* Ensure it layers properly */
}


.author-dog-keywords {
    font-style: italic;
    font-family: "Imprima", serif;
    font-size: 2rem;
    color: black;
    margin-top: 10px;
}


.author-dog-right-column {
    flex: 2;
    min-width: 300px;
}


.author-dog-description-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.author-dog-description {
    font-family: "Imprima", serif;
    font-size: 1.5rem;
    color: black;
}


.author-dog-details {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.author-dog-title {
    font-family: "Kaushan Script", cursive;
    font-size: 3rem;
    text-align: center;
    color: #3b3b3b;
    margin-bottom: 0;
    margin-top: 0;
    text-shadow: -1px -1px 0 #f5f2f2, 1px -1px 0 #f5f2f2, -1px 1px 0 #f5f2f2, 1px 1px 0 #f5f2f2;
}


.author-dog-data-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-family: "Imprima", serif;
    font-size: 1.2rem;
    color: #333;
}


.author-dog-column {
    flex: 1;
    min-width: 250px;
}


.author-dog-gallery-section {
    margin-top: 30px;
}


.author-dog-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
}


.author-dog-carousel-wrapper {
    width: 750px;
    overflow: hidden;
    margin: 0 auto;
}


.author-dog-carousel-images {
    display: flex;
    transition: transform 0.5s ease;
}


.author-dog-carousel-image {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #415b39;
    margin: 0 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.author-dog-carousel-image:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


.author-dog-carousel-button {
    background-color: #52734d;
    color: white;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 50%;
    padding: 5px 10px;
    z-index: 10;
}


.author-dog-carousel-button:hover {
    background-color: #415b39;
}


/* Mobile-specific tweaks for Author Dog Page */
@media screen and (max-width: 450px) {
    .author-dog-header h1 {
        font-size: 1.3rem;
        line-height: 1.2;
    }


    .author-dog-header h1::before,
    .author-dog-header h1::after {
        width: 30px;
        height: 4px;
        margin: 0 5px;
    }


    .author-dog-layout {
        flex-direction: column;
        gap: 20px;
    }


    .author-dog-left-column,
    .author-dog-right-column {
        min-width: 100%;
        text-align: center;
    }


    .author-dog-hero-image {
        max-width: 280px;
        width: 80%;
        margin: 0 auto;
    }


    .author-dog-title {
        font-size: 2rem;
        margin-bottom: 10px;
    }


    .author-dog-description {
        font-size: 0.95rem;
        padding: 0 10px;
    }


    .author-dog-data-columns {
        flex-direction: column;
        font-size: 1rem;
        padding: 0 10px;
        text-align: left;
        line-height: 1;
    }


    .author-dog-column {
        width: 100%;
        font-size: 0.95rem;
    }


    .author-dog-carousel-wrapper {
        width: 100%;
        padding: 0 10px;
    }


    .author-dog-carousel-image {
        width: 100px;
        height: 80px;
        margin: 0 4px;
    }


    .author-dog-carousel-button {
        font-size: 1.5rem;
        padding: 3px 5px;
    }


    .modal-content {
        max-width: 90%;
    }
}




/* End of Author Dog Page */








/* ----------------------------------------
   Scoped: Search Results Page Styles Only
----------------------------------------- */

/* Container layout for search results page */
.search-results-container {
    display: flex;
    gap: 30px;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Gallery Section */
.search-results-gallery {
    width: 75%;
}

.search-results-heading {
    font-family: "Kaushan Script", Arial, sans-serif;
    font-size: 3rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 1rem;
    border: none;
    position: relative;
}

.search-results-heading::before,
.search-results-heading::after {
    content: none;
}

/* Breed cards */
#search-dog-breed-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 10px;
}

/* No results */
.no-results {
    font-size: 0.95rem;
    text-align: center;
    padding: 1rem 0.5rem;
}

.no-results .btn {
    margin-top: 10px;
    font-size: 0.9rem;
}

/* Ads sidebar */
.search-results-ads {
    width: 25%;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    height: 700px;
    overflow-y: auto;
}

.search-results-ads::-webkit-scrollbar {
    width: 8px;
}

.search-results-ads::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 5px;
}

.search-results-ads::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

.ads-content h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #333;
}

.ads-content p {
    font-size: 0.9rem;
    color: #555;
}


/* ----------------------------------------
   Mobile: Search Results Page
----------------------------------------- */
@media screen and (max-width: 450px) {
    .search-results-container {
        flex-direction: column;
        padding: 10px 15px;
    }

    .search-results-gallery,
    .search-results-ads {
        width: 100%;
    }

    .search-results-heading {
        font-family: "Kaushan Script", Arial, sans-serif;
        font-size: 1.2rem;
        text-align: center;
        margin: 20px auto 10px;
        line-height: 1.4;
    }

    .search-results-heading::before,
    .search-results-heading::after {
        display: none;
    }

    .search-results-ads {
        display: none; /* Hide ads on mobile */
    }
}



/* Start of Dog Resource Page */

/* for dropdown design*/

nav ul li ul.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #a2c29e; /* 🌿 Light green background */
    padding: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    list-style: none;
    z-index: 10;
    min-width: 180px;
}

nav ul li:hover ul.dropdown-menu {
    display: block;
}

nav ul li ul.dropdown-menu li {
    padding: 0.25rem 0;
}

nav ul li ul.dropdown-menu a {
    color: #222; /* 🖤 Sub-link text color */
    text-decoration: none;
    display: block;
    padding: 4px 10px;
}

nav ul li ul.dropdown-menu a:hover {
    background-color: #7e9f78; /* Darker green on hover */
    color: #fff;
    border-radius: 3px;
}



/* Start of Dog Resource Page */

/* for dropdown design*/

nav ul li.has-dropdown {
    position: relative;
}

nav ul li ul.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #a2c29e;
    padding: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    list-style: none;
    z-index: 9999;
    min-width: 180px;
}

nav ul li:hover > ul.dropdown-menu {
    display: block;
}


/* for the main page */

.dog-health-header {
    background: none;
    padding: 0;
    margin: 0 auto;
}

.dog-health-header h1 {
    font-family: "Kaushan Script", 'Arial', sans-serif;
    font-size: 4rem;
    font-weight: 400;
    color: #3b3b3b;
    margin: 2rem 0 0 0; /* top, right, bottom, left */
    background: none;
    position: relative;
    text-align: center;
}


.section-subheading {
    text-align: center;
    font-size: 2rem;
    color: #3b3b3b;
    font-weight: 600;
    font-family: "Imprima", serif;
    margin-top: 2rem;
    margin-bottom: 1rem;
}


/* for the list of links */


.health-links-list {
    list-style: none;
    padding: 0;
    margin: 2rem auto;
    max-width: 600px;
    text-align: left;
}

.health-links-list li::before {
    content: "›";
    color: #3b3b3b;
    font-size: 1.2rem;
    padding-right: 0.5rem;
}

.health-links-list {
    list-style: none;
    padding: 0;
    margin: 2rem auto;
    max-width: 600px;
    text-align: left;
    line-height: 1.2;
}


.health-links-list li {
    margin: 0.75rem 0;
}

.health-links-list a {
    font-family: "Imprima", serif;
    color: #2d2d2d;
    font-size: 1.1rem;
    text-decoration: none;
}

.health-links-list a:hover {
    color: #557b4c;
    text-decoration: underline;
}


.health-links-wrapper {
    max-width: 600px;
    margin: 2rem auto;
    text-align: left;
    padding: 1rem;
    background-color: #dfe9d5;
    border-radius: 6px;
}

/* for articles */

.dog-care-article {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #e7f0db; /* light green to match theme */
    border-radius: 8px;
    font-family: "Imprima", serif;
    font-size: 1.1rem;
    color: #2d2d2d;
    line-height: 1.7;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.dog-care-article h1 {
    font-family: "Imprima", serif;
    text-align: center;
    font-size: 3rem;
    color: #3b3b3b;
    margin-bottom: 1.5rem;
}

.dog-care-article h2 {
    font-family: "Imprima", serif;
    font-size: 1.75rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: #3b3b3b;
}

.dog-care-article ul {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}

.dog-care-article ul li {
    margin-bottom: 0.5rem;
}

.dog-care-article a {
    color: #5a3e8b; /* subtle purple for links, matches your footer theme */
    text-decoration: none;
    font-weight: 500;
}

.dog-care-article a:hover {
    text-decoration: underline;
}


.dog-health-title {
    font-family: "Kavoon", serif;
    text-align: center;
    font-size: 3rem;
    color: #3b3b3b;
    margin-bottom: 1rem;
}

/* for Disclaimer */

.dog-resource-disclaimer {
    font-size: 0.95rem;
    color: #444;
    margin-top: 2rem;
    text-align: center;
    font-family: "Imprima", serif;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}



/* End of Dog Resource Page */


/* ========== Dog Breed Comparison Page ========== */

.compare-page-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: "Roboto", serif;
    color: #2F3D27;
}

.compare-page-wrapper h1 {
    text-align: center;
    font-family: "Kaushan Script", Arial, sans-serif;
    font-size: 3rem;
    margin-bottom: 30px;
    color: #3b3b3b;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid #B8D8B8;
}

.compare-table th,
.compare-table td {
    border: 1px solid #B8D8B8;
    padding: 15px;
    vertical-align: top;
    text-align: left;
}

.compare-table th {
    background-color: #dce9dc;
    font-weight: bold;
    text-align: center;
}

.compare-table td img.comparison-image {
    max-width: 100%;
    max-height: 160px;
    border-radius: 10px;
    border: 3px solid #B8D8B8;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.comparison-share {
    margin-top: 30px;
    text-align: center;
    font-family: "Imprima", sans-serif;
}

.comparison-share a {
    background-color: #52734d;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 0 10px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.comparison-share a:hover {
    background-color: #415b39;
}

@media screen and (max-width: 768px) {
    .compare-page-wrapper h1 {
        font-size: 2rem;
    }

    .compare-table td,
    .compare-table th {
        font-size: 0.9rem;
        padding: 8px;
    }

    .compare-table td img.comparison-image {
        max-height: 100px;
    }
}

.compare-table th, .compare-table td {
    vertical-align: middle;
    text-align: center;
}

.compare-table td:first-child,
.compare-table th:first-child {
    text-align: left;
    font-weight: 600;
    background-color: #f9f9f9;
    width: 180px;
}

.comparison-image {
    max-height: 120px;
    border-radius: 8px;
}


.breed-select-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.breed-select-box {
    flex: 1 1 200px;
    min-width: 200px;
    max-width: 300px;
}

/* === Compare Breeds Form Styling === */

.breed-select-box select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f0f7f0;
    border: 2px solid #a2c29e;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 1rem;
    color: #2F3D27;
    width: 100%;
    transition: border-color 0.3s ease;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

.breed-select-box select:focus {
    border-color: #52734d;
    outline: none;
    box-shadow: 0 0 5px rgba(82, 115, 77, 0.3);
}

/* === Submit Button Styling === */

.compare-page-wrapper .btn-primary {
    background-color: #52734d;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.compare-page-wrapper .btn-primary:hover {
    background-color: #3e5a3b;
}

/* Optional: Keep form centered on mobile */
@media screen and (max-width: 768px) {
    .breed-select-row {
        flex-direction: column;
        align-items: center;
    }

    .breed-select-box {
        width: 100%;
        max-width: 100%;
    }
}

.facebook-share-button {
    display: inline-flex;
    align-items: center;
    background-color: #1877f2;
    color: white;
    padding: 10px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    font-family: "Imprima", sans-serif;
    transition: background-color 0.3s ease;
}

.facebook-share-button:hover {
    background-color: #145dbf;
}


/* ========== End of Dog Breed Comparison Page ========== */


/* Layout for hero image + info box */
.breed-profile-hero-details {
    display: flex;
    align-items: flex-start;
    gap: 10px;              /* space between hero and info card */
}

/* Extra breathing room on the right of the big image */
.breed-profile-hero-left {
    margin-right: 10px;
}

/* Make sure the info panel can use remaining space */
.breed-profile-details {
    flex: 1;

}




/* -------------------------------------------
   GALLERY SPACING
------------------------------------------- */
.breed-profile-gallery-section {
    margin-top: 5px;
}

/* -------------------------------------------
   CAROUSEL LAYOUT (Main container)
------------------------------------------- */
.breed-profile-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;                    /* space between arrows and image */
}

/* -------------------------------------------
   VISIBLE WINDOW FOR SLIDES
------------------------------------------- */
.breed-profile-carousel-wrapper {
    overflow: hidden;
    max-width: 580px;             /* adjust width as needed */
    border-radius: 14px;
}

/* -------------------------------------------
   SLIDES CONTAINER (moves left/right)
------------------------------------------- */
.breed-profile-carousel-images {
    display: flex;
    width: 100%;
    transition: transform 0.35s ease-in-out;
}

/* -------------------------------------------
   INDIVIDUAL SLIDE IMAGE
------------------------------------------- */
.breed-profile-carousel-image {
    flex: 0 0 100%;               /* each image takes full carousel width */
    width: 100%;
    height: 320px;                /* consistent height across all photos */
    object-fit: contain;          /* show full dog (no cropping!) */
    background-color: #cbd9b6;    /* soft green behind letterboxing */
    display: block;
}

/* -------------------------------------------
   ARROW BUTTONS
------------------------------------------- */
.breed-profile-carousel-button {
    border: none;
    background-color: #416324;
    color: #ffffff;
    font-size: 1.6rem;            /* clean and readable arrow size */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 1;               /* keeps < and > centered */
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.breed-profile-carousel-button:hover {
    background-color: #2f4b18;
}

.breed-profile-carousel-button:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* -------------------------------------------
   DOT INDICATORS
------------------------------------------- */
.carousel-dots {
    text-align: center;
    margin-top: 12px;
}

.carousel-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #b5c5a2;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.carousel-dots .dot.active {
    background-color: #416324;
}

/* Remove image borders just in case */
.breed-profile-carousel-image {
    border: none !important;
}


/* Compare table column header with thumbnail */
.compare-breed-col-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}

.compare-breed-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.compare-breed-col-name {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Optional: on very small screens, shrink the thumbnail slightly */
@media (max-width: 600px) {
    .compare-breed-thumb {
        width: 64px;
        height: 64px;
    }
}


/* Add spacing under Breed labels */
.compare-page-wrapper .compare-label {
    display: block;
    margin-bottom: 6px; /* adjust as needed, 6–10px works well */
    font-weight: 600;
    font-size: 0.95rem;
}

/* Add spacing between the label/select block and the next column */
.breed-select-box {
    margin-bottom: 15px; /* vertical spacing for mobile */
}


#compare-helper-text {
    font-size: 0.85rem;
    color: #4f4f4f;
    opacity: 0.8;
    margin-top: 6px;
}


.search-button {
    display: inline-block;
    padding: 8px 14px;
    background: #f6f104;
    color: #000000;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

.search-button:hover {
    background: #f6f104;
}



/* ============================= */
/* Search Page Styles */
/* ============================= */

.search-page-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.search-page {
    font-family: "Roboto", serif;
    color: #2F3D27;
    padding: 40px 20px;
    background: none;
}

/* Header */
.search-page .search-header {
    text-align: center;
    margin-bottom: 40px;
}

.search-page .search-header h1 {
    font-family: "Kaushan Script", 'Arial', sans-serif;
    font-size: 4rem;
    font-weight: 400;
    color: #3b3b3b;
    margin: 0;
    position: relative;
}

.search-page .search-header h1::before,
.search-page .search-header h1::after {
    content: "";
    display: inline-block;
    width: 250px;
    height: 8px;
    background-color: #3b3b3b;
    margin: 0 10px;
    vertical-align: middle;
    border-radius: 2px;
}

.search-page .search-header p {
    font-size: 1.1rem;
    color: #4E774A;
    margin-top: 20px;
}

/* Search Input */
.search-input-container {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.search-input {
    width: 60%;
    max-width: 600px;
    padding: 14px 18px;
    font-size: 1.1rem;
    border: 2px solid #B8D8B8;
    border-radius: 8px;
    font-family: "Imprima", serif;
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1);
}

.search-input:focus {
    outline: none;
    border-color: #52734d;
}

/* Results */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Individual Result Card */
.search-result-item {
    background-color: rgba(255, 255, 255, 0.9);
    border: 3px solid #B8D8B8;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-result-item:hover {
    transform: translateY(-3px);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
}

.search-result-item h3 {
    font-family: "Jaini", serif;
    font-size: 1.8rem;
    color: #375A3C;
    margin-top: 0;
    margin-bottom: 10px;
}

.search-result-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: #4E774A;
}

.search-result-item a {
    text-decoration: none;
    color: inherit;
}

/* No Results */
.no-results {
    text-align: center;
    font-size: 1.2rem;
    color: #4E774A;
    margin-top: 40px;
    font-family: "Imprima", serif;
}

/* ============================= */
/* Responsive Adjustments */
/* ============================= */

@media (max-width: 900px) {
    .search-input {
        width: 90%;
    }

    .search-page .search-header h1 {
        font-size: 2.2rem;
    }

    .search-page .search-header h1::before,
    .search-page .search-header h1::after {
        width: 60px;
        height: 4px;
    }
}

@media (max-width: 450px) {
    .search-page {
        padding: 20px 10px;
    }

    .search-page .search-header h1 {
        font-size: 1.8rem;
    }

    .search-page .search-header p {
        font-size: 0.95rem;
    }

    .search-input {
        font-size: 1rem;
        padding: 12px;
    }

    .search-result-item h3 {
        font-size: 1.5rem;
    }

    .search-result-item p {
        font-size: 0.95rem;
    }
}

/* ============================= */
/* End of Search Page Styles */
/* ============================= */