body {
    font-family: Arial, sans-serif;
    background-color: #1F3044;
    color: #d3d3d3;
}

.container {
    width: 100%;
    padding: 0px;
}

#layout-table {
    
    border-collapse: collapse;
}

#layout-table td {
    vertical-align: top;
}

#header, #navbar, #footer {
    background-color: #1F3044; /* Your primary color */
    color: white;
}

#left-content, #right-content {
    background-color: #1F3044; /* Your secondary color */
    text-align: center;
    color: #FB9039;
}

#right-content img {
    width: 200px;
    height: 200px;
    box-shadow: #FB9039;
    border: 1px solid #FB9039;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#right-content a, hr {
    border-image: none;
    color: #FB9039;
    text-decoration: none;
    padding: 0px 0px;
    border: 0px solid #FB9039;
    border-radius: 0px;   
}

a,
button {
  color: #FB9039;
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid #FB9039;
  border-radius: 4px;
  transition: background-color 0.2s ease-in-out;
}

a:hover,
button:hover {
  background-color: #FB9039;
  color: #fff;
}

header {
    /* Existing styles */
    position: relative; /* Needed for absolute positioning of the logo */
}

#header-logo {
    position: absolute;
    right: 50px; /* Aligns the logo to the right */
    top: 10%; /* Centers it vertically */
    transform: translateY(-40%); /* Adjust vertical alignment */
    width: 250px;
    height: 200px;
}

.header h1 {
    color: #FB9039;
}

/* Existing CSS for navbar */
.navbar {
    text-align: right; /* Aligns the content of the navbar to the right */
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    display: flex;  /* Align items in a row */
}

.navbar ul li {
    margin-right: 10px;
    position: relative;  /* Required for the pseudo-element to work correctly */
}

.navbar ul li a.active {
    color: #FFFFFF; /* Highlight color */
    font-weight: bold; /* Optional: makes it bold */
}

/* Dropdown Styles */
.navbar .dropdown {
    position: relative; /* For positioning the dropdown content */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9; /* Background of the dropdown */
    min-width: 275px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block; /* Show dropdown content on hover */
}



/* Adding a divider */
.navbar ul li:not(:last-child)::after {
    content: ' | ';  /* This is your divider */
    position: absolute;
    right: -7.5px; 
    color: #FB9039;  /* You can change the color if needed */
}

.navbar ul li a {
    color: #FB9039;
    text-decoration: none;
    
}

/* Rest of your CSS ... */

.intro {
    background-color: #FB9039;
    color: #1F3044;
    padding: 10px;
    text-align: left;
}

.intro h2{
    color: #1F3044;
    padding: 0px;
    text-align: center;
}

.footer {
    background-color: #FB9039;
    color: #1F3044;
    padding: 0px;
    text-align: center;
}

img {
    width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    .navbar ul li {
        display: block;
        margin-bottom: 5px;
    }
}

/* Main page IMage rotation */
.carousel {
    width: 100%;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slides img {
    min-width: 100%;
    transition: opacity 0.5s ease;
}

/*The team page */
.team-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 5px;
}

.team-member {
    flex-basis: 30%; /* Each member takes up 30% of the container width */
    margin: 1.5%; /* Adjust margin for spacing */
    box-shadow: 2px 4px 8px rgba(255,255,255,0.8); /* Optional: for styling */
    text-align: center; /* Center-align the text */
}

.team-member img {
    width: 200px;  /* Set the width to 200px */
    height: 200px; /* Set the height to 200px */
    object-fit: cover; /* Ensures the image covers the area without stretching */
    border-radius: 10px; /* Optional: for rounded corners */
}

.info {
    padding: 0px;
}

.info h3 {
    text-align: center;
}

.info p, .info ul {
    text-align: left;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .team-member {
        flex-basis: 48%; /* Adjust for smaller screens */
    }
}

@media (max-width: 480px) {
    .team-member {
        flex-basis: 100%; /* Stack vertically on very small screens */
    }
}


/* Footer */

.footer {
    background-color: #1F3044; /* Or any other color you prefer */
    color: #FB9039;
    text-align: center;
    padding: 0px;
}

.footer .membership a {
    margin: 0 10px;
    display: inline-block;
    vertical-align: middle;
}

.footer img {
    margin: auto;
}

.contact_us img {
    width: 250px;  /* Set the width to 200px */
    height: 250px; /* Set the height to 200px */
    object-fit: none; /* Ensures the image covers the area without stretching */
    border-radius: 0px; /* Optional: for rounded corners */
    vertical-align: top;
}

/* main section content */

.content {
    width: 90%;
    margin: auto;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.wrap-image_left {
    float: left;
    margin-right: 20px;
    width: 250px;
    height: 250px;
}

.wrap-image_right {
    float: right;
    margin-right: 20px;
    width: 250px;
    height: 250px;
}


/* All pointers page */
.breed {
    background-color: #b4bdef;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.breed img {
    width: 200px;
    height: 200px;
}

.breed h3 {
    color: #FB9039;
}

.breed p, .breed a {
    color: #646C79;
}

.breed a {
    text-decoration: none;
    font-weight: bold;
}


/* Modeling.html */

#modeling img {
    width: 200px;
    height: 200px;
}

/*   fleacare.html */

.ingredient, .step {
    margin-bottom: 15px;
}

.ingredient table {
    border-spacing: 150px;
  }

.ingredient th, td {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 40px;
  }