@font-face {
	font-family: SF-Pro-Display-Regular;
	src: url(../fonts/SF-Pro-Display-Regular.otf);
 }
 @font-face {
	font-family: SF-Pro-Display-Black;
	src: url(../fonts/SF-Pro-Display-Black.otf);
 }
 @font-face {
	font-family: Morganite-Medium;
	src: url(../fonts/Morganite-Medium.ttf);
 }

 @keyframes loader {
	0% { transform: translateX(-100px); }
	50% { transform: translateX(100px); }
	100% { transform: translateX(-100px); }
 }

 :root {
	--dark: #111f3b;
	--green: #00d64c;
	--blue: #3a4aff;
	--light: #d6e8ee;
	--light-grey: #c7c7c7;
	--white: #fff;
	--purple: #9434ed;
	--translucent-blue: rgba(214, 217, 255, 0.5);
	--backdrop: rgba(56, 73, 255, 0.046);
	--transition: all .25s ease-out;
	--border-size: 2px;
	--border-radius-card: 30px;
	--border-radius-btn: 15px;
	--font-12: 12px;
	--font-14: 14px;
	--loader: 9999;
 }

body {
	font-family: "SF-Pro-Display-Regular", sans-serif;
	background-color: var(--backdrop);
	padding: 0;
	margin: 0;

}

/* Loader layout */
.page-loader, .loader-page {
  position: fixed; 
  inset: 0; 
  display: grid; 
  place-items: center;
  background: #020326;
  z-index: 9999;
}
.loader { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	gap: 1.25rem; }
.typed-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; 
	font-size: clamp(18px, 2.5vw, 28px); 
	color: #ffffff; 
	letter-spacing: .5px; }

/* Caret (blinking cursor) */
.caret {
  display: inline-block; 
  width: 1ch; border-right: 2px solid #fff; 
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { border-color: transparent; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
}

/* Optional fade-out when done */
.loader-page { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; }


.btn-blue, #signup_form button {
	color: var(--light);
	background-color: var(--blue);
	border-radius: var(--border-radius-btn);
	transition: all .25s ease-out;
}

.btn-blue:hover {
	background-color: var(--purple);
	color: var(--light);
}

.btn-blue:active, #signup_form button:active {
	box-shadow: inset 1px 3px 1px #000;
   transform: scale(0.975);
}

.gradient-text {
	background: -webkit-linear-gradient(318deg,#b937ff, #06e7f8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#div-add-lead {
	opacity: 0;
	height: 0;
	transition: all .5s ease-out;
}

.view-brochure {
	text-align: center;
	border-radius: var(--border-radius-card);
	border: var(--border-size) solid var(--dark);
	opacity: 0;
	width: 80%;	
	transition: all .5s ease-out;
}

.lead {
	background-color: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	text-align: center;
	border-radius: var(--border-radius-card);
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.35);
	opacity: 0;
	width: 50%;	
	transition: all .5s ease-out;
}

.lead:hover {
	transform: translate(-10px, -10px);
	box-shadow: 10px 10px 15px var(--dark);
}

.lead .form-group button {
	border: var(--border-size) solid var(--danger);
	font-size: medium;
    float: right;
    border-radius: 50px;
    width: 30px;
    height: 30px;
	 transition: all .25s ease-out;
	 background-color: transparent;
    color: var(--danger)
}


.lead .form-group button:hover {
	background-color: var(--danger);
   color: #fff
}

.lead-answers {
	width: 60%;
}

#text-result-div {
	display: none;
}

.brand-form {
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	width: 100%;
	top: 60px;
	left: 0;
}

.composed_mail_message {
	font-size: medium;
}

/* send-email input */
.se_border-radius, .login-page input, #signup_form select {
	border: 0.5px solid var(--light-grey);
   /* box-shadow: inset 1px 2px 4px 0px #111f3bc2; */
	border-radius: 9px;
	padding: 0.5rem;
}

.lead_role {
	background: transparent;
	font-size: smaller;
	border: none;
}

.se_border-radius:focus, .login-page input:focus {
	border: 0.5px solid var(--blue);
}

.textarea_qtn {
	font-size: medium;
}

.input_question::placeholder {
	color: rgb(204, 204, 204);
}

#action_btns {
	opacity: 0;;
}

/* .question-slide {
	background-color: #f4b4ff;
} */

html {
	scroll-behavior: smooth;
}

#dashboard-container {
	display: grid;
	grid-template-columns: 15% 1fr;
}

