:root{

    /* Brand */

    --mani-primary:#d64b5a;
    --mani-primary-hover:#be3b49;

    --mani-dark:#1d2327;

    --mani-green:#204936;

    --mani-light:#ffffff;

    --mani-bg:#f9f9f9;

    --mani-text:#444;

    --mani-heading:#222;



    /* Radius */

    --mani-radius-xs:8px;
    --mani-radius-sm:12px;
    --mani-radius:18px;
    --mani-radius-lg:28px;



    /* Shadow */

    --mani-shadow-sm:0 8px 18px rgba(0,0,0,.05);

    --mani-shadow:0 18px 40px rgba(0,0,0,.08);

    --mani-shadow-lg:0 25px 60px rgba(0,0,0,.12);



    /* Transition */

    --mani-transition:.35s ease;



    /* Section Padding */

    --mani-section-padding:90px 0;



    /* Max Width */

    --mani-container:1320px;

}
.ml-section{

    padding:var(--mani-section-padding);

    position:relative;

}
.ml-light{

    background:#fff;

}
.ml-dark{

    background:var(--mani-dark);

    color:#fff;

}
.ml-green{

    background:var(--mani-green);

    color:#fff;

}
.ml-gray{

    background:#fafafa;

}
.ml-container{

    max-width:1320px;

    margin:auto;

}
.ml-label{

    display:inline-block;

    padding:6px 16px;

    border-radius:100px;

    background:#fdeef0;

    color:var(--mani-primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}
.ml-title{

    font-size:46px;

    font-weight:700;

    line-height:1.2;

    margin:18px 0;

}
.ml-description{

    max-width:760px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

    color:#666;

}

/* ==========================================================
   2. RESET
========================================================== */

.ml-section *{
    box-sizing:border-box;
}

.ml-section img{
    max-width:100%;
    height:auto;
    display:block;
}

.ml-section a{
    text-decoration:none;
    transition:var(--mani-transition);
}

.ml-section ul{
    margin:0;
    padding:0;
    list-style:none;
}
/* ==========================================================
   3. TYPOGRAPHY
========================================================== */

.ml-heading{

    color:var(--mani-heading);

    font-weight:700;

    line-height:1.2;

}

.ml-heading-white{

    color:#fff;

}

.ml-text{

    color:var(--mani-text);

    font-size:18px;

    line-height:1.9;

}

.ml-text-white{

    color:rgba(255,255,255,.85);

}

.ml-center{

    text-align:center;

}

.ml-left{

    text-align:left;

}

.ml-right{

    text-align:right;

}
/* ==========================================================
   4. SPACING
========================================================== */

.ml-mt-1{margin-top:10px;}
.ml-mt-2{margin-top:20px;}
.ml-mt-3{margin-top:30px;}
.ml-mt-4{margin-top:40px;}
.ml-mt-5{margin-top:60px;}

.ml-mb-1{margin-bottom:10px;}
.ml-mb-2{margin-bottom:20px;}
.ml-mb-3{margin-bottom:30px;}
.ml-mb-4{margin-bottom:40px;}
.ml-mb-5{margin-bottom:60px;}

.ml-pt{
    padding-top:90px;
}

.ml-pb{
    padding-bottom:90px;
}
/* ==========================================================
   5. HERO
========================================================== */

.ml-hero{

    position:relative;

    min-height:700px;

    display:flex;

    align-items:center;

    background-size:cover;

    background-position:center center;

    overflow:hidden;

}

.ml-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.ml-hero .container{

    position:relative;

    z-index:2;

}

.ml-hero-content{

    max-width:680px;

}

.ml-hero-title{

    font-size:60px;

    line-height:1.1;

    font-weight:700;

    color:#fff;

    margin-bottom:25px;

}

.ml-hero-text{

    font-size:20px;

    line-height:1.9;

    color:rgba(255,255,255,.90);

    margin-bottom:35px;

}
/* ==========================================================
   6. BUTTONS
========================================================== */

.ml-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    border-radius:100px;

    border:none;

    cursor:pointer;

    transition:var(--mani-transition);

}

.ml-btn-primary{

    background:var(--mani-primary);

    color:#fff;

}

