.elementor-190 .elementor-element.elementor-element-57a6f162{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-190 .elementor-element.elementor-element-1f35e169{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:400;}.elementor-190 .elementor-element.elementor-element-1f35e169.elementor-element{--align-self:flex-start;}.elementor-190 .elementor-element.elementor-element-98d5da3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.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-190 .elementor-element.elementor-element-f9a2c37{text-align:center;}.elementor-190 .elementor-element.elementor-element-f9a2c37 .elementor-heading-title{font-family:"RocknRoll One", Sans-serif;font-weight:600;color:#000000;}.elementor-190 .elementor-element.elementor-element-0c7e1e3{--display:flex;--margin-top:-37px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}@media(min-width:768px){.elementor-190 .elementor-element.elementor-element-57a6f162{--width:45%;}}/* Start custom CSS for html, class: .elementor-element-6138ec7 *//* Import Fonts & Icons */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');

.premium-recipe-grid {
    display: grid;
    /* Responsive columns: 3 on desktop, auto-adjusts smaller */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px 30px; /* Vertical gap 50px, Horizontal gap 30px */
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Poppins', sans-serif;
}

/* --- Card Styles --- */
.recipe-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Smooth hover lift */
    transition: transform 0.3s ease;
}

/* --- Image Container --- */
.image-frame {
    display: block;
    width: 100%;
    /* 2:3 Ratio matches your uploaded image dimensions exactly */
    aspect-ratio: 2 / 3; 
    border-radius: 12px; /* Softens the corners */
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Premium shadow */
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover Effect: Zoom Image */
.recipe-card:hover .image-frame img {
    transform: scale(1.08); /* Gentle zoom */
}

/* --- Typography (Matches Screenshot) --- */
.card-title {
    font-size: 20px;
    font-weight: 800; /* Extra Bold */
    line-height: 1.25;
    color: #000;
    margin: 0 0 10px 0;
    padding: 0 5px;
    text-transform: lowercase; /* Forces text to lowercase like the design */
    transition: color 0.3s ease;
}

.recipe-card:hover .card-title {
    color: #444; /* Slight color shift on hover */
}

/* --- Meta Data (Time) --- */
.card-meta {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.card-meta i {
    font-size: 14px;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .premium-recipe-grid {
        grid-template-columns: 1fr; /* 1 Column on mobile */
        gap: 40px;
        padding: 40px 20px;
    }
    
    .card-title {
        font-size: 22px; /* Bigger text on mobile for readability */
    }
}/* End custom CSS */