.elementor-1630 .elementor-element.elementor-element-675f94f{--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-1630 .elementor-element.elementor-element-088d8a9{--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;}/* Start custom CSS for html, class: .elementor-element-b89f728 *//*====================================================
HALAAL FOOD HERO
====================================================*/

.halaal-food-hero{

    position:relative;

    min-height:850px;

    background:
    linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.65)),
    url("YOUR-HALAAL-FOOD-HERO.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    overflow:hidden;

}

.halaal-food-hero .ummah-overlay{

    position:absolute;

    inset:0;

}

.halaal-food-hero .ummah-hero-content{

    position:relative;

    z-index:5;

    width:92%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:58% 42%;

    grid-template-areas:
    "left right"
    "cards cards"
    "cats cats";

    column-gap:60px;

    row-gap:35px;

    align-items:center;

    padding:90px 0;

}

/*====================================================
LEFT
====================================================*/

.halaal-food-hero .hero-left{

    grid-area:left;

}

.halaal-food-hero .hero-badge{

    display:inline-flex;

    align-items:center;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(15px);

    color:#FFFFFF;

    font-size:14px;

    font-weight:600;

    margin-bottom:30px;

}

.halaal-food-hero h1{

    margin:0 0 25px;

    color:#FFFFFF;

    font-size:68px;

    line-height:1.05;

    font-weight:800;

}

.halaal-food-hero p{

    max-width:700px;

    color:#F8F6F1;

    font-size:20px;

    line-height:1.8;

}

/*====================================================
RIGHT
====================================================*/

.halaal-food-hero .hero-right{

    grid-area:right;

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.halaal-food-hero .hero-search{

    width:100%;

    max-width:470px;

}

.halaal-food-hero .hero-search > *{

    background:#FFFFFF !important;

    border-radius:28px !important;

    padding:15px !important;

    box-shadow:0 18px 45px rgba(0,0,0,.15) !important;

}

.halaal-food-hero .hero-search form{

    margin:0 !important;

    padding:0 !important;

}

.halaal-food-hero .hero-search input,
.halaal-food-hero .hero-search select{

    border:none !important;

    box-shadow:none !important;

    color:#2B2B2B !important;

}

.halaal-food-hero .hero-search button{

    background:#0F6B50 !important;

    color:#FFFFFF !important;

    border:none !important;

    border-radius:16px !important;

}

/*====================================================
CARDS
====================================================*/

.halaal-food-hero .hero-info{

    grid-area:cards;

    display:grid;

    grid-template-columns:320px 1fr;

    gap:25px;

}

.halaal-food-hero .hero-card{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(16px);

    border-radius:24px;

    padding:28px;

    display:flex;

    gap:20px;

    color:#FFFFFF;

}

.halaal-food-hero .card-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.12);

    font-size:28px;

}

.halaal-food-hero .card-content{

    flex:1;

}

.halaal-food-hero .card-content small{

    display:block;

    margin-bottom:10px;

    opacity:.85;

}

.halaal-food-hero .card-content h3{

    margin:0 0 10px;

    font-size:34px;

}

.halaal-food-hero .prayer-times{

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-top:18px;

}

.halaal-food-hero .prayer-times div{

    text-align:center;

}

.halaal-food-hero .prayer-times strong{

    display:block;

    margin-bottom:8px;

}

.halaal-food-hero .prayer-times a{

    color:#FFFFFF;

    text-decoration:none;

}

.halaal-food-hero .prayer-times a:hover{

    color:#D4AF37;

}

/*====================================================
CATEGORY BUTTONS
====================================================*/

.halaal-food-hero .hero-categories{

    grid-area:cats;

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.halaal-food-hero .hero-categories a{

    padding:12px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    color:#FFFFFF;

    text-decoration:none;

    transition:.3s;

}

.halaal-food-hero .hero-categories a:hover{

    background:#0F6B50;

}

/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:1024px){

.halaal-food-hero .ummah-hero-content{

grid-template-columns:1fr;

grid-template-areas:
"left"
"right"
"cards"
"cats";

}

.halaal-food-hero .hero-right{

justify-content:flex-start;

}

.halaal-food-hero .hero-search{

max-width:100%;

}

.halaal-food-hero .hero-info{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.halaal-food-hero{

min-height:auto;

}

.halaal-food-hero .ummah-hero-content{

padding:70px 0;

}

.halaal-food-hero h1{

font-size:42px;

}

.halaal-food-hero p{

font-size:17px;

}

.halaal-food-hero .hero-categories{

justify-content:center;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0a7d50a *//*====================================================
FEATURED FOOD
====================================================*/

.featured-food{

    padding:100px 0;

    background:#FFFFFF;

}

.food-filter{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:50px;

}

.food-filter a{

    padding:12px 24px;

    border-radius:50px;

    background:#F8F6F1;

    color:#2B2B2B;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.food-filter a.active,
.food-filter a:hover{

    background:#0F6B50;

    color:#FFFFFF;

}

.food-listings{

    margin-top:30px;

}/* End custom CSS */