/*
 * Custom BlinQ Styles
 * Theme: iRollers
 * Author: https://www.blinq.com.au
 *
 * Note: Customize BlinQ styles to match the iRollers theme branding.
 * Modify these styles with caution and always test thoroughly.
 * Backup your CSS file before making changes.
 */

/*
 *Header Stickey Effect
 */

/* Default padding for screens wider than 768px */
.elementor-location-single, .site-main {
    margin-top: 169px !important;
}

/* Padding for screens 768px and below */
@media (max-width: 768px) {
    .elementor-location-single, .site-main {
        margin-top: 90px !important;
    }
}


/* blinQ-nav-header Styles */
.blinQ-nav-header {
	background-color: rgba(255, 255, 255, 1);
	z-index: 2000; /* Adjust the z-index as needed */
	margin: 0;
	border-bottom: 0px solid #dadada;
	width: 100%;
	text-align: center;
	transition: background 0.5s ease; /* Add a smooth transition effect for background changes */
}

/* blinQ-nav-header Scrolling Down */
.blinQ-nav-header.scrolled {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.8); /* Adjust the background color and transparency */
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); /* Add a subtle box shadow when scrolled */
}

/*
 * Style for BlinQ Post Section
 */
.blinQ-post-section {
    display: flex;
    flex-wrap: wrap;
}

.custom-post {
    display: flex;
    /* margin-bottom: 20px; */
    padding: 20px;
	align-items: center; /* Center-align items vertically */
}

/* Style for the first post */
.first-post {
    width: 100%; /* Set width to 100% for the first post */
}
.first-post img {
	border-radius: 20px;
}

/* Style for the other two posts */
.custom-post:not(.first-post) {
    width: 100%; /* Set width to 50% for other posts */
}

/* Style for the background colors */
.blinQ-post-main {
	background-color: transparent;
}
.blinQ-post1 {
	background-color: transparent;
	flex-direction: row-reverse; /* Horizontal reversed */
}
.blinQ-post2 {
	background-color: transparent;
}
.blinQ-post3 {
	background-color: transparent;
	flex-direction: row-reverse; /* Horizontal reversed */
}

.featured-image {
	width: 50%;
	height: 100%;
	margin-right: 20px;
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

.featured-image img {
	width: auto;
	height: 100%;
	display: flex;
	object-fit: cover;
	object-position: center;
	transition: transform 0.7s ease; /* Add transition for the zoom effect */
	border: 3px solid var(--e-global-color-primary);
}

.featured-image:hover img {
	transform: scale(1.1); /* Apply zoom effect on hover */
	border: 3px solid var(--e-global-color-primary);
}

.blinQ-post-content {
	width: 50%;
}

/* Not Using This. Used Default Elementor Button */
.blinQ-read-more {
	display: block;
	margin-top: 10px;
}

/* Custom styles for devices with resolutions lower than 1024px */
@media (max-width: 1024px) {
	.first-post img {
		border-radius: 20px;
	}
	.blinQ-post3 {
		display: flex;
	}
	.custom-post:not(.first-post) {
		width: 100%; /* Set width to 50% for other posts */
	}
}

/* Custom styles for devices with resolutions lower than 480px */
@media (max-width: 480px) {
    .custom-post {
        flex-direction: column; /* Stack items vertically in mobile view */
        align-items: stretch; /* Stretch items to fill the width */
        padding: 10px;
    }

    .featured-image {
        width: 100%;
        margin-right: 0;
		border-radius: 20px;
    }

    .blinQ-post-content {
        width: 100%; /* Full width for the content in mobile view */
        margin-top: 10px; /* Add space between image and content */
    }
}