.elementor-11132 .elementor-element.elementor-element-125030c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#E5E5E5;--border-color:#E5E5E5;--border-radius:10px 10px 10px 10px;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-11132 .elementor-element.elementor-element-6ad460e{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-11132 .elementor-element.elementor-element-6ad460e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 10px 0px;border-style:solid;border-width:0px 0px 1px 0px;border-color:#E3E3E3;border-radius:0px 0px 0px 0px;}.elementor-11132 .elementor-element.elementor-element-6ad460e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:25px;font-weight:500;color:#343434;}.elementor-11132 .elementor-element.elementor-element-ea801c2{--display:flex;--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-11132 .elementor-element.elementor-element-72d1af6 > .elementor-widget-container{margin:0px 0px 0px 0px;}@media(max-width:767px){.elementor-11132 .elementor-element.elementor-element-125030c{--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-11132 .elementor-element.elementor-element-6ad460e{text-align:center;}}/* Start custom CSS for shortcode, class: .elementor-element-72d1af6 *//* === CATEGORY GRID STYLES === */
.cg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 per row on desktop */
    gap: 17px;
    margin-top: 24px;
    font-family: 'Poppins', sans-serif;
}

.cg-item {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: 0.2s ease-in-out;
    text-align: center;
}

.cg-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 13px;
    padding-left: 13px;
    padding-top: 17px;
    padding-bottom: 17px;
    text-decoration: none;
    color: inherit;
    height: 100%;
    justify-content: flex-start;
}

/* =========================
   PRIMARY: img.cg-thumb
   Keep natural aspect ratio, centered, with visible border & radius
   ========================= */
.cg-box img.cg-thumb,
img.cg-thumb,
picture img.cg-thumb {
    display: block !important;
    width: auto !important;                     
    max-width: calc(100% - 12px) !important;    
    height: auto !important;                    
    max-height: 300px !important;   /* ⬅️ increased from 120px */
    margin: 0 auto 12px !important;             
    border: 1px solid #e5e5e5 !important;       
    border-radius: 10px !important;             
    padding: 6px !important;                    
    background: #fff !important;                
    box-sizing: border-box !important;
    object-fit: contain !important;             
}


/* If your theme uses <img> wrapped in <figure> or <picture>, ensure it inherits */
.cg-box picture,
.cg-box figure {
    display: block;
}

/* =========================
   BACKGROUND-IMAGE fallback
   (in case thumbnail is a div with background-image)
   ========================= */
.cg-box .cg-thumb-bg,
.cg-thumb-bg {
    width: calc(100% - 12px);
    height: 120px;
    margin: 0 auto 12px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 6px;
    box-sizing: border-box;
    background-color: #fff;
}

/* =========================
   OPTIONAL: perfect-square variant
   Uncomment and apply class .cg-thumb--square if you want all thumbs square.
   ========================= */
/*
.cg-box img.cg-thumb.cg-thumb--square {
    width: calc(100% - 12px) !important;
    height: calc(100% - 12px) !important;
    aspect-ratio: 1 / 1;
    max-height: none !important;
    object-fit: contain !important;
}
*/

/* =========================
   Titles, counts, hover etc — unchanged, kept for completeness
   ========================= */
.cg-title {
    font-size: 13px;
    font-weight: 500;
    color: #111;
    text-transform: uppercase;
    margin-bottom: 4px;
    min-height: 25px;
    text-align: center;
}

.cg-meta {
    font-size: 12px;
    color: #666;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.cg-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* Breadcrumbs / back link (unchanged) */
.cg-breadcrumbs { font-family: 'Poppins', sans-serif; font-size: 14px; margin-bottom: 12px; color: #110072; }
.cg-breadcrumbs a { color: #110072; text-decoration: none; font-weight: 500; }
.cg-breadcrumbs .sep { margin: 0 5px; color: #aaa; }
.cg-breadcrumbs .current { font-weight: 500; color: #110072; }
.cg-back { margin-bottom: 16px; }
.cg-back a { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #110072; text-decoration: none; }

/* Responsive */
@media (max-width: 1024px) {
    .cg-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .cg-box {
        padding: 12px 6px; /* top/bottom 14px, left/right 10px — adjust later */
    }
}/* End custom CSS */