@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


* {
  box-sizing: border-box;
	margin: 0; 
}

*:focus {
	outline: none;
	box-shadow: 0 0 4px 3px #6b3dc7;
}

body, html {
	height: 100%;
	scroll-behavior: smooth;
	background-color: #0E131F;
	color: #cfd5da;
	font-family: 'Poppins', sans-serif;
}


a {
	color: #6b3dc7;
	text-decoration: none;
	/* transition-duration: 0.1s; */
}

a:hover {
	border-bottom: 2px solid #6b3dc7;
}

#navBarItemContainer {
	z-index: 2;
  background-color: #0E131F;
  position: fixed;
  top: 0;
  width: 100%;
	box-shadow: 0 0 40px rgb(255 255 255 / 40%);
}

#navBarLeftItems, #navBarRightItem {
	list-style-type: none;
	margin: 0;
  padding: 0;
}

.navBarItem {
  float: left;
	padding: 10px;
}

.navBarItemLink:focus {
	box-shadow: 0 0 4px 3px #38405F;
}

.navBarRight {
	float: right;
}

.navBarItemLink, .navBarItemLinkRight {
  display: block;
  color: #cfd5da;
  text-align: center;
	padding: 10px;
	border-radius: 4px;
  text-decoration: none;
	transition-duration: 0.5s; 
}

.navBarItemLinkRight {
	color: #d6dee3;
	font-size: 20px;
	text-shadow: 0 0 10px #fff, 0 0 20px #5732a1, 0 0 30px #5732a1, 0 0 40px #5732a1, 0 0 50px #5732a1, 0 0 100px #5732a1, 0 0 100px #5732a1;
}

.navBarItemLink:hover {
	background-color: #38405F;
	border-bottom: none;
}

.navBarActive  {
	background-color: #38405F;
}


#landingPage {
	height: 100%;
	margin-top: 100px;
}

#landingPageImage {
	/* margin-left: 100px; */
	max-width: 50%;
	/* height: 550px; */
}

#landingPageImageTextContainer {
	display: flex;
	justify-content: center;
}

#landingPageText {
	margin-left: 50px;
	width: 35%;
}

#landingPageProductName {
	font-size: 8vw;
}

#landingPageButtonContainer {
	display: flex;
	justify-content: center;
	margin-top: 50px;
	gap: 20px;
}

.button {
	border: none;
	width: 150px;
	height: 40px;
	border-radius: 4px;
	font-size: 20px;
	transition-duration: 0.5s;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
}

.button:hover {
	animation: buttonHover 0.8s infinite;
}


@keyframes buttonHover {
	0% { transform: rotate(2deg) }
	50% { transform: rotate(-2deg) }
	100% { transform: rotate(2deg) }
}

.button:active {
	transform: scale(1.1);
	animation: none;
}

#landingPageStartButton {
	background-color: #6b3dc7;
	color: #cfd5da;
}

#landingPageStartButton:hover {
	/* background-color: #4e5d94; */
}

#landingPageDemoButton {
	border: 2px solid #cfd5da;
	background-color: transparent;
	color: #cfd5da;
}

#landingPageDemoButton:hover {
	background-color: #cfd5da;
	color: #38405F;
}

#landingPageDemoButton:focus {
	box-shadow: 0 0 4px 3px #cfd5da;
}

h2 {
	font-size: 50px;	
	text-align: center;
	margin-bottom: 50px;
}

#problem {
	background-color: #38405F;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

#problemPageTextImageContainer {
	display: flex;
	justify-content: space-between;
	margin-right: auto;
	margin-left: auto;
	width: 90%;
	padding: 50px;
}

.image {
	border-radius: 8px;
	display: block;
	height: auto;
	box-shadow: 0 0 40px rgb(255 255 255 / 30%);
}

#problemPageTextContainer {
	width: 50%;
	margin-top: auto;
	margin-bottom: auto;
}


