.elementor-kit-12{--e-global-color-primary:#1E3A8A;--e-global-color-secondary:#22D3EE;--e-global-color-text:#7A7A7A;--e-global-color-accent:#F97316;--e-global-color-481e39d:#124E75;--e-global-color-540e625:#FF0856;--e-global-color-5ca7cde:#D4A68F;--e-global-color-a56ea2e:#2EA6DF;--e-global-color-d0e76f4:#FFD93D;--e-global-color-5de6815:#1A1A1A;--e-global-color-c791212:#FFB800;--e-global-color-cf36ebd:#004B49;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-12 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.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);}@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-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ------------------------------------------------------------------ */
/* Custom CSS for Symmetrical Images - Applied Globally in Site Settings */
/* ------------------------------------------------------------------ */

/* 1. Target the Elementor Image Widget with the assigned class */
.symmetrical-image-container {
    /* Set the desired fixed dimensions (e.g., a square) */
    width: 300px; 
    height: 300px;
    
    /* Important: This ensures the image doesn't break out of the box */
    overflow: hidden; 
}

/* 2. Target the actual <img> tag inside the widget */
.symmetrical-image-container img {
    /* Make the image fill the entire container defined above */
    width: 100%;
    height: 100%;
    
    /* Crucial: This scales the image to cover the 300x300 container
       without stretching, automatically cropping the excess sides. */
    object-fit: cover;
}/* End custom CSS */