/* ---------------------------------------------------- */ /* 1. FONT DEFINITION (MUST BE AT THE TOP OF THE FILE) */ /* ---------------------------------------------------- */ @font-face { /* This name is what you will use in all your 'font-family' rules */ font-family: 'Gumani'; /* Point to the actual files in your /public/assets/fonts/ folder */ src: url('/public/assets/fonts/Gumani.woff2') format('woff2'), url('/public/assets/fonts/Gumani.woff') format('woff'); font-weight: normal; /* This assumes your files are the standard weight */ font-style: normal; font-display: swap; /* Helps ensure text is visible during loading */ } /* ==================== OUR JOURNEY SECTION (REVISED AND COMPLETE) ==================== */ .timeline-section { padding: 100px 0 120px 0; /* Add top/bottom padding for aesthetic spacing */ /* Ensure the title is always centered above the container */ text-align: center; } /* 1. FIX: Title Styling */ /* Use the section-title class and apply your custom Gumani/color rules */ .timeline-section .section-title { font-family: 'Gumani Sans Serif'; font-weight: 400; color: #1f2937; /* The dark color from your overrides */ font-size: 40px; letter-spacing: normal; line-height: 1.5em; margin-top: 0; margin-bottom: 50px; text-align: center; } /* Timeline Container - The Scrollable Box */ .timeline-container { max-height: 800px; overflow-y: auto; padding: 20px 0; margin: 0 auto; width: 100%; max-width: 1400px; border: 1px solid #dcdcdc; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Allow background to show through if journey_background_image is set on the section */ background: transparent; margin-bottom: 80px; overflow-x: hidden; } /* Timeline - The Central Layout Structure */ .timeline { position: relative; margin: 0 auto; padding: 0; width: 90%; max-width: 900px; left: 0; } /* Vertical line (The spine of the timeline) */ .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #000000; transform: translateX(0); } /* 2. FIX: Top Circle (The small circle at the start of the vertical line) */ .timeline::after { content: ''; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); /* Centers it on the line at the very top */ width: 15px; height: 15px; background: #fff2c0; /* Light background color */ border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.2); z-index: 10; /* Ensure it sits above the line */ } /* Milestone Item Container */ .timeline-item { position: relative; margin: 30px 0; transition: transform 0.3s ease; padding: 10px 10px 10px 80px; width: auto; min-height: 80px; display: block; } .timeline-item:hover { transform: translateX(5px); } /* The circle containing the year */ .timeline-circle { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); background: #fadfae; color: #000000; width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 0 6px rgba(0,0,0,0.2); transition: transform 0.3s ease, background 0.3s ease; z-index: 5; /* Ensure it sits above the line but below the content */ } .timeline-item:hover .timeline-circle { background: #aa996d; transform: translate(-50%, -50%) scale(1.05); } /* Content Box */ .timeline-content { background: #fffdf7; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: background 0.3s ease; width: 100%; min-height: 100px; text-align: left; box-sizing: border-box; } .timeline-item:hover .timeline-content { background: #fff4cc; } /* Content Typography */ .timeline-content h3 { margin-bottom: 8px; font-size: 25px; } .timeline-content ul { margin: 8px 0 0 20px; padding: 0; list-style-type: disc; color: #666666; line-height: 1.6; } .timeline-content li { margin-bottom: 6px; } /* Timeline SECTION - Outer Area must be a solid color */ .timeline-section { padding: 100px 0 120px 0; text-align: center; /* MODIFICATION 1: Set the background to solid white/light gray */ background-color: #F5F5F5; /* Light Gray */ background-image: none; /* Ensure no image is accidentally inherited */ } /* 1. Title Styling */ .timeline-section .section-title { font-family: 'Gumani Sans Serif'; font-weight: 400; color: #1f2937; font-size: 40px; margin-bottom: 50px; letter-spacing: normal; line-height: 1.5em; text-align: center; } /* Timeline Container - The Scrollable Box with the Image */ .timeline-container { max-height: 800px; overflow-y: auto; padding: 20px 0; margin: 0 auto; width: 100%; max-width: 1400px; /* MODIFICATION 2: Apply Image, Border, and Shadow here */ border: 1px solid #dcdcdc; /* Restore border for definition */ border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Restore shadow for definition */ /* Apply the image to the container */ background-image: url('../bg/SLR.png'); /* STATIC PATH for the image */ background-size: 100% 100%; /* Ensures the image covers the entire container */ background-position: center center; background-repeat: no-repeat; background-color: transparent; /* Ensures the image is visible */ margin-bottom: 80px; overflow-x: hidden; } /* Timeline Content - Must be slightly opaque white to float over the image */ .timeline-content { /* Set background to be slightly transparent white to blend with the background image */ background: rgba(255, 255, 255, 0.9); padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* ... rest of the content styles ... */ } /* ==================== 2024 HIGHLIGHTS SECTION STYLES ==================== */ /* Import Google Fonts (Ensure Raleway is available) */ @import url("//fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"); /* Import Gumani font (Based on your overrides) */ @import url('https://fonts.googleapis.com/css2?family=Gumani+Sans+Serif:wght@400;600;700&family=Raleway:wght@400;500;600&display=swap'); /* Base Section Styling */ .highlights-section { font-family: 'Raleway', sans-serif; text-align: center; padding: 40px 20px; /* Background properties copied from your overrides, using the Antlers image variable in the HTML will override the URL here, but it's good for local testing. */ background-color: #F5F5F5; /* Light Gray */ background-position: center top; background-repeat: repeat-y; background-size: 100% 800px; background-color: transparent; } /* Section Title Overrides */ /* This matches the global section-title styling you applied */ div .highlights-section h2, .highlights-section .section-title { font-family: 'Gumani Sans Serif'; font-weight: 400; font-size: 40px; color: #1f2937; margin-bottom: 25px; /* Adjusting margin to the desktop default */ margin-top: 40px; /* Applying specific top margin */ } /* --- Container for the 3-Column Grid --- */ .highlights-container-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* Three equal columns */ gap: 20px; max-width: 1350px; margin: 0 auto 60px; } /* --- Base Column Styling (The Colored Cards) --- */ .highlight-column { color: #fff; /* White text for the title */ padding: 20px 30px 0 30px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } /* Interactive Hover effect: Pop out and lift */ .highlight-column:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } /* Specific background colors */ .good-governance { background-color: #3e7fb7; } .environmental-stewardship { background-color: #55ac55; } .social-responsibility { background-color: #ec8600; } /* Column Title Styling (e.g., "GOOD GOVERNANCE") */ .column-title { font-family: 'Raleway', sans-serif; font-size: 1.2rem; font-weight: bold; text-transform: uppercase; margin-top: 0; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 2px solid rgba(255, 255, 255, 0.4); } /* --- White Content Container Styling (The White Box) --- */ .content-box-white { background-color: #ffffff; color: #000000; /* Black text for content */ border-radius: 12px; padding: 15px 15px; flex-grow: 1; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } .column-content { flex-grow: 1; } /* --- Content Typography and Dividers (Desktop View) --- */ /* Global Horizontal Divider */ .stat-main { font-size: 1.1rem; line-height: 1.4; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #666666; /* DARK DIVIDER */ } /* Remove the horizontal line from the last stat in each column (unless overridden for a fix) */ .bottom-stat { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* Stat text (Key Figures) */ .stat-main strong, .stat-key-figure strong { font-size: 1.3rem; /* Desktop Key Figure size */ font-weight: 800; } /* Stat Row (For two-part stats) */ .stat-row { display: flex; justify-content: space-between; margin-bottom: 10px; } /* Specific Fixes for Borders (Desktop) */ /* FIX 1: Good Governance final stat divider (Added top border) */ .good-governance .column-content > .stat-main:last-child { border-top: 2px solid #666666; padding-top: 10px; margin-top: 10px; border-bottom: none; } /* GOOD GOVERNANCE specific styling (Vertical divider) */ .good-governance .stat-half { flex-basis: 48%; font-size: 1.2rem; line-height: 1.3; padding: 5px 5px; border-right: 2px solid #666666; /* DARK VERTICAL DIVIDER */ } .good-governance .stat-half:last-child { border-right: none; } /* Styling for the divided stats with labels (Environmental/Social) */ .stat-half-split { flex-basis: 50%; padding: 0 10px; text-align: center; } .stat-label { font-size: 1.2rem; color: #000000; } /* ENVIRONMENTAL STEWARDSHIP specific dividers (Horizontal) */ .environmental-stewardship .top-stat-block { border-bottom: 2px solid #666666; margin-bottom: 15px; padding-bottom: 10px; } .environmental-stewardship .half-left { border-right: 2px solid #666666; /* Vertical divider in the top block */ } /* SOCIAL RESPONSIBILITY specific dividers */ /* FIX 2: Remove the bottom border from the "Invested" stat (divider-stat) */ .social-responsibility .divider-stat { border-bottom: none; padding-bottom: 10px; margin-bottom: 10px; } .social-responsibility .bottom-stat-block { margin-top: 15px; padding-top: 20px; border-top: 2px solid #666666; /* Horizontal top border for the final block */ } .social-responsibility .half-left { border-right: 2px solid #666666; /* Vertical divider in the bottom block */ word-spacing: 1px; } /* ==================== CERTIFICATIONS SECTION (CONTAINER RESTORED) ==================== */ /* Certifications Section */ .certifications-section { padding: 120px 20px; text-align: center; position: relative; overflow: hidden; /* Background image settings from your overrides */ background-color: #F5F5F5; /* Light Gray */ background-position: center top; background-repeat: repeat-y; background-size: 100% 800px; background-color: transparent; } /* Section title (Using your override styles) */ /* Override specific to certs-section for Gumani Sans Serif and color */ .certifications-section h2 { font-family: 'Gumani Sans Serif'; /* From your override */ font-weight: 400; /* From your override */ font-size: 40px; /* From your override */ margin-bottom: 50px; color: #1f2937; /* From your override */ letter-spacing: normal; text-align: center; } .certifications-slider { position: relative; display: flex; align-items: center; justify-content: center; } /* Wrapper: Defines the visible window for the slider */ /* Restoring subtle shadow/border to the overall wrapper if needed, or remove if you just want cards shadowed */ .certifications-wrapper { width: 90%; max-width: 1200px; overflow: hidden; position: relative; border-radius: 15px; /* Subtle rounded corners for the outer wrapper */ /* If you want a box around all cards collectively, uncomment the shadow below */ /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); */ } .certifications-inner { display: flex; transition: transform 0.6s ease-in-out; } .certifications-slide { flex: 0 0 100%; display: flex; justify-content: space-between; gap: 20px; padding: 20px 10px; /* Added vertical padding inside slide */ align-items: stretch; /* Ensures cards inside match tallest card */ } /* MODIFICATION: Certification Card - RESTORE CONTAINER */ .cert-card { background: #ffffff; /* White background for the card */ border-radius: 12px; /* Rounded corners for the card */ box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Subtle shadow for depth */ padding: 25px; /* Keep padding for spacing */ flex: 1; display: flex; flex-direction: column; align-items: center; /* Center logo and content block */ justify-content: flex-start; transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for hover effects */ box-sizing: border-box; /* Include padding in card's total width/height */ } /* Keep the subtle hover transform and add shadow change */ .cert-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Slightly more prominent shadow on hover */ } .cert-logo { width: auto; height: 80px; /* Fixed height for consistency */ object-fit: contain; margin-bottom: 25px; /* Spacing below logo */ } /* Content Area for the bullet points */ .cert-content { flex-grow: 1; /* Allows content to take up remaining space, helping equal height */ display: flex; flex-direction: column; justify-content: flex-start; width: 100%; /* Ensure content block fills its card space */ text-align: left; /* Align list content left */ font-family: 'Raleway', sans-serif; /* From your overrides */ color: #4b5563; /* Default text color */ line-height: 1.6; } .cert-content ul { list-style: disc; /* Explicitly set list style to bullets */ padding-left: 20px; /* Indentation for bullets */ margin: 0; /* Reset default margins */ } .cert-content li { margin-bottom: 8px; /* Spacing between list items */ font-size: 16px; /* Ensure content font size is correct */ } /* Navigation Buttons (Re-used styles) */ .nav-btn { background-color: transparent; border: none; color: #000000; font-size: 2.2rem; cursor: pointer; padding: 8px 12px; transition: color 0.3s ease; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .nav-btn:hover { color: #007bff; /* Example hover color for arrows */ } .left-btn { left: 20px; } .right-btn { right: 20px; } /* --- Responsive Adjustments --- */ @media (max-width: 900px) { .certifications-slide { flex-direction: column; align-items: center; padding: 10px; /* Adjusted padding for smaller screens */ } .cert-card { width: 100%; margin-bottom: 20px; /* Add spacing between stacked cards */ box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ensure shadow on mobile too */ background: #ffffff; /* Ensure white background on mobile too */ } /* Move navigation buttons below the slider on mobile */ .nav-btn { position: static; transform: none; display: inline-block; margin: 20px 10px 0 10px; font-size: 1.8rem; } .certifications-slider { flex-direction: column; /* Stack slider content and buttons */ } } /* ==================== SUSTAINABILITY PUBLICATIONS SECTION STYLES ==================== */ /* Left: Full-height Image (The container for the image asset) */ .sustainability-full { display: flex; width: 100%; min-height: 100vh; /* full viewport height */ /* background-color: #f9f9f9; - Removed, assuming background-image from Antlers is used */ overflow: hidden; } /* Left: Image Container */ .sustainability-left { flex: 1; overflow: hidden; } /* Left: Image Styling */ .sustainability-left img { width: 100%; height: 100%; object-fit: cover; /* CRITICAL: Anchor the image to the left */ object-position: left; } /* Right: Content Panel */ .sustainability-right { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 60px 80px; background-color: #f5f5f5; /* Light background for the content side */ } /* Section Title Overrides for Publications */ .sustainability-full .sustainability-right h2, .sustainability-right .section-title { font-family: 'Gumani Sans Serif'; /* Based on your global overrides */ font-weight: 400; /* Based on your global overrides */ color: #1f2937; /* Based on your global overrides */ font-size: 40px; margin-bottom: 40px; } /* Each dropdown group (Replicator Item) */ .sustainability-item { margin-bottom: 40px; } /* Report Group Title (H3) */ .sustainability-right .sustainability-item h3 { font-weight: 400; font-family: 'Raleway', sans-serif; font-size: 22px; font-weight: 600; margin-bottom: 12px; color: #666666; } /* Dropdown Select Element */ .sustainability-item select { width: 100%; color: #666666; padding: 14px; border-radius: 8px; border: 1px solid #ccc; font-size: 16px; margin-bottom: 14px; transition: all 0.2s ease; } /* Dropdown Focus State */ .sustainability-item select:focus { border-color: #c8102e; box-shadow: 0 0 0 3px rgba(200,16,46,0.2); outline: none; } /* View Button */ .view-btn { background-color: #549429; /* Green color */ color: #fff; border: none; border-radius: 8px; padding: 12px 24px; font-size: 15px; cursor: pointer; font-weight: 600; letter-spacing: 0.5px; transition: background 0.3s, transform 0.2s; } /* View Button Hover State */ .view-btn:hover { background-color: #2e6117; /* Darker green on hover */ transform: translateY(-2px); } /* ==================== GRADIENT OVERLAYS FOR SECTION TRANSITIONS ==================== */ /* 1. FADE BOTTOM (FOR THE CUSTOM SECTION ABOVE) */ .fade-bottom-gradient { position: relative; overflow: hidden; } .fade-bottom-gradient::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; /* Increased Fade height for softer transition */ z-index: 1; pointer-events: none; /* Fades from transparent (over the image) to solid white (matching the background of content/next section) */ background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 1) 100% ); } /* 2. FADE TOP (FOR THE POLICY SECTION BELOW) */ .policy-section-top-fade { position: relative; overflow: hidden; } .policy-section-top-fade::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; /* Increased Fade height for softer transition */ z-index: 1; pointer-events: none; /* Fades from solid white (at the top edge) to transparent (over the image) */ background: linear-gradient( to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 1) 100% ); } /* Policy Description: Only transition max-height and opacity */ .policy-desc { max-height: 0; overflow: hidden; opacity: 0; /* This handles the smooth sliding speed */ transition: max-height 0.7s ease-in-out, opacity 0.5s ease; /* ... rest of the styles ... */ } /* When active, set the max-height high enough to show content */ .policy-item.active .policy-desc { max-height: 500px; opacity: 1; /* ... rest of the styles ... */ } /* ---------------------------------------------------- */ /* --- VISION & MISSION SECTION (PARAGRAPH STYLES) --- */ /* ---------------------------------------------------- */ /* CRITICAL: Target the section containing the vm-content-wrapper for padding/spacing */ .paragraph-section-bg { /* 1. Section Size (Overrides py-10 md:py-20) for consistent large padding */ /* This increased padding creates the blank white space layout */ padding-top: 8rem !important; padding-bottom: 8rem !important; } /* * Target the main content wrapper (vm-content-wrapper) * This is the
that holds the

and the content
. */ .vm-content-wrapper { /* Set text alignment for justified look on paragraph content */ text-align: justify !important; /* Increase the font size from 16px to 18px (for responsiveness) */ /* NOTE: We're targeting the wrapper div, which may affect the overall font size. Let's ensure we target the *content* div specifically for font size and justification. The below block handles the paragraph styling better. */ /* Ensure the text block is horizontally centered (though max-w-4xl and mx-auto already help) */ margin-left: auto !important; margin-right: auto !important; /* Increase the maximum width for better justified flow (Overrides max-w-4xl) */ max-width: 900px !important; width: 900px !important; } /* * Target the specific
that contains the {{page_paragraph}} content * to handle font size, justification, and line-height. */ .vm-content-wrapper > div.text-\[16px\] { text-align: justify !important; font-size: 1.125rem !important; /* Sets paragraph size to 18px */ line-height: 1.6 !important; } /* --- 1. FONT STYLING OVERRIDES FOR HEADINGS (H1) --- */ /* Target the H1 title we added inline in the HTML. We only need margin/spacing adjustments here, as font/color are inline. */ .vm-content-wrapper h1 { /* We don't need font or color here. */ /* Ensure it has space above the content */ margin-top: 0 !important; /* Ensure title is centered */ text-align: center !important; /* Spacing below the title is handled inline via margin-bottom: 2rem; */ } /* Ensure the normal paragraph text (if using direct p tags in content) */ .vm-content-wrapper p { /* We don't need font or color here. */ font-size: inherit !important; /* Inherits the 1.125rem from the parent div */ max-width: none !important; overflow-wrap: break-word; margin-bottom: 1rem; /* Standard paragraph spacing */ } /* ==================== Policy Section Left Panel (Text Readability) ==================== */ /* CRITICAL NEW RULE: Target the ROW container above the policy box to align items vertically and horizontally */ .policy-section-top-fade > div { /* Assuming this is a flex or grid container for the two columns (policy text and list) */ align-items: flex-start !important; /* Ensure content starts at the top of the row (prevents stretching) */ justify-content: left !important; /* Horizontally center the content of the whole row */ } /* Target the container holding the policy title and paragraph (the white box) */ .policy-section-top-fade > div > div.w-full.md\:w-1\/4 { /* Add a white background for readability */ background-color: rgba(255, 255, 255, 0.9) !important; border-radius: 10px !important; /* CRITICAL CHANGE: Force width and height to fit content exactly */ width: fit-content !important; height: fit-content !important; /* New rule to prevent vertical stretching */ max-width: 90% !important; /* Prevent it from expanding too much on mobile */ padding: 20px !important; /* Adjusted padding to be uniform 20px all around */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* To center the container within its 1/4 parent column */ display: block !important; /* Center the block horizontally */ margin-top: 20px !important; margin-left: auto !important; margin-right: auto !important; /* Ensure the text inside is readable - often black or dark grey */ color: #333 !important; /* CRITICAL CHANGE: Ensure all text inside this container is left-aligned */ text-align: left !important; } /* Ensure the h1 and p inside this specific container inherit the darker text color */ .policy-section-top-fade > div > div.w-full.md\:w-1\/4 h1, .policy-section-top-fade > div > div.w-full.md\:w-1\/4 p { color: #333 !important; /* Force text color to be dark within the white box */ /* CRITICAL CHANGE: Secondary text alignment enforcement to left */ text-align: left !important; word-break: break-word; /* Ensure long words wrap correctly */ /* Add max-width to paragraph to encourage wrap and better fit content box */ max-width: 300px; } /* Make sure the text elements inside don't have conflicting margins */ .policy-section-top-fade > div > div.w-full.md\:w-1\/4 .flex-col.space-y-2 { /* Reset margins if necessary to prevent double spacing or odd alignment */ margin: 0 !important; padding: 0 !important; /* Ensure the inner flex container is left-aligned */ display: flex !important; flex-direction: column !important; align-items: flex-start !important; /* Changed from center to flex-start */ } /* Ensure font sizes remain as defined in HTML, just override color */ .policy-section-top-fade > div > div.w-full.md\:w-1\/4 h1.font-gumani.text-\[40px\] { font-size: 40px !important; /* Keep original size */ color: #1f2937 !important; /* Set color for readability */ } .policy-section-top-fade > div > div.w-full.md\:w-1\/4 p.font-raleway.text-\[16px\] { font-size: 16px !important; /* Keep original size */ color: #666666 !important; /* Set color for readability */ } /* ======================================================== */ /* --- NEW CONTACT SECTION STYLES (9. CUSTOM CONTACT) --- */ /* ======================================================== */ .contact-section { /* Uses py-10 md:py-20 padding from HTML */ width: 100%; /* Increased padding to make the section taller */ padding-top: 130px; /* Increased from 80px */ padding-bottom: 130px; /* Increased from 80px */ display: flex; /* Ensure flexbox for vertical centering */ align-items: center; /* Vertically center content */ justify-content: center; /* Horizontally center content */ background-color: #F5F5F5; /* Light Gray */ } @media (min-width: 768px) { .contact-section { padding-top: 120px; /* Further increase for larger screens */ padding-bottom: 120px; /* Further increase for larger screens */ } } .contact-container { /* Center the container and limit its max width */ max-width: 1000px; width: 100%; /* Ensure it takes full width up to max-width */ margin: 0 auto; padding: 40px 60px; /* Increased padding inside the container */ display: flex; align-items: center; gap: 60px; /* Space between logo and content */ background: white; /* Ensure container has a white background */ border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Added shadow as requested */ } .contact-logo { /* Reduced fixed size for the logo area on desktop */ flex-shrink: 0; width: 100px; /* Reduced from 200px */ height: auto; text-align: center; } .contact-logo img { max-width: 100%; height: auto; display: block; } .contact-content { flex-grow: 1; /* Allows content block to take remaining space */ } .contact-content h2 { /* Using the site's primary heading font and color (based on your override) */ font-family: 'Gumani Sans Serif', serif; font-size: 40px; font-weight: 400; color: #1f2937 !important; margin-bottom: 10px; letter-spacing: normal; line-height: 1.2; } .contact-content p { /* Using the site's primary body font (based on your override) */ font-family: 'Raleway', sans-serif; font-size: 18px; line-height: 1.6; color: #666666; white-space: pre-line; /* Preserves line breaks from content */ margin-bottom: 25px; } /* Style for the button link - using the gold/yellow from Image 2 */ .contact-button { display: inline-flex; align-items: center; padding: 12px 30px; /* Updated background to the gold/yellow gradient from Image 2 */ background: linear-gradient(180deg, #f7e6a4 0%, #ddc267 100%); color: #000 !important; /* Text color changed to black for contrast */ text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 600; border-radius: 30px; /* More rounded corners as in Image 2 */ letter-spacing: 0.5px; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for the button */ overflow: hidden; /* Important for the icon animation */ position: relative; } .contact-button:hover { /* Slightly lighter background on hover */ background: #f7ecc1; transform: translateY(-1px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* Darker shadow on hover */ } /* Mail icon styling */ .mail-wrap { display: inline-block; position: relative; width: 24px; height: 24px; margin-left: 10px; overflow: hidden; font-size: 20px; line-height: 1; } .mail-wrap i { position: absolute; left: 0; top: 0; font-style: normal; transition: transform 0.3s ease, opacity 0.3s ease; } /* Closed envelope visible by default */ .mail-closed { opacity: 1; transform: translateY(0); } /* Open envelope hidden by default */ .mail-open { opacity: 0; transform: translateY(100%); } /* Hover state: Close slides out, Open slides in */ .contact-button:hover .mail-closed { opacity: 0; transform: translateY(-100%); } .contact-button:hover .mail-open { opacity: 1; transform: translateY(0); } /* ---------------------------------------------------- */ /* 2. FONT APPLICATION */ /* ---------------------------------------------------- */ /* Global Section Titles (The primary override) */ .section-title, .sustainability-full h2, .contact-content h2, .vm-content-wrapper h1 { /* Font Standardization */ font-family: 'Gumani', serif !important; font-weight: 400 !important; font-size: 40px !important; color: #1f2937 !important; } /* --- CUSTOM SECTION OVERRIDES (Section 3) --- */ /* 1. Target the Title (

) in the white content box */ .container > div > div.bg-white.p-10 h1 { /* Use the font we defined earlier */ font-family: 'Gumani', serif !important; /* Modify Size */ font-weight: 400 !important; line-height: 1.1 !important; /* Modify Color */ color: #1f2937; } /* 2. Target the Paragraph (

) in the white content box */ .container > div > div.bg-white.p-10 p { /* Assuming Raleway is either loaded via Google or locally */ font-family: 'Raleway', sans-serif !important; /* Modify Size */ font-size: 1.125rem !important; /* Example: 18px, slightly larger than default */ line-height: 1.6 !important; /* Modify Color */ color: #666666 !important; /* Example: Standard medium gray text */ font-weight: 400 !important; } /* ======================================================== */ /* --- MOBILE RESPONSIVENESS --- */ /* ======================================================== */ /* --- MOBILE RESPONSIVENESS HIGHLIGHTS (Below 992px) --- */ @media (max-width: 992px) { .highlights-container-grid { grid-template-columns: 1fr; /* Stack cards */ gap: 20px; } .highlight-column { min-height: auto; padding: 20px 20px 0 20px; } .content-box-white { margin-bottom: 20px; padding: 15px 15px; } /* 1. COMPACT FONT SIZES */ .section-title { font-size: 1.8rem; } .column-title { font-size: 1.1rem; margin-bottom: 15px; } .stat-main { font-size: 0.9rem; line-height: 1.3; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #666666; } .stat-main strong, .stat-key-figure strong { font-size: 1.2rem; } .stat-label { font-size: 0.75rem; } /* 2. COMPACT BORDERS */ .bottom-stat { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .good-governance .column-content > .stat-main:last-child { border-top: 1px solid #666666; padding-top: 10px; margin-top: 10px; border-bottom: none; } .good-governance .stat-half { flex-basis: 45%; font-size: 0.85rem; padding: 5px 0; border-right: 1px solid #666666; } .good-governance .stat-half:last-child { border-right: none; } .environmental-stewardship .top-stat-block { border-bottom: 1px solid #666666; margin-bottom: 15px; padding-bottom: 10px; } .environmental-stewardship .half-left { border-right: 1px solid #666666; } .social-responsibility .divider-stat { border-bottom: none; padding-bottom: 10px; margin-bottom: 10px; } .social-responsibility .bottom-stat-block { margin-top: 15px; padding-top: 10px; border-top: 1px solid #666666; } .social-responsibility .half-left { border-right: 1px solid #666666; } /* Final clean-up for the last element */ .column-content > *:last-child { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* CERTIFICATIONS SLIDER - Stack on smaller screens */ .certifications-slide { grid-template-columns: 1fr; /* Stack cards */ gap: 15px; padding: 30px 20px; } } /* --- MOBILE RESPONSIVENESS PUBLICATIONS (Below 900px) --- */ @media (max-width: 900px) { .sustainability-full { flex-direction: column; min-height: auto; } .sustainability-left img { height: 40vh; /* Reduced height on mobile */ } .sustainability-right { padding: 40px 20px; text-align: center; } .sustainability-item select, .view-btn { width: 90%; margin-left: auto; margin-right: auto; display: block; /* Ensure button is treated as a block for full width */ } /* Center H3 titles on mobile */ .sustainability-right .sustainability-item h3 { text-align: center; } } /* --- MOBILE RESPONSIVENESS CONTACT (Below 768px) --- */ @media (max-width: 768px) { .contact-section { padding-top: 60px; /* Adjusted padding for mobile */ padding-bottom: 60px; /* Adjusted padding for mobile */ } .contact-container { flex-direction: column; /* Stack items vertically */ text-align: center; gap: 30px; padding: 30px 20px; /* Adjusted padding for mobile container */ } .contact-logo { width: 100px; /* Slightly smaller logo on mobile */ margin-top: 0; /* Remove top margin and let it sit naturally */ } .contact-content { padding: 0 10px; } .contact-content h2 { font-size: 30px; } .contact-content p { font-size: 14px; } /* POLICY SECTION: Stack Title/Paragraph and Accordion */ .policy-section-top-fade > .container { flex-direction: column; gap: 30px; } .policy-section-top-fade .section-title { text-align: center; } } /* ==================== VISION & MISSION SECTION (MOBILE-ONLY CENTERING FIX) ==================== */ /* Base styling applied globally (safe for desktop/tablet) */ .paragraph-section-bg { background-color: #f7f7f7; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; /* CRITICAL: Hides any potential horizontal overflow from cropping */ overflow-x: hidden; box-sizing: border-box; } /* ----------------------------------------------- */ /* MOBILE ONLY FIX (max-width: 768px and below) */ /* ----------------------------------------------- */ @media (max-width: 768px) { /* Targets the inner wrapper (.vm-content-wrapper) to override width/centering */ .vm-content-wrapper { /* This is the key to fixing the cropping. It overrides the max-w-4xl from HTML */ max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; /* Ensure all contents are explicitly centered */ text-align: center !important; } /* Center the paragraph text itself */ .vm-content-wrapper > div { text-align: center !important; /* Re-ensure it takes full width for wrapping */ width: 100%; } /* Mobile-specific title sizing for readability */ .vm-content-wrapper h1 { font-size: 1.75rem; } } /* ----------------------------------------------- */ /* MOBILE FIX: OUR JOURNEY SECTION (max-width: 768px) */ /* ----------------------------------------------- */ @media (max-width: 768px) { .timeline-section { /* Reduce overall section padding on mobile */ padding: 60px 0 80px 0; } /* 1. Reduce Main Title Size */ .timeline-section .section-title { font-size: 32px; /* Smaller font for mobile */ margin-bottom: 30px; /* Reduced spacing */ } /* 2. Container (The Scrollable Box) */ .timeline-container { /* Reduce the max height to keep the timeline shorter */ max-height: 500px; /* Reduce side margins/padding */ width: 95%; padding: 10px 0; margin-bottom: 40px; /* Ensure the background image covers the smaller area nicely */ background-size: cover; } /* 3. Inner Timeline Structure */ .timeline { width: 95%; /* Make inner structure slightly smaller */ } /* 4. Vertical Line */ .timeline::before { left: 0; /* Keep centered to the side of the content */ width: 2px; /* Make the line thinner */ } /* 5. Top Circle (at the start of the line) */ .timeline::after { left: 0; width: 12px; /* Make circle smaller */ height: 12px; } /* 6. Milestone Item Container */ .timeline-item { /* Reduce left padding to bring content closer to the line */ padding: 5px 5px 5px 55px; margin: 20px 0; min-height: 60px; /* Reduce minimum height */ } /* 7. Year Circle */ .timeline-circle { width: 50px; /* Smaller circle size */ height: 50px; font-size: 14px; /* Smaller font inside the circle */ left: 0; } /* 8. Content Box */ .timeline-content { padding: 10px; /* Smaller padding inside the box */ min-height: 80px; } /* 9. Content Typography */ .timeline-content h3 { font-size: 20px; /* Smaller title font */ margin-bottom: 5px; } .timeline-content ul { margin: 5px 0 0 15px; /* Adjust list indentation */ } .timeline-content li { font-size: 14px; /* Smaller list item font */ } } @media (max-width: 768px) { /* 1. Vertical Line and Top Circle (Move them left) */ .timeline::before, .timeline::after { left: 20px; /* Move the vertical line and its top circle to 20px from the left edge */ } /* 2. Year Circle (Position closer to the line) */ .timeline-circle { left: 20px; /* Aligns the center of the circle with the line's new position (20px) */ } /* 3. Milestone Item Container (Move content closer) */ .timeline-item { /* Reduce left padding significantly. The new padding (35px) should create a perfect gap between the circle's edge and the content box. */ padding: 5px 5px 5px 55px; /* Reduced from 55px to 55px. Let's try 45px for a tighter fit */ padding: 5px 5px 5px 45px; /* **Tighter left padding** */ margin: 20px 0; } } /* ================================ OUR JOURNEY – OVERRIDE STYLES ================================ */ /* 1️⃣ Timeline section default background (NOT hover) */ .our-journey, .timeline-section { background-color: #F5F7E8; /* soft light tone */ } /* Background image overlay (optional tint control) */ .our-journey::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.75); z-index: 0; } /* Ensure content stays above overlay */ .our-journey * { position: relative; z-index: 1; } /* 2️⃣ Timeline content card */ .timeline-content { background: #ffffff; border-radius: 14px; padding: 24px 28px; margin: 24px 0; /* spacing around card */ box-shadow: 0 8px 24px rgba(0,0,0,0.08); transition: all 0.3s ease; } /* Hover state */ .timeline-item:hover .timeline-content { background: #FFFBEA; /* hover color */ transform: translateY(-4px); } /* 3️⃣ Year circle (default & hover) */ .timeline-year { background: #ffffff; color: #555; border: 2px solid #D9D9D9; transition: all 0.3s ease; } .timeline-item:hover .timeline-year { background: #F4E7A3; border-color: #E2D27A; color: #333; } /* 4️⃣ Subheader text (Inter, 26px, #5B5B5B) */ .timeline-content h3 { font-family: "Inter", sans-serif; font-weight: 600; font-size: 26px; line-height: 24px; color: #5B5B5B; margin-bottom: 12px; } /* Body text */ .timeline-content p, .timeline-content li { font-family: "Inter", sans-serif; font-size: 16px; line-height: 24px; color: #666; } /* 5️⃣ Extra spacing between timeline items */ .timeline-item { margin-bottom: 48px; } /* 6️⃣ Custom scrollbar / slider design */ .our-journey::-webkit-scrollbar { width: 8px; } .our-journey::-webkit-scrollbar-track { background: transparent; } .our-journey::-webkit-scrollbar-thumb { background-color: #CFCFCF; border-radius: 10px; } .our-journey::-webkit-scrollbar-thumb:hover { background-color: #AFAFAF; } /* Firefox */ .our-journey { scrollbar-width: thin; scrollbar-color: #CFCFCF transparent; }