#problemPageImageContainer {
	/* width: 30%; */
	/* height: 50%; */
	margin-top: auto;
	margin-bottom: auto;
}	

#problemPageImage {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

#problemPageTextContainer, #problemPageImageContainer {
	width: 50%;
}

#problemPageNumber {
	font-size: 50px;
	color: #6b3dc7;
}

#problemPageButton {
	margin-top: 50px;
	/* font-size: 15px; */
	color: #6b3dc7;
	background-color: transparent;
	border: 2px solid #6b3dc7;
}

#problemPageButton:hover {
	background-color: #6b3dc7;
	color: #cfd5da;
}

#problemPageButton:focus {
	/* box-shadow: 0 0 4px 3px #cfd5da; */
}



#introducing {
	background-image: url(Images/introducing.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; 
	/* background-color: black; */
	height: 100%;
	display: flex;
	justify-content: center;
}

#introducingTitle {
	margin-top: auto;
	margin-bottom: auto;
}

#product {
	background-color: #38405f;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.down {
	/* padding: 10px; */
	display: block !important;
	margin-top: 50px;
	color: #8a939c;
	width: 32px;
	transition-duration: 0.5s;
	z-index: 1;
	margin-left: auto;
	margin-right: auto;
}

.down:hover {
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #8a939c;
	transform: scale(1.3);
}

.down:focus {
	border-radius: 50%;
	box-shadow: 0 0 4px 3px #8a939c;
}



#productPageImage {
	width: 45%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
}

#productPageTextContainer {
	text-align: center;
}

#productPageSlogan {
	color: #6b3dc7;
}

#transitionProductFeatures {
	background-image: url(Images/transitionProductFeatures.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; 
	height: 80%;
}

#features {
	height: 100%;
	display: flex;
	background-color: #0e131f;
}

#featuresLeft, #featuresRight {
	width: 50%;
	height: auto;
}

#featuresLeft {
	background-image: url(Images/features.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; 
	height: 100%;
	display: flex;
	justify-content: center;
}

#featuresLeftTextContainer {
	margin-top: auto;
	margin-bottom: auto;
	text-align: center;
}

#featuresRight {
	padding: 50px;
	/* height: 100%; */
	display: flex;
	justify-content: center;
	background-color: #8a939c;
}

#featuresRightCard {
	padding: 20px;
	/* border: 1px solid red; */
	/* background-color: #8a939c;	 */
	border-radius: 8px;
	/* box-shadow: 0 0 40px rgb(255 255 255 / 20%); */
	margin-top: auto;
	margin-bottom: auto;
	width: 100%;
	height: 90%;
	display: flex;
	justify-content: center;
}

#featuresRightTextContainer {
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 100px;
	margin-left: 100px;
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.featuresIconTitleContainer {
	display: flex;
	color: #38405f;
	margin-bottom: 10px;
}

h3 {
	font-size: 25px;
	font-weight: bold;
}

.featuresTitle {

}

.featuresIcon {
	display: block;
	/* color: #38405f; */
	font-size: 32px;
	margin-right: 10px
}

.featureText {
	color: #38405f;
}


#featuresPageButton {
	/* font-size: 15px; */
	color: #38405F;
	background-color: transparent;
	border: 2px solid #38405F;
}

#featuresPageButton:hover {
	background-color: #38405F;
	color: #cfd5da;
}

#featuresPageButton:focus {
	box-shadow: 0 0 4px 3px #38405F;
}

#productAnchor {
	height: 5%;
	background-color: #38405f;
}



#aboutTop {
	background-image: url(Images/aboutTop.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; 
	/* background-color: black; */
	height: 50%;
}

#about {
	display: flex;
	justify-content: center;
	height: 130%;
	background-color: #38405f;
}

#aboutBottom {
	background-image: url(Images/aboutBottom.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; 
	height: 75%;
}

#aboutPageTextContainer {
	margin-top: 100px;
	text-align: center;
}

