html {
	scroll-behavior: smooth;
	box-sizing: border-box;
	font-size: 16px;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	overflow-x: hidden;
}
html.dark {
	--background-color: rgb(14,14,22);
	--text-color: #d8d8d8;
	--box-shadow: rgba(255, 255, 255, 0.35) 0px 10px 20px;
	--box-shadow-hover1: rgba(255, 255, 255, 0.25) 0px 54px 55px, rgba(255, 255, 255, 0.12) 0px -12px 30px, rgba(255, 255, 255, 0.12) 0px 4px 6px, rgba(255, 255, 255, 0.17) 0px 12px 13px, rgba(255, 255, 255, 0.09) 0px -3px 5px;
	--box-shadow-hover2: rgba(255, 255, 255, 0.55) 0px 15px 40px;
	--text-gradient: linear-gradient( 45deg, rgba(135, 206, 235, 0.4), rgba(135, 206, 235,0.7), rgba(255, 255, 255, 0.7), #fff );
	--text-gradient-webkit: -webkit-linear-gradient( 45deg, rgba(135, 206, 235, 0.4), rgba(135, 206, 235,0.7), rgba(255, 255, 255, 0.7), #fff );
	--text-color-light: rgba(255, 255, 255, 0.4);
	--button-text-color: #292A2F;
	--button-background: rgba(20, 25, 35, 0.05);
	--button-background-hover: rgba(20, 25, 35, 0.1);
	--button-background-active: rgba(20, 25, 35, 0.3);
	--box-shadow-image: rgba(255, 255, 255, 0.35) 0px 10px 20px;
	--box-shadow-image-hover: rgba(255, 255, 255, 0.25) 0px 54px 55px, rgba(255, 255, 255, 0.12) 0px -12px 30px, rgba(255, 255, 255, 0.12) 0px 4px 6px, rgba(255, 255, 255, 0.17) 0px 12px 13px, rgba(255, 255, 255, 0.09) 0px -3px 5px;
	--box-shadow-section-image: 0 12px 20px 4px rgba(255,255,255,0.3);
	--box-shadow-section-image-hover: 0 24px 20px 8px rgba(255,255,255,0.3);
	--box-shadow-price: 0px 10px 13px -6px rgba(255, 255, 255, 0.08), 0px 20px 31px 3px rgba(255, 255, 255, 0.09), 0px 8px 20px 7px rgba(255, 255, 255, 0.02);
}
html.light {
	--background-color: rgb(245, 245, 245);
	--text-color: #343434;
	--box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 20px;
	--box-shadow-hover1: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	--box-shadow-hover2: rgba(0, 0, 0, 0.55) 0px 15px 40px;
	--text-gradient: linear-gradient( 45deg, rgba(34,139,182,1), rgba(0,107,150,0.6), rgba(32, 156, 207, 0.7), rgba(50,107,130,1), #000);
	--text-gradient-webkit: -webkit-linear-gradient( 45deg, rgba(34,139,182,1), rgba(0,107,150,0.6), rgba(32, 156, 207, 0.7), rgba(50,107,130,1), #000);
	--text-color-light: rgba(0, 0, 0, 0.5);
	--button-text-color: #d8d8d8;
	--button-background: rgba(20, 25, 35, 0.95);
	--button-background-hover: rgba(20, 25, 35, 0.9);
	--button-background-active: rgba(20, 25, 35, 0.7);
	--box-shadow-image: rgba(0, 0, 0, 0.65) 0px 10px 20px;
	--box-shadow-image-hover: rgba(0, 0, 0, 0.35) 0px 54px 55px, rgba(0, 0, 0, 0.22) 0px -12px 30px, rgba(0, 0, 0, 0.22) 0px 4px 6px, rgba(0, 0, 0, 0.27) 0px 12px 13px, rgba(0, 0, 0, 0.19) 0px -3px 5px;
	--box-shadow-section-image: 0 12px 20px 4px rgba(0, 0, 0,0.3);
	--box-shadow-section-image-hover: 0 24px 20px 8px rgba(0,0,0,0.3);
	--box-shadow-price: 0px 10px 13px -6px rgba(0, 0, 0, 0.38), 0px 20px 31px 3px rgba(0, 0, 0, 0.39), 0px 8px 20px 7px rgba(0, 0, 0, 0.32);
}
*,*:before,*:after {
	box-sizing: inherit;
}
body,h1,h2,h3,h4,h5,h6,p,ol,ul {
	margin: 0;
	padding: 0;
	font-weight: normal;
}
.blob1 {
	content: "";
    width: 15vh;
    height: 15vh;
    left: 70%;
    top: 14.790996784565916vh;
    filter: blur(10.5vh);
    position: sticky;
    display: block;
    background-color: #87CEEB;
    z-index: 100;
}
.blob2 {
	content: "";
    width: 14vh;
    height: 14vh;
    left: 20%;
	top: 70vh;
    filter: blur(8.5vh);
    position: sticky;
    display: block;
    background-color: #87CEEB;
    z-index: 100;
}
img {
	max-width: 100%;
	height: auto;
}
html, body {
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	font-synthesis: none;
	-moz-font-feature-settings: 'kern';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	direction: ltr;
	text-align: left;
	background-color: var(--background-color);
}
a {
	color: #435CF0;
}
#main {
	overflow-x: hidden;
	margin-top: -5vh;
	padding-top: 25px;
}
a:hover {
	color: #556cf1;
}
a:active {
	color: #556cf1;
}
* {
	box-sizing: border-box;
	font-family: "Inter","SF Display",Helvetica,Arial,sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.main {
	z-index: 1000;
}
.bGYPIs {
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: relative;
	text-align: left;
	top: 2px;
}
.bGYPIs > *:first-child {
	margin-top: -2px;
	line-height: 1em;
	margin-bottom: 4px;
}
.btn-arrow {
	position: relative;
	transition: background-color 300ms ease-out;
}
.btn-arrow svg {
	position: absolute;
	width: 1.1em;
	right: 0;
	opacity: 0;
	transform: translateY(-20%);
	transition: all 300ms ease-out;
	will-change: right, opacity;
}
.btn-arrow:hover svg {
	opacity: 1;
	right: -2rem;
}
.fvXjyN {
	cursor: pointer;
	display: flex;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
	margin: 0;
	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	-webkit-transition: 0.225s ease all;
	transition: 0.225s ease all, box-shadow 0.5s ease;
	background: var(--button-background);
	color: var(--button-text-color);
	padding: 25px 40px;
	border-radius: 18px;
	text-decoration: none;
	box-shadow: var(--box-shadow);
}
.fvXjyN * {
	cursor: pointer;
}
.fvXjyN:hover {
	background: var(--button-background-hover);
	box-shadow: var(--box-shadow-hover2);
}
.fvXjyN:active {
	background: var(--button-background-active);
}

.bzXmpH {
	position: relative;
	max-width: 1160px;
	width: 100%;
	margin: 0px auto;
	padding: 0 60px;
	z-index: 1;
}
@media (max-width:950px) {
	.bzXmpH {
		padding: 0 40px;
	}
}
@media (max-width:500px) {
	.bzXmpH {
		padding: 0 20px;
	}
}
.iiVPNi {
	font-family: 'Inter',sans-serif;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	color: currentColor;
	cursor: default;
	font-weight: 600;
	font-feature-settings: 'cv02' on;
	margin-bottom: 30px;
	-webkit-letter-spacing: -2.35px;
	-moz-letter-spacing: -2.35px;
	-ms-letter-spacing: -2.35px;
	letter-spacing: -2.35px;
	font-size: 60px;
	display: inline-block;
	line-height: 80px;
	background: var(--text-gradient);
	background: var(--text-gradient-webkit);
	background-clip: text;
	-webkit-background-clip: text;
	text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
}
.itncri {
	font-family: 'Inter',sans-serif;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	color: currentColor;
	cursor: default;
	font-weight: 400;
	font-size: 22px;
	line-height: 32px;
	-webkit-letter-spacing: -0.015em;
	-moz-letter-spacing: -0.015em;
	-ms-letter-spacing: -0.015em;
	letter-spacing: -0.015em;
	margin-bottom: 20px;
}
.ldhhQQ {
	display: flex;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	padding: 0px 0px 0 120px;
}
.dJrSeb {
	display: flex;
	margin-top: 200px;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}
.ktJpCl {
	width: 500px;
	border-radius: 20px;
	height: 55%;
	overflow: hidden;
	position: relative;
	box-shadow: var(--box-shadow-image);
	transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
	z-index: 1000;
}
.ktJpCl:hover {
	box-shadow: var(--box-shadow-image-hover);
	transform: scale(1.05);
}
.kfyOxz {
	width: 100%;
	position: absolute;
	top: 0;
}
.kFfeXb {
	max-width: 500px;
	z-index: 10;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	color: #292A2F;
	font-weight: 300;
}
.kFfeXb p {
	color: var(--text-color-light);
}
.kFfeXb em {
	color: var(--text-color);
}
.eIcgOW {
	margin-top: 40px;
	padding-top: 40px;
	display: flex;
	border-top: 1px solid rgba(255,255,255,0.05);
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.bAMNNc {
	max-width: 800px;
	padding: 40px 40px;
}
.bSkKnJ {
	display: flex;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	color: #646a70;
	position: relative;
	background-color: var(--background-color);
}
.hTYqdv {
	display: block;
}
.rnHrp {
	font-size: 32px;
	color: var(--text-color-light);
	font-weight: 200;
	width: 100%;
	text-align: center;
}
.rnHrp em {
	color: var(--text-color);
	opacity: 1;
}
.gWnREV {
	width: 900px;
	z-index: 10;
	position: absolute;
	top: 20px;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #292A2F;
	font-weight: 300;
}
.gWnREV > *:last-child {
	margin-top: 40px;
}
.gWnREV > *:last-child * {
	color: #fff;
}
.oEmYn {
	position: relative;
	width: 660px;
	margin-top: 10px;
	background: rgba(0, 0, 0, 1);
	background-size: cover;
	z-index: 1000;
}
.oEmYn img {
	position: absolute;
	transition: box-shadow 0.65s ease-in-out, transform 0.65s ease-in-out;
	cursor: pointer;
	border-radius: 10px;
	box-shadow: var(--box-shadow-image);
}
.oEmYn img:hover {
	box-shadow: var(--box-shadow-image-hover);
	transform: scale(1.05);
}
.cA-dfiW {
	position: relative;
	min-height: 650px;
	display: flex;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
@-webkit-keyframes cwtDYE {
	0% {
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0);
	}

	60% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes cwtDYE {
	0% {
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0);
	}

	60% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.about {
	padding: 0px 120px 0px 0px;
}
.logoAbt {
	height: 500px;
}
@media (max-width: 1176px) {
	.ktJpCl {
		height: 35%;
		width: 300px;
	}
	.ldhhQQ {
		padding: 0px 0px 0 80px;
	}
	.about {
		padding: 0px 80px 0px 0px
	}
	.logoAbt {
		height: 300px;
	}
	.card.card2 {
		width: 100% !important;
	}
}
.card2 {
	width: 63% !important;
}
@media (max-width: 897px) {
	.dJrSeb {
		flex-direction: column;
	}
	.ktJpCl {
		height: 40vw;
		width: 160vh;
	}
	.dJrSeb:has(.logoAbt) {
		flex-direction: column-reverse;
	}
	.logoAbt {
		height: 300px;
		width: 300px;
	}
	.kFfeXb {
		margin: 60px;
	}
	.ldhhQQ {
		padding: 0;
	}
}
.foot-left {
	left: 200px;
	position: absolute;
}
.foot-right {
	right: 200px;
	position: absolute
}
@media (max-width: 750px) {
	.foot-left {
		left: 20px;
	}
	.foot-right {
		right: 20px;
	}
	.oEmYn {
		width: 75vw;
	}
	.dJrSeb {
		margin-top: 5vw;
	}
}
.selected {
    border-bottom: 1.7px solid var(--text-color);
}

.navTrigger {
    display: none;
}

.navi {
    font-family: Poppins;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    font-size: 10px;
    z-index: 10000;
    border-radius: 30px;
    padding: 10px 60px;
    margin: 45px 20px 0px 45px;
    color: var(--text-color);
}

.navi {
    width: 100%;
    position: absolute;
    text-align: center;
	top: 0;
}

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

.navi div.logo {
    float: left;
    width: auto;
    height: auto;
	cursor: pointer;
}

.navi div.logo img {
    text-decoration: none;
    width: 100px;
    height: auto;
	border-radius: 25px;
	box-shadow: var(--box-shadow);
	transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.navi div.logo img:hover {
	box-shadow: var(--box-shadow-hover1);
	transform: scale(1.05);
}

.navi div.main_list {
    height: 65px;
    float: right;
}

.navi div.main_list ul {
    width: 100%;
    height: 65px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navi div.main_list ul li {
    width: auto;
    height: 65px;
    padding: 0;
    padding-right: 3rem;
}

.navi div.main_list ul li a {
    text-decoration: none;
    line-height: 65px;
    font-size: 1.45rem;
    color: unset;
}

.navi div.main_list ul li a:hover {
    color: #6b6b6b;
	transition: color 0.3s ease;
}

@media screen and (max-width:1170px) {
    .navi {
		padding: 10px 60px;
		margin: 45px 20px 0px 45px;
	}
    .navTrigger {
        display: block;
		right: 6vw;
    }
    .navi div.logo {
        margin-left: 15px;
    }
    .navi div.main_list {
        width: 100%;
        height: 0;
        overflow: hidden;
    }
    .navi div.show_list {
        height: auto;
        display: none;
    }
    .navi div.main_list ul {
        flex-direction: column;
        width: 100%;
        height: 100vh;
        right: 0;
        left: 0;
        bottom: 0;
        background-color:rgba(70, 169, 209, 0.9);
        transition: background-color 0.3s ease;
        border-radius: 30px;
        background-position: center top;
        padding-top: 80px;
    }
    .navi div.main_list ul:hover {
        background-color: rgb(70, 169, 209);
    }
    .navi div.main_list ul li {
        width: 100%;
        text-align: right;
		margin-right: 2rem;
    }
    .navi div.main_list ul li a {
        color: #e0e0e0 !important;
        text-align: center;
        width: 100%;
        font-size: 2.5rem;
        padding: 20px;
        margin-right: 0;
    }
    .navi div.main_list ul li a:hover {
        color: #c4c4c4 !important;
    }
    .navi div.media_button {
        display: block;
    }
    .selected{
        border: none;
    }
}

.navi div.main_list ul li .sub {
    display: none;
    position: absolute;
    background-color: rgb(70, 169, 209);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    width: unset !important;
    height: unset !important;
    padding-bottom: 70px !important;
    border-radius: 30px;
    padding: 30px 30px !important;
    color: #e0e0e0 !important;
}

.navi div.main_list ul li ul li {
    padding-right: 0;
}

.navTrigger {
    cursor: pointer;
    width: 30px;
    height: 25px;
    position: absolute;
    right: 11vw;
    top: 0;
    bottom: 0;
    margin: 60px 50px auto 0;
}

.navTrigger i {
    background-color: var(--text-color);
    border-radius: 2px;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
}

.navTrigger i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
    animation: outBtm 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger.active i:nth-child(1) {
    -webkit-animation: inT 0.8s forwards;
    animation: inT 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
    -webkit-animation: inM 0.8s forwards;
    animation: inM 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
    -webkit-animation: inBtm 0.8s forwards;
    animation: inBtm 0.8s forwards;
}

.hidden {
	display: none;
}

@-webkit-keyframes inM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes inM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes outM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes inT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes outT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes outT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes inBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes inBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

@-webkit-keyframes outBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}
.contain {
	left: 80px;
	bottom: 80px;
	position: fixed;
	z-index: 10000
}
.contain2 {
	width: 80%;
	left: 10%;
	right: 10%;
	top: 80px;
	position: fixed;
	transition: opacity 0.5s ease;
	opacity: 0;
}
.error-window {
	background-color: #c00;
	color: #fff;
	padding: 20px;
	border-radius: 12px;
	font-size: 18px;
}
.container2 {
	margin: 0;
	display: flex;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	justify-content: center;
	align-items: center;
	background: rgb(0, 0, 0);
}
#switch {
	position: relative;
	background: transparent;
	border: 0;
	width: 30px;
	height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
#checkbox {
	display: none;
}
#switch .mode {
	position: relative;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #dddddd;
	transition: transform 0.45s ease;
}
#switch .mode::before {
	content: "";
	position: absolute;
	width: 6px;
	height: 6px;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-radius: 50%;
	background: inherit;
	z-index: -1;
	opacity: 0;
	transition: box-shadow 0.4s 0s ease;
}
#switch .mode::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: -30%;
	left: 30%;
	border-radius: 50%;
	background: rgb(0, 0, 0);
	transition: transform 0.45s ease;
}
#checkbox:checked + .container2 {
	background: #dddddd;
}
#checkbox:checked + .container2 #switch .mode {
	transform: scale(0.5);
	background: rgb(0, 0, 0);
}
#checkbox:checked + .container2 #switch .mode::before {
	opacity: 1;
	box-shadow: 0 -20px 0 0 rgb(0, 0, 0), 0 20px 0 0 rgb(0, 0, 0), -20px 0 0 0 rgb(0, 0, 0), 20px 0 0 0 rgb(0, 0, 0), 15px 15px 0 0 rgb(0, 0, 0), 15px -15px 0 0 rgb(0, 0, 0), -15px 15px 0 0 rgb(0, 0, 0), -15px -15px 0 0 rgb(0, 0, 0);
}
#checkbox:checked + .container2 #switch .mode::after {
	opacity: 0;
	transform: translateX(50%) translateY(-50%);
}
.card {
	margin: 0 auto;
	padding: 50px 0 0;
	max-width: 960px;
	width: 100%;
}

