.off-canvas-content {
    --transition-duration: 1s;
    --transition-easing: ease;
    position: fixed;
    background-color: white;
    z-index: 10001; /* Keep a high z-index to ensure it's above the overlay */
    transition: transform var(--transition-duration) var(--transition-easing), visibility 0s var(--transition-duration);
    visibility: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: var(--offcanvas-width, 300px); /* Adjustable width */   
}
.toggle-text{
    padding-bottom:0;
    
}
.off-canvas-icon-text .off-canvas-toggle{
    gap:5px;
}
/*divi default nav menu header z-index */
.et_show_nav #main-header{
    z-index: 9999;
}
.off-canvas-top,
.off-canvas-bottom {
    height: var(--offcanvas-height, 300px); /* Default height, overridden by JavaScript */
}
.off-canvas-toggle{
    display:flex;
    cursor:pointer
}
.off-canvas-toggle img{
    border-style:solid;
}

/* Hide off-canvas content by default */
.preload-hidden{
    display:none;
}
.off-canvas-content.preload-hidden {
    visibility: hidden !important;
}
.off-canvas-left.preload-hidden {
    transform: translateX(-100%); /* Hidden to the left */
}

.off-canvas-right.preload-hidden {
    transform: translateX(100%); /* Hidden to the right */
}

.off-canvas-top.preload-hidden {
    transform: translateY(-100%); /* Hidden to the top */
}

.off-canvas-bottom.preload-hidden {
    transform: translateY(100%); /* Hidden to the bottom */
}

/* Open State */
.off-canvas-content.open {
    visibility: visible;
    /* display:block; */
    transition: transform var(--transition-duration) var(--transition-easing), visibility 0s 0s;
}

/* Position: Left */
.off-canvas-left {
    left: 0;
    top: 0;
    height: 100%;
    transform: translateX(-100%);
}

.off-canvas-left.open {
    transform: translateX(0);
}

/* Position: Right */

.off-canvas-right {
    right: 0;
    top: 0;
    height: 100%;
    transform: translateX(100%);
}

.off-canvas-right.open {
    transform: translateX(0);
}

/* Top Off-Canvas */
.off-canvas-top {
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(-100%);
}

.off-canvas-top.open {
    transform: translateY(0);
}

/* Bottom Off-Canvas */
.off-canvas-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
}

.off-canvas-bottom.open {
    transform: translateY(0);
}
/*All position*/
.off-canvas-left,
.off-canvas-right,
.off-canvas-top,
.off-canvas-bottom {
    will-change:transform;
}

/* this is body class added to body when off-canvas is open */
.off-canvas-open {
    overflow: hidden !important;
}
/*================ Overlay================== */

.off-canvas-overlay {
    --transition-duration: 1s;
    --transition-easing: ease;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-color, rgba(0, 0, 0, 0.5)); /* Customizable */
    z-index: 9999; /* Lower than off-canvas content */
    opacity: 0; /* Start fully transparent */
    visibility: hidden; /* Initially hidden */
    transition: opacity var(--transition-duration, 1s) var(--transition-easing, ease-in-out), 
    visibility 0s var(--transition-duration, 1s);
}

.off-canvas-overlay.open {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Make it visible */
}

.off-canvas-overlay:not(.open) {
    opacity: 0; /* Hide the overlay */
    visibility: hidden; /* Prevent interaction */
    transition: opacity var(--transition-duration) var(--transition-easing), visibility 0s var(--transition-duration); /* Wait for opacity to end before hiding */
}



/* Close Button */
.off-canvas-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    font-size: 22px;
    z-index: 10002; /* Ensure close button is above everything */
    font-weight: bold;
}
.admin-bar .off-canvas-content:not(.off-canvas-bottom){
  top: 32px;
}
/*================================ Animation =============================================
============================================================================================
==========================================================================================*/
/* Slide animations (default behavior) */
.off-canvas-left {
    transform: translateX(-100%);
    transition: transform var(--transition-duration, 1s) var(--transition-easing, ease-in-out);
}
.off-canvas-left.open {
    transform: translateX(0);
}

