@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    /* MY-COLOR ==============================================================================*/
    --brown-color: #B17457;
    --active-color: #e6f4ff;
    --boxshadow-pop: 0 6px 16px -8px #00000014, 0 9px 28px #0000000d, 0 12px 48px 16px #00000008;
    --boxshadow-nef: 0px 15px 25px 0px rgba(53.99999999999999, 53.99999999999999, 53.99999999999999, .26);
    --boxshadow-drop: 0 5px 8px 0 #ddd;
    --boxshadow-up: 0 -5px 8px 0 #ddd;
    --color-border-primaryD: rgb(109 213 237);
    --border-primaryD: 1px solid rgb(109 213 237);
    --color-primaryD-dark: rgb(33 147 176);
    --bg-primaryD: #505063;
    --bg-than: rgb(26, 32, 44);
    --text-nef: #495057;
    --yellowne: #f0ff1f;
    --orangenef: #ffc43a;
    --greenBtn: #34c38f;
    --text-colorviolet: #56376B;
    --color-only-primary: #ffffff;
    --color-text-brown: #782929;
    --color-text-primaryD: #4a4a4a;
    --color-text-dark: #222222;
    --color-redD: #ff495b;
    --color-borderD: #dfdfdf;
    --bg-primary-nhat: rgb(240 242 245);
    --color-BGD: #ff84ad;
    --bg-logoD: linear-gradient(131deg, rgb(255, 132, 177) 20%, rgba(253, 199, 162, 1) 80%);
    --bg-gradient-pink: linear-gradient(135deg, #FFAFBD, #FFC3A0);
    --bg-gradient-navnef: linear-gradient(0deg, rgb(255, 106, 160, 1), rgb(255, 191, 164, 90));
    --bg-gradient-footer-0deg: linear-gradient(0deg, rgb(33 147 176), rgb(109 213 237));
    --bg-gradient-0deg: linear-gradient(0deg, rgb(33 147 176), rgb(109 213 237));
    --bg-gradient-135deg: linear-gradient(135deg, rgb(33 147 176), rgb(109 213 237));
    --bg-gradient-321deg: linear-gradient(321deg, rgb(33 147 176), rgb(109 213 237));
    --bg-gradient-main: linear-gradient(45deg, rgb(33 147 176), rgb(109 213 237));
    --text-gradient-violetToRed: linear-gradient(to right, #4435E9 0%, #DF3993 100%);
    --gradient-violetToOrange: linear-gradient(to right, #8D4FFF 0%, #FA9E1B 100%);

    /* Colors */
    --primary-red: #a41045;
    --secondary-vivid-violet: #892066;
    --secondary-pink: #e52996;
    --secondary-blue: #18457c;
    --primary-dark: #0a0c10;
    --light-dark: #424345;
    --drark-grey: #7d7e80;
    --secondary-blue: #95a1ad;
    --pink-grey: #9b8595;
    --grey: #b9b9b9;
    --light-grey: #d8d8d8;
    --white: #ffffff;
    --gradient-heading: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(115, 115, 115, 1.00) 100%);
    --transparent-stroke: rgba(255, 255, 255, 0.12);
    --transparent-background: rgba(255, 255, 255, 0.03);
    --back-ground-button-gradient: rgba(255, 255, 255, 0.13);
    --white-88percent: rgba(255, 255, 255, 0.88);
    --rectangle-13: #0a0c10;
    --rectangle-13: #424345;
    --rectangle-13: #7d7e80;
    --rectangle-13: #95a1ad;
    --primary-dark-70: rgba(10, 12, 16, 0.70);
    --white-60percent: rgba(255, 255, 255, 0.60);
    --white-50percent: rgba(255, 255, 255, 0.50);

    /* FONT-SIZE ==============================================================================*/
    --font-6: .375rem;
    --font-7: .4375rem;
    --font-8: .5rem;
    --font-9: .5625rem;
    --font-10: .625rem;
    --font-11: .688rem;
    --font-12: .75rem;
    --font-13: .813rem;
    --font-14: .875rem;
    --font-15: .938rem;
    --font-16: 1rem;
    --font-17: 1.063rem;
    --font-18: 1.125rem;
    --font-19: 1.188rem;
    --font-20: 1.25rem;
    --font-21: 1.313rem;
    --font-22: 1.375rem;
    --font-23: 1.438rem;
    --font-24: 1.5rem;
    --font-25: 1.5625rem;
    --font-26: 1.625rem;
    --font-27: 1.6875rem;
    --font-28: 1.75rem;
    --font-29: 1.8125rem;
    --font-30: 1.875rem;

}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
}

.height46 {
    height: 46px;
}

.text-gradient-gray {
    width: fit-content;
    text-transform: uppercase;
    font-weight: 700;
    background: linear-gradient(to top, rgb(46, 46, 46, .1) 0%, rgb(255, 255, 255) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-den {
    width: fit-content;
    text-transform: uppercase;
    font-weight: 700;
    background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgb(46, 46, 46) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}