:root {
	--orange: #fca311;
	--dark-blue: #14213D;
	--light-blue: #007ce0;
	--black: #000;
	--white: #fff;
	--grey: #e5e5e5;
}

#home {
	display: block;
	/* position: relative;
    z-index: 2; */
}


#main-header {
	background: url("https://lh3.googleusercontent.com/p/AF1QipMbhbD3KtQ-XZ9ZVAfIGOWHcHXDb0oJ9rHS6AFy=s1360-w1360-h1020") no-repeat fixed center;
	background-size: cover;
    height: 100vh; /* Full viewport height */
    color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 15px 0;
} 

:root {
	--yellow: #ff9d00;
}

.app-status {
	width: 100%;
	height: 100%;
	text-align: center;
	/* display: flex; */
	background: url(https://grainy-gradients.vercel.app/noise.svg) fixed center, var(--yellow);
}

.home-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 100%;
	max-width: 70rem;
}

#hcon {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
	z-index: 100;
}

.card {
	display: flex;
	align-items: center;
	background-color: #000000;
	margin: 10px;
	/* max-width: 100rem;
	width: 100%; */
	padding: 10px;
	color: #fff;
	box-shadow: 0 7px 8px rgba(252, 162, 17, 0.737);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.c2 {box-shadow: 0 7px 8px rgba(0, 114, 206, 0.737);}

.card:hover {
	transform: scale(1.03);
}

.card-image img {
	width: 100%;
	height: auto;
	max-width: 300px;
}

.card-content {
	padding: 20px;
	flex: 1;
}

.card-content h2 {
	font-size: 1.5rem;
	margin-bottom: 10px;
}

.card-content p {
	font-size: 1rem;
	line-height: 1.5;
}

/* Responsive Layout */
@media (max-width: 768px) {
	.card {
		flex-direction: column;
		text-align: center;
	}

	.card-image img {
		max-width: 100%;
	}

	/* Special rule for card 2 */
	.card.card-right {
		flex-direction: column;
	}

	.card.card-right .card-image {
		order: -1; /* Moves the image to the top */
	}
}

p.subtitle {
	font-family: 'Arimo', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #db9304;
	font-size: medium;
	text-decoration: none !important;
}

.animated-img {
	width: 100%;
	max-width: 600px;
	margin: 20px auto;
	display: block;
	animation: fadeIn 3s ease-in-out;
    border-radius: 10px;
}

.animated-img:hover {
    transform: scale(1.1);
    box-shadow: 4px 4px 4px 4px rgb(0, 0, 0,0.5);
}


@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
	.text {font-size: 11px}
}

/* about us content */
/* General styling for container responsiveness */
.about-container, .whyinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
	text-align: center;
	gap: 20px;
    padding: 20px;
    margin: 50px 20px;
    border-radius: 10px;
    background-color: #000000;
}

.about-container img,
.whyinfo img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Styling adjustments for larger screens */
@media only screen and (min-width: 1024px) {
    .about-container {
        flex-direction: row;
        padding: 50px;
    }
    .about-container:hover, .whyinfo:hover {
        transform: scale(1.02);
    }
    .about-container img:hover, .whyinfo img:hover {
        transform: scale(1.1);
    }
}

/* Title and text adjustments */
.about-container h3, .whyinfo h1 {
    font-size: 1.8em;
    /* color: #FCA311; */
    margin: 10px 0;
}

@media (min-width: 1024px) {
	.about-container img {
		width: 80%; /* Increase the size for laptops */
		max-width: 700px; /* Optional limit */
	}

	.whyinfo img {
	  width: 70%; /* Reduce size for laptops */
	  max-width: 500px; /* Optional limit */
	}

	.whyinfo-container {
		flex-direction: row; /* Align text and image side-by-side */
		align-items: center;
		text-align: left;
	}

	.whyinfo-text {
		flex: 1; /* Allow text to take up more space */
	}

	.whyinfo-img {
		flex: 0.5; /* Image container takes less space */
	}

	.whyinfo-img img {
		float: right; /* Float the image on the right */
	}
}

/* Adjustments for laptop screens (between 768px and 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .about-container img,
    .whyinfo img {
        width: 80%; /* Increase the width of the image */
		/* max-width: 700px; */
    }
}

/* Smaller screens adjustments for text alignment and margins */
@media only screen and (max-width: 720px) {
    .about-container, .whyinfo {
        padding: 20px 10px;
    }

    .about-container .ac-image,
    .about-container .text,
    .whyinfo .wi-image,
    .whyinfo .text {
        width: 100%;
        text-align: center;
    }

    .about-container h3, .whyinfo h1 {
        font-size: 1.5em;
    }

    /* Ensure subtitle and text are centered and spaced properly */
    .about-container .text p.subtitle,
    .whyinfo .text p.subtitle {
        text-align: center;
    }
}

/* Specific styles for about-container */
.about-container {
    /* border: 5px solid #FCA311; */
    box-shadow: 10px 10px 30px #FCA311;
	color: #FCA311;
}

.about-container h3 {
    padding-bottom: 1px;
    font-size: 54px;
    text-decoration: underline dotted; 
}

.about-container .ac-image.align-left {
    float: left;
    width: 50%;
    padding: 0 20px;
}

.about-container .text.align-right {
    float: right;
    width: 50%;
    padding: 0 40px 0 10%;
}

/* Specific styles for whyinfo */
.whyinfo {
    display: flex;
    flex-direction: row-reverse; /* Ensures image appears to the right */
    align-items: center;
    justify-content: flex-end; /* Aligns content to the right */
    /* border: 5px solid #0072ce; */
    box-shadow: 10px 10px 30px #0072ce;
    padding: 20px;
    color: #0072ce !important;
}