.ml-btn-primary:hover{

    background:var(--mani-primary-hover);

    color:#fff;

}

.ml-btn-secondary{

    background:#fff;

    color:#222;

}

.ml-btn-secondary:hover{

    background:#f2f2f2;

}

.ml-btn-outline{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 32px;

    border-radius:50px;

    border:2px solid var(--ml-primary);

    background:#f4f2f2;

    color:var(--ml-primary);

    text-decoration:none;

    transition:.3s;

    font-weight:600;

}

.ml-btn-outline:hover{

    color:#ff6868;

}
/* ==========================================================
   7. CARD SYSTEM
========================================================== */

.ml-card{

    background:#fff;

    border-radius:var(--mani-radius);

    box-shadow:var(--mani-shadow);

    overflow:hidden;

    transition:var(--mani-transition);

}

.ml-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--mani-shadow-lg);

}

.ml-card-body{

    padding:30px;

}
/* ==========================================================
   8. ICON BOX
========================================================== */

.ml-icon-box{

    text-align:center;

}

.ml-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#fdeef0;

    color:var(--mani-primary);

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    font-size:34px;

}

.ml-icon-box h3{

    margin-top:20px;

    font-size:24px;

}

.ml-icon-box p{

    margin-top:15px;

    line-height:1.8;

}
/* ==========================================================
   9. TRUST BOX
========================================================== */

.ml-trust-card{

    background:#fff;

    border-radius:18px;

    box-shadow:var(--mani-shadow-sm);

    padding:35px;

    text-align:center;

    height:100%;

}

.ml-trust-number{

    font-size:42px;

    color:var(--mani-primary);

    font-weight:700;

}

.ml-trust-title{

    font-size:18px;

    margin-top:15px;

    font-weight:600;

}

.ml-trust-text{

    font-size:15px;

    color:#777;

}
/* ==========================================================
   10. FEATURED PRODUCTS
========================================================== */

.ml-products{

    position:relative;

}

.ml-product-card{

    background:#fff;

    border-radius:var(--mani-radius);

    overflow:hidden;

    box-shadow:var(--mani-shadow-sm);

    transition:var(--mani-transition);

    height:100%;

}

.ml-product-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--mani-shadow-lg);

}

.ml-product-image{

    overflow:hidden;

}

.ml-product-image img{

    width:100%;

    transition:.6s;

}

.ml-product-card:hover img{

    transform:scale(1.08);

}

.ml-product-body{

    padding:22px;

}

.ml-product-title{

    font-size:22px;

    font-weight:600;

    color:#222;

    margin-bottom:12px;

}

.ml-product-price{

    color:var(--mani-primary);

    font-size:24px;

    font-weight:700;

}
/* ==========================================================
   11. CATEGORY BOXES
========================================================== */

.ml-category{

    position:relative;

    overflow:hidden;

    border-radius:22px;

}

.ml-category img{

    width:100%;

    transition:.6s;

}

.ml-category:hover img{

    transform:scale(1.08);

}

.ml-category-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,rgba(0,0,0,.65),transparent);

}

.ml-category-title{

    position:absolute;

    left:30px;

    bottom:25px;

    color:#fff;

    font-size:28px;

    font-weight:700;

}
/* ==========================================================
   12. CONTENT BLOCK
========================================================== */

.ml-content{

    display:flex;

    align-items:center;

}

.ml-content-image img{

    border-radius:24px;

    box-shadow:var(--mani-shadow);

}

.ml-content-text{

    padding-left:60px;

}

.ml-content-text h2{

    margin-bottom:25px;

}

.ml-content-text p{

    margin-bottom:18px;

}
/* ==========================================================
   13. LIST
========================================================== */

.ml-list{

    margin-top:30px;

}

.ml-list li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:18px;

    line-height:1.8;

}

.ml-list i{

    color:var(--mani-primary);

    font-size:18px;

    margin-top:4px;

}
/* ==========================================================
   14. DELIVERY AREA
========================================================== */

.ml-city{

    background:#fff;

    border-radius:16px;

    box-shadow:var(--mani-shadow-sm);

    padding:22px;

    text-align:center;

    transition:.35s;

}

.ml-city:hover{

    transform:translateY(-6px);

}

