/*
Template Name: Shortly
Version: 1.0.0
Theme URL: https://angrystudio.com/themes/shortly-free-coming-soon-page-template/
Author: AngryStudio
License: AngryStudio License 
License URI: https://angrystudio.com/license/
*/
html {
	box-sizing: border-box;
}

* {
	box-sizing: inherit;
}

body,
html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0; /* Reset default margin */
	font-family: Helvetica, Arial, sans-serif; 
 }
 
 footer {
	 margin-top: auto; /* Pushes footer to the bottom */
 }

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
	-webkit-appearance: none;
	opacity: 1;
}

::-webkit-input-placeholder {
	color: #dcdcdc;
}

::-moz-placeholder {
	color: #dcdcdc;
}

:-ms-input-placeholder {
	color: #dcdcdc;
}

:-moz-placeholder {
	color: #dcdcdc;
}

.highlight {
	color: #ff303c;
}


/*-- loader  --*/
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #00008B;
	z-index: 999;
}

#loader {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #00FFFF;
	animation: spin 2s linear infinite;
}

#loader:before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #00008B;
	animation: spin 3s linear infinite;
}

#loader:after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #F0FFFF;
	animation: spin 1.5s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}




@media screen and (min-width:1200px) {


	.content-wrapper {
		min-height: 100vh;
		display: flex;
		flex-direction: column; /* Ensures footer positioning works correctly */
	}

	.logo {
		width: 50%;
		height: auto;
		position: absolute;
		bottom: 15%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.moto {
		width: 15%;
		height: auto;
		position: absolute;
		bottom: 25%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.load {
		width: 5%;
		height: auto;
		position: absolute;
		bottom: 11%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.social-icons {
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translate(-50%, -50%);
	}



	.bg-video {
		width: 100%;
		height: 100%;
		object-fit: cover; /* Ensures video covers the container while maintaining aspect ratio */
		position: absolute; /* Optional: for precise positioning */
		top: 0;
		left: 0;
	}
	.video-container {
		width: 100%;
		height: 100vh; /* Match viewport height */
		overflow: hidden; /* Key to preventing video overflow */
		position: relative; /* For absolute positioning of the video if needed */
	}

	footer {
		position: relative;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.7);
		color: #091055;
		text-align: center;
		padding: 10px 0;
		height: 20vh;
	}

	.footer-container {
		display: flex;
		justify-content: center;
		flex-direction: column; /* Or row, depending on your layout */
		width: 50%;
		margin: 0 auto
	}

	.image-container {
		/* margin-left: 2%; */
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.image-container > div {
		width: 20%;
	}

	.img-logo {
		display: flex;
	}
	
	.logos {
		min-width: 20px;
		height: auto;
		max-width: 70%;
		display: block;
	}

	.column-container{
		display: flex;
		justify-content: left;
		flex-direction: row; /* Or row, depending on your layout */
		/* margin-left: auto; */
	}

	.footer-col-odd, .footer-col-even { /* Or a wrapper for these columns */
		grid-area: content;
	}
	
	.footer-col {
		flex: 1;
		text-align: left;
		width: 25%;
		margin-top: 3vh;
		margin-bottom: 3vh;
		/*Consider removing or adjusting if causing issues*/
	}

	.footer-col:last-child {
		display: flex;
		justify-content: center;
		align-items: center; /* Optional: Vertically centers the content as well */
	  }

	.footer-col p {
		margin: 0;
		font-size: 0.8rem;
		line-height: 1;
		margin-bottom: 5px;
	}

	.social-icon {
		padding: 0px 10px 10px 10px;
		text-decoration: none;
	}

}

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

	video.bg-video {
		object-fit: cover;
		width: 100%;
		height: 100%;
		/* Or 100vh */
		position: absolute;
		/* Consider changing position from fixed to absolute */
		top: 0;
		left: 0;
		z-index: 0;
	}

	.video-container {
		width: 100%;
		/* Make sure the container occupies full width */
		height: 100vh;
		/* Critical: Set container height to viewport height */
		position: relative;
		overflow: hidden;
		margin-bottom: 0;
	}

	.logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* Centers the logo */
		width: 70vw;
		/* Logo will be 20% of the viewport width */
		height: auto;
		/* Maintain aspect ratio */
	}

	.moto {
		width: 50%;
		height: auto;
		position: absolute;
		top: calc(50% + 8%);
		/* Adjust spacing for smaller screens */
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.load {
		width: 22%;
		height: auto;
		position: absolute;
		bottom: 9%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.social-icons {
		position: absolute;
		bottom: 4%;
		left: 50%;
		transform: translate(-50%, -50%);
	}


	footer {
		/* This style should now apply to all screen sizes */
		position: relative;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.7);
		color: #091055;
		text-align: left;
		padding: 10px 0;
		height: 20vh;
		/* or adjust as needed */
	}

	.footer-container {
        display: flex;
        flex-direction: column;  /* Align items vertically */
        align-items: center;    /* Center horizontally */
        height: 100%;  /* Important: Allow footer to take up full height */
		width: 50%;
		margin: 0 auto

	}

	.image-container {
		width: 100%;
		display: flex;
		justify-content: space-around;;
	}

	.logos {
		min-width: 20px;
		height: auto;
		max-width: 100%;
	}

	.image-container > div {
		width: 20%;
	}

	.column-container{
		display: flex;
        flex-direction: row; /* or column if you want items stacked */
        flex-wrap: wrap;       /* Allow wrapping if needed */
        justify-content: center; /* Center items horizontally within the column container */
        width: 100%; /* Or a max-width if needed */

	}

	/* .column-container>.first {
		margin-right: auto;
	} */

	
	.footer-col {
		width: auto;
		/* Allow elements to take their natural width */
		box-sizing: border-box;
		margin: 0;
		padding: 10px;
	}



	.footer-col-even.last {
		display: flex;
		/* Enable flexbox for the element */
		justify-content: center;
		/* Center the content horizontally */
		width: 100%;
		/* Optional: Ensure it takes full width if needed */
		align-items: center; /* Fixed syntax error: removed trailing slash */
	}

	.social-icon {
		margin: 0 10px;
	}


	.footer-col p {
		margin: 0;
		font-size: 0.8rem;
		line-height: 1;
		margin-bottom: 5px;
	}

}

@media screen and (max-width:600px) {
	video.bg-video {
		object-fit: cover;
		width: 100%;
		height: 100%;
		/* Or 100vh */
		position: absolute;
		/* Consider changing position from fixed to absolute */
		top: 0;
		left: 0;
		z-index: 0;
	}

	.video-container {
		width: 100%;
		/* Make sure the container occupies full width */
		height: 100vh;
		/* Critical: Set container height to viewport height */
		position: relative;
		overflow: hidden;
		margin-bottom: 0;
	}

	.logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* Centers the logo */
		width: 70vw;
		/* Logo will be 20% of the viewport width */
		height: auto;
		/* Maintain aspect ratio */
	}

	.moto {
		width: 50%;
		height: auto;
		position: absolute;
		top: calc(50% + 8%);
		/* Adjust spacing for smaller screens */
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.load {
		width: 22%;
		height: auto;
		position: absolute;
		bottom: 9%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.social-icons {
		position: absolute;
		bottom: 4%;
		left: 50%;
		transform: translate(-50%, -50%);
	}


	footer {
		/* This style should now apply to all screen sizes */
		position: relative;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.7);
		color: #091055;
		text-align: left;
		padding: 10px 0;
		height: 20vh;
		/* or adjust as needed */
	}

	.footer-container {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		width: 80%;
	}

	.image-container {
		height: 50%;
		width: 100%; /* Ensure the container takes full width */
		overflow: hidden;  /* Hide any overflowing content */
		display: flex;
		justify-content: space-around;
	}

	.image-container > div {
		width: 25%;
	}

	.logos {
		min-width: 20px;
		height: auto;
		max-width: 100%;
	}

	.column-container {
		height: 50%;
		display: flex;
		justify-content: center;
		width: 100%;
		flex-direction: row; /* Or row, depending on your layout */
		flex-flow: wrap;
		/* other styles */
	}

	.footer-container>.first {
		/* margin-right: auto; */
	}

	.footer-col {
		width: 50%;
		/* Allow elements to take their natural width */
		box-sizing: border-box;
		margin: 0;
		padding: 10px;
	}

	.footer-col-odd {
		/* width: auto; */
		text-align: right;
	}

	.footer-col:nth-child(3) {
		display: none;
	}

	.footer-col:nth-child(4) {
		display: flex;
		/* Enable flexbox for the element */
		justify-content:center;
		/* Center the content horizontally */
		width: 100%;
		/* Optional: Ensure it takes full width if needed */
		align-items: center; /* Fixed syntax error: removed trailing slash */
	}

	.social-icon {
		margin: 0 10px;
	}

	.footer-col p{
		margin: 0;
		font-size: 0.8rem;
		line-height: 1;
		margin-bottom: 5px;
	}

}