/* ============================================
SEC Global Engineering LLC - Main Stylesheet
============================================ */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet');
/* CSS Variables */
:root {
--primary: #F17315;
--primary-dark: #F17315;
--secondary: #002255;
--dark: #1a1a2e;
--dark-2: #2d2d44;
--white: #ffffff;
--light-gray: #f5f6fa;
--gray: #6b7280;
--text: #222222;
--text-light: #666666;
--border: #e5e7eb;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
--transition: all 0.3s ease;
--radius: 8px;
--text-muted: #222;
}
/* Reset */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 18px;
}
body {
font-family: 'Golos Text', sans-serif;
color: var(--text);
font-weight: 400;
line-height: 1.6;
overflow-x: hidden;
background: var(--white);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
ul,
ol {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
button {
cursor: pointer;
border: none;
outline: none;
font-family: inherit;
}
.container {
max-width: 1600px;
margin: 0 auto;
padding: 0 15px;
}
.btn {
padding: 12px 28px;
border-radius: 100px;
font-weight: 500;
font-size: 18px;
display: inline-flex;
align-items: center;
gap: 10px;
transition: var(--transition);
border: 1px solid;
outline: none;
}
.btn-primary {
background: linear-gradient(102.94deg, #F17315 0%, #F17315 100%);
border: 1px solid #F17315;
/* border: none; */
color: var(--white);
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
.btn-secondary {
background: linear-gradient(90deg, #012254 0%, #012254 100%);
border: 1px solid rgba(253, 254, 255);
color: var(--white);
}
.btn-secondary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
.btn-outline {
background: transparent;
color: var(--white);
padding: 12px 28px;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
border: 1cqi solid rgba(255, 255, 255);
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition);
}
.btn-outline:hover {
border-color: var(--primary);
color: var(--primary);
}
p {
color: var(--text-muted);
line-height: 1.8;
font-size: 1rem !important;
margin-bottom: 14px;
font-weight: 400;
}
.badge-bg {
display: inline-block;
background: var(--primary);
color: var(--white);
font-size: 18px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
padding: 8px 24px;
border-radius: 100px;
margin-bottom: 15px;
}
/* Section Title */
.section-title {
font-size: 46px;
font-weight: 700;
color: var(--dark);
margin-bottom: 30px;
line-height: 1.35;
letter-spacing: normal;
}
.section-title span {
color: var(--primary);
font-style: normal;
}
/* Spacing and Alignment Utilities */
.text-center {
text-align: center !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-25 {
margin-bottom: 25px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mb-40 {
margin-bottom: 40px !important;
}
.mb-50 {
margin-bottom: 50px !important;
}
section {
padding: 60px 0;
}
/* ============================================
HEADER / NAVBAR
============================================ */
.header {
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: var(--white);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: var(--transition);
}
.header-top {
background: var(--secondary);
padding: 0px 0px 0px 0px;
display: flex;
justify-content: flex-end;
}
.top-right {
display: flex;
align-items: center;
background: var(--primary);
padding: 12px 8% 12px 10%;
clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);
margin-top: 0px;
}
.contact-info {
display: flex;
gap: 30px;
}
.contact-info a {
display: flex;
gap: 10px;
align-items: center;
color: #fff;
text-decoration: none;
}
.contact-info a i {
color: var(--secondary);
font-size: 22px;
}
.scrolled .header-top {
display: none;
}
.scrolled {
position: fixed !important;
top: 0 !important;
left: 0;
right: 0;
box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
background-color: #fff !important;
z-index: 9999;
animation: 1s .1s fadeInDown both;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.logo img {
height: 72px;
}
.scrolled .logo img {
display: block;
max-height: 50px;
}
.nav-menu {
display: flex;
align-items: center;
gap: 5px;
}
.nav-menu>li {
position: relative;
}
.nav-menu>li>a {
padding: 10px 13px !important;
font-size: 18px;
font-weight: 500;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
/* border-radius: 6px; */
transition: var(--transition);
}
.nav-menu>li>a:hover,
.nav-menu>li>a.active {
color: var(--primary);
}
/* Dropdown */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 255px;
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 10px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
border-top: 3px solid var(--primary);
z-index: 100;
}
.nav-menu>li:hover>.dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu li a {
display: block;
padding: 8px 20px;
font-size: 15px;
color: var(--text);
transition: var(--transition);
}
.dropdown-menu li a:hover {
background: var(--light-gray);
color: var(--primary);
padding-left: 25px;
}
.nav-cta {
background: linear-gradient(90deg, #FE7C00 0%, #FE7C00 100%);
color: var(--white) !important;
padding: 10px 22px !important;
border-radius: 100px !important;
font-weight: 400 !important;
/* border: 1px solid #156A9A; */
display: inline-flex;
align-items: center;
gap: 6px;
}
.nav-cta:hover {
background: linear-gradient(102.94deg, #002255 0%, #002255 100%);
/* border: 1px solid #E87100; */
color: var(--white) !important;
}
/* Mobile Toggle */
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
padding: 5px;
}
.nav-toggle span {
display: block;
width: 25px;
height: 3px;
background: var(--dark);
border-radius: 2px;
transition: var(--transition);
}
/* ============================================
HERO SECTION
============================================ */
.hero {
margin-top: 85px;
background: linear-gradient(rgba(30, 63, 82, 0.86), rgba(30, 63, 82, 0.86)), url('../images/hero-bg.jpg') center/cover;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: rgba(30, 63, 82, 0.62);
z-index: 1;
}
.hero-wrapper {
display: flex;
min-height: 800px;
position: relative;
z-index: 2;
}
.hero-slider,
.hero-slider .owl-stage-outer,
.hero-slider .owl-stage,
.hero-slider .owl-item {
height: 100%;
}
.hero-left {
width: 66%;
display: flex;
align-items: center;
padding-left: max(15px, calc((100vw - 1630px) / 2 + 120px));
padding-right: 130px;
padding-top: 95px;
padding-bottom: 120px;
position: relative;
z-index: 3;
background: rgba(30, 63, 82, 0.76);
clip-path: polygon(0 0, 87% 0, 72% 100%, 0% 100%);
}
.hero-content {
max-width: 825px;
}
.hero-right {
width: 54%;
position: absolute;
top: 0;
right: 0;
height: 100%;
z-index: 4;
clip-path: polygon(24% 0, 100% 0, 88% 100%, 0% 100%);
}
/* Ensure Owl Carousel takes full height */
.hero-right .hero-img-slide {
height: 100%;
}
.hero-content .section-badge {
margin-bottom: 20px;
}
.hero-content h1 {
font-family: 'Inter', sans-serif;
font-size: clamp(56px, 4.9vw, 76px);
font-weight: 800;
color: var(--white);
line-height: 1.28;
letter-spacing: 0;
margin-bottom: 28px;
text-transform: uppercase;
}
.hero-content h1 span {
color: var(--primary);
display: block;
}
.hero-content p {
max-width: 800px;
color: rgba(255, 255, 255, 0.92);
font-size: 23px;
line-height: 1.78;
margin-bottom: 30px;
}
.hero-btns {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-btns .btn-primary,
.hero-btns .btn-outline {
min-width: 235px;
justify-content: center;
padding: 18px 30px;
font-size: 18px;
}
.hero-img-slide {
height: 100%;
}
.hero-img-slide img {
width: 100%;
height: 100%;
min-height: 800px;
object-fit: cover;
object-position: center;
}
/* Hero Owl Dots */
.hero-slider .owl-dots {
position: absolute;
bottom: 130px;
left: max(15px, calc((100vw - 1630px) / 2 + 120px));
z-index: 10;
display: flex;
align-items: center;
gap: 9px;
}
.hero-slider .owl-dots .owl-dot span {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--white);
transition: var(--transition);
margin: 0;
}
.hero-slider .owl-dots .owl-dot.active span {
background: var(--primary);
width: 35px;
height: 16px;
border-radius: 999px;
}
/* ============================================
ABOUT SECTION
============================================ */
.about {
background-color: var(--white);
background-image: url('../images/about-section-bg.png');
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
overflow: hidden;
}
.about-wrapper {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
align-items: center;
}
/* Left Image Layout */
.about-img-container {
position: relative;
width: 100%;
padding-bottom: 60px;
/* Space for overlapping sub-image */
}
.about-img-main {
width: 60%;
margin-left: auto;
border-radius: 28px;
border: 8px solid var(--white);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
overflow: hidden;
position: relative;
z-index: 1;
}
.about-img-main img {
width: 100%;
display: block;
object-fit: cover;
aspect-ratio: 4/5;
}
.about-img-sub {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
border-radius: 28px;
border: 8px solid var(--white);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
overflow: hidden;
z-index: 2;
}
.about-img-sub img {
width: 100%;
display: block;
object-fit: cover;
aspect-ratio: 1/1;
}
/* Dots and Badge */
.about-dots {
position: absolute;
bottom: -20px;
left: 22%;
width: 280px;
height: 140px;
background-image: url('../images/welcome-section-dot-img.png');
background-repeat: repeat;
z-index: 0;
opacity: 0.8;
pointer-events: none;
}
.about-badge-new {
position: absolute;
top: 8%;
left: 30%;
width: 170px;
height: 170px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
}
.about-badge-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.about-badge-content {
position: relative;
z-index: 1;
text-align: center;
color: var(--white);
padding: 10px;
}
.about-badge-content h3 {
font-size: 44px;
font-weight: 600;
line-height: 1;
margin-bottom: 2px;
}
.about-badge-content p {
font-size: 18px;
font-weight: 400;
line-height: 1.4;
margin: 0;
color: #fff;
padding-top: 5px;
}
/* Right Content Column */
.about-text p {
text-align: justify;
}
.about-text .about-subtitle {
margin: -14px 0 22px;
color: var(--primary);
font-size: 19px;
font-weight: 600;
line-height: 1.5;
}
/* Bottom Features Card */
.about-features-card {
margin-top: 60px;
background: #012254;
border-radius: 12px;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 20px 25px;
border-left: 10px solid var(--primary);
gap: 30px;
}
.about-feature-column {
display: flex;
gap: 20px;
align-items: flex-start;
}
.about-feature-icon-box {
width: 65px;
height: 65px;
background: var(--primary);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: var(--transition);
overflow: hidden;
}
.about-feature-icon-box img {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 10px;
}
.about-feature-column:hover .about-feature-icon-box {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 6px 15px rgba(254, 124, 0, 0.3);
}
.about-feature-text h4 {
font-size: 22px;
font-weight: 500;
color: #FFFFFF;
margin-bottom: 8px;
}
.about-feature-text p {
font-size: 18px;
color: #FFFFFF;
line-height: 1.5;
margin: 0;
font-weight: 300;
}
/* ============================================
SERVICES (OWL CAROUSEL)
============================================ */
.services {
background-color: #fcfcfd;
background-image: url("../images/services-bg.jpg");
background-repeat: repeat;
background-position: center;
}
.service-card {
background: var(--white);
border-radius: 16px;
padding: 35px 28px 28px;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(30, 63, 82, 0.1);
border-color: rgba(254, 124, 0, 0.2);
}
.service-card h4 {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
color: var(--dark);
line-height: 1.4;
border-bottom: 1px solid #E7E7E7;
padding-bottom: 15px;
}
.service-card p {
font-size: 16px !important;
color: #6D6E70;
line-height: 1.6;
margin-bottom: 20px;
}
.service-card-img {
border-radius: 14px;
border: 1px solid var(--primary);
padding: 0px;
overflow: hidden;
height: 190px;
background: var(--white);
transition: var(--transition);
margin-top: 0;
/* border-top: 1px solid #f2f2f2; */
}
.service-card:hover .service-card-img {
border-color: var(--primary-dark);
}
.service-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
transition: var(--transition);
}
.service-card:hover .service-card-img img {
transform: scale(1.03);
}
/* Owl Carousel overrides for services */
.services-slider .owl-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 40px;
}
.services-slider .owl-dot {
background: none;
border: none;
padding: 0;
}
.services-slider .owl-dot span {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--secondary);
opacity: 0.3;
transition: all 0.3s ease;
}
.services-slider .owl-dot.active span {
background: var(--primary);
opacity: 1;
width: 24px;
height: 8px;
border-radius: 4px;
}
/* ============================================
COUNTER SECTION
============================================ */
.counter-section {
position: relative;
background: url('../images/counter-bg-new.jpg') center/cover no-repeat;
z-index: 1;
overflow: hidden;
}
.counter-section::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 15, 34, 0.88);
/* Deep dark blue overlay */
z-index: -1;
}
.counter-section .container {
position: relative;
z-index: 2;
}
.counter-section .section-title {
color: var(--white);
}
.counter-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
}
.counter-item {
padding: 20px;
}
.counter-icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: var(--transition);
width: 70px;
height: 70px;
background: linear-gradient(180deg, #FE7C00 0%, #FE7C00 100%);
border: 2px solid #E87100;
border-radius: 5px;
}
.counter-item:hover .counter-icon {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(254, 124, 0, 0.4);
}
.counter-icon img {
width: 40px;
height: 40px;
object-fit: contain;
}
.counter-number {
font-size: 52px;
font-weight: 700;
color: var(--white);
/* font-family: 'Golos Text', sans-serif; */
margin-bottom: 5px;
line-height: normal;
}
.counter-number span {
color: var(--primary);
}
.counter-label {
font-size: 18px;
color: #fff;
font-weight: 500;
margin-top: 12px;
}
/* ============================================
PROJECTS (OWL CAROUSEL)
============================================ */
.projects {
padding: 80px 0;
background: url('../images/our-projects-bg.png') no-repeat center;
background-size: cover;
position: relative;
}
.projects-slider .owl-stage-outer {
padding-bottom: 50px;
}
.projects-slider {
margin-top: 40px;
}
.project-card {
position: relative;
height: 480px;
border-radius: 20px;
overflow: visible;
background: var(--white);
transition: var(--transition);
}
.project-card:hover {
box-shadow: 0 15px 40px rgba(30, 63, 82, 0.15);
transform: translateY(-5px);
}
.project-card-img {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.project-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.project-card:hover .project-card-img img {
transform: scale(1.06);
}
.project-card-info {
position: absolute;
right: 20px;
bottom: -36px;
left: 20px;
background: var(--white);
border-radius: 12px;
border-bottom: 2px solid var(--primary);
padding: 20px 20px 18px;
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.16);
z-index: 2;
transition: var(--transition);
min-height: 108px;
}
.project-card-info h4 {
font-size: 18px;
font-weight: 600;
color: var(--secondary);
margin-bottom: 10px;
line-height: 1.3;
}
.project-card-info p {
font-size: 18px;
color: #6D6E70;
margin: 0;
line-height: 1.4;
font-weight: 400;
}
.projects-slider .owl-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 70px;
}
.projects-slider .owl-dot span {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--secondary) !important;
opacity: 1;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin: 0;
}
.projects-slider .owl-dot.active span {
width: 28px;
height: 10px;
border-radius: 5px;
background: var(--primary) !important;
}
/* ============================================
QUALITATIVE SERVICES
============================================ */
.qualitative {
background: #F5F5F5;
}
.qualitative-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: stretch;
}
.qualitative-img {
position: relative;
border-radius: 12px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.qualitative-img img {
width: 100%;
height: 100%;
min-height: 480px;
object-fit: cover;
border-radius: 12px;
display: block;
}
.qualitative-contacts {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
background: linear-gradient(180deg, #012254 0%, #0F468C 100%);
border-radius: 0;
padding: 16px 20px;
gap: 0;
}
.qualitative-contacts a {
flex: 1;
display: flex;
align-items: center;
gap: 14px;
color: var(--white);
text-decoration: none;
transition: var(--transition);
padding: 4px 16px;
}
.qualitative-contacts a:first-child {
padding-left: 0;
border-right: 1px solid rgba(255, 255, 255, 0.25);
padding-right: 20px;
}
.qualitative-contacts a:last-child {
padding-left: 20px;
padding-right: 0;
}
.qualitative-contacts a div {
line-height: 1.4;
}
.qualitative-contacts a div {
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.4;
}
.qualitative-contacts a div strong {
font-size: 15px;
color: var(--white);
font-weight: 600;
margin-top: 3px;
display: block;
}
.qualitative-contacts a i {
width: 52px;
height: 52px;
background: var(--primary);
border: 1px solid var(--primary-dark);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
transition: var(--transition);
}
.qualitative-contacts a:hover i {
background: var(--white);
color: var(--primary);
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(254, 124, 0, 0.4);
}
.qualitative-contacts a:hover {
opacity: 0.9;
}
.quality-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.quality-item {
display: flex;
align-items: center;
gap: 20px;
border: 1px solid #FE7C00;
border-radius: 15px;
padding: 20px;
background: var(--white);
transition: all 0.3s ease;
}
.quality-item:hover {
transform: translateX(5px);
box-shadow: 0 8px 24px rgba(30, 63, 82, 0.05);
border-color: rgba(254, 124, 0, 0.5);
}
.quality-icon-img {
width: 130px;
height: 130px;
background: #F4FBFF;
border-bottom: 2px solid #3C6075;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 15px;
}
.quality-icon-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.quality-text h4 {
font-size: 24px;
font-weight: 500;
color: #222;
margin-bottom: 6px;
}
.quality-text p {
margin: 0px;
}
/* ============================================
QUALITATIVE CONTACTS � 1023px to 1299px
============================================ */
@media (min-width: 1023px) and (max-width: 1299px) {
.qualitative-wrapper {
/* grid-template-columns: 1fr 1fr; */
gap: 20px;
flex-direction: column;
}
.qualitative-img img {
min-height: 420px;
}
.qualitative-contacts {
padding: 12px 16px;
gap: 10px;
}
.qualitative-contacts a div {
font-size: 16px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.4;
}
.qualitative-contacts a {
gap: 10px;
padding: 3px 12px;
width: 100%;
}
.qualitative-contacts a:first-child {
padding-left: 0;
padding-right: 0;
border-right: none;
}
.qualitative-contacts a:last-child {
padding-left: 0;
padding-right: 0;
border-left: none;
}
.qualitative-contacts a i {
width: 42px;
height: 42px;
font-size: 16px;
}
.qualitative-contacts a div {
/* font-size: 11px; */
}
.qualitative-contacts a div strong {
/* font-size: 12px; */
margin-top: 5px;
}
.quality-icon-img {
width: 100px;
height: 100px;
}
.quality-text h4 {
font-size: 20px;
}
.quality-text p {
font-size: 14px;
}
}
/* ============================================
CTA / CONSULTATION
============================================ */
.cta-section {
/* position: relative;
min-height: 240px;
overflow: hidden;
background: var(--primary);
display: flex;
align-items: center;
padding: 0; */
padding: 0 0;
/* background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); */
color: var(--light);
position: relative;
/* overflow: hidden; */
padding: 52px 0 0 0;
height: 280px;
position: relative;
overflow: hidden;
background: transparent;
}
.cta-section .left {
width: 580px;
position: absolute;
z-index: 3;
top: 1px;
height: 100%;
}
.cta-section .left img {
height: 100%;
}
.cta-section .container {
margin: 0 auto;
position: relative;
max-width: 1600px;
height: 100%;
align-items: center;
display: flex;
}
.cta-section::after {
content: '';
width: 100%;
height: 100%;
background: var(--primary);
margin: 0px;
padding: 0px;
position: absolute;
top: 52px;
}
.cta-content {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 2;
width: 64%;
margin-left: auto;
padding: 10px 0;
}
.cta-text {
padding-right: 15px;
}
.cta-text h3 {
color: #fff;
font-size: 32px;
margin-bottom: 10px;
font-weight: 600;
line-height: normal;
}
.cta-text p {
font-size: 18px;
max-width: 600px;
color: rgba(255, 255, 255, 0.9);
margin: 0px;
}
.cta-btns {
/* display: flex; */
/* gap: 20px; */
display: flex;
gap: 16px;
flex-shrink: 0;
align-items: center;
flex-wrap: wrap;
}
.cta-btns .btn-primary{
background: #012254;
border-color:#012254;
}
.cta-btns .btn-secondary{
background: var(--primary);
border-color:#FFFCFA;
}
/* .cta-bg-image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 32%;
background: url('../images/cta-bg.jpg') center/cover no-repeat;
z-index: 1;
}
.cta-orange-bg {
position: absolute;
top: 0;
left: 32%;
bottom: 0;
right: 0;
background: var(--primary);
z-index: 2;
}
.cta-orange-bg::before {
content: '';
position: absolute;
top: 0;
right: 100%;
bottom: 0;
width: 80px;
background: var(--primary);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
z-index: 2;
}
.cta-orange-bg::after {
content: '';
position: absolute;
top: 0;
right: 100%;
width: 80px;
height: 80px;
background: var(--dark-2);
clip-path: polygon(100% 0, 100% 100%, 0 0);
z-index: 1;
opacity: 0.85;
}
.cta-container {
position: relative;
z-index: 3;
display: flex;
justify-content: flex-end;
}
.cta-content-wrapper {
width: 70%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
padding: 50px 0 50px 30px;
}
.cta-text {
text-align: left;
}
.cta-section h3 {
font-family: 'Golos Text', sans-serif;
font-size: 32px;
font-weight: 800;
color: var(--white);
margin-bottom: 12px;
font-style: normal;
}
.cta-section p {
color: rgba(255, 255, 255, 0.95);
font-size: 14.5px;
line-height: 1.6;
margin: 0;
max-width: 680px;
}
.cta-btns {
display: flex;
gap: 20px;
flex-shrink: 0;
align-items: center;
}
.cta-section .btn-primary {
background: var(--secondary);
color: var(--white);
padding: 14px 32px;
border-radius: 100px;
font-weight: 600;
font-size: 14px;
border: 1px solid #156A9A;
transition: var(--transition);
}
.cta-section .btn-primary:hover {
background: #142b38;
border-color: #142b38;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(30, 63, 82, 0.25);
}
.cta-section .btn-outline {
background: transparent;
color: var(--white);
padding: 14px 32px;
border-radius: 100px;
font-weight: 600;
font-size: 14px;
border: 1px solid rgba(255, 255, 255, 0.6);
transition: var(--transition);
}
.cta-section .btn-outline:hover {
background: rgba(255, 255, 255, 0.15);
border-color: var(--white);
transform: translateY(-2px);
} */
@media(max-width: 992px) {
.cta-bg-image {
display: none;
}
.cta-orange-bg {
left: 0;
}
.cta-orange-bg::before,
.cta-orange-bg::after {
display: none;
}
.cta-container {
justify-content: center;
}
.cta-content-wrapper {
width: 100%;
flex-direction: column;
align-items: center;
text-align: center;
padding: 50px 15px;
gap: 30px;
}
.cta-text {
text-align: center;
}
.cta-section h3 {
font-size: 26px;
}
}
@media(max-width: 480px) {
.cta-btns {
flex-direction: column;
width: 100%;
}
.cta-btns a {
width: 100%;
justify-content: center;
}
.cta-section h3 {
font-size: 22px;
}
}
/* ============================================
FOOTER
============================================ */
.footer {
position: relative;
background: linear-gradient(#00295EED, #000F21FC), url('../images/footer.jpg') no-repeat center;
background-size: cover;
padding: 65px 0 0;
color: var(--white);
}
.footer .container {
position: relative;
z-index: 1;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 0.85fr 1.35fr 1.9fr;
gap: 35px;
align-items: flex-start;
}
.footer-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 375px;
max-width: 100%;
min-height: 96px;
margin-bottom: 24px;
padding: 18px 26px;
background: var(--white);
border-radius: 12px;
}
.footer-logo img {
display: block;
width: 100%;
height: auto;
max-height: 66px;
object-fit: contain;
}
.footer-about p {
max-width: 385px;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
text-align: left;
color: rgba(255, 255, 255, 0.92);
}
.footer-socials {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 20px;
}
.footer-socials a {
width: 41px;
height: 41px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.86);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 19px;
transition: var(--transition);
}
.footer-socials a:hover {
background: var(--primary);
border-color: var(--primary);
color: var(--white);
}
.footer-title {
font-size: 28px;
font-weight: 600;
color: var(--white);
margin-bottom: 22px;
line-height: 1.2;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links li a {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 400;
line-height: 1.35;
color: rgba(255, 255, 255, 0.94);
transition: var(--transition);
}
.footer-links li a::before {
content: '�';
color: var(--primary);
font-weight: 700;
}
.footer-links li a:hover {
color: var(--primary);
padding-left: 5px;
}
.footer-contact li {
display: flex;
gap: 10px;
margin-bottom: 15px;
font-size: 13px;
}
.footer-contact li i,
.footer-contact-icon {
flex-shrink: 0;
}
.footer-bottom {
margin-top: 40px;
padding: 18px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
font-size: 13px;
}
.footer-bottom p {
margin: 0;
color: #fff;
}
.footer-bottom a {
color: var(--primary);
}
.footer-links li a::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
color: inherit;
background: currentColor;
flex-shrink: 0;
}
.footer-links li a:hover {
transform: translateX(5px);
padding-left: 0;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 30px;
}
.footer-contact li {
align-items: center;
gap: 23px;
margin-bottom: 0;
font-size: 18px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.94);
}
.footer-contact-icon {
width: 70px;
height: 70px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
margin-top: 0;
}
.footer-contact-icon img {
display: block;
width: 40px;
height: 40px;
object-fit: contain;
}
.footer-contact li a {
color: rgba(255, 255, 255, 0.94);
}
.footer-contact li:nth-child(2) a {
font-size: 24px;
font-weight: 600;
}
.footer-contact li a:hover {
color: var(--primary);
}
/* ============================================
RESPONSIVE
============================================ */
@media(max-width: 1023px) {
.about-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.about-img-container {
max-width: 520px;
margin: 0 auto;
}
.about-features-card {
grid-template-columns: repeat(2, 1fr);
margin-top: 40px;
}
.qualitative-wrapper {
grid-template-columns: 1fr;
}
.hero-wrapper {
min-height: 680px;
}
.hero-left {
padding-left: 50px;
padding-right: 90px;
}
.hero-content h1 {
font-size: 50px;
}
.hero-content p {
font-size: 18px;
}
.hero-slider .owl-dots {
left: 50px;
bottom: 80px;
}
.project-card {
height: 400px;
}
}
/* ============================================
FOOTER � 1024px to 1199px
============================================ */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
/* Switch footer from 4-col to 2�2 grid */
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 38px 28px;
}
.footer {
padding-top: 55px;
}
/* Logo sizing */
.footer-logo {
width: 100%;
max-width: 280px;
min-height: 78px;
padding: 12px 18px;
margin-bottom: 16px;
}
/* About column */
.footer-about p {
max-width: 100%;
font-size: 14px;
line-height: 1.6;
}
/* Section titles */
.footer-title {
font-size: 20px;
margin-bottom: 14px;
}
/* Quick links & services list */
.footer-links li {
margin-bottom: 9px;
}
.footer-links li a {
font-size: 14px;
gap: 8px;
}
/* Social icons */
.footer-socials {
gap: 10px;
margin-top: 14px;
}
.footer-socials a {
width: 34px;
height: 34px;
font-size: 15px;
}
/* -- Contact Us column -- */
.footer-contact {
gap: 14px;
}
.footer-contact li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 13px;
line-height: 1.5;
margin-bottom: 0;
}
/* Icon box � fits text without wrapping */
.footer-contact-icon {
width: 46px;
height: 46px;
min-width: 46px;
border-radius: 6px;
flex-shrink: 0;
}
.footer-contact-icon img {
width: 24px;
height: 24px;
}
/* Address */
.footer-contact li:nth-child(1) {
font-size: 13px;
line-height: 1.55;
}
/* Phone � one line, no wrap */
.footer-contact li:nth-child(2) {
align-items: center;
}
.footer-contact li:nth-child(2) a {
font-size: 15px;
font-weight: 700;
white-space: nowrap;
line-height: 1.3;
}
/* Email � word break for long address */
.footer-contact li:nth-child(3) a {
font-size: 12px;
word-break: break-all;
line-height: 1.5;
}
.footer-bottom {
margin-top: 36px;
font-size: 13px;
}
}
@media(max-width: 768px) {
.header-top {
display: none;
}
.hero {
margin-top: 70px;
}
.nav-toggle {
display: flex;
}
.nav-menu {
position: fixed;
top: 70px;
left: -100%;
width: 280px;
height: calc(100vh - 70px);
background: var(--white);
flex-direction: column;
align-items: flex-start;
padding: 20px;
gap: 0;
overflow-y: auto;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
transition: var(--transition);
z-index: 999;
}
.nav-menu.active {
left: 0;
}
.nav-menu>li {
width: 100%;
}
.nav-menu>li>a {
padding: 12px 10px;
border-bottom: 1px solid var(--border);
}
.dropdown-menu {
position: static;
box-shadow: none;
border-top: none;
opacity: 1;
visibility: visible;
transform: none;
display: none;
padding-left: 15px;
border-left: 2px solid var(--primary);
margin: 5px 0 5px 10px;
}
.dropdown-menu.show {
display: block;
}
.hero-wrapper {
flex-direction: column;
min-height: auto;
}
.hero-left {
width: 100%;
padding: 55px 15px 105px;
text-align: center;
clip-path: none;
}
.hero-right {
position: relative;
width: 100%;
height: 400px;
clip-path: none;
}
.hero-img-slide img {
min-height: 400px;
}
.hero-content {
margin: 0 auto;
}
.hero-btns {
justify-content: center;
}
.hero-slider .owl-dots {
left: 50%;
transform: translateX(-50%);
bottom: calc(400px + 48px);
}
.counter-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.about-features-card {
grid-template-columns: 1fr;
gap: 25px;
padding: 25px 20px;
}
.project-card {
height: 350px;
}
.project-card-info {
right: 14px;
bottom: -28px;
left: 14px;
min-height: 88px;
padding: 14px 16px 13px;
}
.project-card-info h4 {
font-size: 15px;
margin-bottom: 6px;
}
.project-card-info p {
font-size: 13px;
}
.section-title {
font-size: 26px;
margin-bottom: 30px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 34px;
}
.footer {
padding-top: 45px;
}
.footer-logo {
width: 320px;
min-height: 82px;
}
.footer-about p {
max-width: none;
font-size: 15px;
letter-spacing: 0.7px;
text-align: left;
}
.footer-title {
font-size: 23px;
margin-bottom: 16px;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links li a {
font-size: 16px;
}
.footer-contact {
gap: 20px;
}
.footer-contact li {
align-items: flex-start;
gap: 16px;
font-size: 15px;
}
.footer-contact-icon {
width: 54px;
height: 54px;
}
.footer-contact-icon img {
width: 31px;
height: 31px;
}
.footer-contact li:nth-child(2) a {
font-size: 19px;
}
.footer-bottom {
margin-top: 40px;
font-size: 14px;
}
}
@media(max-width: 480px) {
.hero-content h1 {
font-size: 34px;
line-height: 1.2;
}
.hero-content p {
font-size: 15px;
line-height: 1.7;
}
.hero-btns {
flex-direction: column;
}
.hero-btns .btn-primary,
.hero-btns .btn-outline {
width: 100%;
min-width: 0;
padding: 15px 20px;
font-size: 15px;
}
.hero-right {
height: 300px;
}
.hero-img-slide img {
height: 300px;
min-height: 300px;
}
.hero-slider .owl-dots {
bottom: calc(300px + 38px);
}
.counter-number {
font-size: 30px;
}
.counter-grid {
grid-template-columns: 1fr 1fr;
}
.project-card {
height: 300px;
}
.project-card-info {
right: 12px;
bottom: -24px;
left: 12px;
min-height: 78px;
padding: 12px 14px 11px;
}
.project-card-info h4 {
font-size: 14px;
margin-bottom: 5px;
}
.project-card-info p {
font-size: 12px;
}
/* About mobile adjustments */
.about-img-container {
padding-bottom: 40px;
}
.about-badge-new {
width: 90px;
height: 90px;
top: 10%;
left: 6%;
}
.about-badge-content h3 {
font-size: 20px;
}
.about-badge-content p {
font-size: 9px !important;
}
.section-title {
font-size: 22px;
margin-bottom: 25px;
}
.quality-item {
flex-direction: column;
align-items: flex-start;
gap: 15px;
padding: 20px;
}
}
/* Home Slider */
.homeSlider {
position: relative;
background: linear-gradient(rgb(30, 63, 82), rgba(30, 63, 82, 0.86)), url('../images/hero-section-bg.jpg') center/cover;
padding: 0px;
}
.homeSlider .caption-wrap {
opacity: 1 !important;
color: #000
}
.owl-carousel .owl-item .btn-group img {
width: auto;
}
.homeSlider .caption-wrap .line1 {
font-weight: 700;
font-size: 64px;
line-height: 88px;
color: #FFFFFF;
margin: 0 0 20px 0;
text-transform: uppercase;
}
.homeSlider .caption-wrap .line1 span {
color: var(--primary);
}
.homeSlider .caption-wrap .line2 {
font-size: 18px;
color: #FFFFFF;
font-weight: 400;
max-width: none;
margin: 0 0 40px 0;
}
/* @-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0)
}
to {
-webkit-transform: rotate(360deg)
}
} */
.rotating {
-webkit-animation: rotating 2s linear infinite
}
.homeSlider .caption-wrap p {
color: #fff;
font-size: 80px;
line-height: 80px;
font-weight: 300;
margin: 0
}
.homeSlider .owl-item.active .caption-wrap .line1 {
animation: 1s .1s fadeInDown both
}
.homeSlider .owl-item.active .caption-wrap .line2 {
animation: 1s .9s fadeInUp both
}
.homeSlider .owl-item.active .caption-wrap p {
animation: 1s .9s fadeInUp both
}
.homeSlider .owl-item.active .colRight img {
animation: 1s .9s fadeInRight both
}
.homeSlider .caption-wrap .btn-group {
margin-top: 20px;
display: flex;
gap: 15px;
}
.homeSlider .owl-item.active .caption-wrap .btn-default {
animation: 1s 1.2s zoomIn both
}
/*.homeSlider .owl-dots {
position: absolute;
right: 20px;
bottom: 20px
}
.homeSlider .owl-theme .owl-dots .owl-dot.active span {
background-color: #fff
}
.homeSlider .owl-theme .owl-nav {
margin: 0
}
.homeSlider .owl-carousel .owl-nav button.owl-next,
.homeSlider .owl-carousel .owl-nav button.owl-prev {
position: absolute;
margin: -25px 0 0;
top: 60%;
padding: 0;
height: 50px;
border-radius: 50px;
background-color: rgba(0, 0, 0, .1);
color: #fff
}
.homeSlider .owl-carousel .owl-nav button.owl-next:hover,
.homeSlider .owl-carousel .owl-nav button.owl-prev:hover {
background-color: #000
}
.homeSlider .owl-carousel .owl-nav button.owl-next {
right: 20px
}
.homeSlider .owl-carousel .owl-nav button.owl-prev {
left: 20px
}
*/
.homeSlider .container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0 8%;
position: relative;
overflow: hidden;
}
.homeSlider .container .inner-div {
display: flex;
flex-wrap: wrap;
}
.colLeft {
flex: 0 0 auto;
width: 58.33333333%;
align-items: center;
display: flex;
padding-right: 80px;
}
.colRight {
flex: 0 0 auto;
width: 41.66666667%;
}
.colRight img {
max-width: 100%;
margin: auto
}
.introone__shapeone {
position: absolute;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
width: 12%;
}
.introone__shapeone svg,
.introone__shapetwo svg {
width: 100%;
}
.introone__shapetwo {
position: absolute;
bottom: -8px;
left: 0;
z-index: 0;
width: 12%;
}
.introone__thumb-shape {
position: absolute;
bottom: -8px;
right: -23%;
}
.introthree__circle {
position: relative;
display: inline-flex;
align-items: center;
}
.introone__thumb {
position: relative;
height: 100%;
}
.introone__thumb-main {
margin-left: -238px;
margin-top: 0;
width: 1085px;
height: 834px;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
transition: var(--transition);
}
.introone__thumb-main img {
width: 100%;
height: 100%;
}
.background-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.mobile-image,
.mobile-image-768 {
display: none;
}
@media only screen and (min-width: 1024px) and (max-width: 1299px) {
.contact-info {
font-size: 14px;
}
.top-right {
padding: 12px 15px 12px 10%;
}
.logo img {
height: auto;
width: 210px;
}
.nav-menu>li>a {
padding: 10px 10px !important;
font-size: 15px;
font-weight: 400;
}
.homeSlider .container {
padding: 0 15px;
}
.homeSlider .caption-wrap .line1 {
font-weight: 700;
font-size: 46px;
line-height: 64px;
}
.homeSlider .caption-wrap .line2 {
font-size: 18px;
color: #FFFFFF;
font-weight: 400;
margin: 0 0 30px 0;
}
.homeSlider .caption-wrap .line2 {
font-size: 18px;
color: #FFFFFF;
font-weight: 400;
margin: 0 0 30px 0;
}
.introone__thumb-main {
width: 710px;
height: 548px;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
transition: var(--transition);
}
.colLeft {
flex: 0 0 auto;
width: 58.33333333%;
align-items: center;
display: flex;
padding-right: 120px;
}
.about-wrapper {
grid-template-columns: 1.1fr 1fr;
gap: 40px;
}
.section-title {
font-size: 34px;
margin-bottom: 30px;
line-height: 1.2;
}
p {
line-height: 1.6;
font-size: 14px;
margin-bottom: 14px;
}
.badge-bg {
font-size: 15px;
font-weight: 500;
letter-spacing: normal;
text-transform: uppercase;
padding: 6px 20px;
}
.btn {
padding: 8px 20px;
border-radius: 100px;
font-weight: 500;
font-size: 15px;
}
.about-feature-text p {
font-size: 15px;
line-height: 1.5;
margin: 0;
}
.about-features-card {
grid-template-columns: repeat(2, 1fr);
margin-top: 40px;
gap: 20px;
}
.about-feature-text h4 {
font-size: 16px;
margin-bottom: 5px;
}
.about-badge-new {
width: 120px;
height: 120px;
}
.about-badge-content p {
font-size: 14px;
line-height: 1.2;
}
.about-badge-content h3 {
font-size: 34px;
margin-bottom: 2px;
}
.service-card p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}
.service-card h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
padding-bottom: 10px;
}
.counter-number {
font-size: 40px;
font-weight: 700;
margin-bottom: 5px;
line-height: normal;
}
.project-card-info p {
font-size: 15px;
margin: 0;
line-height: 1.2;
font-weight: 400;
}
.qualitative-wrapper {
grid-template-columns: 1fr 1.2fr;
}
.qualitative-contacts {
flex-direction: column;
}
.cta-section .left {
width: 50%;
height: 100%;
}
.cta-section .left img {
width: 100%;
height: 100%;
/* object-fit: cover; */
}
.cta-content {
width: 50%;
flex-direction: column;
gap: 10px;
text-align: center;
}
.footer-logo {
width: 285px;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr 0.85fr 1.6fr 1.2fr;
gap: 25px;
align-items: flex-start;
}
.footer-about p {
max-width: auto !important;
font-size: 14px;
line-height: 1.5;
letter-spacing: normal;
text-align: left;
}
.footer-contact li {
font-size: 14px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.94);
}
.footer-contact-icon {
width: 60px;
height: 60px;
}
.footer-contact-icon img {
width: 30px;
height: 30px;
}
.footer-contact li:nth-child(2) a {
font-size: 20px;
font-weight: 600;
}
}
@media only screen and (max-width:1023px) {
.homeSlider {
padding: 0;
}
.introone__shapeone,
.introone__shapetwo,
.introone__thumb-shape,
.introone__thumb-main {
display: none;
}
.inner-div {
padding: 20PX 0px;
}
.container {
padding: 0 15px;
}
.building-process-card {
padding: 20px;
}
.homeSlider .caption-wrap .line1 {
font-size: 40px;
line-height: 52px;
}
.homeSlider .caption-wrap .line2 {
font-size: 20px;
margin: 0 0 22px 0;
}
.homeSlider .container {
padding: 0 15px;
}
.homeQuote .dflex .leftcol {
width: 300px;
}
.homeQuote .dflex .rightForm {
padding: 20px;
}
.contact_info {
padding: 20px;
}
.colLeft {
width: 100%;
/* display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;*/
padding-right: 0px;
}
.mobile-image {
display: block;
margin-bottom: 20px;
}
.mobile-image img {
width: 100%;
}
/*.mobile-image-768{display: block; margin-left: 20px;}*/
.nav-toggle {
display: flex;
}
.nav-menu {
position: fixed;
top: 148px;
left: -100%;
width: 280px;
height: calc(100vh - 148px);
background: var(--white);
flex-direction: column;
align-items: flex-start;
padding: 20px;
gap: 0;
overflow-y: auto;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
transition: var(--transition);
z-index: 999;
}
.scrolled .nav-menu {
top: 72px;
left: -100%;
width: 280px;
height: calc(100vh - 72px);
}
.nav-menu.active {
left: 0;
}
.nav-menu>li {
width: 100%;
}
.nav-menu>li>a {
padding: 12px 10px;
border-bottom: 1px solid var(--border);
}
.dropdown-menu {
position: static;
box-shadow: none;
border-top: none;
opacity: 1;
visibility: visible;
transform: none;
display: none;
padding-left: 15px;
border-left: 2px solid var(--primary);
margin: 5px 0 5px 10px;
}
.dropdown-menu.show {
display: block;
}
}
@media only screen and (min-width: 992px) and (max-width: 1023px) {
.cta-section .left {
width: 50%;
height: 100%;
}
.cta-content {
width: 50%;
flex-direction: column;
gap: 10px;
text-align: center;
}
}
@media only screen and (min-width: 1300px) and (max-width: 1499px) {
.cta-section .left {
width: 420px;
}
.cta-content {
width: 70%;
}
.cta-text p {
font-size: 18px;
max-width: 600px;
color: rgba(255, 255, 255, 0.9);
line-height: 28px;
margin: 0;
}
.cta-text h3 {
color: #fff;
font-size: 28px;
margin-bottom: 0;
font-weight: 600;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.cta-section .left {
display: none !important;
}
.cta-content {
width: 100%;
flex-direction: column;
}
}
/* ============================================
ABOUT US PAGE STYLES
============================================ */
/* ============================================
PAGE BANNER / BREADCRUMB HERO
============================================ */
.page-banner {
position: relative;
background: linear-gradient(rgba(30, 63, 82, 0.88), rgba(30, 63, 82, 0.82)),
url('images/about-img-1.jpg') center/cover no-repeat;
padding: 90px 0 70px;
text-align: center;
overflow: hidden;
}
.page-banner::before {
content: '';
position: absolute;
inset: 0;
background: url('images/services-bg.jpg') repeat;
opacity: 0.05;
z-index: 0;
}
.page-banner .container {
position: relative;
z-index: 1;
}
.page-banner h1 {
font-size: 52px;
font-weight: 700;
color: #fff;
line-height: 1.2;
margin-bottom: 16px;
}
.page-banner h1 span {
color: var(--primary);
}
.breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb li a {
color: rgba(255, 255, 255, 0.85);
transition: color 0.3s;
}
.breadcrumb li a:hover {
color: var(--primary);
}
.breadcrumb li.active {
color: var(--primary);
font-weight: 500;
}
.breadcrumb-sep {
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
}
/* ============================================
ABOUT OVERVIEW SECTION
============================================ */
.about-overview {
background: #fff;
padding: 80px 0;
}
.about-overview-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
.about-overview-img {
position: relative;
}
.about-overview-img .main-img {
width: 100%;
border-radius: 16px;
object-fit: cover;
height: 520px;
box-shadow: 0 20px 60px rgba(30, 63, 82, 0.15);
}
.about-overview-img .sub-img {
position: absolute;
bottom: -36px;
right: -30px;
width: 220px;
height: 165px;
border-radius: 12px;
object-fit: cover;
border: 5px solid #fff;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
}
.about-overview-img .exp-badge {
position: absolute;
top: 30px;
left: -20px;
background: linear-gradient(135deg, #FE820C 0%, #FF9A39 100%);
border: 2px solid #E87100;
border-radius: 12px;
padding: 18px 22px;
text-align: center;
box-shadow: 0 8px 24px rgba(254, 124, 0, 0.35);
}
.about-overview-img .exp-badge h3 {
font-size: 42px;
font-weight: 800;
color: #fff;
line-height: 1;
}
.about-overview-img .exp-badge p {
font-size: 13px;
color: rgba(255, 255, 255, 0.95);
margin: 4px 0 0;
line-height: 1.3;
font-weight: 500;
}
.about-overview-text h2 {
font-size: 42px;
font-weight: 700;
color: var(--dark);
line-height: 1.3;
margin-bottom: 22px;
}
.about-overview-text h2 span {
color: var(--primary);
}
.about-overview-text p {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 16px;
}
.about-check-list {
list-style: none;
padding: 0;
margin: 20px 0 30px;
display: flex;
flex-direction: column;
gap: 12px;
}
.about-check-list li {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
color: #333;
font-weight: 500;
}
.about-check-list li i {
width: 26px;
height: 26px;
background: linear-gradient(135deg, #FE820C, #FF9A39);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
flex-shrink: 0;
}
/* ============================================
MISSION & VISION SECTION
============================================ */
.mission-vision {
background: #F5F5F5;
/* padding: 80px 0; */
}
.mission-vision-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 50px;
}
.mv-card {
background: #fff;
border-radius: 20px;
padding: 48px 40px;
position: relative;
overflow: hidden;
box-shadow: 0 8px 30px rgba(30, 63, 82, 0.06);
transition: all 0.3s ease;
border-bottom: 4px solid transparent;
}
.mv-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(30, 63, 82, 0.12);
border-bottom-color: var(--primary);
}
.mv-card::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 160px;
height: 160px;
border-radius: 50%;
background: var(--primary);
opacity: 0.05;
transition: all 0.4s ease;
}
.mv-card:hover::before {
opacity: 0.1;
transform: scale(1.2);
}
.mv-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #FE7C00 0%, #FE7C00 100%);
border: 1px solid #FE7C00;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
font-size: 30px;
color: #fff;
box-shadow: 0 6px 18px rgba(254, 124, 0, 0.3);
}
.mv-card h3 {
font-size: 26px;
font-weight: 700;
color: var(--secondary);
margin-bottom: 16px;
}
.mv-card p {
color: var(--text-muted);
line-height: 1.8;
font-size: 1rem !important;
margin: 0;
}
.mv-values {
list-style: none;
padding: 0;
margin: 18px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.mv-values li {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
color: #222;
}
.mv-values li::before {
content: '?';
color: var(--primary);
font-weight: 700;
flex-shrink: 0;
}
/* ============================================
QUALITY COMMITMENT & WHY CHOOSE US
============================================ */
.quality-why-section {
position: relative;
/* padding: 95px 0 100px; */
overflow: hidden;
background: #fff6ed;
}
.quality-why-section::before {
content: '';
position: absolute;
top: -110px;
right: -90px;
width: 360px;
height: 360px;
border: 70px solid rgba(254, 130, 12, 0.06);
border-radius: 50%;
}
.quality-why-section::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 38%;
height: 5px;
background: linear-gradient(90deg, var(--primary), transparent);
}
.quality-why-heading {
position: relative;
z-index: 1;
max-width: 760px;
margin: 0 auto;
}
.quality-why-heading .badge-bg {
margin-bottom: 16px;
}
.quality-why-heading .section-title {
margin-bottom: 0;
color: var(--dark);
}
.quality-why-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 28px;
align-items: stretch;
margin-top: 52px;
}
.quality-why-card {
position: relative;
padding: 44px 40px 40px;
overflow: hidden;
border: 1px solid #dfe7eb;
border-radius: 16px;
background: #fff;
box-shadow: 0 16px 45px rgba(25, 58, 76, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.quality-why-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--primary), #ffb15f);
}
.quality-why-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 55px rgba(25, 58, 76, 0.14);
}
.quality-why-card.choose-card {
background: linear-gradient(145deg, #fff 0%, #f8fbfc 100%);
}
.quality-why-number {
position: absolute;
top: 22px;
right: 28px;
color: #edf2f4;
font-size: 68px;
font-weight: 800;
line-height: 1;
pointer-events: none;
}
.quality-why-icon {
position: relative;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 26px;
border-radius: 14px;
background: var(--secondary);
color: #fff;
font-size: 25px;
box-shadow: 0 9px 22px rgba(30, 63, 82, 0.2);
}
.choose-card .quality-why-icon {
background: linear-gradient(135deg, var(--primary), #FE7C00);
box-shadow: 0 9px 22px rgba(254, 130, 12, 0.25);
}
.quality-why-card h3 {
position: relative;
margin-bottom: 18px;
padding-bottom: 17px;
color: var(--secondary);
font-size: 25px;
line-height: 1.35;
}
.quality-why-card h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 48px;
height: 3px;
border-radius: 10px;
background: var(--primary);
}
.quality-why-card p {
margin: 0 0 16px;
/* color: #5b6870; */
line-height: 1.8;
}
.quality-why-card p:last-child {
margin-bottom: 0;
}
@media (max-width: 991px) {
.quality-why-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.quality-why-section {
padding: 68px 0 72px;
}
.quality-why-grid {
margin-top: 36px;
}
.quality-why-card {
padding: 36px 24px 30px;
}
.quality-why-card h3 {
padding-right: 28px;
font-size: 21px;
}
.quality-why-number {
top: 20px;
right: 18px;
font-size: 52px;
}
}
/* ============================================
WHY CHOOSE US
============================================ */
.why-choose {
background: #fff;
/* padding: 80px 0; */
}
.why-choose-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 50px;
}
.why-card {
background: #F9FBFC;
border: 1px solid #E8EDF0;
border-radius: 18px;
padding: 36px 28px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.why-card:hover {
background: #fff;
box-shadow: 0 15px 45px rgba(30, 63, 82, 0.1);
transform: translateY(-5px);
border-color: rgba(254, 124, 0, 0.3);
}
.why-card-icon {
width: 75px;
height: 75px;
background: linear-gradient(135deg, #002255 0%, #002255 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
font-size: 30px;
color: #fff;
transition: all 0.3s ease;
}
.why-card:hover .why-card-icon {
background: linear-gradient(135deg, #FE820C 0%, #FF9A39 100%);
box-shadow: 0 8px 20px rgba(254, 124, 0, 0.35);
transform: scale(1.08);
}
.why-card h4 {
font-size: 20px;
font-weight: 600;
color: var(--secondary);
margin-bottom: 12px;
}
.why-card p {
font-size: 15px;
/* color: #666; */
line-height: 1.75;
margin: 0;
}
/* ============================================
ABOUT PAGE COUNTER
============================================ */
.about-counter {
position: relative;
background: url('../images/counter-bg-new.jpg') center/cover no-repeat;
z-index: 1;
overflow: hidden;
padding: 80px 0;
}
.about-counter::before {
content: '';
position: absolute;
inset: 0;
background: rgba(18, 38, 51, 0.88);
z-index: -1;
}
.about-counter .counter-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
margin-top: 50px;
}
/* ============================================
TEAM SECTION
============================================ */
.team-section {
background: #F5F5F5;
padding: 80px 0;
}
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
margin-top: 50px;
}
.team-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 6px 25px rgba(30, 63, 82, 0.06);
transition: all 0.35s ease;
border-bottom: 3px solid transparent;
}
.team-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 45px rgba(30, 63, 82, 0.14);
border-bottom-color: var(--primary);
}
.team-card-img {
width: 100%;
height: 270px;
overflow: hidden;
}
.team-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.team-card:hover .team-card-img img {
transform: scale(1.06);
}
.team-card-info {
padding: 22px 22px 24px;
text-align: center;
}
.team-card-info h4 {
font-size: 20px;
font-weight: 600;
color: var(--secondary);
margin-bottom: 5px;
}
.team-card-info span {
font-size: 14px;
color: var(--primary);
font-weight: 500;
display: block;
margin-bottom: 14px;
}
.team-socials {
display: flex;
justify-content: center;
gap: 10px;
}
.team-socials a {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #555;
transition: all 0.3s ease;
}
.team-socials a:hover {
background: var(--primary);
border-color: var(--primary);
color: #fff;
transform: scale(1.1);
}
/* ============================================
CERTIFICATIONS
============================================ */
.certifications {
background: #fff;
padding: 80px 0;
}
.cert-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 50px;
}
.cert-card {
background: #F9FBFC;
border: 1px solid #E8EDF0;
border-radius: 16px;
padding: 36px 28px;
display: flex;
align-items: flex-start;
gap: 20px;
transition: all 0.3s ease;
}
.cert-card:hover {
box-shadow: 0 12px 35px rgba(30, 63, 82, 0.08);
border-color: rgba(254, 124, 0, 0.25);
transform: translateY(-4px);
}
.cert-icon {
width: 58px;
height: 58px;
background: linear-gradient(135deg, #FE820C 0%, #FF9A39 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
flex-shrink: 0;
}
.cert-text h4 {
font-size: 18px;
font-weight: 600;
color: var(--secondary);
margin-bottom: 8px;
}
.cert-text p {
font-size: 14px;
color: #666;
line-height: 1.7;
margin: 0;
}
/* ============================================
PAGE BANNER (INNER PAGES)
============================================ */
.page-banner {
position: relative;
min-height: 380px;
display: flex;
align-items: center;
overflow: hidden;
padding: 0;
}
/* Background image fills the section */
.page-banner-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.page-banner-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
transform: scale(1.06);
transition: transform 8s ease;
}
.page-banner:hover .page-banner-bg img {
transform: scale(1);
}
/* Deep directional gradient overlay */
.page-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(105deg,
rgba(0, 34, 65, 0.93) 0%,
rgba(0, 34, 65, 0.82) 45%,
rgba(254, 124, 0, 0.35) 100%);
z-index: 1;
}
/* Container stacking context */
.page-banner .container {
position: relative;
z-index: 3;
width: 100%;
}
/* Inner content block */
.page-banner-content {
padding: 100px 0 90px;
text-align: center;
}
/* Eyebrow label with decorative lines */
.page-banner-label {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
color: var(--primary);
font-size: 16px;
font-weight: 600;
letter-spacing: normal;
text-transform: uppercase;
}
.banner-line {
display: inline-block;
width: 42px;
height: 2px;
background: var(--primary);
border-radius: 2px;
flex-shrink: 0;
}
/* Main heading */
.page-banner-content h1 {
font-size: 44px;
font-weight: 700;
color: var(--white);
line-height: 1.5;
margin-bottom: 26px;
text-transform: none;
letter-spacing: normal;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.page-banner-content h1 span {
color: var(--primary);
position: relative;
display: inline-block;
}
.page-banner-content h1 span::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary), transparent);
border-radius: 2px;
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
list-style: none;
padding: 8px 20px;
margin: 0 auto;
width: fit-content;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 50px;
}
.breadcrumb li {
display: flex;
align-items: center;
padding: 0px 4px;
}
.breadcrumb li a {
color: rgba(255, 255, 255, 0.85);
font-size: 16px;
font-weight: 600;
padding: 0 0;
display: flex;
align-items: center;
gap: 7px;
transition: color 0.3s ease;
}
.breadcrumb li a:hover {
color: var(--primary);
}
.breadcrumb li a i {
font-size: 12px;
}
.breadcrumb-sep {
color: rgba(255, 255, 255, 0.40);
font-size: 10px;
padding: 0 2px;
}
.breadcrumb li.active {
color: var(--primary);
font-size: 16px;
font-weight: 600;
}
/* Bottom diagonal SVG wave */
/* .page-banner-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
line-height: 0;
z-index: 4;
}
.page-banner-wave svg {
display: block;
width: 100%;
height: 55px;
} */
/* ============================================
ABOUT PAGE � RESPONSIVE
============================================ */
@media (max-width: 1199px) {
.about-overview-wrapper {
gap: 45px;
}
.about-overview-text h2 {
font-size: 36px;
}
.why-choose-grid {
grid-template-columns: repeat(2, 1fr);
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
.cert-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1023px) {
.about-overview-wrapper {
grid-template-columns: 1fr;
gap: 60px;
}
.about-overview-img .sub-img {
right: 0;
bottom: -20px;
width: 160px;
height: 120px;
}
.mission-vision-grid {
grid-template-columns: 1fr;
}
.about-counter .counter-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.page-banner {
min-height: 320px;
}
.page-banner-content {
padding: 80px 0 70px;
}
.page-banner-content h1 {
font-size: 36px;
letter-spacing: 1px;
}
.page-banner-label {
font-size: 11px;
letter-spacing: 2px;
}
.banner-line {
width: 28px;
}
/* .page-banner-wave svg {
height: 38px;
} */
.about-overview-text h2 {
font-size: 28px;
}
.why-choose-grid {
grid-template-columns: 1fr;
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
.cert-grid {
grid-template-columns: 1fr;
}
.mv-card {
padding: 34px 26px;
}
}
@media (max-width: 480px) {
.page-banner {
min-height: 280px;
}
.page-banner-content {
padding: 65px 0 55px;
}
.page-banner-content h1 {
font-size: 30px;
}
.breadcrumb {
padding: 8px 16px;
}
.team-grid {
grid-template-columns: 1fr;
}
.about-counter .counter-grid {
grid-template-columns: 1fr 1fr;
}
}
/* ============================================
SERVICE PAGES STYLING
============================================ */
/* ============================================
SERVICE OVERVIEW SECTION
============================================ */
.svc-overview {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 8% 12%, rgba(254, 124, 0, 0.11), transparent 25%),
linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #f3f7fa 100%);
}
.svc-overview::after {
content: '';
position: absolute;
right: -90px;
bottom: -110px;
width: 320px;
height: 320px;
border: 48px solid rgba(30, 63, 82, 0.05);
border-radius: 50%;
pointer-events: none;
}
.svc-overview .container {
position: relative;
z-index: 1;
}
/* Blockquote-style intro quote */
.svc-quote {
border-left: 4px solid var(--primary);
padding: 18px 22px;
margin: 0 0 24px;
background: linear-gradient(90deg, #fff4e8, #fffaf6);
border-radius: 0 14px 14px 0;
}
.svc-quote p {
font-style: italic;
color: var(--secondary);
font-size: 18px;
margin: 0;
font-weight: 600;
line-height: 1.7;
}
/* Checklist */
.svc-checklist {
list-style: none;
padding: 0;
margin: 28px 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.svc-checklist li {
display: flex;
align-items: center;
gap: 10px;
min-height: 54px;
padding: 12px 14px;
border: 1px solid #e4eaf0;
border-radius: 12px;
background: #f8fafc;
color: var(--text);
font-size: 16px;
font-weight: 600;
transition: var(--transition);
}
.svc-checklist li:hover {
border-color: rgba(254, 124, 0, 0.45);
background: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(30, 63, 82, 0.08);
}
.svc-checklist li i {
color: var(--primary);
font-size: 18px;
flex-shrink: 0;
}
/* ============================================
PROCESS SECTION
============================================ */
/* .svc-process {
padding: 80px 0;
background: #F5F7FA;
}
.svc-process-sub {
max-width: 680px;
margin: 0 auto 50px;
text-align: center;
color: #555;
font-size: 17px;
}
.svc-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
} */
/* .svc-process-card {
background: #fff;
border-radius: 20px;
padding: 36px 26px 30px;
position: relative;
overflow: hidden;
transition: all 0.35s ease;
border-bottom: 4px solid transparent;
box-shadow: 0 4px 18px rgba(30, 63, 82, 0.06);
} */
.svc-process-card:hover {
transform: translateY(-8px);
border-bottom-color: var(--primary);
box-shadow: 0 20px 50px rgba(30, 63, 82, 0.12);
}
/* Large background step number */
/* .svc-process-num {
position: absolute;
top: 16px;
right: 20px;
font-size: 68px;
font-weight: 900;
color: rgba(254, 124, 0, 0.08);
line-height: 1;
pointer-events: none;
user-select: none;
}
.svc-process-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1E3F52 0%, #4C7288 100%);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
margin-bottom: 20px;
transition: all 0.35s ease;
}
.svc-process-card:hover .svc-process-icon {
background: linear-gradient(135deg, #FE820C 0%, #FF9A3A 100%);
box-shadow: 0 8px 20px rgba(254, 124, 0, 0.35);
transform: scale(1.08);
}
.svc-process-card h3 {
font-size: 18px;
font-weight: 700;
color: var(--secondary);
margin-bottom: 12px;
line-height: 1.4;
}
.svc-process-card p {
font-size: 14px;
color: #555;
line-height: 1.7;
margin-bottom: 16px;
}
.svc-process-list {
list-style: none;
padding: 0;
margin: 0;
}
.svc-process-list li {
font-size: 13px;
color: #444;
padding: 5px 0;
padding-left: 18px;
position: relative;
border-top: 1px solid #f0f0f0;
}
.svc-process-list li::before {
content: '?';
position: absolute;
left: 0;
color: var(--primary);
font-weight: 700;
} */
/* ============================================
SUB-SERVICES CARDS
============================================ */
.svc-sub {
background: #fff;
}
.svc-sub-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 50px;
}
.svc-sub-card {
background: #fff;
border-radius: 20px;
overflow: hidden;
border: 1px solid #E8EDF0;
box-shadow: 0 4px 18px rgba(30, 63, 82, 0.05);
transition: all 0.35s ease;
display: flex;
flex-direction: column;
}
.svc-sub-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(30, 63, 82, 0.12);
border-color: rgba(254, 124, 0, 0.25);
}
/* Image top */
.svc-sub-img {
position: relative;
height: 210px;
overflow: hidden;
}
.svc-sub-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.svc-sub-card:hover .svc-sub-img img {
transform: scale(1.06);
}
.svc-sub-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(30, 63, 82, 0.55), transparent);
}
/* Card body */
.svc-sub-body {
padding: 32px 28px 28px;
flex: 1;
display: flex;
flex-direction: column;
}
.svc-sub-icon {
width: 54px;
height: 54px;
border-radius: 12px;
background: linear-gradient(135deg, #FE820C 0%, #FF9A3A 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #fff;
margin-bottom: 20px;
margin-top: 0;
position: relative;
z-index: 2;
box-shadow: 0 8px 20px rgba(254, 124, 0, 0.3);
transition: all 0.3s ease;
}
.svc-sub-card:hover .svc-sub-icon {
transform: scale(1.08) translateY(-2px);
}
.svc-sub-body h4 {
/* font-size: 19px; */
font-weight: 700;
color: var(--secondary);
/* margin-bottom: 10px; */
width: 100%;
text-align: center;
font-size: 22px;
line-height: 1.35;
margin-bottom: 12px;
}
.svc-sub-body p {
font-size: 14px;
color: #666;
line-height: 1.7;
margin: 0 0 18px;
flex: 1;
}
.svc-sub-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--primary);
transition: gap 0.25s ease, color 0.25s ease;
}
.svc-sub-link:hover {
gap: 12px;
color: var(--primary-dark);
}
/* ============================================
WHY CHOOSE US (Service)
============================================ */
.svc-why {
background: #F5F7FA;
}
.svc-why-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 70px;
align-items: center;
}
.svc-why-img-wrap {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(30, 63, 82, 0.14);
}
.svc-why-img-wrap img {
width: 100%;
height: 520px;
object-fit: cover;
display: block;
}
.svc-why-exp-badge {
position: absolute;
bottom: 28px;
left: 28px;
background: linear-gradient(135deg, #FE820C 0%, #FF9A3A 100%);
color: #fff;
border-radius: 14px;
padding: 14px 22px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 8px 24px rgba(254, 124, 0, 0.4);
}
.svc-why-exp-badge i {
font-size: 26px;
color: rgba(255, 255, 255, 0.9);
}
.svc-why-exp-badge strong {
display: block;
font-size: 16px;
font-weight: 800;
line-height: 1;
}
.svc-why-exp-badge span {
display: block;
font-size: 12px;
font-weight: 500;
opacity: 0.9;
margin-top: 4px;
}
/* Features List */
.svc-why-features {
display: flex;
flex-direction: column;
gap: 22px;
margin-top: 20px;
}
.svc-why-feature {
display: flex;
gap: 18px;
align-items: center;
padding: 18px;
background: #fff;
border-radius: 14px;
border: 1px solid #E8EDF0;
transition: all 0.3s ease;
}
.svc-why-feature:hover {
border-color: rgba(254, 124, 0, 0.3);
box-shadow: 0 8px 25px rgba(30, 63, 82, 0.08);
transform: translateX(6px);
}
.svc-why-feat-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1E3F52 0%, #4C7288 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
flex-shrink: 0;
transition: all 0.3s ease;
}
.svc-why-feature:hover .svc-why-feat-icon {
background: linear-gradient(135deg, #FE820C 0%, #FF9A3A 100%);
box-shadow: 0 6px 16px rgba(254, 124, 0, 0.35);
}
.svc-why-feat-text h4 {
font-size: 22px;
font-weight: 600;
color: var(--secondary);
margin-bottom: 8px;
}
.svc-why-feat-text p {
color: var(--text-muted);
line-height: 1.8;
font-size: 1rem !important;
}
/* ============================================
FAQ ACCORDION
============================================ */
/* .svc-faq {
padding: 80px 0;
background: #fff;
}
.svc-faq-inner {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 70px;
align-items: start;
}
.svc-faq-header p {
color: #666;
font-size: 15px;
line-height: 1.7;
margin-top: 10px;
}
.svc-faq-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.faq-item {
border: 1px solid #E8EDF0;
border-radius: 14px;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item.active {
border-color: var(--primary);
box-shadow: 0 6px 20px rgba(254, 124, 0, 0.12);
}
.faq-question {
width: 100%;
background: none;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 22px;
font-size: 16px;
font-weight: 600;
color: var(--secondary);
font-family: inherit;
text-align: left;
gap: 16px;
transition: color 0.3s ease;
}
.faq-item.active .faq-question {
color: var(--primary);
}
.faq-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background: #F0F4F8;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
transition: all 0.3s ease;
color: var(--secondary);
}
.faq-item.active .faq-icon {
background: var(--primary);
color: #fff;
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.3s ease;
padding: 0 22px;
}
.faq-item.active .faq-answer {
max-height: 400px;
padding: 0 22px 20px;
}
.faq-answer p {
font-size: 15px;
color: #555;
line-height: 1.75;
margin: 0;
} */
/* ============================================
RELATED PROJECTS
============================================ */
.svc-projects {
padding: 80px 0;
background: #F5F7FA;
}
.svc-projects-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px;
margin-top: 50px;
}
.svc-project-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(30, 63, 82, 0.06);
transition: all 0.35s ease;
}
.svc-project-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(30, 63, 82, 0.14);
}
.svc-project-img {
position: relative;
height: 220px;
overflow: hidden;
}
.svc-project-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.svc-project-card:hover .svc-project-img img {
transform: scale(1.06);
}
.svc-project-overlay {
position: absolute;
inset: 0;
background: rgba(30, 63, 82, 0.55);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.35s ease;
}
.svc-project-card:hover .svc-project-overlay {
opacity: 1;
}
.svc-project-view {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
transform: scale(0.7);
transition: transform 0.3s ease;
}
.svc-project-card:hover .svc-project-view {
transform: scale(1);
}
.svc-project-info {
padding: 20px 22px 22px;
}
.svc-project-tag {
display: inline-block;
background: linear-gradient(102.94deg, #FE7C00 0%, #FF9E42 100%);
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 4px 12px;
border-radius: 100px;
margin-bottom: 10px;
}
.svc-project-info h4 {
font-size: 16px;
font-weight: 700;
color: var(--secondary);
margin-bottom: 6px;
line-height: 1.4;
}
.svc-project-info p {
font-size: 13px;
color: #888;
margin: 0;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1199px) {
.svc-why-grid {
gap: 50px;
}
.svc-process-grid {
grid-template-columns: repeat(2, 1fr);
}
.svc-projects-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1023px) {
.svc-checklist {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.svc-sub-grid {
grid-template-columns: repeat(2, 1fr);
}
.svc-why-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.svc-faq-inner {
grid-template-columns: 1fr;
gap: 40px;
}
}
@media (max-width: 768px) {
.svc-process,
.svc-sub,
.svc-why,
.svc-faq,
.svc-projects {
padding: 60px 0;
}
.svc-process-grid {
grid-template-columns: 1fr;
}
.svc-sub-grid {
grid-template-columns: 1fr;
}
.svc-projects-grid {
grid-template-columns: 1fr 1fr;
}
.svc-why-img-wrap img {
height: 320px;
}
}
@media (max-width: 480px) {
.svc-projects-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
EXPERTISE CARDS (Inner Pages)
============================================ */
.expertise-card {
background: var(--white);
border-radius: 12px;
padding: 35px 30px;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
height: 100%;
}
.expertise-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
border-color: rgba(254, 124, 0, 0.4);
}
.expertise-card h4 {
font-size: 21px;
font-weight: 700;
color: var(--secondary);
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #f0f0f0;
position: relative;
}
.expertise-card h4::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 40px;
height: 2px;
background: var(--primary);
transition: width 0.3s ease;
}
.expertise-card:hover h4::after {
width: 60px;
}
.expertise-card p {
font-size: 16px;
color: var(--text-light);
line-height: 1.6;
margin: 0;
}
/* ============================================
SERVICE PROCESS (4-Step Grid)
============================================ */
.svc-process {
/* padding: 80px 0; */
background-color: #fcfcfd;
}
.svc-process-sub {
/* max-width: 700px; */
margin: 0 auto 30px;
/* color: var(--text-light); */
/* font-size: 18px; */
}
.svc-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
/* .svc-process-card {
background: var(--white);
border-radius: 12px;
padding: 40px 30px 30px;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: var(--transition);
} */
.svc-process-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
border-color: rgba(254, 124, 0, 0.3);
}
.svc-process-num {
position: absolute;
top: 20px;
right: 25px;
font-size: 60px;
font-weight: 800;
color: rgba(254, 124, 0, 0.1);
line-height: 1;
font-family: 'Playfair Display', serif;
}
.svc-process-icon {
width: 60px;
height: 60px;
background: var(--secondary);
color: var(--white);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 25px;
position: relative;
z-index: 2;
box-shadow: 0 5px 15px rgba(30, 63, 82, 0.15);
}
.svc-process-card h3 {
font-size: 20px;
font-weight: 700;
color: var(--dark);
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.svc-process-card p {
color: var(--text-muted);
font-size: 16px;
line-height: 1.6;
margin-bottom: 0;
position: relative;
z-index: 2;
}
.svc-process-list {
position: relative;
z-index: 2;
/* border-top: 1px solid #f0f0f0;
padding-top: 20px; */
}
.svc-process-list li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
font-size: 16px;
font-weight: 500;
}
.svc-process-list li::before {
content: '\f0da';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
left: 0;
top: 2px;
color: var(--primary);
font-size: 14px;
}
/* ============================================
FAQ ACCORDION (Inner Pages)
============================================ */
.svc-faq {
background-color: var(--white);
}
.svc-faq-inner {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 60px;
align-items: start;
}
.svc-faq-header {
position: sticky;
top: 120px;
}
.svc-faq-header .badge-bg {
margin-bottom: 15px;
display: inline-block;
}
.svc-faq-header p {
color: var(--text-light);
font-size: 17px;
line-height: 1.6;
}
.svc-faq-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.faq-item {
background: var(--white);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
overflow: hidden;
transition: var(--transition);
}
.faq-item.active {
border-color: var(--primary);
box-shadow: 0 10px 25px rgba(254, 124, 0, 0.08);
}
.faq-question {
width: 100%;
text-align: left;
background: transparent;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
font-weight: 500;
color: var(--secondary);
transition: var(--transition);
cursor: pointer;
}
.faq-question:hover {
color: var(--primary);
}
.faq-item.active .faq-question {
color: var(--primary);
border-bottom: 1px solid rgba(254, 124, 0, 0.1);
margin-bottom: 15px;
}
.faq-icon {
width: 32px;
height: 32px;
background: #f4f6fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--secondary);
transition: var(--transition);
flex-shrink: 0;
margin-left: 15px;
}
.faq-item.active .faq-icon {
background: var(--primary);
color: var(--white);
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.faq-item.active .faq-answer {
max-height: 800px;
}
.faq-answer p {
color: var(--text-muted);
font-size: 16px;
line-height: 1.7;
margin: 0;
padding: 0 15px 15px;
}
.faq-answer p strong {
color: var(--secondary);
}
@media (max-width: 991px) {
.svc-faq-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.svc-faq-header {
position: relative;
top: 0;
}
}
@media (max-width: 1199px) {
.svc-process-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.svc-process-grid {
grid-template-columns: 1fr;
}
.svc-img-stats {
position: relative;
left: auto;
right: auto;
bottom: auto;
margin: -30px 16px 0;
flex-wrap: wrap;
}
.svc-stat-divider {
display: none;
}
}
@media (max-width: 575px) {
.svc-img-stats {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
padding: 18px;
}
}
.svc-process {
background-color: #fcfcfd;
background-image: url("../images/services-bg.jpg");
background-repeat: repeat;
background-position: center;
}
.svc-process-card {
border-radius: 10px;
padding: 20px;
border: 1px solid #E2E8EE;
border-bottom: 3px solid var(--primary);
box-shadow: 0 8px 24px rgba(30, 63, 82, 0.06);
transition: all 0.35s ease;
background: #fff;
}
.svc-process-card:hover {
transform: translateY(-5px);
}
.svc-process-num {
display: none;
}
.svc-process-icon {
width: 66px;
height: 66px;
margin-bottom: 22px;
border-radius: 10px;
font-size: 26px;
}
.svc-process-card h3 {
font-size: 22px;
line-height: 1.35;
}
/* .svc-process-card p,
.svc-process-list li {
color: var(--text-muted);
line-height: 1.8;
font-size: 1rem;
} */
.svc-process-list {
/* border-top: 1px solid #DDE5EC;
margin-top: 18px;
padding-top: 14px; */
}
.svc-process-list li {
border-top: 0;
border-bottom: 1px solid #EDF1F5;
margin-bottom: 0;
padding: 10px 0 10px 24px;
font-weight: 400;
}
.svc-process-list li:last-child {
border-bottom: 0;
}
.svc-process-list li::before {
content: '\f058';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
top: 12px;
font-size: 16px;
}
.svc-sub {
background: #fff;
}
.svc-sub-card {
border-radius: 10px;
text-align: center;
border: 1px solid #E3EAF0;
box-shadow: 0 8px 24px rgba(30, 63, 82, 0.05);
}
.svc-sub-body {
align-items: center;
padding: 38px 30px 34px;
}
.svc-sub-icon {
width: 78px;
height: 78px;
margin: 0 auto 22px;
border-radius: 50%;
font-size: 32px;
}
.svc-sub-body p {
color: var(--text-muted);
line-height: 1.8;
font-size: 1rem !important;
text-align: center;
margin: 0;
}
.svc-why-grid {
grid-template-columns: 0.9fr 1.1fr;
gap: 60px;
align-items: center;
}
.svc-why-feature-panel {
width: 100%;
}
.svc-why-features {
gap: 18px;
margin-top: 0;
}
.svc-why-feat-icon {
width: 74px;
height: 74px;
border-radius: 50%;
font-size: 32px;
}
.svc-faq {
background: #fff;
}
.svc-faq-title {
max-width: 1100px;
margin: 0 auto 45px;
}
.svc-faq-title p {
color: var(--text-muted);
line-height: 1.8;
font-size: 1rem !important;
}
.svc-faq-inner {
display: block;
max-width: 1100px;
margin: 0 auto;
}
.svc-faq-list {
gap: 18px;
}
.faq-item {
border-radius: 10px;
border: 1px solid #DEE7EE;
box-shadow: 0 5px 18px rgba(30, 63, 82, 0.04);
}
/* .faq-question {
padding: 24px 28px;
font-size: 20px;
line-height: 1.45;
} */
/* .faq-answer p {
color: var(--text-muted);
line-height: 1.8;
font-size: 1rem !important;
padding: 0 28px 28px;
}
.faq-icon {
width: 38px;
height: 38px;
font-size: 15px;
} */
@media (max-width: 768px) {
.svc-why-feature {
align-items: flex-start;
}
.faq-question {
padding: 20px;
font-size: 18px;
}
.faq-answer p {
padding: 0 20px 22px;
}
}
@media (max-width: 575px) {
.svc-checklist {
grid-template-columns: 1fr;
}
.svc-why-feature {
flex-direction: column;
text-align: center;
}
.svc-why-feat-icon {
margin: 0 auto;
}
}
/* ============================================
Service Page Responsive Refinements
============================================ */
@media (max-width: 1023px) {
.svc-why-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.svc-overview::after {
width: 240px;
height: 240px;
border-width: 34px;
}
.svc-sub-grid {
gap: 22px;
margin-top: 35px;
}
.svc-why-content {
max-width: 900px;
}
}
@media (max-width: 768px) {
.nav-menu,
.scrolled .nav-menu {
top: 70px;
width: min(280px, 86vw);
height: calc(100dvh - 70px);
}
.navbar {
min-height: 70px;
padding: 8px 0;
}
.logo img {
width: auto;
height: 54px;
}
.page-banner-label {
gap: 8px;
letter-spacing: 1px;
}
.breadcrumb {
width: 100%;
max-width: 520px;
flex-wrap: wrap;
row-gap: 6px;
border-radius: 16px;
}
.breadcrumb li a,
.breadcrumb li.active {
font-size: 13px;
}
.breadcrumb li a {
padding: 0 7px;
}
.svc-overview::after {
display: none;
}
.svc-quote {
padding: 15px 16px;
}
.svc-quote p,
.svc-overview>.container>p {
font-size: 16px;
}
.svc-process-grid,
.svc-sub-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.svc-sub-body {
padding: 28px 22px;
}
.svc-why-feature {
padding: 16px;
}
.svc-why-feat-icon {
width: 62px;
height: 62px;
font-size: 26px;
}
.svc-faq-title {
margin-bottom: 30px;
}
.faq-question {
gap: 10px;
line-height: 1.4;
}
.faq-icon {
margin-left: 0;
}
.cta-section {
height: auto;
min-height: 0;
padding: 0;
background: linear-gradient(102.94deg, #DA6A00 0%, #FF9E41 100%);
}
.cta-section::after,
.cta-section .left {
display: none;
}
.cta-section .container {
min-height: 0;
padding-top: 42px;
padding-bottom: 42px;
}
.cta-content {
width: 100%;
flex-direction: column;
gap: 22px;
margin: 0;
text-align: center;
}
.cta-text {
padding-right: 0;
}
.cta-text p {
margin-bottom: 0;
}
.cta-btns {
justify-content: center;
}
.footer-logo {
width: min(100%, 320px);
}
.footer-contact li,
.footer-contact li a {
min-width: 0;
overflow-wrap: anywhere;
}
}
@media (max-width: 575px) {
section {
padding: 50px 0;
}
.container {
padding-right: 12px;
padding-left: 12px;
}
.page-banner-content h1 {
font-size: 27px;
line-height: 1.3;
}
.page-banner-label {
font-size: 10px;
}
.banner-line {
width: 20px;
}
.breadcrumb {
padding: 8px 10px;
}
.svc-checklist li {
min-height: 0;
padding: 11px 12px;
font-size: 15px;
}
.svc-process-card {
padding: 18px;
}
.svc-process-icon,
.svc-sub-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
.svc-process-card h3,
.svc-sub-body h4,
.svc-why-feat-text h4 {
font-size: 20px;
}
.svc-why-feature {
gap: 14px;
}
.faq-question {
padding: 16px;
font-size: 16px;
}
.faq-answer p {
padding: 0 16px 18px;
font-size: 15px;
}
.cta-section .container {
padding-top: 36px;
padding-bottom: 36px;
}
.cta-text h3 {
font-size: 24px;
}
.cta-text p {
font-size: 16px;
}
.cta-btns {
width: 100%;
}
.cta-btns .btn {
width: 100%;
justify-content: center;
}
.footer-contact-icon {
width: 46px;
height: 46px;
min-width: 46px;
}
.footer-contact-icon img {
width: 25px;
height: 25px;
}
}
@media (max-width: 359px) {
.page-banner-content h1 {
font-size: 24px;
}
.page-banner-label .banner-line {
display: none;
}
.breadcrumb-sep {
padding: 0;
}
.section-title {
font-size: 21px;
}
.badge-bg {
padding: 7px 15px;
font-size: 13px;
letter-spacing: 1px;
}
.footer-socials {
gap: 8px;
}
}
@media (min-width: 769px) and (max-width: 1023px) {
.footer {
padding-top: 52px;
}
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 42px 32px;
}
.footer-grid>div {
min-width: 0;
}
.footer-logo {
width: 100%;
max-width: 300px;
min-height: 78px;
margin-bottom: 18px;
padding: 12px 18px;
}
.footer-about p {
max-width: 100%;
font-size: 15px;
line-height: 1.65;
}
.footer-title {
margin-bottom: 16px;
font-size: 22px;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links li a {
gap: 9px;
font-size: 15px;
}
.footer-socials {
gap: 10px;
margin-top: 16px;
}
.footer-socials a {
width: 36px;
height: 36px;
font-size: 16px;
}
.footer-contact {
gap: 16px;
}
.footer-contact li {
min-width: 0;
align-items: flex-start;
gap: 13px;
font-size: 14px;
line-height: 1.55;
}
.footer-contact-icon {
width: 48px;
height: 48px;
min-width: 48px;
}
.footer-contact-icon img {
width: 25px;
height: 25px;
}
.footer-contact li a,
.footer-contact li span {
min-width: 0;
overflow-wrap: anywhere;
}
.footer-contact li:nth-child(2) {
align-items: center;
}
.footer-contact li:nth-child(2) a {
font-size: 17px;
white-space: nowrap;
}
.footer-contact li:nth-child(3) a {
font-size: 13px;
}
.footer-bottom {
margin-top: 38px;
font-size: 13px;
}
}
/* ============================================
UNIQUE SERVICE PAGE THEMES
============================================ */
.service-page {
--service-accent: var(--primary);
--service-deep: var(--secondary);
--service-soft: #f4f7fa;
}
.service-page .page-banner-overlay {
background: linear-gradient(105deg,
rgba(0, 34, 65, 0.93) 0%,
rgba(0, 34, 65, 0.82) 45%,
rgba(254, 124, 0, 0.35) 100%);
}
.service-page .section-title span {
color: var(--service-accent);
}
.service-page .badge-bg {
background: var(--service-accent);
}
.service-page .svc-process-card,
.service-page .svc-sub-card,
.service-page .svc-why-feature,
.service-page .faq-item {
border-color: color-mix(in srgb, var(--service-accent) 22%, #dce4ea);
}
/* Rebar: blueprint panels and a connected workflow */
.service-rebar .svc-overview {
background-color: #eef5f8;
background-image:
linear-gradient(rgba(24, 59, 80, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(24, 59, 80, 0.05) 1px, transparent 1px);
background-size: 32px 32px;
}
.service-rebar .svc-overview>.container {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
gap: 18px 60px;
}
.service-rebar .svc-overview .section-title,
.service-rebar .svc-overview .svc-quote {
grid-column: 1;
}
.service-rebar .svc-overview .section-title {
grid-row: 1;
align-self: end;
margin-bottom: 10px;
}
.service-rebar .svc-overview .svc-quote {
grid-row: 2 / span 3;
align-self: start;
padding: 24px;
border: 0;
border-radius: 4px;
background: var(--service-deep);
}
.service-rebar .svc-overview .svc-quote p {
color: #fff;
font-size: 21px;
}
.service-rebar .svc-overview>.container>p {
grid-column: 2;
margin-bottom: 4px;
}
.service-rebar .svc-checklist {
grid-column: 1 / -1;
}
.service-rebar .svc-checklist li {
border-radius: 4px;
border-left: 4px solid var(--service-accent);
background: #fff;
}
.service-rebar .svc-process {
/* background: #fff;
background-color: #fcfcfd; */
background-image: url("../images/services-bg.jpg");
background-repeat: repeat;
background-position: center;
}
.service-rebar .svc-process-grid {
position: relative;
gap: 22px;
counter-reset: rebar-step;
}
.service-rebar .svc-process-grid::before {
content: '';
position: absolute;
top: 52px;
right: 8%;
left: 8%;
height: 2px;
background: repeating-linear-gradient(90deg, var(--service-accent) 0 12px, transparent 12px 20px);
}
.service-rebar .svc-process-card {
counter-increment: rebar-step;
position: relative;
border: 0;
border-radius: 6px;
box-shadow: none;
background: transparent;
text-align: center;
}
/* .service-rebar .svc-process-card::before {
content: '0' counter(rebar-step);
position: absolute;
top: 28px;
right: 24px;
color: rgba(24, 59, 80, 0.12);
font-size: 48px;
font-weight: 800;
} */
.service-rebar .svc-process-icon {
margin-right: auto;
margin-left: auto;
border-radius: 50%;
background: var(--service-accent);
}
.service-rebar .svc-sub {
/* background: var(--service-deep); */
background: #012254;
}
.service-rebar .svc-sub .section-title {
color: #fff;
}
.service-rebar .svc-sub-card {
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 4px;
background: rgba(255, 255, 255, 0.07);
box-shadow: none;
}
.service-rebar .svc-sub-body h4,
.service-rebar .svc-sub-body p {
color: #fff;
}
/* Structural: restrained engineering consultancy aesthetic */
.service-structural .svc-overview {
background: var(--service-deep);
}
.service-structural .svc-overview::after {
border-color: rgba(255, 255, 255, 0.06);
}
.service-structural .svc-overview .section-title,
.service-structural .svc-overview>.container>p {
color: #fff;
}
.service-structural .svc-overview>.container>p {
color: rgba(255, 255, 255, 0.78);
}
.service-structural .svc-overview .svc-quote {
/* max-width: 980px; */
border: 0;
border-top: 2px solid var(--service-accent);
border-bottom: 2px solid var(--service-accent);
border-radius: 0;
background: transparent;
}
.service-structural .svc-overview .svc-quote p {
color: #fff;
font-size: 22px;
text-align: center;
}
.service-structural .svc-checklist li {
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 0;
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.service-structural .svc-process-grid {
counter-reset: structural-step;
}
.service-structural .svc-process-card {
counter-increment: structural-step;
position: relative;
padding: 32px 26px;
border: 0;
border-top: 4px solid var(--service-deep);
border-radius: 0;
box-shadow: 0 12px 30px rgba(16, 45, 62, 0.08);
}
.service-structural .svc-process-card::after {
content: counter(structural-step);
position: absolute;
right: 18px;
bottom: 8px;
color: rgba(16, 45, 62, 0.06);
font-size: 86px;
font-weight: 900;
line-height: 1;
}
.service-structural .svc-process-icon {
border-radius: 2px;
background: var(--service-deep);
}
.service-structural .svc-sub-grid {
grid-template-columns: repeat(2, 1fr);
}
.service-structural .svc-sub-card {
border: 0;
border-left: 6px solid var(--service-accent);
border-radius: 0;
text-align: left;
}
.service-structural .svc-sub-body {
display: grid;
grid-template-columns: 78px 1fr;
column-gap: 24px;
text-align: left;
}
.service-structural .svc-sub-icon {
grid-row: 1 / span 2;
border-radius: 2px;
}
.service-structural .svc-sub-body h4,
.service-structural .svc-sub-body p {
text-align: left;
}
/* Precast: modular concrete panels */
.service-precast .svc-overview {
background: #fff;
}
.service-precast .svc-overview>.container {
/* max-width: 1240px; */
/* text-align: center; */
}
.service-precast .svc-overview .section-title {
/* max-width: 980px; */
margin-right: auto;
margin-left: auto;
}
.service-precast .svc-overview .svc-quote {
/* max-width: 940px; */
margin-right: auto;
margin-left: auto;
border: 0;
border-radius: 18px;
background: #fff;
box-shadow: 0 14px 35px rgba(61, 72, 80, 0.09);
}
.service-precast .svc-checklist li {
justify-content: center;
border: 0;
border-radius: 2px;
background: var(--service-deep);
color: #fff;
}
.service-precast .svc-process-grid {
gap: 0;
}
.service-precast .svc-process-card {
border: 0;
border-right: 1px solid #d8d4ce;
border-radius: 0;
background: #fff;
box-shadow: none;
}
.service-precast .svc-process-card:last-child {
border-right: 0;
}
.service-precast .svc-process-icon {
border-radius: 0 22px 0 22px;
background: var(--service-accent);
}
.service-precast .svc-sub-grid {
gap: 16px;
}
.service-precast .svc-sub-card {
position: relative;
overflow: hidden;
border: 0;
border-radius: 2px;
background: #f3f1ed;
box-shadow: none;
}
.service-precast .svc-sub-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 8px;
background: var(--service-accent);
}
.service-precast .svc-sub-icon {
border-radius: 2px;
background: var(--service-deep);
box-shadow: none;
}
.service-precast .svc-why {
background: var(--service-deep);
}
.service-precast .svc-why .section-title,
.service-precast .svc-why-content>p {
color: #fff;
}
/* BIM/MEP: digital coordination dashboard */
.service-bim .svc-overview {
background:
radial-gradient(circle at 85% 15%, rgba(37, 198, 218, 0.2), transparent 24%),
var(--service-deep);
}
.service-bim .svc-overview .section-title,
.service-bim .svc-overview>.container>p {
color: #fff;
}
.service-bim .svc-overview>.container>p {
color: rgba(255, 255, 255, 0.76);
}
.service-bim .svc-overview .svc-quote {
border-color: var(--service-accent);
background: rgba(37, 198, 218, 0.1);
}
.service-bim .svc-overview .svc-quote p {
color: #fff;
}
.service-bim .svc-checklist li {
border-color: rgba(37, 198, 218, 0.32);
background: rgba(255, 255, 255, 0.06);
color: #fff;
backdrop-filter: blur(8px);
}
.service-bim .svc-checklist li i {
color: var(--service-accent);
}
/* .service-bim .svc-process {
background: #071721;
} */
.service-bim .svc-process .section-title,
.service-bim .svc-process-sub,
.service-bim .svc-process-card h3,
.service-bim .svc-process-card p,
.service-bim .svc-process-list li {
color: #fff;
}
.service-bim .svc-process-card {
border: 1px solid rgba(37, 198, 218, 0.22);
border-radius: 18px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
box-shadow: none;
}
.service-bim .svc-process-icon {
border-radius: 16px;
background: linear-gradient(135deg, var(--primary), #ff9e42);
}
.service-bim .svc-process-list li {
border-color: rgba(255, 255, 255, 0.1);
}
.service-bim .svc-sub-grid {
grid-template-columns: repeat(3, 1fr);
}
.service-bim .svc-sub-card {
border: 0;
border-radius: 18px;
background: #effbfc;
box-shadow: 0 16px 36px rgba(9, 29, 42, 0.08);
}
.service-bim .svc-sub-icon {
border-radius: 18px;
background: var(--service-deep);
}
/* Scan to BIM: point-cloud pattern and measured information */
.service-scan .svc-overview {
background-color: #f5fafc;
background-image: radial-gradient(rgba(78, 143, 186, 0.22) 1.3px, transparent 1.3px);
background-size: 18px 18px;
}
.service-scan .svc-overview>.container {
/* max-width: 1280px; */
/* text-align: center; */
}
.service-scan .svc-overview .section-title {
/* max-width: 980px; */
margin-right: auto;
margin-left: auto;
}
.service-scan .svc-overview .svc-quote {
/* max-width: 900px; */
margin-right: auto;
margin-left: auto;
border: 0;
border-radius: 100px;
background: var(--service-deep);
}
.service-scan .svc-overview .svc-quote p {
color: #fff;
text-align: center;
}
.service-scan .svc-checklist {
grid-template-columns: repeat(3, minmax(0, 1fr));
/* max-width: 1050px; */
margin-right: auto;
margin-left: auto;
}
.service-scan .svc-checklist li {
border: 1px dashed var(--service-accent);
border-radius: 100px;
background: #fff;
}
.service-scan .svc-process-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.service-scan .svc-process-card {
display: grid;
grid-template-columns: 72px 1fr;
column-gap: 22px;
border: 0;
border-radius: 24px;
background: #fff;
}
.service-scan .svc-process-icon {
grid-row: 1 / span 3;
border-radius: 50%;
background: var(--service-accent);
}
.service-scan .svc-process-card h3,
.service-scan .svc-process-card p,
.service-scan .svc-process-list {
grid-column: 2;
}
.service-scan .svc-process-list {
width: 100%;
}
.service-scan .svc-sub-grid {
grid-template-columns: repeat(2, 1fr);
}
.service-scan .svc-sub-card {
border: 0;
border-radius: 24px;
text-align: left;
}
.service-scan .svc-sub-body {
display: grid;
grid-template-columns: 78px 1fr;
gap: 0 22px;
align-items: center;
}
.service-scan .svc-sub-icon {
grid-row: 1 / span 2;
border-radius: 50%;
background: var(--service-accent);
}
.service-scan .svc-sub-body h4,
.service-scan .svc-sub-body p {
text-align: left;
}
@media (max-width: 1023px) {
.service-rebar .svc-overview>.container {
grid-template-columns: 1fr;
}
.service-rebar .svc-overview .section-title,
.service-rebar .svc-overview .svc-quote,
.service-rebar .svc-overview>.container>p,
.service-rebar .svc-checklist {
grid-column: 1;
grid-row: auto;
}
.service-rebar .svc-process-grid::before {
display: none;
}
.service-structural .svc-sub-grid,
.service-scan .svc-process-grid,
.service-scan .svc-sub-grid {
grid-template-columns: 1fr;
}
.service-bim .svc-sub-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.service-rebar .svc-overview .svc-quote p,
.service-structural .svc-overview .svc-quote p {
font-size: 18px;
}
.service-structural .svc-sub-body,
.service-scan .svc-process-card,
.service-scan .svc-sub-body {
display: flex;
flex-direction: column;
text-align: center;
}
.service-structural .svc-sub-body h4,
.service-structural .svc-sub-body p,
.service-scan .svc-sub-body h4,
.service-scan .svc-sub-body p {
text-align: center;
}
.service-scan .svc-process-card h3,
.service-scan .svc-process-card p,
.service-scan .svc-process-list {
width: 100%;
}
.service-bim .svc-sub-grid,
.service-scan .svc-checklist {
grid-template-columns: 1fr;
}
.service-scan .svc-overview .svc-quote {
border-radius: 20px;
}
.service-precast .svc-process-card {
border-right: 0;
border-bottom: 1px solid #d8d4ce;
}
}
/* ============================================
Service Brand Palette Normalization
============================================ */
/* All inner-page banners follow the steel service banner. */
.service-page .page-banner-overlay {
background: linear-gradient(105deg,
rgba(0, 34, 65, 0.93) 0%,
rgba(0, 34, 65, 0.82) 45%,
rgba(254, 124, 0, 0.35) 100%);
}
.service-page .page-banner-label,
.service-page .page-banner-content h1 span,
.service-page .breadcrumb li.active {
color: var(--primary);
}
.service-page .banner-line,
.service-page .page-banner-content h1 span::after {
background: linear-gradient(90deg, var(--primary), transparent);
}
/* Keep overview layouts distinct, but use one clean brand system. */
.service-page .svc-overview {
color: var(--text);
}
.service-page .svc-overview .section-title {
color: var(--dark);
}
.service-page .svc-overview>.container>p {
color: var(--text-muted);
}
.service-page .svc-overview .svc-quote {
border-color: var(--primary);
background: linear-gradient(90deg, #fff4e8, #fffaf6);
}
.service-page .svc-overview .svc-quote p {
color: var(--secondary);
}
.service-page .svc-checklist li {
border-color: #e4eaf0;
background: #fff;
color: var(--text);
}
.service-page .svc-checklist li i {
color: var(--primary);
}
.service-rebar .svc-overview {
background-color: #f4f8fa;
background-image:
linear-gradient(rgba(30, 63, 82, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(30, 63, 82, 0.04) 1px, transparent 1px);
}
.service-rebar .svc-overview .svc-quote {
background: var(--secondary);
}
.service-rebar .svc-overview .svc-quote p {
color: #fff;
}
.service-rebar .svc-checklist li {
border-left-color: var(--primary);
}
.service-structural .svc-overview {
background:
linear-gradient(90deg, rgba(30, 63, 82, 0.035) 1px, transparent 1px),
#fff;
background-size: 72px 100%;
}
.service-structural .svc-overview::after {
border-color: rgba(30, 63, 82, 0.05);
}
.service-structural .svc-overview .svc-quote {
border-top-color: var(--primary);
border-bottom-color: var(--primary);
background: #f7f9fb;
}
.service-structural .svc-checklist li {
border: 1px solid #dfe7ec;
border-left: 4px solid var(--primary);
}
.service-precast .svc-overview {
background: #fff;
}
.service-precast .svc-overview .svc-quote {
border-left: 5px solid var(--primary);
border-radius: 0 14px 14px 0;
}
.service-precast .svc-checklist li {
border: 1px solid #dfe7ec;
background: var(--secondary);
color: #fff;
}
.service-precast .svc-checklist li i {
color: var(--primary);
}
.service-bim .svc-overview {
background:
radial-gradient(circle at 88% 12%, rgba(254, 124, 0, 0.11), transparent 22%),
#f4f8fa;
}
.service-bim .svc-overview .svc-quote {
border-left-color: var(--primary);
background: var(--secondary);
}
.service-bim .svc-overview .svc-quote p {
color: #fff;
}
.service-bim .svc-checklist li {
border: 1px solid #dce6ec;
background: #fff;
color: var(--text);
backdrop-filter: none;
}
.service-scan .svc-overview {
background-color: #f6f9fb;
background-image: radial-gradient(rgba(30, 63, 82, 0.13) 1.2px, transparent 1.2px);
}
.service-scan .svc-overview .svc-quote {
background: var(--secondary);
}
.service-scan .svc-overview .svc-quote p {
color: #fff;
}
.service-scan .svc-checklist li {
border-color: var(--primary);
}
/* Normalize themed components to the home/steel orange and navy palette. */
.service-page .svc-process-icon,
.service-page .svc-sub-icon,
.service-page .svc-why-feat-icon {
background: linear-gradient(135deg, var(--secondary), #0F468C);
}
.service-page .svc-process-card:hover .svc-process-icon,
.service-page .svc-sub-card:hover .svc-sub-icon,
.service-page .svc-why-feature:hover .svc-why-feat-icon {
background: linear-gradient(135deg, var(--primary), #ff9e42);
}
/* .service-bim .svc-process {
background: #f5f7f9;
} */
.service-bim .svc-process .section-title,
.service-bim .svc-process-sub,
.service-bim .svc-process-card h3,
.service-bim .svc-process-card p,
.service-bim .svc-process-list li {
color: var(--text);
}
.service-bim .svc-process-card {
border-color: #dfe7ec;
background: #fff;
box-shadow: 0 8px 24px rgba(30, 63, 82, 0.06);
}
.service-bim .svc-process-list li {
border-color: #edf1f5;
}
.service-bim .svc-sub-card {
background: #fff;
box-shadow: 0 10px 28px rgba(30, 63, 82, 0.07);
}
.service-precast .svc-sub-card {
background: #f5f7f9;
}
.service-precast .svc-sub-card::before {
background: var(--primary);
}
.service-precast .svc-why {
background: var(--secondary);
}
/* ============================================
COMMON SERVICE OVERVIEW DESIGN
Used by Steel Fabrication and Rebar pages
============================================ */
.service-page .svc-overview {
background:
#fff
}
.service-page .svc-overview::after {
right: -130px;
bottom: -150px;
width: 390px;
height: 390px;
border-width: 62px;
border-color: rgba(30, 63, 82, 0.045);
}
.service-page .svc-overview>.container {
display: block;
}
.service-overview-heading {
max-width: 1080px;
margin: 0 auto 38px;
text-align: center;
}
.service-page .svc-overview .service-overview-heading .section-title {
margin: 0;
}
.service-overview-layout {
display: block;
}
.service-overview-copy {
position: relative;
padding: 30px 40px;
overflow: hidden;
border: 1px solid #dce5ea;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 40px rgba(25, 58, 76, 0.07);
}
.service-deliverables-heading>span {
display: block;
margin-bottom: 6px;
color: var(--primary);
font-size: 18px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.service-overview-copy p {
margin-bottom: 15px;
}
.service-overview-copy p:last-child {
margin-bottom: 0;
}
.service-deliverables {
display: block;
margin-top: 20px;
padding: 22px 20px 20px;
border: 1px solid #dce5ea;
border-left: 4px solid var(--primary);
border-radius: 14px;
background: #fff;
box-shadow: 0 12px 32px rgba(25, 58, 76, 0.06);
}
.service-deliverables-heading {
margin-bottom: 16px;
}
.service-deliverables-heading h3 {
margin: 0;
color: #1a1a2e;
font-size: 23px;
line-height: 1.35;
font-weight: 700;
}
.service-page .service-deliverables .svc-checklist {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0;
}
.service-page .service-deliverables .svc-checklist li {
min-height: 58px;
padding: 12px 14px;
border: 0;
border-radius: 10px;
background: #f1f5f7;
color: #1a1a2e;
font-size: 16px;
line-height: 1.4;
box-shadow: none;
font-weight: 600;
}
.service-page .service-deliverables .svc-checklist li:hover {
background: #fff5ea;
box-shadow: none;
transform: translateY(-2px);
}
.service-page .service-deliverables .svc-checklist li i {
width: 23px;
height: 23px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-size: 11px;
}
@media (max-width: 900px) {
.service-page .service-deliverables .svc-checklist {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
.service-overview-heading {
margin-bottom: 28px;
text-align: left;
}
.service-overview-copy,
.service-deliverables {
padding: 24px 20px;
}
.service-page .service-deliverables .svc-checklist {
grid-template-columns: 1fr;
}
}
/* ============================================
REBAR PROCESS SECTION FIX
============================================ */
.service-rebar .svc-process {
position: relative;
background:
linear-gradient(rgba(30, 63, 82, 0.025), rgba(30, 63, 82, 0.025)),
url('../images/services-bg.jpg') repeat;
}
.service-rebar .svc-process-grid {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
align-items: stretch;
}
.service-rebar .svc-process-grid::before {
display: none;
}
.service-rebar .svc-process-card {
position: relative;
display: flex;
flex-direction: column;
padding: 28px 24px 24px;
overflow: hidden;
border: 1px solid #dde6eb;
border-bottom: 4px solid var(--primary);
border-radius: 14px;
background: #fff;
box-shadow: 0 12px 32px rgba(25, 58, 76, 0.08);
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-rebar .svc-process-card::after {
content: '';
position: absolute;
top: -42px;
right: -42px;
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(254, 130, 12, 0.06);
}
.service-rebar .svc-process-card:hover {
transform: translateY(-6px);
border-color: rgba(254, 130, 12, 0.4);
border-bottom-color: var(--primary);
box-shadow: 0 20px 42px rgba(25, 58, 76, 0.13);
}
.service-rebar .svc-process-icon {
position: relative;
z-index: 1;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 22px;
border-radius: 13px;
background: linear-gradient(135deg, var(--secondary), #0F468C);
color: #fff;
font-size: 24px;
box-shadow: 0 9px 22px rgba(30, 63, 82, 0.2);
}
.service-rebar .svc-process-card:hover .svc-process-icon {
background: linear-gradient(135deg, var(--primary), #ff9e3d);
}
.service-rebar .svc-process-card h3 {
margin-bottom: 12px;
color: var(--secondary);
font-size: 21px;
line-height: 1.35;
}
.service-rebar .svc-process-card>p {
margin-bottom: 18px;
color: var(--text-muted);
line-height: 1.7;
}
.service-rebar .svc-process-list {
margin-top: auto;
padding: 14px 0 0;
border-top: 1px solid #e8edf0;
list-style: none;
}
.service-rebar .svc-process-list li {
position: relative;
margin: 0;
padding: 9px 0 9px 25px;
border: 0;
border-bottom: 1px solid #edf1f3;
color: #4f5d66;
font-size: 14px;
font-weight: 500;
line-height: 1.45;
}
.service-rebar .svc-process-list li:last-child {
border-bottom: 0;
}
.service-rebar .svc-process-list li::before {
content: '\f058';
position: absolute;
top: 10px;
left: 0;
color: var(--primary);
font-family: 'Font Awesome 6 Free';
font-size: 15px;
font-weight: 900;
}
@media (max-width: 1100px) {
.service-rebar .svc-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.service-rebar .svc-process-grid {
grid-template-columns: 1fr;
}
.service-rebar .svc-process-card {
padding: 24px 20px 20px;
}
}
/* ============================================
STRUCTURAL ENGINEERING PREMIUM PAGE
============================================ */
.service-structural {
--struct-navy: #012254;
--struct-navy-2: #0F468C;
--struct-ink: #182231;
--struct-muted: #5f6d76;
--struct-line: #dce5ea;
--struct-soft: #f3f7f9;
--struct-orange: #fe820c;
}
.service-structural .struct-main {
background: #fff;
}
.service-structural .struct-eyebrow {
display: inline-block;
margin-bottom: 13px;
color: var(--struct-orange);
font-size: 13px;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
}
.service-structural .struct-section-heading .badge-bg,
.service-structural .struct-process-heading .badge-bg {
display: inline-block;
margin-bottom: 16px;
}
.service-structural .struct-section-heading .svc-process-sub,
.service-structural .struct-process-heading .svc-process-sub {
max-width: 760px;
margin: 0 auto;
}
.service-structural .struct-intro {
background:
radial-gradient(circle at 4% 12%, rgba(254, 130, 12, 0.08), transparent 24%),
#fff;
}
.service-structural .struct-intro-grid {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(380px, 0.96fr);
gap: 70px;
align-items: center;
}
.service-structural .struct-intro-content .section-title {
margin-bottom: 20px;
}
.service-structural .struct-lead {
color: #3e4d56;
font-weight: 600;
}
.service-structural .struct-intro-points {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 25px;
}
.service-structural .struct-intro-points span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 13px;
border: 1px solid var(--struct-line);
border-radius: 100px;
background: var(--struct-soft);
color: #222;
font-size: 16px;
font-weight: 500;
}
.service-structural .struct-intro-points i {
color: var(--struct-orange);
}
.service-structural .struct-intro-visual {
position: relative;
min-height: 470px;
}
.service-structural .struct-intro-visual::before {
content: '';
position: absolute;
top: -18px;
right: -18px;
width: 55%;
height: 55%;
border-top: 4px solid var(--struct-orange);
border-right: 4px solid var(--struct-orange);
border-radius: 0 18px 0 0;
}
.service-structural .struct-intro-visual>img {
width: 100%;
height: 470px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 24px 55px rgba(23, 56, 76, 0.2);
}
.service-structural .struct-visual-card {
position: absolute;
right: 24px;
bottom: 24px;
left: 24px;
display: flex;
align-items: center;
gap: 15px;
padding: 18px 20px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 13px;
background: rgba(0, 34, 85, 0.92);
color: #fff;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
}
.service-structural .struct-visual-card>i {
color: var(--struct-orange);
font-size: 30px;
}
.service-structural .struct-visual-card strong,
.service-structural .struct-visual-card span {
display: block;
}
.service-structural .struct-visual-card strong {
margin-bottom: 2px;
font-size: 18px;
font-weight: 600;
}
.service-structural .struct-visual-card span {
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
}
.service-structural .struct-capabilities {
background: var(--struct-soft);
}
.service-structural .struct-section-heading {
display: block;
max-width: 860px;
margin: 0 auto 38px;
}
.service-structural .struct-section-heading .section-title,
.service-structural .struct-section-heading p {
margin-bottom: 0;
}
.service-structural .struct-capability-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.service-structural .struct-capability-card {
position: relative;
padding: 30px 26px 27px;
overflow: hidden;
border: 1px solid var(--struct-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 30px rgba(23, 56, 76, 0.055);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-structural .struct-capability-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 42px rgba(23, 56, 76, 0.12);
}
.service-structural .struct-capability-card>span {
position: absolute;
top: 20px;
right: 22px;
color: #e8eef1;
font-size: 42px;
font-weight: 900;
line-height: 1;
}
.service-structural .struct-card-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
border-radius: 13px;
background: linear-gradient(135deg, var(--struct-navy), var(--struct-navy-2));
color: #fff;
font-size: 23px;
box-shadow: 0 9px 20px rgba(23, 56, 76, 0.18);
}
.service-structural .struct-capability-card:hover .struct-card-icon {
background: linear-gradient(135deg, var(--struct-orange), #ff9d3b);
}
.service-structural .struct-capability-card h3,
.service-structural .struct-process-card h3,
.service-structural .struct-benefit-grid h3 {
margin-bottom: 10px;
color: var(--struct-navy);
font-size: 20px;
line-height: 1.35;
}
.service-structural .struct-capability-card p,
.service-structural .struct-process-card p,
.service-structural .struct-benefit-grid p {
margin-bottom: 0;
}
.service-structural .struct-systems {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #012254, #0F468C);
}
.service-structural .struct-systems::after {
content: '';
position: absolute;
right: -130px;
bottom: -180px;
width: 430px;
height: 430px;
border: 65px solid rgba(255, 255, 255, 0.035);
border-radius: 50%;
}
.service-structural .struct-systems-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
gap: 65px;
align-items: center;
}
.service-structural .struct-systems-image img {
width: 100%;
height: 500px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}
.service-structural .struct-systems-content .section-title,
.service-structural .struct-systems-content p {
color: #fff;
}
.service-structural .struct-systems-content>p {
color: rgba(255, 255, 255, 0.72);
}
.service-structural .struct-system-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 26px;
}
.service-structural .struct-system-list>div {
display: flex;
gap: 13px;
padding: 17px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 11px;
background: rgba(255, 255, 255, 0.06);
}
.service-structural .struct-system-list i {
width: 26px;
color: var(--struct-orange);
font-size: 20px;
text-align: center;
}
.service-structural .struct-system-list span,
.service-structural .struct-system-list strong {
display: block;
}
.service-structural .struct-system-list span {
color: rgba(255, 255, 255, 0.67);
font-size: 16px;
line-height: 1.55;
}
.service-structural .struct-system-list strong {
margin-bottom: 3px;
color: #fff;
font-size: 15px;
}
.service-structural .struct-process {
background: #fff;
}
.service-structural .struct-process-heading {
max-width: 820px;
margin: 0 auto 40px;
}
.service-structural .struct-process-heading .section-title {
margin-bottom: 12px;
}
.service-structural .struct-process-grid {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.service-structural .struct-process-grid::before {
content: '';
position: absolute;
top: 57px;
right: 8%;
left: 8%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(254, 130, 12, 0.55), transparent);
}
.service-structural .struct-process-card {
position: relative;
padding: 25px 22px 23px;
border: 1px solid var(--struct-line);
border-radius: 13px;
background: #fff;
box-shadow: 0 10px 28px rgba(23, 56, 76, 0.07);
}
.service-structural .struct-process-card .struct-card-icon {
position: relative;
z-index: 1;
margin-bottom: 22px;
border: 5px solid #fff;
border-radius: 50%;
}
.service-structural .struct-step {
position: absolute;
top: 18px;
right: 18px;
color: #e9eef1;
font-size: 36px;
font-weight: 900;
}
.service-structural .struct-standards {
background:
linear-gradient(rgba(23, 56, 76, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(23, 56, 76, 0.04) 1px, transparent 1px),
var(--struct-soft);
background-size: 32px 32px;
}
.service-structural .struct-standards-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
gap: 60px;
align-items: center;
}
.service-structural .struct-standards-content .section-title {
margin-bottom: 18px;
}
.service-structural .struct-standards-panel {
padding: 32px;
border-top: 5px solid var(--struct-orange);
border-radius: 14px;
background: var(--struct-navy);
box-shadow: 0 18px 42px rgba(23, 56, 76, 0.2);
}
.service-structural .struct-standards-panel h3 {
margin-bottom: 18px;
color: #fff;
font-size: 23px;
}
.service-structural .struct-standards-panel ul {
margin: 0;
padding: 0;
list-style: none;
}
.service-structural .struct-standards-panel li {
display: flex;
gap: 11px;
padding: 11px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
}
.service-structural .struct-standards-panel li:last-child {
border-bottom: 0;
}
.service-structural .struct-standards-panel i {
margin-top: 3px;
color: var(--struct-orange);
}
.service-structural .struct-benefits {
background: #fff;
}
.service-structural .struct-benefit-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.service-structural .struct-benefit-grid article {
padding: 27px 23px;
border: 1px solid var(--struct-line);
border-radius: 13px;
background: #fff;
transition: background 0.3s ease, transform 0.3s ease;
}
.service-structural .struct-benefit-grid article:hover {
transform: translateY(-5px);
background: var(--struct-soft);
}
.service-structural .struct-benefit-grid article>i {
margin-bottom: 20px;
color: var(--struct-orange);
font-size: 29px;
}
.service-structural .struct-faq {
background: #fff;
}
.service-structural .struct-faq .svc-faq-title {
max-width: 820px;
margin: 0 auto 42px;
}
.service-structural .struct-faq .svc-faq-title .badge-bg {
display: inline-block;
margin-bottom: 18px;
}
.service-structural .struct-faq .svc-faq-title .section-title {
margin-bottom: 10px;
}
.service-structural .struct-faq .svc-faq-title p {
margin-bottom: 0;
color: var(--text);
}
.service-structural .struct-faq .svc-faq-inner {
display: block;
max-width: 1100px;
margin: 0 auto;
}
.service-structural .struct-faq .svc-faq-list {
gap: 16px;
}
.service-structural .struct-faq .faq-item {
border: 1px solid rgba(254, 130, 12, 0.34);
border-radius: 10px;
background: #fff;
box-shadow: none;
}
.service-structural .struct-faq .faq-item.active {
border-color: rgba(254, 130, 12, 0.52);
box-shadow: 0 10px 28px rgba(30, 63, 82, 0.06);
}
.service-structural .struct-faq .faq-question {
min-height: 62px;
padding: 15px 16px;
font-size: 19px;
}
.service-structural .struct-faq .faq-answer p {
padding: 0 16px 16px;
}
@media (max-width: 1100px) {
.service-structural .struct-intro-grid,
.service-structural .struct-systems-grid,
.service-structural .struct-standards-grid {
grid-template-columns: 1fr;
}
.service-structural .struct-intro-visual {
max-width: 760px;
}
.service-structural .struct-capability-grid,
.service-structural .struct-benefit-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-structural .struct-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-structural .struct-process-grid::before {
display: none;
}
}
@media (max-width: 768px) {
.service-structural .struct-section-heading {
grid-template-columns: 1fr;
gap: 15px;
}
.service-structural .struct-system-list {
grid-template-columns: 1fr;
}
.service-structural .struct-intro-visual,
.service-structural .struct-intro-visual>img,
.service-structural .struct-systems-image img {
min-height: 0;
height: 380px;
}
}
@media (max-width: 576px) {
.service-structural .struct-intro-grid,
.service-structural .struct-systems-grid,
.service-structural .struct-standards-grid {
gap: 36px;
}
.service-structural .struct-capability-grid,
.service-structural .struct-process-grid,
.service-structural .struct-benefit-grid {
grid-template-columns: 1fr;
}
.service-structural .struct-intro-visual,
.service-structural .struct-intro-visual>img,
.service-structural .struct-systems-image img {
height: 320px;
}
.service-structural .struct-visual-card {
right: 14px;
bottom: 14px;
left: 14px;
padding: 14px;
}
.service-structural .struct-standards-panel {
padding: 25px 21px;
}
}
/* ============================================
PRECAST PANEL DETAILING PREMIUM PAGE
============================================ */
.service-precast {
--pc-navy: #012254;
--pc-navy-2: #0F468C;
--pc-ink: #1e2932;
--pc-muted: #637078;
--pc-concrete: #f1f0ed;
--pc-soft: #f7f8f8;
--pc-line: #dddeda;
--pc-orange: #fe820c;
}
.service-precast .precast-main {
background: #fff;
}
.service-precast .precast-heading .badge-bg,
.service-precast .precast-section-heading .badge-bg {
display: inline-block;
margin-bottom: 16px;
}
.service-precast .precast-section-heading {
max-width: 880px;
margin: 0 auto 38px;
}
.service-precast .precast-section-heading .svc-process-sub {
max-width: 760px;
margin: 0 auto;
}
.service-precast .precast-intro {
background:
linear-gradient(135deg, rgba(254, 130, 12, 0.055), transparent 34%),
#fff;
}
.service-precast .precast-intro-grid {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(390px, 0.98fr);
gap: 70px;
align-items: center;
}
.service-precast .precast-intro-content .precast-heading {
margin-bottom: 20px;
}
.service-precast .precast-lead {
color: #222;
font-weight: 500;
}
.service-precast .precast-intro-points {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 25px;
}
.service-precast .precast-intro-points span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 13px;
border: 1px solid #dce5ea;
border-radius: 100px;
background: #f3f7f9;
color: #222;
font-size: 16px;
font-weight: 500;
}
.service-precast .precast-intro-points i {
color: var(--pc-orange);
}
.service-precast .precast-intro-visual {
position: relative;
min-height: 470px;
}
.service-precast .precast-intro-visual::before {
content: '';
position: absolute;
top: -18px;
left: -18px;
width: 52%;
height: 52%;
border-top: 4px solid var(--pc-orange);
border-left: 4px solid var(--pc-orange);
border-radius: 18px 0 0;
}
.service-precast .precast-intro-visual>img {
width: 100%;
height: 470px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 24px 55px rgba(28, 52, 65, 0.2);
}
.service-precast .precast-visual-note {
position: absolute;
right: 22px;
bottom: 22px;
left: 22px;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border-radius: 13px;
background: rgba(0, 34, 85, 0.92);
color: #fff;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(8px);
}
.service-precast .precast-visual-note>i {
color: var(--pc-orange);
font-size: 29px;
}
.service-precast .precast-visual-note strong,
.service-precast .precast-visual-note span {
display: block;
font-size: 18px;
font-weight: 600;
}
.service-precast .precast-visual-note strong {
margin-bottom: 2px;
}
.service-precast .precast-visual-note span {
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
font-weight: 500;
}
.service-precast .precast-value {
background:
linear-gradient(rgba(23, 56, 76, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(23, 56, 76, 0.035) 1px, transparent 1px),
var(--pc-concrete);
background-size: 38px 38px;
}
.service-precast .precast-value-grid,
.service-precast .precast-why-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.service-precast .precast-value-grid article {
position: relative;
padding: 28px 23px 25px;
overflow: hidden;
border: 1px solid #dedfdc;
border-radius: 13px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 10px 28px rgba(23, 56, 76, 0.06);
}
.service-precast .precast-value-grid article>span {
position: absolute;
top: 18px;
right: 18px;
color: #e7e8e5;
font-size: 38px;
font-weight: 900;
}
.service-precast .precast-value-grid article>i,
.service-precast .precast-why-grid article>i {
margin-bottom: 19px;
color: var(--pc-orange);
font-size: 28px;
}
.service-precast .precast-value-grid h3,
.service-precast .precast-service-grid h3,
.service-precast .precast-process-grid h3,
.service-precast .precast-why-grid h3 {
margin-bottom: 10px;
color: #1a1a2e;
font-size: 20px;
line-height: 1.35;
font-weight: 600;
}
.service-precast .precast-value-grid p,
.service-precast .precast-service-grid p,
.service-precast .precast-process-grid p,
.service-precast .precast-why-grid p {
margin-bottom: 0;
}
.service-precast .precast-services {
background: #fff;
}
.service-precast .precast-service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.service-precast .precast-service-grid article {
position: relative;
padding: 30px 26px 27px;
border: 1px solid var(--pc-line);
border-bottom: 4px solid transparent;
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 30px rgba(23, 56, 76, 0.055);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-precast .precast-service-grid article:hover {
transform: translateY(-6px);
border-bottom-color: var(--pc-orange);
box-shadow: 0 18px 42px rgba(23, 56, 76, 0.12);
}
.service-precast .precast-card-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
border-radius: 12px;
background: linear-gradient(135deg, var(--pc-navy), var(--pc-navy-2));
color: #fff;
font-size: 23px;
box-shadow: 0 9px 20px rgba(23, 56, 76, 0.18);
}
.service-precast .precast-service-grid article:hover .precast-card-icon,
.service-precast .precast-process-grid article:hover .precast-card-icon {
background: linear-gradient(135deg, var(--pc-orange), #ff9d3b);
}
.service-precast .precast-elements {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #012254, #0F468C);
}
.service-precast .precast-elements::after {
content: '';
position: absolute;
right: -140px;
bottom: -170px;
width: 420px;
height: 420px;
border: 65px solid rgba(255, 255, 255, 0.035);
border-radius: 50%;
}
.service-precast .precast-elements-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(350px, 0.85fr) minmax(0, 1.15fr);
gap: 65px;
align-items: center;
}
.service-precast .precast-elements-image img {
width: 100%;
height: 500px;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}
.service-precast .precast-elements-content .section-title,
.service-precast .precast-elements-content>p {
color: #fff;
}
.service-precast .precast-elements-content>p {
color: #fff;
}
.service-precast .precast-element-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
margin-top: 24px;
}
.service-precast .precast-element-list span {
display: flex;
align-items: center;
gap: 11px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.82);
font-size: 16px;
font-weight: 500;
line-height: 1.45;
}
.service-precast .precast-element-list i {
width: 22px;
color: var(--pc-orange);
font-size: 18px;
text-align: center;
}
.service-precast .precast-process {
background: var(--pc-soft);
}
.service-precast .precast-process-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.service-precast .precast-process-grid article {
position: relative;
display: flex;
flex-direction: column;
padding: 27px 22px 22px;
overflow: hidden;
border: 1px solid var(--pc-line);
border-radius: 13px;
background: #fff;
box-shadow: 0 10px 28px rgba(23, 56, 76, 0.065);
transition: transform 0.3s ease;
}
.service-precast .precast-process-grid article:hover {
transform: translateY(-5px);
}
.service-precast .precast-step {
position: absolute;
top: 18px;
right: 18px;
color: #eaebe8;
font-size: 38px;
font-weight: 900;
}
.service-precast .precast-process-grid ul {
margin: 18px 0 0;
padding: 14px 0 0;
border-top: 1px solid #e8ecec;
list-style: none;
}
.service-precast .precast-process-grid li {
position: relative;
padding: 7px 0 7px 22px;
color: #222;
font-size: 16px;
}
.service-precast .precast-process-grid li::before {
content: '\f058';
position: absolute;
top: 8px;
left: 0;
color: var(--pc-orange);
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
.service-precast .precast-coordination {
background:
linear-gradient(rgba(23, 56, 76, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(23, 56, 76, 0.035) 1px, transparent 1px),
var(--pc-concrete);
background-size: 36px 36px;
}
.service-precast .precast-coordination-grid {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
gap: 60px;
align-items: center;
}
.service-precast .precast-coordination-content .precast-heading {
margin-bottom: 18px;
}
.service-precast .precast-risk-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 25px;
}
.service-precast .precast-risk-grid>div {
display: flex;
gap: 12px;
padding: 17px;
border: 1px solid var(--pc-line);
border-radius: 11px;
background: rgba(255, 255, 255, 0.9);
}
.service-precast .precast-risk-grid i {
width: 25px;
color: var(--pc-orange);
font-size: 20px;
text-align: center;
}
.service-precast .precast-risk-grid span,
.service-precast .precast-risk-grid strong {
display: block;
}
.service-precast .precast-risk-grid span {
color: #1a1a2e;
font-size: 16px;
line-height: 1.5;
}
.service-precast .precast-risk-grid strong {
margin-bottom: 3px;
color: var(--pc-navy);
font-size: 16px;
font-weight: 600;
}
.service-precast .precast-quality-panel {
padding: 34px 31px;
border-top: 5px solid var(--pc-orange);
border-radius: 14px;
background: var(--pc-navy);
box-shadow: 0 20px 45px rgba(23, 56, 76, 0.22);
}
.service-precast .precast-panel-label {
display: block;
margin-bottom: 8px;
color: var(--pc-orange);
font-size: 18px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
}
.service-precast .precast-quality-panel h3 {
margin-bottom: 17px;
color: #fff;
font-size: 24px;
}
.service-precast .precast-quality-panel ul {
margin: 0;
padding: 0;
list-style: none;
}
.service-precast .precast-quality-panel li {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
}
.service-precast .precast-quality-panel li:last-child {
border-bottom: 0;
}
.service-precast .precast-quality-panel i {
margin-top: 3px;
color: var(--pc-orange);
}
.service-precast .precast-why {
background: #fff;
}
.service-precast .precast-why-grid article {
padding: 27px 23px;
border: 1px solid var(--pc-line);
border-radius: 13px;
background: #fff;
transition: transform 0.3s ease, background 0.3s ease;
}
.service-precast .precast-why-grid article:hover {
transform: translateY(-5px);
background: var(--pc-soft);
}
.service-precast .precast-faq {
background: var(--pc-soft);
}
.service-precast .precast-faq .svc-faq-title {
max-width: 1100px;
margin: 0 auto 42px;
}
.service-precast .precast-faq .svc-faq-title .badge-bg {
display: inline-block;
margin-bottom: 18px;
}
.service-precast .precast-faq .svc-faq-title .section-title {
margin-bottom: 10px;
}
.service-precast .precast-faq .svc-faq-inner {
display: block;
max-width: 1100px;
margin: 0 auto;
}
.service-precast .precast-faq .faq-item {
border: 1px solid rgba(254, 130, 12, 0.3);
border-radius: 10px;
background: #fff;
}
.service-precast .precast-faq .faq-question {
min-height: 62px;
padding: 15px 16px;
font-size: 19px;
}
@media (max-width: 1100px) {
.service-precast .precast-intro-grid,
.service-precast .precast-elements-grid,
.service-precast .precast-coordination-grid {
grid-template-columns: 1fr;
}
.service-precast .precast-intro-visual {
max-width: 760px;
}
.service-precast .precast-value-grid,
.service-precast .precast-process-grid,
.service-precast .precast-why-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 800px) {
.service-precast .precast-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-precast .precast-element-list,
.service-precast .precast-risk-grid {
grid-template-columns: 1fr;
}
.service-precast .precast-intro-visual,
.service-precast .precast-intro-visual>img,
.service-precast .precast-elements-image img {
min-height: 0;
height: 390px;
}
}
@media (max-width: 576px) {
.service-precast .precast-intro-grid,
.service-precast .precast-elements-grid,
.service-precast .precast-coordination-grid {
gap: 36px;
}
.service-precast .precast-value-grid,
.service-precast .precast-service-grid,
.service-precast .precast-process-grid,
.service-precast .precast-why-grid {
grid-template-columns: 1fr;
}
.service-precast .precast-intro-visual,
.service-precast .precast-intro-visual>img,
.service-precast .precast-elements-image img {
height: 320px;
}
.service-precast .precast-visual-note {
right: 14px;
bottom: 14px;
left: 14px;
padding: 14px;
}
.service-precast .precast-quality-panel {
padding: 26px 21px;
}
}
/* ============================================
BIM AND MEP PREMIUM PAGE
============================================ */
.service-bim {
--bim-navy: #012254;
--bim-navy-2: #0F468C;
--bim-blue: #0F468C;
--bim-cyan: #ff7f1f;
--bim-orange: #fe820c;
--bim-ink: #182631;
--bim-muted: #60717b;
--bim-soft: #f2f8fa;
--bim-line: #d8e5ea;
}
.service-bim .bim-main {
background: #fff;
}
.service-bim .bim-heading .badge-bg,
.service-bim .bim-section-heading .badge-bg {
display: inline-block;
margin-bottom: 16px;
}
.service-bim .bim-section-heading {
max-width: 900px;
margin: 0 auto 38px;
}
.service-bim .bim-section-heading .svc-process-sub {
max-width: 760px;
margin: 0 auto;
}
.service-bim .bim-intro {
background:
radial-gradient(circle at 6% 10%, rgba(65, 193, 212, 0.12), transparent 25%),
linear-gradient(135deg, #f5fbfc, #fff 64%);
}
.service-bim .bim-intro-grid {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
gap: 70px;
align-items: center;
}
.service-bim .bim-intro-content .bim-heading {
margin-bottom: 20px;
}
.service-bim .bim-lead {
color: #222;
font-weight: 500;
}
.service-bim .bim-intro-points {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 25px;
}
.service-bim .bim-intro-points span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 13px;
border: 1px solid #dce5ea;
border-radius: 100px;
background: #f3f7f9;
color: #222;
font-size: 16px;
font-weight: 500;
}
.service-bim .bim-intro-points i {
color: var(--bim-orange);
}
.service-bim .bim-intro-visual {
position: relative;
min-height: 470px;
}
.service-bim .bim-intro-visual::before {
content: '';
position: absolute;
top: -18px;
right: -18px;
width: 54%;
height: 54%;
border-top: 4px solid var(--bim-cyan);
border-right: 4px solid var(--bim-cyan);
border-radius: 0 18px 0 0;
}
.service-bim .bim-intro-visual > img {
width: 100%;
height: 470px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 24px 55px rgba(16, 47, 66, .2);
border: 1px solid #fcb169;
}
.service-bim .bim-model-card {
position: absolute;
right: 22px;
bottom: 22px;
left: 22px;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 13px;
background: rgba(0, 34, 85, 0.92);
color: #fff;
box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
backdrop-filter: blur(8px);
}
.service-bim .bim-model-card strong,
.service-bim .bim-model-card span {
display: block;
font-size: 18px;
font-weight: 600;
}
.service-bim .bim-model-card span {
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
font-weight: 500;
}
.service-bim .bim-pulse {
position: relative;
width: 15px;
height: 15px;
flex: 0 0 15px;
border-radius: 50%;
background: #46df91;
box-shadow: 0 0 0 7px rgba(70, 223, 145, .14);
}
.service-bim .bim-outcomes {
background:
linear-gradient(rgba(43, 145, 183, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(43, 145, 183, .045) 1px, transparent 1px),
var(--bim-soft);
background-size: 34px 34px;
}
.service-bim .bim-outcome-grid,
.service-bim .bim-why-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.service-bim .bim-outcome-grid article {
padding: 27px 23px;
border: 1px solid var(--bim-line);
border-radius: 13px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 10px 28px rgba(16, 47, 66, .055);
}
.service-bim .bim-outcome-grid i,
.service-bim .bim-why-grid i {
margin-bottom: 19px;
color: var(--bim-orange);
font-size: 28px;
}
.service-bim .bim-outcome-grid h3,
.service-bim .bim-service-grid h3,
.service-bim .bim-process-grid h3,
.service-bim .bim-stage-grid h3,
.service-bim .bim-why-grid h3 {
margin-bottom: 10px;
color: #1a1a2e;
font-size: 20px;
line-height: 1.35;
font-weight: 600;
}
.service-bim .bim-outcome-grid p,
.service-bim .bim-service-grid p,
.service-bim .bim-process-grid p,
.service-bim .bim-stage-grid p,
.service-bim .bim-why-grid p {
margin-bottom: 0;
}
.service-bim .bim-services {
background: #fff;
}
.service-bim .bim-service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.service-bim .bim-service-grid article {
padding: 30px 26px 27px;
border: 1px solid var(--bim-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 30px rgba(16, 47, 66, .055);
transition: transform .3s ease, box-shadow .3s ease;
}
.service-bim .bim-service-grid article:hover {
transform: translateY(-6px);
box-shadow: 0 18px 42px rgba(16, 47, 66, .12);
}
.service-bim .bim-card-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
border-radius: 13px;
background: linear-gradient(135deg, var(--bim-navy), var(--bim-blue));
color: #fff;
font-size: 23px;
box-shadow: 0 9px 20px rgba(16, 47, 66, .18);
}
.service-bim .bim-service-grid article:hover .bim-card-icon,
.service-bim .bim-process-grid article:hover .bim-card-icon {
background: linear-gradient(135deg, var(--bim-orange), #ff9d3b);
}
.service-bim .bim-coordination {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #012254, #0F468C);
}
.service-bim .bim-coordination::after {
content: '';
position: absolute;
right: -140px;
bottom: -180px;
width: 430px;
height: 430px;
border: 65px solid rgba(65, 193, 212, .055);
border-radius: 50%;
}
.service-bim .bim-coordination-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(360px, .88fr) minmax(0, 1.12fr);
gap: 65px;
align-items: center;
}
.service-bim .bim-coordination-image {
position: relative;
}
.service-bim .bim-coordination-image img {
width: 100%;
height: 500px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 16px;
box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
}
.service-bim .bim-image-label {
position: absolute;
right: 18px;
bottom: 18px;
left: 18px;
padding: 15px 18px;
border-radius: 10px;
background: rgba(0, 34, 85, 0.92);
color: #fff;
font-weight: 700;
}
.service-bim .bim-image-label i {
margin-right: 8px;
color: var(--bim-cyan);
}
.service-bim .bim-coordination-content .section-title,
.service-bim .bim-coordination-content>p {
color: #fff;
}
.service-bim .bim-coordination-content>p {
color: #fff;
}
.service-bim .bim-coordinate-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
margin-top: 25px;
}
.service-bim .bim-coordinate-list span {
display: flex;
align-items: center;
gap: 11px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.82);
font-size: 16px;
font-weight: 500;
line-height: 1.45;
}
.service-bim .bim-coordinate-list i {
margin-top: 2px;
color: var(--bim-cyan);
font-size: 18px;
}
.service-bim .bim-process {
background: #fff;
}
.service-bim .bim-process-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.service-bim .bim-process-grid article {
position: relative;
padding: 26px 20px 23px;
overflow: hidden;
border: 1px solid var(--bim-line);
border-bottom: 4px solid var(--bim-cyan);
border-radius: 13px;
background: #fff;
box-shadow: 0 10px 28px rgba(16, 47, 66, .06);
transition: transform .3s ease;
}
.service-bim .bim-process-grid article:hover {
transform: translateY(-5px);
border-bottom-color: var(--bim-orange);
}
.service-bim .bim-process-grid article>span {
position: absolute;
top: 16px;
right: 16px;
color: #e4eef2;
font-size: 36px;
font-weight: 900;
}
.service-bim .bim-deliverables {
background:
linear-gradient(rgba(43, 145, 183, .04) 1px, transparent 1px),
linear-gradient(90deg, rgba(43, 145, 183, .04) 1px, transparent 1px),
var(--bim-soft);
background-size: 36px 36px;
}
.service-bim .bim-deliverables-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
gap: 60px;
align-items: center;
}
.service-bim .bim-deliverables-content .bim-heading {
margin-bottom: 18px;
}
.service-bim .bim-output-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 25px;
}
.service-bim .bim-output-grid>div {
display: flex;
gap: 12px;
padding: 17px;
border: 1px solid var(--bim-line);
border-radius: 11px;
background: rgba(255, 255, 255, .95);
}
.service-bim .bim-output-grid i {
width: 25px;
color: var(--bim-blue);
font-size: 20px;
text-align: center;
}
.service-bim .bim-output-grid span,
.service-bim .bim-output-grid strong {
display: block;
}
.service-bim .bim-output-grid span {
color: #1a1a2e;
font-size: 16px;
line-height: 1.5;
}
.service-bim .bim-output-grid strong {
margin-bottom: 3px;
color: var(--bim-navy);
font-size: 16px;
font-weight: 600;
}
.service-bim .bim-qa-panel {
padding: 34px 31px;
border-top: 5px solid var(--bim-cyan);
border-radius: 14px;
background: var(--bim-navy);
box-shadow: 0 20px 45px rgba(16, 47, 66, .22);
}
.service-bim .bim-panel-label {
display: block;
margin-bottom: 8px;
color: var(--bim-cyan);
font-size: 18px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
}
.service-bim .bim-qa-panel h3 {
margin-bottom: 17px;
color: #fff;
font-size: 24px;
}
.service-bim .bim-qa-panel ul {
margin: 0;
padding: 0;
list-style: none;
}
.service-bim .bim-qa-panel li {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, .1);
color: rgba(255, 255, 255, .8);
}
.service-bim .bim-qa-panel li:last-child {
border-bottom: 0;
}
.service-bim .bim-qa-panel i {
margin-top: 3px;
color: var(--bim-cyan);
}
.service-bim .bim-information {
background: #fff;
}
.service-bim .bim-stage-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.service-bim .bim-stage-grid article {
position: relative;
padding: 30px 27px;
border: 1px solid var(--bim-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 28px rgba(16, 47, 66, .06);
}
.service-bim .bim-stage-grid article>span {
display: inline-block;
margin-bottom: 15px;
padding: 6px 10px;
border-radius: 100px;
background: rgba(43, 145, 183, .11);
color: var(--bim-blue);
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}
.service-bim .bim-why {
background: var(--bim-soft);
}
.service-bim .bim-why-grid article {
padding: 27px 23px;
border: 1px solid var(--bim-line);
border-radius: 13px;
background: #fff;
transition: transform .3s ease;
}
.service-bim .bim-why-grid article:hover {
transform: translateY(-5px);
}
.service-bim .bim-faq {
background: #fff;
}
.service-bim .bim-faq .svc-faq-title {
max-width: 1100px;
margin: 0 auto 42px;
}
.service-bim .bim-faq .svc-faq-title .badge-bg {
display: inline-block;
margin-bottom: 18px;
}
.service-bim .bim-faq .svc-faq-title .section-title {
margin-bottom: 10px;
}
.service-bim .bim-faq .svc-faq-inner {
display: block;
max-width: 1100px;
margin: 0 auto;
}
.service-bim .bim-faq .faq-item {
border: 1px solid rgba(43, 145, 183, .3);
border-radius: 10px;
background: #fff;
}
.service-bim .bim-faq .faq-item.active {
border-color: rgba(254, 130, 12, .5);
}
.service-bim .bim-faq .faq-question {
min-height: 62px;
padding: 15px 16px;
font-size: 19px;
}
@media (max-width: 1150px) {
.service-bim .bim-intro-grid,
.service-bim .bim-coordination-grid,
.service-bim .bim-deliverables-grid {
grid-template-columns: 1fr;
}
.service-bim .bim-intro-visual {
max-width: 760px;
}
.service-bim .bim-outcome-grid,
.service-bim .bim-why-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-bim .bim-process-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 800px) {
.service-bim .bim-service-grid,
.service-bim .bim-stage-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-bim .bim-coordinate-list,
.service-bim .bim-output-grid {
grid-template-columns: 1fr;
}
.service-bim .bim-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-bim .bim-intro-visual,
.service-bim .bim-intro-visual>img,
.service-bim .bim-coordination-image img {
min-height: 0;
height: 390px;
}
}
@media (max-width: 576px) {
.service-bim .bim-intro-grid,
.service-bim .bim-coordination-grid,
.service-bim .bim-deliverables-grid {
gap: 36px;
}
.service-bim .bim-outcome-grid,
.service-bim .bim-service-grid,
.service-bim .bim-process-grid,
.service-bim .bim-stage-grid,
.service-bim .bim-why-grid {
grid-template-columns: 1fr;
}
.service-bim .bim-intro-visual,
.service-bim .bim-intro-visual>img,
.service-bim .bim-coordination-image img {
height: 320px;
}
.service-bim .bim-model-card {
right: 14px;
bottom: 14px;
left: 14px;
padding: 14px;
}
.service-bim .bim-qa-panel {
padding: 26px 21px;
}
}
/* ============================================
SCAN TO BIM PREMIUM PAGE
============================================ */
.service-scan {
--scan-navy: #012254;
--scan-navy-2: #0F468C;
--scan-blue: #0F468C;
--scan-teal: #ff8a34;
--scan-orange: #fe7c00;
--scan-ink: #172632;
--scan-muted: #60717b;
--scan-soft: #f3f8fa;
--scan-line: #d9e7ec;
}
.service-scan .scan-main {
background: #fff;
}
.service-scan .scan-section-heading {
max-width: 1020px;
margin: 0 auto 42px;
}
.service-scan .scan-section-heading .section-title {
margin-bottom: 10px;
}
.service-scan .scan-section-heading .svc-process-sub {
max-width: 850px;
margin: 0 auto;
}
.service-scan .scan-hero-panel {
background:
radial-gradient(circle at 9% 12%, rgba(59, 192, 199, 0.14), transparent 28%),
linear-gradient(135deg, #f4fbfc 0%, #fff 64%);
}
.service-scan .scan-hero-grid,
.service-scan .scan-accuracy-grid,
.service-scan .scan-why-grid {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(390px, 0.98fr);
gap: 70px;
align-items: center;
}
.service-scan .scan-lead {
color: #222;
font-weight: 500;
}
.service-scan .scan-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 20px;
}
.service-scan .scan-hero-visual,
.service-scan .scan-accuracy-image {
position: relative;
}
.service-scan .scan-hero-visual::before {
content: '';
position: absolute;
top: -18px;
right: -18px;
width: 54%;
height: 54%;
border-top: 4px solid var(--scan-teal);
border-right: 4px solid var(--scan-teal);
border-radius: 0 18px 0 0;
}
.service-scan .scan-hero-visual > img,
.service-scan .scan-accuracy-image img {
width: 100%;
height: 485px;
object-fit: cover;
border: 1px solid rgba(254, 130, 12, 0.38);
border-radius: 18px;
box-shadow: 0 24px 55px rgba(16, 47, 66, 0.19);
}
.service-scan .scan-data-card,
.service-scan .scan-image-label {
position: absolute;
right: 22px;
bottom: 22px;
left: 22px;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 13px;
background: rgba(0, 34, 85, 0.92);
color: #fff;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(8px);
}
.service-scan .scan-data-card i,
.service-scan .scan-image-label i {
color: var(--scan-teal);
font-size: 25px;
}
.service-scan .scan-data-card strong,
.service-scan .scan-data-card span {
display: block;
}
.service-scan .scan-data-card strong {
color: #fff;
font-size: 18px;
font-weight: 700;
}
.service-scan .scan-data-card span {
color: rgba(255, 255, 255, 0.74);
font-size: 15px;
line-height: 1.45;
}
.service-scan .scan-value,
.service-scan .scan-industries,
.service-scan .scan-faq {
background:
linear-gradient(rgba(44, 145, 184, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(44, 145, 184, 0.045) 1px, transparent 1px),
var(--scan-soft);
background-size: 34px 34px;
}
.service-scan .scan-value-grid,
.service-scan .scan-industry-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.service-scan .scan-value-grid article,
.service-scan .scan-industry-grid article {
padding: 28px 24px;
border: 1px solid var(--scan-line);
border-radius: 13px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 10px 28px rgba(16, 47, 66, 0.055);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-scan .scan-value-grid article:hover,
.service-scan .scan-industry-grid article:hover,
.service-scan .scan-service-grid article:hover,
.service-scan .scan-process-grid article:hover {
transform: translateY(-6px);
box-shadow: 0 18px 42px rgba(16, 47, 66, 0.12);
}
.service-scan .scan-value-grid i,
.service-scan .scan-industry-grid i {
margin-bottom: 19px;
color: var(--scan-orange);
font-size: 29px;
}
.service-scan .scan-value-grid h3,
.service-scan .scan-service-grid h3,
.service-scan .scan-process-grid h3,
.service-scan .scan-industry-grid h3 {
margin-bottom: 10px;
color: #1a1a2e;
font-size: 20px;
line-height: 1.35;
font-weight: 600;
}
.service-scan .scan-value-grid p,
.service-scan .scan-service-grid p,
.service-scan .scan-process-grid p,
.service-scan .scan-industry-grid p {
margin-bottom: 0;
}
.service-scan .scan-services,
.service-scan .scan-process {
background: #fff;
}
.service-scan .scan-service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.service-scan .scan-service-grid article,
.service-scan .scan-process-grid article {
position: relative;
overflow: hidden;
padding: 30px 26px 27px;
border: 1px solid var(--scan-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 30px rgba(16, 47, 66, 0.055);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-scan .scan-card-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
border-radius: 13px;
background: linear-gradient(135deg, var(--scan-navy), var(--scan-blue));
color: #fff;
font-size: 23px;
box-shadow: 0 9px 20px rgba(16, 47, 66, 0.18);
}
.service-scan .scan-service-grid article:hover .scan-card-icon,
.service-scan .scan-process-grid article:hover .scan-card-icon {
background: linear-gradient(135deg, var(--scan-orange), #ff9d3b);
}
.service-scan .scan-process-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.service-scan .scan-process-grid article {
padding: 26px 20px 23px;
border-bottom: 4px solid var(--scan-teal);
}
.service-scan .scan-process-grid article:hover {
border-bottom-color: var(--scan-orange);
}
.service-scan .scan-process-grid article > span {
position: absolute;
top: 16px;
right: 16px;
color: #e4eef2;
font-size: 36px;
font-weight: 900;
}
.service-scan .scan-accuracy {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0b293b, #174f68);
}
.service-scan .scan-accuracy::after {
content: '';
position: absolute;
right: -160px;
bottom: -190px;
width: 440px;
height: 440px;
border: 65px solid rgba(59, 192, 199, 0.055);
border-radius: 50%;
}
.service-scan .scan-accuracy-grid {
position: relative;
z-index: 1;
grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr);
}
.service-scan .scan-accuracy-content .section-title,
.service-scan .scan-accuracy-content p {
color: #fff;
}
.service-scan .scan-accuracy-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
margin-top: 25px;
}
.service-scan .scan-accuracy-list span {
display: flex;
align-items: center;
gap: 11px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.84);
font-size: 16px;
font-weight: 500;
line-height: 1.45;
}
.service-scan .scan-accuracy-list i {
color: var(--scan-teal);
}
.service-scan .scan-why {
background: #fff;
}
.service-scan .scan-why-grid {
grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
}
.service-scan .scan-qa-panel {
padding: 34px 31px;
border-top: 5px solid var(--scan-teal);
border-radius: 14px;
background: var(--scan-navy);
box-shadow: 0 20px 45px rgba(16, 47, 66, 0.22);
}
.service-scan .scan-panel-label {
display: block;
margin-bottom: 8px;
color: var(--scan-teal);
font-size: 18px;
font-weight: 500;
}
.service-scan .scan-qa-panel h3 {
margin-bottom: 17px;
color: #fff;
font-size: 24px;
}
.service-scan .scan-qa-panel ul {
margin: 0;
padding: 0;
list-style: none;
}
.service-scan .scan-qa-panel li {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
}
.service-scan .scan-qa-panel li:last-child {
border-bottom: 0;
}
.service-scan .scan-qa-panel i {
margin-top: 3px;
color: var(--scan-teal);
}
.service-scan .scan-faq .svc-faq-title {
max-width: 1100px;
margin: 0 auto 42px;
}
.service-scan .scan-faq .svc-faq-title .badge-bg {
display: inline-block;
margin-bottom: 18px;
}
.service-scan .scan-faq .svc-faq-title .section-title {
margin-bottom: 10px;
}
.service-scan .scan-faq .svc-faq-inner {
display: block;
max-width: 1100px;
margin: 0 auto;
}
.service-scan .scan-faq .faq-item {
border: 1px solid rgba(44, 145, 184, 0.3);
border-radius: 10px;
background: #fff;
}
.service-scan .scan-faq .faq-item.active {
border-color: rgba(254, 130, 12, 0.5);
}
.service-scan .scan-faq .faq-question {
min-height: 62px;
padding: 15px 16px;
font-size: 19px;
}
@media (max-width: 1150px) {
.service-scan .scan-hero-grid,
.service-scan .scan-accuracy-grid,
.service-scan .scan-why-grid {
grid-template-columns: 1fr;
}
.service-scan .scan-hero-visual,
.service-scan .scan-accuracy-image {
max-width: 760px;
}
.service-scan .scan-value-grid,
.service-scan .scan-industry-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-scan .scan-process-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 800px) {
.service-scan .scan-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-scan .scan-accuracy-list {
grid-template-columns: 1fr;
}
.service-scan .scan-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-scan .scan-hero-visual > img,
.service-scan .scan-accuracy-image img {
height: 390px;
}
}
@media (max-width: 576px) {
.service-scan .scan-hero-grid,
.service-scan .scan-accuracy-grid,
.service-scan .scan-why-grid {
gap: 36px;
}
.service-scan .scan-value-grid,
.service-scan .scan-service-grid,
.service-scan .scan-process-grid,
.service-scan .scan-industry-grid {
grid-template-columns: 1fr;
}
.service-scan .scan-hero-actions .btn {
width: 100%;
justify-content: center;
}
.service-scan .scan-hero-visual > img,
.service-scan .scan-accuracy-image img {
height: 320px;
}
.service-scan .scan-data-card,
.service-scan .scan-image-label {
right: 14px;
bottom: 14px;
left: 14px;
padding: 14px;
}
.service-scan .scan-qa-panel {
padding: 26px 21px;
}
}
/* Scan to BIM - model accuracy section refinement */
.service-scan .scan-accuracy {
padding: 82px 0;
background:
linear-gradient(rgba(59, 192, 199, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 192, 199, 0.055) 1px, transparent 1px),
linear-gradient(135deg, #012254 0%, #0F468C 100%);
background-size: 36px 36px, 36px 36px, auto;
}
.service-scan .scan-accuracy::before {
content: '';
position: absolute;
top: 42px;
left: 50%;
width: min(76vw, 980px);
height: min(76vw, 980px);
border: 1px solid rgba(59, 192, 199, 0.14);
border-radius: 50%;
transform: translateX(-50%);
pointer-events: none;
}
.service-scan .scan-accuracy-grid {
display: block;
/* max-width: 1180px; */
margin: 0 auto;
text-align: center;
}
.service-scan .scan-accuracy-content {
position: relative;
z-index: 1;
/* max-width: 1040px; */
margin: 0 auto;
}
.service-scan .scan-accuracy-content .badge-bg {
margin-bottom: 22px;
}
.service-scan .scan-accuracy-content .section-title {
max-width: none;
margin: 0 auto 24px;
color: #fff;
}
.service-scan .scan-accuracy-content p {
max-width: none;
margin-right: auto;
margin-left: auto;
color: rgba(255, 255, 255, 0.9);
}
.service-scan .scan-accuracy-list {
max-width: none;
margin: 34px auto 0;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
text-align: left;
}
.service-scan .scan-accuracy-list span {
min-height: 76px;
padding: 18px 18px;
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}
.service-scan .scan-accuracy-list i {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 26px;
border-radius: 50%;
background: rgba(59, 192, 199, 0.16);
color: var(--scan-teal);
font-size: 14px;
}
@media (max-width: 900px) {
.service-scan .scan-accuracy-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
.service-scan .scan-accuracy {
padding: 64px 0;
}
.service-scan .scan-accuracy-grid {
text-align: left;
}
.service-scan .scan-accuracy-content .section-title,
.service-scan .scan-accuracy-content p {
margin-right: 0;
margin-left: 0;
}
.service-scan .scan-accuracy-list {
grid-template-columns: 1fr;
}
}
/* ============================================
CONSTRUCTION DOCUMENTATIONS PAGE
============================================ */
.service-docs {
--docs-navy: #012254;
--docs-blue: #0F468C;
--docs-teal: #ff9d3b;
--docs-orange: #FE7C00;
--docs-soft: #f4f8fa;
--docs-line: #dbe7ec;
}
.service-docs .docs-main {
background: #fff;
}
.service-docs .docs-section-heading {
max-width: 1040px;
margin: 0 auto 42px;
}
.service-docs .docs-section-heading .section-title {
margin-bottom: 10px;
}
.service-docs .docs-intro {
background:
radial-gradient(circle at 10% 15%, rgba(56, 184, 189, 0.14), transparent 28%),
linear-gradient(135deg, #f6fbfc 0%, #fff 66%);
}
.service-docs .docs-intro-grid,
.service-docs .docs-quality-grid {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(390px, 0.96fr);
gap: 70px;
align-items: center;
}
.service-docs .docs-lead {
color: #222;
font-weight: 500;
}
.service-docs .docs-intro-points {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 25px;
}
.service-docs .docs-intro-points span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 13px;
border: 1px solid var(--docs-line);
border-radius: 100px;
background: #f5f8fa;
color: #222;
font-size: 16px;
font-weight: 500;
}
.service-docs .docs-intro-points i {
color: var(--docs-orange);
}
.service-docs .docs-intro-visual {
position: relative;
}
.service-docs .docs-intro-visual::before {
content: '';
position: absolute;
top: -18px;
right: -18px;
width: 54%;
height: 54%;
border-top: 4px solid var(--docs-teal);
border-right: 4px solid var(--docs-teal);
border-radius: 0 18px 0 0;
}
.service-docs .docs-intro-visual > img {
width: 100%;
height: 475px;
object-fit: cover;
border: 1px solid rgba(254, 130, 12, 0.38);
border-radius: 18px;
box-shadow: 0 24px 55px rgba(16, 47, 66, 0.19);
}
.service-docs .docs-visual-card {
position: absolute;
right: 22px;
bottom: 22px;
left: 22px;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border-radius: 13px;
background: rgba(16, 47, 66, 0.94);
color: #fff;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.service-docs .docs-visual-card i {
color: var(--docs-teal);
font-size: 25px;
}
.service-docs .docs-visual-card strong,
.service-docs .docs-visual-card span {
display: block;
}
.service-docs .docs-visual-card span {
color: rgba(255, 255, 255, 0.74);
font-size: 15px;
line-height: 1.45;
}
.service-docs .docs-services,
.service-docs .docs-deliverables,
.service-docs .docs-faq {
background:
linear-gradient(rgba(44, 119, 149, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(44, 119, 149, 0.045) 1px, transparent 1px),
var(--docs-soft);
background-size: 34px 34px;
}
.service-docs .docs-service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.service-docs .docs-service-grid article,
.service-docs .docs-process-grid article,
.service-docs .docs-deliverable-grid article {
position: relative;
overflow: hidden;
padding: 30px 26px 27px;
border: 1px solid var(--docs-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 30px rgba(16, 47, 66, 0.055);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-docs .docs-service-grid article:hover,
.service-docs .docs-process-grid article:hover,
.service-docs .docs-deliverable-grid article:hover {
transform: translateY(-6px);
box-shadow: 0 18px 42px rgba(16, 47, 66, 0.12);
}
.service-docs .docs-card-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
border-radius: 13px;
background: linear-gradient(135deg, var(--docs-navy), var(--docs-blue));
color: #fff;
font-size: 23px;
box-shadow: 0 9px 20px rgba(16, 47, 66, 0.18);
}
.service-docs .docs-service-grid article:hover .docs-card-icon,
.service-docs .docs-process-grid article:hover .docs-card-icon {
background: linear-gradient(135deg, var(--docs-orange), #ff9d3b);
}
.service-docs .docs-service-grid h3,
.service-docs .docs-process-grid h3,
.service-docs .docs-deliverable-grid h3 {
margin-bottom: 10px;
color: #1a1a2e;
font-size: 20px;
line-height: 1.35;
font-weight: 600;
}
.service-docs .docs-service-grid p,
.service-docs .docs-process-grid p,
.service-docs .docs-deliverable-grid p {
margin-bottom: 0;
}
.service-docs .docs-process {
background: #fff;
}
.service-docs .docs-process-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.service-docs .docs-process-grid article {
padding: 26px 20px 23px;
border-bottom: 4px solid var(--docs-teal);
}
.service-docs .docs-process-grid article > span {
position: absolute;
top: 16px;
right: 16px;
color: #e4eef2;
font-size: 36px;
font-weight: 900;
}
.service-docs .docs-quality {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #012254, #0F468C);
}
.service-docs .docs-quality-content .section-title,
.service-docs .docs-quality-content p {
color: #fff;
}
.service-docs .docs-qa-panel {
padding: 34px 31px;
border-top: 5px solid var(--docs-teal);
border-radius: 14px;
background: rgb(2, 37, 88, 0.9);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
}
.service-docs .docs-qa-panel h3 {
margin-bottom: 17px;
color: #fff;
font-size: 24px;
}
.service-docs .docs-qa-panel li {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.82);
}
.service-docs .docs-qa-panel li:last-child {
border-bottom: 0;
}
.service-docs .docs-qa-panel i {
margin-top: 3px;
color: var(--docs-teal);
}
.service-docs .docs-deliverable-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.service-docs .docs-deliverable-grid i {
margin-bottom: 19px;
color: var(--docs-orange);
font-size: 29px;
}
.service-docs .docs-faq .svc-faq-title,
.service-docs .docs-faq .svc-faq-inner {
max-width: 1100px;
margin-right: auto;
margin-left: auto;
}
.service-docs .docs-faq .svc-faq-title {
margin-bottom: 42px;
}
.service-docs .docs-faq .svc-faq-inner {
display: block;
}
.service-docs .docs-faq .faq-item {
border: 1px solid rgba(15, 70, 140, 0.3);
border-radius: 10px;
background: #fff;
}
@media (max-width: 1150px) {
.service-docs .docs-intro-grid,
.service-docs .docs-quality-grid {
grid-template-columns: 1fr;
}
.service-docs .docs-intro-visual {
max-width: 760px;
}
.service-docs .docs-process-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-docs .docs-deliverable-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 800px) {
.service-docs .docs-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-docs .docs-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-docs .docs-intro-visual > img {
height: 390px;
}
}
@media (max-width: 576px) {
.service-docs .docs-intro-grid,
.service-docs .docs-quality-grid {
gap: 36px;
}
.service-docs .docs-service-grid,
.service-docs .docs-process-grid,
.service-docs .docs-deliverable-grid {
grid-template-columns: 1fr;
}
.service-docs .docs-intro-visual > img {
height: 320px;
}
.service-docs .docs-visual-card {
right: 14px;
bottom: 14px;
left: 14px;
padding: 14px;
}
.service-docs .docs-qa-panel {
padding: 26px 21px;
}
}
/* Construction Documentations - intro section without image */
.service-docs .docs-intro {
padding: 86px 0;
position: relative;
overflow: hidden;
background:
linear-gradient(rgba(44, 119, 149, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(44, 119, 149, 0.04) 1px, transparent 1px),
linear-gradient(135deg, #eefbfc 0%, #ffffff 58%, #f7fbfc 100%);
background-size: 36px 36px, 36px 36px, auto;
}
.service-docs .docs-intro::before {
content: '';
position: absolute;
right: -160px;
top: -210px;
width: 520px;
height: 520px;
border: 72px solid rgba(56, 184, 189, 0.08);
border-radius: 50%;
pointer-events: none;
}
.service-docs .docs-intro::after {
content: '';
position: absolute;
left: -180px;
bottom: -230px;
width: 520px;
height: 520px;
border: 1px solid rgba(254, 130, 12, 0.18);
border-radius: 50%;
pointer-events: none;
}
.service-docs .docs-intro-grid {
position: relative;
z-index: 1;
display: block;
max-width: 1180px;
margin: 0 auto;
}
.service-docs .docs-intro-content {
max-width: 1080px;
}
.service-docs .docs-intro-content .section-title {
max-width: 980px;
margin-bottom: 22px;
}
.service-docs .docs-intro-content p {
max-width: 900px;
}
.service-docs .docs-intro-points {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
/* max-width: 1040px; */
margin-top: 34px;
}
.service-docs .docs-intro-points span {
min-height: 86px;
padding: 20px 22px;
border-radius: 12px;
border: 1px solid rgba(44, 119, 149, 0.18);
background: rgba(255, 255, 255, 0.84);
box-shadow: 0 14px 34px rgba(16, 47, 66, 0.08);
font-size: 17px;
justify-content: flex-start;
}
.service-docs .docs-intro-points i {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 30px;
border-radius: 50%;
background: rgba(254, 130, 12, 0.12);
color: var(--docs-orange);
}
@media (max-width: 900px) {
.service-docs .docs-intro-points {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
.service-docs .docs-intro {
padding: 64px 0;
}
.service-docs .docs-intro-points {
grid-template-columns: 1fr;
}
}
/* ============================================
CONTACT US PAGE
============================================ */
.contact-page {
--contact-navy: #102f42;
--contact-blue: #2c7795;
--contact-teal: #38b8bd;
--contact-orange: #fe820c;
--contact-soft: #f4f8fa;
--contact-line: #dbe7ec;
}
.contact-page .contact-hero {
position: relative;
min-height: 440px;
display: flex;
align-items: center;
overflow: hidden;
padding: 0;
background: var(--contact-navy);
}
.contact-page .contact-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.contact-page .contact-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
transform: scale(1.04);
transition: transform 8s ease;
}
.contact-page .contact-hero:hover .contact-hero-bg img {
transform: scale(1);
}
.contact-page .contact-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(105deg,
rgba(0, 34, 65, 0.93) 0%,
rgba(0, 34, 65, 0.82) 45%,
rgba(254, 124, 0, 0.35) 100%);
}
.contact-page .contact-hero .container {
position: relative;
z-index: 2;
width: 100%;
}
.contact-page .contact-hero-content {
max-width: 980px;
padding: 42px 0 38px;
text-align: center;
margin: 0 auto;
}
.contact-page .contact-hero h1 {
margin: 0 0 14px;
color: var(--white);
font-size: clamp(34px, 3.4vw, 50px);
line-height: 1.18;
font-weight: 700;
letter-spacing: 0;
text-transform: capitalize;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.contact-page .contact-hero h1 span {
color: var(--contact-orange);
}
.contact-page .contact-hero-content p {
max-width: 850px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.92);
font-size: 18px !important;
font-weight: 500;
line-height: 1.75;
}
.contact-page .contact-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-top: 20px;
}
.contact-page .contact-hero .breadcrumb {
margin-top: 20px;
}
.contact-page .contact-info-section {
background: #fff;
}
.contact-page .contact-card-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.contact-page .contact-card-grid article {
padding: 30px 24px;
border: 1px solid var(--contact-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 30px rgba(16, 47, 66, 0.055);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-page .contact-card-grid article:hover {
transform: translateY(-6px);
box-shadow: 0 18px 42px rgba(16, 47, 66, 0.12);
}
.contact-page .contact-card-grid p {
margin-bottom: 0;
}
.contact-page .contact-card-grid a {
color: #222;
overflow-wrap: anywhere;
}
.contact-page .contact-workspace {
background:
linear-gradient(rgba(44, 119, 149, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(44, 119, 149, 0.045) 1px, transparent 1px),
var(--contact-soft);
background-size: 34px 34px;
}
.contact-page .contact-workspace-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
gap: 55px;
align-items: start;
}
.contact-page .contact-form-wrap,
.contact-page .contact-map-panel {
border: 1px solid var(--contact-line);
border-radius: 16px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 18px 46px rgba(16, 47, 66, 0.08);
}
.contact-page .contact-form-wrap {
padding: 40px 36px;
}
.contact-page .contact-form-wrap .section-title {
margin-bottom: 28px;
}
.contact-page .contact-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.contact-page .form-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-page .form-wide {
grid-column: 1 / -1;
}
.contact-page .contact-form label {
color: #1a1a2e;
font-size: 16px;
font-weight: 600;
}
.contact-page .contact-form label span {
color: var(--contact-orange);
}
.contact-page .contact-form input,
.contact-page .contact-form select,
.contact-page .contact-form textarea {
width: 100%;
min-height: 52px;
padding: 13px 14px;
border: 1px solid #cfdae0;
border-radius: 8px;
background: #fff;
color: #222;
font-family: inherit;
font-size: 16px;
outline: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.contact-page .contact-form textarea {
resize: vertical;
min-height: 150px;
}
.contact-page .contact-form input:focus,
.contact-page .contact-form select:focus,
.contact-page .contact-form textarea:focus {
border-color: var(--contact-teal);
box-shadow: 0 0 0 4px rgba(56, 184, 189, 0.12);
}
.contact-page .contact-form-actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
}
.contact-page .contact-map-panel {
overflow: hidden;
}
.contact-page .contact-map-heading {
padding: 34px 34px 22px;
}
.contact-page .contact-map-heading .badge-bg {
margin-bottom: 14px;
}
.contact-page .contact-map {
height: 430px;
border-top: 1px solid var(--contact-line);
border-bottom: 1px solid var(--contact-line);
}
.contact-page .contact-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.contact-page .contact-direct-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
padding: 20px;
}
.contact-page .contact-direct-list a {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 52px;
padding: 12px;
border-radius: 10px;
background: var(--contact-navy);
color: #fff;
font-size: 16px;
font-weight: 600;
text-align: center;
}
.contact-page .contact-direct-list a:hover {
background: var(--contact-orange);
}
@media (max-width: 1150px) {
.contact-page .contact-workspace-grid {
grid-template-columns: 1fr;
}
.contact-page .contact-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.contact-page .contact-info-section,
.contact-page .contact-workspace {
padding: 56px 0;
}
.contact-page .contact-form,
.contact-page .contact-card-grid,
.contact-page .contact-direct-list {
grid-template-columns: 1fr;
}
.contact-page .contact-form-wrap,
.contact-page .contact-map-heading {
padding: 28px 22px;
}
.contact-page .contact-hero-actions .btn,
.contact-page .contact-form-actions .btn {
width: 100%;
justify-content: center;
}
.contact-page .contact-map {
height: 340px;
}
}
/* Contact page - refined information cards */
.contact-page .contact-info-section {
position: relative;
overflow: hidden;
padding: 72px 0;
background:
linear-gradient(rgba(44, 119, 149, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(44, 119, 149, 0.035) 1px, transparent 1px),
linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
background-size: 34px 34px, 34px 34px, auto;
}
.contact-page .contact-info-section::before {
content: '';
position: absolute;
top: 28px;
right: -120px;
width: 330px;
height: 330px;
border: 52px solid rgba(254, 130, 12, 0.055);
border-radius: 50%;
pointer-events: none;
}
.contact-page .contact-info-section .container {
position: relative;
z-index: 1;
}
.contact-page .contact-card-grid {
gap: 22px;
align-items: stretch;
}
.contact-page .contact-card-grid article {
position: relative;
min-height: 275px;
padding: 32px 26px 28px;
overflow: hidden;
border: 1px solid rgba(44, 119, 149, 0.16);
border-radius: 14px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 16px 38px rgba(16, 47, 66, 0.075);
}
.contact-page .contact-card-grid article::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--contact-orange), var(--contact-teal));
opacity: 0;
transition: opacity 0.3s ease;
}
.contact-page .contact-card-grid article:hover::before {
opacity: 1;
}
.contact-page .contact-card-icon {
width: 58px;
height: 58px;
margin-bottom: 24px;
border-radius: 12px;
background: linear-gradient(135deg, var(--contact-orange), #ff9d3b);
font-size: 22px;
box-shadow: 0 14px 30px rgba(254, 130, 12, 0.22);
}
.contact-page .contact-card-grid h3 {
margin-bottom: 14px;
color: #15172c;
font-size: 23px;
font-weight: 600;
line-height: 1.25;
}
.contact-page .contact-card-grid p,
.contact-page .contact-card-grid a {
color: #2d2f36;
font-size: 18px !important;
line-height: 1.72;
font-weight: 500;
}
.contact-page .contact-card-grid a:hover {
color: var(--contact-orange);
}
.contact-page .contact-card-grid article:nth-child(2),
.contact-page .contact-card-grid article:nth-child(3) {
display: flex;
flex-direction: column;
}
.contact-page .contact-card-grid article:nth-child(2) p,
.contact-page .contact-card-grid article:nth-child(3) p {
overflow-wrap: anywhere;
}
@media (max-width: 1150px) {
.contact-page .contact-card-grid article {
min-height: 230px;
}
}
@media (max-width: 700px) {
.contact-page .contact-info-section {
padding: 54px 0;
}
.contact-page .contact-card-grid {
gap: 16px;
}
.contact-page .contact-card-grid article {
min-height: 0;
padding: 26px 22px;
}
.contact-page .contact-card-grid p,
.contact-page .contact-card-grid a {
font-size: 16px !important;
}
}
/* Contact info cards - two column half-width layout */
.contact-page .contact-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
/* max-width: 1180px; */
margin: 0 auto;
}
.contact-page .contact-card-grid article {
min-height: auto;
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
column-gap: 20px;
align-content: start;
align-items: start;
}
.contact-page .contact-card-icon {
grid-row: 1 / span 2;
margin-bottom: 0;
}
.contact-page .contact-card-grid h3 {
margin-top: 2px;
}
.contact-page .contact-card-grid p {
max-width: 620px;
}
.contact-page .contact-card-grid article:nth-child(2),
.contact-page .contact-card-grid article:nth-child(3) {
display: grid;
}
@media (max-width: 800px) {
.contact-page .contact-card-grid {
grid-template-columns: 1fr;
}
.contact-page .contact-card-grid article {
min-height: 0;
}
}
@media (max-width: 520px) {
.contact-page .contact-card-grid article {
grid-template-columns: 1fr;
}
.contact-page .contact-card-icon {
grid-row: auto;
margin-bottom: 18px;
}
}
/* Contact page - final banner and quick-contact alignment fixes */
.contact-page .contact-hero {
min-height: 320px;
padding: 0;
}
.contact-page .contact-info-section {
scroll-margin-top: 115px;
/* padding: 84px 0 76px; */
}
.contact-page .contact-info-heading {
max-width: 760px;
margin: 0 auto 34px;
text-align: center;
}
.contact-page .contact-info-heading .badge-bg {
margin-bottom: 12px;
}
.contact-page .contact-info-heading .section-title {
margin-bottom: 0;
}
.contact-page .contact-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
/* max-width: 1340px; */
margin: 0 auto;
}
.contact-page .contact-card-grid article,
.contact-page .contact-card-grid article:nth-child(2),
.contact-page .contact-card-grid article:nth-child(3) {
min-height: auto;
display: grid;
grid-template-columns: 68px minmax(0, 1fr);
grid-template-rows: auto 1fr;
column-gap: 22px;
row-gap: 8px;
align-items: start;
padding: 30px 34px;
border-radius: 10px;
}
.contact-page .contact-card-icon {
grid-row: 1 / span 2;
width: 58px;
height: 58px;
margin: 0;
border-radius: 10px;
justify-content: center;
display: flex;
align-items: center;
color: #012254;
font-size: 26px;
}
.contact-page .contact-card-grid h3 {
margin: 4px 0 2px;
font-size: 23px;
line-height: 1.25;
}
.contact-page .contact-card-grid p,
.contact-page .contact-card-grid a {
max-width: none;
margin: 0;
font-size: 17px !important;
line-height: 1.65;
}
@media (max-width: 900px) {
.contact-page .contact-card-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.contact-page .contact-hero {
min-height: 300px;
padding: 0;
}
.contact-page .contact-hero-content {
padding: 38px 0 34px;
}
.contact-page .contact-info-section {
padding: 58px 0;
}
.contact-page .contact-info-heading {
margin-bottom: 26px;
}
.contact-page .contact-card-grid article,
.contact-page .contact-card-grid article:nth-child(2),
.contact-page .contact-card-grid article:nth-child(3) {
min-height: 0;
padding: 26px 22px;
}
}
@media (max-width: 520px) {
.contact-page .contact-card-grid article,
.contact-page .contact-card-grid article:nth-child(2),
.contact-page .contact-card-grid article:nth-child(3) {
grid-template-columns: 1fr;
row-gap: 12px;
}
.contact-page .contact-card-icon {
grid-row: auto;
margin-bottom: 4px;
}
}
/* Contact page - compact inquiry form */
.contact-page .contact-workspace {
padding: 64px 0;
}
.contact-page .contact-form-wrap {
padding: 28px 30px 30px;
border-radius: 12px;
}
.contact-page .contact-form-wrap .badge-bg {
padding: 7px 20px;
margin-bottom: 14px;
font-size: 14px;
letter-spacing: 1.5px;
}
.contact-page .contact-form-wrap .section-title {
max-width: 760px;
margin-bottom: 22px;
font-size: clamp(30px, 2.8vw, 42px);
line-height: 1.25;
}
.contact-page .contact-form {
gap: 14px 18px;
}
.contact-page .form-row {
gap: 6px;
}
.contact-page .contact-form label {
font-size: 15px;
}
.contact-page .contact-form input,
.contact-page .contact-form select,
.contact-page .contact-form textarea {
min-height: 46px;
padding: 10px 13px;
}
.contact-page .contact-form textarea {
min-height: 112px;
}
.contact-page .contact-form-actions {
margin-top: 6px;
}
.contact-page .contact-form-actions .btn {
padding: 10px 24px;
font-size: 16px;
}
@media (max-width: 700px) {
.contact-page .contact-workspace {
padding: 48px 0;
}
.contact-page .contact-form-wrap {
padding: 24px 20px 26px;
}
.contact-page .contact-form-wrap .section-title {
font-size: 28px;
}
}
/* Contact page - equal height inquiry and location panels */
.contact-page .contact-workspace-grid {
align-items: stretch;
}
.contact-page .contact-form-wrap,
.contact-page .contact-map-panel {
height: 100%;
}
.contact-page .contact-map-panel {
display: flex;
flex-direction: column;
}
.contact-page .contact-map-heading {
padding: 28px 30px 18px;
}
.contact-page .contact-map-heading .badge-bg {
padding: 7px 20px;
margin-bottom: 14px;
font-size: 14px;
letter-spacing: 1.5px;
}
.contact-page .contact-map-heading h2 {
margin-bottom: 8px;
font-size: 28px;
}
.contact-page .contact-map-heading p {
margin-bottom: 0;
font-size: 16px !important;
line-height: 1.55;
}
.contact-page .contact-map {
flex: 1 1 auto;
min-height: 320px;
height: auto;
}
.contact-page .contact-direct-list {
flex: 0 0 auto;
padding: 18px;
}
@media (max-width: 1150px) {
.contact-page .contact-form-wrap,
.contact-page .contact-map-panel {
height: auto;
}
.contact-page .contact-map {
min-height: 360px;
}
}
@media (max-width: 700px) {
.contact-page .contact-map-heading {
padding: 24px 20px 16px;
}
.contact-page .contact-map-heading h2 {
font-size: 24px;
}
.contact-page .contact-map {
min-height: 300px;
}
}
/* ============================================
SERVICES LIST PAGE
============================================ */
.services-list-page .services-directory {
position: relative;
overflow: hidden;
/* padding: 84px 0 96px; */
background:
linear-gradient(rgba(44, 119, 149, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(44, 119, 149, 0.035) 1px, transparent 1px),
linear-gradient(180deg, #ffffff 0%, #f6fafb 100%);
background-size: 34px 34px, 34px 34px, auto;
}
.services-list-page .services-directory::before {
content: '';
position: absolute;
right: -130px;
top: 46px;
width: 350px;
height: 350px;
border: 56px solid rgba(254, 124, 0, 0.055);
border-radius: 50%;
pointer-events: none;
}
.services-list-page .services-directory .container {
position: relative;
z-index: 1;
}
.services-list-page .services-directory-heading {
/* max-width: 940px; */
margin: 0 auto 44px;
text-align: center;
}
.services-list-page .services-directory-heading .section-title {
margin-bottom: 16px;
}
.services-list-page .services-directory-heading p {
/* max-width: 820px; */
margin: 0 auto;
color: #3d4650;
font-size: 18px !important;
line-height: 1.75;
}
.services-list-page .services-directory-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.services-list-page .services-directory-card {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(44, 119, 149, 0.16);
border-radius: 10px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 16px 38px rgba(16, 47, 66, 0.075);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.services-list-page .services-directory-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 52px rgba(16, 47, 66, 0.13);
}
.services-list-page .services-directory-img {
aspect-ratio: 16 / 9;
overflow: hidden;
background: #dce8ec;
}
.services-list-page .services-directory-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.services-list-page .services-directory-card:hover .services-directory-img img {
transform: scale(1.06);
}
.services-list-page .services-directory-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 26px 24px 24px;
}
.services-list-page .services-directory-body h3 {
margin-bottom: 12px;
color: var(--dark);
font-size: 24px;
line-height: 1.28;
font-weight: 700;
}
.services-list-page .services-directory-body p {
margin-bottom: 22px;
color: #3d4650;
font-size: 16px !important;
line-height: 1.7;
}
.services-list-page .service-link {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: auto;
color: var(--primary);
font-size: 16px;
font-weight: 600;
}
.services-list-page .service-link:hover {
color: var(--secondary);
}
@media (max-width: 1100px) {
.services-list-page .services-directory-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.services-list-page .services-directory {
padding: 58px 0 66px;
}
.services-list-page .services-directory-heading {
margin-bottom: 30px;
}
.services-list-page .services-directory-heading p {
font-size: 16px !important;
}
.services-list-page .services-directory-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.services-list-page .services-directory-body {
padding: 22px 20px;
}
.services-list-page .services-directory-body h3 {
font-size: 21px;
}
}
/* ============================================
INDEX PAGE RESPONSIVE FINAL FIXES
============================================ */
@media (max-width: 1299px) {
.homeSlider .container {
padding: 0 32px;
}
.homeSlider .caption-wrap .line1 {
font-size: clamp(42px, 4.4vw, 56px);
line-height: 1.18;
}
.homeSlider .caption-wrap .line2 {
font-size: 18px;
line-height: 1.65;
}
.introone__thumb-main {
width: 760px;
height: 595px;
margin-left: -190px;
}
.about-wrapper,
.qualitative-wrapper {
gap: 36px;
}
.service-card {
padding: 28px 24px 24px;
}
.service-card-img {
height: 170px;
}
}
@media (max-width: 1023px) {
section {
padding: 56px 0;
}
.header-top {
display: none;
}
.navbar {
min-height: 72px;
padding: 8px 0;
}
.logo img,
.scrolled .logo img {
width: auto;
height: 58px;
max-height: 58px;
}
.nav-menu,
.scrolled .nav-menu {
top: 74px;
height: calc(100vh - 74px);
width: min(330px, 86vw);
z-index: 9999;
}
.homeSlider .container {
padding: 0 20px;
overflow: visible;
}
.homeSlider .container .inner-div {
min-height: auto;
padding: 42px 0 50px;
display: block;
}
.colLeft,
.colRight {
width: 100%;
padding-right: 0;
}
.colRight,
.introone__thumb,
.introone__thumb-main,
.mobile-image-768 {
display: none !important;
}
.homeSlider .caption-wrap {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.mobile-image {
display: block;
max-width: 520px;
margin: 0 auto 24px;
}
.mobile-image img {
width: 100%;
height: auto;
}
.homeSlider .caption-wrap .line1 {
font-size: clamp(34px, 6vw, 48px);
line-height: 1.16;
margin-bottom: 14px;
}
.homeSlider .caption-wrap .line2 {
max-width: 680px;
margin: 0 auto 26px;
font-size: 17px;
line-height: 1.65;
}
.homeSlider .caption-wrap .btn-group {
justify-content: center;
}
.about-wrapper {
grid-template-columns: 1fr;
}
.about-img-container {
max-width: 580px;
margin: 0 auto;
}
.about-text {
text-align: center;
}
.about-text p {
text-align: left;
}
.about-features-card {
grid-template-columns: 1fr;
gap: 18px;
padding: 24px;
}
.about-feature-column {
align-items: center;
}
.services .section-title,
.projects .section-title,
.counter-section .section-title,
.qualitative .section-title {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.service-card {
min-height: 100%;
}
.counter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.projects {
padding: 60px 0 72px;
}
.project-card {
height: 360px;
}
.qualitative-wrapper {
grid-template-columns: 1fr;
}
.qualitative-img {
max-width: 760px;
margin: 0 auto;
}
.qualitative-img img {
min-height: 380px;
}
.quality-list {
max-width: 760px;
margin: 0 auto;
}
.cta-section {
height: auto;
min-height: 0;
padding: 0;
background: linear-gradient(102.94deg, #DA6A00 0%, #FF9E41 100%);
}
.cta-section::after,
.cta-section .left {
display: none;
}
.cta-section .container {
height: auto;
display: block;
}
.cta-content {
width: 100%;
margin: 0;
padding: 42px 0;
flex-direction: column;
text-align: center;
gap: 22px;
}
.cta-text {
padding-right: 0;
}
.cta-text p {
margin: 0 auto;
}
.cta-btns {
justify-content: center;
}
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
html {
font-size: 16px;
}
.container {
padding-left: 18px;
padding-right: 18px;
}
.badge-bg {
font-size: 14px;
letter-spacing: 1px;
padding: 7px 18px;
}
.section-title {
font-size: clamp(28px, 7vw, 36px);
line-height: 1.24;
margin-bottom: 24px;
}
.btn {
min-height: 44px;
padding: 10px 20px;
font-size: 15px;
justify-content: center;
}
.homeSlider .container .inner-div {
padding: 34px 0 42px;
}
.homeSlider .caption-wrap .line1 {
font-size: clamp(30px, 9vw, 42px);
}
.homeSlider .caption-wrap .line2 {
font-size: 16px;
}
.homeSlider .caption-wrap .btn-group {
flex-direction: column;
align-items: stretch;
max-width: 330px;
margin: 22px auto 0;
}
.homeSlider .caption-wrap .btn-group .btn {
width: 100%;
}
.mobile-image {
max-width: 390px;
}
.about-img-main {
width: 72%;
border-radius: 18px;
border-width: 5px;
}
.about-img-sub {
width: 58%;
border-radius: 18px;
border-width: 5px;
}
.about-badge-new {
width: 104px;
height: 104px;
left: 12%;
}
.about-badge-content h3 {
font-size: 26px;
}
.about-badge-content p {
font-size: 11px !important;
}
.about-feature-column {
gap: 14px;
}
.about-feature-icon-box {
width: 54px;
height: 54px;
}
.about-feature-text h4,
.service-card h4,
.quality-text h4 {
font-size: 19px;
}
.service-card {
padding: 24px 20px 20px;
border-radius: 12px;
}
.service-card-img {
height: 190px;
}
.counter-grid {
gap: 16px;
}
.counter-item {
padding: 18px 12px;
}
.counter-icon {
width: 58px;
height: 58px;
}
.counter-number {
font-size: 34px;
}
.counter-label {
font-size: 15px;
}
.project-card {
height: 320px;
}
.qualitative-img img {
min-height: 320px;
}
.qualitative-contacts {
position: static;
flex-direction: column;
align-items: stretch;
gap: 12px;
border-radius: 0 0 12px 12px;
}
.qualitative-contacts a,
.qualitative-contacts a:first-child,
.qualitative-contacts a:last-child {
padding: 0;
border: 0;
}
.quality-item {
align-items: flex-start;
}
.quality-icon-img {
width: 88px;
height: 88px;
}
.cta-text h3 {
font-size: 28px;
}
.cta-btns {
width: 100%;
max-width: 360px;
margin: 0 auto;
flex-direction: column;
}
.cta-btns .btn {
width: 100%;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-logo {
width: min(100%, 300px);
min-height: 72px;
padding: 12px 18px;
}
.footer-contact li {
gap: 14px;
font-size: 15px;
}
.footer-contact-icon {
width: 48px;
height: 48px;
min-width: 48px;
}
}
@media (max-width: 520px) {
section {
padding: 46px 0;
}
.logo img,
.scrolled .logo img {
height: 50px;
max-height: 50px;
}
.navbar {
min-height: 64px;
}
.nav-menu,
.scrolled .nav-menu {
top: 66px;
height: calc(100vh - 66px);
}
.homeSlider .container .inner-div {
padding: 28px 0 36px;
}
.homeSlider .caption-wrap .line1 {
font-size: clamp(27px, 9vw, 34px);
}
.homeSlider .caption-wrap .line2 {
font-size: 15px;
line-height: 1.6;
}
.mobile-image {
max-width: 310px;
margin-bottom: 18px;
}
.about-img-container {
padding-bottom: 28px;
}
.about-img-main {
width: 78%;
}
.about-img-sub {
width: 62%;
}
.about-dots {
display: none;
}
.about-badge-new {
width: 86px;
height: 86px;
left: 5%;
top: 7%;
}
.about-features-card {
padding: 20px 16px;
border-left-width: 6px;
}
.about-feature-column,
.quality-item {
flex-direction: column;
}
.service-card-img {
height: 170px;
}
.counter-grid {
grid-template-columns: 1fr;
}
.project-card {
height: 280px;
}
.project-card-info {
position: relative;
left: auto;
right: auto;
bottom: auto;
margin: -44px 14px 0;
}
.projects-slider .owl-stage-outer {
padding-bottom: 28px;
}
.projects-slider .owl-dots {
margin-top: 28px;
}
.qualitative-img img {
min-height: 260px;
}
.cta-content {
padding: 34px 0;
}
.footer {
padding-top: 38px;
}
.footer-contact li:nth-child(2) a {
font-size: 17px;
}
.footer-contact li:nth-child(3) a {
word-break: break-word;
overflow-wrap: anywhere;
}
}
/* Mobile nav: tap service text to open page, tap arrow to show dropdown */
@media (max-width: 1024px) {
.has-dropdown > a i {
margin-left: auto;
min-width: 36px;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
/* ============================================
FAQ PAGE
============================================ */
.faq-page .faq-overview {
background:
linear-gradient(rgba(30, 63, 82, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(30, 63, 82, 0.035) 1px, transparent 1px),
linear-gradient(180deg, #ffffff 0%, #f6fafb 100%);
background-size: 34px 34px, 34px 34px, auto;
}
.faq-page .faq-overview-heading {
max-width: 980px;
margin: 0 auto 38px;
text-align: center;
}
.faq-page .faq-overview-heading p {
max-width: 850px;
margin: 0 auto;
color: #3d4650;
font-size: 18px !important;
}
.faq-page .faq-support-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.faq-page .faq-support-grid article {
height: 100%;
padding: 30px 28px;
border: 1px solid rgba(30, 63, 82, 0.12);
border-radius: 10px;
background: #fff;
box-shadow: 0 14px 34px rgba(16, 47, 66, 0.07);
}
.faq-page .faq-support-grid i {
width: 60px;
height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
border-radius: 10px;
background: linear-gradient(102.94deg, #FE7C00 0%, #FF9E42 100%);
color: #fff;
font-size: 26px;
}
.faq-page .faq-support-grid h3 {
margin-bottom: 10px;
color: var(--secondary);
font-size: 23px;
line-height: 1.25;
}
.faq-page .faq-support-grid p {
margin-bottom: 0;
color: #3d4650;
font-size: 16px !important;
line-height: 1.7;
}
.faq-page .faq-main {
padding-top: 70px;
background: #fff;
}
.faq-page .faq-main .svc-faq-title {
margin-bottom: 36px;
}
.faq-page .faq-main .faq-question {
padding: 22px 26px;
line-height: 1.45;
}
.faq-page .faq-main .faq-answer p {
padding: 0 26px 24px;
}
@media (max-width: 900px) {
.faq-page .faq-support-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.faq-page .faq-overview-heading p {
font-size: 16px !important;
}
.faq-page .faq-support-grid article {
padding: 26px 22px;
}
.faq-page .faq-main {
padding-top: 52px;
}
}
/* Inquiry page - form only layout */
.inquiry-page .contact-workspace-grid.inquiry-form-only {
display: block;
max-width: 1120px;
}
.contact-page .contact-workspace-grid.contact-form-only {
display: block;
max-width: 1120px;
}
.inquiry-page .contact-form-wrap {
max-width: 100%;
}
.inquiry-page .contact-workspace {
background: linear-gradient(180deg, #ffffff 0%, #f6fafb 100%);
}
/* Contact and inquiry captcha */
.contact-page .captcha-row {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-page .captcha-row label {
color: #1a1a2e;
font-size: 15px;
font-weight: 600;
line-height: 1.45;
text-align: left;
}
.contact-page .captcha-wrap {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.contact-page .captcha-code {
min-width: 92px;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d5dce3;
border-radius: 6px;
background: #fff;
color: #ff8a00;
font-size: 24px;
font-weight: 700;
line-height: 1;
}
.contact-page .captcha-wrap input {
max-width: 180px;
text-align: left;
}
@media (max-width: 575px) {
.contact-page .captcha-wrap {
flex-direction: column;
align-items: stretch;
}
.contact-page .captcha-code,
.contact-page .captcha-wrap input {
width: 100%;
max-width: none;
}
}
/* Email and phone stay compact while the response card gets more room. */
.contact-page .contact-card-grid {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.3fr);
}
@media (max-width: 1100px) {
.contact-page .contact-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 800px) {
.contact-page .contact-card-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
Home Slider Redesign
============================================ */
.homeSlider {
background: #eef3f6;
padding: 0;
overflow: hidden;
}
.homeSlider .owl-carousel,
.homeSlider .owl-stage-outer,
.homeSlider .owl-stage,
.homeSlider .owl-item,
.homeSlider .home-slide {
min-height: 760px;
}
.homeSlider .home-slide {
position: relative;
display: flex;
align-items: center;
background-position: center right;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
.homeSlider .home-slide::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 28%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0) 60%);
z-index: 1;
}
.homeSlider .home-slide::after {
/* content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.72) 100%);
z-index: 1;
pointer-events: none; */
}
.homeSlider .container {
width: 100%;
max-width: 1600px;
padding: 0 15px;
overflow: visible;
z-index: 2;
}
.home-slide-content {
position: relative;
z-index: 2;
max-width: 860px;
padding: 76px 0 92px;
}
.home-slide-content .badge-bg {
margin-bottom: 26px;
padding: 12px 22px;
background: var(--secondary);
color: #fff;
border-radius: 999px;
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: 1px;
}
.home-slide-content h1 {
margin: 0 0 24px;
color: var(--secondary);
font-size: clamp(58px, 5.05vw, 80px);
font-weight: 900;
line-height: 1.16;
letter-spacing: 0;
text-transform: uppercase;
font-family: "Roboto Condensed", sans-serif;
}
.home-slide-content h1 span {
/* display: block; */
color: var(--primary);
}
.home-slide-content p {
max-width: 860px;
margin: 0 0 28px;
color: #111;
font-size: 20px !important;
font-weight: 500;
line-height: 1.6;
}
.home-slide-content .btn-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
.home-slide-content .btn {
min-width: 235px;
justify-content: center;
padding: 12px 34px;
border-radius: 100px;
border: 0;
font-size: 18px;
font-weight: 500;
}
.home-slide-content .btn i {
font-size: 16px;
}
.homeSlider .owl-dots {
position: absolute;
left: 50%;
bottom: 28px;
z-index: 5;
display: flex;
gap: 8px;
transform: translateX(-50%);
}
.homeSlider .owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 0;
border-radius: 999px;
background: rgba(0, 34, 85, 0.35);
transition: var(--transition);
}
.homeSlider .owl-dots .owl-dot.active span {
width: 28px;
background: var(--primary);
}
.homeSlider .owl-item.active .home-slide-content .badge-bg {
animation: 0.8s 0.1s fadeInDown both;
}
.homeSlider .owl-item.active .home-slide-content h1 {
animation: 0.9s 0.25s fadeInUp both;
}
.homeSlider .owl-item.active .home-slide-content p {
animation: 0.9s 0.45s fadeInUp both;
}
.homeSlider .owl-item.active .home-slide-content .btn {
animation: 0.9s 0.65s zoomIn both;
}
@media (max-width: 1299px) {
.homeSlider .owl-carousel,
.homeSlider .owl-stage-outer,
.homeSlider .owl-stage,
.homeSlider .owl-item,
.homeSlider .home-slide {
min-height: 650px;
}
.home-slide-content {
max-width: 650px;
}
.home-slide-content h1 {
font-size: clamp(46px, 5.2vw, 68px);
}
.home-slide-content p {
font-size: 19px !important;
line-height: 1.75;
}
}
@media (max-width: 992px) {
.homeSlider .home-slide {
background-position: 62% center;
align-items: flex-end;
}
.homeSlider .home-slide::before {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.77) 70%, rgb(255, 255, 255) 100%);
}
/* .homeSlider .home-slide::after {
background: rgba(255, 255, 255, 0.08);
} */
.home-slide-content {
max-width: 760px;
padding: 150px 0 58px;
text-align: center;
margin: 0 auto;
}
.home-slide-content .btn-group {
justify-content: center;
}
}
@media (max-width: 768px) {
.homeSlider .owl-carousel,
.homeSlider .owl-stage-outer,
.homeSlider .owl-stage,
.homeSlider .owl-item,
.homeSlider .home-slide {
min-height: 620px;
}
.homeSlider .home-slide {
background-position: 68% top;
}
.home-slide-content {
padding: 250px 0 48px;
}
.home-slide-content .badge-bg {
margin-bottom: 18px;
padding: 10px 18px;
font-size: 13px;
letter-spacing: 3px;
}
.home-slide-content h1 {
font-size: clamp(34px, 10vw, 48px);
line-height: 1.15;
}
.home-slide-content p {
font-size: 16px !important;
line-height: 1.65;
}
.home-slide-content .btn-group {
flex-direction: column;
align-items: stretch;
max-width: 330px;
margin: 22px auto 0;
}
.home-slide-content .btn {
width: 100%;
min-width: 0;
padding: 13px 22px;
font-size: 15px;
}
}
@media (max-width: 520px) {
.homeSlider .owl-carousel,
.homeSlider .owl-stage-outer,
.homeSlider .owl-stage,
.homeSlider .owl-item,
.homeSlider .home-slide {
min-height: 570px;
}
.home-slide-content {
padding: 218px 0 42px;
}
.home-slide-content h1 {
font-size: clamp(30px, 10vw, 38px);
}
.home-slide-content p {
font-size: 15px !important;
}
}
.home-slide-content .btn-primary:hover {
background: var(--secondary);
color: var(--white);
box-shadow: 0 12px 26px rgba(0, 34, 85, 0.22);
}
.home-slide-content .btn-secondary:hover {
background: var(--primary);
color: var(--white);
box-shadow: 0 12px 26px rgba(241, 115, 21, 0.24);
}