/*=====================================================
SIKKA - MOBILE RESPONSIVE CSS
Mobile Header with Slide-in Menu from Right Side
+ Full index.php mobile optimization
======================================================*/
/* ========================================
MOBILE HEADER & NAVIGATION
Slide-in menu from right side on mobile
========================================= */
/* Mobile Menu - Tablets and Below */
@media only screen and (max-width: 1199px) {
.fa-plus::before {
content: unset !important;
}
.footer-padding {
padding: 0px 15px !important;
}
.footer-padding {
.mb-3 {
margin-bottom: 0px;
}
.mt-30 {
margin-bottom: 0px !important;
}
}
.footer-bottom {
padding:0px 10px;
}
/* ===== HEADER LAYOUT ===== */
.site-header {
position: relative !important;
}
.header-fixed .header-nav .nav {
height: fit-content;
}
.main-bar {
padding: 10px 0 !important;
}
.main-bar .container {
padding: 0 15px;
}
.container-padding {
padding: 0 15px !important;
}
.about-card .text-center{
text-align: left !important;
}
/* ===== LOGO ===== */
.logo-header {
position: relative;
/* z-index: 1001; */
width: auto;
float: left;
}
.logo-header-inner img {
max-height: 50px !important;
width: auto !important;
}
/* ===== HAMBURGER TOGGLE BUTTON ===== */
.navbar-toggler {
position: relative;
z-index: 1002;
float: right;
background: transparent !important;
border: none !important;
padding: 10px !important;
margin-top: 5px !important;
margin-right: 0 !important;
cursor: pointer;
display: block !important;
}
.navbar-toggler .icon-bar {
display: block;
width: 28px;
height: 3px;
background-color: #ffffff !important; /* White when closed (hamburger) */
border-radius: 2px;
transition: all 0.3s ease;
}
.navbar-toggler .icon-bar + .icon-bar {
margin-top: 7px;
}
/* Hamburger Animation - Transform to X (menu open state) */
.navbar-toggler:not(.collapsed) .icon-bar {
background-color: #000000 !important; /* Black when open (cross/X state) */
}
.navbar-toggler:not(.collapsed) .icon-bar.bar-one {
transform: rotate(45deg) translate(7px, 7px);
}
.navbar-toggler:not(.collapsed) .icon-bar.bar-two {
opacity: 0;
transform: translateX(20px);
}
.navbar-toggler:not(.collapsed) .icon-bar.bar-three {
transform: rotate(-45deg) translate(7px, -7px);
}
/* ===== MOBILE MENU CONTAINER ===== */
.header-nav {
position: fixed !important;
top: 0;
right: -100% !important;
width: 85% !important;
max-width: 350px;
height: 100vh;
background: #ffffff !important;
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
overflow-y: auto;
overflow-x: hidden;
z-index: 1000 !important;
padding: 80px 0 30px 0 !important;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-overflow-scrolling: touch;
}
/* Show menu when toggled */
.header-nav.show {
right: 0 !important;
}
/* Menu overlay */
.header-nav::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
z-index: -1;
pointer-events: none;
}
.header-nav.show::before {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Close menu when clicking overlay */
.header-nav.show::before {
left: -100vw;
width: 100vw;
}
/* ===== NAVIGATION MENU ===== */
.header-nav .nav {
display: block !important;
float: none !important;
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
}
.header-nav .nav > li {
display: block !important;
width: 100% !important;
border-bottom: 1px solid #e8e8e8;
margin: 0 !important;
}
.header-nav .nav > li > a {
display: block !important;
padding: 15px 25px !important;
color: #2c3e50 !important;
font-size: 15px !important;
font-weight: 600 !important;
margin: 0 !important;
border-radius: 0 !important;
letter-spacing: 0.5px !important;
transition: all 0.3s ease;
}
.header-nav .nav > li > a:hover,
.header-nav .nav > li.active > a,
.header-nav .nav > li.current-menu-item > a {
background-color: #f8f9fa !important;
color: #87b040 !important;
}
/* ===== DROPDOWN SUBMENUS ===== */
.header-nav .nav > li.has-mega-menu > a {
position: relative;
padding-right: 45px !important; /* Make room for single icon */
}
/* NUCLEAR OPTION: Reset ALL pseudo-elements on menu items and links */
.header-nav .nav li::before,
.header-nav .nav li:before,
.header-nav .nav > li::before,
.header-nav .nav > li:before,
.header-nav .nav > li:hover::before,
.header-nav .nav > li:hover:before,
.header-nav .nav li a::before,
.header-nav .nav li a:before,
.header-nav .nav > li > a::before,
.header-nav .nav > li > a:before,
.header-nav .nav > li.has-mega-menu > a::before,
.header-nav .nav > li.has-mega-menu > a:before,
.header-nav .nav li.has-mega-menu > a::before,
.header-nav .nav li.has-mega-menu > a:before,
.header-nav .nav > li::after,
.header-nav .nav > li:after {
content: "" !important;
content: none !important;
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
/* FORCE OVERRIDE: Only FontAwesome chevron on dropdown items */
/* This overrides dropdown-final-fix.css line 108-112 which adds "▼" */
.header-nav .nav > li.has-mega-menu > a::after,
.header-nav .nav > li.has-mega-menu > a:after,
.header-nav .nav li.has-mega-menu > a::after,
.header-nav .nav li.has-mega-menu > a:after,
.header-nav.navbar-collapse .nav > li.has-mega-menu > a::after,
.header-nav.navbar-collapse .nav > li.has-mega-menu > a:after,
.header-nav.navbar-collapse.collapse .nav > li.has-mega-menu > a::after,
.header-nav.navbar-collapse.collapse .nav > li.has-mega-menu > a:after {
content: '\f107' !important;
font-family: 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 5 Pro' !important;
font-weight: 900 !important;
position: absolute !important;
right: 20px !important;
top: 50% !important;
left: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
-webkit-transform: translateY(-50%) !important;
transition: transform 0.3s ease !important;
font-size: 16px !important;
margin: 0 !important;
margin-left: 0 !important;
padding: 0 !important;
display: inline-block !important;
line-height: 1 !important;
width: auto !important;
height: auto !important;
text-align: center !important;
color: inherit !important;
background: none !important;
}
/* Remove list style bullets */
.header-nav .nav > li,
.header-nav .nav > li.has-mega-menu {
list-style: none !important;
list-style-type: none !important;
}
.header-nav .nav {
list-style: none !important;
}
.header-nav .nav > li.has-mega-menu.show > a::after,
.header-nav .nav > li.has-mega-menu:active > a::after,
.header-nav .nav > li.has-mega-menu:focus-within > a::after,
.header-nav .nav li.has-mega-menu.show > a:after {
transform: translateY(-50%) rotate(180deg) !important;
}
/* Hide submenus by default - USE MAX-HEIGHT TECHNIQUE */
.header-nav .nav > li .sub-menu,
.header-nav .nav > li .mega-menu {
position: static !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
max-height: 0 !important;
overflow: hidden !important;
box-shadow: none !important;
background: #f8f9fa !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Show submenu when parent has 'show' class */
.header-nav .nav > li.has-mega-menu.show > .sub-menu,
.header-nav .nav > li.has-mega-menu.show > .mega-menu {
max-height: 3000px !important;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Fallback: Force display submenus on mobile even without JS */
.header-nav .nav > li.has-mega-menu:active > .sub-menu,
.header-nav .nav > li.has-mega-menu:active > .mega-menu {
max-height: 3000px !important;
}
/* Submenu items */
.header-nav .nav > li .sub-menu li,
.header-nav .nav > li .mega-menu > li {
display: block !important;
width: 100% !important;
border-bottom: 1px solid #e0e0e0 !important;
padding: 0 !important;
margin: 0 !important;
}
.header-nav .nav > li .sub-menu li a,
.header-nav .nav > li .mega-menu li a {
display: block !important;
padding: 12px 25px 12px 40px !important;
color: #555 !important;
font-size: 14px !important;
font-weight: 500 !important;
border: none !important;
background: transparent !important;
position: relative !important;
}
.header-nav .nav > li .sub-menu li a:hover,
.header-nav .nav > li .mega-menu li a:hover {
background: #fff !important;
color: #87b040 !important;
padding-left: 45px !important;
}
/* Nested submenus - Mobile Click Support */
/* Second level: Projects submenu items (Residential, Commercial, etc.) */
.header-nav .nav > li .sub-menu li .sub-menu {
position: static !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
max-height: 0 !important;
overflow: hidden !important;
background: #fff !important;
padding: 0 !important;
margin: 0 !important;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
border-left: 3px solid #87b040 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
}
/* Show nested submenu when parent li has 'show' class */
.header-nav .nav > li .sub-menu li.show > .sub-menu,
.header-nav .nav > li .sub-menu li.has-submenu.show > .sub-menu {
max-height: 2000px !important;
padding: 5px 0 !important;
}
/* Nested submenu items styling */
.header-nav .nav > li .sub-menu li .sub-menu li {
border-bottom: 1px solid #e0e0e0 !important;
}
.header-nav .nav > li .sub-menu li .sub-menu li a {
padding-left: 55px !important;
font-size: 13px !important;
background: #fafafa !important;
color: #555 !important;
}
.header-nav .nav > li .sub-menu li .sub-menu li a:hover {
background: #fff !important;
color: #87b040 !important;
padding-left: 60px !important;
}
/* Third level nested submenus (if needed for project pages) */
.header-nav .nav > li .sub-menu li .sub-menu li .sub-menu {
max-height: 0 !important;
overflow: hidden !important;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
background: #f5f5f5 !important;
}
.header-nav .nav > li .sub-menu li .sub-menu li.show > .sub-menu {
max-height: 1500px !important;
}
.header-nav .nav > li .sub-menu li .sub-menu li .sub-menu li a {
padding-left: 70px !important;
font-size: 12px !important;
background: #f5f5f5 !important;
}
/* Add arrow indicator for items with submenus */
/* Important: Mark items that have children with chevron */
.header-nav .nav .sub-menu li.has-submenu > a {
position: relative !important;
padding-right: 45px !important; /* Make room for chevron */
}
/* Chevron arrow for submenu items that have children */
.header-nav .nav .sub-menu li.has-submenu > a::after {
content: '\f107' !important;
font-family: 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 5 Pro' !important;
font-weight: 900 !important;
position: absolute !important;
right: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
transition: transform 0.3s ease !important;
color: #87b040 !important;
font-size: 14px !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
}
/* Rotate chevron when submenu is open */
.header-nav .nav .sub-menu li.has-submenu.show > a::after {
transform: translateY(-50%) rotate(180deg) !important;
}
/* Mega menu adjustments */
.header-nav .nav > li .mega-menu > li {
vertical-align: top !important;
}
.header-nav .nav > li .mega-menu > li::after {
display: none !important;
}
.header-nav .nav > li .mega-menu > li > a {
font-weight: 600 !important;
color: #2c3e50 !important;
padding: 12px 25px 12px 40px !important;
}
.header-nav .nav > li .mega-menu > li ul {
margin: 0 !important;
padding: 0 !important;
}
.header-nav .nav > li .mega-menu > li ul a {
padding-left: 55px !important;
}
/* ===== EXTRA NAV ===== */
.extra-nav {
display: none !important;
}
/* ===== HIDE DESKTOP ELEMENTS ===== */
#search {
display: none !important;
}
/* ===== ADDITIONAL SUBMENU FIXES ===== */
/* Ensure submenus can be interacted with */
.header-nav .nav > li.has-mega-menu > a {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* Prevent default link behavior for dropdown parents on mobile */
.header-nav .nav > li.has-mega-menu > a[href="javascript:;"],
.header-nav .nav > li.has-mega-menu > a[href="#"] {
pointer-events: auto !important;
}
/* Make sure submenu items are fully visible */
.header-nav .nav > li .sub-menu,
.header-nav .nav > li .mega-menu {
left: 0 !important;
right: 0 !important;
}
/* ===== SCROLLBAR STYLING ===== */
.header-nav::-webkit-scrollbar {
width: 6px;
}
.header-nav::-webkit-scrollbar-track {
background: #f1f1f1;
}
.header-nav::-webkit-scrollbar-thumb {
background: #87b040;
border-radius: 3px;
}
.header-nav::-webkit-scrollbar-thumb:hover {
background: #6a8f30;
}
}
/* ========================================
SMALLER MOBILE ADJUSTMENTS (max-width: 575px)
========================================= */
@media only screen and (max-width: 575px) {
.logo-header-inner img {
max-height: 45px !important;
}
.navbar-toggler .icon-bar {
width: 25px;
height: 2.5px;
}
.header-nav {
width: 90% !important;
max-width: 100% !important;
}
.header-nav .nav > li > a {
font-size: 14px !important;
padding: 14px 20px !important;
}
.header-nav .nav > li .sub-menu li a,
.header-nav .nav > li .mega-menu li a {
font-size: 13px !important;
padding: 11px 20px 11px 35px !important;
}
.header-nav .nav > li .sub-menu li .sub-menu li a,
.header-nav .nav > li .mega-menu > li ul a {
padding-left: 50px !important;
font-size: 12px !important;
}
.popup-content-load{
padding:15px !important;
}
/* .close-btn-load {
padding: 0px 15px;
} */
p,.paragraph-bottom,.paragraph-margin-top{
text-align: justify !important;
letter-spacing: 0px !important;
}
}
/* ========================================
FIX FOR BODY SCROLL WHEN MENU IS OPEN
========================================= */
@media only screen and (max-width: 1199px) {
body.mobile-menu-open {
overflow: hidden;
position: fixed;
width: 100%;
}
}
/* ========================================
INDEX.PHP - MOBILE RESPONSIVE CSS
========================================= */
/* TABLETS AND BELOW (max-width: 1199px) */
@media only screen and (max-width: 1199px) {
.about-heading {
font-size: 28px !important;
}
.about-subheading {
font-size: 24px !important;
line-height: 32px !important;
}
.projects-container-padding {
padding: 60px 30px !important;
}
}
/* TABLETS PORTRAIT (max-width: 991px) */
@media only screen and (max-width: 991px) {
.about-container-padding,
.about-container-padding-2 {
padding: 50px 20px !important;
}
.experience-container-padding {
padding: 50px 20px !important;
}
.projects-container-padding {
padding: 50px 20px !important;
}
.about-heading {
font-size: 26px !important;
}
.about-subheading {
font-size: 22px !important;
line-height: 30px !important;
}
.slider-heading {
font-size: 42px !important;
line-height: 50px !important;
}
.counter-points-padding {
margin-top: 30px;
}
.experience-supoints {
padding: 25px 15px !important;
}
.button,
.button-2,
.button-3 {
padding: 12px 25px !important;
font-size: 14px !important;
}
.buttons-flex {
flex-wrap: wrap;
gap: 10px;
}
.project-button {
padding: 10px 20px !important;
font-size: 14px !important;
}
}
/* MOBILE LANDSCAPE & BELOW (max-width: 767px) */
@media only screen and (max-width: 767px) {
.future-section-heading {
margin-top: 18px !important;
}
/* Typography */
.about-heading {
font-size: 24px !important;
margin-bottom: 15px !important;
}
.about-subheading {
font-size: 20px !important;
line-height: 28px !important;
margin-bottom: 15px !important;
}
.perfect-heading {
font-size: 24px !important;
line-height: 32px !important;
}
h2#ar {
font-size: 24px !important;
margin-left: 0 !important;
}
h3.text-center.count-bottom.roboto {
font-size: 15px !important;
}
.inter-2,
.paragraph-bottom,
.paragraph-new {
font-size: 14px !important;
line-height: 22px !important;
}
p#area {
font-size: 14px !important;
padding: 8px !important;
margin-top: -3 !important;
}
.perfect-paragraph {
font-size: 14px !important;
line-height: 22px !important;
padding: 0px !important;
}
/* Container Padding */
.about-container-padding,
.about-container-padding-2 {
padding: 40px 15px !important;
}
.experience-container-padding {
padding: 40px 15px !important;
}
.projects-container-padding {
padding: 40px 15px !important;
}
.counter-points-padding {
padding: 5px !important;
margin-top: 30px;
}
.client-padding {
padding: 10px 5px !important;
}
/* Client Slider Section - 3 Logos Per Row on Mobile */
.client-padding .mySwiper {
min-height: auto !important;
height: auto !important;
padding: 0 !important;
}
.client-padding .row {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
margin: 0 !important;
align-items: stretch !important;
gap: 0 !important;
padding: 0 !important;
}
/* Override Bootstrap column behavior for client logos - CRITICAL for 3 per row */
.client-padding .row .col-md-3,
.client-padding swiper-slide .row .col-md-3,
.client-padding .col-md-3 {
/* flex: 0 0 33.333% !important;
max-width: 33.333% !important; */
width: 31.333% !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
.client-logo-img {
padding: 8px !important;
margin: 2px !important;
min-height: 85px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #d0d0d0 !important;
}
.client-logo-img img {
max-width: 100%;
width: auto !important;
height: auto !important;
max-height: 45px !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto !important;
}
.form-padding {
/* padding: 30px 20px !important; */
padding: 0px 20px !important;
}
/* Margins */
.paragraph-margin-top {
margin-top: 15px !important;
}
.card-margin {
margin-bottom: 20px !important;
}
.button-margin,
.button-margin-2 {
margin-top: 20px !important;
}
.customer-padding {
padding: 15px 0 !important;
}
/* Slider */
.slider-heading {
font-size: 32px !important;
line-height: 40px !important;
}
.slider-text-outline {
font-size: 60px !important;
opacity: 0.3 !important;
}
.tp-caption.tp-resizeme[id*="-layer-2"] {
display: block !important;
}
/* About Section */
.about-card {
padding: 15px !important;
margin-top: 15px !important;
}
.about-card .col-md-2 {
margin-bottom: 10px;
text-align: left !important;
}
.about-card img {
width: 50px !important;
}
.about-container-padding .row > .col-md-6:last-child {
margin-top: 30px;
}
/* Video Section */
.video-container-2 {
height: 250px !important;
min-height: 250px !important;
}
.video-container-2 video {
object-fit: cover;
height: 100%;
}
/* Experience Section */
.expeirnce-card {
padding: 20px 15px !important;
margin-bottom: 0px;
}
.expeirnce-card .align-items-center{
align-items: left !important;
}
.experience-img {
width: 100% !important;
/* max-width: 300px; */
margin: 0 auto 20px;
display: block;
height: 293px !important;
}
.expeirnce-card .row .col-md-6:first-child {
margin-bottom: 20px;
}
.expeirnce-card h4 {
font-size: 20px !important;
text-align: left;
}
.expeirnce-card p {
text-align: left;
}
.mt-minus{
margin-top: -45px;
}
.mt-minus .text-end{
text-align:left !important;
}
.text-end{
text-align: left !important;
}
/* Counter Section - 2x2 Grid Layout */
.counter-card-row {
padding: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
position: relative !important;
}
.experience-supoints {
padding: 30px 15px !important;
width: 50% !important;
max-width: 50% !important;
flex: 0 0 50% !important;
border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/* Remove right border on even items (2nd and 4th) */
.experience-supoints:nth-child(2),
.experience-supoints:nth-child(4) {
border-right: none !important;
}
/* Remove bottom border on last row (3rd and 4th items) */
.experience-supoints:nth-child(3),
.experience-supoints:nth-child(4) {
border-bottom: none !important;
}
.counter-border-left,
.counter-border-bottom,
.counter-border-left-2 {
/* Borders handled by nth-child above */
}
.center-circle {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
width: 140px !important;
height: 140px !important;
z-index: 10 !important;
background: #87b040 !important;
border: 3px solid #ffffff !important;
border-radius: 50% !important;
}
.count-bottom {
font-size: 28px !important;
}
.count-sub-transform {
font-size: 14px !important;
}
/* Projects Section */
.projects-container-padding .row.align-items-center > .col-md-4 {
margin-bottom: 20px;
text-align: center;
}
.projects-container-padding .row.align-items-center > .col-md-4 h2 {
font-size: 24px !important;
}
.buttons-flex {
display: flex;
/* flex-direction: column !important; */
justify-content: center;
gap: 10px;
padding: 0 !important;
}
.project-button,
.project-button-new {
width: 100% !important;
text-align: center;
padding: 12px 20px !important;
font-size: 15px !important;
margin: 0 !important;
}
.project-content {
margin-top: 20px;
}
.project-content .col-md-4,
.project-content .col-md-8 {
margin-bottom: 15px !important;
}
.project-image-wrapper {
height: 250px !important;
overflow: hidden;
}
.project-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.project-title {
font-size: 18px !important;
}
/* Buttons */
.button,
.button-2,
.button-3 {
padding: 12px 25px !important;
font-size: 14px !important;
width: auto !important;
display: inline-block;
}
.btn-txt,
.btn-txt-2,
.btn-txt-3 {
font-size: 14px !important;
}
.submit-button {
width: 100% !important;
padding: 12px 20px !important;
font-size: 14px !important;
}
/* Background Image Section */
.bg-image {
padding: 60px 15px !important;
background-attachment: scroll !important;
}
/* Client section styles moved to line 717 to avoid duplication */
.about-container-padding .row > .col-md-6,
.about-container-padding .row > .col-lg-6 {
margin-bottom: 20px !important;
}
/* Reverse order for Our Brands section - show slider first on mobile */
.about-container-padding-2 .row {
display: flex !important;
/* flex-direction: column-reverse !important; */
}
.about-container-padding-2 .client-padding {
order: 1 !important;
}
.about-container-padding-2 .text-end {
order: 2 !important;
text-align: center !important;
margin-bottom: 20px !important;
}
swiper-container {
padding: 15px 0 !important;
height: auto !important;
min-height: auto !important;
}
swiper-slide {
height: auto !important;
min-height: auto !important;
display: flex !important;
align-items: center !important;
}
/* Brands Section */
.about-container-padding-2 .text-end {
text-align: left !important;
}
/* Testimonials Section */
.testimonail-card {
padding: 20px 15px !important;
margin: 10px 0 !important;
}
.testimonial-img-radius {
width: 60px !important;
height: 60px !important;
margin-bottom: 10px;
}
.testimonial-heading-position {
font-size: 14px !important;
}
.testimonial-name {
font-size: 16px !important;
}
.testimonails-row {
gap: 10px;
}
.marquee-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Slow down marquee animation on mobile */
.marquee-content {
animation: marquee-animation 40s linear infinite !important;
}
/* Enquiry Popup */
.popup-load {
/* padding: 20px 15px !important; */
padding: 0px 15px !important;
}
.popup-content-load {
max-width: 95% !important;
margin: 20px auto !important;
/* max-height: 90vh; */
/*overflow-y: auto;*/
}
.popup-content-load .row > .col-md-6:first-child {
display: none;
}
.enquiry-heading {
font-size: 20px !important;
/* margin-bottom: 20px !important; */
margin-bottom: 0px !important;
}
.input-width {
width: 100% !important;
/* margin-bottom: 15px !important; */
margin-bottom: 5px !important;
padding: 10px 12px !important;
font-size: 14px !important;
}
.close-btn-load {
top: 10px !important;
right: 10px !important;
/* font-size: 30px !important; */
}
/* Fix Bootstrap columns */
.row {
margin-left: -10px;
margin-right: -10px;
}
[class*="col-"] {
padding-left: 10px;
padding-right: 10px;
}
.container-fluid .row {
margin-left: -15px;
margin-right: -15px;
}
.container-fluid [class*="col-"] {
padding-left: 15px;
padding-right: 15px;
}
/* Image fixes */
img {
max-width: 100%;
height: auto;
}
.project-image,
.experience-img,
.client-logo-img img {
width: 100%;
height: auto;
}
/* Revolution Slider */
.rev_slider_wrapper {
min-height: 400px !important;
}
.rev_slider {
min-height: 400px !important;
}
.tp-caption.tp-resizeme {
white-space: normal !important;
}
/* Touch improvements */
a,
button,
.button,
.button-2,
.button-3,
.project-button {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select {
min-height: 44px;
font-size: 16px !important;
}
.project-button + .project-button {
margin-top: 10px;
}
.client-padding{
margin-top: 25px;
}
}
/* MOBILE PORTRAIT (max-width: 575px) */
@media only screen and (max-width: 575px) {
.about-heading {
font-size: 22px !important;
}
.rev-sm{
flex-direction: column-reverse !important;
}
.about-subheading {
font-size: 18px !important;
line-height: 26px !important;
}
.slider-heading {
font-size: 28px !important;
line-height: 36px !important;
}
.perfect-heading {
font-size: 20px !important;
line-height: 28px !important;
}
.about-container-padding,
.about-container-padding-2,
.experience-container-padding,
.projects-container-padding {
padding: 30px 15px !important;
}
.video-container-2 {
height: 100% !important;
min-height: 142px !important;
}
.center-circle {
width: 160px !important;
height: 160px !important;
}
.count-bottom {
font-size: 24px !important;
}
h2#ar {
font-size: 20px !important;
}
h2#ar span {
font-size: 16px !important;
}
.project-image-wrapper {
height: 220px !important;
}
.button,
.button-2,
.button-3 {
padding: 10px 20px !important;
font-size: 13px !important;
}
.testimonail-card {
padding: 15px !important;
min-width: 280px;
margin-right: 0 !important;
margin-left: 0 !important;
}
.testimonial-name {
font-size: 15px !important;
}
.testimonial-heading-position {
font-size: 13px !important;
}
.about-container-padding .row > .col-md-6:last-child {
margin-top: -10px;
}
}
/* ====================================================
Testimonial Marquee - Fix card collapse at all sizes
==================================================== */
/* Prevent cards from wrapping to next line */
.marquee-content {
flex-wrap: nowrap;
}
/* Force fixed width on every card column regardless of Bootstrap breakpoint */
.testimonails-row > .col-md-3 {
flex: 0 0 auto !important;
width: 320px !important;
max-width: 320px !important;
min-width: 320px !important;
}
.testimonail-card {
min-width: 290px !important;
width: 100% !important;
box-sizing: border-box;
}
@media (max-width: 767px) {
.testimonails-row > .col-md-3 {
width: 280px !important;
max-width: 280px !important;
min-width: 280px !important;
}
.testimonail-card {
min-width: 255px !important;
}
}
@media (max-width: 480px) {
.testimonails-row > .col-md-3 {
width: 250px !important;
max-width: 250px !important;
min-width: 250px !important;
}
.testimonail-card {
min-width: 225px !important;
}
}
/* SMALL MOBILE (max-width: 480px) */
@media only screen and (max-width: 480px) {
.about-heading {
font-size: 20px !important;
}
.about-subheading {
font-size: 17px !important;
line-height: 24px !important;
}
.slider-heading {
font-size: 24px !important;
line-height: 32px !important;
}
.inter-2 {
font-size: 13px !important;
line-height: 20px !important;
}
.about-container-padding,
.about-container-padding-2,
.experience-container-padding,
.projects-container-padding {
padding: 25px 20px !important;
}
.center-circle {
width: 140px !important;
height: 140px !important;
}
.center-circle img {
width: 40px !important;
}
.count-bottom {
font-size: 20px !important;
}
p#area {
font-size: 12px !important;
}
.project-image-wrapper {
height: 200px !important;
}
.project-title {
font-size: 16px !important;
}
.popup-content-load {
max-width: 98% !important;
margin: 10px auto !important;
}
.form-padding {
padding: 0px 15px !important;
}
}
/* VERY SMALL MOBILE (max-width: 375px) */
@media only screen and (max-width: 375px) {
.about-heading {
font-size: 18px !important;
}
.about-subheading {
font-size: 16px !important;
line-height: 22px !important;
}
.slider-heading {
font-size: 22px !important;
line-height: 28px !important;
}
.perfect-heading {
font-size: 18px !important;
line-height: 24px !important;
}
.about-container-padding,
.about-container-padding-2,
.experience-container-padding,
.projects-container-padding {
padding: 20px 20px !important;
}
.center-circle {
width: 130px !important;
height: 130px !important;
}
.count-bottom {
font-size: 18px !important;
}
.count-sub-transform {
font-size: 12px !important;
}
h2#ar {
font-size: 18px !important;
}
.button,
.button-2,
.button-3 {
padding: 10px 18px !important;
font-size: 12px !important;
}
.project-button {
padding: 10px 15px !important;
font-size: 13px !important;
}
.about-card img {
width: 40px !important;
}
/* .experience-img {
max-width: 150px !important;
} */
.project-image-wrapper {
height: 180px !important;
}
.video-container-2 {
height: 100% !important;
min-height: 112px !important;
}
}
/* LANDSCAPE ORIENTATION */
@media only screen and (max-height: 500px) and (orientation: landscape) {
.video-container-2 {
height: 180px !important;
}
.slider-heading {
font-size: 24px !important;
line-height: 30px !important;
}
.about-container-padding,
.about-container-padding-2,
.experience-container-padding,
.projects-container-padding {
padding: 25px 15px !important;
}
}
/* UTILITY CLASSES */
@media only screen and (max-width: 767px) {
.hide-mobile {
display: none !important;
}
.mobile-text-center {
text-align: center !important;
}
.mobile-full-width {
width: 100% !important;
}
}
/* PERFORMANCE OPTIMIZATIONS */
@media only screen and (max-width: 767px) {
* {
-webkit-animation-duration: 0.5s !important;
animation-duration: 0.5s !important;
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
#welcome_wrapper{
height: 400px !important;
}
.tp-fullwidth-forcer{
height:400px !important;
}
}
html{
overflow-x: hidden !important;
}
@media (max-width:478px) {
p#area {
margin-top: -3px;
}
}
/* ====================================================
Feature Section - Fix image overlap on mobile
==================================================== */
@media (max-width: 767px) {
.feature-category-row {
flex-direction: column !important;
}
.feature-category-row .col-md-6 {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
.feature-category-row .feature-image {
order: -1 !important; /* image always above content on mobile */
}
.img-width2 {
height: 220px !important;
}
.construction-padding .col-md-4 > a {
width: 100% !important;
}
}
@media (max-width: 480px) {
.img-width2 {
height: 180px !important;
}
.construction-padding .col-md-4 > a {
width: 100%;
}
.construction-padding {
padding: 40px 0;
}
}
/* =========================================================================
TABLET BAND FIXES (768px - 1199px)
This range was effectively unstyled: the phone rules stop at 767px and the
desktop step-downs start at 1200px, while Bootstrap's col-md-* grid turns
on at 768px. Verified against the pre-optimisation commit - these are
long-standing issues, not regressions from the performance work.
========================================================================= */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
/* .customer-padding has a global `padding: 0 500px`, with step-downs only
for 1200-1499px and an override at <=767px. In between, a ~1000px wide
box got 500px of padding on each side, leaving the heading 0px of
content width - so "What Our Customers Say About Us" broke one word per
line on iPad Pro. */
.customer-padding {
padding: 0 15px !important;
}
/* "Why Choose Us" nests a col-md-6 pair inside each half of an outer
col-md-6 pair, so across this band every text column collapsed to a
quarter of the page - about 166px at 768px, which wrapped the body copy
to ten lines, broke the shaped buttons onto two lines and let the
"40 Years Of Excellence" badge overlap the counter cells.
Stacking the two outer halves gives the inner columns ~half the page. */
.expeirnce-card,
.counter-points-padding {
flex: 0 0 100%;
max-width: 100%;
}
}
/* -------------------------------------------------------------------------
768px - 991px only: col-md-6 paired with col-lg-6
The "Our Clients" and "Our Brands" sections put the text in a col-md-6 but
the logo grid in a col-lg-6. Those switch at different breakpoints - md at
768px, lg at 992px - so across this band the logo grid is full width while
the text column is still stuck at 50%, leaving half a row of dead space
beside a 368px column of nine-line paragraphs (seen on iPad Air 820px).
Give the text column the full row too, so the two stack cleanly.
------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
.rev-sm > .col-md-6,
.about-container-padding-2 .row > .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
}
/* The logo grid inside each slide is a .row.justify-content-end. Six
col-md-3 cells are 189px plus a ~20px gutter, so only three fit per row
and all 128px of leftover width collects on one side - the grid sat
139px in from the left edge and looked unaligned. Align it to the start
instead, so it lines up with the left-aligned heading and paragraph
above it. flex-start rather than start: identical result here, wider
support. */
.client-padding .justify-content-end {
justify-content: flex-start !important;
}
/* "Our Brands" is .text-end so it mirrors "Our Clients" in the desktop
two-column layout. Once the columns stack, right-aligning a heading and
paragraph across the full width reads as broken, so align it with the
Clients block above it. */
.about-container-padding-2 .row > .col-md-6.text-end,
.about-container-padding-2 .row > .col-md-6.text-end * {
text-align: left;
}
/* In the desktop mirror layout "Our Brands" puts its logo grid first in
the DOM and the heading second. Once stacked that leaves the heading
orphaned underneath the logos it is meant to label, and the two logo
grids butt up against each other. Reverse it so this section reads
heading -> logos, the same way "Our Clients" above it does. */
.about-container-padding-2 .row.align-items-center {
flex-direction: column-reverse;
}
/* Stacking removed the horizontal gutter without introducing a vertical
one, so the logo grid sat flush against the paragraph above it.
row-gap spaces the stacked items without leaving a trailing margin
under the last one, and it works whether the row wraps normally or is
flipped with column-reverse. */
.rev-sm,
.about-container-padding-2 .row.align-items-center {
row-gap: 40px;
}
}
/* -------------------------------------------------------------------------
768px - 1199px: background video strip
.video-container-2 has a global height of 600px with step-downs for
1200-1499px and an override to 250px plus object-fit:cover at <=767px.
Nothing covered the band in between, so it kept the full 600px while the
video stayed object-fit:contain. The clip is 1280x480, so at 805px wide it
only filled 302px and the remaining ~298px showed as empty space split
above and below it.
Letting the height follow the clip's own 8:3 ratio removes the gap without
cropping, and lands on 450px at 1199px - exactly where the 1200-1299px
rule picks up, so the transition is seamless. cover matches how the strip
already behaves on phones.
------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.video-container-2 {
height: auto !important;
aspect-ratio: 8 / 3;
}
.video-container-2 video {
object-fit: cover;
height: 100%;
}
}
/* -------------------------------------------------------------------------
768px - 991px: profile page "Business Excellence" block
.profile-highlights-section lays out three col-md-4 columns - image, body
copy, and a stats grid. At 820px that is 265px per column, and the stats
grid nests col-md-6 cells inside its col-md-4, which comes out at 132px a
cell. Labels were genuinely being cut off ("Years of Experience" needed
87px in a 62px box) and the body copy is text-justify, which at 235px wide
stretched the word spacing into the gaps that were reported.
Stacking the three columns gives the copy and the stats grid the full row,
which fixes the clipping and makes the justified text sit on a normal
measure.
Carried up to 1199px rather than 991px: at 1024 (iPad Pro portrait) the
columns are still only 293px and the stat cells 146px, and labels were
measurably clipped there too. From 1200px the cells reach 176px and the
section holds together, so that is where the override stops.
------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.profile-highlights-section > .container-fluid > .row > .col-md-4 {
flex: 0 0 100%;
max-width: 100%;
}
/* Same as above: once the three columns stack they need vertical spacing,
otherwise the image sits flush on top of the "Business Excellence"
heading. */
.profile-highlights-section > .container-fluid > .row {
row-gap: 40px;
}
}
/* -------------------------------------------------------------------------
768px - 991px: customer-speak review cards
The reviews are six col-md-4 cards, so three per row. In this band the
Bootstrap container caps at 720px, which leaves 240px per column; the card
then takes 30px of padding on each side and the review text ends up 150px
wide, running to fourteen lines. Even "Silky Verma" wrapped onto two lines
and the cards grew to 663px tall.
Two per row gives the text roughly 270px and brings the cards back in line
with how they read on desktop. From 992px the container jumps to 960px and
three across is comfortable again, so the override stops there.
------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
.customer-testimonials-section .row-equal-height > .col-md-4 {
flex: 0 0 50%;
max-width: 50%;
}
}
/* ==========================================================================
Enquiry popup
The fields used to be stacked full width with
between them, which
made the form taller than the viewport - the captcha and the submit button
sat below the fold. They are now laid out two to a row, so the whole form
is visible without scrolling.
Loaded last, so !important is only used where an earlier rule in this file
already used it.
========================================================================== */
.popup-load {
overflow-y: auto;
}
/* While the popup is open the page behind it must not scroll or keep its own
scrollbar. html carries overflow-x:hidden/overflow-y:auto here, which makes
it the scroll container - body's overflow no longer propagates to the
viewport, so the lock has to be set on both. The padding that replaces the
bar's width is set from script. */
html.popup-open,
body.popup-open {
overflow: hidden !important;
}
/* Centred rather than pushed down from the top: a margin only offsets the
panel, it does not centre it, so the space left underneath was always
larger than the space above. The overlay becomes a flex container while it
is open and centres the panel on both axes. Its padding sets the minimum
gap, and 4vh + 92vh + 4vh is exactly one viewport, so the overlay itself
never has more than it can show. (A percentage margin was doing this job
before, which was worse still - percentage margins resolve against the
containing block's width, so on a wide short window they were far taller
than the room available.) */
.popup-load.is-open {
display: flex !important;
align-items: center;
justify-content: center;
padding: 4vh 15px !important;
}
.popup-load.is-open > .popup-content-load {
margin: 0 auto !important;
width: 100%;
}
.popup-content-load {
max-width: 900px;
max-height: 92vh;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
.popup-content-load > .row {
margin: 0;
align-items: stretch;
}
/* The image is decorative - let it fill its half rather than stretch. */
.enquiry-visual {
overflow: hidden;
}
.enquiry-visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.form-padding {
padding: 30px 32px;
max-height: 92vh;
overflow-y: auto;
}
.enquiry-heading {
font-size: 26px;
line-height: 1.2;
margin: 0 0 6px;
color: #1c1c1c;
}
.enquiry-heading + .enquiry-sub,
.enquiry-heading {
letter-spacing: 0.2px;
}
/* Small brand rule under the heading. */
.form-padding .enquiry-heading::after {
content: "";
display: block;
width: 44px;
height: 3px;
margin-top: 10px;
background: #87b040;
border-radius: 2px;
}
.enquiry-grid {
display: grid;
/* minmax(0, ...) rather than a bare 1fr: a plain 1fr will not shrink below
its content's minimum, so a long value in one input could take width
from the field beside it and leave the pair visibly uneven. */
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 18px;
row-gap: 16px;
margin: 20px 0 18px;
align-items: start;
}
.enquiry-field {
display: flex;
flex-direction: column;
min-width: 0;
}
/* Name and Mobile No share the first row; Email and Message take one each. */
.enquiry-field--full {
grid-column: 1 / -1;
}
.enquiry-field label {
font-size: 13px;
font-weight: 600;
color: #4a4a4a;
margin: 0 0 6px;
}
.enquiry-grid .input-width {
width: 100%;
padding: 11px 13px;
font-size: 14px;
color: #1c1c1c;
background: #fbfbfb;
border: 1px solid #dcdcdc;
border-radius: 6px;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.enquiry-grid .input-width::placeholder {
color: #a2a2a2;
}
.enquiry-grid .input-width:focus {
background: #ffffff;
border-color: #87b040;
box-shadow: 0 0 0 3px rgba(135, 176, 64, 0.16);
}
.enquiry-grid textarea.input-width {
min-height: 88px;
resize: vertical;
}
.enquiry-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
.enquiry-footer .g-recaptcha {
margin: 0;
}
/* The widget declares its anchor box as 304x78 but does not clip it, so when
it renders an error panel (an unrecognised domain, for instance) a 450px
iframe spills out and drags a scrollbar into the form column. Clipping the
box it already sized itself changes nothing when the widget is healthy. */
.enquiry-footer .g-recaptcha > div {
overflow: hidden;
}
.form-padding .submit-button {
padding: 11px 34px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.form-padding .submit-button:hover {
background: #759a35;
border-color: #759a35;
box-shadow: 0 6px 16px rgba(135, 176, 64, 0.35);
}
.close-btn-load {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
line-height: 1;
font-size: 20px;
border-radius: 50%;
}
/* Below the column breakpoint the image is dropped and the fields go back to
one per row - two columns of inputs are too narrow to be usable there. */
@media only screen and (max-width: 767px) {
.enquiry-visual {
display: none !important;
}
/* Name and Mobile No stay paired here too - they are short fields, and
giving each its own row made the form 88px taller than the panel could
show on a 560px-tall phone. Email and Message keep their full width
through .enquiry-field--full. */
.enquiry-grid {
column-gap: 12px;
row-gap: 10px;
margin: 14px 0 12px;
}
.form-padding {
padding: 20px !important;
}
.enquiry-heading {
font-size: 21px !important;
}
.enquiry-grid .input-width {
margin-bottom: 0 !important;
padding: 10px 12px !important;
}
.enquiry-grid textarea.input-width {
min-height: 72px;
}
/* The captcha widget has a fixed 302px width; scale it to fit a narrow
column instead of letting it overflow the popup. */
.enquiry-footer {
gap: 12px;
}
.enquiry-footer .g-recaptcha {
transform: scale(0.86);
transform-origin: left center;
height: 66px;
}
}
/* Short phone screens (a small handset, or any phone with the browser UI
expanded). The layout above still needs about 44px more than a 360x500
viewport can give, so everything tightens a step further rather than the
form scrolling and hiding Submit. Kept to phone widths so a short desktop
window is not affected. */
@media only screen and (max-width: 767px) and (max-height: 600px) {
.form-padding {
padding: 14px 16px !important;
}
.enquiry-heading {
font-size: 18px !important;
}
.form-padding .enquiry-heading::after {
height: 2px;
margin-top: 6px;
}
.enquiry-grid {
margin: 10px 0;
row-gap: 8px;
}
.enquiry-field label {
font-size: 12px;
margin-bottom: 4px;
}
.enquiry-grid .input-width {
padding: 8px 10px !important;
font-size: 13px !important;
}
/* rows="3" gives the textarea an intrinsic height taller than any
min-height set here, so the height has to be stated outright. */
.enquiry-grid textarea.input-width {
min-height: 0;
height: 52px;
}
.enquiry-footer {
gap: 8px;
}
.enquiry-footer .g-recaptcha {
transform: scale(0.74);
height: 58px;
}
.form-padding .submit-button {
padding: 9px 26px;
font-size: 14px;
}
}
/* ==========================================================================
Dropdown menu icons
An icon on the category and subcategory rows, and a right-pointing arrow on
any row that opens another panel. Projects carry a map pin, which separates
them from the sections at a glance: a pin is a place you can open, an arrow
is a panel that goes deeper.
========================================================================== */
.header-nav .nav .sub-menu li a .menu-icon {
/* An inline