/* Base CSS starter */

:root{
    --primary:#2F2C2F;
    --secondary:#E61E8D;
    --accent:#D4AF37;
    --white:#fff;
    --black:#000;
    --bg:#FAFAFA;
    --text:#222;
    --text-light:#666;
    --border:#EAEAEA;
    --heading-font:"Cormorant Garamond",serif;
    --body-font:"Poppins",sans-serif;
    --primary-font: "Phudu", sans-serif;
    --container:160rem;
    --transition:.3s ease;
    --shadow-sm:0 .5rem 1.5rem rgba(0,0,0,.05);
    --shadow-md:0 1rem 3rem rgba(0,0,0,.08);
    --shadow-lg:0 2rem 5rem rgba(0,0,0,.12);
}

*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}
html{font-size:62.5%;scroll-behavior:smooth}

body{font:400 1.6rem/1.6 "Poppins",sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden}

.grid-col-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(370px, 1fr)); gap: 22px;}

a {text-decoration:none;color:inherit}

ul {list-style:none}

img,svg {display:block;max-width:100%;height:auto}

.container {width:100%;max-width:160rem;margin:auto;padding:0 2rem}

.section {padding:8rem 0}

.d-flex {display:flex}

.d-grid {display:grid}

.align-center {align-items:center}

.justify-between {justify-content:space-between}

.justify-center {justify-content:center}

.gap-1 {gap:1rem}
.gap-2{gap:2rem}

.gap-3{gap:3rem}
.w-100{width:100%}

.h-100{height:100%}

.text-center{text-align:center}

.fw-500{font-weight:500}

.fw-600{font-weight:600}
.fw-700{font-weight:700}

.mt-1 { margin-top: 10px;}
.mt-2 { margin-top: 20px;}
.mt-3 { margin-top: 3rem;}
.mt-4 { margin-top: 4rem;}
.mt-5 { margin-top: 5rem;}
.mt-6 { margin-top: 6rem;}
.mt-7 { margin-top: 7rem;}
.mt-8 { margin-top: 8rem;}
.mt-9 { margin-top: 9rem;}
.mt-10 { margin-top: 10rem;}

.mb-1 { margin-bottom: 10px;}
.mb-2 { margin-bottom: 20px;}
.mb-3 { margin-bottom: 3rem;}
.mb-4 { margin-bottom: 4rem;}
.mb-5 { margin-bottom: 5rem;}
.mb-6 { margin-bottom: 6rem;}
.mb-7 { margin-bottom: 7rem;}
.mb-8 { margin-bottom: 8rem;}
.mb-9 { margin-bottom: 9rem;}
.mb-10 { margin-bottom: 10rem;}