html, body{
	font-family: 'Manrope', Sans-Serif;
}
body{overflow-x: hidden;}
body.night{
	color: white;
	background-color: #0F172A;
}

.bold{font-weight: bold;}
.fs14{
	font-size: 14px;
}
.fs24{font-size: 16px;}
.fs22{font-size: 22px;}
.fs30{font-size: 30px;}
.fs60{
	font-size: 40px;
}
.dark-grey{color: #B4BFC7;}

section{position: relative;}

/*NAV*/
.night .main-nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0;
	left: 0;
	height: 100px;
	width: 100%;
	z-index: 25;
	padding: 15px 45px;
	transition: all 0.3s;
}
.night .main-nav .nav-items{
	display: flex;
	align-items: center;
}
.night .main-nav .nav-items a{
	margin: 0 12px;
	color: white;
	font-weight: bold;
}
.night .main-nav .nav-items a:hover{
	color: #2ABE98;
}
.night .main-nav .logo{
	width: 120px;
	transition: all 0.3s;
}
.night .main-nav.collapsed{
	border-bottom: solid 1px #291c4d;
	backdrop-filter: blur(10px);
    height: 80px;
    background-color: #100f2aa3;
}
.night .main-nav.collapsed .logo{
	width: 80px;
}

/*MOBILE NAV*/
.night .navbar{
	border-bottom: solid 1px #291c4d;
	backdrop-filter: blur(10px);
    height: 80px;
    background-color: #100f2af0;	
}
.night .navbar .logo{
	width: 90px;
	margin-left: 20px;
}
.night .navbar-menu{
	color: white !important;
	border-bottom: solid 1px #291c4d;
	backdrop-filter: blur(10px);
    background-color: #100f2af0;	
    padding-bottom: 15px;
}
.night .navbar-menu .navbar-item{
	color: white !important;
}
.night .navbar-burger{
	color: white !important;
}
.night .navbar-item:hover{
	background-color: #100f2a;
}



