/* Change the Background Colour on Scroll with Frosted Glass Effect */
.elementor-sticky--effects {
background: rgba(141, 108, 42, 0.5) !important;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
transition: background 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out;
}
/* Initial styles - show the primary logo and heading, hide the secondary logo and menu */
.logo1, .heading1 {
display: block; /* Show logo1 and heading1 initially */
}

.logo2, .menu1 {
display: none; /* Hide logo2 and menu1 initially */
}

/* When the header becomes sticky, toggle the visibility */
.elementor-sticky--effects .logo1,
.elementor-sticky--effects .heading1 {
display: none; /* Hide primary logo and heading on scroll */
}

.elementor-sticky--effects .logo2,
.elementor-sticky--effects .menu1 {
display: block; /* Show secondary logo and menu on scroll */
}

/* Default widths and padding for .col1 and .col2 */
.col1, .col2 {
padding: 10px 15px; /* Default padding for each side */
transition: width 0.3s ease, padding 0.3s ease;
}

.col1 {
width: 50%;
}

.col2 {
width: 50%;
}

/* When the header becomes sticky, adjust the column widths and reduce padding */
.elementor-sticky--effects .col1 {
width: 20%;
padding: 5px 10px;
}

.elementor-sticky--effects .col2 {
width: 80%;
padding: 5px 10px;
}

/* Tablet Adjustments (screens 768px - 1024px wide) */
@media (min-width: 768px) and (max-width: 1024px) {
.col1 {
width: 40%;
padding: 10px 15px;
}

.col2 {
width: 60%;
padding: 10px 15px;
}

/* When sticky on tablet */
.elementor-sticky--effects .col1 {
width: 50%;
padding: 5px 10px;
}

.elementor-sticky--effects .col2 {
width: 50%;
padding: 5px 10px;
}
}

/* Mobile Adjustments (screens up to 767px wide) */
@media (max-width: 767px) {
.col1, .col2 {
width: 100%;
padding: 10px 15px;
}

/* When sticky on mobile, col1 and col2 side-by-side */
.elementor-sticky--effects .col1 {
width: 70%;
padding: 5px 10px;
}

.elementor-sticky--effects .col2 {
width: 30%;
padding: 5px 10px;
}
}