@media (min-width: 1441px) {
    .header__area-menubar-left-logo a img {
        margin-top: -2px !important;
    }
}

@media (max-width: 1440px) and (min-width: 1025px) {
    .header__area-menubar-left-logo a img {
        margin-top: -2px !important;
    }
    .banner__two {
        margin-top: 85px !important; 
        min-height: 70vh !important; 
    }

    .banner__two-area {
        min-height: 55vh !important; 
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .banner__two-area div[style*="margin: 80px 40px 0px 40px"] {
        margin: 60px 30px 0px 30px !important;
        min-height: 520px !important; 
        height: 520px !important; 
    }

    .banner__two-area img {
        width: 110% !important; 
        max-width: none !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 25px !important; 
    }

    .banner__two-area h2 {
        font-size: 48px !important; /* Smaller than desktop 60px */
        line-height: 54px !important; 
        margin: 0 0 20px 0 !important;
        white-space: nowrap !important;
    }

  xt positioning */
    .banner__two-area div[style*="position: absolute; left: 10px"] {
        left: 8px !important; 
        width: 400px !important; 
    }

  
    .banner__two-slide {
        margin-top: -80px !important; /* Adjusted for laptop */
        padding: 0px 0 15px 0 !important;
    }

    .banner__two-slide-area {
        max-width: 1200px !important; 
        padding: 6px !important;
        border-radius: 18px !important; 
    }

    .banner__two-slide-area-thumb-item {
        padding: 8px 16px !important; /* Increased padding for wider navigation */
        border-radius: 12px !important; /* Slightly larger radius */
        margin: 0 2px !important; /* Increased margin for better spacing */
    }

    .banner__two-slide-area-thumb-item h6 {
        font-size: 12px !important; /* Slightly smaller text */
        font-weight: 600 !important;
        color: #ffffff !important;
        margin: 0 !important;
    }

    /* Laptop button adjustments */
    .build_button {
        padding: 12px 24px !important; /* Slightly smaller button */
        font-size: 14px !important; /* Adjusted font size */
        border-radius: 8px !important; /* Smaller radius */
    }
}
/* End of Laptop-specific styles */

/* Tablet and Smaller Laptops (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .header__area-menubar-left-logo a img {
        margin-top: -5px !important;
    }
}

/* About Section - Desktop View */
@media (min-width: 1025px) {
    .about__two-left.section-padding {
        padding-top: 40px !important;
    }
}

/* About Section - Laptop View */
@media (max-width: 1024px) and (min-width: 769px) {
    .about__two-left {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
    }

    .about__two-left .item_bounce {
        margin-top: auto !important;
        padding-top: 25px;
    }

    .lg-mb-25 {
        margin-bottom: 0 !important;
    }
}

/* Enhanced About Section Responsive Styles */
/* Desktop and Large Screens (1441px+) */
@media (min-width: 1441px) {
    .about__two-left {
        padding-right: 30px !important;
    }
    
    .about__two-left h2 {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }
    
    .about__two-left p {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
    }
    
    .about__two-right-counter h2 {
        font-size: 2.2rem !important;
    }
    
    .about__two-right-counter p {
        font-size: 1.1rem !important;
    }
}

/* Laptop Screens (1025px - 1440px) */
@media (max-width: 1440px) and (min-width: 1025px) {
    .about__two-left {
        padding-right: 25px !important;
    }
    
    .about__two-left h2 {
        font-size: 2.2rem !important;
        line-height: 1.3 !important;
    }
    
    .about__two-left p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }
    
    .about__two-right .about-image {
        height: 540px !important;
    }
    
    .about__two-right-counter h2 {
        font-size: 1.9rem !important;
    }
    
    .about__two-right-counter p {
        font-size: 0.95rem !important;
    }
}

/* Tablet and Smaller Laptops (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .about__two-left h2 {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
    }
    
    .about__two-left p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }
    
    .about__two-right .about-image {
        height: 530px !important;
    }
    
    .counter__one-area {
        margin-top: 25px !important;
        gap: 15px !important;
        margin-left: 20px !important;
        width: calc(100% - 20px) !important;
    }
    
    .about__two-right-counter {
        padding: 8px 4px !important;
    }
    
    .about__two-right-counter h2 {
        font-size: 1.7rem !important;
    }
    
    .about__two-right-counter p {
        font-size: 0.9rem !important;
    }
}

/* Products Section Mobile Spacing */
@media (max-width: 768px) {
    .services__two + .services {
        margin-top: 40px !important;
    }
}

