/* Pure-Link Telecom Website CSS Palette: Modern Infrastructure - Primary: #2D3748 (Dark Charcoal/Graphite) - Secondary: #FF6B00 (Vibrant Orange) - Accent: #A0AEC0 (Light Steel Blue) - Text/Neutral (Dark): #4A5568 (Medium Gray) - Text/Neutral (Light): #FFFFFF (White) Fonts: Authoritative & Approachable - Headings: 'Lato', sans-serif - Body: 'Noto Sans', sans-serif */ /* CSS Reset (Based on Normalize.css principles) */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } body { margin: 0; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } a { background-color: transparent; } abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } button, input { /* 1 */ overflow: visible; } button, select { /* 1 */ text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } /* Basic Body Styles */ body { font-family: 'Noto Sans', sans-serif; color: #4A5568; /* Medium Gray for text */ background-color: #FFFFFF; /* White background */ font-size: 16px; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: 'Lato', sans-serif; color: #2D3748; /* Dark Charcoal for headings */ margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.2; } p { margin-bottom: 1em; } a { color: #FF6B00; /* Vibrant Orange for links */ text-decoration: none; } a:hover, a:focus { text-decoration: underline; } /* Utility Classes (can be expanded) */ .container { width: 90%; max-width: 1100px; /* Standard container width */ margin-left: auto; margin-right: auto; padding-left: 20px; /* Consistent padding */ padding-right: 20px; } /* Add Google Fonts import here if not loading them via HTML */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Noto+Sans:wght@400;700&display=swap'); /* It's generally better to link fonts in the HTML for performance, but this works for now. */ /* Variables (CSS Custom Properties) */ :root { --primary-color: #2D3748; /* Dark Charcoal/Graphite */ --secondary-color: #FF6B00; /* Vibrant Orange */ --accent-color: #A0AEC0; /* Light Steel Blue */ --text-dark-color: #4A5568; /* Medium Gray */ --text-light-color: #FFFFFF; /* White */ --background-light-color: #F4F7F5; /* Off-White/Very Light Gray for subtle backgrounds */ --font-headings: 'Lato', sans-serif; --font-body: 'Noto Sans', sans-serif; --header-height: 80px; /* Example header height */ } /* Re-apply body styles using variables for consistency */ body { font-family: var(--font-body); color: var(--text-dark-color); background-color: var(--text-light-color); font-size: 16px; /* Base font size */ line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; /* Ensure footer sticks to bottom */ } main { flex-grow: 1; /* Allows main content to expand and push footer down */ } /* Re-apply heading styles using variables */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-headings); color: var(--primary-color); margin-top: 1.5em; margin-bottom: 0.75em; /* Adjusted margin */ line-height: 1.3; /* Slightly adjusted line height for headings */ font-weight: 700; /* Default bold for headings */ } h1 { font-size: 2.8em; } /* Larger H1 */ h2 { font-size: 2.2em; } /* Larger H2 */ h3 { font-size: 1.8em; } /* Adjust other heading sizes as needed */ /* Re-apply link styles using variables */ a { color: var(--secondary-color); text-decoration: none; transition: color 0.3s ease; } a:hover, a:focus { color: var(--primary-color); /* Darken on hover/focus */ text-decoration: underline; } img { max-width: 100%; height: auto; display: block; /* Remove extra space below images */ } /* General Section Styling */ section { padding: 60px 0; /* Standard vertical padding for sections */ } .bg-light { background-color: var(--background-light-color); /* For sections with a light background */ } /* Header & Navigation Styles */ header { background-color: var(--primary-color); color: var(--text-light-color); padding: 0 20px; /* Padding for header content */ height: var(--header-height); display: flex; align-items: center; position: sticky; /* Sticky header */ top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } header nav { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1100px; /* Align with .container */ margin: 0 auto; } header .site-logo-link img { height: 50px; /* Adjust logo size */ width: auto; } header nav ul { list-style: none; padding: 0; margin: 0; display: flex; } header nav ul li { margin-left: 25px; /* Spacing between nav items */ } header nav ul li a { color: var(--text-light-color); text-decoration: none; font-weight: 700; font-size: 1.1em; padding: 10px 5px; transition: color 0.3s ease, border-bottom 0.3s ease; border-bottom: 2px solid transparent; } header nav ul li a:hover, header nav ul li a:focus, header nav ul li a.active { color: var(--secondary-color); /* Orange for hover/active */ border-bottom: 2px solid var(--secondary-color); } /* Footer Styles */ footer { background-color: var(--primary-color); color: var(--text-light-color); text-align: center; padding: 30px 20px; margin-top: auto; /* Pushes footer to bottom if content is short */ } footer p { margin: 0; font-size: 0.9em; } footer a { color: var(--accent-color); /* Light steel blue for footer links */ } footer a:hover, footer a:focus { color: var(--secondary-color); /* Orange on hover */ } /* Button Styles */ .btn { display: inline-block; padding: 12px 25px; font-family: var(--font-headings); font-size: 1.1em; font-weight: 700; text-align: center; text-decoration: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; border: 2px solid transparent; } .btn-primary { background-color: var(--secondary-color); /* Vibrant Orange */ color: var(--text-light-color); border-color: var(--secondary-color); } .btn-primary:hover, .btn-primary:focus { background-color: #e65c00; /* Darker orange */ color: var(--text-light-color); text-decoration: none; transform: translateY(-2px); } .btn-secondary { background-color: transparent; color: var(--primary-color); /* Dark Charcoal */ border: 2px solid var(--primary-color); } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--primary-color); color: var(--text-light-color); text-decoration: none; transform: translateY(-2px); } /* Hero Section Basic Styles */ .hero-section { background-color: var(--primary-color); /* Default hero background */ color: var(--text-light-color); padding: 0; /* Remove padding, height will control space */ text-align: center; height: 450px; /* Fixed height for all hero sections */ display: flex; flex-direction: column; align-items: center; justify-content: center; /* Background image will be added per page via specific ID styles */ } .hero-section h1 { color: var(--text-light-color); font-size: 3.5em; /* Large hero heading */ margin-bottom: 0.3em; } .hero-section p { font-size: 1.3em; /* Slightly smaller paragraph text for hero */ margin-bottom: 1.2em; /* Reduced bottom margin */ max-width: 700px; margin-left: auto; margin-right: auto; opacity: 0.9; } .hero-section .btn { margin: 10px; margin-top: 20px; /* Add more space above buttons */ } /* Specific Hero Backgrounds (Placeholders - to be filled with actual image paths) */ #hero-home { background-image: url('../images/hero-homepage.jpg'); /* Update path if needed */ } #hero-services { background-image: url('../images/hero-services.jpg'); } #hero-about { background-image: url('../images/hero-about.jpg'); } #hero-portfolio { background-image: url('../images/hero-portfolio.jpg'); } #hero-contact { background-image: url('../images/hero-contact.jpg'); } /* Common hero background properties */ .hero-section { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; /* For potential overlays */ } /* Optional: Add a dark overlay to hero sections for better text readability over images */ .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */ z-index: 1; /* Ensure overlay is above background but below content */ } .hero-section .container { position: relative; /* Ensure content is above overlay */ z-index: 2; width: 100%; /* Ensure container takes width for text centering */ padding: 20px; /* Add some padding inside the container */ } /* Mobile Navigation Toggle Button Styling */ .mobile-nav-toggle { display: none; /* Hidden by default, shown in media query */ background: none; border: none; padding: 0; cursor: pointer; z-index: 1001; /* Above nav links */ } .mobile-nav-toggle .sr-only { /* For accessibility */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .mobile-nav-toggle span { display: block; width: 25px; height: 3px; background-color: var(--text-light-color); margin: 5px 0; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; border-radius: 1px; } /* Hamburger to X animation */ .mobile-nav-toggle.nav-open span:nth-child(2) { /* Middle bar */ transform: rotate(45deg) translate(4px, 4px); } .mobile-nav-toggle.nav-open span:nth-child(3) { /* Bottom bar */ opacity: 0; transform: translateX(-100%); } .mobile-nav-toggle.nav-open span:nth-child(4) { /* Top bar (becomes bottom of X) */ transform: rotate(-45deg) translate(3px, -3px); } /* Responsive Typography and Mobile Navigation */ @media (max-width: 768px) { body { font-size: 15px; } h1 { font-size: 2.2em; } h2 { font-size: 1.8em; } .hero-section h1 { font-size: 2.8em; } .hero-section p { font-size: 1.2em; } header { height: auto; /* Adjust height for mobile */ padding-top: 15px; padding-bottom: 15px; position: sticky; /* Keep sticky for mobile too */ } header nav { /* justify-content: space-between; /* Revert to space-between for logo and toggle */ /* align-items: center; */ } .mobile-nav-toggle { display: block; /* Show hamburger button */ /* Position it if needed, e.g., float right or absolute positioning within nav */ } header nav ul#main-nav-links { display: none; /* Hide nav links by default on mobile */ flex-direction: column; width: 100%; position: absolute; /* Position it below the header */ top: var(--header-height); /* Align with bottom of header */ left: 0; background-color: var(--primary-color); /* Same as header */ padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 999; /* Below toggle button but above page content */ } header nav ul#main-nav-links.nav-open { /* Changed selector to target ul directly */ display: flex; /* Show when nav-open class is present */ } header nav ul#main-nav-links li { margin: 0; /* Remove horizontal margins */ width: 100%; text-align: center; } header nav ul#main-nav-links li a { display: block; padding: 15px 20px; /* Generous padding for touch targets */ border-bottom: 1px solid rgba(255,255,255,0.1); /* Separator */ font-size: 1.1em; } header nav ul#main-nav-links li:last-child a { border-bottom: none; } header nav ul#main-nav-links li a:hover, header nav ul#main-nav-links li a:focus, header nav ul#main-nav-links li a.active { background-color: var(--secondary-color); color: var(--text-light-color); border-bottom-color: var(--secondary-color); /* Match background */ } /* Adjust header height for mobile if toggle is active */ header.nav-open { /* Potentially adjust if needed, but absolute positioning of menu should handle it */ } } /* Even smaller screens - further adjustments (mostly covered by 768px changes now) */ @media (max-width: 480px) { .hero-section { padding: 60px 0; /* Less padding on very small screens */ } .hero-section h1 { font-size: 2.2em; /* Even smaller heading on very small screens */ } } /* Homepage Specific Section Styles */ /* Why Pure Fiber Section (#why-pure-fiber) */ #why-pure-fiber { background-color: var(--background-light-color); /* Light background */ } #why-pure-fiber h2 { text-align: center; margin-bottom: 1.5em; } #why-pure-fiber ul { list-style: none; padding: 0; display: flex; justify-content: space-around; /* Adjust as needed */ flex-wrap: wrap; /* Allow wrapping on smaller screens */ gap: 30px; /* Space between items */ } #why-pure-fiber ul li { flex-basis: calc(33.333% - 20px); /* Approx 3 items per row, accounting for gap */ text-align: center; padding: 20px; background-color: var(--text-light-color); border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Add placeholder for icon styling here */ } #why-pure-fiber ul li img.benefit-icon { /* Assuming icons will be img tags */ max-height: 60px; /* Adjust icon size */ margin-bottom: 15px; } #why-pure-fiber ul li h3 { /* If using h3 for benefit titles */ color: var(--secondary-color); margin-bottom: 0.5em; } /* Core Services Overview Section (#core-services) */ #core-services { text-align: center; } #core-services h2 { margin-bottom: 1em; } #core-services > .container > p { /* Targeting the lead paragraph */ max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 2em; font-size: 1.1em; color: var(--text-dark-color); } .service-cards-container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; /* Space between cards */ } .service-card { background-color: var(--text-light-color); border: 1px solid #e0e0e0; border-radius: 8px; padding: 30px; flex-basis: calc(33.333% - 20px); /* Adjust for 3 cards per row, considering gap */ box-shadow: 0 5px 20px rgba(0,0,0,0.07); text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .service-card h3 { color: var(--primary-color); margin-top: 0; margin-bottom: 0.5em; } .service-card p { margin-bottom: 1em; font-size: 0.95em; } .service-card a { font-weight: 700; color: var(--secondary-color); text-decoration: none; } .service-card a:hover { text-decoration: underline; } /* The Power of Fiber Section (#power-of-fiber) */ #power-of-fiber { background-color: var(--primary-color); color: var(--text-light-color); } #power-of-fiber h2 { color: var(--text-light-color); text-align: center; margin-bottom: 1em; } #power-of-fiber p { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; font-size: 1.1em; opacity: 0.9; } /* Testimonials Section (#testimonials) */ #testimonials { background-color: var(--background-light-color); } #testimonials h2 { text-align: center; margin-bottom: 1.5em; } #testimonials p { /* Placeholder text styling */ text-align: center; font-style: italic; color: var(--text-dark-color); } /* Add more specific styling when actual testimonials are added (e.g., cards, quotes) */ /* Call to Action Section (#cta-home) */ #cta-home { background-color: var(--secondary-color); /* Vibrant Orange background */ color: var(--text-light-color); text-align: center; } #cta-home h2 { color: var(--text-light-color); margin-top: 0; margin-bottom: 0.5em; } #cta-home p { font-size: 1.2em; margin-bottom: 1.5em; opacity: 0.95; } #cta-home .btn-primary { /* Style CTA button specifically if needed */ background-color: var(--text-light-color); color: var(--secondary-color); border-color: var(--text-light-color); font-size: 1.2em; padding: 15px 30px; } #cta-home .btn-primary:hover { background-color: #f0f0f0; /* Slightly off-white hover */ color: var(--secondary-color); } /* Responsive adjustments for homepage sections */ @media (max-width: 992px) { /* Tablet */ #why-pure-fiber ul li, .service-card { flex-basis: calc(50% - 15px); /* 2 items per row */ } } @media (max-width: 576px) { /* Mobile */ #why-pure-fiber ul li, .service-card { flex-basis: 100%; /* 1 item per row */ } .service-cards-container { gap: 20px; } } /* Services Page Specific Section Styles */ /* Detailed Service Sections (#detailed-services) */ #detailed-services .service-item { margin-bottom: 50px; /* Space between service articles */ padding: 30px; background-color: var(--text-light-color); border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } #detailed-services .service-item:last-child { margin-bottom: 0; } #detailed-services .service-item h2 { color: var(--secondary-color); /* Orange for service titles */ margin-top: 0; margin-bottom: 0.75em; } #detailed-services .service-item p { line-height: 1.7; color: var(--text-dark-color); } /* Consider adding space for icons/images within .service-item if planned */ /* Our Process Section (#our-process) */ #our-process { background-color: var(--background-light-color); } #our-process h2 { text-align: center; margin-bottom: 1em; } #our-process > .container > p { /* Lead paragraph */ text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 2em; font-size: 1.1em; } #our-process ol { list-style: none; padding: 0; counter-reset: process-counter; /* For custom numbering */ display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } #our-process ol li { counter-increment: process-counter; position: relative; padding: 20px; padding-left: 50px; /* Space for the number */ background-color: var(--text-light-color); border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.07); flex-basis: calc(50% - 15px); /* Two items per row on larger screens */ margin-bottom: 20px; /* Ensure some space if they stack */ } #our-process ol li::before { content: counter(process-counter); position: absolute; left: 15px; top: 50%; transform: translateY(-50%); background-color: var(--secondary-color); color: var(--text-light-color); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-headings); } #our-process ol li h3 { /* If using h3 for step titles */ margin-top: 0; margin-bottom: 0.3em; font-size: 1.3em; } /* Call to Action Section (#cta-services) */ #cta-services { background-color: var(--primary-color); /* Dark Charcoal background */ color: var(--text-light-color); text-align: center; } #cta-services h2 { color: var(--text-light-color); margin-top: 0; margin-bottom: 0.5em; } #cta-services p { font-size: 1.2em; margin-bottom: 1.5em; opacity: 0.9; } #cta-services .btn-primary { background-color: var(--secondary-color); color: var(--text-light-color); border-color: var(--secondary-color); } #cta-services .btn-primary:hover { background-color: #e65c00; /* Darker orange */ color: var(--text-light-color); } /* Responsive adjustments for services page sections */ @media (max-width: 768px) { /* Tablet */ #our-process ol li { flex-basis: 100%; /* Stack process steps */ padding-left: 60px; /* Adjust padding for number */ } #our-process ol li::before { left: 20px; } } /* About Us Page Specific Section Styles */ /* Company Story Section (#company-story) */ #company-story h2 { text-align: center; margin-bottom: 1em; } #company-story p { max-width: 800px; margin-left: auto; margin-right: auto; text-align: justify; /* Justify for a more formal look, or use text-align: left */ line-height: 1.7; } /* Core Team Section (#core-team) */ #core-team { background-color: var(--background-light-color); } #core-team h2 { text-align: center; margin-bottom: 0.5em; } #core-team > .container > p { /* Lead paragraph for team section */ text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 2em; font-size: 1.1em; } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */ gap: 30px; } .team-member-card { background-color: var(--text-light-color); border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.07); padding: 25px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .team-member-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .team-member-card .team-member-photo { width: 150px; /* Adjust photo size */ height: 150px; border-radius: 50%; /* Circular photos */ object-fit: cover; /* Ensure photo covers the area */ margin: 0 auto 15px auto; border: 4px solid var(--accent-color); /* Light Steel Blue border */ } .team-member-card h3 { margin-top: 0; margin-bottom: 0.25em; color: var(--primary-color); } .team-member-card .member-title { color: var(--secondary-color); /* Orange for title */ font-weight: 700; margin-bottom: 0.75em; font-size: 1em; } .team-member-card .member-bio { font-size: 0.9em; line-height: 1.6; color: var(--text-dark-color); } /* Commitment Section (#commitment) */ #commitment { /* Already has .bg-light for background */ } #commitment h2 { text-align: center; margin-bottom: 1em; } #commitment p { max-width: 800px; margin-left: auto; margin-right: auto; text-align: justify; /* Or left */ line-height: 1.7; } /* Responsive adjustments for About Us page sections */ @media (max-width: 768px) { /* Tablet */ .team-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } @media (max-width: 576px) { /* Mobile */ .team-member-card .team-member-photo { width: 120px; height: 120px; } } /* Portfolio Page Specific Section Styles */ /* Project Showcase Section (#project-showcase) */ #project-showcase h2 { text-align: center; margin-bottom: 0.5em; } #project-showcase > .container > p { /* Lead paragraph */ text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 2em; font-size: 1.1em; } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */ gap: 30px; } .project-item { background-color: var(--text-light-color); border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.07); overflow: hidden; /* To contain image if it's part of the card */ display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .project-item img { /* If images are used directly in .project-item */ width: 100%; height: 200px; /* Fixed height for consistency */ object-fit: cover; } .project-item-content { /* If content is wrapped separately */ padding: 25px; flex-grow: 1; /* Allows content to fill space if cards have varying text length */ display: flex; flex-direction: column; } .project-item h3 { margin-top: 0; /* Or use .project-item-content h3 */ margin-bottom: 0.5em; color: var(--primary-color); } .project-item p { /* Or use .project-item-content p */ font-size: 0.95em; line-height: 1.6; color: var(--text-dark-color); flex-grow: 1; /* Pushes button to bottom */ margin-bottom: 1em; } .project-item .btn { /* Or use .project-item-content .btn */ margin-top: auto; /* Pushes button to the bottom of the card content */ align-self: flex-start; /* Align button to the left */ background-color: var(--secondary-color); color: var(--text-light-color); border-color: var(--secondary-color); } .project-item .btn:hover { background-color: #e65c00; color: var(--text-light-color); } /* Responsive adjustments for Portfolio page */ @media (max-width: 768px) { .project-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } /* Contact Us Page Specific Section Styles */ /* Contact Details & Form Section (#contact-details-form) */ .contact-flex-container { display: flex; flex-wrap: wrap; gap: 40px; /* Space between info block and form block */ } .contact-info-block, .contact-form-block { flex: 1; /* Allow them to share space */ min-width: 300px; /* Minimum width before stacking */ } .contact-info-block h2, .contact-form-block h2 { margin-top: 0; margin-bottom: 1em; color: var(--primary-color); } .contact-info-block ul { list-style: none; padding: 0; } .contact-info-block ul li { margin-bottom: 0.8em; font-size: 1.05em; color: var(--text-dark-color); } .contact-info-block ul li strong { color: var(--primary-color); } .contact-info-block p { font-size: 1.05em; } /* Contact Form Styling */ #contact-form div { margin-bottom: 20px; } #contact-form label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--primary-color); } #contact-form input[type="text"], #contact-form input[type="email"], #contact-form input[type="tel"], #contact-form textarea { width: 100%; padding: 12px; border: 1px solid #ccc; /* Softer border */ border-radius: 5px; font-family: var(--font-body); font-size: 1em; box-sizing: border-box; /* Ensure padding doesn't increase width */ transition: border-color 0.3s ease; } #contact-form input[type="text"]:focus, #contact-form input[type="email"]:focus, #contact-form input[type="tel"]:focus, #contact-form textarea:focus { border-color: var(--secondary-color); /* Orange border on focus */ outline: none; /* Remove default outline */ box-shadow: 0 0 5px rgba(255, 107, 0, 0.3); /* Subtle orange glow */ } #contact-form textarea { resize: vertical; /* Allow vertical resize only */ min-height: 120px; } #contact-form button[type="submit"] { /* Uses .btn and .btn-primary styles by default */ width: auto; /* Or width: 100%; for full-width button */ padding: 12px 30px; } /* Map Location Section (#map-location) */ #map-location { background-color: var(--background-light-color); } #map-location h2 { text-align: center; margin-bottom: 1em; } .map-placeholder { width: 100%; height: 400px; /* Adjust height as needed */ background-color: #e0e0e0; /* Placeholder background */ display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 8px; overflow: hidden; /* If using an img tag inside */ } .map-placeholder img { width: 100%; height: 100%; object-fit: cover; } .map-placeholder p { color: var(--text-dark-color); } /* Responsive adjustments for Contact page */ @media (max-width: 768px) { .contact-flex-container { flex-direction: column; /* Stack info and form */ } }