body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
 color: #322f33;
 background-color: #f9f9f9;
 }

 /* Banner Section */

.page-title {
 text-align: center;
 font-size: 48px !important; 
 color: #322f33;
 text-transform: uppercase;
 font-weight: 900;
 margin-bottom: 10px;
 padding-bottom: 5px;
 display: block;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow */
 border-bottom: 2px solid #99c7c6; /* Teal line */
 position: relative;
line-height: 1.2;
letter-spacing: 2px;
}

.page-title::after {
 content: "";
 display: block;
 width: 100%; 
 height: 2px;
 background: linear-gradient(to right, #b87c9e, #99c7c6);
 margin: 10px auto 0; /* Add spacing above the line */
}
.page-title-background {
background-color: #e7e4de; 
padding: 40px 40px; 
border-radius: 8px;
}

.banner {
 text-align: center;
 margin: 20px auto; /* Center the banner horizontally */
 background-color: #e7e4de; 
 padding: 20px;
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.banner img {
 width: 100%; /* Ensure the image spans the container */
 max-width: 1100px; /* Optional: Limit the image's width */
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 margin: 0 auto; /* Center the image */
 display: block;
}




 /* Benefits Section */

/* Sub-Headers */
.section-header {
 font-size: 28px;
 font-weight: 700;
 color: #322f33;
 margin-bottom: 15px;
 text-align: center;
line-height: 1.3;
}

/* Section Divider */
.section-divider {
 width: 80%;
 max-width: 800px;
 margin: 30px auto;
 border-top: 2px solid #e7e4de; /* Light tan */
 border-radius: 1px;
 height: 2px;
}

 .benefits {
 max-width: 1200px;
 margin: 40px auto;
 padding: 20px;
 }

 .benefits h2 {
 text-align: center;
 font-size: 32px;
 margin-bottom: 20px;
color: #322f33;
 }

 .benefits-list {
 list-style: none;
 padding: 0;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 max-width: 800px;
 }

 .benefits-item {
 background-color: #e7e4de;
 border-radius: 8px;
 padding: 10px 15px;
 margin: 10px;
 display: flex;
 align-items: center;
 font-size: 18px;
 color: #322f33;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 width: calc(50% - 20px); /* Two columns */
 }

 .benefits-item::before {
 content: "✔";
 color: #99c7c6; /* Teal checkmark */
 font-weight: bold;
 margin-right: 10px;
 font-size: 20px;
 }


 /* Fit Package Options Section */
 .fit-options {
 text-align: center;
 margin: 40px 20px;
color: #322f33;
 }

 .fit-options h2 {
 font-size: 32px;
 margin-bottom: 10px;
color: #322f33;
 }

 .fit-options p {
 font-size: 18px;
 color: #322f33;
 max-width: 800px;
 margin: 0 auto 20px;
 }

 /* Fit Package Section */
 .fit-packages {
 display: flex;
 justify-content: center;
 gap: 20px;
 margin: 40px auto;
 padding: 20px;
 max-width: 1200px;
 }

 .fit-card {
 flex: 1;
 text-align: center;
 background-color: #e7e4de;
 padding: 20px;
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

.fit-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }

.fit-card h3 {
 color: #322f33;
 font-size: 20px;
 border-bottom: 2px solid #99c7c6; /* teal underline */
 text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Subtle text shadow */
 padding-bottom: 10px;
 margin-bottom: 15px;
 text-transform: uppercase;
}

 .fit-card p {
 margin: 10px 0;
color: #322f33;
 }

.price {
 font-size: 1.5rem; /* Larger font size */
 font-weight: bold;
 margin-top: 5px; /* Add a slight gap above the price */
color: #f26741 !important;
}


 .fit-card strong {
 display: block;
 margin-top: 10px;
color: #322f33;
 }

 .contact-section {
 text-align: center;
 margin: 40px 0;
 padding: 20px;
color: #322f33;
 }

/* Button Styles */
.btn-primary {
 background-color: #f26741 !important; /* Orange */
 color: #ffffff !important; /* Light tan */
 padding: 12px 24px;
 border: none;
 border-radius: 8px;
 text-decoration: none !important;
 font-size: 18px;
 font-weight: 600;
 display: inline-block;
 text-align: center;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
 background-color: #99c7c6 !important; /* Teal on hover */
 transform: translateY(-3px);
}

@media (max-width: 768px) {
 
 /* General Styles */
 body {
 padding: 10px; /* Reduce overall padding */
 font-size: 16px; /* Adjust base font size */
 }

 /* Banner Section */
 .page-title-background {
 padding: 20px 10px; /* Adjust padding for smaller screens */
 }

 .page-title {
 font-size: 28px; /* Reduce title size */
 line-height: 1.4; /* Adjust line height */
 }

 .banner img {
 width: 100%; /* Ensure image is fully responsive */
 height: auto;
 border-radius: 8px; /* Add some rounding for a polished look */
 }

 /* Benefits Section */
 .benefits {
 padding: 20px 10px; /* Adjust section padding */
 }

@media (max-width: 768px) {
 .benefits-list {
 padding: 0; /* Remove extra padding */
 }

 .benefits-item {
 font-size: 1rem; /* Adjust font size for smaller screens */
 width: 95%; /* Slightly larger width for mobile screens */
 }
}


 /* Fit Package Options Section */
 .fit-options {
 padding: 20px 10px; /* Adjust section padding */
 }

 .fit-options p {
 font-size: 16px; /* Adjust text size for readability */
 line-height: 1.5;
 }

 /* Fit Packages */
 .fit-packages {
 display: grid; /* Use grid layout for better stacking */
 grid-template-columns: 1fr; /* Stack cards vertically */
 gap: 20px; /* Add spacing between cards */
 }

 .fit-card {
 padding: 20px; /* Add padding inside the card */
 background: #ffffff; /* White background */
 border-radius: 8px; /* Add rounded corners */
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
 font-size: 16px; /* Adjust font size */
 }

 .fit-card h3 {
 font-size: 20px; /* Scale down the heading */
 margin-bottom: 10px;
 }

 .fit-card .price {
 font-size: 18px; /* Adjust price size */
 color: #f26741; /* Accent color */
 font-weight: bold;
 }

 .fit-card p {
 margin: 5px 0; /* Reduce margins between text lines */
 }

 /* Contact Section */
 .contact-section {
 padding: 20px 10px; /* Adjust padding */
 text-align: center; /* Center-align text */
 }

 .contact-section h2 {
 font-size: 24px; /* Reduce font size */
 margin-bottom: 15px;
 }

 .contact-section p {
 font-size: 16px; /* Adjust text size */
 margin-bottom: 15px;
 }

 .contact-section .btn-primary {
 font-size: 16px; /* Adjust button text size */
 padding: 12px 20px; /* Adjust button padding */
 display: inline-block; /* Ensure the button does not stretch */
 width: 100%; /* Full-width button for better UX */
 }
}