@charset "utf-8";
/* CSS Document header and footer for abstudios */

header {
   	width: 100%;
	display: flex;
	display: -webkit-flex;
  	justify-content: space-between;
  	align-items: flex-end;
	position: relative;
	background-color: rgba(255,255,255,.7);
}
header > a {
  position: relative;
}
header > a > img {
  width: 40%;
	margin-left: 5%;
	margin-top: 2%
}

/* Navigation list styles */

body header nav {
  position: absolute;
  bottom: 0;
  right: 20px;
  margin-bottom: 0; /* Adjust margin as needed */
}

body header nav ul {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row nowrap;
		flex-flow: row nowrap;
		margin: 0;
		padding: 0;
		border: 0;
		list-style: none;
	  margin-bottom: 0; /* Ensure no bottom margin */

  }  

header nav ul li a {
    color: black;
	font-family: "BC-alphapipe",sans-serif;
	font-size: 6vh;
	padding: 0px 10px;
	transition: color 0.3s ease-in-out;
	text-decoration: none;
}

header nav ul li a:hover,header nav ul li a:active {
   color: rgb(198,104,101);
   text-decoration: underline;
}
.mainmenu a {
  font-size: 2.2vw;
}
.submenu a {
	font-size: 1.5vw;
	line-height: 2;
}
			
		ul.submenu {
				position: absolute;
				z-index:2000;
				display: none;
				font-size: .8em;
				background-color: rgb(235,217,199);
				border-radius: 10px;
			line-height: 1.5;
			padding-right: 50px;
			}

		nav ul.submenu li {
            display: block;
            width: 100%;
            margin: 0;
        	}

		nav li:hover .submenu, nav li:hover .submenu-header:hover + .submenu { 
			display: block; 
		}

		.submenu-header {
			font-family: "BC-alphapipe",sans-serif; font-weight: bold;
			padding: 10px 10px;
		}


/* Footer Styles */

footer {
	clear: both;
   	width: 100%;
	background: rgba(0, 0, 0, 0.82);
	border-radius: 10px 10px 0px 0px;
	margin: 5% 0% 0% 0%;
	text-align: center;
	display:flex;
	align-items: center;
	flex-direction: column;
	padding-top: 25px;
	padding-bottom: 15px;
	order:100;
}

footer h1 {
	font-family: minion pro;
	font-size: 1vw;
	text-indent:-40px;
	margin-top: 0;
	margin-bottom: 1%;
	color: white;
	font-style: italic;
}

footer nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

#resume {
	color: rgb(198,104,101); 
	font-family: "bc-alphapipe",sans-serif;
	font-weight: 300;
	font-size:2vw;
	margin: 0;
	text-align: center;
	display: block;
	text-indent:-40px;
}
/* Footer Nav Styles */
.footertext {
	margin-bottom: 0%;
	padding: 0%;
	margin-top: 0%;
	font-size: 1vw;
}
#email {
	margin-bottom: 0%;
	padding: 0%;
	margin-top: 0%;
	font-size: 1vw;
}

footer ul {
   margin-top: 0;
	margin-bottom: 0;
   padding: 0;
   border: 0;
	display: flex;
	gap: 20px
}


/* Footer Nav image Styles */




.bottomnav a {
	color:transparent;
	text-align: center;
	margin: 0;
}

#instagram {text-indent:-90px;}
#fiverr {text-indent:-90px;}
#linkedin {text-indent:-90px;}

.progress-bar {
    width: 100%;
    height: 15px;
    margin-bottom: 20px;
    position: fixed;
	top: 0;
	right:0;
    display: flex;
	z-index: 10001;
}

.progress {
    height: 100%;
    /* Default color for progress */
}

h7 {
	font-size: .8vw;
	margin-left: 5%;
}
/* Styling for five-steps progress bar */
.five-steps .progress {
    width: 20%;
    background-color: rgb(196, 212, 212);
    border-radius: 0px 10px 10px 0px;
	z-index: 1005;
	display: none;
    align-items: center;
    justify-content: left;
}

.five-steps .progress:not(:first-child) {
    margin-left: -5px; /* Adjust this value as needed for the desired overlap */
}

.five-steps .step-2 {
    left: 20%;
    background-color: rgb(227, 209, 191);
    border-radius: 0px 10px 10px 0px;
	z-index: 1004;
	display: none;
	align-items: center;
    justify-content: left;
}

.five-steps .step-3 {
    left: 40%;
    background-color: rgb(149, 156, 124);
    border-radius: 0px 10px 10px 0px;
	z-index: 1003;
	display: none;
	align-items: center;
    justify-content: left;
}

.five-steps .step-4 {
    left: 60%;
    background-color: rgb(201, 129, 109);
    border-radius: 0px 10px 10px 0px;
	z-index: 1002;
	display: none;
	align-items: center;
    justify-content: left;
}

.five-steps .step-5 {
    left: 80%;
    background-color: rgb(243, 188, 144);
    border-radius: 0px 10px 10px 0px;
	z-index: 1001;
	display: none;
	align-items: center;
    justify-content: left;
}



@media only screen and (max-width : 600px ){
	.footertext {
	margin-bottom: 0%;
	padding: 0%;
	margin-top: 0%;
	font-size: 2vw;
}
#email {
	margin-bottom: 0%;
	padding: 0%;
	margin-top: 0%;
	font-size: 2vw;
}
}