.ml-city i{

    color:var(--mani-primary);

    font-size:36px;

    margin-bottom:15px;

}

.ml-city h4{

    margin:0;

}
/* ==========================================================
   15. GALLERY
========================================================== */

.ml-gallery{

    overflow:hidden;

    border-radius:18px;

}

.ml-gallery img{

    width:100%;

    transition:.6s;

}

.ml-gallery:hover img{

    transform:scale(1.08);

}
/* ==========================================================
   16. TESTIMONIAL
========================================================== */

.ml-testimonial{

    background:#fff;

    border-radius:20px;

    padding:40px;

    box-shadow:var(--mani-shadow);

}

.ml-testimonial-stars{

    color:#ffb400;

    margin-bottom:15px;

}

.ml-testimonial-name{

    font-weight:700;

    margin-top:20px;

}

.ml-testimonial-location{

    color:#999;

}
/* ==========================================================
   17. FAQ
========================================================== */

.ml-faq{

    max-width:900px;

    margin:auto;

}

.ml-faq .accordion-item{

    border:none;

    border-radius:16px;

    overflow:hidden;

    margin-bottom:18px;

    box-shadow:var(--mani-shadow-sm);

}

.ml-faq .accordion-button{

    font-size:20px;

    font-weight:600;

    padding:24px;

}

.ml-faq .accordion-button:not(.collapsed){

    background:var(--mani-primary);

    color:#fff;

}

.ml-faq .accordion-body{

    padding:25px;

    line-height:1.9;

}
/* ==========================================================
   18. CTA
========================================================== */

.ml-cta{

    position:relative;

    text-align:center;

    padding:110px 0;

    overflow:hidden;

}

.ml-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}

.ml-cta-content{

    position:relative;

    z-index:2;

}

.ml-cta h2{

    color:#fff;

    font-size:54px;

    margin-bottom:25px;

}

.ml-cta p{

    color:#fff;

    font-size:20px;

    margin-bottom:35px;

}
/* ==========================================================
   19. ARTICLE CARD
========================================================== */

.ml-article{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--mani-shadow-sm);

    transition:.35s;

}

.ml-article:hover{

    transform:translateY(-8px);

}

.ml-article-image img{

    width:100%;

}

.ml-article-body{

    padding:28px;

}

.ml-article-title{

    font-size:24px;

    font-weight:700;

}

.ml-article-text{

    margin-top:15px;

    line-height:1.8;

}
/* ==========================================================
   20. UTILITIES
========================================================== */

.ml-rounded{

    border-radius:var(--mani-radius);

}

.ml-shadow{

    box-shadow:var(--mani-shadow);

}

.ml-shadow-lg{

    box-shadow:var(--mani-shadow-lg);

}

.ml-overflow{

    overflow:hidden;

}

.ml-relative{

    position:relative;

}

.ml-z2{

    position:relative;

    z-index:2;

}
/* ==========================================================
   21. HELPERS
========================================================== */

/* ---------- Background ---------- */

.ml-bg-cover{
    background-size:cover;
}

.ml-bg-center{
    background-position:center center;
}

.ml-bg-fixed{
    background-attachment:fixed;
}

.ml-bg-no-repeat{
    background-repeat:no-repeat;
}



/* ---------- Overlay ---------- */

.ml-overlay-dark{
    position:relative;
}

.ml-overlay-dark::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}

.ml-overlay-light{
    position:relative;
}

.ml-overlay-light::before{

    content:"";

    position:absolute;

    inset:0;

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

}

.ml-overlay-primary{
    position:relative;
}

.ml-overlay-primary::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(214,75,90,.72);

}

.ml-overlay-content{

    position:relative;

    z-index:2;

}



/* ---------- Max Width ---------- */

.ml-max-500{
    max-width:500px;
}

.ml-max-600{
    max-width:600px;
}

.ml-max-700{
    max-width:700px;
}

.ml-max-800{
    max-width:800px;
}

.ml-max-900{
    max-width:900px;
}

.ml-max-1000{
    max-width:1000px;
}

.ml-max-auto{

    margin:auto;

}



/* ---------- Radius ---------- */

.ml-radius{
    border-radius:var(--mani-radius);
}

.ml-radius-lg{
    border-radius:28px;
}