#dashboard-tabs {
	display: grid;
	align-self: start;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

#dashboard-tabs a {
	display: flex;
	flex-direction: row;
	color: var(--dark);
	align-items: center;
	border-bottom: 1px dashed var(--light-grey);
	font-size: 18px;
}

#dashboard-tabs a:hover {
	color: var(--blue);
}

#dashboard-main-body {
	border-left: 1px dashed var(--light-grey);
}

#dashboard-body {
	display: grid;
	grid-template-areas: 'a a' 'b c' 'd e';
}

#dashboard-body a {
	border-radius: var(--border-radius-card);
	transition: var(--transition);
	background-position: center;
	background-repeat: no-repeat;
	flex-direction: column;
	background-size: 100%;
	text-align: left;
	color: #ffffff;
}

#dashboard-body a:hover {
	background-size: 120%;
}

#dashboard-body a:nth-child(1) {
	/* background-image: url(../img/stock-image-1.jpg); */
}

#dashboard-body a:nth-child(2) {
	background-image: url(../img/cre.jpg);
}

#dashboard-body a:nth-child(3) {
	background-image: url(../img/stock-image-2.jpg);
}

#dashboard-body a:nth-child(4) {
	background-image: url(../img/stock-image-3.jpg);
}

#dashboard-body a:nth-child(5) {
	background-image: url(../img/stock-image-4.jpg);
}

#dashboard-body a div {
	background-image: linear-gradient(300deg, transparent, rgba(214, 217, 255, 0.75));
	background-color: rgba(137, 43, 226, 0.1);
	-webkit-text-stroke-width: 0.25px;
  	-webkit-text-stroke-color: #3b00fb;
	border-radius: var(--border-radius-card);
	transition: var(--transition);
	color: var(--dark);
	height: 100%;
}

#dashboard-body a div:hover {
	color: var(--white);
	background-color: #3a4aff72;
}

.pace {
	-webkit-pointer-events: none;
	pointer-events: none;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.pace-inactive {
	display: none;
}

.pace .pace-progress {
	background: var(--purple);
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 100%;
	width: 100%;
	height: 4px;
}

.main-stuff {
	margin: 60px 0 80px 0;
	transition: all .5s ease-out;
}

.messages {
	position: fixed;
	z-index: 1025;
	margin-top: 5px;
}

.login p:nth-child(2), .login p:nth-child(3) {
	display: grid;
}

.socialaccount_providers {
	display: grid;
	text-align: center;
}


/* the header */

#header {
	background-color: var(--translucent-blue);
  	-webkit-backdrop-filter: blur(10px);
  	backdrop-filter: blur(10px);
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030;
	height: 60px;
	display: grid;
	text-align: center;
	grid-template-columns: 50% 35% 15%;
	/*box-shadow: 5px 1px 10px 6px #848484; */
	transition: all .5s ease-out;
}

#mobile-bottom {
	display: none;
}

.searchbar {
	background-color: var(--dark);
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	overflow-y: hidden;
	z-index: 1031;
	height: 0;
	display: block;
	text-align: center;
	transition: all .5s ease-out;
}

.searchbar div form {
	display: grid;
	grid-template-columns: 85% 15%;
	border: none;
	overflow-y: hidden;
	height: 100%;
}

.searchbar div form button {
	height: 55px;
	background-color: transparent;
	border: none;
	color: #fff;
}

.funa {
	height: 50px;
	background-color: #000;
	border: none;
	border-bottom: 3px solid #6b747c;
	font-size: x-large;
}

.funa:focus {
	font-size: x-large;
	background-color: #000;
	border-bottom: 3px solid red;
	color: #fff;
}

/* allauth page */
.container-alluth {
	margin-top: 60px;
	display: flex;
	justify-content: center;
}

.login-page, .message-page {
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.35);
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: var(--border-radius-card);
	-webkit-backdrop-filter: blur(10px);
	transition: all .5s ease-out;
	backdrop-filter: blur(10px);
	width: 40%;
	padding: 4rem;
}

.login-page label, .login-page input {
	display: block;
}


.message-page button {
	border-radius: 10px;
	color: #fff;
	border: none;
	padding: 2.5% 6%;
	background-color: var(--dark);
}

/* .message-page input, textarea {
	border-radius: 15px;
	border: 1px solid var(--dark);
	padding: 1.5%;
	width: 300px;
} */

.message-page input {
	border-radius: 0.25rem;
	border: 1px solid var(--dark);
	padding: 1.5%;
	width: 300px;
}


