.elementor-kit-7{--e-global-color-primary:#3777BC;--e-global-color-secondary:#66A5D9;--e-global-color-text:#000000;--e-global-color-accent:#3777BC;--e-global-color-9832398:#F8F8F8;--e-global-color-b5c74c0:#FFFFFF;--e-global-color-ac72243:#E5E5E5;--e-global-color-d7f9d78:#0000004D;--e-global-color-d20e09c:#F8F9FA;--e-global-color-5bb2a01:#E0E0E0;--e-global-color-a4dc20c:#00000014;--e-global-color-09c8bbb:#F7F7F7;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-size:42px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-size:32px;--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-primary-font-size:32px;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-size:26px;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.6em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================
   TWENTY20 BEFORE/AFTER SLIDER STYLING
   ======================================== */

/* Container styling */
.twentytwenty-container {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Images */
.twentytwenty-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Vertical handle/divider line */
.twentytwenty-handle {
    background: #3777bc !important;
    width: 4px !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Handle circle */
.twentytwenty-handle:before,
.twentytwenty-handle:after {
    content: '';
    display: block;
    background: #FFFFFF;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid #3777bc;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    z-index: 30;
}

/* Left and right arrows on handle */
.twentytwenty-left-arrow,
.twentytwenty-right-arrow {
    width: 0;
    height: 0;
    border: 8px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

.twentytwenty-left-arrow {
    border-right: 8px solid #3777bc;
    left: 50%;
    margin-left: -17px;
}

.twentytwenty-right-arrow {
    border-left: 8px solid #3777bc;
    right: 50%;
    margin-right: -17px;
}

/* Before and After labels */
.twentytwenty-before-label,
.twentytwenty-after-label {
    position: absolute;
    top: 20px;
    padding: 0;
    z-index: 20;
}

.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    background: rgba(55, 119, 188, 0.95) !important;
    color: #FFFFFF !important;
    padding: 10px 24px !important;
    border-radius: 4px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.twentytwenty-before-label {
    left: 20px;
}

.twentytwenty-after-label {
    right: 20px;
}

/* Overlay styling */
.twentytwenty-overlay {
    background: rgba(0,0,0,0.5);
    transition: background 0.3s ease;
}

.twentytwenty-overlay:hover {
    background: rgba(0,0,0,0.3);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .twentytwenty-before-label:before,
    .twentytwenty-after-label:before {
        font-size: 12px !important;
        padding: 8px 16px !important;
    }
    
    .twentytwenty-before-label {
        left: 10px;
    }
    
    .twentytwenty-after-label {
        right: 10px;
    }
    
    .twentytwenty-handle:before,
    .twentytwenty-handle:after {
        width: 35px;
        height: 35px;
    }
    
    .twentytwenty-left-arrow,
    .twentytwenty-right-arrow {
        border-width: 6px;
    }
    
    .twentytwenty-left-arrow {
        border-right-width: 6px;
        margin-left: -14px;
    }
    
    .twentytwenty-right-arrow {
        border-left-width: 6px;
        margin-right: -14px;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .twentytwenty-before-label:before,
    .twentytwenty-after-label:before {
        font-size: 13px !important;
        padding: 9px 20px !important;
    }
}

/* Smooth transitions */
.twentytwenty-handle,
.twentytwenty-before-label,
.twentytwenty-after-label {
    transition: opacity 0.3s ease;
}

/* Hide labels on drag (optional - remove if you want labels always visible) */
.twentytwenty-container.active .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-after-label {
    opacity: 0.7;/* End custom CSS */