#aboutPageCardsContainer {
	display: flex;
	justify-content: center;
	gap: 5vw;
	margin-top: 150px;
}

#aboutPageCard {
	width: 350px;
	height: 400px;
	border-radius: 8px;
	background-color: #0E131F;
	padding: 20px;
	box-shadow: 0 0 40px rgb(255 255 255 / 30%);
	top: 0;
	position: relative;
	transition-duration: 0.5s;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

#aboutPageCard:hover {
	top: -20px;
}

.profilePictureImage {
	margin-left: auto;
	margin-right: auto;
	border-radius: 50%;
	width: 150px;
	height: auto;

}

.contactButton {
	background-color: #6b3dc7;
	color: #cfd5da;
	margin-left: auto;
	margin-right: auto;
	/* margin-top: 30px; */
}

.contactButton:focus {
	box-shadow: 0 0 4px 3px #38405f;
}


#contact {
	display: flex;
	justify-content: center;
	height: 100%;
	flex-direction: column;
}

/* contact form to get in touch */
#contactForm {
	/* margin-top: 100px; */
	/* margin-right: 10%; */
	background-color: #38405F;
	padding: 20px;
	width: 35%;
	border-radius: 8px;
	height: auto;
	margin-top: auto;
	margin-bottom: auto;
	display: flex;
	/* justify-content: center;	 */
	margin-left: auto;
	margin-right: auto;
}

#contactFormContent {
	width: 100%;
	margin-top: auto;
	margin-bottom: auto;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.contactFormText {
	margin-bottom: 10px;
}

/* for inputs and textarea */
input, textarea {
	outline: none;
	font-family: 'Roboto', sans;
}

/* add spacing between textarea borders and text inside it */
textarea {
	padding-top: 5px;
}


#nameInputContainer {
	display: flex;
	gap: 30px;
}

#messageContainer {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* an input box */
.contactFormInput {
	border-radius: 4px;
	height: 40px;
	border: 1px solid #8a939c;
	padding-left: 10px;
	background-color: #cfd5da;
	color: #38405f;
	transition-duration: 0.5s;
	/* font-size: 16px; */
	font-family: 'Montserrat', sans-serif;
}

/* when user clicks on input box */
.contactFormInput:focus {
	box-shadow: 0 0 4px 3px #8a939c;	
}


/* textarea on form */
#formTextArea {
	height: 130px;
	width: 70%;
	resize: vertical;
	transition-duration: 0s;
}

/* submit button on form */
#formButtonSubmit {
	font-family: 'Montserrat', sans-serif;
	background-color: #6b3dc7;
	color: #cfd5da;
}


#footer {
	background-color: #38405F;
	height: auto;
}

#footerContainer {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	gap: 5vw;
	padding-bottom: 50px;
}

.footerColumn {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.footerLink, .footerText {
	color: #8a939c;	
}

.footerLink:hover {
	border-bottom: 2px solid #8a939c;
}

.footerLink:focus {
	box-shadow: 0 0 4px 3px #8a939c;
}

#footerContactTitle {
	margin-top: 10px;
}

#footerProductName {
	font-size: 50px;
}

#footerProductName:hover {
	border-bottom: none;
}

.footerSlogan {
	color: #cfd5da;
}

@media screen and (max-width: 1400px) {
	#contactForm {
		width: calc(100% - 500px);
	}
}


@media screen and (max-width: 1200px) {
	#featuresRightTextContainer {
		margin-right: 20px;
    margin-left: 20px;
	}

	#featuresRightCard {
		height: auto;
	}

	/* #aboutPageCardsContainer {
		flex-direction: column;
	} */

	#aboutPageTextContainer {
		/* margin-left: 30px; */
    /* margin-right: 30px; */
		padding: 10px;
	}


	#aboutPageCard {
		width: 28vw;
		/* margin-left: auto; */
		/* margin-right: auto; */
	}

	#contactForm {
		/* width: 60%; */
	}

	.footerLink, .footerText {
    font-size: 13px;
	}

	#footerProductName {
		font-size: 40px;
	}

	.footerSectionTitle {
		font-size: 20px;
	}
}