.kop {
	background: var(--dark);
	color: red;
}

#title {
	display: grid;
	grid-template-columns: 30% 70%;
	margin-top: 10px;
}

#open-svg {
	display: flex;
	position: absolute;
	justify-content: center;
	align-items: center;
	text-align: left;
	transform: translate(50%, 50%);
	width: 30px;
	height: 30px;
}

.openmenu {
	width: 27.5px;
	height: 3px;
	border-radius: 10px;
	background-color: var(--dark);
	transition: all .5s ease-in-out;
}

.openmenu::before, .openmenu::after {
	content: '';
	position: absolute;
	width: 27.5px;
	height: 3px;
	border-radius: 10px;
	background-color: var(--dark);
	transition: all .5s ease-in-out;
}

.openmenu::before {
	transform: translateY(8px);
}

.openmenu::after {
	transform: translateY(-8px);
}

.vula .openmenu {
	background-color: transparent;
}

.vula .openmenu::before {
	transform: rotateZ(-45deg);

}

.vula .openmenu::after {
	transform: rotateZ(45deg);
}

#side-menu {
	background-color: rgba(214, 217, 255, 0.85);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom-left-radius: var(--border-radius-card);
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  overflow-x: hidden;
  padding-top: 60px;
  transition: all .5s ease-out;
}

.sdeNav, .sdeNav-profile{
  padding: 10px 10px 10px 30px;
  text-decoration: none;
  font-size: 32px;
  color: var(--dark);
  opacity: 0;
  display: block;
  transition: 0.3s;
  margin-top: 15px;
}

.sdeNav:hover {
	color: var(--blue);
}

@keyframes slidein {
	0% {transform: translateX(-20px); opacity: 0;}
	45% {transform: translateX(15px); opacity: 1;}
	100% {transform: translateX(0px); opacity: 1;}
}

@keyframes slideout {
	0% {transform: translateX(0px); opacity: 1;}
	100% {transform: translateX(-20px); opacity: 0;}
}

@keyframes slide-lead-in {
	0% {transform: translateY(-20px); opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}

@keyframes slide-lead-out {
	100% {transform: translateY(-20px); opacity: 0;}
}


#loginuser-underline{
	position: absolute;
	text-align: center;
	width: 70%;
	transform: translateX(25%);
	height: 3px;
	background-color: red;
}

#exploration #exp {
	font-size: 20px;
	color: #fff;
	background-color: #3a4aff;
	padding: 8px;
	border-radius: 20px;

}

#exploration #exp:hover #exploration #exp:focus {
   background-color: #3a4aff;
}



#header div a {
	text-decoration: none;


}

#logo {
	display: grid;
	grid-template-columns: 20% 1fr;
}

#brand {
	float: left;
	margin-top: 10px;
	padding-left: .5rem;
}

#brand h1 {
	width: 100px;
	color: var(--dark);
}

#profile-pic {
	color: var(--dark);
	border-radius: 50px;
    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid;
    font-size: var(--font-14);
	 overflow: hidden;
}

#search-btn {
	display: none;
	width: 50%;
	height: 40px;
	border-bottom: 3px solid #fff;
	transform: translateY(25%);
}

#search-btn i {
	color: #fff;
	float: left;
	transform: translateY(50%);
}

#dienav {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 10px;
}

#dienav a {
	color: var(--dark);
}

#dienav p, #title h2 {
	color: var(--dark);
	font-size: 20px;
}

#dienav p {
	font-size: var(--font-14);
}

.bagtag {
	background-image: url(../img/bag.svg);
	background-position: center;
	background-repeat: no-repeat;
	transform: translateY(-15%);
	width: 30px;
	height: 30px;
}

.bagtag span {
	transform: translateY(35%);
}

.desktop-mode {
	display: block;
}

.mobile-mode {
	display: grid;
	grid-template-columns: 10% 35% 55%;
	border-radius: 7px;
	margin: 5% 0;
	padding: 2.5%;
	box-shadow: 0 3px 10px 0px #a29e9e;
}

.product-in-cart-details {
	display: grid;
	grid-template-columns: 70% 30%;
}

.product-in-cart-details p {
	font-size: 12px;
	margin: 0;
	padding: 0;
}

.unlogged {
	text-decoration: none;
	color: #fff;
	font-size: 20px;
	padding: 0 8px;
	margin: 0 8px;
	height: 35px;
}

.unlogged:hover {
	text-decoration: underline;
}