.off-canvas-right {
    transform: translateX(100%);
    transition: transform var(--transition-duration, 1s) var(--transition-easing, ease-in-out);
}
.off-canvas-right.open {
    transform: translateX(0);
}

.off-canvas-top {
    transform: translateY(-100%);
    transition: transform var(--transition-duration, 1s) var(--transition-easing, ease-in-out);
}
.off-canvas-top.open {
    transform: translateY(0);
}

.off-canvas-bottom {
    transform: translateY(100%);
    transition: transform var(--transition-duration, 1s) var(--transition-easing, ease-in-out);
}
.off-canvas-bottom.open {
    transform: translateY(0);
}


/* Push animations (push the page content aside) */
.push-left {
    transform: translateX(-100%);
}
.push-left.open {
    transform: translateX(0);
}

.push-right {
    transform: translateX(100%);
}
.push-right.open {
    transform: translateX(0);
}

.push-top {
    transform: translateY(-100%);
}
.push-top.open {
    transform: translateY(0);
}

.push-bottom {
    transform: translateY(100%);
}
.push-bottom.open {
    transform: translateY(0);
}



/* Reveal animations (slide the off-canvas under the page content) */
/* Reveal Animation */
.off-canvas-left.reveal-left {
    transform: translateX(-100%);
}
.off-canvas-left.reveal-left.open {
    transform: translateX(0);
}

.off-canvas-right.reveal-right {
    transform: translateX(100%);
}
.off-canvas-right.reveal-right.open {
    transform: translateX(0);
}

.off-canvas-top.reveal-top {
    transform: translateY(-100%);
}
.off-canvas-top.reveal-top.open {
    transform: translateY(0);
}

.off-canvas-bottom.reveal-bottom {
    transform: translateY(100%);
}
.off-canvas-bottom.reveal-bottom.open {
    transform: translateY(0);
}

.reveal-left, .reveal-right, .reveal-top, .reveal-bottom {
    z-index: 1; /* Lower z-index to stay under the main content */
    /* transition: z-index var(--transition-duration) var(--transition-easing);  */
}
.reveal-left.open, .reveal-right.open, .reveal-top.open, .reveal-bottom.open {
    z-index: 10001; /* Move on top of everything */
} 

/* Fade animation */
.fade {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-duration, 1s) var(--transition-easing, ease-in-out), 
                visibility 0s var(--transition-duration, 1s);
}

.fade.open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition-duration, 1s) var(--transition-easing, ease-in-out), 
                visibility 0s 0s;
}

/* Custom easing (can be applied to any of the above) */
.ease-in {
    transition-timing-function: ease-in;
}
.ease-out {
    transition-timing-function: ease-out;
}
.linear {
    transition-timing-function: linear;
}

.ease-in-out {
    transition-timing-function: ease-in-out;
}

.ease-out-cubic {
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.ease-in-cubic {
    transition-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19); /* Slow start, fast end */
}
.ease-in-expo {
    transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); /* Fast start, slow end */
}

.ease-out-expo {
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); /* Slow start, fast end */
}

.ease-in-out-back {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Overshoot before settling */
}

.ease-in-circ {
    transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); /* Circular easing in */
}

.ease-out-circ {
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); /* Circular easing out */
}

.ease-in-out-circ {
    transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); /* Smooth circular in and out */
}

.ease-in-out-quint {
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); /* Strong ease-in and ease-out */
}




body:not(.et-fb) .off-canvas-content,
body:not(.et-fb) .off-canvas-content.open,
body:not(.et-fb) #page-container {
    transition: transform var(--transition-duration) var(--transition-easing);
}
body:not(.et-fb) .off-canvas-close-btn {
    transition: transform var(--transition-duration) var(--transition-easing);
}