@media screen and (max-width: 1000px) {
	#contactForm {
		width: calc(100% - 300px);
	}
}


@media screen and (max-width: 900px) {
	
	#footerContainer {
		flex-direction: column;
		justify-content: center;
		margin-left: 50px;
	}
}

@media screen and (max-width: 800px) {

		#landingPage {
		height: 130%;
	}

	#problem {
		height: 130%;
	}


	#problemPageTextImageContainer {
		flex-direction: column;
		justify-content: center !important;
	}

	#problemPageTextContainer, #problemPageImageContainer {
		width: 100% !important;
	}

	#problemPageTextContainer {
		text-align: center;
	}

	#problemPageImageContainer {
		margin-top: 50px !important;
	}


	#navBarItemContainer {
		/* padding-top: 5px; */
		height: 60px;
    display: flex;
    justify-content: center;
	}
/* 
	.navBarItem {
		padding: 5px;
	} */

	.navBarItemLink, .navBarItemLinkRight {
		padding: 8px;
	}

	#landingPageImageTextContainer {
		flex-direction: column;
	}

	#landingPageImage, #landingPageText {
		margin-left: auto;
    margin-right: auto;
	}

	#landingPageImage {
		max-width: 90%;
	}

	#landingPageText {
		margin-top: 50px;
		width: 90%;
		text-align: center;
	}

	#landingPageProductName {
		margin-bottom: 30px;
	}

	#productPageImage {
		width: 80%;
	}
	
	#features {
		flex-direction: column;
	}

	#featuresLeft, #featuresRight {
		/* height: 70%; */
		width: 100%
	}

	#featuresLeft {
		height: 30%;
	}

	#about {
		height: auto;
	}

	#aboutPageCardsContainer {
		flex-direction: column;
		gap: 30px;
	}

	#aboutPageCard {
		width: 100%;
	}
}

@media screen and (max-width: 700px) {
	#contactForm {
		width: 90%;
	}
}

@media screen and (max-width: 600px) {

	#navBarItemContainer {
		flex-direction: column;
		justify-content: center;
		height: 100px;
	}

	.navBarItem {
		padding: 5px;
		font-size: 14px;
	}

	#navBarLeftItems {
    margin-left: auto;
    margin-right: auto;
		margin-top: 10px;	
	}

	#navBarRightItem {
		margin-left: auto;
		margin-right: auto;
		/* padding: 0; */
	}

	.navBarRight {
		padding: 0;
		margin-bottom: 10px;
	}

	.navBarItemLinkRight {
		padding: 0;
	}


	#featuresLeft {
		height: 45%;
	}

	#featuresRight {
		padding: 20px;
		/* height: 100%; */
	}

	#featuresRightTextContainer {
		gap: 30px;
	}
}


@media screen and (max-width: 400px) {

	#problemPageTextImageContainer {
		padding: 10px;
	}

	#problemPageImage {
		width: 100%;
	}

	#transitionProductFeatures {
		height: 50%;
	}

	#featuresLeft {
		background-image: none;
		margin-bottom: 30px;
	}

	#featuresPageButton {
		margin-left: auto;
		margin-right: auto;
	}

	#contactForm {
		width: 100%;
		border-radius: 0;
	}

	#nameInputContainer {
		flex-direction: column;
	}

	.contactFormInput {
		width: 280px;
	}

	#formTextArea {
		width: 280px;
	}
}


::selection {
	background-color: #3a266d;
	color: #cfd5da;
}


::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1b2233;
}

::-webkit-scrollbar-thumb {
  background: #6b3dc7;
	border-radius: 4px;
	/* border: 1px solid #38405F; */
}

::-webkit-scrollbar-thumb:hover {
  background: #5935a2;
}