.panel {
	background-color: #000;
	border-radius: 10px;
	padding: 15px 25px;
	position: relative;
	width: 100%;
	z-index: 10;
}
  
.pricing-table {
	box-shadow: var(--box-shadow-price);
	display: flex;
	flex-direction: column;
}
  
@media (min-width: 900px) {
	.pricing-table {
	  	flex-direction: row;
	}
}
  
.pricing-table * {
	text-align: center;
}
  
.pricing-plan {
	padding: 25px;
}
  
.pricing-plan:last-child {
	border-bottom: none;
}
  
@media (min-width: 900px) {
	.pricing-plan {
	  	border-bottom: none;
	  	border-right: 1px solid rgb(88, 88, 88);
	  	flex-basis: 100%;
	  	padding: 25px 50px;
	}
  
	.pricing-plan:last-child {
	  	border-right: none;
	}
}
  
.pricing-img {
	margin-bottom: 25px;
	max-width: 100%;
	height: 145px;
}
  
.pricing-header {
	color: rgb(230, 230, 230);
	font-weight: 600;
	letter-spacing: 1px;
}
  
.pricing-features {
	color: rgb(230, 230, 230);
	font-weight: 600;
	letter-spacing: 1px;
	margin: 50px 0 25px;
	list-style-type: none;
}
  
