/* ==========================================================================
UTILITY CLASSES
========================================================================== */
/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-light { color: var(--text-light); }
.text-dark { color: var(--text-dark); }
.text-white { color: var(--white); }
.font-weight-normal { font-weight: 400; }
.font-weight-bold { font-weight: 700; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
/* Spacing Utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }
.mr-3 { margin-right: var(--spacing-md); }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-xs); }
.pt-2 { padding-top: var(--spacing-sm); }
.pt-3 { padding-top: var(--spacing-md); }
.pt-4 { padding-top: var(--spacing-lg); }
.pt-5 { padding-top: var(--spacing-xl); }
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-xs); }
.pb-2 { padding-bottom: var(--spacing-sm); }
.pb-3 { padding-bottom: var(--spacing-md); }
.pb-4 { padding-bottom: var(--spacing-lg); }
.pb-5 { padding-bottom: var(--spacing-xl); }
/* Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
/* Flex Utilities */
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.flex-direction-row { flex-direction: row; }
.flex-direction-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
/* Background Utilities */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-light { background-color: var(--light-gray); }
.bg-white { background-color: var(--white); }
.bg-transparent { background-color: transparent; }
.bg-success { background-color: var(--success-color); }
.bg-warning { background-color: var(--warning-color); }
/* Border Utilities */
.border { border: 1px solid var(--border-color); }
.border-top { border-top: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-left { border-left: 1px solid var(--border-color); }
.border-right { border-right: 1px solid var(--border-color); }
.border-0 { border: none; }
.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-circle { border-radius: 50%; }
/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-light); }
.shadow { box-shadow: var(--shadow-medium); }
.shadow-lg { box-shadow: var(--shadow-heavy); }
.shadow-none { box-shadow: none; }
/* Position Utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-static { position: static; }
/* Width Utilities */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
/* Text Color Utilities */
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
/* Icon spacing in buttons */
.btn i {
margin-right: 8px;
}
/* ==========================================================================
ANIMATIONS AND TRANSITIONS
========================================================================== */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Animation Classes */
.animate-fadeIn {
animation: fadeIn 0.6s ease-out;
}
.animate-fadeInUp {
animation: fadeInUp 0.6s ease-out;
}
.animate-fadeInDown {
animation: fadeInDown 0.6s ease-out;
}
.animate-slideInLeft {
animation: slideInLeft 0.6s ease-out;
}
.animate-slideInRight {
animation: slideInRight 0.6s ease-out;
}
.animate-pulse {
animation: pulse 2s infinite;
}
.animate-spin {
animation: spin 1s linear infinite;
}
/* Loading States */
.loading {
position: relative;
pointer-events: none;
opacity: 0.6;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--primary-color);
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* ==========================================================================
RESPONSIVE DESIGN BREAKPOINTS
========================================================================== */
/* Extra small devices (phones, 576px and down) */
@media (max-width: 575.98px) {
.container {
padding: 0 var(--spacing-sm);
}
.section {
padding: var(--spacing-md) 0;
}
.section-title {
font-size: 2rem;
}
.hero-title {
font-size: 2rem;
}
.btn {
width: 100%;
margin-bottom: var(--spacing-sm);
white-space: normal;
text-align: center;
}
.services-grid,
.projects-grid {
grid-template-columns: 1fr;
}
.col-sm-12 { width: 100%; }
/* About Section Mobile Optimizations */
.about-preview {
padding: var(--spacing-lg) 0;
}
.about-preview .container {
padding: 0 var(--spacing-md);
}
.about-preview .row {
flex-direction: column;
margin: 0;
}
.about-preview .col-6 {
width: 100%;
padding: 0;
margin-bottom: var(--spacing-lg);
}
.about-preview .col-6:first-child {
order: 2;
margin-bottom: 0;
}
.about-preview .col-6:last-child {
order: 1;
margin-bottom: var(--spacing-xl);
}
.about-content h2 {
font-size: 1.8rem;
line-height: 1.3;
margin-bottom: var(--spacing-md);
text-align: center;
}
.about-content p {
font-size: 1rem;
margin-bottom: var(--spacing-md);
text-align: left;
}
.about-features {
margin: var(--spacing-lg) 0;
}
.feature-item {
background: var(--white);
padding: var(--spacing-md);
margin-bottom: var(--spacing-md);
border-radius: var(--radius-md);
box-shadow: var(--shadow-light);
border-left: 4px solid var(--success-color);
}
.feature-item strong {
font-size: 1rem;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.feature-item strong::before {
content: '✓';
background: var(--success-color);
color: var(--white);
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
margin-right: 10px;
flex-shrink: 0;
}
.feature-item p {
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
color: var(--text-light);
}
.about-image {
text-align: center;
}
.about-image img {
max-width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-medium);
}
/* Enhanced About Section Mobile */
.about-main-title {
font-size: 1.8rem;
text-align: center;
margin-bottom: var(--spacing-lg);
}
.stats-mini-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
margin: var(--spacing-lg) 0;
}
.about-buttons {
flex-direction: column;
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.about-buttons .btn {
width: 100%;
text-align: center;
padding: var(--spacing-md) var(--spacing-lg);
}
.floating-card {
position: static;
margin: var(--spacing-sm) 0;
animation: none;
transform: none;
}
.decorative-shape {
display: none;
}
.feature-item-enhanced {
margin-bottom: var(--spacing-md);
padding: var(--spacing-md);
}
.feature-item-enhanced:hover {
transform: none;
}
.mission-card {
margin: var(--spacing-lg) 0;
padding: var(--spacing-lg);
}
.mission-text {
font-size: 1rem;
text-align: center;
}
.badge-custom {
font-size: 11px;
padding: 8px 20px;
}
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
.container {
max-width: var(--container-sm);
}
.col-sm-6 { width: 50%; }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
.container {
max-width: var(--container-md);
}
.col-md-4 { width: 33.333%; }
.col-md-6 { width: 50%; }
.col-md-12 { width: 100%; }
/* About Section Tablet */
.about-main-title {
font-size: 2.5rem;
}
.stats-mini-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
.container {
max-width: var(--container-lg);
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.container {
max-width: var(--container-xl);
}
}
/* Enhanced Counter Animation Styles */
.stat-number {
transition: all 0.3s ease;
display: inline-block;
}
.stat-number.animating {
transform: scale(1.1);
color: var(--lemon-green);
}
/* Add a subtle glow effect during animation */
.stats-section .stat-item:hover .stat-number {
text-shadow: 0 0 10px rgba(196, 30, 58, 0.5);
transform: scale(1.05);
}
/* Ensure counters are visible and properly styled */
.stats-section .stat-number {
font-weight: 700;
font-size: 3rem;
line-height: 1;
color: var(--white);
}
/* Mobile responsive counter sizing */
@media (max-width: 768px) {
.stats-section .stat-number {
font-size: 2.5rem;
}
}
@media (max-width: 480px) {
.stats-section .stat-number {
font-size: 2rem;
}
}
/* ==========================================================================
QUOTE PAGE STYLES
========================================================================== */
/* Quote Benefits Grid */
.quote-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.benefit-item {
text-align: center;
padding: 2rem 1rem;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
}
.benefit-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.benefit-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), #E74C3C);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2rem;
}
.benefit-item h3 {
color: var(--text-dark);
margin-bottom: 1rem;
font-size: 1.3rem;
font-weight: 600;
}
.benefit-item p {
color: var(--text-light);
line-height: 1.6;
}
/* Quote Form Container */
.quote-form-container {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
padding: 2.5rem;
margin-bottom: 2rem;
}
/* Form Sections */
.form-section {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--light-gray);
}
.form-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.form-section-title {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--primary-color);
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--light-gray);
}
.form-section-title i {
color: var(--primary-color);
}
/* Form Controls */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--text-dark);
font-size: 0.95rem;
}
.form-control {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 1rem;
font-family: inherit;
transition: all 0.3s ease;
background: var(--white);
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}
.form-control:invalid {
border-color: var(--error-color);
}
.form-control:valid {
border-color: var(--success-color);
}
/* Select Styling */
select.form-control {
cursor: pointer;
background-image: url("data:image/svg+xml;charset=UTF-8,");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 12px;
padding-right: 2.5rem;
}
/* Textarea Styling */
textarea.form-control {
resize: vertical;
min-height: 120px;
line-height: 1.5;
}
/* Checkbox and Radio Groups */
.checkbox-group,
.radio-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 0.5rem;
}
.checkbox-item,
.radio-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
border-radius: var(--radius-sm);
transition: background-color 0.3s ease;
}
.checkbox-item:hover,
.radio-item:hover {
background: var(--light-gray);
}
.checkbox-item input[type="checkbox"],
.radio-item input[type="radio"] {
width: 18px;
height: 18px;
accent-color: var(--primary-color);
cursor: pointer;
}
.checkbox-item label,
.radio-item label {
cursor: pointer;
margin-bottom: 0;
font-weight: 400;
}
/* File Upload Area */
.file-upload-area {
border: 2px dashed var(--border-color);
border-radius: var(--radius-lg);
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
background: var(--light-gray);
}
.file-upload-area:hover {
border-color: var(--primary-color);
background: rgba(196, 30, 58, 0.05);
}
.file-upload-content i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.file-upload-content h4 {
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.file-upload-content p {
color: var(--text-light);
margin-bottom: 1rem;
}
.file-upload-area input[type="file"] {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.file-upload-list {
margin-top: 1rem;
text-align: left;
}
.file-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
background: var(--white);
border-radius: var(--radius-md);
margin-bottom: 0.5rem;
box-shadow: var(--shadow-light);
}
.file-item-name {
display: flex;
align-items: center;
gap: 0.5rem;
}
.file-item-remove {
background: var(--error-color);
color: var(--white);
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
}
/* Form Actions */
.form-actions {
text-align: center;
padding-top: 2rem;
border-top: 2px solid var(--light-gray);
}
.form-help-text {
margin-top: 1rem;
color: var(--text-light);
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
/* Success Message */
.success-message {
background: var(--white);
border-radius: var(--radius-lg);
padding: 3rem 2rem;
text-align: center;
box-shadow: var(--shadow-medium);
border: 3px solid var(--success-color);
}
.success-icon {
color: var(--success-color);
font-size: 4rem;
margin-bottom: 1.5rem;
}
.success-message h3 {
color: var(--success-color);
margin-bottom: 1rem;
font-size: 1.8rem;
}
.success-message p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 1rem;
}
.success-message ul {
text-align: left;
margin: 1rem 0;
padding-left: 2rem;
}
.success-message li {
color: var(--text-light);
margin-bottom: 0.5rem;
}
.success-actions {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}
/* Quote Sidebar */
.quote-sidebar {
position: sticky;
top: 100px;
}
.sidebar-card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
padding: 2rem;
margin-bottom: 2rem;
}
.sidebar-card h3 {
color: var(--text-dark);
margin-bottom: 1rem;
font-size: 1.3rem;
font-weight: 600;
}
.sidebar-card p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 1.5rem;
}
/* Contact Items in Sidebar */
.contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--light-gray);
}
.contact-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.contact-item i {
color: var(--primary-color);
font-size: 1.2rem;
margin-top: 0.2rem;
width: 20px;
text-align: center;
}
.contact-item div strong {
display: block;
color: var(--text-dark);
font-weight: 600;
margin-bottom: 0.25rem;
}
.contact-item div p {
color: var(--text-light);
margin-bottom: 0;
font-size: 0.95rem;
line-height: 1.4;
}
/* Process Steps */
.process-steps {
position: relative;
}
.process-step {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
position: relative;
}
.process-step:last-child {
margin-bottom: 0;
}
.process-step::before {
content: '';
position: absolute;
left: 22px;
top: 45px;
width: 2px;
height: calc(100% + 1rem);
background: var(--light-gray);
}
.process-step:last-child::before {
display: none;
}
.step-number {
width: 45px;
height: 45px;
background: var(--primary-color);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.1rem;
flex-shrink: 0;
z-index: 1;
position: relative;
}
.step-content h4 {
color: var(--text-dark);
margin-bottom: 0.5rem;
font-weight: 600;
}
.step-content p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 0;
}
/* Feature List */
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--text-light);
}
.feature-list li i {
color: var(--success-color);
font-size: 1rem;
width: 16px;
}
/* FAQ Section */
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
margin-bottom: 1rem;
overflow: hidden;
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 2rem;
cursor: pointer;
background: var(--white);
transition: background-color 0.3s ease;
}
.faq-question:hover {
background: var(--light-gray);
}
.faq-question h3 {
color: var(--text-dark);
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
.faq-question i {
color: var(--primary-color);
transition: transform 0.3s ease;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 2rem 1.5rem;
display: none;
}
.faq-item.active .faq-answer {
display: block;
animation: fadeIn 0.3s ease;
}
.faq-answer p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 0;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.quote-benefits-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.benefit-item {
padding: 1.5rem 1rem;
}
.benefit-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.quote-form-container {
padding: 1.5rem;
}
.form-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.form-section-title {
font-size: 1.2rem;
}
.checkbox-group,
.radio-group {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.file-upload-area {
padding: 1.5rem;
}
.file-upload-content i {
font-size: 2rem;
}
.sidebar-card {
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.process-step {
gap: 0.75rem;
}
.step-number {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.process-step::before {
left: 17px;
}
.success-message {
padding: 2rem 1.5rem;
}
.success-actions {
flex-direction: column;
align-items: center;
}
.faq-question {
padding: 1rem 1.5rem;
}
.faq-answer {
padding: 0 1.5rem 1rem;
}
}
@media (max-width: 992px) {
.col-8 {
width: 100%;
}
.col-4 {
width: 100%;
margin-top: 2rem;
}
.quote-sidebar {
position: static;
}
}
/* Form Field Error States */
.field-error {
color: var(--error-color);
font-size: 0.9rem;
margin-top: 5px;
display: flex;
align-items: center;
gap: 0.25rem;
}
.field-error::before {
content: '⚠';
font-weight: bold;
}
/* Loading States for Quote Form */
.quote-form.loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}
.quote-form.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 3px solid var(--light-gray);
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 10;
}
/* Active Navigation State for Quote Page */
.nav-item a.active {
background-color: var(--primary-color);
color: var(--white) !important;
}
/* Text Color Utilities for Quote Page */
.text-white {
color: var(--white) !important;
}
.text-white .section-title,
.text-white .section-subtitle {
color: var(--white) !important;
}
/* ==========================================================================
Hope Height Developers - Main Stylesheet
========================================================================== */
/* ==========================================================================
GLOBAL STYLES / RESET
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', 'Arial', 'Helvetica', sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
img {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
/* ==========================================================================
VARIABLES / COLORS
========================================================================== */
:root {
--primary-color: #C41E3A; /* Hope Height Red */
--secondary-color: #2C3E50; /* Dark Gray */
--accent-color: #34495E; /* Darker Gray */
--light-gray: #ECF0F1; /* Light Background */
--white: #FFFFFF;
--black: #000000;
--text-dark: #2C3E50;
--text-light: #7F8C8D;
--border-color: #BDC3C7;
--success-color: #27AE60;
--warning-color: #F39C12;
--error-color: #E74C3C;
--lemon-green: #32CD32;
/* Shadows */
--shadow-light: 0 2px 10px rgba(0,0,0,0.1);
--shadow-medium: 0 4px 20px rgba(0,0,0,0.15);
--shadow-heavy: 0 8px 30px rgba(0,0,0,0.2);
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 3rem;
--spacing-xl: 4rem;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
/* Container Widths */
--container-sm: 540px;
--container-md: 720px;
--container-lg: 960px;
--container-xl: 1140px;
--container-xxl: 1320px;
}
/* ==========================================================================
GLOBAL COMPONENTS
========================================================================== */
/* Container */
.container {
width: 100%;
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--spacing-sm);
}
.container-fluid {
width: 100%;
padding: 0 var(--spacing-sm);
}
/* Skip link for accessibility */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--primary-color);
color: white;
padding: 8px;
text-decoration: none;
z-index: 1001;
transition: top 0.3s;
}
.skip-link:focus {
top: 6px;
}
/* Buttons */
.btn {
display: inline-block;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
text-align: center;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
text-decoration: none;
}
.btn-primary {
background-color: var(--primary-color);
color: var(--white);
}
.btn-primary:hover {
background-color: #A01729;
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.btn-secondary {
background-color: var(--secondary-color);
color: var(--white);
}
.btn-secondary:hover {
background-color: var(--accent-color);
transform: translateY(-2px);
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.btn-outline:hover {
background-color: var(--primary-color);
color: var(--white);
}
.btn-lg {
padding: 16px 32px;
font-size: 18px;
}
.btn-sm {
padding: 8px 16px;
font-size: 14px;
}
/* Section Styles */
.section {
padding: var(--spacing-xl) 0;
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: var(--spacing-sm);
}
.section-subtitle {
font-size: 1.2rem;
color: var(--text-light);
max-width: 600px;
margin: 0 auto;
}
/* Cards */
.card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
overflow: hidden;
transition: all 0.3s ease;
}
.card:hover {
box-shadow: var(--shadow-medium);
transform: translateY(-5px);
}
.card-header {
padding: var(--spacing-md);
border-bottom: 1px solid var(--border-color);
}
.card-body {
padding: var(--spacing-md);
}
.card-footer {
padding: var(--spacing-md);
border-top: 1px solid var(--border-color);
background-color: var(--light-gray);
}
/* Grid System */
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.col {
flex: 1;
padding: 0 15px;
}
.col-12 { width: 100%; }
.col-6 { width: 50%; }
.col-4 { width: 33.333%; }
.col-3 { width: 25%; }
@media (max-width: 768px) {
.col-md-12 { width: 100%; }
.col-sm-6 { width: 50%; }
/* About Section Mobile Improvements */
.col-6 {
width: 100%;
margin-bottom: var(--spacing-md);
}
.about-preview .row {
flex-direction: column;
}
.about-preview .col-6:first-child {
order: 2;
margin-bottom: 0;
}
.about-preview .col-6:last-child {
order: 1;
margin-bottom: var(--spacing-lg);
}
}
/* ==========================================================================
HEADER STYLES
========================================================================== */
header {
background: var(--white);
box-shadow: var(--shadow-light);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: all 0.3s ease;
}
.header-scrolled {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-sm) 0;
min-height: 70px;
}
.logo {
display: flex;
align-items: center;
z-index: 1001;
}
.logo img {
height: 50px;
width: auto;
}
/* Desktop Navigation */
.nav-menu {
display: flex;
list-style: none;
gap: var(--spacing-md);
margin: 0;
padding: 0;
}
.nav-item {
position: relative;
}
.nav-link {
display: block;
padding: var(--spacing-sm);
font-weight: 500;
color: var(--text-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
color: var(--primary-color);
}
.nav-dropdown {
position: absolute;
top: 100%;
left: 0;
background: var(--white);
min-width: 200px;
box-shadow: var(--shadow-medium);
border-radius: var(--radius-md);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.nav-item:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
display: block;
padding: var(--spacing-sm) var(--spacing-md);
color: var(--text-dark);
border-bottom: 1px solid var(--light-gray);
text-decoration: none;
}
.dropdown-item:hover {
background: var(--light-gray);
color: var(--primary-color);
}
/* Mobile menu toggle */
.mobile-menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
padding: 8px;
z-index: 1002;
background: none;
border: none;
}
.mobile-menu-toggle span {
width: 25px;
height: 3px;
background: var(--text-dark);
margin: 3px 0;
transition: 0.3s;
border-radius: 2px;
}
/* Mobile Navigation Fixes */
@media (max-width: 768px) {
.mobile-menu-toggle {
display: flex;
order: 3;
}
.logo {
order: 1;
flex: 1;
}
.navbar {
padding: 0.75rem var(--spacing-sm);
position: relative;
}
.nav-menu {
position: fixed;
top: 70px;
left: 0;
right: 0;
background: var(--white);
flex-direction: column;
padding: var(--spacing-md);
box-shadow: var(--shadow-medium);
transform: translateX(-100%);
transition: transform 0.3s ease;
gap: 0;
max-height: calc(100vh - 70px);
overflow-y: auto;
z-index: 999;
}
.nav-menu.active {
transform: translateX(0);
}
.nav-item {
width: 100%;
border-bottom: 1px solid var(--light-gray);
}
.nav-item:last-child {
border-bottom: none;
}
.nav-link {
padding: 1rem 0;
font-size: 1.1rem;
width: 100%;
text-align: left;
display: block;
}
.nav-dropdown {
position: static;
box-shadow: none;
border-radius: 0;
opacity: 1;
visibility: visible;
transform: none;
background: var(--light-gray);
margin-top: var(--spacing-sm);
}
.dropdown-item {
padding: 0.75rem var(--spacing-md);
font-size: 0.95rem;
}
}
/* Mobile menu toggle animation */
.mobile-menu-toggle.active span:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
/* ==========================================================================
TEAM PAGE STYLES
========================================================================== */
/* Team specific styles */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.team-member {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
text-align: center;
}
.team-member:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-medium);
}
.member-photo {
width: 100%;
height: 300px;
background: var(--light-gray);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.member-photo::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(196, 30, 58, 0.8), rgba(44, 62, 80, 0.8));
opacity: 0;
transition: opacity 0.3s ease;
}
.team-member:hover .member-photo::before {
opacity: 1;
}
.member-info {
padding: 1.5rem;
}
.member-name {
font-size: 1.4rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.member-title {
color: var(--primary-color);
font-weight: 500;
margin-bottom: 1rem;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 0.5px;
}
.member-description {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 1rem;
}
.member-skills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 1rem;
}
.skill-tag {
background: var(--light-gray);
color: var(--text-dark);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
}
.member-contact {
display: flex;
justify-content: center;
gap: 1rem;
}
.contact-link {
width: 40px;
height: 40px;
background: var(--primary-color);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.contact-link:hover {
background: var(--secondary-color);
transform: translateY(-2px);
}
.directors-section {
background: var(--light-gray);
}
.staff-section {
background: var(--white);
}
.section-badge {
background: var(--primary-color);
color: var(--white);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
display: inline-block;
margin-bottom: 1rem;
}
@media (max-width: 768px) {
.team-grid {
grid-template-columns: 1fr;
}
.member-photo {
height: 250px;
}
}
/* ==========================================================================
HOMEPAGE STYLES
========================================================================== */
/* ==========================================================================
HERO SECTION WITH BACKGROUND IMAGE
========================================================================== */
/* Update existing hero section */
.hero-with-image {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
text-align: center;
overflow: hidden;
margin-top: 70px;
}
/* Hero Background Image Container */
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.hero-bg-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.7) contrast(1.1);
transition: transform 8s ease-out;
}
/* Subtle zoom effect on load */
.hero-bg-image {
transform: scale(1.05);
}
.hero-with-image.loaded .hero-bg-image {
transform: scale(1);
}
/* Hero Overlay */
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(44, 62, 80, 0.8),
rgba(196, 30, 58, 0.7)
);
z-index: 2;
}
/* Hero Content */
.hero-with-image .container {
position: relative;
z-index: 3;
}
.hero-with-image .hero-content {
color: var(--white);
max-width: 800px;
margin: 0 auto;
padding: 2rem 1rem;
}
.hero-with-image .hero-title {
color: var(--white);
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
margin-bottom: 1.5rem;
}
.hero-with-image .hero-subtitle {
color: rgba(255, 255, 255, 0.95);
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
margin-bottom: 2.5rem;
}
/* Enhanced CTA Buttons */
.hero-with-image .hero-cta {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.hero-with-image .btn {
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.hero-with-image .btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.hero-with-image .btn-outline {
border-color: rgba(255,255,255,0.8);
color: var(--white);
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
}
.hero-with-image .btn-outline:hover {
background: var(--white);
color: var(--primary-color);
border-color: var(--white);
}
/* Hero Scroll Indicator */
.hero-scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
}
.scroll-down {
display: inline-block;
width: 40px;
height: 40px;
border: 2px solid rgba(255,255,255,0.7);
border-radius: 50%;
color: rgba(255,255,255,0.8);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
animation: bounce 2s infinite;
}
.scroll-down:hover {
border-color: var(--white);
color: var(--white);
background: rgba(255,255,255,0.1);
transform: translateY(-2px);
}
/* Smooth scroll for anchor links */
html {
scroll-behavior: smooth;
}
/* Bounce animation for scroll indicator */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* Parallax Effect (Optional) */
@media (min-width: 1024px) {
.hero-bg-image {
transform: scale(1.1);
transition: transform 0.1s ease-out;
}
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.hero-with-image {
min-height: 80vh;
margin-top: 70px;
}
.hero-with-image .hero-content {
padding: 1rem 0.5rem;
}
.hero-with-image .hero-title {
font-size: 2.2rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.hero-with-image .hero-subtitle {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.hero-with-image .hero-cta {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.hero-with-image .btn {
width: 100%;
max-width: 280px;
padding: 1rem 2rem;
font-size: 1rem;
}
.hero-scroll-indicator {
bottom: 20px;
}
.scroll-down {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.hero-with-image .hero-title {
font-size: 1.8rem;
}
.hero-with-image .hero-subtitle {
font-size: 1rem;
padding: 0 1rem;
}
.hero-overlay {
background: linear-gradient(
135deg,
rgba(44, 62, 80, 0.85),
rgba(196, 30, 58, 0.75)
);
}
}
/* Performance Optimizations */
.hero-bg-image {
will-change: transform;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.hero-bg-image {
transition: none;
transform: none;
}
.scroll-down {
animation: none;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
}
}
/* Focus states for accessibility */
.scroll-down:focus {
outline: 2px solid var(--white);
outline-offset: 2px;
}
/* Alternative: CSS-only background image approach */
.hero-css-bg {
background: linear-gradient(
135deg,
rgba(44, 62, 80, 0.8),
rgba(196, 30, 58, 0.7)
), url('assets/images/hero/construction-hero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* Creates parallax effect */
}
/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
.hero-with-image .btn-outline {
background: rgba(255,255,255,0.2);
}
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, rgba(44, 62, 80, 0.9), rgba(196, 30, 58, 0.8)),
url('data:image/svg+xml,');
background-size: cover;
background-position: center;
color: var(--white);
min-height: 100vh;
display: flex;
align-items: center;
text-align: center;
position: relative;
margin-top: 70px;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: var(--spacing-md);
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.4rem;
margin-bottom: var(--spacing-lg);
opacity: 0.9;
}
.hero-cta {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.hero-cta {
flex-direction: column;
align-items: center;
}
}
/* Featured Services */
.featured-services {
background: var(--light-gray);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.service-card {
background: var(--white);
padding: var(--spacing-lg);
text-align: center;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-medium);
}
.service-icon {
width: 80px;
height: 80px;
background: var(--primary-color);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-md);
font-size: 2rem;
}
.service-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--text-dark);
}
.service-description {
color: var(--text-light);
margin-bottom: var(--spacing-md);
line-height: 1.6;
}
/* Featured Projects */
.featured-projects {
background: var(--white);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.project-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.project-image {
height: 250px;
background-size: cover;
background-position: center;
position: relative;
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
display: flex;
align-items: flex-end;
padding: var(--spacing-md);
}
.project-info h3 {
color: var(--white);
font-size: 1.3rem;
margin-bottom: var(--spacing-xs);
}
.project-info p {
color: rgba(255,255,255,0.8);
font-size: 0.9rem;
}
.project-content {
padding: var(--spacing-md);
}
.project-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--text-dark);
}
.project-description {
color: var(--text-light);
margin-bottom: var(--spacing-md);
line-height: 1.6;
}
.project-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: var(--text-light);
}
.project-category {
background: var(--primary-color);
color: var(--white);
padding: 4px 8px;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 500;
}
/* Quick Stats */
.stats-section {
background: var(--primary-color);
color: var(--white);
text-align: center;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.stat-item {
padding: var(--spacing-md);
}
.stat-number {
font-size: 3rem;
font-weight: 700;
display: block;
margin-bottom: var(--spacing-sm);
}
.stat-label {
font-size: 1.1rem;
opacity: 0.9;
}
/* Testimonials */
.testimonials {
background: var(--light-gray);
}
.testimonials-slider {
max-width: 800px;
margin: var(--spacing-lg) auto 0;
text-align: center;
}
.testimonial-item {
padding: var(--spacing-lg);
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
margin: 0 var(--spacing-sm);
}
.testimonial-text {
font-size: 1.2rem;
font-style: italic;
margin-bottom: var(--spacing-md);
color: var(--text-dark);
line-height: 1.6;
}
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--light-gray);
background-size: cover;
background-position: center;
}
.author-info h4 {
color: var(--text-dark);
margin-bottom: 2px;
}
.author-info p {
color: var(--text-light);
font-size: 0.9rem;
}
/* About Preview */
.about-preview {
background: var(--light-gray);
}
.about-content h2 {
font-size: 2rem;
color: var(--text-dark);
margin-bottom: var(--spacing-md);
}
.about-content p {
color: var(--text-light);
line-height: 1.8;
margin-bottom: var(--spacing-md);
}
.about-features {
margin: var(--spacing-md) 0;
}
.feature-item {
margin-bottom: var(--spacing-sm);
}
.feature-item strong {
color: var(--success-color);
display: block;
margin-bottom: 4px;
}
.feature-item p {
margin-bottom: 0;
font-size: 0.9rem;
}
.about-image img {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-medium);
}
/* ==========================================================================
ENHANCED ABOUT SECTION STYLES
========================================================================== */
/* Badge Custom */
.badge-custom {
background: linear-gradient(135deg, var(--primary-color), #E74C3C);
color: var(--white);
padding: 10px 25px;
border-radius: 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
box-shadow: var(--shadow-light);
display: inline-block;
}
/* About Main Title */
.about-main-title {
font-size: 2.8rem;
font-weight: 700;
line-height: 1.2;
color: var(--text-dark);
}
/* Mission Card */
.mission-card {
background: linear-gradient(135deg, rgba(196, 30, 58, 0.05), rgba(231, 76, 60, 0.05));
border: 1px solid rgba(196, 30, 58, 0.1);
border-left: 4px solid var(--primary-color);
border-radius: var(--radius-lg);
padding: var(--spacing-md);
position: relative;
box-shadow: var(--shadow-light);
}
.mission-icon {
position: absolute;
top: -10px;
right: 20px;
background: var(--primary-color);
color: var(--white);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.mission-text {
font-style: italic;
color: var(--text-dark);
margin: 0;
line-height: 1.6;
font-size: 1.05rem;
}
/* About Description */
.about-description {
font-size: 1.1rem;
color: var(--text-light);
line-height: 1.7;
}
/* Enhanced Feature Items */
.feature-item-enhanced {
display: flex;
align-items: flex-start;
margin-bottom: var(--spacing-md);
padding: var(--spacing-sm);
border-radius: var(--radius-md);
transition: all 0.3s ease;
background: var(--white);
box-shadow: var(--shadow-light);
}
.feature-item-enhanced:hover {
transform: translateX(10px);
box-shadow: var(--shadow-medium);
}
.feature-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--spacing-sm);
color: var(--white);
font-size: 1.2rem;
flex-shrink: 0;
}
.feature-content {
flex: 1;
}
.feature-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px;
}
.feature-description {
font-size: 0.95rem;
color: var(--text-light);
margin: 0;
line-height: 1.5;
}
/* Mini Stats Grid */
.stats-mini-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-sm);
}
.stat-mini-item {
background: var(--white);
padding: var(--spacing-sm);
border-radius: var(--radius-md);
text-align: center;
box-shadow: var(--shadow-light);
transition: transform 0.3s ease;
}
.stat-mini-item:hover {
transform: translateY(-5px);
}
.stat-mini-number {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 5px;
}
.stat-mini-label {
font-size: 0.85rem;
color: var(--text-light);
margin: 0;
}
/* About Buttons */
.about-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.about-buttons .btn i {
margin-right: 8px;
}
/* About Image Container */
.about-image-container {
position: relative;
padding: 20px;
}
.about-image-wrapper {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
}
.about-main-image {
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
.about-image-wrapper:hover .about-main-image {
transform: scale(1.05);
}
/* Floating Cards */
.floating-card {
position: absolute;
padding: var(--spacing-sm);
border-radius: var(--radius-md);
box-shadow: var(--shadow-medium);
z-index: 2;
min-width: 120px;
text-align: center;
animation: float 6s ease-in-out infinite;
}
.floating-card-1 {
background: var(--white);
top: 20px;
right: 20px;
animation-delay: 0s;
}
.floating-card-2 {
background: var(--primary-color);
bottom: 30px;
left: 20px;
animation-delay: 3s;
}
.floating-card-content h4 {
margin-bottom: 5px;
font-size: 1.3rem;
}
.floating-card-content small {
font-size: 0.8rem;
}
/* Decorative Shapes */
.decorative-shape {
position: absolute;
border-radius: 50%;
z-index: 1;
}
.shape-1 {
width: 60px;
height: 60px;
background: rgba(196, 30, 58, 0.1);
top: -20px;
left: -20px;
animation: pulse 4s infinite;
}
.shape-2 {
width: 40px;
height: 40px;
background: rgba(39, 174, 96, 0.15);
bottom: -10px;
right: -10px;
animation: pulse 4s infinite 2s;
}
.shape-3 {
width: 80px;
height: 80px;
background: rgba(243, 156, 18, 0.1);
top: 50%;
right: -30px;
animation: pulse 4s infinite 1s;
}
/* Float Animation */
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/* Call to Action */
.cta-section {
background: var(--primary-color);
color: var(--white);
text-align: center;
}
.cta-section h2 {
font-size: 2.5rem;
margin-bottom: var(--spacing-md);
}
.cta-buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
.cta-buttons .btn-outline {
border-color: var(--white);
color: var(--white);
}
.cta-buttons .btn-outline:hover {
background: var(--white);
color: var(--primary-color);
}
/* ==========================================================================
FOOTER STYLES
========================================================================== */
footer {
background: var(--secondary-color);
color: var(--white);
padding: var(--spacing-xl) 0 var(--spacing-md);
}
.footer-content {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
justify-content: space-between;
}
.footer-section {
flex: 1;
min-width: 200px;
}
.footer-section h3 {
font-size: 1.3rem;
margin-bottom: var(--spacing-md);
color: var(--white);
}
.footer-section p,
.footer-section li {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: var(--spacing-xs);
}
.footer-section ul {
list-style: none;
}
.footer-section a {
color: rgba(255, 255, 255, 0.8);
transition: color 0.3s ease;
}
.footer-section a:hover {
color: var(--white);
}
.footer-logo {
display: flex;
align-items: center;
margin-bottom: var(--spacing-md);
}
.footer-logo img {
height: 40px;
margin-right: var(--spacing-sm);
filter: brightness(0) invert(1); /* Makes the logo completely white */
}
.footer-logo span {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.social-links {
display: flex;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
.social-link {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.social-link:hover {
background: var(--primary-color);
transform: translateY(-2px);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: var(--spacing-md);
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
.footer-bottom p {
margin: 0;
}
.stackwave-link {
color: var(--lemon-green) !important;
font-weight: 600;
transition: color 0.3s ease;
}
.stackwave-link:hover {
color: #90EE90 !important;
}
/* Mobile footer adjustments */
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
gap: var(--spacing-md);
}
.footer-section {
min-width: 100%;
}
.footer-bottom p {
font-size: 0.9rem;
line-height: 1.5;
}
}
/* Add the Project Page Styles to your existing CSS file by inserting this section */
/* ==========================================================================
PROJECT PAGE STYLES - INSERT INTO MAIN CSS FILE
========================================================================== */
/* Project Filter Buttons */
.project-filter {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 3rem;
padding: 2rem 0;
}
.filter-btn {
background: var(--white);
border: 2px solid var(--border-color);
color: var(--text-dark);
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 500;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: var(--shadow-light);
position: relative;
overflow: hidden;
}
.filter-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(196, 30, 58, 0.4), transparent);
transition: left 0.5s;
}
.filter-btn:hover::before {
left: 100%;
}
.filter-btn:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.filter-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: var(--white);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
/* Featured Projects Grid */
.featured-projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2.5rem;
margin-top: 2rem;
transition: all 0.3s ease;
}
.featured-projects-grid.loading {
opacity: 0.7;
pointer-events: none;
}
/* Featured Project Cards */
.featured-project-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-light);
transition: all 0.4s ease;
position: relative;
opacity: 1;
transform: scale(1);
}
.featured-project-card.filtering {
transition: all 0.3s ease;
}
.featured-project-card.hidden {
opacity: 0;
transform: scale(0.8);
}
.featured-project-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: var(--shadow-heavy);
}
/* Project Image Section */
.featured-project-image {
height: 280px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.featured-project-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(44, 62, 80, 0.3) 0%,
rgba(196, 30, 58, 0.6) 100%
);
opacity: 0;
transition: opacity 0.3s ease;
}
.featured-project-card:hover .featured-project-image::before {
opacity: 1;
}
/* Project Status Badge */
.project-status {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 2;
box-shadow: var(--shadow-light);
}
.status-completed {
background: var(--success-color);
color: var(--white);
}
.status-ongoing {
background: var(--warning-color);
color: var(--white);
}
.status-upcoming {
background: var(--secondary-color);
color: var(--white);
}
/* Project Overlay */
.project-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
padding: 2rem 1.5rem 1.5rem;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.featured-project-card:hover .project-overlay {
transform: translateY(0);
}
.project-info h3 {
color: var(--white);
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.project-info p {
color: rgba(255,255,255,0.8);
font-size: 0.9rem;
margin: 0;
}
/* Project Content */
.featured-project-content {
padding: 2rem;
}
.featured-project-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
line-height: 1.3;
}
.featured-project-description {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 1.5rem;
}
/* Project Meta Information */
.featured-project-meta {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
margin-bottom: 2rem;
padding: 1.5rem;
background: var(--light-gray);
border-radius: var(--radius-md);
}
.meta-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
color: var(--text-light);
}
.meta-item i {
color: var(--primary-color);
width: 18px;
text-align: center;
font-size: 1rem;
}
.meta-item span {
font-weight: 500;
}
/* Project Actions */
.featured-project-actions {
display: flex;
gap: 1rem;
align-items: center;
}
.featured-project-actions .btn {
flex: 1;
text-align: center;
}
.btn.disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Enhanced Animation States */
@keyframes projectCardSlideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.featured-project-card.animate-in {
animation: projectCardSlideIn 0.6s ease-out;
}
/* Enhanced Project Statistics Section */
.stats-section .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.stats-section .stat-item {
text-align: center;
padding: 2rem 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
backdrop-filter: blur(10px);
transition: transform 0.3s ease;
}
.stats-section .stat-item:hover {
transform: translateY(-5px);
}
.stats-section .stat-number {
display: block;
font-size: 3rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.stats-section .stat-label {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Project Page Header Enhancement */
.section.bg-primary {
position: relative;
overflow: hidden;
}
.section.bg-primary::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
opacity: 0.9;
}
.section.bg-primary .container {
position: relative;
z-index: 1;
}
.section.bg-primary::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: url('data:image/svg+xml,');
background-size: cover;
}
/* Responsive Design for Projects */
@media (max-width: 1200px) {
.featured-projects-grid {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
}
@media (max-width: 768px) {
.project-filter {
padding: 1rem 0;
margin-bottom: 2rem;
}
.filter-btn {
padding: 0.6rem 1.2rem;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
.featured-projects-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.featured-project-image {
height: 220px;
}
.featured-project-content {
padding: 1.5rem;
}
.featured-project-title {
font-size: 1.3rem;
}
.featured-project-meta {
padding: 1rem;
gap: 0.5rem;
}
.meta-item {
font-size: 0.85rem;
}
.featured-project-actions {
flex-direction: column;
}
/* Mobile overlay behavior */
.project-overlay {
transform: translateY(0);
background: linear-gradient(transparent 50%, rgba(0,0,0,0.9));
}
.featured-project-card:hover .project-overlay {
background: linear-gradient(transparent 30%, rgba(0,0,0,0.95));
}
}
@media (max-width: 480px) {
.filter-btn {
width: 100%;
margin-bottom: 0.5rem;
}
.project-filter {
flex-direction: column;
align-items: center;
}
.featured-project-image {
height: 200px;
}
.featured-project-content {
padding: 1rem;
}
.featured-project-meta {
grid-template-columns: 1fr;
padding: 1rem;
}
}
/* Loading States */
.project-loading {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
font-size: 1.1rem;
color: var(--text-light);
}
.project-loading::before {
content: '';
width: 20px;
height: 20px;
border: 2px solid var(--primary-color);
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 10px;
}
/* Accessibility Enhancements */
.filter-btn:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.featured-project-card:focus-within {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Print Styles for Projects */
@media print {
.project-filter,
.project-overlay,
.featured-project-actions {
display: none;
}
.featured-project-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
.featured-projects-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* Enhanced Counter Animation Styles for Projects Page */
.stats-section .stat-number.animating {
transform: scale(1.1);
color: var(--lemon-green);
text-shadow: 0 0 15px rgba(50, 205, 50, 0.5);
}
/* Add a subtle pulse effect during counter animation */
.stats-section .stat-item:hover .stat-number {
text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
/* Mobile responsive counter sizing for projects page */
@media (max-width: 768px) {
.stats-section .stat-number {
font-size: 2.5rem;
}
.stats-section .stat-item {
padding: 1.5rem 0.75rem;
}
}
@media (max-width: 480px) {
.stats-section .stat-number {
font-size: 2rem;
}
.stats-section .stat-label {
font-size: 0.9rem;
}
}
/* Additional Project Scale Section Styling */
.section.bg-light h3 {
color: var(--text-dark);
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1rem;
margin-top: 1.5rem;
position: relative;
}
.section.bg-light h3::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 2px;
background: var(--primary-color);
}
.section.bg-light h3:first-child {
margin-top: 0;
}
.section.bg-light p {
color: var(--text-light);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.section.bg-light strong {
color: var(--primary-color);
font-weight: 600;
background: rgba(196, 30, 58, 0.1);
padding: 2px 6px;
border-radius: 3px;
}
/* ==========================================================================
SERVICE PAGES STYLES - ADD TO MAIN CSS FILE
========================================================================== */
/* Service Hero Section */
.service-hero {
padding: 8rem 0 6rem;
margin-top: 70px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}
.service-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
}
.service-hero-content {
position: relative;
z-index: 1;
}
.service-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.2);
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 600;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.service-badge i {
font-size: 1.2rem;
}
.service-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.service-subtitle {
font-size: 1.3rem;
opacity: 0.95;
max-width: 800px;
margin: 0 auto 3rem;
line-height: 1.6;
}
.service-hero-stats {
display: flex;
justify-content: center;
gap: 4rem;
margin-bottom: 3rem;
}
.service-hero-stats .stat-item {
text-align: center;
}
.service-hero-stats .stat-number {
display: block;
font-size: 3rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.service-hero-stats .stat-label {
font-size: 1rem;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.service-hero-cta {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
/* Service Overview */
.service-overview {
margin-bottom: 3rem;
}
.service-overview h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--text-dark);
}
.service-overview .lead {
font-size: 1.2rem;
line-height: 1.7;
color: var(--text-light);
margin-bottom: 2.5rem;
}
/* Service Highlights */
.service-highlights {
display: flex;
flex-direction: column;
gap: 2rem;
}
.highlight-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 2rem;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
}
.highlight-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.highlight-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), #E74C3C);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.highlight-content h3 {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--text-dark);
}
.highlight-content p {
color: var(--text-light);
line-height: 1.6;
margin: 0;
}
/* Service Sidebar */
.service-sidebar .sidebar-card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
padding: 2rem;
margin-bottom: 2rem;
}
.service-sidebar h3 {
color: var(--text-dark);
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.fact-list {
list-style: none;
padding: 0;
}
.fact-list li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--text-light);
}
.fact-list i {
color: var(--success-color);
width: 16px;
}
.service-locations {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.location-tag {
background: var(--light-gray);
color: var(--text-dark);
padding: 0.5rem 1rem;
border-radius: 15px;
font-size: 0.9rem;
font-weight: 500;
}
.cta-card {
background: linear-gradient(135deg, var(--primary-color), #E74C3C) !important;
color: var(--white);
}
.cta-card h3,
.cta-card p {
color: var(--white);
}
.btn-block {
width: 100%;
text-align: center;
}
/* Services Detailed Grid */
.services-detailed-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.service-detailed-card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
overflow: hidden;
transition: all 0.3s ease;
}
.service-detailed-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.service-card-header {
padding: 2rem 2rem 1rem;
text-align: center;
}
.service-card-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), #E74C3C);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto 1.5rem;
}
.service-card-header h3 {
font-size: 1.4rem;
font-weight: 600;
color: var(--text-dark);
margin: 0;
}
.service-card-content {
padding: 0 2rem 1rem;
}
.service-card-content p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.service-features {
list-style: none;
padding: 0;
margin: 0;
}
.service-features li {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text-light);
font-size: 0.9rem;
}
.service-features li::before {
content: '✓';
color: var(--success-color);
font-weight: bold;
width: 16px;
text-align: center;
}
.service-card-footer {
padding: 1rem 2rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--light-gray);
margin-top: 1rem;
}
.service-price {
font-weight: 600;
color: var(--primary-color);
font-size: 1.1rem;
}
/* Process Timeline */
.process-timeline {
max-width: 800px;
margin: 2rem auto;
position: relative;
}
.process-timeline::before {
content: '';
position: absolute;
left: 30px;
top: 0;
bottom: 0;
width: 2px;
background: var(--light-gray);
}
.process-step {
display: flex;
gap: 2rem;
margin-bottom: 3rem;
position: relative;
}
.step-number {
width: 60px;
height: 60px;
background: var(--primary-color);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
flex-shrink: 0;
z-index: 1;
position: relative;
}
.step-content {
flex: 1;
padding-top: 0.5rem;
}
.step-content h3 {
font-size: 1.4rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.75rem;
}
.step-content p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 1rem;
}
.step-details {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.9rem;
}
.step-duration,
.step-deliverable {
background: var(--light-gray);
padding: 0.5rem 1rem;
border-radius: 15px;
color: var(--text-dark);
font-weight: 500;
}
/* Featured Projects Showcase */
.featured-projects-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.project-showcase-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
}
.project-showcase-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.project-showcase-image {
height: 250px;
background-size: cover;
background-position: center;
}
.project-showcase-content {
padding: 2rem;
}
.project-showcase-content h3 {
font-size: 1.4rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
}
.project-showcase-content p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.project-specs {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.project-specs span {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--text-light);
}
.project-specs i {
color: var(--primary-color);
}
.project-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.feature-badge {
background: var(--primary-color);
color: var(--white);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
}
/* Why Choose Grid */
.why-choose-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.why-choose-item {
text-align: center;
padding: 2rem;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
}
.why-choose-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.why-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), #E74C3C);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin: 0 auto 1.5rem;
}
.why-choose-item h3 {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
}
.why-choose-item p {
color: var(--text-light);
line-height: 1.6;
margin: 0;
}
/* Amenities Grid */
.amenities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.amenity-card {
background: var(--white);
padding: 2rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
text-align: center;
}
.amenity-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.amenity-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), #E74C3C);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin: 0 auto 1.5rem;
}
.amenity-card h3 {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
}
.amenity-card p {
color: var(--text-light);
line-height: 1.6;
margin: 0;
}
/* Financing Options */
.financing-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.financing-card {
background: var(--white);
padding: 2.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
text-align: center;
}
.financing-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.financing-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), #E74C3C);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto 1.5rem;
}
.financing-card h3 {
font-size: 1.4rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
}
.financing-card p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.financing-features {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.financing-features li {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
color: var(--text-light);
}
.financing-features li::before {
content: '✓';
color: var(--success-color);
font-weight: bold;
width: 16px;
text-align: center;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.service-hero {
padding: 6rem 0 4rem;
}
.service-title {
font-size: 2.5rem;
}
.service-subtitle {
font-size: 1.1rem;
}
.service-hero-stats {
flex-direction: column;
gap: 2rem;
}
.service-hero-stats .stat-number {
font-size: 2.5rem;
}
.service-hero-cta {
flex-direction: column;
align-items: center;
}
.services-detailed-grid {
grid-template-columns: 1fr;
}
.highlight-item {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.process-timeline::before {
left: 20px;
}
.step-number {
width: 40px;
height: 40px;
font-size: 1rem;
}
.process-step {
gap: 1rem;
}
.featured-projects-showcase {
grid-template-columns: 1fr;
}
.amenities-grid,
.financing-options {
grid-template-columns: 1fr;
}
.why-choose-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.col-8,
.col-4 {
width: 100%;
}
}
@media (max-width: 480px) {
.service-hero {
padding: 5rem 0 3rem;
}
.service-title {
font-size: 2rem;
}
.service-card-content,
.service-card-header,
.service-card-footer {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.project-showcase-content {
padding: 1.5rem;
}
.financing-card,
.amenity-card,
.why-choose-item {
padding: 1.5rem;
}
}
/* Print Styles */
@media print {
.service-hero,
.cta-section,
.service-hero-cta,
.btn {
display: none;
}
.service-detailed-card,
.highlight-item,
.why-choose-item {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
}
/* Accessibility Enhancements */
.service-detailed-card:focus-within,
.highlight-item:focus-within,
.amenity-card:focus-within {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Loading States */
.service-loading {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
font-size: 1.1rem;
color: var(--text-light);
}
.service-loading::before {
content: '';
width: 20px;
height: 20px;
border: 2px solid var(--primary-color);
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 10px;
} {
list-style: none;
padding: 0;
}
/* ==========================================================================
CSS FIX FOR SERVICE CARD HEADING OVERFLOW ISSUE
Add this CSS to your main style.css file
========================================================================== */
/* Fix for service card headings that overflow their containers */
.service-title,
.service-card-header h3,
.featured-project-title,
.featured-project-content h3,
.project-showcase-content h3,
.gallery-title,
.card h3 {
/* Ensure text wraps properly instead of overflowing */
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
/* Improve line height for better readability when wrapped */
line-height: 1.3 !important;
/* Prevent text from extending beyond container */
max-width: 100% !important;
/* Ensure text doesn't create horizontal overflow */
overflow: hidden !important;
/* Allow text to wrap to multiple lines if needed */
white-space: normal !important;
}
/* Specific fix for the "Fabrication/Container Projects" heading */
.service-card h3,
.service-detailed-card h3 {
font-size: 1.3rem !important; /* Slightly smaller to prevent overflow */
margin-bottom: 1rem !important;
padding: 0 0.5rem !important; /* Add slight padding */
text-align: center !important;
/* Enhanced text wrapping */
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
/* Fix for cards themselves to ensure proper width constraints */
.service-card,
.service-detailed-card,
.featured-project-card {
/* Ensure cards don't exceed their grid constraints */
min-width: 0 !important; /* Allow flex items to shrink below content size */
overflow: hidden !important;
}
/* Fix for card content areas */
.service-card-header,
.service-card-content,
.featured-project-content,
.card-body {
/* Ensure content areas respect container boundaries */
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.service-title,
.service-card-header h3,
.featured-project-title {
font-size: 1.1rem !important; /* Smaller text on mobile */
line-height: 1.4 !important;
margin-bottom: 0.75rem !important;
}
.service-card,
.service-detailed-card {
padding: 1rem !important; /* Reduce padding on mobile */
}
}
@media (max-width: 480px) {
.service-title,
.service-card-header h3 {
font-size: 1rem !important; /* Even smaller on very small screens */
padding: 0 0.25rem !important;
}
}
/* Fix for long service names in navigation dropdowns */
.nav-dropdown .dropdown-item {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
line-height: 1.3 !important;
padding: 0.75rem 1rem !important;
}
/* Additional fixes for any other headings that might overflow */
h1, h2, h3, h4, h5, h6 {
/* Global heading overflow prevention */
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
/* Specific fix for the core services section */
.services-grid .service-card h3,
.core-services .service-card h3 {
/* Target the specific cards from the screenshot */
font-size: 1.25rem !important;
line-height: 1.2 !important;
margin-bottom: 1rem !important;
/* Ensure text breaks properly for long titles like "Fabrication/Container Projects" */
word-break: break-word !important;
hyphens: auto !important;
/* Center align the text */
text-align: center !important;
/* Add some breathing room */
padding: 0 0.5rem !important;
}
/* Fix for buttons in cards to prevent layout issues */
.service-card .btn,
.service-detailed-card .btn {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
/* Ensure grid layouts don't create overflow issues */
.services-grid,
.featured-projects-grid,
.gallery-grid {
/* Prevent grid items from creating horizontal overflow */
overflow: hidden !important;
}
.services-grid > *,
.featured-projects-grid > *,
.gallery-grid > * {
/* Ensure grid items respect boundaries */
min-width: 0 !important;
overflow: hidden !important;
}
/* ==========================================================================
ENHANCED STYLES FOR SPECIFIC SECTIONS
Add these styles to your existing CSS file
========================================================================== */
/* ==========================================================================
1. SERVICES.HTML - ENHANCED "WHY CHOOSE US" SECTION
========================================================================== */
/* Enhanced Why Choose Us Section */
.why-choose-enhanced {
background: linear-gradient(135deg, #f8f9fc 0%, #e6ecf3 100%);
position: relative;
overflow: hidden;
}
.why-choose-enhanced::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(196, 30, 58, 0.05) 0%, transparent 70%);
border-radius: 50%;
animation: float 20s ease-in-out infinite;
}
.why-choose-enhanced::after {
content: '';
position: absolute;
bottom: -30%;
left: -15%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(39, 174, 96, 0.05) 0%, transparent 70%);
border-radius: 50%;
animation: float 25s ease-in-out infinite reverse;
}
/* Enhanced Feature Grid for Why Choose Us */
.why-choose-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
position: relative;
z-index: 2;
}
.why-choose-feature-item {
background: var(--white);
padding: 2.5rem;
border-radius: var(--radius-lg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
border-top: 4px solid transparent;
}
.why-choose-feature-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--success-color));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.why-choose-feature-item:hover::before {
transform: scaleX(1);
}
.why-choose-feature-item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.why-choose-feature-item:nth-child(odd) {
animation: slideInLeft 0.6s ease-out;
}
.why-choose-feature-item:nth-child(even) {
animation: slideInRight 0.6s ease-out;
}
/* Enhanced Feature Icon */
.why-choose-icon-wrapper {
position: relative;
display: inline-block;
margin-bottom: 2rem;
}
.why-choose-feature-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--white);
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.why-choose-feature-icon.icon-quality {
background: linear-gradient(135deg, #FF6B6B, #FF8E53);
}
.why-choose-feature-icon.icon-team {
background: linear-gradient(135deg, #4ECDC4, #44A08D);
}
.why-choose-feature-icon.icon-network {
background: linear-gradient(135deg, #45B7D1, #96CEB4);
}
.why-choose-feature-icon.icon-excellence {
background: linear-gradient(135deg, #F093FB, #F5576C);
}
.why-choose-icon-wrapper::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(196, 30, 58, 0.1), rgba(39, 174, 96, 0.1));
z-index: 1;
transform: scale(0);
transition: transform 0.3s ease;
}
.why-choose-feature-item:hover .why-choose-icon-wrapper::before {
transform: scale(1);
}
.why-choose-feature-item:hover .why-choose-feature-icon {
transform: rotate(360deg) scale(1.1);
}
/* Enhanced Typography */
.why-choose-feature-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1rem;
position: relative;
}
.why-choose-feature-title::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s ease;
}
.why-choose-feature-item:hover .why-choose-feature-title::after {
width: 50px;
}
.why-choose-feature-description {
color: var(--text-light);
line-height: 1.8;
font-size: 1.05rem;
margin-bottom: 1.5rem;
}
/* Enhanced Stats Mini Grid in Why Choose Us */
.why-choose-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.why-choose-stat-item {
text-align: center;
padding: 1rem;
border-radius: var(--radius-md);
transition: all 0.3s ease;
}
.why-choose-stat-item:hover {
background: var(--white);
transform: translateY(-5px);
}
.why-choose-stat-number {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--success-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.why-choose-stat-label {
font-size: 0.9rem;
color: var(--text-light);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ==========================================================================
2. PROJECTS.HTML - ENHANCED "PROJECT SCALE SECTION"
========================================================================== */
/* Enhanced Project Scale Section */
.project-scale-enhanced {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--white);
position: relative;
overflow: hidden;
}
.project-scale-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(44, 62, 80, 0.8), rgba(196, 30, 58, 0.8));
z-index: 1;
}
.project-scale-enhanced .container {
position: relative;
z-index: 2;
}
/* Animated Background Elements */
.project-scale-enhanced::after {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: url('data:image/svg+xml,');
animation: rotate 30s linear infinite;
z-index: 1;
}
/* Enhanced Project Scale Grid */
.project-scale-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
position: relative;
}
.project-scale-column {
position: relative;
}
.project-scale-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-lg);
padding: 3rem;
margin-bottom: 2rem;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.project-scale-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.project-scale-card:hover::before {
left: 100%;
}
.project-scale-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.4);
}
.project-scale-card h3 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 1rem;
}
.project-scale-card h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--lemon-green), rgba(255, 255, 255, 0.5));
border-radius: 2px;
}
.project-scale-card p {
line-height: 1.8;
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 1.5rem;
}
.project-scale-card strong {
color: var(--lemon-green);
font-weight: 700;
background: rgba(255, 255, 255, 0.1);
padding: 3px 8px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Enhanced Project Value Highlights */
.project-value-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.value-highlight-item {
text-align: center;
padding: 2rem 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.value-highlight-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
}
.value-highlight-number {
font-size: 3rem;
font-weight: 900;
color: var(--lemon-green);
display: block;
margin-bottom: 0.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.value-highlight-label {
font-size: 1rem;
opacity: 0.9;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ==========================================================================
3. TEAM.HTML - ENHANCED "TEAM INTRODUCTION" SECTION
========================================================================== */
/* Enhanced Team Introduction Section */
.team-intro-enhanced {
background: var(--white);
position: relative;
overflow: hidden;
}
.team-intro-enhanced::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: linear-gradient(135deg, rgba(196, 30, 58, 0.02), rgba(39, 174, 96, 0.02));
z-index: 1;
}
.team-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
/* Enhanced Team Content */
.team-intro-content h2 {
font-size: 2.8rem;
font-weight: 800;
color: var(--text-dark);
margin-bottom: 1.5rem;
position: relative;
line-height: 1.2;
}
.team-intro-content h2::before {
content: '';
position: absolute;
top: -10px;
left: -20px;
width: 6px;
height: 60px;
background: linear-gradient(180deg, var(--primary-color), var(--success-color));
border-radius: 3px;
}
.team-intro-description {
font-size: 1.2rem;
line-height: 1.8;
color: var(--text-light);
margin-bottom: 2.5rem;
}
/* Enhanced Team Expertise Cards */
.team-expertise-cards {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.expertise-card {
background: var(--white);
border: 2px solid var(--light-gray);
border-radius: var(--radius-lg);
padding: 1.5rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.expertise-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(196, 30, 58, 0.05), transparent);
transition: left 0.5s ease;
}
.expertise-card:hover::before {
left: 100%;
}
.expertise-card:hover {
border-color: var(--primary-color);
transform: translateX(10px);
box-shadow: -5px 10px 25px rgba(0, 0, 0, 0.1);
}
.expertise-card-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 1.2rem;
color: var(--white);
transition: all 0.3s ease;
}
.expertise-card-icon.icon-leadership {
background: linear-gradient(135deg, #FF6B6B, #FF8E53);
}
.expertise-card-icon.icon-experience {
background: linear-gradient(135deg, #4ECDC4, #44A08D);
}
.expertise-card-icon.icon-network {
background: linear-gradient(135deg, #45B7D1, #96CEB4);
}
.expertise-card:hover .expertise-card-icon {
transform: scale(1.1) rotate(360deg);
}
.expertise-card h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.75rem;
}
.expertise-card p {
color: var(--text-light);
line-height: 1.6;
margin: 0;
}
/* Enhanced Team Visual Section */
.team-visual-section {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.team-image-composition {
position: relative;
width: 100%;
max-width: 500px;
height: 400px;
}
.team-main-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.team-main-image:hover {
transform: scale(1.02);
}
/* Floating Achievement Badges */
.achievement-badge {
position: absolute;
background: var(--white);
border-radius: var(--radius-lg);
padding: 1rem 1.5rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
z-index: 3;
animation: float 6s ease-in-out infinite;
}
.achievement-badge-1 {
top: 20px;
right: -20px;
animation-delay: 0s;
}
.achievement-badge-2 {
bottom: 30px;
left: -30px;
animation-delay: 3s;
}
.achievement-badge h5 {
font-size: 1.5rem;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 0.25rem;
}
.achievement-badge p {
font-size: 0.9rem;
color: var(--text-light);
margin: 0;
font-weight: 600;
}
/* Team Stats Section */
.team-stats-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
padding: 2rem;
background: var(--light-gray);
border-radius: var(--radius-lg);
}
.team-stat-item {
text-align: center;
padding: 1rem;
transition: all 0.3s ease;
}
.team-stat-item:hover {
transform: translateY(-5px);
}
.team-stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--primary-color);
display: block;
margin-bottom: 0.5rem;
}
.team-stat-label {
font-size: 0.9rem;
color: var(--text-light);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ==========================================================================
4. CONTACT.HTML - ENHANCED "EMERGENCY CONTACT" SECTION
========================================================================== */
/* Enhanced Emergency Contact Section */
.emergency-contact-enhanced {
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
color: var(--white);
position: relative;
overflow: hidden;
}
.emergency-contact-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
z-index: 1;
}
.emergency-contact-enhanced::after {
content: '⚠';
position: absolute;
top: 20px;
right: 20px;
font-size: 8rem;
opacity: 0.1;
animation: pulse 3s ease-in-out infinite;
z-index: 1;
}
.emergency-contact-enhanced .container {
position: relative;
z-index: 2;
}
/* Emergency Contact Grid */
.emergency-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.emergency-info-section h2 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
position: relative;
}
.emergency-info-section h2::before {
content: '🚨';
position: absolute;
left: -60px;
top: 0;
font-size: 2rem;
animation: bounce 2s infinite;
}
.emergency-description {
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 2rem;
opacity: 0.95;
}
/* Enhanced Emergency Contact Cards */
.emergency-contact-cards {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.emergency-contact-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-lg);
padding: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.emergency-contact-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.emergency-contact-card:hover::before {
left: 100%;
}
.emergency-contact-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.emergency-card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.emergency-card-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.emergency-contact-card:hover .emergency-card-icon {
background: var(--white);
color: var(--primary-color);
transform: scale(1.1);
}
.emergency-card-title {
font-size: 1.4rem;
font-weight: 700;
margin: 0;
}
.emergency-card-content p {
margin-bottom: 1rem;
line-height: 1.6;
opacity: 0.9;
}
.emergency-contact-number {
background: rgba(255, 255, 255, 0.2);
padding: 1rem 1.5rem;
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.3);
margin: 1rem 0;
transition: all 0.3s ease;
}
.emergency-contact-number:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.02);
}
.emergency-number {
font-size: 1.5rem;
font-weight: 800;
display: block;
margin-bottom: 0.5rem;
color: var(--lemon-green);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.emergency-availability {
font-size: 0.9rem;
opacity: 0.8;
font-weight: 600;
}
/* Emergency Action Buttons */
.emergency-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.emergency-btn {
background: rgba(255, 255, 255, 0.2);
color: var(--white);
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 1rem 2rem;
border-radius: var(--radius-lg);
text-decoration: none;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.emergency-btn:hover {
background: var(--white);
color: var(--primary-color);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.emergency-btn i {
font-size: 1.2rem;
}
/* Warning Box for Emergency Section */
.emergency-warning-box {
background: rgba(255, 193, 7, 0.2);
border: 2px solid rgba(255, 193, 7, 0.5);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-top: 2rem;
backdrop-filter: blur(10px);
}
.emergency-warning-box h4 {
color: #FFF176;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.emergency-warning-box p {
margin: 0;
line-height: 1.6;
font-weight: 500;
}
/* ==========================================================================
RESPONSIVE DESIGN FOR ALL ENHANCED SECTIONS
========================================================================== */
@media (max-width: 768px) {
/* Why Choose Us Mobile */
.why-choose-feature-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.why-choose-stats {
grid-template-columns: 1fr;
gap: 1rem;
}
/* Project Scale Mobile */
.project-scale-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.project-scale-card {
padding: 2rem;
}
.value-highlight-item {
padding: 1.5rem 1rem;
}
.value-highlight-number {
font-size: 2.5rem;
}
/* Team Introduction Mobile */
.team-intro-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.team-intro-content h2 {
font-size: 2.2rem;
}
.team-stats-section {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.achievement-badge-1,
.achievement-badge-2 {
position: static;
margin: 1rem 0;
animation: none;
}
/* Emergency Contact Mobile */
.emergency-contact-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.emergency-info-section h2::before {
left: -40px;
font-size: 1.5rem;
}
.emergency-actions {
flex-direction: column;
}
.emergency-btn {
justify-content: center;
}
}
@media (max-width: 480px) {
.why-choose-feature-item,
.project-scale-card,
.emergency-contact-card {
padding: 1.5rem;
}
.team-intro-content h2 {
font-size: 1.8rem;
}
.emergency-info-section h2 {
font-size: 2rem;
}
.emergency-number {
font-size: 1.3rem;
}
}
/* ==========================================================================
ANIMATION KEYFRAMES FOR ENHANCED SECTIONS
========================================================================== */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
/* Enhanced Focus States for Accessibility */
.why-choose-feature-item:focus-within,
.project-scale-card:focus-within,
.expertise-card:focus-within,
.emergency-contact-card:focus-within {
outline: 3px solid rgba(196, 30, 58, 0.5);
outline-offset: 2px;
}
/* Print Styles for Enhanced Sections */
@media print {
.why-choose-enhanced::before,
.why-choose-enhanced::after,
.project-scale-enhanced::before,
.project-scale-enhanced::after,
.team-intro-enhanced::before,
.emergency-contact-enhanced::before,
.emergency-contact-enhanced::after {
display: none;
}
.why-choose-feature-item,
.project-scale-card,
.expertise-card,
.emergency-contact-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
.achievement-badge {
position: static;
margin: 1rem 0;
}
}
/* ==========================================================================
UTILITY CLASSES FOR ENHANCED SECTIONS
========================================================================== */
/* Gradient Text Utility */
.gradient-text {
background: linear-gradient(135deg, var(--primary-color), var(--success-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* Glass Effect Utility */
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Hover Lift Effect */
.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* Enhanced Button Styles for Sections */
.enhanced-btn {
background: linear-gradient(135deg, var(--primary-color), #E74C3C);
color: var(--white);
border: none;
padding: 1rem 2rem;
border-radius: var(--radius-lg);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
}
.enhanced-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #E74C3C, var(--success-color));
transition: left 0.3s ease;
z-index: -1;
}
.enhanced-btn:hover::before {
left: 0;
}
.enhanced-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
/* Icon Animation Utilities */
.icon-bounce {
animation: bounce 2s infinite;
}
.icon-rotate {
transition: transform 0.3s ease;
}
.icon-rotate:hover {
transform: rotate(360deg);
}
.icon-pulse {
animation: pulse 2s infinite;
}
/* Enhanced Typography for Sections */
.section-title-enhanced {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, var(--primary-color), var(--success-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
margin-bottom: 2rem;
position: relative;
}
.section-title-enhanced::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--success-color));
border-radius: 2px;
}
.section-subtitle-enhanced {
font-size: 1.3rem;
color: var(--text-light);
text-align: center;
margin-bottom: 3rem;
line-height: 1.6;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Enhanced Card Hover Effects */
.card-hover-scale {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card-hover-scale:hover {
transform: scale(1.05);
}
.card-hover-rotate {
transition: all 0.3s ease;
}
.card-hover-rotate:hover {
transform: rotateY(5deg) rotateX(5deg);
}
/* Loading State for Enhanced Sections */
.enhanced-loading {
position: relative;
overflow: hidden;
}
.enhanced-loading::before {
content: '';
position: absolute;
top: 0;
left: -200px;
width: 200px;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
animation: shimmer 2s infinite;
}
/* Enhanced Border Animations */
.border-animate {
position: relative;
border: 2px solid transparent;
background: linear-gradient(135deg, var(--white), var(--light-gray)) padding-box,
linear-gradient(135deg, var(--primary-color), var(--success-color)) border-box;
border-radius: var(--radius-lg);
}
/* Success States for Forms in Enhanced Sections */
.form-success-enhanced {
background: linear-gradient(135deg, #27AE60, #2ECC71);
color: var(--white);
padding: 2rem;
border-radius: var(--radius-lg);
text-align: center;
box-shadow: 0 10px 30px rgba(39, 174, 96, 0.3);
animation: slideInUp 0.5s ease-out;
}
.form-success-enhanced i {
font-size: 3rem;
margin-bottom: 1rem;
animation: bounce 1s ease-out;
}
/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
.why-choose-feature-item,
.project-scale-card,
.expertise-card {
background: rgba(44, 62, 80, 0.9);
border-color: rgba(255, 255, 255, 0.1);
color: var(--white);
}
.why-choose-feature-title,
.expertise-card h4 {
color: var(--white);
}
.team-intro-content h2 {
color: var(--white);
}
}
/* ==========================================================================
SPECIFIC SECTION TARGETING (FALLBACK STYLES)
========================================================================== */
/* Target specific sections by their existing class names */
.section.bg-light .feature-item {
background: var(--white);
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border-left: 4px solid var(--primary-color);
}
.section.bg-light .feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.section.bg-light .feature-item strong {
color: var(--primary-color);
font-size: 1.2rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.section.bg-light .feature-item strong i {
font-size: 1.3rem;
}
/* Enhanced Team Grid */
.team-grid .team-member {
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.team-grid .team-member::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(196, 30, 58, 0.1), rgba(39, 174, 96, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.team-grid .team-member:hover::before {
opacity: 1;
}
.team-grid .team-member:hover {
transform: translateY(-15px) scale(1.03);
}
/* Enhanced Contact Form Styling */
.contact-form .form-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
transform: translateY(-2px);
}
.contact-form .form-label {
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.5rem;
transition: color 0.3s ease;
}
.contact-form .form-group:focus-within .form-label {
color: var(--primary-color);
}
/* ==========================================================================
END OF ENHANCED SECTION STYLES
========================================================================== */