/* variables */
:root {

    /* Nature Green Variable */
    --nature-green-50: #C0C1B3; 
    --nature-green-100: #B3B4A4; 
    --nature-green-200: #A6A895; 
    --nature-green-300: #999B85; 
    --nature-green-400: #8D8F76; 
    --nature-green-500: #808267; 
    --nature-green-600: #73755D; 
    --nature-green-700: #666852; 
    --nature-green-800: #5A5B48; 
    --nature-green-900: #4D4E3E; 
    --nature-green-950: #404134; 

    /* Primary Green Variable */
    --primary-green-50: #EEFFED; 
    --primary-green-100: #CBF9C7; 
    --primary-green-200: #92F392; 
    --primary-green-300: #58DC66; 
    --primary-green-400: #2EB94A; 
    --primary-green-500: #008B2A; 
    --primary-green-600: #00772F; 
    --primary-green-700: #006431; 
    --primary-green-800: #005030; 
    --primary-green-900: #00422E; 
    --primary-green-950: #013828; 

    /* Nature Brown Variable */
    --nature-brown-50: #EEE8DF; 
    --nature-brown-100: #EAE3D8; 
    --nature-brown-200: #E7DFD2; 
    --nature-brown-300: #E3DACB; 
    --nature-brown-400: #E0D6C5; 
    --nature-brown-500: #DCD1BE; 
    --nature-brown-600: #C6BCAB; 
    --nature-brown-700: #B0A798; 
    --nature-brown-800: #9A9285; 
    --nature-brown-900: #847D72; 
    --nature-brown-950: #6E695F; 

    /* Balck color Variable */
    --black-50: #F6F6F5; 
    --black-100: #EBECEA; 
    --black-200: #DDDEDD; 
    --black-300: #C9CAC9; 
    --black-400: #A4A5A3; 
    --black-500: #838382; 
    --black-600: #5C5D5B; 
    --black-700: #494A49; 
    --black-800: #2C2C2B; 
    --black-900: #0A0B09; 

    /* Sand Color Variable */
    --sand-color-1: #F0EADC; 
    --sand-color-2: #FDF1E0; 
    --sand-color-3: #E3D1B8; 
    --sand-color-4: #F0CD9B; 
    --sand-color-5: #A68E74; 

    /* text Color Variable */
    --main-color: #0A0B09; 
    --sub-color: #2F3545; 
    --normal-color: #6B6C6F; 
    --white-color: #FFFFFF; 

    /* BG Color Variable */
    --bg-color-1: #EEFFED; 
    --bg-color-2: #FFFBE8; 
    --bg-color-3: #F5F5F5; 
    --bg-color-4: #F5FAFF; 
    --bg-color-5: #00422E; 
    --bg-white: #FFFFFF;

    /* status color varible */
    --status-default: #E1E2E6;

    /* font weight variable */
    --font-light:300;
    --font-regular:400;
    --font-medium:500;
    --font-semibold:600;
    --font-bold:700;

    /* font family satoshi */
    --font-satoshi: 'Satoshi-Variable';

    /* font family Newsreader */
    --font-newsreader: "Newsreader", serif;    

    /* font family staatliches */
    --font-staatliches: "Staatliches", sans-serif;
    
    /* font size variable */
    --font-size-180 : 180px;
    --font-size-49 : 49px;
    --font-size-40 : 40px;
    --font-size-39 : 39px;
    --font-size-32 : 32px;
    --font-size-31 : 31px;
    --font-size-29 : 29px;
    --font-size-28 : 28px;
    --font-size-26 : 26px;
    --font-size-25 : 25px;
    --font-size-23 : 23px;
    --font-size-20 : 20px;
    --font-size-19 : 19px;
    --font-size-18 : 18px;
    --font-size-16 : 16px;
    --font-size-14 : 14px;
    --font-size-13 : 13px;
    --font-size-11 : 11px;
    --font-size-10 : 10px;

    /* space variable */
    --space-4 : 4px;
    --space-8 : 8px;
    --space-16 : 16px;
    --space-24 : 24px;
    --space-32 : 32px;
    --space-64 : 64px;
    --space-100 : 100px;
    --space-128 : 128px;
    --space-256 : 256px;
}

