html, body {
height: 100%;
}
html, body {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Arial, sans-serif;
background-color: #edf5fa;
color: #232d38;
min-height: 100vh;
display: flex;
flex-direction: column;
/* Decorative SVG symbols background */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
}
.background-shape {
position: fixed;
z-index: 0;
pointer-events: none;
opacity: 0.2;
width: 220px;
height: 220px;
background-repeat: no-repeat;
background-size: contain;
}
/* HEADER */
header,
.header-flex {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
padding: 8px 24px;
background: #fff;
box-shadow: 0 2px 14px rgba(31,41,55,0.10);
border-radius: 0 0 16px 16px;
width: 100%;
position: sticky;
top: 0;
z-index: 1000;
}
.company-brand img {
height: 90px;
width: auto;
margin-right: 7px;
max-height: 80px;
}
.company-brand {
display: flex;
align-items: center;
gap: 18px;
}
.company-title {
font-size: 2.1rem;
font-weight: 700;
color: #287b8c;
letter-spacing: .04em;
}
nav .main-menu {
display: flex;
gap: 30px;
list-style: none;
margin: 0;
padding: 0;
}
nav .main-menu li a {
color: #232d38;
font-weight: 500;
font-size: 1.1rem;
text-decoration: none;
padding: 6px 18px;
border-radius: 20px;
transition: background 0.18s, color 0.18s;
background: transparent;
}
a.active {
background: #e1f5fa !important;
color: #198daa !important;
}
/* MAIN (gap is handled by flex, leave blank for adding content later) */
main {
flex: 1 1 auto;
min-height: 60px; /* Ensures blank area for future product designs */
}
/* FOOTER */
.footer-unique {
background: #141d23;
color: #fff;
padding-top: 38px;
margin-top: 42px;
font-family: 'Segoe UI', Arial, sans-serif;
position: relative;
}
.footer-grid {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 100px;
max-width: 1200px;
margin: auto;
padding: 0 4vw 8px 4vw;
flex-wrap: wrap;
}
.footer-contact-block,
.footer-links-block,
.footer-social-block {
min-width: 210px;
}
.footer-logo-block {
margin-top: 44px;
text-align: center;
}
.footer-logo-block .footer-logo {
width: 102px;
height: auto;
margin-bottom: 6px;
}
.footer-tagline {
font-size: 0.98rem;
color: #b2dffb;
margin-top: 7px;
font-weight: 400;
}
.footer-contact-block h4,
.footer-links-block h4,
.footer-social-block h4 {
color: #3fe8c9;
margin-bottom: 9px;
font-weight: 600;
font-size: 1.09rem;
}
.footer-contact-block p {
margin: 6px 0;
font-size: 0.98rem;
}
.footer-links-block ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links-block li { margin-bottom: 8px; }
.footer-links-block a {
color: #fff;
text-decoration: none;
font-weight: 500;
transition: color 0.19s;
}
.footer-links-block a:hover { color: #3fe8c9; text-decoration: underline; }
.footer-contact-block i { color: #3fe8c9; margin-right: 7px; }
.footer-divider {
border-top: 1.5px dashed #333d;
margin: 32px auto 7px auto;
max-width: 1100px;
}
/* Footer bottom: Center social media icons and copyright text in one row */
.footer-bottom {
width: 100%;
padding-bottom: 18px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.footer-bottom-icons {
margin-bottom: 2px;
}
.footer-bottom-icons a {
color: #fff;
font-size: 1.7em;
margin: 0 10px;
display: inline-block;
transition: color 0.2s, transform 0.16s;
}
.footer-bottom-icons a:hover {
color: #3fe8c9;
transform: scale(1.17) rotate(-3deg);
}
.footer-bottom-copyright {
color: #fff;
font-size: 1.04rem;
margin-top: 3px;
}
/* Email/Phone/Map Custom */
.footer-email-icon { color: #38d3f6; font-size: 1.18em; margin-right: 7px; vertical-align: middle; }
.footer-email-link { color: #b6effb; font-size: 1.07em; text-decoration: none; font-weight: 500; transition: color 0.17s; }
.footer-email-link:hover { color: #4ae9de; text-decoration: underline; }
.footer-phone-icon { color: #1fe9ad; font-size: 1.18em; margin-right: 7px; vertical-align: middle; }
.footer-phone-link { color: #a5ffda; font-size: 1.07em; text-decoration: none; font-weight: 500; transition: color 0.17s; }
.footer-phone-link:hover { color: #3fe8c9; text-decoration: underline; }
.footer-map-icon { color: #fc8383; font-size: 1.18em; margin-right: 7px; vertical-align: middle; }
.footer-map-link { color: #ffdada; font-size: 1.07em; text-decoration: none; font-weight: 500; transition: color 0.17s; }
.footer-map-link:hover { color: #ff9595; text-decoration: underline; }
/* Responsive styles for mobile/tablet */
@media (max-width: 950px) {
.footer-grid { gap: 32px; }
.footer-contact-block, .footer-links-block, .footer-social-block { min-width: 160px; }
}
@media (max-width: 800px) {
.footer-bottom-icons { font-size: 1.4em; }
}
@media (max-width: 700px) {
.footer-grid { flex-direction: column; gap: 100px; align-items: center; }
}
nav .main-menu li a:hover {
color: #287b8c;
background: #eaf5fa;
}
.about-page-section {
padding: 60px 0 50px 0; /* gap above and below, adjusts between header and footer */
background: #18242c; /* or your chosen bg color */
}
.about-page-container {
display: flex;
max-width: 1200px;
margin: 0 auto;
gap: 48px;
align-items: flex-start;
}
.about-main-content {
flex: 2 1 60%;
color: #dbe7f3;
font-size: 1.11rem;
}
.about-side-panel {
flex: 1 1 320px;
display: flex;
flex-direction: column;
gap: 36px;
}
.about-products, .about-contact {
background: #232f3e;
border-radius: 14px;
color: #38d3f6;
padding: 32px 22px;
margin-bottom: 18px;
box-shadow: 0 4px 26px rgba(31,41,55,0.10);
}
.about-products h3,
.about-contact h3 {
margin-top: 0;
color: #fff;
letter-spacing: 1px;
}
.about-products ul {
padding-left: 20px;
margin: 0;
color: #b0c9de;
}
.about-contact div { margin-bottom: 7px; }
@media (max-width: 900px) {
.about-page-container { flex-direction: column; gap: 32px; }
.about-side-panel { flex-direction: row; gap: 16px; }
}
.about-page-section {
padding: 60px 0 50px 0;
background: #f9f6ee; /* Try #f7f7fd or #f3f4f6 for modern neutral look */
}
.about-products, .about-contact {
background: #ffffff; /* Pure white cards look clean on a soft background */
color: #236292; /* Deep blue text for visibility */
border-radius: 14px;
box-shadow: 0 4px 26px rgba(31,41,55,0.10);
padding: 32px 22px;
}
.about-products h3,
.about-contact h3 {
color: #236292;
}
.about-products ul {
color: #444e5b;
}
/* Soft, modern background */
.about-page-section {
padding: 60px 0 50px 0;
background: #f7f7fc; /* Soft off-white, pleasant and modern */
}
.about-page-container {
display: flex;
max-width: 1200px;
margin: 0 auto;
gap: 48px;
align-items: flex-start;
}
.about-main-content {
flex: 2 1 60%;
color: #213547; /* Dark gray text for contrast */
font-size: 1.14rem;
}
/* Elegant card panels for sidebar */
.about-products, .about-contact {
background: #ffffff; /* classic white
.about-products, .about-contact {
background: #fff;
color: #263241;
border: 1.5px solid #e4ecf8; /* Subtle border */
border-radius: 8px;
box-shadow: 0 3px 16px rgba(31,41,55,0.06);
padding: 28px 20px 22px 20px;
margin-bottom: 26px;
font-family: 'Segoe UI', Arial, sans-serif;
position: relative;
}
.about-products h3, .about-contact h3 {
color: #1576b5;
font-size: 1.12rem;
font-weight: 700;
margin: 0 -20px 18px -20px;
padding: 12px 20px 10px 20px;
border-bottom: 2px solid #2196f3; /* Accent line */
background: #fff;
}
.about-products ul, .about-contact ul {
padding-left: 0;
list-style: none;
}
.about-products ul li, .about-contact div {
margin-bottom: 14px;
font-weight: 500;
}
.about-products ul li {
display: flex;
align-items: center;
font-family: inherit;
}
.about-products ul li::before {
content: "+";
color: #abbfd1;
margin-right: 11px;
font-weight: 800;
font-size: 1.15em;
line-height: 1;
}
/* Accent links for phone/email */
.about-contact a {
color: #0d7fd3;
font-weight: 600;
text-decoration: underline dotted;
}
.about-products {
margin-bottom: 18px;
}
/* Card base */
.about-products, .about-contact {
background: linear-gradient(135deg, #fff 90%, #eafeff 100%);
color: #22334d;
border: 2px solid #e4ecf8;
border-radius: 16px;
box-shadow: 0 6px 24px 0 rgba(91,114,153,0.10);
padding: 30px 26px 24px 26px;
margin-bottom: 28px;
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
position: relative;
transition: box-shadow 0.18s;
}
/* Hover/active effect */
.about-products:hover, .about-contact:hover {
box-shadow: 0 12px 36px 0 rgba(65,117,178,0.16);
border-color: #52b2fd;
}
/* Big, blue accent title with a line */
.about-products h3, .about-contact h3 {
color: #0a79c6;
font-size: 1.26rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding-bottom: 10px;
border-bottom: 2px solid #1bb5fd;
margin-bottom: 22px;
background: none;
}
/* UL and List */
.about-products ul {
margin: 0;
padding-left: 8px;
list-style: none;
}
.about-products ul li {
font-weight: 600;
display: flex;
align-items: center;
margin-bottom: 9px;
font-size: 1.09rem;
letter-spacing: 0.015em;
font-family: inherit;
}
.about-products ul li::before {
content: "+";
color: #16a6c2;
margin-right: 13px;
font-weight: 800;
font-size: 1.15em;
}
/* Contact Details */
.about-contact div, .about-contact a {
margin-bottom: 10px;
font-size: 1.06rem;
}
.about-contact a {
color: #1887dc;
font-weight: 600;
text-decoration: underline dotted;
transition: color 0.13s;
}
.about-contact a:hover { color: #00416a; }
.about-contact {
border-top: 5px solid #55d8e8;
}
.about-products {
border-top: 5px solid #1bb5fd;
}
.about-main-content {
max-width: 650px;
margin-left: auto;
margin-right: auto;
padding: 12px 0;
line-height: 1.7;
}
.about-main-content section {
margin-bottom: 30px;
}
.about-main-content h1, .about-main-content h2 {
margin-bottom: 18px;
font-weight: 700;
letter-spacing: 0.01em;
text-align: left;
}
.about-main-content p,
.about-main-content ul {
font-size: 1.09rem;
margin-bottom: 14px;
text-align: left;
}
.about-main-content ul {
padding-left: 20px;
list-style: disc;
}
.aboutus-company-block p {
margin-bottom: 18px;
}
.about-contact {
background: linear-gradient(135deg, #f8fafb 83%, #e6ecf7 100%);
border: 1.5px solid #dadfe7;
border-radius: 14px;
box-shadow: 0 8px 20px rgba(36,66,109,0.09);
padding: 32px 18px 26px 18px;
color: #26405c;
margin-bottom: 28px;
font-family: inherit;
max-width: 380px;
}
.about-contact h3 {
background: linear-gradient(90deg, #f5f7fa 95%, #dde5f1 100%);
border-bottom: 1px solid #b2bdd0;
border-radius: 8px 8px 0 0;
margin: -18px -18px 22px -18px;
padding: 16px 18px 13px 18px;
font-size: 1.18rem;
color: #1a6fb1;
font-weight: 700;
}
.about-contact div {
display: flex;
align-items: center;
margin-bottom: 16px;
font-size: 1rem;
}
/* Phone and email styling for mobile */
.about-contact .contact-email a,
.about-contact .contact-phone a {
font-size: 1.12rem;
font-weight: 700;
color: #207ad5;
background: none;
text-decoration: none; /* remove dotted underline */
padding-left: 3px;
letter-spacing: 0.01em;
}
/* On mobile, make phone/email even clearer */
@media (max-width: 600px) {
.about-contact .contact-email a,
.about-contact .contact-phone a {
font-size: 1.14rem;
font-weight: 800;
word-break: break-all;
}
}
.about-page-section {
position: relative;
background: #f7f8fb;
overflow: visible;
}
/* Left decoration only extends as tall as the content! */
.about-left-decoration {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 340px;
min-height: 100%;
z-index: 0;
pointer-events: none;
background:
linear-gradient(135deg, #f5fafd 80%, #eaf1fb 100%),
url('data:image/svg+xml;utf8,') left top no-repeat;
}
/* Make sure the content spans over the left shape */
.about-page-container {
position: relative;
z-index: 1;
background: none;
}
/* Responsive: remove on mobile for clean view */
@media (max-width: 900px) {
.about-left-decoration { display: none; }
}
/* Global overflow fix */
html, body {
max-width: 100%;
overflow-x: hidden;
}
/* Make main layout respect viewport */
main {
width: 100%;
box-sizing: border-box;
}