|
|
|
|
@@ -1,4 +1,21 @@
|
|
|
|
|
:root{--icon-font:"Font Awesome 6 Free";--fa-style-family:"Font Awesome 6 Free";}
|
|
|
|
|
/* ── GLOBAL IMAGE OVERFLOW PREVENTION ── */
|
|
|
|
|
img { max-width: 100%; height: auto; }
|
|
|
|
|
|
|
|
|
|
/* ── SECTION SPACING: tighter on very small screens ── */
|
|
|
|
|
@media (max-width: 575px) {
|
|
|
|
|
.space, .space-top { padding-top: 30px !important; }
|
|
|
|
|
.space, .space-bottom { padding-bottom: 30px !important; }
|
|
|
|
|
.sec-title { font-size: 20px !important; }
|
|
|
|
|
.form-btn .th-btn { width: 100%; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── FORM INPUTS: full-width guarantee on mobile ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.contact-form .form-group input,
|
|
|
|
|
.contact-form .form-group select,
|
|
|
|
|
.contact-form .form-group textarea { width: 100% !important; }
|
|
|
|
|
}
|
|
|
|
|
.header-logo .logo img{width:260px;}
|
|
|
|
|
.th-menu-wrapper .mobile-logo img{width:180px;}
|
|
|
|
|
.th-menu-wrapper .mobile-logo{background-color:var(--brand-navy, #0a004c);}
|
|
|
|
|
@@ -119,34 +136,66 @@
|
|
|
|
|
.box-title { font-size: 18px !important; }
|
|
|
|
|
|
|
|
|
|
/* === Service cards === */
|
|
|
|
|
.service-block .box-content { margin: -24px 8px 0 !important; padding: 0 12px 12px !important; }
|
|
|
|
|
.service-block .box-title { font-size: 16px !important; }
|
|
|
|
|
.service-block .box-icon { width: 48px !important; height: 48px !important; font-size: 20px !important; }
|
|
|
|
|
.service-block .box-content { padding: 16px !important; margin: -40px 8px 0 !important; }
|
|
|
|
|
.service-block .box-title { font-size: 16px !important; margin-bottom: 4px !important; }
|
|
|
|
|
.service-block .box-icon { width: 52px !important; height: 52px !important; line-height: 52px !important; margin: -26px auto -14px auto !important; transform: translateY(-26px) !important; font-size: 20px !important; }
|
|
|
|
|
.service-card { padding: 16px !important; }
|
|
|
|
|
.service-card .box-number { font-size: 36px !important; }
|
|
|
|
|
.service-grid { padding: 16px !important; }
|
|
|
|
|
.service-block .box-img {
|
|
|
|
|
height: 160px !important;
|
|
|
|
|
overflow: hidden !important;
|
|
|
|
|
}
|
|
|
|
|
.service-block .box-img img {
|
|
|
|
|
height: 100% !important;
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
object-fit: cover !important;
|
|
|
|
|
}
|
|
|
|
|
.service-block .box-title a {
|
|
|
|
|
font-size: 16px !important;
|
|
|
|
|
}
|
|
|
|
|
.service-block .box-text {
|
|
|
|
|
font-size: 13px !important;
|
|
|
|
|
margin-bottom: 8px !important;
|
|
|
|
|
display: -webkit-box !important;
|
|
|
|
|
-webkit-line-clamp: 2 !important;
|
|
|
|
|
-webkit-box-orient: vertical !important;
|
|
|
|
|
overflow: hidden !important;
|
|
|
|
|
}
|
|
|
|
|
.service-block .icon-btn {
|
|
|
|
|
width: 44px !important;
|
|
|
|
|
height: 44px !important;
|
|
|
|
|
font-size: 16px !important;
|
|
|
|
|
line-height: 44px !important;
|
|
|
|
|
text-align: center !important;
|
|
|
|
|
top: 8px !important;
|
|
|
|
|
right: 8px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* === Counter cards === */
|
|
|
|
|
.counter-card .box-number { font-size: 28px !important; }
|
|
|
|
|
.counter-card .box-text { font-size: 14px !important; }
|
|
|
|
|
|
|
|
|
|
/* === Gallery === */
|
|
|
|
|
.gallery-grid .icon-btn { opacity: 1 !important; transform: none !important; right: 8px !important; top: 8px !important; width: 32px !important; height: 32px !important; font-size: 11px !important; }
|
|
|
|
|
.gallery-grid .icon-btn { opacity: 1 !important; visibility: visible !important; transform: none !important; right: 8px !important; top: 8px !important; width: 32px !important; height: 32px !important; font-size: 11px !important; }
|
|
|
|
|
.gallery-grid .box-img img { height: 200px !important; object-fit: cover !important; width: 100% !important; }
|
|
|
|
|
|
|
|
|
|
/* === Brand/Sponsor === */
|
|
|
|
|
.brand-sec3 .brand-inner { margin-top: -24px !important; padding: 12px 8px !important; }
|
|
|
|
|
.brand-card img { max-height: 24px !important; width: auto !important; }
|
|
|
|
|
.brand-sec3 .brand-inner { margin-top: -24px !important; }
|
|
|
|
|
/* moved to sponsor block below */
|
|
|
|
|
|
|
|
|
|
/* === Project cards === */
|
|
|
|
|
.project-card .box-content { padding: 10px !important; }
|
|
|
|
|
.project-card .box-title { font-size: 15px !important; }
|
|
|
|
|
.project-element .box-content { display: none !important; }
|
|
|
|
|
.project-element .box-img { border-radius: 16px !important; overflow: hidden !important; }
|
|
|
|
|
.project-element .box-img img { height: 200px !important; object-fit: cover !important; width: 100% !important; display: block !important; }
|
|
|
|
|
.filter-menu { margin-bottom: 20px !important; gap: 4px !important; }
|
|
|
|
|
.filter-menu .tab-btn { font-size: 12px !important; padding: 4px 12px !important; }
|
|
|
|
|
/* Prevent project slider from clipping card edges */
|
|
|
|
|
.elementor-element-46cde4a .elementor-widget-container { overflow: visible !important; }
|
|
|
|
|
|
|
|
|
|
/* === Process === */
|
|
|
|
|
.process-box { padding: 12px 36px 12px 12px !important; }
|
|
|
|
|
.process-box .box-title { font-size: 15px !important; }
|
|
|
|
|
.process-card-wrap { grid-template-columns: 1fr !important; gap: 12px !important; }
|
|
|
|
|
.process-box-wrap { gap: 28px !important; }
|
|
|
|
|
|
|
|
|
|
/* === Contact === */
|
|
|
|
|
.contact-area { padding: 16px !important; }
|
|
|
|
|
@@ -196,3 +245,744 @@
|
|
|
|
|
right: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── HERO: bigger Promist inline logo ── */
|
|
|
|
|
.hero-style5 .hero-title img {
|
|
|
|
|
height: 48px !important;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── HEADER: top bar mobile responsive ── */
|
|
|
|
|
/* Left column is now always visible (d-none d-lg-block removed from JSX) */
|
|
|
|
|
|
|
|
|
|
@media (max-width: 991px) {
|
|
|
|
|
.header-layout5 .header-top .row {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 2px;
|
|
|
|
|
}
|
|
|
|
|
.header-top {
|
|
|
|
|
padding: 8px 0 !important;
|
|
|
|
|
}
|
|
|
|
|
.header-top .header-links ul {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: 2px 12px;
|
|
|
|
|
}
|
|
|
|
|
.header-top .header-links li {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
.header-top .header-links li:not(:last-child) {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
.header-top .header-links li:not(:last-child):after {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── STICKY NAV: compress on scroll ── */
|
|
|
|
|
.sticky-wrapper.sticky .main-menu > ul > li > a {
|
|
|
|
|
padding: 18px 0 !important;
|
|
|
|
|
}
|
|
|
|
|
.sticky-wrapper.sticky .header-logo {
|
|
|
|
|
padding: 2px 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── MOBILE MENU: touch targets & faster transition ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.th-menu-wrapper {
|
|
|
|
|
transition: all ease 0.35s;
|
|
|
|
|
}
|
|
|
|
|
.th-menu-wrapper .th-menu-area {
|
|
|
|
|
transition: all ease 0.35s;
|
|
|
|
|
}
|
|
|
|
|
.th-menu-wrapper .th-menu-toggle {
|
|
|
|
|
width: 44px;
|
|
|
|
|
height: 44px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
top: 20px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
line-height: 44px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
}
|
|
|
|
|
.header-layout5 .th-menu-toggle {
|
|
|
|
|
width: 48px;
|
|
|
|
|
height: 48px;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── LOGO: fine-tune scaling across breakpoints ── */
|
|
|
|
|
@media (max-width: 1199px) {
|
|
|
|
|
.header-layout5 .header-logo img {
|
|
|
|
|
max-width: 170px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 575px) {
|
|
|
|
|
.header-layout5 .header-logo img {
|
|
|
|
|
max-width: 120px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── NAV/TOP-BAR SPACING: tighten on mobile ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.header-layout5 .header-top {
|
|
|
|
|
padding: 6px 0 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 575px) {
|
|
|
|
|
.header-top {
|
|
|
|
|
padding: 4px 0 !important;
|
|
|
|
|
}
|
|
|
|
|
.header-layout5 .header-logo {
|
|
|
|
|
padding: 6px 0 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── HERO 5: responsive sizing ── */
|
|
|
|
|
@media (max-width: 1199px) {
|
|
|
|
|
.hero-5 .hero-inner {
|
|
|
|
|
min-height: 600px;
|
|
|
|
|
}
|
|
|
|
|
.hero-style5 {
|
|
|
|
|
padding: 160px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 991px) {
|
|
|
|
|
.hero-5 .hero-inner {
|
|
|
|
|
min-height: 520px;
|
|
|
|
|
}
|
|
|
|
|
.hero-style5 {
|
|
|
|
|
padding: 120px 0;
|
|
|
|
|
}
|
|
|
|
|
.hero-5 .icon-box {
|
|
|
|
|
bottom: 24px;
|
|
|
|
|
right: 24px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.hero-5 .hero-inner {
|
|
|
|
|
min-height: 460px;
|
|
|
|
|
}
|
|
|
|
|
.hero-style5 {
|
|
|
|
|
padding: 80px 0;
|
|
|
|
|
}
|
|
|
|
|
.hero-style5 .hero-title {
|
|
|
|
|
font-size: 32px;
|
|
|
|
|
}
|
|
|
|
|
.hero-style5 .hero-title img {
|
|
|
|
|
height: 32px;
|
|
|
|
|
width: auto;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
.hero-style5 .hero-text {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.hero-5 .icon-box {
|
|
|
|
|
bottom: 16px;
|
|
|
|
|
right: 16px;
|
|
|
|
|
}
|
|
|
|
|
.hero-5 .icon-box .slider-arrow {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 575px) {
|
|
|
|
|
.hero-5 .hero-inner {
|
|
|
|
|
min-height: 380px;
|
|
|
|
|
}
|
|
|
|
|
.hero-style5 {
|
|
|
|
|
padding: 60px 0;
|
|
|
|
|
}
|
|
|
|
|
.hero-style5 .hero-title {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
line-height: 1.3;
|
|
|
|
|
}
|
|
|
|
|
.hero-style5 .hero-title img {
|
|
|
|
|
height: 24px;
|
|
|
|
|
}
|
|
|
|
|
.hero-style5 .hero-text {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
margin-bottom: 18px;
|
|
|
|
|
}
|
|
|
|
|
.hero-5 .icon-box {
|
|
|
|
|
bottom: 12px;
|
|
|
|
|
right: 12px;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
}
|
|
|
|
|
.hero-5 .icon-box .slider-arrow {
|
|
|
|
|
width: 34px;
|
|
|
|
|
height: 34px;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── WHY CHOOSE US: stack columns vertically on mobile ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.elementor-23 .elementor-element-2a912e6.e-flex {
|
|
|
|
|
--flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.why-feature {
|
|
|
|
|
padding: 16px !important;
|
|
|
|
|
margin-bottom: 12px !important;
|
|
|
|
|
}
|
|
|
|
|
.why-feature .box-icon {
|
|
|
|
|
width: 48px !important;
|
|
|
|
|
height: 48px !important;
|
|
|
|
|
margin-bottom: 12px !important;
|
|
|
|
|
}
|
|
|
|
|
.why-feature .box-title {
|
|
|
|
|
font-size: 15px !important;
|
|
|
|
|
margin-bottom: 4px !important;
|
|
|
|
|
}
|
|
|
|
|
.why-feature .box-text {
|
|
|
|
|
font-size: 13px !important;
|
|
|
|
|
line-height: 1.4 !important;
|
|
|
|
|
margin-bottom: 0 !important;
|
|
|
|
|
display: -webkit-box !important;
|
|
|
|
|
-webkit-line-clamp: 2 !important;
|
|
|
|
|
-webkit-box-orient: vertical !important;
|
|
|
|
|
overflow: hidden !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── WHY FEATURE: tighter card padding on very small screens ── */
|
|
|
|
|
@media (max-width: 575px) {
|
|
|
|
|
.why-feature {
|
|
|
|
|
padding: 16px;
|
|
|
|
|
}
|
|
|
|
|
.why-feature .box-icon {
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── SERVICE DETAIL: sidebar below content on mobile ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.elementor-element-9a85ca6.e-flex {
|
|
|
|
|
--flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.elementor-element-9a85ca6 .e-con-full {
|
|
|
|
|
--width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.service-sidebar {
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── ABOUT INTRO: stack columns on mobile ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.elementor-element-00d41d8.e-flex {
|
|
|
|
|
--flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.elementor-element-00d41d8 .e-con-full {
|
|
|
|
|
--width: 100%;
|
|
|
|
|
}
|
|
|
|
|
/* bottom feature row: single column */
|
|
|
|
|
.contact-process-wrap {
|
|
|
|
|
grid-template-columns: 1fr !important;
|
|
|
|
|
gap: 16px !important;
|
|
|
|
|
}
|
|
|
|
|
.rounded-img1 img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── ABOUT EXPERTISE: section title full width on mobile ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.elementor-element-602a946 {
|
|
|
|
|
--container-widget-width: 100% !important;
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
max-width: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── ABOUT WHY CHOOSE US: stack columns on mobile ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.elementor-element-823d3c9.e-flex {
|
|
|
|
|
--flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.elementor-element-823d3c9 .e-con-full {
|
|
|
|
|
--width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.choose-feature-wrap {
|
|
|
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
|
|
|
gap: 12px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── CONTACT: stack form columns, full-width map ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.elementor-element-a29b2eb.e-flex {
|
|
|
|
|
--flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.elementor-element-a29b2eb .e-con-full {
|
|
|
|
|
--width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.elementor-element-3e6da81 {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
.elementor-custom-embed iframe {
|
|
|
|
|
height: 300px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── BREADCRUMB: tighter spacing on small screens ── */
|
|
|
|
|
@media (max-width: 575px) {
|
|
|
|
|
.breadcumb-menu {
|
|
|
|
|
gap: 4px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.breadcumb-menu li:not(:last-child):after {
|
|
|
|
|
margin: 0 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
|
|
|
MOBILE NAVBAR REDO (max-width: 767px)
|
|
|
|
|
— Hide top bar, white sidebar, transparent hamburger bg
|
|
|
|
|
— Every rule wrapped in @media — PC view untouched
|
|
|
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
/* 1. Hide top contact bar entirely on mobile (address, hours, phone) */
|
|
|
|
|
.header-layout5 .header-top {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 2. Hamburger button: transparent bg, red icon, right-aligned via flex */
|
|
|
|
|
.header-layout5 .th-menu-toggle {
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
color: var(--theme-color, #ED1C24) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 3. Ensure menu-wrap flex guarantees hamburger on the right */
|
|
|
|
|
.header-layout5 .menu-wrap {
|
|
|
|
|
display: flex !important;
|
|
|
|
|
align-items: center !important;
|
|
|
|
|
justify-content: space-between !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 4. Sidebar flyout: frosted glass effect */
|
|
|
|
|
.th-menu-wrapper.th-body-visible .th-menu-area {
|
|
|
|
|
background: rgba(255, 255, 255, 0.85) !important;
|
|
|
|
|
backdrop-filter: blur(20px) !important;
|
|
|
|
|
-webkit-backdrop-filter: blur(20px) !important;
|
|
|
|
|
border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
|
|
|
|
|
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 5. Mobile menu links: dark text on white bg */
|
|
|
|
|
.th-mobile-menu ul li a {
|
|
|
|
|
color: #1a1a2e !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 6. Mobile logo container: frosted to match sidebar */
|
|
|
|
|
.th-menu-wrapper .mobile-logo {
|
|
|
|
|
background: rgba(255, 255, 255, 0.8) !important;
|
|
|
|
|
backdrop-filter: blur(10px) !important;
|
|
|
|
|
-webkit-backdrop-filter: blur(10px) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 7. Close button: subtle circle, frosted, always tappable */
|
|
|
|
|
.th-menu-wrapper .th-menu-toggle {
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
right: 12px !important;
|
|
|
|
|
top: 16px !important;
|
|
|
|
|
width: 40px !important;
|
|
|
|
|
height: 40px !important;
|
|
|
|
|
line-height: 40px !important;
|
|
|
|
|
font-size: 18px !important;
|
|
|
|
|
background: rgba(0, 0, 0, 0.05) !important;
|
|
|
|
|
color: #333 !important;
|
|
|
|
|
border-radius: 50% !important;
|
|
|
|
|
z-index: 10 !important;
|
|
|
|
|
display: flex !important;
|
|
|
|
|
align-items: center !important;
|
|
|
|
|
justify-content: center !important;
|
|
|
|
|
border: none !important;
|
|
|
|
|
cursor: pointer !important;
|
|
|
|
|
}
|
|
|
|
|
.th-menu-wrapper .th-menu-toggle:hover {
|
|
|
|
|
background: rgba(0, 0, 0, 0.1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 8. Remove the red right-border accent on sidebar (was theme-color border) */
|
|
|
|
|
.th-menu-wrapper .th-menu-area {
|
|
|
|
|
border-right-color: #e5e5e5 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 9. Sub-menu items on mobile — dark text, visible on white */
|
|
|
|
|
.th-mobile-menu ul li li a {
|
|
|
|
|
color: #333 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 10. Overlay: lighter to let frosted glass show through */
|
|
|
|
|
.th-menu-wrapper {
|
|
|
|
|
background: rgba(0, 0, 0, 0.3) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
|
|
|
SERVICE ICON FIX (max-width: 767px)
|
|
|
|
|
— Proper circle sizing + negative margins for overlap
|
|
|
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.service-block .box-icon {
|
|
|
|
|
width: 52px !important;
|
|
|
|
|
height: 52px !important;
|
|
|
|
|
line-height: 52px !important;
|
|
|
|
|
margin: -26px auto -14px auto !important;
|
|
|
|
|
transform: translateY(-26px) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.service-block .box-icon img {
|
|
|
|
|
max-width: 24px !important;
|
|
|
|
|
max-height: 24px !important;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
height: auto !important;
|
|
|
|
|
display: inline-block !important;
|
|
|
|
|
vertical-align: middle !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
|
|
|
HERO: hide pagination dashes on mobile
|
|
|
|
|
— Fix: dynamic.css global .slider-area .slider-pagination { display:flex }
|
|
|
|
|
was overriding theme-main.css .hero-5 .swiper-pagination-bullets { display:none }
|
|
|
|
|
due to same-specificity cascade order. This enforces the intent.
|
|
|
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.hero-5 .slider-pagination {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── SPONSOR / CLIENT LOGOS: full viewport, bigger on mobile ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
/* Break out of any parent container constraint — span full viewport */
|
|
|
|
|
.brand-sec3 {
|
|
|
|
|
width: 100vw !important;
|
|
|
|
|
margin-left: calc(-50vw + 50%) !important;
|
|
|
|
|
max-width: none !important;
|
|
|
|
|
overflow: hidden !important;
|
|
|
|
|
padding: 16px 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Reset brand-inner: remove desktop margin-right:200px, hide decorative shapes */
|
|
|
|
|
.brand-sec3 .brand-inner {
|
|
|
|
|
margin-right: 0 !important;
|
|
|
|
|
padding: 12px 0 !important;
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
.brand-sec3 .brand-inner:before,
|
|
|
|
|
.brand-sec3 .brand-inner:after {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Card: transparent, no borders, flex-center for bigger logos */
|
|
|
|
|
.brand-sec3 .brand-card {
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
border: none !important;
|
|
|
|
|
box-shadow: none !important;
|
|
|
|
|
border-radius: 0 !important;
|
|
|
|
|
padding: 8px 8px !important;
|
|
|
|
|
aspect-ratio: auto !important;
|
|
|
|
|
min-height: 60px !important;
|
|
|
|
|
display: flex !important;
|
|
|
|
|
align-items: center !important;
|
|
|
|
|
justify-content: center !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Logo images: BIG, full-width within card */
|
|
|
|
|
.brand-sec3 .brand-card img {
|
|
|
|
|
max-height: 60px !important;
|
|
|
|
|
max-width: 100% !important;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
height: auto !important;
|
|
|
|
|
object-fit: contain !important;
|
|
|
|
|
filter: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
|
|
|
FIX 1: Footer — hide contact info bar (phone/email/address)
|
|
|
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.pf-footer .pf-contact-wrap {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
|
|
|
FIX 2: Working Process — remove box backgrounds/borders
|
|
|
|
|
Keep only circles (box-number) + text (box-title)
|
|
|
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.process-box {
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
border: none !important;
|
|
|
|
|
box-shadow: none !important;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
min-height: 68px !important;
|
|
|
|
|
}
|
|
|
|
|
.process-box .box-content {
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
border: none !important;
|
|
|
|
|
box-shadow: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
|
|
|
FIX 3: Gallery — plus signs inside white circles
|
|
|
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
/* Button: white circle, always visible on mobile */
|
|
|
|
|
.gallery-grid .icon-btn {
|
|
|
|
|
width: 44px !important;
|
|
|
|
|
height: 44px !important;
|
|
|
|
|
line-height: 44px !important;
|
|
|
|
|
border-radius: 50% !important;
|
|
|
|
|
background: rgba(255,255,255,0.9) !important;
|
|
|
|
|
display: flex !important;
|
|
|
|
|
align-items: center !important;
|
|
|
|
|
justify-content: center !important;
|
|
|
|
|
text-align: center !important;
|
|
|
|
|
font-size: 16px !important;
|
|
|
|
|
color: #ED1C24 !important;
|
|
|
|
|
text-decoration: none !important;
|
|
|
|
|
z-index: 10 !important;
|
|
|
|
|
visibility: visible !important;
|
|
|
|
|
opacity: 1 !important;
|
|
|
|
|
}
|
|
|
|
|
/* Ensure the icon pseudo-element renders */
|
|
|
|
|
.gallery-grid .icon-btn i,
|
|
|
|
|
.gallery-grid .icon-btn i::before {
|
|
|
|
|
display: inline-block !important;
|
|
|
|
|
visibility: visible !important;
|
|
|
|
|
opacity: 1 !important;
|
|
|
|
|
color: #ED1C24 !important;
|
|
|
|
|
font-family: 'Font Awesome 6 Free';
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
|
|
|
FIX 4: Navbar — desktop Services dropdown on click
|
|
|
|
|
Shows sub-menu when parent <li> has .th-active class
|
|
|
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
|
.header-layout5 .main-menu ul li.menu-item-has-children.th-active > ul.sub-menu {
|
|
|
|
|
display: grid !important;
|
|
|
|
|
opacity: 1 !important;
|
|
|
|
|
visibility: visible !important;
|
|
|
|
|
transform: translateY(0) !important;
|
|
|
|
|
pointer-events: auto !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
|
|
|
NEW SERVICE CARDS: image background with gradient overlay
|
|
|
|
|
— PC + mobile (global, not inside media query)
|
|
|
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
|
.service-block-new {
|
|
|
|
|
position: relative;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
height: 280px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.service-block-new .service-bg {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
display: block;
|
|
|
|
|
transition: transform 0.4s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.service-block-new:hover .service-bg {
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.service-block-new .service-overlay {
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
to top,
|
|
|
|
|
rgba(0, 0, 0, 0.9) 0%,
|
|
|
|
|
rgba(0, 0, 0, 0.5) 40%,
|
|
|
|
|
rgba(0, 0, 0, 0.1) 100%
|
|
|
|
|
);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.service-block-new .service-content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
padding: 24px;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.service-block-new .service-title {
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
margin: 0;
|
|
|
|
|
line-height: 1.3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.service-block-new .service-title a {
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.service-block-new .service-title a:hover {
|
|
|
|
|
color: #ED1C24;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── Mobile overrides for new service cards ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.service-block-new {
|
|
|
|
|
height: 220px;
|
|
|
|
|
}
|
|
|
|
|
.service-block-new .service-title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
.service-block-new .service-content {
|
|
|
|
|
padding: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── Service card text center ── */
|
|
|
|
|
.service-block-new .service-content {
|
|
|
|
|
text-align: center !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.service-block-new .service-title a {
|
|
|
|
|
display: block !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
|
|
|
STICKY NAVBAR: white frosted glass
|
|
|
|
|
- Overrides theme.css solid #0c0d0e bg
|
|
|
|
|
- White frosted + subtle shadow for PC view
|
|
|
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
|
.sticky-wrapper.sticky {
|
|
|
|
|
background: rgba(255, 255, 255, 0.85) !important;
|
|
|
|
|
backdrop-filter: blur(20px) !important;
|
|
|
|
|
-webkit-backdrop-filter: blur(20px) !important;
|
|
|
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
|
|
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Remove the solid bg behind logo div on sticky state */
|
|
|
|
|
.header-layout5 .sticky-wrapper.sticky .header-logo {
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── HEADER BUTTON: bigger Promist logo in navbar ── */
|
|
|
|
|
.header-layout5 .header-button img {
|
|
|
|
|
height: 40px !important;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
display: block !important;
|
|
|
|
|
margin: 0 auto !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ── Mobile sidebar: white frosted glass + dark text ── */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
/* Sidebar flyout: white frosted glass */
|
|
|
|
|
.th-menu-wrapper.th-body-visible .th-menu-area {
|
|
|
|
|
background: rgba(255, 255, 255, 0.9) !important;
|
|
|
|
|
backdrop-filter: blur(20px) !important;
|
|
|
|
|
-webkit-backdrop-filter: blur(20px) !important;
|
|
|
|
|
border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
|
|
|
|
|
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Mobile logo area: frosted to match sidebar */
|
|
|
|
|
.th-menu-wrapper .mobile-logo {
|
|
|
|
|
background: rgba(255, 255, 255, 0.8) !important;
|
|
|
|
|
backdrop-filter: blur(10px) !important;
|
|
|
|
|
-webkit-backdrop-filter: blur(10px) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Nav links: dark text on white sidebar */
|
|
|
|
|
.th-mobile-menu ul li a {
|
|
|
|
|
color: #1a1a2e !important;
|
|
|
|
|
}
|
|
|
|
|
.th-mobile-menu ul li li a {
|
|
|
|
|
color: #333 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Close button: subtle dark circle on frosted */
|
|
|
|
|
.th-menu-wrapper .th-menu-toggle {
|
|
|
|
|
background: rgba(0, 0, 0, 0.05) !important;
|
|
|
|
|
color: #333 !important;
|
|
|
|
|
}
|
|
|
|
|
.th-menu-wrapper .th-menu-toggle:hover {
|
|
|
|
|
background: rgba(0, 0, 0, 0.1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Overlay: lighter so frosted glass shows through */
|
|
|
|
|
.th-menu-wrapper {
|
|
|
|
|
background: rgba(0, 0, 0, 0.3) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── FROSTED GLASS: cascade to inner navbar elements ── */
|
|
|
|
|
/* .menu-wrap and its SVG-mask wings (::before/::after) have
|
|
|
|
|
solid background-color: var(--body-bg) (#E1E4E5) from
|
|
|
|
|
theme-main.css:6461-6484, which blocks the frosted glass
|
|
|
|
|
backdrop-filter on .sticky-wrapper.sticky from showing through.
|
|
|
|
|
Making them transparent reveals the frosted effect. */
|
|
|
|
|
.sticky-wrapper.sticky .menu-wrap,
|
|
|
|
|
.sticky-wrapper.sticky .menu-wrap::before,
|
|
|
|
|
.sticky-wrapper.sticky .menu-wrap::after {
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Ensure the .container inside sticky doesn't add its own bg */
|
|
|
|
|
.sticky-wrapper.sticky .container {
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Make nav and menu elements transparent so frosted glass shows through */
|
|
|
|
|
.sticky-wrapper.sticky .main-menu,
|
|
|
|
|
.sticky-wrapper.sticky .main-menu ul,
|
|
|
|
|
.sticky-wrapper.sticky .rakar-menu,
|
|
|
|
|
.sticky-wrapper.sticky .rakar-menu li {
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
|
|
|
LOGO COLOR FIX: Prevent any filter from making logo appear black
|
|
|
|
|
— Ensure the Profen logo always shows its natural red/white/cyan colors
|
|
|
|
|
— filter: none blocks inherited or accidentally applied filters
|
|
|
|
|
— No positioning/layout properties are changed
|
|
|
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
|
.header-layout5 .header-logo img {
|
|
|
|
|
-webkit-filter: none !important;
|
|
|
|
|
filter: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Also protect the mobile logo images */
|
|
|
|
|
.header-layout5 .menu-wrap .header-logo img,
|
|
|
|
|
.th-menu-wrapper .mobile-logo img {
|
|
|
|
|
-webkit-filter: none !important;
|
|
|
|
|
filter: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