/* banner */
.banner {
	width: 100%;
	height: 100vh;
	background: linear-gradient(45deg, var(--dark), var(--dark), var(--blue));
	background-size: cover;
	background-position: center;
}

/* .banner::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 110vh;
	background-size: cover;
	background-position: top;
	overflow-x: hidden;
	background-color: #00000076;
	/* animation: banner 10s linear infinite;
} */

@keyframes banner {
	0% {opacity: 0;}
	40% {opacity: 0;}
	50% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0}
}

#desktop-top-tabs {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

#desktop-top-tabs a {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--dark);
	font-size: var(--font-14);
}

#homepage {
	position: absolute;
	text-align:center;
	width: 50%;
	color: var(--white);
	top: 40%;
	left: 25%;
}


#homepage h1 {
	width: 100%;
	transform: translateY(-25%);
	opacity: 0;
	font-size: 3.5rem;
	transition-duration: .5s;
	transition-timing-function: ease-out;
  	transition-delay: .3s;
	-webkit-filter: drop-shadow(0px 1px 16px #00000052);
  	filter: drop-shadow(0px 1px 16px #00000052);
}

#homepage p {
	width: 100%;
	transform: translateY(0);
	opacity: 0;
	text-align: left;
	transition-duration: .5s;
	transition-timing-function: ease-out;
  	transition-delay: .3s;
	-webkit-filter: drop-shadow(0px 1px 16px #00000052);
  	filter: drop-shadow(0px 1px 16px #00000052);
}

#homepage a {
	padding: 0.5% 1%;
	font-size: 2rem;
	border-radius: var(--border-radius-btn);
	transform: translateY(-15%);
	opacity: 0;
	transition-duration: .5s;
	transition-timing-function: ease-out;
  	transition-delay: .3s;
	color: var(--white);
	background-color: var(--blue);
	/* -webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px); */
	-webkit-filter: drop-shadow(0px 1px 16px #00000052);
  	filter: drop-shadow(0px 1px 16px #00000052);
}

/* Dropdown Button */
#dropbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
#dropbtn:hover, #dropbtn:focus {
  text-decoration: underline;

}

/* Dropdown Content (Hidden by Default) */
#profile-content {
  display: block;
  position: absolute;
  background-color: rgba(214, 217, 255, 0.85);
  border-bottom-left-radius: var(--border-radius-card);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--dark);
  width: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: 0.5s;
  right: 0;
  transform: translate(0, 50px);
}

#side-nav {
  width: 0;
  display: inline-block;
  position: fixed;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: 0.5s;
  overflow-x: hidden;
  left: 0;
  transform: translate(0, 21px);
}

.content {
	text-align: center;
	margin: 0 15%;
	padding: 2.5% 0;
}

.pricing-content a {
	width: 50%; 
	font-size: x-large;
}

.section {
	width: 100vw;
}

.sub-content a {
	display: grid;
  	place-items: center;
	grid-template-columns: 1fr 1fr;
	color: #1e1f31;
	text-align: left;
}

.sub-content a img {
	border-radius: var(--border-radius-card);
}

.full-width-content {
	background-image: linear-gradient(135deg,var(--purple), var(--blue));
	color: var(--white);
	width: 100vw;
	padding: 5% 0;
	margin: 0 0;
}

.section a {
	text-decoration: none;
}

.delete-btn {
	color: #fff;
	background-color: #f46a6a;
	padding: 5%;
	border-radius: 5px;
}

.socialaccount_providers a {
	text-decoration: none;
	border: var(--border-size) solid var(--dark);
	padding: 2.5% 6%;
	margin: 2% 0;
	transition: var(--transition);
	border-radius: var(--border-radius-card);
	color: var(--dark);
}

.socialaccount_providers a:hover {
	background-color: var(--purple);
	color: #ffffff;
}

/* Links inside the dropdown */
#profile-content a {
  color: var(--dark);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */
#profile-content a:hover {color: var(--blue);}

.thesummary {
	text-align: center;
	padding: 0.5% 0 2.5% 0;
}

.social-icons {
	display: flex;
	justify-content: center;
}

.social-icons a img, .social-icons a i {
	color: var(--dark);
	filter: opacity(0.5);
}

.social-icons a img:hover, .social-icons a i:hover {
	filter: opacity(1);
}

/* body */

.grid-style {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.stock-class {
	margin: 10%;
}

.the-image img {
	width: 100%;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
}

#address_update {
	height: 0;
	transition: .5s;
	overflow-y: hidden;
	display: none;
}