.pricing-features-item {
	border-top: 1px solid rgb(88, 88, 88);
	font-size: 12px;
	line-height: 1.5;
	padding: 15px 0;
}
  
.pricing-features-item:last-child {
	border-bottom: 1px solid rgb(88, 88, 88);
}
  
.pricing-price {
	color: rgb(230, 230, 230);
	display: block;
	font-size: 20px;
	font-weight: 700;
}
  
.pricing-button {
	background-color: #20abe2;
	border-radius: 10px;
	color: #fff;
	display: inline-block;
	margin: 25px 0;
	padding: 15px 35px;
	text-decoration: none;
	transition: all 150ms ease-in-out;
	cursor: pointer;
}
  
.pricing-button:hover {
	background-color: #e1f1ff;
}
.duel {
	padding: 76.5px 0;
}
.quad {
	padding: 36.45px 0;
}
.sign-up {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 100000;
	background-color: rgba(0, 0, 0, 0.5);
}
.contain-sign {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.svg-icon {
	width: 30px;
	height: 30px;
	cursor: pointer;
}
.svg-icon:hover {
	transform: scale(1.05);
}
.svg-icon path, .svg-icon polygon, .svg-icon rect {
	fill: #fff;
}
.signup {
	width: 100%;
	display: grid;
	grid-gap: 15px;
	padding: 35px;
	border-radius: 12px;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.06);
	position: relative;
}
.signup__icon {
	font-size: 1.125rem;
	font-weight: bold;
	letter-spacing: -0.025rem;
	line-height: 1;
}
.signup__title {
	margin-bottom: 17.5px;
	font-size: 1.424rem;
	font-weight: bold;
	letter-spacing: -0.075rem;
	line-height: 1;
}
.signup__title::first-letter {
	text-transform: capitalize;
}
.signup__row {
	display: grid;
	grid-gap: 8px;
}
.signup__label {
	font-family: "Montserrat", sans-serif;
	font-size: 0.79rem;
	font-weight: bold;
	text-transform: capitalize;
}
.signup__input, .signup__button {
	height: 40px;
	font-size: 0.79rem;
	border-radius: 8px;
	cursor: pointer;
}
.signup__input {
	padding: 0 17.5px;
	background-color: transparent;
}
.signup__button {
	height: 45px;
	font-size: 0.702rem;
	letter-spacing: 0.075rem;
	font-weight: bold;
	text-transform: uppercase;
}
.signup {
	position: absolute;
	height: 470px;
	transition: 250ms;
	background-color: #3f66ff;
	width: 325px;
}
.signup__wrapper {
	width: 100%;
	display: grid;
	grid-gap: 15px;
	opacity: 1;
	transition: 250ms cubic-bezier(0.17, 0.67, 0.68, 1.39) 100ms;
}
.signup__icon {
	color: #fff;
}
.signup__title {
	color: #fff;
	text-transform: capitalize;
}
.signup__row--flex {
	display: flex;
	justify-content: space-between;
}
.signup__label {
	color: #fff;
}
.signup__input, .signup__button {
	border: 1px solid #fff;
	outline-color: #fff;
}
.signup__input {
	color: rgba(255, 255, 255, 0.85);
	caret-color: #fff;
}
.signup__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.signup__button {
	background-color: #fff;
	color: #3f66ff;
}
.signup__link {
	color: rgba(255, 255, 255, 0.85);
}
.su-proof {
	background-color: #fff;
    color: #3f66ff;
    font-size: 0.702rem;
    letter-spacing: 0.075rem;
    font-weight: bold;
    height: 40px;
    cursor: pointer;
    border-radius: 8px;
    display: inline-block;
    padding: 5% 40%;
}
.filename {
	font-size: 12px;
    color: white;
    padding: 0 2%;
}
.sign-up {
	transition: opacity 0.5s;
}
.cardHide {
	opacity: 0;
	z-index: 0;
}