/*SHOW OFFCANVAS MENU SOONER*/
@media screen and (max-width: 1280px) {
    .sp-megamenu-parent {display: none !important;}
    #offcanvas-toggler {display: flex !important;}
}

/*BACKGROUND IMAGES FOR MENU ITEM PAGES*/
body.itemid-135 {
    background-image: url("/images/bg-clouds.jpg") !important; 
    background-size: cover !important;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Keeps the image fixed when scrolling */
    background-color: #f0f0f0; /* Fallback color while the image loads */
  }

body.itemid-127 {
  background-image: url("/images/bg-rainbow.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #f0f0f0;
}

 body.itemid-125 {
  background-image: url("/images/bg-diary2.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #f0f0f0;
}

body.itemid-137 {
  background-image: url("/images/bg-flowers.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #f0f0f0;
}

body.itemid-140 {
  background-image: url("/images/bg-courses.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #f0f0f0;
}

/* Targets the main Events Booking container on the What's On page */
.itemid-125 .eb-container {
    /* Set the background to white */
    background-color: white; 
    
    /* Add the white border */
    border: 3px solid white; 
    
    /* NEW: Round the corners by 10 pixels */
    border-radius: 10px; 
    
    /* Add padding inside the border */
    padding: 15px; 
    
    /* Add a subtle shadow for depth */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

/*RESPONSIVENESS FOR HOME PAGE SLIDESHOW*/
/* Media query for screens up to 767px wide (Standard mobile breakpoint) */
@media (max-width: 767px) {
    /* Target large headings (H1) and significantly reduce their size */
    .sp-page-builder h1, 
    .sppb-addon-wrapper h1 {
        font-size: 2rem !important;
        line-height: 1.1;
    }