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

@font-face {
    font-family: inter;
    src: url("/assets/fonts/static/Inter_18pt-Regular.ttf") format("truetype");
}
:root{

/* Brand Colors */

--primary:#0C3A07;

--secondary:#6D7C4B;

--accent:#DAE5B9;

--success:#2B4D34;

/* Neutral */

--white:#FFFFFF;

--black:#000000;

--text:#1E1E1E;

--gray:#666666;

--light:#F8FAF4;

--border:#E5E7EB;

/* Fonts */

--font-primary:'inter',sans-serif;

/* Border Radius */

--radius-sm:8px;

--radius-md:14px;

--radius-lg:24px;

--radius-pill:50px;

/* Shadow */

--shadow-sm:0 4px 15px rgba(0,0,0,.05);

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

--shadow-lg:0 20px 50px rgba(0,0,0,.12);

/* Transition */

--transition:.35s ease;

/* Section */

--section-padding:90px;

/* Navbar */

--navbar-height:80px;

}
/* body */
body{
overflow-x:hidden;
font-family:var(--font-primary);
font-size:16px;
}

.btn-theme{
    padding: 10px 25px;
    background-color: var(--primary);
    color: var(--white);
    border: none;
    font-weight: 500;
    transition: var(--transition);
    border-radius: var(--radius-pill);
    border: 1px solid var(--primary);
}
.btn-theme:hover{
    background: none;
    color: var(--primary);
    border: 1px solid var(--primary);
}

.btn-outline{
    padding: 10px 25px;
    background: none;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-pill);
}
.btn-outline:hover{
    background-color: var(--primary);
    color: var(--white);
}

/* section padding */
.sec-pad{
    padding: var(--section-padding) 0;
}
/* text color */
.text-primary{
    color: var(--primary);
}
.text-secondary{
    color: var(--secondary);
}
.text-accent{
    color: var(--accent);
}
.text-success{
    color: var(--success);
}
.text-white{
    color: var(--white);
}
.text-black{
    color: var(--black);
}
.text-text{
    color: var(--text);
}
.text-gray{
    color: var(--gray);
}
.text-light{
    color: var(--light);
}
.text-border{
    color: var(--border);
}

/* background */
.bg-primary{
    background: var(--primary);
}
.bg-secondary{
    background: var(--secondary);
}
.bg-accent{
    background: var(--accent);
}
.bg-success{
    background: var(--success);
}
.bg-white{
    background: var(--white);
}
.bg-black{
    background: var(--black);
}
.bg-text{
    background: var(--text);
}
.bg-gray{
    background: var(--gray);
}
.bg-light{
    background: var(--light);
}
.bg-border{
    background: var(--border);
}