* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

:root {
    --clr-primary: #F15BB5;
    --clr-secondry: #3477F5;
    --clr-tertiory: #DFE6F1;
    --clr-clear: #ffffff;
    --text-heading: #1A1A40;
    --text-heading-desc: #9595a3;
    --input_join-dark: #595978;
    --input_join-light: #72728A;
    --text-section_heading-desc: #424264;
    --text-section_heading-descc: #424264;
    --input-text: #ACB5C4;
    --per-white: #ffffff;
    --per-card: #ffffff;
    --per-input: #ffffff;
    --signIn-lightMode: #F0DDDB;
    --per-card-textHead: #1A1A40;
    --per-card-textHead-desc: #626877;
    --transition_lightMode: #F4DCDB;
    --clr-tertiory-footer: #1A1A40;
    --clr-signtxt: #595978;
    --menu-light: #ffffff;
    --clr-clear-dark: #000000;
    --transition-clr: #F4DCDB;
    --key: #ffffff;
}

.dark_mode {
    background-color: #0C0F37;
    --text-heading: #F3F3F3;
    --clr-signtxt: #e7e7e7;
    --text-heading-desc: #C0C0C0;
    --text-section_heading-desc: #C0C0C0;
    --input_join-dark: #F3F3F3;
    --input_join-light: #e0e0e0;
    --text-section_heading-descc: #dfdfdf;
    --per-card: #414B7C;
    --per-card-textHead: #FFFFFF;
    --per-card-textHead-desc: #D6D6D6;
    --clr-clear: #ACB5C4;
    --per-input: #f4f4f8;
    --transition_lightMode: #060930;
    --clr-tertiory-footer: #f6f6f6;
    --menu-light: #0C0F37;
    --input-text: #4C5057;
    --clr-clear-dark: #ffffff;
    --transition-clr: #060930;
    --signIn-lightMode: #414B7C;
    --key: #414B7C;

}

body.dark_mode.feature:hover {
    background-color: rgba(255, 255, 255);
}