/* ==========================================================
   KITTU BITTU FOODS
   Base Styles
   Version 2.0
==========================================================*/

/* ==========================================================
   RESET
==========================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================================================
   HTML
==========================================================*/

html{

    scroll-behavior:smooth;

    font-size:16px;

    -webkit-text-size-adjust:100%;

}

/* ==========================================================
   BODY
==========================================================*/

body{

    font-family:var(--font-body);

    background:var(--cream);

    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/* ==========================================================
   CONTAINER
==========================================================*/

.container{

    width:min(92%,var(--container));

    margin:auto;

}

/* ==========================================================
   IMAGES
==========================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

    user-select:none;

    -webkit-user-drag:none;

}

/* ==========================================================
   LINKS
==========================================================*/

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

/* ==========================================================
   LISTS
==========================================================*/

ul,
ol{

    list-style:none;

}

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

button{

    border:none;

    outline:none;

    cursor:pointer;

    background:none;

    font-family:inherit;

}

/* ==========================================================
   INPUTS
==========================================================*/

input,
textarea,
select{

    width:100%;

    font-family:inherit;

    font-size:1rem;

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:14px 18px;

    outline:none;

    transition:var(--transition);

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(54,91,60,.10);

}

/* ==========================================================
   TEXTAREA
==========================================================*/

textarea{

    resize:vertical;

    min-height:160px;

}

/* ==========================================================
   HEADINGS
==========================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-heading);

    color:var(--primary-dark);

    line-height:1.2;

    font-weight:700;

}

h1{

    font-size:4rem;

}

h2{

    font-size:3rem;

}

h3{

    font-size:2rem;

}

h4{

    font-size:1.5rem;

}

/* ==========================================================
   PARAGRAPHS
==========================================================*/

p{

    color:var(--text-light);

    font-size:1.05rem;

}

/* ==========================================================
   SECTION
==========================================================*/

section{

    position:relative;

    padding:100px 0;

}

/* ==========================================================
   SECTION HEADING
==========================================================*/

.section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:999px;

    background:#eef5ef;

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

}

.section-heading h2{

    margin-bottom:18px;

}

.section-heading h2 span{

    color:var(--secondary);

}

.section-heading p{

    font-size:1.08rem;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

    box-shadow:var(--shadow);

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

}

.btn-outline{

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

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

.btn-large{

    padding:18px 42px;

}

/* ==========================================================
   CARD
==========================================================*/

.card{

    background:#fff;

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

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

}

/* ==========================================================
   GRID
==========================================================*/

.grid{

    display:grid;

    gap:30px;

}

/* ==========================================================
   FLEX
==========================================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ==========================================================
   UTILITIES
==========================================================*/

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mt-60{

    margin-top:60px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-60{

    margin-bottom:60px;

}

.hidden{

    display:none!important;

}

/* ==========================================================
   ACCESSIBILITY
==========================================================*/

.skip-link{

    position:absolute;

    top:-60px;

    left:20px;

    background:var(--primary);

    color:#fff;

    padding:12px 18px;

    border-radius:8px;

    z-index:9999;

}

.skip-link:focus{

    top:20px;

}

/* ==========================================================
   SELECTION
==========================================================*/

::selection{

    background:var(--secondary);

    color:#fff;

}

/* ==========================================================
   SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

/* ==========================================================
   LOADING IMAGE
==========================================================*/

img{

display:block;

max-width:100%;

height:auto;

user-select:none;

-webkit-user-drag:none;

}


.page-loader{

position:fixed;

inset:0;

background:#ffffff;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.5s;

}

.page-loader img{

width:200px;

animation:loaderPulse 1.2s infinite;

}

.page-loader.hide{

opacity:0;

visibility:hidden;

}

@keyframes loaderPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}