﻿/* values for default*/
:root {
    /*--color-primary: #13178C;*/
    /*     --color-primary-light: #292c8e;*/
    --color-primary: #3338d7;
    --color-primary-light: #d7dcff;
    --color-primary-dark: #13178C;
    --color-primary-banner: #3338d7ed;
    --color-secondary: #b40d22;
    --color-secondary-light: #8f303c;
    --color-secondary-dark: #490009;
    /*--color-secondary: #870616;
    --color-secondary-light: #87222f;
    --color-secondary-dark: #1d0101;*/

    --color-secondary-rgba: rgb(180, 13, 34, 0.85);
    --color-secondary-transparent: #b40d22a1;
    --color-secondary-banner: #b40d226e;
    --color-text: #242424;
    --color-white: #fff;
    --color-black: #000;
    --color-gray: #f2f2f2;
    --color-danger: rgba(204, 0, 51);
    --color-danger-dark: #940733;
    --color-success: rgba(0, 102, 204);
    --color-border-card: #8e8e8e;
    --text-size-xs: 10px;
    --text-size-sm: 12px;
    --text-size-14: 14px;
    --text-size-md: 16px;
    --text-size-18: 18px;
    --text-size-lg: 20px;
    --text-size-xl: 24px;
    --h1: 55px;
    --h2: 40px;
    --h3: 32px;
    --h4: 24px;
    --h5: 18px;
    --h6: 12px;
    --height-bg-banner: 570px;
    --shadow-card: 0px 5px 5px -2px rgba(189,189,189,1);
    --radius-card: 25px;
    --radius-card-three: 7rem;
    --linear-gradient-right: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-dark) 65%);
    --linear-gradient-left: linear-gradient(to left, var(--color-primary) 0%, var(--color-primary-dark) 80%);
    --linear-gradient-top: linear-gradient(to top, var(--color-primary) 0%, var(--color-secondary) 80%);
    --linear-gradient-secondary-right: linear-gradient(to right, var(--color-secondary) 0%, var(--color-secondary-dark) 65%);
    --top-bg-banner: -184.19px;
    --transition-btn: transform, width, 300ms linear 0s;
    --border-radius-mb: 10rem; /*mb:mobil*/
    --border-radius-pc: 20rem;

    --border-radius-5: 5px;
    --border-radius-15: 15px;
    --border-radius-25: 25px;
    --border-radius-30: 30px;
    --max-width-normal: 60rem;
    --swiper-navigation-size: 3rem;
}

::placeholder {
    color: white;
}

::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

::-moz-selection { /* Code for Firefox */
    color: var(--color-white);
    background: var(--color-secondary-light);
}

::selection {
    color: var(--color-white);
    background: var(--color-secondary-light);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
}

/* width */
*:not(body, html)::-webkit-scrollbar {
    width: 10px;
}

/* Track */
*:not(body, html)::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
*:not(body, html)::-webkit-scrollbar-thumb {
    background: #C1C1C1;
}

/* Handle on hover */
*:not(body, html)::-webkit-scrollbar-thumb:hover {
    background: #555;
}

*[id] {
    scroll-margin-top: calc(-1.4 * var(--top-bg-banner));
}

html {
    font-size: 62.5%; /*10*/
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: 100vh;
    max-width: 200rem;
    margin: 0 auto;
    -moz-min-height: 100vh;
    -webkit-min-height: 100vh;
    font-family: 'MADE TOMMY', sans-serif;
    font-size: var(--text-size-md);
    font-weight: 300;
    line-height: 1.2;
    /*letter-spacing: 0.05rem;*/
    color: var(--color-text);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

h1, .h1 {
    font-size: var(--h1);
}

h2, .h2 {
    font-size: var(--h2);
}

h3, .h3 {
    font-size: var(--h3);
}

h4, .h4 {
    font-size: var(--h4);
}

h5, .h5 {
    font-size: var(--h5);
}

h6, .h6 {
    font-size: var(--h6);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 1rem;
    font-weight: 500;
/*    letter-spacing: 0.13rem;*/
}

p {
    margin-bottom: 1rem;
}

a { 
    text-decoration: none;
    cursor: pointer;
    color: var(--color-text);
}

label {
    display: inline-block;
    margin-bottom: 1rem;
}

button {
    border: none;
    font-family: inherit;
    font-size: var(--text-size-md);
    padding: 1rem 2rem;
}

input,
select,
textarea {
    letter-spacing: 0.08rem;
}

textarea {
    resize: vertical;
}

input[type="checkbox"] {
    transform: scale(1.5);
    margin-right: 1rem;
}

input[type="date"] {
    position: relative;
}

input[type="date"],
input::-webkit-date-and-time-value {
    text-align: left;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: transparent;
    cursor: pointer;
    display: block;
    background: transparent;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

input[type="time" i],
input[type="date" i] {
    color: white;
}

input:disabled {
    cursor: not-allowed;
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));
}

/*a:-webkit-any-link:active {
    color: unset;
}*/

iframe {
    border: none;
}

ul {
    padding-left: 3rem;
}