.whyinfo h1 {
    text-align: left; 
    padding-top: 50px; 
    padding-left: 10px; 
    text-decoration: underline dashed;
}

.whyinfo .image {
    max-width: 50%; /* Adjust image width */
    height: auto;
    margin-left: 20px; /* Adds spacing between text and image */
    border-radius: 10px;
}

.whyinfo .image.align-right {
    float: right;
    width: 50%;
    padding: 0 20px;
}

.whyinfo .text.align-left {
    float: left;
    width: 50%;
    padding: 0 10% 0 40px;
}

.continue-application {
	--color: #fff;
	--background: #404660;
	--background-hover: #3A4059;
	--background-left: #2B3044;
	--folder: #F3E9CB;
	--folder-inner: #BEB393;
	--paper: #FFFFFF;
	--paper-lines: #BBC1E1;
	--paper-behind: #E1E6F9;
	--pencil-cap: #fff;
	--pencil-top: #275EFE;
	--pencil-middle: #fff;
	--pencil-bottom: #5C86FF;
	--shadow: rgba(13, 15, 25, .2);
	border: none;
	outline: none;
	cursor: pointer;
	position: relative;
	text-align: center;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
	-webkit-tap-highlight-color: transparent;
	padding: 17px 29px 17px 69px;
	transition: background 0.3s;
	color: var(--color);
	background: var(--bg, var(--background));
}

.continue-application > div {
	top: 0;
	left: 0;
	bottom: 0;
	width: 53px;
	position: absolute;
	overflow: hidden;
	border-radius: 5px 0 0 5px;
	background: var(--background-left);
}

.continue-application > div .folder {
	width: 23px;
	height: 27px;
	position: absolute;
	left: 15px;
	top: 13px;
}

.continue-application > div .folder .top {
	left: 0;
	top: 0;
	z-index: 2;
	position: absolute;
	transform: translateX(var(--fx, 0));
	transition: transform 0.4s ease var(--fd, 0.3s);
}

.continue-application > div .folder .top svg {
	width: 24px;
	height: 27px;
	display: block;
	fill: var(--folder);
	transform-origin: 0 50%;
	transition: transform 0.3s ease var(--fds, 0.45s);
	transform: perspective(120px) rotateY(var(--fr, 0deg));
}

.continue-application > div .folder:before, .continue-application > div .folder:after,
.continue-application > div .folder .paper {
	content: "";
	position: absolute;
	left: var(--l, 0);
	top: var(--t, 0);
	width: var(--w, 100%);
	height: var(--h, 100%);
	border-radius: 1px;
	background: var(--b, var(--folder-inner));
}

.continue-application > div .folder:before {
	box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);
	transform: translateX(var(--fx, 0));
	transition: transform 0.4s ease var(--fd, 0.3s);
}

.continue-application > div .folder:after,
.continue-application > div .folder .paper {
	--l: 1px;
	--t: 1px;
	--w: 21px;
	--h: 25px;
	--b: var(--paper-behind);
}

.continue-application > div .folder:after {
	transform: translate(var(--pbx, 0), var(--pby, 0));
	transition: transform 0.4s ease var(--pbd, 0s);
}

.continue-application > div .folder .paper {
	z-index: 1;
	--b: var(--paper);
}

.continue-application > div .folder .paper:before, .continue-application > div .folder .paper:after {
	content: "";
	width: var(--wp, 14px);
	height: 2px;
	border-radius: 1px;
	transform: scaleY(0.5);
	left: 3px;
	top: var(--tp, 3px);
	position: absolute;
	background: var(--paper-lines);
	box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);
}

.continue-application > div .folder .paper:after {
	--tp: 6px;
	--wp: 10px;
}

.continue-application > div .pencil {
	height: 2px;
	width: 3px;
	border-radius: 1px 1px 0 0;
	top: 8px;
	left: 105%;
	position: absolute;
	z-index: 3;
	transform-origin: 50% 19px;
	background: var(--pencil-cap);
	transform: translateX(var(--pex, 0)) rotate(35deg);
	transition: transform 0.4s ease var(--pbd, 0s);
}

.continue-application > div .pencil:before, .continue-application > div .pencil:after {
	content: "";
	position: absolute;
	display: block;
	background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));
	width: var(--w, 5px);
	height: var(--h, 20px);
	border-radius: var(--br, 2px 2px 0 0);
	top: var(--t, 2px);
	left: var(--l, -1px);
}

.continue-application > div .pencil:before {
	-webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
	clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
}

.continue-application > div .pencil:after {
	--b: none;
	--w: 3px;
	--h: 6px;
	--br: 0 2px 1px 0;
	--t: 3px;
	--l: 3px;
	border-top: 1px solid var(--pencil-top);
	border-right: 1px solid var(--pencil-top);
}

.continue-application:before, .continue-application:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 2px;
	border-radius: 1px;
	background: var(--color);
	transform-origin: 9px 1px;
	transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));
	top: 26px;
	right: 16px;
	transition: transform 0.3s;
}

.continue-application:after {
	--r: 45deg;
}

.continue-application:hover {
	--cx: 2px;
	--bg: var(--background-hover);
	--fx: -40px;
	--fr: -60deg;
	--fd: .15s;
	--fds: 0s;
	--pbx: 3px;
	--pby: -3px;
	--pbd: .15s;
	--pex: -24px;
}