/* Mobile Logo Styles */
@media (max-width: 768px) {
	/* Side Panel Logo Mobile Styles */
	.side-panel-logo {
		padding: 25px 30px !important;
		text-align: center !important;
		border-bottom: 1px solid rgba(233, 236, 239, 0.5) !important;
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
		display: block !important; /* Ensure it's visible */
		position: relative !important;
		z-index: 1000 !important;
	}

	.side-panel-logo img {
		height: 80px !important; 
		width: auto !important;
		max-width: 250px !important; 
		display: block !important; 
		margin: 0 auto !important; 
		filter: drop-shadow(0 3px 12px rgba(0,0,0,0.2)) !important; 
		transition: all 0.3s ease !important;
		object-fit: contain !important; 
	}

	
	.side-panel-logo:hover img {
		transform: scale(1.05) !important;
		filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3)) !important;
	}


	.side-panel-header .side-panel-logo,
	.side-panel .side-panel-logo {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.side-panel-header .side-panel-logo img,
	.side-panel .side-panel-logo img {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: 80px !important;
		width: auto !important;
		max-height: 80px !important;
	}

	
	.side-panel-nav {
		margin-top: 20px !important;
		padding: 0 !important;
	}

	/* Header Logo Mobile Styles - Perfect center positioning */
	.header__area-menubar-left {
		display: block !important; /* Show logo container on mobile */
		order: 1;
		text-align: center !important; /* Center align the logo */
		padding: 0 !important; /* Remove all padding */
		margin: 0 !important; /* Remove all margins */
		background: transparent;
		position: absolute !important; /* Position absolutely for perfect centering */
		top: 0 !important; /* Align to top */
		left: 50% !important; /* Position at center horizontally */
		transform: translateX(-50%) !important; /* Perfect center alignment */
		z-index: 1001;
		width: 100% !important; /* Full width to ensure centering works */
	}

	.header__area-menubar-left-logo {
		display: block !important; /* Show logo on mobile */
		text-align: center !important; /* Center the logo within container */
	}

	.header__area-menubar-left-logo img {
		display: block !important;
		width: 280px !important; /* Logo size */
		height: 280px !important;
		position: relative !important;
		top: -120px !important; /* Adjust vertical positioning */
		margin: 0 auto !important; /* Center horizontally */
		padding: 0 !important;
		filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3)) drop-shadow(0 3px 6px rgba(0,0,0,0.2)) !important;
		transition: all 0.3s ease !important;
	}

	.header__area-menubar-left-logo:hover img {
		transform: translateY(-2px) !important;
	}

	/* Adjust header layout for mobile with logo */
	.header__area {
		padding: 0 !important;
		margin: 0 !important;
		position: relative;
		width: 100%;
		background: transparent !important;
		box-shadow: none !important;
		min-height: 160px !important; /* Ensure enough space for logo */
	}

	.header__area-menubar {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: flex-start !important;
		padding: 15px 20px !important; /* Consistent padding */
		margin: 0 !important;
		min-height: 160px !important; /* Match logo height requirements */
		position: relative;
		width: 100%;
		background: transparent !important;
		box-shadow: none !important;
	}

	/* Hide center menu on mobile */
	.header__area-menubar-center {
		display: none !important;
	}

	/* Hamburger menu positioning - match about page exactly */
	.header__area-menubar-right {
		position: absolute !important;
		top: -6px !important; /* Moved further to top */
		right: -6px !important; /* Moved further to right edge */
		z-index: 1002 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Mobile Full-Page Slider - max 768px only */
	
	/* Mobile slider main container - Full viewport height */
	.banner__two {
		margin-top: -60px !important; /* Pull slider up to overlap with header */
		padding: 0 !important; /* Remove padding for full screen */
		min-height: 100vh !important; /* Full viewport height */
		height: 100vh !important; /* Fixed full height */
		background: transparent !important;
		position: relative !important;
	}

	/* Mobile slider area container - Full screen */
	.banner__two-area {
		min-height: 100vh !important; /* Full viewport height */
		height: 100vh !important; /* Fixed height */
		padding: 0 !important; /* No padding for full screen */
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important; /* For absolute positioning of content */
	}

	/* Mobile slide content container - Full screen with overlay */
	.banner__two-area div[style*="margin: 80px 40px"] {
		margin: 0 !important; /* No margins for full screen */
		padding: 0 !important;
		height: 100vh !important; /* Full viewport height */
		min-height: 100vh !important;
		width: 100vw !important; /* Full viewport width */
		background: none !important;
		backdrop-filter: none !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 0 !important; /* No border radius for full screen */
		overflow: hidden !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
	}

	
	.banner__two-area img {
		width: 100vw !important; 
		height: 100vh !important; 
		max-width: none !important; 
		object-fit: cover !important; 
		object-position: center center !important;
		border-radius: 0 !important;
		margin: 0 !important;
		display: block !important;
		position: absolute !important; 
		top: 0 !important;
		left: 0 !important;
		transform: none !important;
		z-index: 1 !important; 
	}

	.banner__two-area div[style*="position: absolute; left: 10px"] {
		position: absolute !important;
		left: 50% !important; /* Center horizontally */
		top: 50% !important; /* Center vertically */
		transform: translate(-50%, -50%) !important; /* Perfect center alignment */
		width: 90% !important; /* Responsive width */
		max-width: 350px !important; /* Maximum width for readability */
		min-width: 280px !important; /* Minimum width for content */
		text-align: center !important;
		z-index: 10 !important; /* Above the background image */
		padding: 30px 20px !important; /* Equal padding all around */
		background: rgba(0, 0, 0, 0.7) !important; /* Semi-transparent background */
		border-radius: 16px !important; /* Rounded corners */
		backdrop-filter: blur(12px) !important; /* Blur effect */
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; /* Shadow for depth */
	}

	/* Mobile text styles - White text for overlay */
	.banner__two-area h2 {
		font-size: 1.75rem !important; /* Optimized size for mobile readability */
		line-height: 1.25 !important;
		margin: 0 0 18px 0 !important;
		color: white !important; /* White text for visibility on dark overlay */
		text-align: center !important;
		white-space: normal !important; /* Allow text wrapping */
		word-wrap: break-word !important;
		font-weight: 700 !important;
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important; /* Enhanced text shadow */
		letter-spacing: 0.5px !important; /* Slight letter spacing for clarity */
		max-width: 100% !important; /* Ensure text doesn't overflow */
	}

	
	.build_button {
		display: inline-block !important;
		margin: 20px auto 0 auto !important;
		padding: 14px 28px !important; /* Optimized touch target */
		font-size: 15px !important;
		border-radius: 10px !important;
		background: rgba(255, 255, 255, 0.95) !important; /* High opacity white background */
		color: #333 !important; /* Dark text on light button */
		text-decoration: none !important;
		font-weight: 600 !important;
		transition: all 0.25s ease !important;
		border: 2px solid rgba(255, 255, 255, 0.9) !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
		backdrop-filter: blur(8px) !important;
		text-align: center !important;
		min-width: 140px !important; /* Consistent button width */
		cursor: pointer !important;
	}

	.build_button:hover,
	.build_button:active {
		background: rgba(255, 255, 255, 1) !important; /* Solid white on interaction */
		transform: translateY(-2px) !important;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
		border-color: rgba(255, 255, 255, 1) !important;
	}

	/* Mobile navigation positioning - Overlay at bottom */
	.banner__two-slide {
		position: absolute !important; /* Position over the full-screen slider */
		bottom: 20px !important; /* Slightly above bottom edge */
		left: 15px !important; /* Small margin from edges */
		right: 15px !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		z-index: 15 !important; /* Above everything else */
	}

	.banner__two-slide-area {
		max-width: 100% !important;
		margin: 0 auto !important;
		padding: 12px !important;
		background: rgba(255, 255, 255, 0.95) !important; /* High opacity white */
		border-radius: 16px !important;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3) !important;
		backdrop-filter: blur(12px) !important;
		border: 1px solid rgba(255, 255, 255, 0.8) !important;
	}

	.banner__two-slide-area-thumb {
		width: 100% !important;
		margin: 0 !important;
	}

	.slide_thumb {
		margin: 0 !important;
		padding: 0 !important;
	}

	.thumb__area {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		justify-content: center !important;
		align-items: stretch !important; /* Equal height items */
		padding: 0 !important;
	}

	/* Mobile navigation items */
	.banner__two-slide-area-thumb-item {
		flex: 1 1 calc(50% - 3px) !important; /* Two columns on mobile with tighter spacing */
		max-width: calc(50% - 3px) !important;
		padding: 10px 6px !important;
		margin: 0 !important;
		background: rgba(248, 249, 250, 0.9) !important;
		border: 1.5px solid rgba(233, 236, 239, 0.8) !important;
		border-radius: 10px !important;
		transition: all 0.25s ease !important;
		text-align: center !important;
		cursor: pointer !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 40px !important; /* Consistent minimum height */
	}

	.banner__two-slide-area-thumb-item h6 {
		font-size: 0.7rem !important;
		font-weight: 600 !important;
		color: #495057 !important;
		margin: 0 !important;
		line-height: 1.2 !important;
		white-space: normal !important;
		word-wrap: break-word !important;
		text-align: center !important;
		width: 100% !important;
		display: block !important;
	}

	/* Mobile navigation active/hover states */
	.banner__two-slide-area-thumb-item:hover,
	.banner__two-slide-area-thumb-item.swiper-slide-thumb-active {
		background: #36b4e5 !important;
		border-color: #36b4e5 !important;
		transform: translateY(-2px) !important;
		box-shadow: 0 4px 12px rgba(54, 180, 229, 0.3) !important;
	}

	.banner__two-slide-area-thumb-item:hover h6,
	.banner__two-slide-area-thumb-item.swiper-slide-thumb-active h6 {
		color: white !important;
	}


	.banner-slide-indicators {
		display: none !important;
	}

	
	.banner__two + * {
		margin-top: 0 !important; /* No gap after full-screen slider */
		padding-top: 40px !important; /* Padding for content separation */
	}

	/* Ensure full-screen slider container positioning */
	.banner__two .swiper-wrapper {
		height: 100vh !important; /* Full viewport height */
	}

	.banner__two .swiper-slide {
		height: 100vh !important; /* Full viewport height for each slide */
	}

	/* Small screen adjustments (phones) */
}

