@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
    --bg-color: #f3f3f3;
    --light: #D8665B;
    --medium: #AC428A;
    --dark: #4A54AD;
    --primary: #FC8036;
}

::selection {
    background: var(--primary);
    color: white
}
/*
:root {
    --bg-color: #F2F2F2;
    --light: #ACE7F9;
    --medium: #131073;
    --dark: #110E59;
    --primary: #F942C1;
}*/

body {
    height: 100vh;
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--dark);
}

.bg-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff;
}
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}
.text-primary {
    color: var(--primary) !important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--light);
    border-color: var(--light);
}

.text-secondary {
    color: var(--medium) !important;
}

.btn-secondary {
    background-color: var(--medium);
    border-color: var(--medium);
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    background-color: var(--medium);
    border-color: var(--medium);
}

.bg-danger {
    background-color: #ef233c !important;
    border-color: #ef233c !important;
    color: #ffffff;
}

.nav-bar {
    color: #ffffff;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


.nav-bar-container {
    min-height: 77px;
}

.toggle-on, .toggle-off {
    font-size: 13px;
}

.fw-semibold {
    font-weight: 600;
}

.big-title {
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    border-radius: 2rem;
}

.gradient-bg {
    background-size: 400% 400% !important;
	animation: gradient 15s ease infinite;
    background: linear-gradient(to right, #FC8036 0%, 14.8619957537155%, #AC428A 29.723991507431%, 49.4692144373673%, #4A54AD 69.2144373673036%, 84.60721868365181%, #1183C1 100%);
    
}
.nav-bar-shadow {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.phone-time {
    font-size: 4rem;
    color: white;
    position: absolute;
    z-index: 5;
    top: 12%
}

.notification {
    position: absolute;
    background-color: rgba(254, 254, 254, 1);
    border-radius: 1rem;
    padding: 0.6rem;
    color: var(--dark) !important;
    z-index: 10;
    top: 30%;
    box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px, rgb(0 0 0 / 6%) 0px 0px 0px 1px;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    color: var(--primary)
}

.phone {
    max-width: 400px;
    position: relative;
    display: flex;
    justify-content: center;
    aspect-ratio: 0.592;
}

.phone-outline {
    background-size: 400% 400% !important;
	animation: gradient 15s ease infinite;
    background: linear-gradient(to right, #FC8036 0%, 14.8619957537155%, #AC428A 29.723991507431%, 49.4692144373673%, #4A54AD 69.2144373673036%, 84.60721868365181%, #1183C1 100%);
    -webkit-mask-image: url('/assets/phone-white.svg');
    mask-image: url('/assets/phone-white.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    height: 100%;
    aspect-ratio: 0.5028;
    position: absolute;
}
.phone-bg {
    background-size: 400% 400% !important;
	animation: gradient 15s ease infinite;
    background: linear-gradient(to right, #FC8036 0%, 14.8619957537155%, #AC428A 29.723991507431%, 49.4692144373673%, #4A54AD 69.2144373673036%, 84.60721868365181%, #1183C1 100%);
    -webkit-mask-image: url('/assets/phone-white-full.svg');
    mask-image: url('/assets/phone-white-full.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    height: 100%;
    aspect-ratio: 0.5028;
    opacity: 0.3;
}

.big-text {
    background: linear-gradient(to right, #FC8036 0%, 14.8619957537155%, #AC428A 29.723991507431%, 49.4692144373673%, #4A54AD 69.2144373673036%, 84.60721868365181%, #1183C1 100%);
    -webkit-background-clip: text;
    color: transparent; 
}

.explainer {
    background-color: white;
    border-radius: 1rem;
    box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px, rgb(0 0 0 / 6%) 0px 0px 0px 1px;
}

.logo-icon {
    filter: brightness(0) invert(1);
    width: 1.75rem;
    margin-right: 0.5rem;
}

#telegramConnectBtn {
    background-color: #0088cc;
    border-color: #0088cc;
    color: #ffffff;
}

#telegramConnectBtn:hover, #telegramConnectBtn:active, #telegramConnectBtn:focus {
    background-color: #006ea6;
    border-color: #006ea6;
}

.welcome-icon{
    transition: color 0.2s ease-in-out;
}
.welcome-icon:hover {
    color: var(--primary)
}

.image-header {
    position: relative;
    width: 100%;
    height: 40vh;
}
.image-header img {
    z-index: -10;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.image-header h1 {
    padding: 1.5rem;
}