/* CSS for Product Specific Pages (product1.html, product2.html)
-------------------------------------------------------------------
This file contains styles that are unique to the individual product
detail pages. It should be linked in the of product1.html
and product2.html AFTER the main style.css file.
------------------------------------------------------------------- */
/* 1. Product Page Hero Section
-------------------------------------------------- */
.product-hero-bg { /* Shared hero style for product pages */
height: auto; /* Allow height to be determined by content and padding */
min-height: 300px;
/* Ensure no background image is applied, use solid color */
background-image: none; /* Explicitly remove any background image */
background-color: var(--secondary-bg); /* Solid background color */
display: flex;
align-items: center; /* Vertically align content */
/* justify-content: flex-start; /* Align content container to the left (within .container) */
/* text-align: left; /* Align text to the left by default for this section */
/* Increased padding-top to add more space above the hero content */
padding-top: 160px;
padding-bottom: 100px;
}
/* The .container within .product-hero-bg will handle the max-width and centering of the content block.
We want the text *within* that block to be left-aligned. */
.product-page-hero { /* Styles for the content div within the product hero */
max-width: 800px; /* Keeps the content block from being too wide */
/* If .product-hero-bg has justify-content: flex-start, .product-page-hero will be on the left.
If .product-hero-bg has justify-content: center (default for .section),
then this .product-page-hero needs text-align: left. */
text-align: left; /* Align text within this specific hero content block to the left */
width: 100%; /* Ensure it takes up the available width within its container if needed */
margin: 0 auto; /* This will center the .product-page-hero block if its parent .container is wider */
/* If you want the block itself to be aligned left within the overall page,
ensure the parent .container in the HTML is not overly constraining it to center.
However, typically the .container class centers its content.
The text-align: left here ensures text *inside* this block is left-aligned.
*/
}
.product-page-hero h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 0.5em;
color: var(--primary-text);
}
.product-page-hero h1 span {
color: var(--accent-color);
}
.product-page-hero p {
font-size: 1.1rem;
color: var(--secondary-text);
margin-bottom: 0;
}
/* 2. Product Description Area
-------------------------------------------------- */
.product-description {
max-width: 800px;
margin: 0 auto 40px auto;
text-align: left;
}
.product-description h3 {
font-size: 1.4rem;
color: var(--accent-color);
margin-top: 30px;
margin-bottom: 15px;
}
.product-description p {
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 1em;
color: var(--secondary-text);
}
.product-description ul,
.product-description ol {
margin-bottom: 1em;
padding-left: 20px;
color: var(--secondary-text);
}
.product-description li {
margin-bottom: 0.5em;
}
/* 3. Fund Status Highlight Box
-------------------------------------------------- */
.fund-status-highlight {
background-color: var(--tertiary-bg);
border-left: 5px solid var(--accent-color);
padding: 20px 25px;
margin: 30px 0;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.fund-status-highlight p {
margin-bottom: 0.5em;
color: var(--primary-text);
font-size: 1rem;
}
.fund-status-highlight p:last-child {
margin-bottom: 0;
}
.fund-status-highlight i {
margin-right: 10px;
color: var(--accent-color);
font-size: 1.1rem;
}
/* 4. Brochure Download Section
-------------------------------------------------- */
.brochure-download-section {
margin: 40px 0;
padding: 25px;
background-color: var(--tertiary-bg); /* Changed for contrast from hero */
border-radius: 8px;
text-align: center;
box-shadow: var(--card-shadow);
}
.brochure-download-section .btn {
margin-bottom: 10px;
display: inline-flex;
align-items: center;
}
.brochure-download-section .btn i {
margin-right: 10px;
font-size: 1.2rem;
}
.brochure-note {
font-size: 0.9rem;
color: var(--secondary-text);
margin: 0;
}
/* Responsive adjustments for product-specific elements if needed */
/* These are now primarily in responsive.css. If specific overrides are needed here, ensure correct order or specificity. */
@media (max-width: 992px) {
.product-hero-bg {
padding-top: 140px;
padding-bottom: 90px;
}
.product-page-hero h1 {
font-size: 2.6rem;
}
}
@media (max-width: 768px) {
.product-hero-bg {
min-height: auto;
padding: 120px 15px 80px 15px;
}
/* Ensure hero text is still left-aligned on mobile if .product-page-hero text-align: left is not enough */
/* .product-hero-bg { text-align: left; } */ /* Uncomment if needed */
/* .product-page-hero { margin: 0; } */ /* Remove auto margins if you want it truly flush left */
.product-page-hero h1 {
font-size: 2.2rem;
}
.product-page-hero p {
font-size: 1rem;
}
.product-description {
padding: 0 10px;
}
}
@media (max-width: 480px) {
.product-hero-bg {
padding-top: 100px;
padding-bottom: 60px;
}
.product-page-hero h1 {
font-size: 2rem;
}
}