.ml-radius-circle{
    border-radius:50%;
}



/* ---------- Shadow ---------- */

.ml-shadow-sm{
    box-shadow:var(--mani-shadow-sm);
}

.ml-shadow{
    box-shadow:var(--mani-shadow);
}

.ml-shadow-lg{
    box-shadow:var(--mani-shadow-lg);
}



/* ---------- Hover ---------- */

.ml-hover-up{

    transition:.35s;

}

.ml-hover-up:hover{

    transform:translateY(-10px);

}

.ml-hover-zoom{

    overflow:hidden;

}

.ml-hover-zoom img{

    transition:.6s;

}

.ml-hover-zoom:hover img{

    transform:scale(1.08);

}



/* ---------- Display ---------- */

.ml-relative{
    position:relative;
}

.ml-absolute{
    position:absolute;
}

.ml-overflow{
    overflow:hidden;
}

.ml-z1{
    z-index:1;
}

.ml-z2{
    z-index:2;
}

.ml-z3{
    z-index:3;
}



/* ---------- Divider ---------- */

.ml-divider{

    width:90px;

    height:4px;

    background:var(--mani-primary);

    margin:25px auto;

    border-radius:100px;

}



/* ---------- Glass ---------- */

.ml-glass{

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.2);

}



/* ---------- Border ---------- */

.ml-border{

    border:1px solid rgba(0,0,0,.08);

}

.ml-border-light{

    border:1px solid rgba(255,255,255,.15);

}



/* ---------- Transition ---------- */

.ml-transition{

    transition:var(--mani-transition);

}



/* ---------- Object Fit ---------- */

.ml-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

}



/* ---------- Image ---------- */

.ml-img{

    width:100%;

    height:auto;

}



/* ---------- Text ---------- */

.ml-white{

    color:#fff;

}

.ml-primary{

    color:var(--mani-primary);

}

.ml-dark{

    color:var(--mani-heading);

}

.ml-muted{

    color:#888;

}



/* ---------- Gradient ---------- */

.ml-gradient-primary{

background:
linear-gradient(135deg,
var(--mani-primary),
#f06b78);

}

.ml-gradient-dark{

background:
linear-gradient(135deg,
#19382d,
#0d1c17);

}


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

@media (max-width:1200px){

.ml-hero-title{

font-size:52px;

}

}



@media (max-width:992px){

.ml-section{

padding:70px 0;

}

.ml-hero{

min-height:620px;

}

.ml-hero-title{

font-size:42px;

}

.ml-title{

font-size:38px;

}

.ml-content-text{

padding-left:0;

padding-top:40px;

}

}



@media (max-width:768px){

.ml-hero{

min-height:auto;

padding:120px 0;

}

.ml-hero-title{

font-size:34px;

}

.ml-title{

font-size:30px;

}

.ml-description{

font-size:17px;

}

.ml-btn{

width:100%;

}

}



@media (max-width:576px){

.ml-section{

padding:55px 0;

}

.ml-hero-title{

font-size:30px;

}

.ml-title{

font-size:28px;

}

.ml-text{

font-size:16px;

}

}
.ml-fade{

opacity:0;

transform:translateY(40px);

transition:.6s;

}

.ml-fade.active{

opacity:1;

transform:none;

}
.ml-loading{

opacity:.6;

pointer-events:none;

}
.ml-skeleton{

background:#eee;

border-radius:18px;

animation:mlLoading 1.2s infinite;

}

@keyframes mlLoading{

0%{

opacity:.6;

}

50%{

opacity:1;

}

100%{

opacity:.6;

}

}
@media print{

.ml-btn,

.ml-cta{

display:none;

}

}
::selection{

background:var(--mani-primary);

color:#fff;

}
.ml-btn:focus{

outline:none;

box-shadow:0 0 0 4px rgba(214,75,90,.25);

}
.ml-lazy{

opacity:0;

transition:.5s;

}

.ml-lazy.loaded{

opacity:1;

}
html{

scroll-behavior:smooth;

}

.ml-anchor{

scroll-margin-top:110px;

}


/*

====================================================

Mani Landing Framework

Version 1.0

Author : Manisoft

https://manisoft.agency

====================================================

*/