/* font weight styel */
.font-light {font-weight: var(--font-light);}
.font-regular {font-weight: var(--font-regular);}
.font-medium {font-weight: var(--font-medium);}
.font-semibold {font-weight: var(--font-semibold);}
.font-bold {font-weight: var(--font-bold);}
.font-180{font-size: var(--font-size-180);}
/* .font-29{font-size: var(--font-size-29);}
.font-26{font-size: var(--font-size-26);}
.font-18{font-size: var(--font-size-18);}
.font-14{font-size: var(--font-size-14);}
.font-10{font-size: var(--font-size-10);} */

/*font family satoshi */
@font-face {
    font-family: 'Satoshi-Variable';
    src: url('fonts/Satoshi-Variable.woff2') format('woff2'),
    url('fonts/Satoshi-Variable.woff') format('woff'),
    url('fonts/Satoshi-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}
.font-satoshi{ font-family: var(--font-satoshi);}

/* font family Newsreader */
.font-newsreader {font-family: var(--font-newsreader)}

/* font family staatliches */
.font-staatliches {font-family: var(--font-staatliches); font-weight:var(--font-regular)}

h1.font-satoshi, h1.font-newsreader, .font-49 {font-size: var(--font-size-49);}
h2.font-satoshi, h2.font-newsreader, .font-39 {font-size: var(--font-size-39);}
h3.font-satoshi, h3.font-newsreader, .font-31 {font-size: var(--font-size-31);}
h4.font-satoshi, h4.font-newsreader, .font-25 {font-size: var(--font-size-25);}
h5.font-satoshi, h5.font-newsreader, .font-20 {font-size: var(--font-size-20);}
.body-text, .font-16 {font-size: var(--font-size-16);}
.tag-text, .font-13 {font-size: var(--font-size-13);}
.error-text, .font-11 {font-size: var(--font-size-11);}

/* Nature Green Variable */
.text-ng-50{color: var(--nature-green-50);}
.text-ng-100{color: var(--nature-green-100);}
.text-ng-200{color: var(--nature-green-200);}
.text-ng-300{color: var(--nature-green-300);}
.text-ng-400{color: var(--nature-green-400);}
.text-ng-500{color: var(--nature-green-500);}
.text-ng-600{color: var(--nature-green-600);}
.text-ng-700{color: var(--nature-green-700);}
.text-ng-800{color: var(--nature-green-800);}
.text-ng-900{color: var(--nature-green-900);}
.text-ng-950{color: var(--nature-green-950);}

.bg-ng-50{background: var(--nature-green-50);}
.bg-ng-100{background: var(--nature-green-100);}
.bg-ng-200{background: var(--nature-green-200);}
.bg-ng-300{background: var(--nature-green-300);}
.bg-ng-400{background: var(--nature-green-400);}
.bg-ng-500{background: var(--nature-green-500);}
.bg-ng-600{background: var(--nature-green-600);}
.bg-ng-700{background: var(--nature-green-700);}
.bg-ng-800{background: var(--nature-green-800);}
.bg-ng-900{background: var(--nature-green-900);}
.bg-ng-950{background: var(--nature-green-950);}
/* Nature Green Variable */

/* Primary Green Variable */
.text-green-50{color: var(--primary-green-50);}
.text-green-100{color: var(--primary-green-100);}
.text-green-200{color: var(--primary-green-200);}
.text-green-300{color: var(--primary-green-300);}
.text-green-400{color: var(--primary-green-400);}
.text-green-500{color: var(--primary-green-500);}
.text-green-600{color: var(--primary-green-600);}
.text-green-700{color: var(--primary-green-700);}
.text-green-800{color: var(--primary-green-800);}
.text-green-900{color: var(--primary-green-900);}
.text-green-950{color: var(--primary-green-950);}

.bg-green-50{background: var(--primary-green-50);}
.bg-green-100{background: var(--primary-green-100);}
.bg-green-200{background: var(--primary-green-200);}
.bg-green-300{background: var(--primary-green-300);}
.bg-green-400{background: var(--primary-green-400);}
.bg-green-500{background: var(--primary-green-500);}
.bg-green-600{background: var(--primary-green-600);}
.bg-green-700{background: var(--primary-green-700);}
.bg-green-800{background: var(--primary-green-800);}
.bg-green-900{background: var(--primary-green-900);}
.bg-green-950{background: var(--primary-green-950);}
/* Primary Green Variable */

/* Nature Brown Variable */
.text-brown-50{color: var(--nature-brown-50);}
.text-brown-100{color: var(--nature-brown-100);}
.text-brown-200{color: var(--nature-brown-200);}
.text-brown-300{color: var(--nature-brown-300);}
.text-brown-400{color: var(--nature-brown-400);}
.text-brown-500{color: var(--nature-brown-500);}
.text-brown-600{color: var(--nature-brown-600);}
.text-brown-700{color: var(--nature-brown-700);}
.text-brown-800{color: var(--nature-brown-800);}
.text-brown-900{color: var(--nature-brown-900);}
.text-brown-950{color: var(--nature-brown-950);}

.bg-brown-50{background: var(--nature-brown-50);}
.bg-brown-100{background: var(--nature-brown-100);}
.bg-brown-200{background: var(--nature-brown-200);}
.bg-brown-300{background: var(--nature-brown-300);}
.bg-brown-400{background: var(--nature-brown-400);}
.bg-brown-500{background: var(--nature-brown-500);}
.bg-brown-600{background: var(--nature-brown-600);}
.bg-brown-700{background: var(--nature-brown-700);}
.bg-brown-800{background: var(--nature-brown-800);}
.bg-brown-900{background: var(--nature-brown-900);}
.bg-brown-950{background: var(--nature-brown-950);}
/* Nature Brown Variable */

.text-black-50{color: var(--black-50);}
.text-black-100{color: var(--black-100);}
.text-black-200{color: var(--black-200);}
.text-black-300{color: var(--black-300);}
.text-black-400{color: var(--black-400);}
.text-black-500{color: var(--black-500);}
.text-black-600{color: var(--black-600);}
.text-black-700{color: var(--black-700);}
.text-black-800{color: var(--black-800);}
.text-black-900{color: var(--black-900);}

.bg-black-50{background: var(--black-50);}
.bg-black-100{background: var(--black-100);}
.bg-black-200{background: var(--black-200);}
.bg-black-300{background: var(--black-300);}
.bg-black-400{background: var(--black-400);}
.bg-black-500{background: var(--black-500);}
.bg-black-600{background: var(--black-600);}
.bg-black-700{background: var(--black-700);}
.bg-black-800{background: var(--black-800);}
.bg-black-900{background: var(--black-900);}

.text-main-color{color: var(--main-color);}
.text-sub-color{color: var(--sub-color);}
.text-normal-color{color: var(--normal-color);}
.text-white{color: var(--white-color);}

.bg-color-1{ background: var(--bg-color-1);}
.bg-color-2{ background: var(--bg-color-2);}
.bg-color-3{ background: var(--bg-color-3);}
.bg-color-4{ background: var(--bg-color-4);}
.bg-color-5{ background: var(--bg-color-5);}
.bg-white{ background: var(--bg-white);}

.bg-sand-1{ background: var(--sand-color-1);}
.bg-sand-2{ background: var(--sand-color-2);}
.bg-sand-3{ background: var(--sand-color-3);}
.bg-sand-4{ background: var(--sand-color-4);}
.bg-sand-5{ background: var(--sand-color-5);}

/* Button Style */
.btn{
   padding: 12px 16px;
   color: var(--primary-green-500);
   border: 1px solid var(--primary-green-500); 
   background: var(--primary-green-500);
   border-radius: 8px;
}
.btn-large {padding: 16px 24px;}
.btn-normal{padding: 12px 16px;}
.btn-small{padding: 8px 12px;}

.btn-primary {
    color: var(--white-color);
    border: 1px solid var(--primary-green-500); 
    background: var(--primary-green-500);
}
.btn-primary:hover {
    color: var(--white-color);
    border: 1px solid var(--primary-green-600); 
    background: var(--primary-green-600);
}
.btn-primary:focus, .btn-primary:active {
    color: var(--white-color);
    border: 1px solid var(--primary-green-700) !important; 
    background: var(--primary-green-700) !important;
}
.btn-primary.disabled{
    color: var(--normal-color);
    background: var(--status-default);
    border: 1px solid var(--status-default);
}

.btn-secondary {
    color: var(--primary-green-500);
    border: 1px solid var(--primary-green-500); 
    background: transparent;
}
.btn-secondary:hover {
    color: var(--primary-green-600);
    border: 1px solid var(--primary-green-600); 
    background: transparent;
}
.btn-secondary:focus, .btn-secondary:active {
    color: var(--primary-green-700) !important;
    border: 1px solid var(--primary-green-700) !important; 
    background: transparent !important;
}
.btn-secondary.disabled{
    color: var(--normal-color) ;
    background: transparent;
    border: 1px solid var(--status-default);
}

.btn-text {
    color: var(--primary-green-500);
    border: 1px solid var(--white-color); 
    background: var(--bg-white);
}
.btn-text:hover {
    color: var(--primary-green-600);
    border: 1px solid var(--white-color); 
    background: var(--bg-white);
}
.btn-text:focus, .btn-text:active {
    color: var(--primary-green-700) !important;
    border: 1px solid var(--white-color) !important; 
    background: var(--bg-white) !important;
}
.btn-text.disabled{
    color: var(--normal-color) ;
    background: var(--bg-white);
    border: 1px solid var(--white-color);
}


.btn-link {
    color: var(--primary-green-500);
    border: 1px solid var(--white-color); 
    background: var(--bg-white);
    box-shadow: 0px 3px 4px 0px #00000026;
    text-decoration: none;
}
.btn-link:hover {
    color: var(--primary-green-600);
    border: 1px solid var(--white-color); 
    background: var(--bg-white);
}
.btn-link:focus, .btn-link:active {
    color: var(--primary-green-700) !important;
    border: 1px solid var(--white-color) !important; 
    background: var(--bg-white) !important;
}
.btn-link.disabled{
    color: var(--normal-color) ;
    background: var(--bg-white);
    border: 1px solid var(--white-color);
}

.w-120 {width: 120px;}
.space-4{ height: var(--space-4);}
.space-8{ height: var(--space-8);}
.space-16{ height: var(--space-16);}
.space-24{ height: var(--space-24);}
.space-32{ height: var(--space-32);}
.space-64{ height: var(--space-64);}
.space-100{ height: var(--space-100);}
.space-128{ height: var(--space-128);}
.space-256{ height: var(--space-256);}


@media (max-width:1024px) {
    h1.font-satoshi, h1.font-newsreader, .font-49 {font-size: var(--font-size-40);}
    h2.font-satoshi, h2.font-newsreader, .font-39 {font-size: var(--font-size-32);}
    h3.font-satoshi, h3.font-newsreader, .font-31 {font-size: var(--font-size-28);}
    h4.font-satoshi, h4.font-newsreader, .font-25 {font-size: var(--font-size-23);}
    h5.font-satoshi, h5.font-newsreader, .font-20 {font-size: var(--font-size-19);}
    .body-text, .font-16 {font-size: var(--font-size-16);}
    .tag-text, .font-13 {font-size: var(--font-size-13);}
    .error-text, .font-11 {font-size: var(--font-size-11);}
}

@media (max-width:768px) {
    h1.font-satoshi, h1.font-newsreader, .font-49 {font-size: var(--font-size-29);}
    h2.font-satoshi, h2.font-newsreader, .font-39 {font-size: var(--font-size-26);}
    h3.font-satoshi, h3.font-newsreader, .font-31 {font-size: var(--font-size-23);}
    h4.font-satoshi, h4.font-newsreader, .font-25 {font-size: var(--font-size-20);}
    h5.font-satoshi, h5.font-newsreader, .font-20 {font-size: var(--font-size-18);}
    .body-text, .font-16 {font-size: var(--font-size-16);}
    .tag-text, .font-13 {font-size: var(--font-size-14);}
    .error-text, .font-11 {font-size: var(--font-size-13);}
}