.elementor-8208 .elementor-element.elementor-element-638978ae{--display:flex;--min-height:79.5vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:1;--border-radius:50px 50px 50px 50px;--margin-top:24px;--margin-bottom:50px;--margin-left:45px;--margin-right:45px;}.elementor-8208 .elementor-element.elementor-element-638978ae:not(.elementor-motion-effects-element-type-background), .elementor-8208 .elementor-element.elementor-element-638978ae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.sdguthrie-international.com/wp-content/uploads/unlimited_elements/sd-guthrie-international-faq-chef-cooking-oil-wok.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-8208 .elementor-element.elementor-element-638978ae::before, .elementor-8208 .elementor-element.elementor-element-638978ae > .elementor-background-video-container::before, .elementor-8208 .elementor-element.elementor-element-638978ae > .e-con-inner > .elementor-background-video-container::before, .elementor-8208 .elementor-element.elementor-element-638978ae > .elementor-background-slideshow::before, .elementor-8208 .elementor-element.elementor-element-638978ae > .e-con-inner > .elementor-background-slideshow::before, .elementor-8208 .elementor-element.elementor-element-638978ae > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(90deg, #000000 30%, #0000001F 100%);}.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-8208 .elementor-element.elementor-element-6765b9b2{text-align:center;}.elementor-8208 .elementor-element.elementor-element-6765b9b2 .elementor-heading-title{font-family:"Aeonik", Sans-serif;font-weight:700;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );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-8208 .elementor-element.elementor-element-39948f21{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;text-align:center;color:#FFFFFF;}.elementor-8208 .elementor-element.elementor-element-14dd604c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:050px;}.elementor-8208 .elementor-element.elementor-element-7e72945e{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}@media(min-width:768px){.elementor-8208 .elementor-element.elementor-element-638978ae{--width:auto !important;}}@media(max-width:1440px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-8208 .elementor-element.elementor-element-7e72945e{--grid-auto-flow:row;}}@media(max-width:1200px){.elementor-8208 .elementor-element.elementor-element-7e72945e{--grid-auto-flow:row;}}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-8208 .elementor-element.elementor-element-7e72945e{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-8208 .elementor-element.elementor-element-7e72945e{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-14dd604c *//* 1. Re-enable clicks for images inside links (overrides your theme's global restriction) */
a img {
    pointer-events: auto !important;
}

/* 2. Fix the layout overlap so the link box correctly wraps the floated image */
.elementor-element-eecbc10 .elementor-widget-container > a {
    display: inline-block !important;
    width: auto;
    height: auto;
}

/* 3. Optional: Ensure the paragraph text wraps nicely without hidden overlap */
.elementor-element-eecbc10 p {
    display: block;
    overflow: hidden; /* This creates a new block formatting context to prevent box overlap */
}





/* 1. The main card container */
.elementor-element-4a3634da {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    max-width: 400px; /* Adjust based on your layout */
    margin: 20px auto;
}

/* 2. Style the image to be full width and remove the float */
.elementor-element-4a3634da img.alignleft {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 !important;
    pointer-events: auto !important; /* Ensuring it's clickable */
}

.elementor-element-4a3634da p {
    margin: 0 !important;
}

/* 3. Style the "Read More" button (currently your <center> link) */
.elementor-element-4a3634da center {
    padding: 20px 25px 30px 25px;
    text-align: left !important; /* Change from center to left */
}

.elementor-element-4a3634da center a {
    display: inline-flex;
    align-items: center;
    background-color: #fdd86f; /* Yellow from your image */
    color: #000 !important;
    text-decoration: none !important;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    margin-top: 15px;
    transition: background 0.3s ease;
}

.elementor-element-4a3634da center a:hover {
    background-color: #fccb3f;
}

/* Adding the arrow icon to the button via CSS */
.elementor-element-4a3634da center a::after {
    content: '→';
    margin-left: 10px;
    font-size: 20px;
}

/* 4. Formatting the title text (the link text) */
.elementor-element-4a3634da center a {
    /* If you want the title to appear above the button, 
       we'd ideally need a slightly different HTML structure, 
       but this styles your existing link as the button. */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e72945e *//* 1. Re-enable clicks for images inside links (overrides your theme's global restriction) */
a img {
    pointer-events: auto !important;
}

/* 2. Fix the layout overlap so the link box correctly wraps the floated image */
.elementor-element-eecbc10 .elementor-widget-container > a {
    display: inline-block !important;
    width: auto;
    height: auto;
}

/* 3. Optional: Ensure the paragraph text wraps nicely without hidden overlap */
.elementor-element-eecbc10 p {
    display: block;
    overflow: hidden; /* This creates a new block formatting context to prevent box overlap */
}





/* 1. The main card container */
.elementor-element-eecbc10 {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    max-width: 400px; /* Adjust based on your layout */
    margin: 20px auto;
}

/* 2. Style the image to be full width and remove the float */
.elementor-element-eecbc10 img.alignleft {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 !important;
    pointer-events: auto !important; /* Ensuring it's clickable */
}

.elementor-element-eecbc10 p {
    margin: 0 !important;
}

/* 3. Style the "Read More" button (currently your <center> link) */
.elementor-element-eecbc10 center {
    padding: 20px 25px 30px 25px;
    text-align: left !important; /* Change from center to left */
}

.elementor-element-eecbc10 center a {
    display: inline-flex;
    align-items: center;
    background-color: #fdd86f; /* Yellow from your image */
    color: #000 !important;
    text-decoration: none !important;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    margin-top: 15px;
    transition: background 0.3s ease;
}

.elementor-element-eecbc10 center a:hover {
    background-color: #fccb3f;
}

/* Adding the arrow icon to the button via CSS */
.elementor-element-eecbc10 center a::after {
    content: '→';
    margin-left: 10px;
    font-size: 20px;
}

/* 4. Formatting the title text (the link text) */
.elementor-element-eecbc10 center a {
    /* If you want the title to appear above the button, 
       we'd ideally need a slightly different HTML structure, 
       but this styles your existing link as the button. */
}/* End custom CSS */
/* Start JX Custom Fonts CSS */@font-face{font-family:'Aeonik';font-style:normal;font-weight:400;src:url('https://www.sdguthrie-international.com/wp-content/uploads/2025/12/fonnts.com-Aeonik-Regular.ttf')format('truetype');}@font-face{font-family:'Aeonik';font-style:normal;font-weight:700;src:url('https://www.sdguthrie-international.com/wp-content/uploads/2025/12/fonnts.com-Aeonik-Bold.ttf')format('truetype');}/* End JX Custom Fonts CSS */