/* ==========================================
   MudNPot Design System v1.0
   ========================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@300;400;500;600;700&display=swap');


/* ==========================================
   COLOR PALETTE
   ========================================== */

:root{

    /* Brand */

    --primary:#8B5E3C;
    --primary-dark:#6E472B;

    --accent:#D4A373;

    --background:#FAF7F2;

    --surface:#FFFFFF;

    /* Text */

    --heading:#2D2D2D;

    --text:#5E5E5E;

    --muted:#888888;

    /* Status */

    --success:#557A46;

    --danger:#B85450;

    --warning:#C78A1D;

    /* Border */

    --border:#E8E3DD;

    /* Shadows */

    --shadow-sm:0 4px 12px rgba(0,0,0,.08);

    --shadow-md:0 12px 30px rgba(0,0,0,.10);

    --shadow-lg:0 20px 45px rgba(0,0,0,.15);

    /* Radius */

    --radius-sm:10px;

    --radius-md:16px;

    --radius-lg:24px;

    /* Spacing */

    --space-xs:8px;

    --space-sm:16px;

    --space-md:24px;

    --space-lg:40px;

    --space-xl:64px;

    --space-xxl:96px;

    /* Animation */

    --transition:all .3s ease;

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:'Poppins',sans-serif;

    line-height:1.7;

    overflow-x:hidden;

}
/* ==========================================
   TYPOGRAPHY
   ========================================== */

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

    font-family:'Playfair Display',serif;

    color:var(--heading);

    font-weight:700;

    line-height:1.2;

}

h1{

    font-size:60px;

}

h2{

    font-size:44px;

}

h3{

    font-size:32px;

}

p{

    color:var(--text);

    font-size:18px;

}

a{

    color:inherit;

    text-decoration:none;

}
/* ==========================================
   LAYOUT
   ========================================== */

.container-xl{

    width:min(1320px,92%);

    margin:auto;

}

.section{

    padding:90px 0;

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

.btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 34px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

}

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

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

}

.btn-outline{

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

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:white;

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

.card{

    background:var(--surface);

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

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

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

}
img{

    max-width:100%;

    display:block;

}
.text-center{

    text-align:center;

}

.text-primary{

    color:var(--primary);

}

.text-success{

    color:var(--success);

}

.mb-1{

    margin-bottom:8px;

}

.mb-2{

    margin-bottom:16px;

}

.mb-3{

    margin-bottom:24px;

}

.mb-4{

    margin-bottom:40px;

}
@media(max-width:992px){

    h1{

        font-size:46px;

    }

}

@media(max-width:768px){

    h1{

        font-size:36px;

    }

    h2{

        font-size:30px;

    }

    p{

        font-size:16px;

    }

    .btn{

        width:100%;

        justify-content:center;

    }

}