body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Montserrat-Medium';
}

@font-face {
    font-family: 'Montserrat-Medium'; 
    src: url('fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-2.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInTest {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes fadeRise {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* BASE STYLES */
.background-container {
    background: #070707;
    position: relative;
    height: 100%;
    opacity: 0.92;
    overflow: hidden;
    transition: opacity 0.5s ease;
    background-size: 400% 400%;
}

.fpage {
    background: #070707;
    position: relative;
    height: 100%;
    opacity: 0.92;
    overflow: hidden;
    transition: opacity 0.5s ease;
    background-size: 400% 400%;
}

.cpage {
    display: flex;
    background: #070707;
    position: relative;
    height: 100vh;
    opacity: 0.92;
    overflow: hidden;
    transition: opacity 0.5s ease;
    background-size: 400% 400%;
}

.alphabit-topleft {
	position: absolute;
	top: 4%;
	left: 2%;
	color: #cdcdcd;
	font-size: 1.3vw;
	font-weight: 600;
	animation: fadeIn 1s ease-in-out forwards;
	cursor: pointer;
}

.alphabit-topleft a{
	text-decoration: none;
	color: #cdcdcd;
}

.alphabit-signup {
	position: absolute;
	top: 4%;
	left: 89%;
	border-radius: 20px;
	padding: 11px 13px;
	color: #cccccc;
	background: #1f1f1f;
	text-shadow: 0px 0px 1px;
	animation: fadeIn 1s ease-in-out forwards;
	cursor: pointer;
}

.alphabit-signup a{
	text-decoration: none;
	color: #cccccc;
}

.alphabit-login {
	position: absolute;
	top: 4%;
	left: 94.5%;
	border-radius: 20px;
	padding: 11px 13px;
	color: #cccccc;
	background: #1f1f1f;
	text-shadow: 0px 0px 1px;
	animation: fadeIn 1s ease-in-out forwards;
	cursor: pointer;
}

.alphabit-login a{
	text-decoration: none;
	color: #cccccc;
}

.alphabit-fwelcome{
	position: absolute;
	top: 25%;
	left: 37.5%;
	color: #cccccc;
	font-size: 3.35vh;
	text-shadow: 1px 1px 1px;
	animation: fadeIn 1s ease-in-out forwards;
}

.alphabit-swelcome{
	position: absolute;
	top: 30%;
	left: 33.5%;
	color: #cccccc;
	font-size: 3.35vh;
	text-shadow: 1px 1px 1px;
	animation: fadeIn 1s ease-in-out forwards;
}

.alphabit-welcome-text{
	position: absolute;
	top: 42.5%;
	left: 26.5%;
	color: #cccccc;
	max-width: 900px;
	text-align: center;
	font-size: 1.9vh;
	animation: fadeIn 1s ease-in-out forwards;
	font-family: 'Montserrat-Medium';
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.alphabit-learn {
	position: absolute;
	top: 55%;
	left: 44.5%;
	border-radius: 20px;
	padding: 12px 15px;
	color: #cccccc;
	background: radial-gradient(circle, #1f1f1f 0%, #161616 100%);
	text-shadow: 0px 0px 1px;
	animation: fadeIn 1s ease-in-out forwards;
	cursor: pointer;
	transition: transform 0.3s;
}

.alphabit-learn:hover {
  animation: pulse 1s infinite;
}

.alphabit-learn a {
	text-decoration: none;
	color: #cccccc;
}

.alphabit-training {
	position: absolute;
	top: 4%;
	left: 42.5%;
	border-radius: 20px;
	padding: 11px 13px;
	color: #cccccc;
	background: #1f1f1f;
	text-shadow: 0px 0px 1px;
	animation: fadeIn 1s ease-in-out forwards;
	cursor: pointer;
}

.alphabit-training a{
	text-decoration: none;
	color: #cccccc;
}

.alphabit-ml-model {
	position: absolute;
	top: 4%;
	left: 50.5%;
	border-radius: 20px;
	padding: 11px 13px;
	color: #cccccc;
	background: #1f1f1f;
	text-shadow: 0px 0px 1px;
	animation: fadeIn 1s ease-in-out forwards;
	cursor: pointer;
}

.alphabit-ml-model a{
	text-decoration: none;
	color: #cccccc;
}

.alphabit-learn-ml {
	position: absolute;
	top: 4%;
	left: 55%;
	border-radius: 20px;
	padding: 11px 13px;
	color: #cccccc;
	background: #1f1f1f;
	text-shadow: 0px 0px 1px;
	animation: fadeIn 1s ease-in-out forwards;
	cursor: pointer;
}

.alphabit-news{
	position: absolute;
	top: 1%;
	left: 28.5%;
	color: #bdbdbd;
	animation: fadeInTest 1s ease-in-out forwards;	
	cursor: pointer;
}

.line {
  border-bottom: 1px solid #888;
}

.alphabit-contact{
	position: absolute;
	top: 3%;
	left: 39%;
}

.alphabit-contact-details{
	position: absolute;
	top: 14%;
	left: 65.9%;
	color: #cccccc;
	font-size: 27.5px;
	font-family: "Lucida Console", monospace;
	text-shadow: 0px 0px 1px;
}

.alphabit-training:hover{
	background: #303030;
}

.alphabit-ml-model:hover{
	background: #303030;
}

.alphabit-learn:hover{
	background: #303030;
}

.alphabit-learn-ml:hover{
	background: #303030;
}

.alphabit-signup:hover{
	background: #303030;
}

.alphabit-login:hover{
	background: #303030;
}

.fa {
  padding: 12.5px;
  font-size: 25px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.85;
}

.fa-linkedin {
  position: absolute;
  top: 80%;
  left: 20%;
  background: #007bb5;
  border-radius: 20px;
  color: #cccccc;
}

.fa-facebook {
  position: absolute;
  top: 80%;
  left: 25%;
  background: #3B5998;
  border-radius: 20px;
  color: #cccccc;
}

.fa-youtube {
  position: absolute;
  top: 80%;
  left: 30%;
  background: #bb0000;
  border-radius: 20px;
  color: #cccccc;
}

.fa-instagram {
  position: absolute;
  top: 80%;
  left: 35%;
  background: #125688;
  border-radius: 20px;
  color: #cccccc;
}

.fa-copyright {
  position: absolute;
  top: 95.5%;
  left: 42%;
  color: #cccccc;
}

.copyright-text{
	position: absolute;
	top: 97.5%;
	left: 44.25%;
	color: #cccccc;
	font-size: 12px;
}

.contact-name{
	position: absolute;
	top: 26%;
	left: 21%;
	background: #f0f0f0;
	border-radius: 15px;
	width: 325px;
	height: 35px;
	color: black;
	border: none;
}

.contact-email{
	position: absolute;
	top: 34%;
	left: 21%;
	background: #f0f0f0;
	border-radius: 15px;
	width: 36vh;
	height: 4vh;
	color: black;
	border: none;
}

.contact-teamname{
	position: absolute;
	top: 42%;
	left: 21%;
	background: #f0f0f0;
	border-radius: 15px;
	width: 325px;
	height: 35px;
	color: black;
	border: none;
}

.contact-message{
	position: absolute;
	top: 50%;
	left: 21%;
	background: #f0f0f0;
	border-radius: 15px;
	width: 325px;
	height: 195px;
	color: black;
	border: none;
}

.contact-submit{
	position: absolute;
	top: 74.5%;
	left: 27%;
	background: #005896;
	border-radius: 15px;
	color: #cccccc;
	font-weight: 600;
	width: 75px;
	height: 35px;
	border: none;
	cursor: pointer;
}

.contact-name-text{
	position: absolute;
	top: 12%;
	left: 18%;
	color: #cccccc;
	font-weight: 600;
}

.contact-name-email{
	position: absolute;
	top: 23%;
	left: 18%;
	color: #cccccc;
	font-weight: 600;
}

.contact-name-teamname{
	position: absolute;
	top: 34%;
	left: 18%;
	color: #cccccc;
	font-weight: 600;
}

.contact-name-message{
	position: absolute;
	top: 45%;
	left: 18%;
	color: #cccccc;
	font-weight: 600;
}

.contact-box{
	position: absolute;
	top: 14%;
	left: 16.5%;
	background: #101010;
	border-radius: 15px;
	width: 500px;
	height: 670px;
	border: none;
}

.contact-details-email{
	position: absolute;
	top: 22%;
	left: 55%;
	color: #cccccc;
	text-shadow: 0px 0px 1px;
}

.contact-details-email a{
	text-decoration: underline;
	color: #cccccc;
}

.contact-details-address{
	position: absolute;
	top: 25%;
	left: 55%;
	color: #cccccc;
	text-shadow: 0px 0px 1px;
}

.alphabit-profile-teamname{
	position: absolute;
	top: 5%;
	left: 90%;
	color: #cccccc;
	animation: fadeIn 1s ease-in-out forwards;
	cursor: pointer;
}

.alphabit-profile-teamname:hover {
	color: #b0b0b0;
}

.alphabit-profile-teamname a{
	text-decoration: none;
	color: #cccccc;
}

.alphabit-profile-teamname-pic{
	position: absolute;
	top: 3.5%;
	left: 96.5%;
	animation: fadeIn 1s ease-in-out forwards;
}

.scroll {
	width: 50px;
	height: 50px;
	border: 2px solid #333;
	border-radius: 50%;
	position: absolute;
	top: 91.5%;
	left: 48%;
	animation: down 1.5s infinite;
	-webkit-animation: down 1.5s infinite;
	/* If using a preprocessor, the nested ::before can be compiled; otherwise, write it separately */
}
.scroll::before {
	content: '';
	position: absolute;
	top: 12px;
	left: 15px;
	width: 18px;
	height: 18px;
	border-left: 2px solid #333;
  	border-bottom: 2px solid #333;
	transform: rotate(-45deg);
}

/* RESPONSIVE ADJUSTMENTS */

/* For screens up to 768px (tablets and small laptops) */
@media only screen and (max-width: 768px) {
  .alphabit-topleft {
     top: 3%;
     left: 3%;
     font-size: 2.5vw;
  }
  .alphabit-signup {
     top: 3%;
     left: 75%;
     padding: 10px 12px;
     font-size: 3vw;
  }
  .alphabit-login {
     top: 3%;
     left: 82%;
     padding: 10px 12px;
     font-size: 3vw;
  }
  .alphabit-fwelcome {
     top: 20%;
     left: 30%;
     font-size: 3vh;
  }
  .alphabit-swelcome {
     top: 25%;
     left: 28%;
     font-size: 3vh;
  }
  .alphabit-welcome-text {
     top: 35%;
     left: 10%;
     font-size: 2.5vh;
     max-width: 90%;
  }
  .alphabit-training {
     top: 3%;
     left: 35%;
     padding: 10px 12px;
     font-size: 3vw;
  }
  .alphabit-ml-model {
     top: 3%;
     left: 45%;
     padding: 10px 12px;
     font-size: 3vw;
  }
  .alphabit-learn-ml {
     top: 3%;
     left: 55%;
     padding: 10px 12px;
     font-size: 3vw;
  }
  .alphabit-learn {
     top: 50%;
     left: 40%;
     padding: 10px 12px;
     font-size: 3vw;
  }
  .alphabit-news {
     top: 1%;
     left: 20%;
     font-size: 3vw;
  }
  .alphabit-contact {
     top: 3%;
     left: 30%;
  }
  .alphabit-contact-details {
     top: 10%;
     left: 50%;
     font-size: 20px;
  }
  .alphabit-profile-teamname {
     top: 3%;
     left: 75%;
     font-size: 3vw;
  }
  .alphabit-profile-teamname-pic {
     top: 2%;
     left: 80%;
     width: 5vw;
     height: 5vw;
  }
  .fa {
     padding: 10px;
     font-size: 20px;
     width: 25px;
  }
  .fa-linkedin {
     top: 75%;
     left: 10%;
  }
  .fa-facebook {
     top: 75%;
     left: 16%;
  }
  .fa-youtube {
     top: 75%;
     left: 22%;
  }
  .fa-instagram {
     top: 75%;
     left: 28%;
  }
  .fa-copyright {
     top: 90%;
     left: 30%;
  }
  .copyright-text {
     top: 92%;
     left: 32%;
     font-size: 10px;
  }
  /* Contact Form Adjustments */
  .contact-name,
  .contact-teamname {
     width: 80%;
     left: 10%;
  }
  .contact-email,
  .contact-message {
     width: 80%;
     left: 10%;
  }
  .contact-submit {
     left: 35%;
  }
  .contact-box {
     width: 90%;
     left: 5%;
  }
  .contact-name-text,
  .contact-name-email,
  .contact-name-teamname,
  .contact-name-message {
     left: 8%;
     font-size: 3vw;
  }
}

/* For screens up to 480px (small phones) */
@media only screen and (max-width: 480px) {
  .alphabit-topleft {
     top: 3%;
     left: 3%;
     font-size: 4vw;
  }
  .alphabit-signup {
     top: 3%;
     left: 70%;
     padding: 8px 10px;
     font-size: 4vw;
  }
  .alphabit-login {
     top: 3%;
     left: 78%;
     padding: 8px 10px;
     font-size: 4vw;
  }
  .alphabit-fwelcome {
     top: 18%;
     left: 25%;
     font-size: 3.5vh;
  }
  .alphabit-swelcome {
     top: 23%;
     left: 23%;
     font-size: 3.5vh;
  }
  .alphabit-welcome-text {
     top: 33%;
     left: 5%;
     font-size: 2.5vh;
     max-width: 90%;
  }
  .alphabit-training {
     top: 3%;
     left: 30%;
     padding: 8px 10px;
     font-size: 4vw;
  }
  .alphabit-ml-model {
     top: 3%;
     left: 40%;
     padding: 8px 10px;
     font-size: 4vw;
  }
  .alphabit-learn-ml {
     top: 3%;
     left: 50%;
     padding: 8px 10px;
     font-size: 4vw;
  }
  .alphabit-learn {
     top: 50%;
     left: 35%;
     padding: 8px 10px;
     font-size: 4vw;
  }
  .alphabit-news {
     top: 1%;
     left: 15%;
     font-size: 4vw;
  }
  .alphabit-contact {
     top: 3%;
     left: 25%;
  }
  .alphabit-contact-details {
     top: 10%;
     left: 40%;
     font-size: 18px;
  }
  .alphabit-profile-teamname {
     top: 3%;
     left: 70%;
     font-size: 4vw;
  }
  .alphabit-profile-teamname-pic {
     top: 2%;
     left: 75%;
     width: 6vw;
     height: 6vw;
  }
  .fa {
     padding: 8px;
     font-size: 18px;
     width: 22px;
  }
  .fa-linkedin {
     top: 75%;
     left: 8%;
  }
  .fa-facebook {
     top: 75%;
     left: 14%;
  }
  .fa-youtube {
     top: 75%;
     left: 20%;
  }
  .fa-instagram {
     top: 75%;
     left: 26%;
  }
  .fa-copyright {
     top: 90%;
     left: 28%;
  }
  .copyright-text {
     top: 92%;
     left: 30%;
     font-size: 8px;
  }
  /* Contact Form Adjustments */
  .contact-name,
  .contact-teamname {
     width: 90%;
     left: 5%;
  }
  .contact-email,
  .contact-message {
     width: 90%;
     left: 5%;
  }
  .contact-submit {
     left: 30%;
  }
  .contact-box {
     width: 95%;
     left: 2.5%;
  }
  .contact-name-text,
  .contact-name-email,
  .contact-name-teamname,
  .contact-name-message {
     left: 5%;
     font-size: 4vw;
  }
}

/* LOW HEIGHT ADJUSTMENTS for Desktop Screens */
/* For viewports at least 1024px wide with a height of 800px or less */
@media only screen and (min-width: 1024px) and (max-height: 800px) {
  .alphabit-topleft {
    top: 3%;
    left: 2%;
    font-size: 1.3vw;
  }
  .alphabit-signup {
    top: 3%;
    left: 82%;
    padding: 10px 12px;
  }
  .alphabit-login {
    top: 3%;
    left: 88%;
    padding: 10px 12px;
  }
  .alphabit-fwelcome {
    top: 22%;
    left: 35%;
    font-size: 3vh;
  }
  .alphabit-swelcome {
    top: 27%;
    left: 32%;
    font-size: 3vh;
  }
  .alphabit-welcome-text {
    top: 40%;
    left: 28%;
    font-size: 1.8vh;
    max-width: 800px;
  }
  .alphabit-training {
    top: 3%;
    left: 38%;
  }
  .alphabit-ml-model {
    top: 3%;
    left: 46%;
  }
  .alphabit-learn-ml {
    top: 3%;
    left: 52%;
  }
  .alphabit-learn {
    top: 53%;
    left: 45%;
  }
  .alphabit-news {
    top: 1%;
    left: 30%;
  }
  .alphabit-contact {
    top: 3%;
    left: 35%;
  }
  .alphabit-contact-details {
    top: 12%;
    left: 60%;
    font-size: 25px;
  }
  .alphabit-profile-teamname {
    top: 3%;
    left: 90%;
  }
  .alphabit-profile-teamname-pic {
    top: 2%;
    left: 95%;
  }
}


@keyframes down {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translateY(8px);
	}
	40% {
		transform: translate(0);
	}
}

@-webkit-keyframes down {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translateY(8px);
	}
	40% {
		transform: translate(0);
	}
}

.fpage-ftext{
	position: absolute;
	top: 7%;
	left: 10%;
	color: #cccccc;
	max-width: 650px;
	text-align: center;
	text-shadow: 0px 0px 1px;
	font-size: 18px;
	animation: fadeIn 1s ease-in-out forwards;
}

.fpage-fimage{
	position: absolute;
	top: 23%;
	left: 61%;
	border-radius: 10px;
	animation: fadeIn 1s ease-in-out forwards;
}

.fpage-simage{
	position: absolute;
	top: 34%;
	left: 22.5%;
	border-radius: 10px;
	animation: fadeIn 1s ease-in-out forwards;
}

.ftext-box{
	position: absolute;
	top: 4%;
	left: 8%;
	background: radial-gradient(circle, #161616 0%, #070707 100%);
	border-radius: 15px;
	width: 720px;
	height: 190px;
	animation: fadeIn 1s ease-in-out forwards;
}

.fimage-box{
	position: absolute;
	top: 19%;
	left: 59.7%;
	background: radial-gradient(circle, #161616 50%, #070707 100%);
	border-radius: 15px;
	width: 500px;
	height: 420px;
	animation: fadeIn 1s ease-in-out forwards;
}

.simage-box{
	position: absolute;
	top: 30%;
	left: 21.2%;
	background: radial-gradient(circle, #161616 50%, #070707 100%);
	border-radius: 15px;
	width: 500px;
	height: 410px;
	animation: fadeIn 1s ease-in-out forwards;
}

.fpage-learn {
	position: absolute;
	top: 85%;
	left: 44.5%;
	border-radius: 20px;
	padding: 14px 17px;
	color: #cccccc;
	background: radial-gradient(circle, #1f1f1f 0%, #161616 100%);
	text-shadow: 0px 0px 1px;
	animation: fadeIn 1s ease-in-out forwards;
	cursor: pointer;
	transition: transform 0.3s;
}

.fpage-learn:hover {
  animation: pulse 1s infinite;
}

.fpage-learn a {
	text-decoration: none;
	color: #cccccc;
}

.fpage-news{
	position: absolute;
	top:92%;
	left:36.5%;
	color: #bdbdbd;
	animation: fadeIn 1s ease-in-out forwards;
	cursor: pointer;
}

.ai-star-logo{
	position: absolute;
	top: 2.5%;
	left: 14.5%;
	animation: fadeIn 1s ease-in-out forwards;
}

.logout {
	position: absolute;
	top: 59%;
	left: 15.5%;
	animation: fadeIn 1s ease-in-out forwards;
	color: #cccccc;
	cursor: pointer;
	background: #1f1f1f;
	padding: 11px 13px;
	border-radius: 20px;
}

.reviews{
	position: absolute;
	top: 53%;
	left: 15.5%;
	animation: fadeIn 1s ease-in-out forwards;
	color: #cccccc;
	cursor: pointer;
	background: #1f1f1f;
	padding: 11px 13px;
	border-radius: 20px;
}

.support{
	position: absolute;
	top: 47%;
	left: 15.5%;
	animation: fadeIn 1s ease-in-out forwards;
	color: #cccccc;
	cursor: pointer;
	background: #1f1f1f;
	padding: 11px 13px;
	border-radius: 20px;
}

.privacy{
	position: absolute;
	top: 41%;
	left: 15.5%;
	animation: fadeIn 1s ease-in-out forwards;
	color: #cccccc;
	cursor: pointer;
	background: #1f1f1f;
	padding: 11px 13px;
	border-radius: 20px;
}

.privacy:hover{
	background: #303030;
}

.support:hover{
	background: #303030;
}

.reviews:hover {
	background: #303030;
}

.logout:hover{
	background: #303030;
}

.privacy a{
	text-decoration: none;
	color: #cccccc;
}

.support a{
	text-decoration: none;
	color: #cccccc;
}

.reviews a{
	text-decoration: none;
	color: #cccccc;
}

.logout a{
	text-decoration: none;
	color: #cccccc;
}

.profile-pic{
	position: absolute;
	top: 13%;
	left: 13%;
	animation: fadeIn 1s ease-in-out forwards;
}

.profile-name{
	position: absolute;
	top: 34.5%;
	left: 15.5%;
	font-size: 25px;
	animation: fadeIn 1s ease-in-out forwards;
	color: #cccccc;
}

.fimage-info{
	position: absolute;
	top: 70.5%;
	left: 62.5%;
	color: #cccccc;
	animation: fadeIn 1s ease-in-out forwards;
	max-width: 400px;
	text-align: center;
}

.fimage-info-box{
	position: absolute;
	top: 68.5%;
	left: 61.5%;
	background: radial-gradient(circle, #161616 0%, #070707 100%);
	border-radius: 15px;
	width: 425px;
	height: 100px;
	animation: fadeIn 1s ease-in-out forwards;
}

/* Add this first
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .alphabit-topleft {
    left: 5% !important;
    font-size: 18px !important;
    top: 2% !important;
  }

  .alphabit-signup,
  .alphabit-login,
  .alphabit-profile {
    position: fixed !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    z-index: 1000;
  }

  .alphabit-signup {
    left: 55% !important;
    top: 2% !important;
  }

  .alphabit-login {
    left: 75% !important;
    top: 2% !important;
  }

  .alphabit-fwelcome,
  .alphabit-swelcome {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    text-align: center !important;
    font-size: 22px !important;
    top: 20% !important;
  }

  .alphabit-swelcome {
    top: 26% !important;
  }

  .alphabit-welcome-text {
    left: 5% !important;
    width: 90% !important;
    top: 32% !important;
    font-size: 14px !important;
  }

  .alphabit-learn {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 50% !important;
    padding: 10px 20px !important;
  }

  .contact-box {
    width: 90% !important;
    left: 5% !important;
    height: auto !important;
    padding: 20px 0 !important;
    top: 10% !important;
  }

  .contact-name,
  .contact-email,
  .contact-teamname,
  .contact-message {
    width: 80% !important;
    left: 10% !important;
  }

  .contact-submit {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .fa-copyright,
  .copyright-text {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    text-align: center !important;
  }

  .scroll {
    display: none;
  }

  /* Hide desktop-only elements
  .alphabit-training,
  .alphabit-ml-model,
  .alphabit-learn-ml,
  .alphabit-news {
    display: none;
  }
}

/* Add this at the VERY END of your existing CSS 
@media (min-width: 769px) and (max-width: 1024px) {
  .alphabit-signup { left: 80% !important; }
  .alphabit-login { left: 90% !important; }
  .alphabit-fwelcome { left: 35% !important; }
  .alphabit-swelcome { left: 30% !important; }
  .alphabit-welcome-text { left: 20% !important; width: 60% !important; }
}*/