Trusted Across Australia
/* Unique class names to prevent conflicts */
.flickity-logo-slider {
width: 100%;
background-color: #000000;
overflow: hidden; /* Hide any potential overflow */
}
.flickity-logo-cell {
width: 300px !important; /* Adjust as needed */
height: 100px; /* Adjust as needed */
margin-right: 40px; /* Add 20px spacing between slides */
counter-increment: carousel-cell;
}
.flickity-logo-cell img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Ensures images are contained within the specified size without distortion */
border-right: 10px solid black;
border-left: 10px solid black;
}
/* Hide Flickity navigation dots */
.flickity-page-dots {
display: none;
}
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full width container */
.gallery-section {
width: 100%; /* Full width section */
background-color: #000; /* Optional: background color */
padding: 20px 0;
text-align: center; /* Centering the text */
margin-top: -5%;
}
.gallery-section1 {
width: 100%; /* Full width section */
background-color: #000; /* Optional: background color */
padding: 20px 0;
text-align: center; /* Centering the text */
}
/* Section Heading */
.gallery-section h1 {
font-size: 36px;
color: #fff;
margin-bottom: 10px;
}
/* Section Subheading */
.gallery-section p {
font-size: 18px;
color: #ccc;
margin-bottom: 40px;
}
/* Grid layout */
.gallery {
–s: 300px; /* Control the size */
–g: 0px; /* Set the gap to 0 to remove the space */
–f: 1.09; /* Control the scale factor */
display: grid;
gap: var(–g); /* No gap between images */
grid-template-columns: repeat(3, 1fr); /* 3 equal columns for desktop */
width: 100%; /* Full width */
max-width: 1600px !important; /* Max width to keep it responsive */
margin: 0 auto; /* Centering the grid */
}
/* New section for “Our Work” text */
.our-work1 {
position: absolute;
border-bottom-right-radius: 40px;
border-top-right-radius: 40px;
padding: 10px 20px;
background-color: #da5861; /* Background color */
color: white;
font-size: 24px;
font-weight: bold;
z-index: 1000; /* High z-index to ensure it stays on top */
text-transform: uppercase;
pointer-events: none; /* Prevent the text from interfering with hover actions */
}
/* Image container for positioning the text over images */
.image-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden; /* Ensure the container clips any enlarged content */
transition: transform 0.35s ease; /* Smooth scaling transition */
}
/* Image styling */
.gallery > img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
filter: grayscale(80%);
transition: .35s linear;
}
/* Overlay text */
.overlay {
position: absolute;
bottom: 0; /* Make sure it’s at the bottom */
left: 0;
width: 100%;
padding: 20px; /* Padding to add some space around the text */
color: white;
text-align: left;
opacity: 1;
transition: font-size 0.3s ease;
background: linear-gradient(to bottom, transparent, rgba(218, 88, 97, 0.7)); /* Gradient with #da5861 */
}
.overlay h2 {
font-size: 30px !important; /* Default font size */
margin: 0;
transition: font-size 0.3s ease;
}
.overlay p {
font-size: 16px; /* Default font size */
margin-top: 5px;
transition: font-size 0.3s ease;
line-height: 1.1;
}
/* New Explore Now text */
.overlay .explore-now {
font-size: 18px;
margin-top: 10px;
opacity: 0; /* Initially invisible */
transition: opacity 0.3s ease, font-size 0.3s ease;
}
/* Gallery Hover Effect for entire image-container */
.image-container:hover {
transform: scale(var(–f)); /* Enlarge the entire container (image + overlay) */
z-index: 1;
}
.image-container:hover img {
filter: grayscale(0); /* Remove grayscale on hover */
transform: scale(1); /* Prevent image from enlarging too much */
z-index: 1; /* Ensure image stays in front when hovered */
}
.image-container:hover .overlay {
z-index: 10; /* Ensure overlay stays on top of the image */
}
/* Hover effect for text font enlargement */
.image-container:hover .overlay h2 {
font-size: 32px; /* Increase font size on hover */
}
/* Hover effect for text font enlargement */
.image-container:hover .overlay p {
font-size: 18px; /* Increase font size on hover */
}
/* Make Explore Now visible when hovering */
.image-container:hover .overlay .explore-now {
opacity: 1; /* Make it visible */
font-size: 20px; /* Increase font size slightly on hover */
}
/* Enlarging image to the right for the first and second containers */
.image-container:nth-child(1):hover,
.image-container:nth-child(2):hover {
transform-origin: top left; /* Enlarge to the right */
}
/* Enlarging image to the left for the third container */
.image-container:nth-child(3):hover {
transform-origin: top right; /* Enlarge to the left */
}
/* Centering the gallery within the body */
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
background: #000;
font-family: Arial, sans-serif;
}
/* Responsive for smaller screens */
@media (max-width: 768px) {
.gallery {
grid-template-columns: 1fr; /* 1 column layout for mobile devices */
}
/* Adjust the size of “Our Work” label */
.our-work1 {
font-size: 18px; /* Smaller font size */
padding: 8px 16px;
}
/* Adjust overlay text size */
.overlay h2 {
font-size: 24px;
}
.overlay p {
font-size: 14px;
}
}
$(document).ready(function(){
$(‘.customer-projects’).slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2500,
arrows: false,
dots: false,
pauseOnHover: false,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 1
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 1
}
}]
});
});
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full width container */
.gallery-section {
width: 100%; /* Full width section */
background-color: #000; /* Optional: background color */
padding: 20px 0;
text-align: center; /* Centering the text */
}
/* Section Heading */
.gallery-section h1 {
font-size: 36px;
color: #fff;
margin-bottom: 10px;
}
/* Section Subheading */
.gallery-section p {
font-size: 18px;
color: #ccc;
margin-bottom: 40px;
}
/* Grid layout */
.gallery {
–s: 300px; /* Control the size */
–g: 0px; /* Set the gap to 0 to remove the space */
–f: 1.09; /* Control the scale factor */
display: grid;
gap: var(–g); /* No gap between images */
grid-template-columns: repeat(3, 1fr); /* 3 equal columns for desktop */
width: 100%; /* Full width */
max-width: 1600px !important; /* Max width to keep it responsive */
margin: 0 auto; /* Centering the grid */
}
/* New section for “Our Work” text */
.our-work1 {
position: absolute;
border-bottom-right-radius: 40px;
border-top-right-radius: 40px;
padding: 10px 20px;
background-color: #da5861; /* Background color */
color: white;
font-size: 24px;
font-weight: bold;
z-index: 1000; /* High z-index to ensure it stays on top */
text-transform: uppercase;
pointer-events: none; /* Prevent the text from interfering with hover actions */
}
/* Image container for positioning the text over images */
.image-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden; /* Ensure the container clips any enlarged content */
transition: transform 0.35s ease; /* Smooth scaling transition */
}
/* Image styling */
.gallery > img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
filter: grayscale(80%);
transition: .35s linear;
}
/* Overlay text */
.overlay {
position: absolute;
bottom: 0; /* Make sure it’s at the bottom */
left: 0;
width: 100%;
padding: 20px; /* Padding to add some space around the text */
color: white;
text-align: left;
opacity: 1;
transition: font-size 0.3s ease;
background: linear-gradient(to bottom, transparent, rgba(218, 88, 97, 0.7)); /* Gradient with #da5861 */
}
.overlay h2 {
font-size: 30px !important; /* Default font size */
margin: 0;
transition: font-size 0.3s ease;
}
.overlay p {
font-size: 16px; /* Default font size */
margin-top: 5px;
transition: font-size 0.3s ease;
line-height: 1.1;
}
/* New Explore Now text */
.overlay .explore-now {
font-size: 18px;
margin-top: 10px;
opacity: 0; /* Initially invisible */
transition: opacity 0.3s ease, font-size 0.3s ease;
}
/* Gallery Hover Effect for entire image-container */
.image-container:hover {
transform: scale(var(–f)); /* Enlarge the entire container (image + overlay) */
z-index: 1;
}
.image-container:hover img {
filter: grayscale(0); /* Remove grayscale on hover */
transform: scale(1); /* Prevent image from enlarging too much */
z-index: 1; /* Ensure image stays in front when hovered */
}
.image-container:hover .overlay {
z-index: 10; /* Ensure overlay stays on top of the image */
}
/* Hover effect for text font enlargement */
.image-container:hover .overlay h2 {
font-size: 32px; /* Increase font size on hover */
}
/* Hover effect for text font enlargement */
.image-container:hover .overlay p {
font-size: 18px; /* Increase font size on hover */
}
/* Make Explore Now visible when hovering */
.image-container:hover .overlay .explore-now {
opacity: 1; /* Make it visible */
font-size: 20px; /* Increase font size slightly on hover */
}
/* Apply same scaling for all images */
.image-container:hover {
transform-origin: top center; /* All images scale from top-center */
}
/* Centering the gallery within the body */
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
background: #000;
font-family: Arial, sans-serif;
}
/* Responsive for smaller screens */
@media (max-width: 768px) {
.gallery {
grid-template-columns: 1fr; /* 1 column layout for mobile devices */
}
/* Adjust the size of “Our Work” label */
.our-work1 {
font-size: 18px; /* Smaller font size */
padding: 8px 16px;
}
/* Adjust overlay text size */
.overlay h2 {
font-size: 24px;
}
.overlay p {
font-size: 14px;
}
}
$(document).ready(function(){
$(‘.customer-projects’).slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2500,
arrows: false,
dots: false,
pauseOnHover: false,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 1
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 1
}
}]
});
});