.night .dot-blur{
	background-color: #1C0B4B20;
	border-radius: 50%;
	filter: drop-shadow(0px 3.72018px 120px #1C0B4B);
}

/*HEADER*/
.night header{
	position: relative;
	padding-top: 200px;
	display: flex !important;
	align-items: center;
}
.night .main-title{
	font-size: 40px;
	font-weight: 800;
}
.night .header-image{
	display: none;
	position: absolute;
    top: 52%;
    transform: translateY(-50%);
    max-width: 800px; 
    right: 0px
}
.night .btn.btn-wisclic {
	font-family: 'Manrope', Sans-Serif;
	border-radius: 15px;
	padding: 15px 25px !important;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
}
.night .btn.btn-wisclic.btn-sm {
	padding: 8px 15px !important;
		border-radius: 8px;

}
.night .btn.btn-wisclic.btn-tone{
	color: white;
	background-color: #2ABE98 ;
	font-weight: bold;
}
.night .btn.btn-wisclic.btn-tone:hover{
	background-color: #12746E ;
	border: solid 1px #12746E;
}
.night .btn.btn-wisclic.btn-white{
	color: #324151;
	background-color: white ;
	font-weight: bold;
	transition: all 0.3s;
}
.night .btn.btn-wisclic.btn-white:hover{
	transform: translate-Y(-4px);
}

.night .btn.btn-wisclic.btn-outline{
	color: white;
	border: solid 2px white;
	background-color: transparent ;
	font-weight: bold;
	transition: all 0.3s;
}
.night .btn.btn-wisclic.btn-outline:hover{
	transform: translate-Y(-4px);
	color: #324151;
	background-color: white ;
	font-weight: bold;
	transition: all 0.3s;
}
/*S1*/
.night .s1{
	position: relative;
	padding: 120px 0px 40px 0;
}
.night .tabs li a{
	font-weight: bold;
}
.night .tabs li a:hover{
	border-bottom-color: #2ABE98;
}
.night .tabs li.is-active a {
    border-bottom-color: #2ABE98;
    color: #2ABE98;
}


/*S2*/
.night .s2{
	position: relative;
	padding:  80px 0 0 0;
}
.night .gradient-text{
	background: linear-gradient(90deg, #755FFF 8.03%, #33DDB2 80.3%);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
.night .collapse-card{
	padding: 10px 25px;
}
.night .collapse-card.active{
	background: rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	padding: 25px;
}
.night .collapse-card.active .collapse-title, .night .collapse-card .collapse-title:hover{
	opacity: 1
}
.night .collapse-card .collapse-title{
	opacity: 0.5;
	font-weight: bold;
	font-size: 25px;
}
.image-shadow{
	filter: drop-shadow(0px 3.72018px 50px rgba(3, 187, 170, 0.42));
}


/*S3*/
.s3{
	position: relative;
}

/*S4*/
.s4{
	padding: 100px 0;
	position: relative;
}


.night .pricing-switch{
	background-color: rgba(255, 255, 255, 0.28);;
	border-radius: 10px;
	padding: 14px 8px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.night .pricing-switch .switch-indicator{
	background-color: white;
	position: absolute;
	border-radius: 10px;
	width: 160px;
	height: 80%;
	z-index: 0;
	transition: all 0.5s;
}
.night.pricing-switch .switch-indicator.left{
	transform: translateX(-80px);
}
.night .pricing-switch .switch-indicator.right{
	transform: translateX(80px);
}
.night .pricing-switch .switch-item{
	cursor: pointer;
	width: 160px;
	color: white;
	position: relative;
	z-index: 1;
}
.night .pricing-switch .switch-item.active{
	font-weight: 400;
	color: black;
}
 
.night .pricing-card.translucid-card{
	padding: 8px; 
	width: 340px;
	margin: auto;
	max-width: 100%;
	background: rgba(255, 255, 255, 0.22);
	border-radius: 20px;	
}
.night .pricing-card .discount-tag{
	background: #FF7088;
	border-radius: 20px;
	color: white;
	font-size: 12px;
	padding: 2px 15px;
}
.night .pricing-card ul{
	font-size: 14px;
}


.night .plan-switch{
	background-color: rgba(255, 255, 255, 0.28);;
	border-radius: 10px;
	    width: 260px;
	    margin: auto;
	    max-width: 100%;
	padding: 14px 0px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.night .plan-switch .switch-indicator{
	background-color: white;
	position: absolute;
	border-radius: 10px;
	width: 85px;
	height: 80%;
	z-index: 0;
	transition: all 0.5s;
}
.night .plan-switch .switch-indicator.left{
	transform: translateX(-80px);
}
.night .plan-switch .switch-indicator.right{
	transform: translateX(80px);
}
.night .plan-switch .switch-item{
	text-align: center;
	cursor: pointer;
	width: 80px;
	color: rgba(208, 208, 208, 1);
	position: relative;
	z-index: 1;
}
.night  .plan-switch .switch-item.active{
	font-weight: 400;
	color: black;
}


.night .pro-card{
	background: rgba(24, 17, 51, 0.73); 
	border-radius: 20px;
}

.contact-input input{
	border-radius: 10px;
	height: 54px;
	width: 250px;
	max-width: 100%;
}


/*fix collapse*/
.collapse:not(.show) {
    display: block !important;
}

.slide-leave-active{
	transition: 300ms ease-out !important;
}
.slide-leave-active{
	transition: 300ms ease-out !important;
}


.night .header-image{
	display: none;
}

.center-mobile{
	text-align: center;
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.night header{
		padding-top: 180px;
	}
	.night .main-title{
		font-size: 60px;
	}
	.fs60{
		font-size: 40px;
	}
	.fs24{
		font-size: 24px;
	}


}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.night header{
		height: 100vh;
		min-height: 850px;
		padding-top: 70px;
	}
	.night .header-image{
		display: block;
	    top: 52%;
	    transform: translateY(-50%);
	    width: 50%; 
	    right: 0px
	}
	.fs60{
		font-size: 60px;
	}
	.center-mobile{
		text-align: left;
	}
	.night .modal-card{
		padding: 50px;
	}
	
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
	
}



.night .modal-card{
	padding: 20px;
	color: white !important;
    width: auto !important;
    background: rgba(16, 28, 55, 0.93) !important;
    border: 1px solid #5B5183 !important;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 10px;
    max-width: 95%;
    margin: auto;
    overflow: auto;
    max-height: 78vh;
}



/*fix dropdown*/
.dropdown-menu{
	border:none !important;
	background-color: transparent !important;
}
.dropdown-content{
	  background-color: transparent !important;
}
.dropdown-content:active{
	color: unset !important;
	background-color: white !important;
}
.dropdown-content:{
	color: unset !important;
	background-color: white !important;
}
.dropdown-item:active{
	color: unset !important;
	background-color: white !important;
}
.dropdown-item:hover{
	color: unset !important;
	background-color: white !important;
}
.tools-menu .dropdown-menu{
	width: 730px;
}

.tools-menu-item{
	
	color: white !important;
	width: auto !important;
	background: rgba(16, 28, 55, 0.93) !important;
	border: 1px solid #5B5183 !important;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
	backdrop-filter: blur(10px) !important;
	/* Note: backdrop-filter has minimal browser support */
	border-radius: 10px;
}

.tools-menu-item:hover{
	color: white !important;
	background: rgba(16, 28, 55, 0.93) !important;
}

.cookies{
	z-index: 99; 
	position: fixed; 
	bottom: 25px; 
	right: 15px;
	width: 600px; 
	max-width: 100%; 
	padding: 15px; 
	background-color: #050b17; 
	color: white;
	max-width: 90%;
	border-radius: 10px;
}
.btn-cookies{
    background-color: #ffffff12 !important;

}