@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {

    /* ========= gradients ========= */
    --gradient-primary: linear-gradient(135deg,
            #39D353,
            #1DB954);
    --gradient-dark: linear-gradient(180deg,
            #111111,
            #090909);
    /* ========= Brand ========= */

    --primary: #39D353;
    --primary-dark: #1DB954;
    --primary-light: #6EF06E;

    /* ========= Background ========= */

    --background: #0B0B0B;
    --background-light: #111111;
    --surface: #181818;
    --surface-2: #242424;

    /* ========= Text ========= */

    --white: #FFFFFF;
    --text: #F5F5F5;
    --text-muted: #B5B5B5;
    --text-light: #8B8B8B;

    /* ========= Border ========= */

    --border: #2B2B2B;
    --border-light: #3C3C3C;

    /* ========= Status ========= */

    --success: #22C55E;
    --warning: #FACC15;
    --danger: #EF4444;
    --info: #3B82F6;

    /* ========= Shadow ========= */

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

    --shadow-green:
        0 0 20px rgba(57, 211, 83, .30);

    /* ========= Radius ========= */

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* ========= Transition ========= */

    --transition: .3s ease;

}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body{
    scroll-behavior: smooth;
}
body {
    font-family: 'Roboto', Arial, sans-serif;
    background-color: var(--background);
    color: var(--text);
}

.container {
    width: 90%;
    margin: 0 auto;
}

input,
select,
textarea {
    outline: none;
    border: 1px solid var(--border);
}

.list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* btns */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
}
.hero-btn {

    background: var(--gradient-primary);

}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}


/* flex box */
.box-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.box-center.column {
    flex-direction: column;
}

.box-center.row {
    flex-direction: row;
}

.box-space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* flex */
.flex-1 {
    flex-grow: 1;
}


/* gap */
.gap-1 {
    gap: 5px;
}
.gap-2 {
    gap: 10px;
}
.gap-3 {
    gap: 15px;
}
.gap-4 {
    gap: 20px;
}


/* margin */
.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}