.stock-name{
	text-align: center;
	text-decoration: none;
	width: 100%;
	color: #fff;
	padding: 5% 0;
	margin: 0;
	background-color: #1b1c1e;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}


.stock-price {
	text-align: center;
	text-decoration: none;
	width: 100%;
	color: #000;
	padding: 5% 0;
	margin: 0;
	border: 2px solid #000;
	background-color: #e0e0e0;
}

.stockgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	border: 2px solid #000;
	border-radius: 15px;
	padding: 5%;
	transform: translate(0, 10%);
}

.stockgrid img {
	width: 70%;
}

.unavailable {
	position: absolute;
	z-index: 12;
	font-family: Impact;
	color: red;
}

.stock-info h1 {
	text-transform: uppercase;
	margin: 0;
}

.stock-info p {
    margin: 0;
    padding: 0;
}

.size-selection a, .openshare {
	color: #fff;
	background-color: #000;
	padding: 2%;
	border-radius: 10px;
}

.plz-select-size {
	color: red;
	display: none;
}

.share-icons {
	border: 2px solid #000;
	padding: 0;
	width: 100%;
	height: 0;
	overflow-y: hidden;
	opacity: 0;
	transition: all .5s ease-out;
	border-radius: 10px;
}

.share-icons div a {
	width: 20%;
}

.tab {
	position: fixed;
	bottom: 0;
	z-index: 999;
	height: 20px;
}

.tab_message {
	text-align: center;
	font-size: 12px;
	width: 100%;
	background-color: var(--light);
	color: var(--dark);
}

.payment_methods {
	text-align: center;
	padding: 0.5% 0 2.5% 0;
}

.payment-icons img {
	background-color: #fff;
	padding: 1%;
	border-radius: 5px;
	margin: 0 0.5%;
	height: 6vh;
}

.popup_message {
	position: absolute;
	z-index: 12;
	right: 0;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.35);
	border-radius: var(--border-radius-card);
	background-image: linear-gradient(var(--blue), var(--blue), #eb6175 110%);
	color: var(--white);
	font-size: medium;
	width: 20%;
	padding: 1rem;
	margin: 1rem;
}

.popup_message div button {
	border: 1.5px solid #fff;
	color: #fff;
	background: none;
	border-radius: 5rem;
	width: 30px;
	height: 30px;
}

.free-interview-card {
	background-image: linear-gradient(transparent, var(--purple) 250%);
}

.thy_span {
	width: 100vw;
	text-align: center;
}


footer {
	text-align: center;
	height: 40px;
	color: var(--dark);
}

#summary {
	background-color: var(--translucent-blue);
  	-webkit-backdrop-filter: blur(10px);
  	backdrop-filter: blur(10px);
	position: absolute;
	width: 100%;
	color: var(--dark);
}

footer p {
	top: 50%;
	font-size: 12px;
	margin: 0;
	text-align: center;
	transform: translate(0, 100%);

}

#payment-page {
	background-color: var(--translucent-blue);
	backdrop-filter: blur(10px);
	color: var(--dark);
	height: 100vh;
	
}

.ipartial  {
	position: fixed;
	z-index: 1031;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	display: none;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.4);
}

#payment-model-div, #lead-email-model-div {
	background-color: var(--translucent-blue);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	border: var(--border-size) solid #ffffff;
	border-radius: var(--border-radius-card);
	transition: all .5s ease-out;
}

#payment-model-header button {
	border: none;
	text-align: end;
    font-size: large;
    float: right;
    width: 30px;
    height: 30px;
    transition: all .25s ease-out;
    background-color: transparent;
    color: var(--dark);
}

#payment-model-body, #lead-email-model-body {
	background-color: #ffffffa1;
	border-radius: var(--border-radius-card);
}

#payment-model-body form {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

#my-picture {
	width: 100px;
	height: 100px;
	border-radius: var(--border-radius-card);
	background-color: var(--blue);
}

#open-yoco-card {
	display: none;
}

#yoco-payment-form {
	transition: all .5s ease-out;
	bottom: 0;
	padding: 1.5rem;
	border-top-left-radius: var(--border-radius-card);
}

#drop-zone {
	border: var(--border-size) dashed var(--dark);
	border-radius: var(--border-radius-card);
	padding: 20px;
	text-align: center;
	margin-bottom: 20px;
}

#signup_form input {
	width: 75%;
}

