:root {
    /* Typography */
    /* No px rem etc values should be written next to the values */
    --h1-min: 32; /* 375px deki boyut */
    --h1-max: 56; /* 1440px deki boyut */

    --h2-min: 24; /* 375px deki boyut */
    --h2-max: 48; /* 1440px deki boyut */

    --h3-min: 20; /* 375px deki boyut */
    --h3-max: 40; /* 1440px deki boyut */

    --h4-min: 18; /* 375px deki boyut */
    --h4-max: 32; /* 1440px deki boyut */

    --h5-min: 18; /* 375px deki boyut */
    --h5-max: 28; /* 1440px deki boyut */

    --h6-min: 16; /* 375px deki boyut */
    --h6-max: 24; /* 1440px deki boyut */

    --p-min: 16; /* 375px deki boyut */
    --p-max: 18; /* 1440px deki boyut */

    --li-min: 16; /* 375px deki boyut */
    --li-max: 18; /* 1440px deki boyut */
    /* White */
    --white: #FFFFFF;
    --white-50: #F5F5F5;
    --white-400: #F0EDED;
    --white-500: #A6A6A6;
    --white-600: #E8E8E8;
    --white-700: #B5B5B5;
    --white-800: #8C8C8C;
    --white-900: #6B6B6B;
    /* Black */
    --black: #000000;
    --black-100: #B0B0B0;
    --black-200: #8A8A8A;
    --black-300: #545454;
    --black-400: #333333;
    --black-500: #9DA1A5;
    /* Green */
    --theme-1-50: #EDFCF4;
    --theme-1-100: #C6F4DD;
    --theme-1-200: #AAEFCD;
    --theme-1-300: #34E0A1;
    --theme-1-400: #00A096;
    --theme-1-500: #46DD92;
    --theme-1-700: #329D68;
    --theme-1-800: #277A50;
    --theme-1-900: #1D5D3D;
    --theme-1-950: #38856A;
    /* Red */
    --theme-2-50: #FEEFF5;
    --theme-2-100: #FDCDE1;
    --theme-2-500: #F85E9F;
    --theme-2-700: #B04371;
    --theme-2-800: #FF0000;
    --theme-2-900: #CD0027;
    /* Orange */
    --theme-3-50: #FDF2EB;
    --theme-3-100: #F9D7C1;
    --theme-3-300: #EDB089;
    --theme-3-500: #EC7E38;
    --theme-3-600: #D77333;
    --theme-3-700: #A85928;
    --theme-3-800: #FF5722;
    /* Blue */
    --theme-4-50: #E9EBF1;
    --theme-4-100: #BBC2D5;
    --theme-4-400: #516192;
    --theme-4-500: #253A77;
    --theme-4-700: #1A2954;
    --theme-4-800: #3E3E59;
    --theme-4-900: #091127;
    --flag-url: url(../image/static/flags.webp);
    /* turquise */
    --theme-5-50: #E6F6F8;
    --theme-5-100: #B3E3E8;
    --theme-5-500: #009BA8;
    /* range */
    --range-2: 50px;
    --range-3: 8px;
    --whatsapp: #46DD92;
}

.swal-text {
    width: 90%;
    text-align: center;
}

.vertical-center {
    align-content: center;
    align-items: center;
}

.attraction-header {
    font-size: var(--h3) !important;
}

.itinerary-header {
    font-size: var(--h3) !important;
    text-align: center !important;
    font-weight: 500 !important;
}

.app-header {
    font-size: var(--h4) !important;
    text-align: center !important;
    font-weight: 500 !important;
}

.blog-header {
    font-size: var(--h4) !important;
    font-weight: 500 !important;
}

.top-attraction-header {
    font-size: var(--h5) !important;
    font-weight: 500 !important;
}

.feature-header {
    font-size: var(--h5) !important;
    text-align: center !important;
    font-weight: 500 !important;
}

.blog-header {
    font-size: var(--h1) !important;
    font-weight: 500 !important;
}

.announcement p,
.announcement a {
    text-align: center;
}

.max-w-\[150px\] {
    max-width: 150px
}

.mb-\[--range-2\] {
    padding-top: var(--range-2)
}

.\[text-shadow\:4px_4px_0_var\(--black-300\)\] {
    text-shadow: 4px 4px 0 var(--black-300)
}

.bg-\[--whatsapp\] {
    background-color: var(--whatsapp)
}

.bg-\[--black-100\] {
    background-color: var(--black-100)
}

.hover\:bg-\[--black-100\]:hover {
    background-color: var(--black-100)
}

.bg-\[--white-50\] {
    background-color: var(--white-50)
}

.bg-\[--white-400\] {
    background-color: var(--white-400)
}

.bg-\[--theme-3-300\] {
    background-color: var(--theme-3-300)
}

.border-\[--theme-2-500\] {
    border-color: var(--theme-2-500)
}

.ml-\[50px\] {
    margin-left: 50px;
}

.text-\[color\:var\(--theme-3-800\)\] {
    color: var(--theme-3-800)
}

.\[--icon-color\:var\(--theme-4-400\)\] {
    --icon-color: var(--theme-4-400)
}

.\[--text-color\:var\(--theme-4-400\)\] {
    --text-color: var(--theme-4-400)
}

.bg-\[--theme-5-50\] {
    background-color: var(--theme-5-50)
}

.\[--bg-color\:var\(--theme-5-50\)\] {
    --bg-color: var(--theme-5-50)
}

.\[--bg-color\:var\(--theme-5-100\)\] {
    --bg-color: var(--theme-5-100)
}

.\[--bg-hover-color\:var\(--theme-5-100\)\] {
    --bg-hover-color: var(--theme-5-100)
}

.\[--icon-color\:var\(--theme-5-500\)\] {
    --icon-color: var(--theme-5-500)
}

.\[--text-color\:var\(--theme-5-500\)\] {
    --text-color: var(--theme-5-500)
}

.d-none {
    display: none;
}

.icon-tour-invoice {
    margin-left: 5px;
    width: 15px;
}

.payment-waiting .my-loading svg {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 10px;
}

.payment-waiting .my-loading svg {
    display: inline-block;
    animation: rotate 2s linear infinite;
}