@media (max-width: 480px) {
	/* Extra small screens adjustments */
	
	/* Smaller text overlay for small screens */
	.banner__two-area div[style*="position: absolute; left: 10px"] {
		width: 90% !important;
		max-width: 320px !important;
		padding: 20px 16px 24px 16px !important;
		top: 42% !important; /* Slightly higher on small screens */
	}
	
	/* Adjusted text size for small screens */
	.banner__two-area h2 {
		font-size: 1.5rem !important;
		line-height: 1.3 !important;
		margin: 0 0 16px 0 !important;
	}
	
	/* Smaller button for small screens */
	.build_button {
		padding: 12px 24px !important;
		font-size: 14px !important;
		margin: 16px auto 0 auto !important;
		min-width: 120px !important;
	}
	
	/* Single column navigation on very small screens */
	.banner__two-slide-area-thumb-item {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		margin-bottom: 4px !important;
		padding: 12px 8px !important;
	}
	
	/* Navigation positioning adjustment */
	.banner__two-slide {
		bottom: 15px !important;
		left: 10px !important;
		right: 10px !important;
	}
}

/* Additional Mobile Styles - max 768px */
@media (max-width: 768px) {
	/* Hide desktop images on mobile to prevent extending */
	.banner__kitchen-3d,
	.banner__wardrobe-3d,
	.banner__upvc-3d,
	.banner__surface-3d,
	.banner__timber-3d,
	.banner__total-3d {
		display: none !important; /* Hide all desktop 3D images on mobile */
	}

	/* Show only mobile images consistently */
	.mobile-slide-image {
		display: block !important; /* Always show mobile images */
		height: 200px !important; /* Consistent height */
		width: 100% !important; /* Full width */
		max-width: 280px !important; /* Max width to prevent extending */
		margin: 15px auto !important; /* Center and add spacing */
		overflow: hidden !important;
		order: 1 !important; /* Image comes first */
	}

	/* Ensure ALL mobile slide images have consistent sizing - override inline styles */
	.mobile-slide-image img {
		width: 100% !important;
		height: 200px !important; /* Consistent height matching container */
		max-width: 280px !important; /* Prevent extending beyond boundaries */
		object-fit: contain !important;
		object-position: center !important;
		margin: 0 auto !important; /* Center the image */
		display: block !important;
	}

	/* Specific overrides for slides 4, 5, 6 mobile images */
	div[class*="mobile-slide-image"] img[src*="Solidsurface.png"],
	div[class*="mobile-slide-image"] img[src*="Doors.png"],
	div[class*="mobile-slide-image"] img[src*="tis.png"] {
		width: 100% !important;
		height: 200px !important;
		max-width: 280px !important;
		object-fit: contain !important;
		margin: 0 auto !important;
		display: block !important;
	}

	/* Container adjustments for mobile slider */
	.banner__two .container-fluid {
		padding: 0 !important;
		height: 100% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.banner__two .row {
		width: 100% !important;
		margin: 0 !important;
		height: 100% !important;
		display: flex !important;
		align-items: center !important;
	}

	.banner__two .col-lg-12 {
		padding: 0 !important;
		height: 100% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Services section mobile */
	.services__area {
		padding: 60px 0 !important;
	}

	.services__area .container {
		padding: 0 20px !important;
	}

	.services__area-item {
		margin-bottom: 30px !important;
		padding: 25px 15px !important;
		text-align: center !important;
	}

	.services__area-item h4 {
		font-size: 1.3rem !important;
		margin-bottom: 15px !important;
	}

	.services__area-item p {
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
	}

	/* About section mobile */
	.about__area {
		padding: 5px 0 !important; /* Minimal padding */
		margin-top: -100px !important; /* Much larger negative margin to pull very close to navigation */
	}

	/* About Our Company section specific */
	.about__two {
		padding-top: 0px !important; /* No top padding */
		margin-top: -80px !important; /* Much larger negative margin to pull closer */
	}

	/* About section button container - match slider button styling */
	.about__two-left .item_bounce {
		text-align: center !important; /* Center align like slider buttons */
		width: 100% !important;
		margin-top: 25px !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}

	/* About section button - ensure identical styling to slider buttons */
	.about__two-left .build_button {
		display: inline-block !important;
		margin: 0 auto !important; /* Center the button */
		text-align: center !important;
		padding: 8px 16px !important; /* Smaller padding for smaller button */
		font-size: 0.8rem !important; /* Smaller font size */
		min-width: 100px !important; /* Smaller minimum width */
		border-radius: 20px !important; /* Smaller rounded corners */
		background: #000000 !important; /* Black background */
		color: #ffffff !important; /* White text */
		text-decoration: none !important;
		font-weight: 600 !important;
		letter-spacing: 0.3px !important;
		transition: all 0.3s ease !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
		border: 1px solid #000000 !important;
		outline: none !important;
	}

	/* About section button hover effect */
	.about__two-left .build_button:hover {
		transform: translateY(-1px) !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
		background: #333333 !important; /* Slightly lighter black on hover */
		color: #ffffff !important; /* Keep white text */
		text-decoration: none !important;
	}

	/* About section button icon styling */
	.about__two-left .build_button i {
		margin-left: 6px !important;
		font-size: 0.7rem !important; /* Smaller icon for smaller button */
		color: #000000 !important; /* Black icon */
		transition: transform 0.3s ease !important;
	}

	.about__two-left .build_button:hover i {
		transform: translateX(2px) !important;
		color: #000000 !important; /* Keep black icon on hover */
	}

	/* Services section "View All Products" button - match About section styling */
	.services__two .item_bounce {
		text-align: center !important; /* Center align like About button */
		width: 100% !important;
		margin-top: 25px !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}

	/* Services section "View All Products" button - identical styling to About button */
	.services__two .build_button {
		display: inline-block !important;
		margin: 0 auto !important; /* Center the button */
		text-align: center !important;
		padding: 8px 16px !important; /* Smaller padding for smaller button */
		font-size: 0.8rem !important; /* Smaller font size */
		min-width: 100px !important; /* Smaller minimum width */
		border-radius: 20px !important; /* Smaller rounded corners */
		background: #000000 !important; /* Black background */
		color: #ffffff !important; /* White text */
		text-decoration: none !important;
		font-weight: 600 !important;
		letter-spacing: 0.3px !important;
		transition: all 0.3s ease !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
		border: 1px solid #000000 !important;
		outline: none !important;
	}

	/* Services section "View All Products" button hover effect */
	.services__two .build_button:hover {
		transform: translateY(-1px) !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
		background: #333333 !important; /* Slightly lighter black on hover */
		color: #ffffff !important; /* Keep white text */
		text-decoration: none !important;
	}

	/* Services section "View All Products" button icon styling */
	.services__two .build_button i {
		margin-left: 6px !important;
		font-size: 0.7rem !important; /* Smaller icon for smaller button */
		color: #000000 !important; /* Black icon */
		transition: transform 0.3s ease !important;
	}

	.services__two .build_button:hover i {
		transform: translateX(2px) !important;
		color: #000000 !important; /* Keep black icon on hover */
	}

	/* Browse Our Products Section Mobile Responsive Styles */
	.services {
		display: flex !important;
		flex-direction: column !important; /* Stack vertically on mobile */
		width: 100% !important;
		height: auto !important; /* Let height adjust automatically */
		gap: 15px !important; /* Space between boxes */
		padding: 0 15px !important; /* Side padding */
		margin: 20px 0 !important;
	}

	/* Fallback for older browsers that don't support gap */
	@supports not (gap: 15px) {
		.services .service-box:not(:last-child) {
			margin-bottom: 15px !important;
		}
	}

	.service-box {
		flex: none !important; /* Remove flex behavior */
		width: 100% !important; /* Full width on mobile */
		height: 180px !important; /* Fixed height for consistency */
		margin-bottom: 15px !important;
		border-radius: 12px !important; /* Rounded corners for modern look */
		overflow: hidden !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; /* Subtle shadow */
		transition: all 0.3s ease !important;
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding-bottom: 20px !important;
		/* Fallback for browsers without transform support */
		-webkit-transition: all 0.3s ease !important;
		-moz-transition: all 0.3s ease !important;
		-o-transition: all 0.3s ease !important;
	}

	.service-box:hover {
		transform: translateY(-3px) !important; /* Lift effect on hover */
		-webkit-transform: translateY(-3px) !important;
		-moz-transform: translateY(-3px) !important;
		-o-transform: translateY(-3px) !important;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
	}

	.service-box .bg-image {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		background-size: cover !important;
		background-position: center !important;
		transition: transform 0.3s ease !important;
	}

	.service-box:hover .bg-image {
		transform: scale(1.08) !important; /* Slightly more zoom on mobile */
	}

	.service-box .overlay {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		background: rgba(0, 0, 0, 0.5) !important; /* Slightly darker overlay for better text readability */
		transition: background 0.3s ease !important;
	}

	.service-box:hover .overlay {
		background: rgba(0, 0, 0, 0.2) !important;
	}

	.service-box .text {
		position: relative !important;
		z-index: 3 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		color: white !important;
		padding: 0 20px !important;
	}

	.service-box .text small {
		font-size: 12px !important;
		color: rgba(255, 255, 255, 0.9) !important;
		font-weight: 500 !important;
		letter-spacing: 1px !important;
		text-transform: uppercase !important;
		margin-bottom: 5px !important;
	}

	.service-box .text span {
		font-size: 18px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
		line-height: 1.2 !important;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
		transition: transform 0.3s ease !important;
	}

	.service-box:hover .text span {
		transform: translateY(-2px) !important;
	}

	/* Logo overlays for mobile */
	.service-box .leto-logo,
	.service-box .herrlich-logo {
		position: absolute !important;
		top: 15px !important;
		right: 15px !important;
		left: auto !important;
		transform: none !important;
		opacity: 0 !important;
		transition: all 0.3s ease !important;
		z-index: 4 !important;
		background: rgba(255, 255, 255, 0.95) !important;
		padding: 8px !important;
		border-radius: 8px !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
	}

	.service-box .leto-logo img,
	.service-box .herrlich-logo img {
		width: 80px !important; /* Smaller logo for mobile */
		height: auto !important;
		max-height: 30px !important;
		object-fit: contain !important;
	}

	.service-box:hover .leto-logo,
	.service-box:hover .herrlich-logo {
		opacity: 1 !important;
		transform: scale(1.05) !important;
	}

	/* Services section title mobile */
	.services__two {
		padding: 40px 0 20px 0 !important;
	}

	.services__two .container {
		padding: 0 15px !important;
	}

	.services__two-title {
		text-align: center !important;
		margin-bottom: 30px !important;
		padding: 0 15px !important;
	}

	.services__two-title .subtitle {
		font-size: 14px !important;
		color: #666 !important;
		text-transform: uppercase !important;
		letter-spacing: 1px !important;
		margin-bottom: 10px !important;
	}

	.services__two-title h2 {
		font-size: 1.8rem !important;
		line-height: 1.3 !important;
		color: #333 !important;
		font-weight: 700 !important;
		margin-bottom: 0 !important;
		padding: 15px 20px !important;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
		border-radius: 8px !important;
		display: inline-block !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
	}

	.about__area .container {
		padding: 0 20px !important;
	}

	.about__area h2 {
		font-size: 2rem !important;
		line-height: 1.3 !important;
		margin-bottom: 20px !important;
	}

	.about__area p {
		font-size: 1rem !important;
		line-height: 1.6 !important;
		margin-bottom: 15px !important;
	}

	/* Centrepoint Homes Brands Section - Mobile Responsive Styles */
	.brand__area {
		padding: 40px 0 60px 0 !important;
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
		position: relative !important;
		overflow: hidden !important;
	}

	/* Brand section title mobile */
	.brand__area .container:first-child {
		padding: 0 15px !important;
		margin-bottom: 30px !important;
	}

	.brand__area .services__two-title {
		text-align: center !important;
		padding: 0 15px !important;
	}

	.brand__area .services__two-title .subtitle {
		font-size: 14px !important;
		color: #666 !important;
		text-transform: uppercase !important;
		letter-spacing: 1px !important;
		margin-bottom: 10px !important;
	}

	.brand__area .services__two-title h2 {
		font-size: 1.8rem !important;
		line-height: 1.3 !important;
		color: #333 !important;
		font-weight: 700 !important;
		margin-bottom: 0 !important;
		padding: 15px 20px !important;
		background: linear-gradient(135deg, #ffffff 0%, #e9ecef 100%) !important;
		border-radius: 8px !important;
		display: inline-block !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
	}

	/* Brand showcase mobile - disable animation and make grid */
	.brand__showcase {
		overflow: visible !important;
		padding: 0 15px !important;
	}

	.brand__showcase-wrapper {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px !important;
		padding: 0 !important;
		animation: none !important; /* Disable scrolling animation on mobile */
		width: 100% !important;
		transform: none !important;
	}

	.brand__showcase-item {
		flex: none !important;
		min-width: auto !important;
		width: 100% !important;
	}

	/* Hide the first empty item and duplicate items on mobile */
	.brand__showcase-item:first-child {
		display: none !important; /* Hide the first empty item */
	}
	
	.brand__showcase-item:nth-child(n+6) {
		display: none !important; /* Hide duplicate items (6th onward) */
	}

	.brand__showcase-card {
		height: 140px !important;
		padding: 20px 15px !important;
		border-radius: 16px !important;
		background: #ffffff !important;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
		transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
		border: 2px solid transparent !important;
		position: relative !important;
		overflow: hidden !important;
		transform-origin: center !important;
	}

	.brand__showcase-card:hover {
		transform: translateY(-8px) scale(1.03) !important;
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
		border-color: #44b6e5 !important;
	}

	.brand__showcase-card::before {
		content: '' !important;
		position: absolute !important;
		top: 0 !important;
		left: -100% !important;
		width: 100% !important;
		height: 100% !important;
		background: linear-gradient(90deg, transparent, rgba(68, 182, 229, 0.3), transparent) !important;
		transition: left 0.6s ease !important;
	}

	.brand__showcase-card:hover::before {
		left: 100% !important;
	}

	.brand__showcase-card img {
		width: 120px !important;
		height: 50px !important;
		object-fit: contain !important;
		filter: grayscale(100%) brightness(0.7) contrast(1.1) !important;
		transition: all 0.4s ease !important;
		position: relative !important;
		z-index: 2 !important;
	}

	.brand__showcase-card:hover img {
		filter: grayscale(0%) brightness(1) contrast(1) !important;
		transform: scale(1.1) !important;
	}

	.brand__showcase-overlay {
		position: absolute !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		background: linear-gradient(135deg, #44b6e5 0%, #2196f3 100%) !important;
		color: #ffffff !important;
		padding: 8px 12px !important;
		text-align: center !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
		transform: translateY(100%) !important;
		transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
		border-radius: 0 0 14px 14px !important;
		box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) !important;
	}

	.brand__showcase-card:hover .brand__showcase-overlay {
		transform: translateY(0) !important;
	}

	.brand__showcase-overlay span {
		display: block !important;
		opacity: 0 !important;
		transform: translateY(10px) !important;
		animation: brandSlideInUp 0.5s ease 0.1s forwards !important;
	}

	@keyframes brandSlideInUp {
		from {
			opacity: 0 !important;
			transform: translateY(10px) !important;
		}
		to {
			opacity: 1 !important;
			transform: translateY(0) !important;
		}
	}

	/* Add subtle pulse animation for brand cards */
	.brand__showcase-card {
		animation: brandCardPulse 3s ease-in-out infinite !important;
	}

	.brand__showcase-card:nth-child(2n) {
		animation-delay: 1s !important;
	}

	.brand__showcase-card:nth-child(3n) {
		animation-delay: 2s !important;
	}

	@keyframes brandCardPulse {
		0%, 100% {
			box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
		}
		50% {
			box-shadow: 0 8px 25px rgba(68, 182, 229, 0.15) !important;
		}
	}

	/* Portfolio/Gallery mobile */
	.portfolio__area {
		padding: 60px 0 !important;
	}

	.portfolio__area .container {
		padding: 0 15px !important;
	}

	.portfolio__area-item {
		margin-bottom: 20px !important;
	}

	.portfolio__area-item img {
		width: 100% !important;
		height: auto !important;
		border-radius: 10px !important;
	}

	/* Testimonials mobile */
	.testimonial__area {
		padding: 60px 0 !important;
	}

	.testimonial__area .container {
		padding: 0 20px !important;
	}

	.testimonial__area-item {
		padding: 20px !important;
		margin-bottom: 25px !important;
		text-align: center !important;
	}

	.testimonial__area-item p {
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
		margin-bottom: 20px !important;
	}

	/* CTA/Call to Action mobile */
	.cta__area {
		padding: 50px 0 !important;
		text-align: center !important;
	}

	.cta__area .container {
		padding: 0 20px !important;
	}

	.cta__area h2 {
		font-size: 2rem !important;
		line-height: 1.3 !important;
		margin-bottom: 20px !important;
	}

	.cta__area p {
		font-size: 1rem !important;
		line-height: 1.5 !important;
		margin-bottom: 25px !important;
	}

	/* Button mobile styles */
	.build_button,
	.btn-primary,
	.custom-btn {
		padding: 12px 25px !important;
		font-size: 0.95rem !important;
		margin: 10px 5px !important;
		display: inline-block !important;
		min-width: 150px !important;
		text-align: center !important;
	}

	/* Video section mobile */
	.video__area {
		padding: 60px 0 !important;
	}

	.video__area .container {
		padding: 0 20px !important;
	}

	.video__content {
		padding: 20px !important;
		text-align: center !important;
	}

	.video__content h2 {
		font-size: 1.8rem !important;
		line-height: 1.3 !important;
		margin-bottom: 15px !important;
	}

	.video__content p {
		font-size: 1rem !important;
		line-height: 1.6 !important;
		margin-bottom: 20px !important;
	}

	/* Contact section mobile */
	.contact__area {
		padding: 60px 0 !important;
	}

	.contact__area .container {
		padding: 0 20px !important;
	}

	.contact__area-left {
		margin-bottom: 40px !important;
	}

	.contact__area-left h2 {
		font-size: 1.8rem !important;
		margin-bottom: 15px !important;
	}

	.contact__area-left p {
		font-size: 1rem !important;
		line-height: 1.6 !important;
		margin-bottom: 20px !important;
	}

	/* Form mobile styles */
	.contact__area-right form {
		padding: 0 !important;
	}

	.contact__area-right .form-group {
		margin-bottom: 20px !important;
	}

	.contact__area-right input,
	.contact__area-right textarea {
		width: 100% !important;
		padding: 12px 15px !important;
		font-size: 1rem !important;
		border-radius: 5px !important;
		border: 1px solid #ddd !important;
	}

	.contact__area-right textarea {
		min-height: 120px !important;
		resize: vertical !important;
	}

	/* Footer mobile */
	.footer__area {
		padding: 40px 0 20px 0 !important;
	}

	.footer__area .container {
		padding: 0 20px !important;
	}

	.footer__area-widget {
		margin-bottom: 30px !important;
		text-align: center !important;
	}

	.footer__area-widget h4 {
		font-size: 1.2rem !important;
		margin-bottom: 15px !important;
	}

	.footer__area-widget p,
	.footer__area-widget a {
		font-size: 0.9rem !important;
		line-height: 1.6 !important;
	}

	/* Social links mobile */
	.footer__area-social {
		text-align: center !important;
		margin-top: 20px !important;
	}

	.footer__area-social a {
		margin: 0 10px !important;
		font-size: 1.2rem !important;
		display: inline-block !important;
	}

	/* Small screen adjustments */
	@media (max-width: 576px) {
		.banner__area {
			padding-top: 50px !important; /* Even less padding for smaller screens */
		}
		
		.banner__two {
			margin-top: -10px !important; /* Pull slider up for smaller screens */
			padding-top: 30px !important; /* Reduced padding to pull content up */
		}
		
		.banner__area-content h1 {
			font-size: 2rem !important;
		}
		
		.banner__area-content p {
			font-size: 1rem !important;
		}
		
		/* Even tighter spacing for smaller screens */
		.mobile-slide-image {
			height: 180px !important; /* Smaller consistent height */
			max-width: 250px !important; /* Prevent extending on small screens */
		}

		.mobile-slide-image img {
			height: 180px !important; /* Match container height */
			max-width: 250px !important; /* Consistent max width */
		}

		.banner-image-standard {
			display: none !important; /* Hide desktop images on small screens */
		}

		/* Ensure content wrapper doesn't extend on small screens */
		.banner__content-wrapper {
			padding: 15px 10px !important; /* Smaller padding */
			margin: 5px !important; /* Smaller margin */
			max-width: 95% !important; /* Ensure it fits within screen */
		}

		/* Additional mobile classes for smaller screens */
		.banner-title-mobile {
			font-size: 1.9rem !important;
		}
		
		.banner-description-mobile {
			font-size: 0.9rem !important;
		}

		.banner__two-slide-area-thumb {
			bottom: 15px !important; /* Moved navigation down for small screens */
			width: 95% !important;
			max-width: 300px !important;
		}

		.banner__two-slide-area-thumb-item {
			padding: 6px 10px !important; /* Even smaller padding */
			margin: 0 2px !important; /* Tighter margins */
		}

		.banner__two-slide-area-thumb-item h6 {
			font-size: 0.6rem !important; /* Even smaller text for small screens */
			line-height: 1.1 !important; /* Tighter line height */
		}

		.banner-slide-indicators {
			display: none !important; /* Hide blue progress bar on small screens */
		}

		.slide-progress-bar {
			display: none !important; /* Hide progress bar on small screens */
		}
		
		.about__area h2,
		.services__area h2,
		.cta__area h2 {
			font-size: 1.8rem !important;
		}
		
		.build_button,
		.btn-primary,
		.custom-btn {
			min-width: 120px !important;
			padding: 10px 20px !important;
			font-size: 0.9rem !important;
		}

		/* About section button - improved styling for small screens */
		.about__two-left .build_button {
			min-width: 90px !important;
			padding: 6px 14px !important;
			font-size: 0.75rem !important;
			border-radius: 18px !important;
			background: #000000 !important; /* Black background */
			color: #ffffff !important; /* White text */
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
			border: 1px solid #000000 !important;
		}

		/* About section button container for small screens */
		.about__two-left .item_bounce {
			margin-top: 20px !important;
			display: flex !important;
			justify-content: center !important;
			align-items: center !important;
		}

		/* Services section "View All Products" button - small screens styling */
		.services__two .build_button {
			min-width: 90px !important;
			padding: 6px 14px !important;
			font-size: 0.75rem !important;
			border-radius: 18px !important;
			background: #000000 !important; /* Black background */
			color: #ffffff !important; /* White text */
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
			border: 1px solid #000000 !important;
		}

		/* Services section button container for small screens */
		.services__two .item_bounce {
			margin-top: 20px !important;
			display: flex !important;
			justify-content: center !important;
			align-items: center !important;
		}

		/* Browse Our Products Section - Small Mobile Screens (≤576px) */
		.services {
			padding: 0 10px !important; /* Tighter side padding */
			gap: 12px !important; /* Smaller gap between boxes */
			margin: 15px 0 !important;
		}

		.service-box {
			height: 160px !important; /* Shorter height for small screens */
			margin-bottom: 12px !important;
			border-radius: 10px !important;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
		}

		.service-box .text {
			padding: 0 15px !important; /* Smaller padding */
		}

		.service-box .text small {
			font-size: 11px !important;
			margin-bottom: 3px !important;
		}

		.service-box .text span {
			font-size: 16px !important;
			line-height: 1.1 !important;
		}

		/* Logo overlays for small screens */
		.service-box .leto-logo,
		.service-box .herrlich-logo {
			top: 10px !important;
			right: 10px !important;
			padding: 6px !important;
			border-radius: 6px !important;
		}

		.service-box .leto-logo img,
		.service-box .herrlich-logo img {
			width: 60px !important; /* Even smaller logo for small screens */
			max-height: 25px !important;
		}

		/* Services section title for small screens */
		.services__two {
			padding: 30px 0 15px 0 !important;
		}

		.services__two-title {
			margin-bottom: 25px !important;
			padding: 0 10px !important;
		}

		.services__two-title .subtitle {
			font-size: 13px !important;
			margin-bottom: 8px !important;
		}

		.services__two-title h2 {
			font-size: 1.5rem !important;
			padding: 12px 18px !important;
			border-radius: 6px !important;
		}
	}

	/* Extra Small Screens (≤375px) - Optimized for small phones */
	@media (max-width: 375px) {
		/* Browse Our Products Section - Extra Small Screens */
		.services {
			padding: 0 8px !important; /* Minimal side padding */
			gap: 10px !important; /* Even smaller gap */
			margin: 10px 0 !important;
		}

		.service-box {
			height: 140px !important; /* Compact height for extra small screens */
			margin-bottom: 10px !important;
			border-radius: 8px !important;
		}

		.service-box .text {
			padding: 0 12px !important; /* Minimal padding */
		}

		.service-box .text small {
			font-size: 10px !important;
			margin-bottom: 2px !important;
		}

		.service-box .text span {
			font-size: 14px !important;
			line-height: 1.0 !important;
		}

		/* Logo overlays for extra small screens */
		.service-box .leto-logo,
		.service-box .herrlich-logo {
			top: 8px !important;
			right: 8px !important;
			padding: 4px !important;
			border-radius: 4px !important;
		}

		.service-box .leto-logo img,
		.service-box .herrlich-logo img {
			width: 50px !important; /* Compact logo for extra small screens */
			max-height: 20px !important;
		}

		/* Services section title for extra small screens */
		.services__two {
			padding: 25px 0 10px 0 !important;
		}

		.services__two-title {
			margin-bottom: 20px !important;
			padding: 0 8px !important;
		}

		.services__two-title .subtitle {
			font-size: 12px !important;
			margin-bottom: 6px !important;
		}

		.services__two-title h2 {
			font-size: 1.3rem !important;
			padding: 10px 15px !important;
			border-radius: 5px !important;
			line-height: 1.2 !important;
		}

		/* View All Products button for extra small screens */
		.services__two .build_button {
			min-width: 80px !important;
			padding: 5px 12px !important;
			font-size: 0.7rem !important;
			border-radius: 15px !important;
		}

		.services__two .build_button i {
			font-size: 0.6rem !important;
			margin-left: 4px !important;
		}

		/* Centrepoint Homes Brands Section - Extra Small Screens (≤375px) */
		.brand__area {
			padding: 25px 0 40px 0 !important;
		}

		.brand__area .services__two-title {
			margin-bottom: 20px !important;
			padding: 0 8px !important;
		}

		.brand__area .services__two-title .subtitle {
			font-size: 12px !important;
			margin-bottom: 6px !important;
		}

		.brand__area .services__two-title h2 {
			font-size: 1.3rem !important;
			padding: 10px 15px !important;
			border-radius: 5px !important;
			line-height: 1.2 !important;
		}

		.brand__showcase {
			padding: 0 8px !important;
		}

		.brand__showcase-wrapper {
			gap: 12px !important;
			grid-template-columns: 1fr !important; /* Single column for very small screens */
		}

		.brand__showcase-card {
			height: 100px !important;
			padding: 12px 10px !important;
			border-radius: 10px !important;
		}

		.brand__showcase-card:hover {
			transform: translateY(-5px) scale(1.02) !important;
		}

		.brand__showcase-card img {
			width: 85px !important;
			height: 35px !important;
		}

		.brand__showcase-overlay {
			font-size: 9px !important;
			padding: 5px 8px !important;
			border-radius: 0 0 8px 8px !important;
		}
	}

	/* Side panel enhancements for home page */
	.side-panel {
		width: 100% !important;
		max-width: 320px !important;
		height: 100vh !important;
		position: fixed !important;
		top: 0 !important;
		right: -100% !important;
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
		box-shadow: -5px 0 25px rgba(0,0,0,0.2) !important;
		transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
		z-index: 9999 !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		display: block !important; /* Ensure panel is visible when needed */
	}

	.side-panel.open {
		right: 0 !important;
	}

	/* Side Panel Header Enhancement */
	.side-panel-header {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 0 !important;
		position: relative !important;
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
		border-bottom: 1px solid rgba(233, 236, 239, 0.5) !important;
	}

	/* Side Panel Close Button */
	.side-panel-close {
		position: absolute !important;
		top: 20px !important;
		right: 20px !important;
		width: 40px !important;
		height: 40px !important;
		background: rgba(0, 0, 0, 0.1) !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
		transition: all 0.3s ease !important;
		z-index: 1001 !important;
	}

	.side-panel-close:hover {
		background: rgba(54, 180, 229, 0.2) !important;
		transform: scale(1.1) !important;
	}

	.side-panel-close i {
		font-size: 1.2rem !important;
		color: #333 !important;
	}

	.side-panel-nav ul li a {
		color: #333;
		font-weight: 500;
		transition: all 0.3s ease;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}

	.side-panel-nav ul li a:hover,
	.side-panel-nav ul li a.active {
		background: linear-gradient(135deg, #36B4E5 0%, #2a9fd8 100%);
		color: white;
		transform: translateX(10px);
	}

	/* Home page specific side panel highlighting */
	.side-panel-nav ul li a[href="home.html"] {
		background: linear-gradient(135deg, #36B4E5 0%, #2a9fd8 100%);
		color: white;
		font-weight: 600;
	}

	/* Side Panel Overlay Styles */
	.side-panel-overlay {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		background: rgba(0, 0, 0, 0.5) !important;
		z-index: 9998 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transition: all 0.3s ease !important;
	}

	.side-panel-overlay.show {
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* Side Panel Backdrop */
	.side-panel-backdrop {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		background: transparent !important;
		cursor: pointer !important;
	}

	/* Body scroll lock when side panel is open */
	body.side-panel-open {
		overflow: hidden !important;
	}

	/* Performance optimizations for mobile */
	.banner__area,
	.services__area,
	.about__area {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	/* Fix for iOS Safari viewport issues */
	.banner__two {
		min-height: -webkit-fill-available;
	}

	/* Smooth scrolling for mobile */
	html {
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
	}

	/* Text selection improvements */
	body {
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		user-select: text;
		-webkit-touch-callout: default;
	}

	/* Ensure full width on mobile */
	.container-fluid {
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Grid system mobile fixes */
	.row {
		margin: 0 !important;
	}

	.col-lg-12,
	.col-md-12,
	.col-sm-12 {
		padding: 0 15px !important;
	}

	/* Image responsive fixes */
	img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Loading and Animation Improvements for Mobile */
	.wow {
		visibility: visible !important;
		animation-duration: 0.6s !important;
	}

	/* Remove excessive animations on mobile for performance */
	.animate-on-scroll {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}
/* End of Additional Mobile Styles */

/* Tablet specific adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
	.banner__area-content h1 {
		font-size: 3rem !important;
	}
	
	.about__area h2,
	.services__area h2 {
		font-size: 2.5rem !important;
	}
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
	.banner__area {
		padding-top: 45px !important; /* Reduced padding for landscape */
	}
	
	.banner__two {
		min-height: 100vh !important;
		margin-top: -15px !important; /* Pull slider up in landscape */
		padding-top: 25px !important; /* Reduced padding to pull content up */
	}
	
	.header__area-menubar {
		min-height: 120px !important;
	}
	
	.header__area-menubar-left-logo img {
		width: 200px !important;
		height: 200px !important;
		top: -80px !important;
		margin: 0 auto !important; /* Center horizontally in landscape too */
	}

	/* Landscape slider adjustments */
	.mobile-slide-image {
		height: 160px !important; /* Smaller height for landscape */
		max-width: 280px !important; /* Consistent max width */
	}

	.mobile-slide-image img {
		height: 160px !important; /* Match container height */
		max-width: 280px !important; /* Prevent extending */
	}

	.banner-image-standard {
		display: none !important; /* Hide desktop images in landscape */
	}

	/* Ensure content wrapper fits in landscape */
	.banner__content-wrapper {
		padding: 15px 12px !important; /* Compact padding for landscape */
		margin: 8px !important; /* Smaller margin */
		max-width: 90% !important; /* Ensure it fits within landscape view */
	}

	/* Additional mobile classes for landscape */
	.banner-title-mobile {
		font-size: 2rem !important;
	}
	
	.banner-description-mobile {
		font-size: 0.95rem !important;
	}

	.banner__two-slide-area-thumb {
		bottom: 10px !important; /* Moved navigation down for landscape */
		max-width: 400px !important; /* Wider for landscape */
	}

	.banner__two-slide-area-thumb-item {
		padding: 6px 14px !important;
		margin: 0 3px !important;
	}

	.banner__two-slide-area-thumb-item h6 {
		font-size: 0.65rem !important; /* Slightly smaller for landscape */
		line-height: 1.15 !important;
	}

	.banner-slide-indicators {
		display: none !important; /* Hide blue progress bar in landscape */
	}

	.slide-progress-bar {
		display: none !important; /* Hide progress bar in landscape */
	}
}

/* 13-inch Laptop Adjustments (1280x800, 1366x768) */
@media (min-width: 1280px) and (max-width: 1366px) {
	.banner__content-wrapper {
		padding: 40px 50px !important; /* Keep same padding as 15.6-inch */
		margin: 25px auto !important; /* Centered with auto margins for symmetrical spacing */
		max-width: 95% !important; /* Ensure consistent width */
	}

	.banner-image-standard {
		width: 600px !important; /* Increased from 480px for more zoom */
		height: 500px !important; /* Increased from 400px for more zoom */
	}

	/* Adjust 3D image containers for smaller screens */
	.banner__kitchen-3d,
	.banner__upvc-3d,
	.banner__wardrobe-3d,
	.banner__solid-surface-3d,
	.banner__timber-3d {
		margin-left: 0px !important; /* Reduce spacing */
	}
}

/* 14-inch Laptop Adjustments (specifically for 1366x768) */
@media (min-width: 1366px) and (max-width: 1440px) {
	.banner__content-wrapper {
		padding: 40px 50px !important; /* Keep same padding as 15.6-inch */
		margin: 30px auto !important; /* Centered with auto margins for symmetrical spacing */
		max-width: 95% !important; /* Ensure consistent width */
	}

	.banner-image-standard {
		width: 650px !important; /* Increased from 500px for more zoom */
		height: 540px !important; /* Increased from 420px for more zoom */
	}

	/* Ensure proper spacing for 3D images */
	.banner__kitchen-3d,
	.banner__upvc-3d,
	.banner__wardrobe-3d,
	.banner__solid-surface-3d,
	.banner__timber-3d {
		margin-left: 2px !important;
	}
}

/* 15.6-inch and larger laptop adjustments (1920x1080 and above) */
@media (min-width: 1441px) and (max-width: 1920px) {
	.banner__content-wrapper {
		padding: 50px 60px !important; /* Keep original sizing */
		margin: 40px auto !important; /* Centered with auto margins for symmetrical spacing */
		max-width: 95% !important; /* Ensure consistent width */
	}

	.banner-image-standard {
		width: 700px !important; /* Increased from 550px for more zoom */
		height: 580px !important; /* Increased from 450px for more zoom */
	}
}

/* Desktop and Tablet About Section Button Improvements */
@media (min-width: 769px) {
	.about__two-left .item_bounce {
		text-align: left !important; /* Left align on desktop */
		margin-top: 25px !important;
	}

	.about__two-left .build_button {
		display: inline-block !important;
		padding: 10px 20px !important; /* Smaller padding for desktop */
		font-size: 0.85rem !important; /* Smaller font size */
		min-width: 120px !important; /* Smaller minimum width */
		border-radius: 20px !important;
		background: #000000 !important; /* Black background */
		color: #ffffff !important; /* White text */
		text-decoration: none !important;
		font-weight: 600 !important;
		letter-spacing: 0.3px !important;
		transition: all 0.3s ease !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
		border: 1px solid #000000 !important;
		outline: none !important;
	}

	.about__two-left .build_button:hover {
		transform: translateY(-1px) !important;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
		background: #333333 !important; /* Slightly lighter black on hover */
		color: #ffffff !important; /* Keep white text */
		text-decoration: none !important;
	}

	.about__two-left .build_button i {
		margin-left: 6px !important;
		font-size: 0.75rem !important; /* Smaller icon */
		color: #000000 !important; /* Black icon */
		transition: transform 0.3s ease !important;
	}

	.about__two-left .build_button:hover i {
		transform: translateX(2px) !important;
		color: #000000 !important; /* Keep black icon on hover */
	}

	/* Services section "View All Products" button - desktop styling */
	.services__two .item_bounce {
		text-align: center !important; /* Center align on desktop */
		margin-top: 25px !important;
	}

	.services__two .build_button {
		display: inline-block !important;
		padding: 10px 20px !important; /* Smaller padding for desktop */
		font-size: 0.85rem !important; /* Smaller font size */
		min-width: 120px !important; /* Smaller minimum width */
		border-radius: 20px !important;
		background: #000000 !important; /* Black background */
		color: #ffffff !important; /* White text */
		text-decoration: none !important;
		font-weight: 600 !important;
		letter-spacing: 0.3px !important;
		transition: all 0.3s ease !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
		border: 1px solid #000000 !important;
		outline: none !important;
	}

	.services__two .build_button:hover {
		transform: translateY(-1px) !important;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
		background: #333333 !important; /* Slightly lighter black on hover */
		color: #ffffff !important; /* Keep white text */
		text-decoration: none !important;
	}

	.services__two .build_button i {
		margin-left: 6px !important;
		font-size: 0.75rem !important; /* Smaller icon */
		color: #000000 !important; /* Black icon */
		transition: transform 0.3s ease !important;
	}

	.services__two .build_button:hover i {
		transform: translateX(2px) !important;
		color: #000000 !important; /* Keep black icon on hover */
	}
}

/* Laptop-specific banner height and positioning adjustments */
@media (min-width: 1025px) and (max-width: 1366px) {
	.banner__two {
		min-height: 80vh !important; /* Optimized height for smaller laptops */
		margin-top: 15px !important; /* Reduced from 30px - even closer to header */
		padding-top: 10px !important; /* Reduced padding even more */
		padding-bottom: 40px !important;
	}

	.banner__two-slide-area {
		margin-bottom: 30px !important;
	}

	/* Fine-tune slider navigation positioning */
	.banner__two-slide-area-thumb {
		bottom: 20px !important;
	}

	/* Ensure banner content wrapper maintains proper proportions */
	.banner__content-wrapper {
		min-height: 350px !important; /* Consistent minimum height */
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
}

/* 13-inch laptops - very small screens (1280x800, 1366x768) */
@media (min-width: 1280px) and (max-width: 1365px) {
	.banner__two {
		min-height: 75vh !important; /* Compact height for 13-inch */
		margin-top: 10px !important; /* Reduced from 25px - very close to header */
		padding-top: 8px !important; /* Minimal padding */
		padding-bottom: 35px !important;
	}

	/* Ensure banner is positioned correctly with header */
	.banner__two.swiper.slide_three[style*="margin-top"] {
		margin-top: 10px !important; /* Override inline style - minimal gap */
	}

	/* Compact banner content wrapper for very small screens */
	.banner__content-wrapper {
		min-height: 320px !important;
		padding: 30px 40px !important;
		margin: 20px 25px !important;
	}
}

/* Additional responsive adjustments for banner slider */
@media (min-width: 1366px) and (max-width: 1440px) {
	.banner__two {
		min-height: 85vh !important; /* Perfect height for 14-inch screens */
		margin-top: 20px !important; /* Reduced from 35px - much closer to header */
		padding-top: 15px !important; /* Reduced padding even more */
		padding-bottom: 45px !important;
	}

	.banner__two-slide-area {
		margin-bottom: 35px !important;
	}

	/* Optimized navigation for 14-inch */
	.banner__two-slide-area-thumb {
		bottom: 25px !important;
	}
}

/* 15.6-inch and larger laptops */
@media (min-width: 1441px) and (max-width: 1920px) {
	.banner__two {
		min-height: 90vh !important; /* Maintain good proportions */
		margin-top: 25px !important; /* Reduced from 40px - much closer to header */
		padding-top: 20px !important; /* Reduced padding even more */
		padding-bottom: 50px !important;
	}

	.banner__two-slide-area {
		margin-bottom: 40px !important;
	}

	/* Navigation positioning for larger laptops */
	.banner__two-slide-area-thumb {
		bottom: 30px !important;
	}

	/* Maintain proper banner wrapper sizing for larger screens */
	.banner__content-wrapper {
		min-height: 400px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
}

/* Additional consistency adjustments for all laptop sizes */
@media (min-width: 1280px) and (max-width: 1920px) {
	/* Ensure symmetrical horizontal spacing for banner content */
	.banner__content-wrapper {
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
	}

	/* Ensure container has consistent centering */
	.banner__two-area .container-fluid {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.banner__two-area .row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.banner__two-area .col-xl-10,
	.banner__two-area .col-lg-10 {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* Ensure all banner 3D images maintain proportional sizing with increased zoom */
	.banner__kitchen-3d img,
	.banner__upvc-3d img,
	.banner__solid-surface-3d img {
		object-fit: contain !important;
		object-position: center !important;
		transform: scale(1.15) !important; /* Add 15% zoom to make images more prominent */
		transition: transform 0.3s ease !important; /* Smooth zoom transition */
	}

	/* Total Interior Solutions image - make it bigger */
	.banner__total-3d img {
		object-fit: contain !important;
		object-position: center !important;
		transform: scale(1.3) !important; /* Increased zoom for TIS - bigger than others */
		transition: transform 0.3s ease !important; /* Smooth zoom transition */
	}

	/* Wardrobe and Timber door images - reduce size as they're too big */
	.banner__wardrobe-3d img,
	.banner__timber-3d img {
		object-fit: contain !important;
		object-position: center !important;
		transform: scale(0.95) !important; /* Reduced zoom - smaller than others */
		transition: transform 0.3s ease !important; /* Smooth zoom transition */
	}

	/* 40% content, 60% image split for better image prominence */
	.banner__two-content {
		flex: 0 0 40% !important; /* 40% width for content */
		max-width: 40% !important;
		padding-right: 20px !important; /* Add spacing between content and image */
	}

	/* Image container gets 60% */
	.banner__kitchen-3d,
	.banner__upvc-3d,
	.banner__wardrobe-3d,
	.banner__solid-surface-3d,
	.banner__timber-3d,
	.banner__total-3d {
		flex: 0 0 60% !important; /* 60% width for image */
		max-width: 60% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Ensure banner content wrapper uses flex layout properly */
	.banner__content-wrapper[style*="display: flex"] {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
	}

	/* Ensure navigation text doesn't overflow */
	.banner__two-slide-area-thumb-item h6 {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		line-clamp: 2 !important; /* Standard property for compatibility */
	}
}