@media(max-width: 784px){

	#dashboard-container {
		display: grid;
		grid-template-columns: 1fr;
	}
	
	#dashboard-tabs, #title {
		display: none;
	}

	#dashboard-body {
	 height: fit-content;
	 grid-template-columns: 1fr;
    grid-template-areas: 'a' 'b' 'c' 'd' 'e';
	}

	#dashboard-body a {
		height: 220px;
	}

	#dashboard-body a div {
		color: var(--dark);
		-webkit-text-stroke-width: 0.15px;
		background-color: rgba(56, 73, 255, 0.35);
	}

	#dashboard-body a div p {
		font-size: smaller;
		max-width: 80%;
	}

	#profile-pic {
		 height: 30px;
		 width: 30px;
	}

	.view-brochure {
		width: 95%;	
	}

	

.lead {
	width: -webkit-fill-available;
}

.lead-answers {
	width: 90%;
}

#action_btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

#desktop-top-tabs {
	display: none;
}

#mobile-bottom {
	background-color: var(--translucent-blue);
  	-webkit-backdrop-filter: blur(10px);
  	backdrop-filter: blur(10px);
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 1030;
	height: 40px;
	display: block;
	/*box-shadow: 5px 1px 10px 6px #848484; */
	transition: all .5s ease-out;
}

#mobile-bottom-tabs {
	display: grid;
	text-align: center;
	grid-template-columns: 1fr 1fr 1fr;
}

#mobile-bottom-tabs a {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--dark);
}

#mobile-bottom-tabs a p {
	font-size: 12px;
}

#header {
	/* grid-template-columns: 15% 40% 20%; */
	grid-template-columns: 53% 23% 23%;
}

#header div a {
	width: 100%;

}

#brand h1 {
	width: 50%;
	font-size: x-large;
}

#logo {
	grid-template-columns: 60% 30%;
	margin-top: 3%;
}

#search-btn {
	width: 30%;
	border-bottom: 3px solid transparent;
}

#search-btn i {
	float: right;
}

#homepage {
	position: absolute;
	width: 90%;
	top: 30%;
	left: 7%;
}

#homepage h1 {
	font-size: 2.5rem;
}

#homepage a {
	font-size: 1.5rem;
	display: block;
	text-align: center;
}

.nav-link {
	display: inline-block;
}

/* .unlog {
	border: var(--border-size) solid var(--dark);
	border-radius: var(--border-radius-btn);
} */

.home-btn {
	width: 70%;
}

.content {
	margin: 0 5%;
}

.pricing-content a {
	width: 70%; 
	font-size: small;
}

.sub-content a img, .sub-content a video {
	grid-area: pic;
	padding-bottom: 1.5rem;
}

.sub-content a div {
	grid-area: text;
}

.sub-content a {
  	text-align: left;
	padding: 2rem 0;
	grid-template-columns: 1fr;
	grid-template-areas: "pic" "text";
}


.text-right a {
	margin-bottom: 5%;
}

#vula-bar {
	display: block;
}

#vala-bar {
	display: none;
}

.popup_message {
	text-align: center;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.35);
	color: var(--white);
	font-size: small;
	width: 35%;
	margin: .5rem;
}

.popup_message div button {
	border: 1.5px solid #fff;
	color: #fff;
	background: none;
	border-radius: 5rem;
	width: 20px;
	height: 20px;
}

.grid-style {
	display: grid;
	grid-template-columns: 1fr;
}

.stockgrid {
	grid-template-columns: 1fr;
	transform: translate(0, 5%);
}

.stockgrid a {
	width: 100%;
}

.stockgrid img {
	width: 100%;
}

/* allauth page */
.container-alluth {
	width: 100%;
	padding: 5%;
}

.login-page, .message-page {
	width: 100%;
	padding: 2.5%;
	border-radius: 15px;
	transform: translateX(0);
}

.socialaccount_providers {
	display: grid;
	text-align: center;
}

.payment-icons img {
	background-color: #fff;
	padding: 1.5%;
	border-radius: 5px;
	margin: 0 0.5%;
	height: 25px;
}

#open-yoco-card {
	display: flex;
}

#payment-model-body form {
	display: grid;
	grid-template-columns: 1fr;
}

#payment-page {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 20% 80%;
}

#yoco-payment-form {
	border-top-left-radius: var(--border-radius-card);
	border-top-right-radius: var(--border-radius-card);
	padding: 0;
	overflow: hidden;
	height: 0;
}
}