/* Define custom font using @font-face */
@font-face {
    font-family: 'SF-Pro';
    src: url('Fonts/SF-Pro.ttf') format('truetype');
    /* Add additional font formats (e.g., woff, woff2) for cross-browser compatibility */
}

/* Apply font-family to the body and other elements */
body {
    color: #FFFFFF;
    font-family: 'SF-Pro', 'Helvetica', sans-serif; /* Use custom font 'SF-Pro', fallback to 'Helvetica', then generic sans-serif */
    background: #1e1e1e;
    margin: 0;
    padding-top: 0px;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
}



.header {
 	margin-top: 0px;
		display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	
}




	.dish {
		background-color: #333333;
		border-radius: 30px;
		width: 300px;
		height: 100px;
		margin-top: 0px;
		padding-top: 0px;
		padding-bottom: 30px;
		padding-left: 17px;
		outline: #484848;
		outline-width: 2px;
		outline-style: solid;

		
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;

		
	}







.namesplash {
    font-size: 30px;
    font-weight: 200;
    text-align: left;
    padding-left: 0px;
    padding-top: 50px;
    margin-top: -30px;
    margin-bottom: 0px;

    transition: font-size 0.5s ease, font-weight 2.0s ease, width 3.0s ease, height 3.0s ease, border-radius 3.0s ease, background-color 0.3s ease, color 0.3s ease, text-shadow 0.5s ease;
}

.namesplash:hover {
    color: #FFFFFF;
    font-weight: bolder;
    justify-content: flex-end;
    text-shadow: 0 0 12px rgba(255, 255, 255, 1.0); /* This adds a white glow effect to the text */
}




.tagline {
    font-size: 25px;
    font-weight: lighter;
	color: white;
	margin-top: -60px;

	
	
}














h1 {
	color: white;
}




ul {
    align-content: left;
    padding-top: 90px;
    font-size: 990px;
}

li {
    background-color: #101010;
    border-radius: 30px;
    margin: 0px;
    align-items: left;
    display: inline;
    list-style: none;
    padding: 60px;
}

a {
    text-decoration: none;
    color: white;
}



h2 {
    font-weight: 400;
}








/* MINI CONTAINER NAVIGATION */
.minicontainer {
    width: 55px;
    height: 55px;
    background-color: #434343;
    border-radius: 15px; /* Initial rounded square shape */
    transition: width 2.0s ease, height 2.0s ease, border-radius 2.0s ease, background-color 0.5s ease, color 0.3s ease, letter-spacing 1.5s ease;
    display: inline-block; /* Display containers inline */
    cursor: pointer;
    position: relative; /* Position relative for absolute positioning of text */
    
	margin-right: 23px; /* Adjust margin between containers */
    margin-top: 30px;
	margin-left: px;
	margin-bottom: 0px;
	
	
	
	
}

.minicontainer:hover {
    width: 100px; /* Width remains the same */
    height: 100px; /* Height remains the same */
    border-radius: 50%; /* Transform into a circle */
    background-color: white;
    color: white; /* Change text color to black on hover */
	letter-spacing: 0;
}

.minicontainer a {

    text-decoration: none; /* Remove underline from anchor */
    color: #808080; /* Inherit text color from parent */
    font-weight: 500;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	
         
	padding-bottom: 80px;
	margin-top: 4px;
}


.minicontainer p {

    text-decoration: none; /* Remove underline from anchor */
    color: #808080; /* Inherit text color from parent */
    font-weight: 500;
	margin-top: -100px;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	height: 10vh;
	
	font-size: 15px;
	
	

}
 


	.currentmini p {
	color: white;
}
	


.minicontainer img {
	
	width: 50px;

	
}








.connectheader {
	font-size: 30px;
	margin-top: 50px;
}




/* PHONE AND EMAIL CONTAINER */
.phoneemail a{
	font-size: 24px;
	color: #808080;
	background: transparent;
	width: 250px;
	border-radius: 20px;
	
	text-decoration: underline; /* Ensures the link is underlined */
	
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	
	margin-top: 3px;
	margin-bottom: 25px;
	
}


.contacttext {
	margin-top: 40px;
	margin-bottom: 50px;
	
}











/* APP CONTAINERS */
	.appdish {
		background-color: #333333;
		border-radius: 75px;
		width: 600px;
		height: 350px;
		margin-top: 0px;
		padding-top: 0px;
		padding-bottom: 0px;


		
		display: flex;
		flex-direction: row;
		gap: 35px;

		align-items: center;
    	justify-content: center;
		
		    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Add a drop shadow on hover */

	}





.appcontainer {
    width: 200px;
    height: 200px;
    background-color: #333333;
    border-radius: 50px; /* Initial rounded square shape */
    transition: width 2.0s ease, height 2.0s ease, border-radius 2.0s ease, background-color 0.5s ease, color 0.3s ease, letter-spacing 1.5s ease;
    display: inline-block; /* Display containers inline */
    cursor: pointer;
    position: relative; /* Position relative for absolute positioning of text */
    
	margin-right: 0px; /* Adjust margin between containers */
    margin-top: -50px;
	margin-bottom: 0px;



	
}

.appcontainer a {

    text-decoration: none; /* Remove underline from anchor */
    color: transparent; /* Inherit text color from parent */
    font-weight: 500;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	
         
	padding-bottom: 80px;
	margin-top: 0px;

	
}


.appcontainer p {

    text-decoration: none; /* Remove underline from anchor */
    color: #808080; /* Inherit text color from parent */
	font-size: 24px;
    font-weight: 500;
	margin-top: -100px;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	height: 15vh;


}



.appcontainer img {
	border-radius: 30px;
	width: 200px;
}













.credits {
	
	font-size: 12px;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
}






/* Media query for smaller screens (e.g., phones) */
/* Media query for smaller screens (e.g., phones) */
/* Media query for smaller screens (e.g., phones) */
/* Media query for smaller screens (e.g., phones) */
/* Media query for smaller screens (e.g., phones) */
/* Media query for smaller screens (e.g., phones) */
/* Media query for smaller screens (e.g., phones) */
/* Media query for smaller screens (e.g., phones) */
/* Media query for smaller screens (e.g., phones) */
@media only screen and (min-width: 451px) and (max-width: 600px) {

	
	.header {
 	margin-top: 0px;
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	
}
	
	
   .namesplash {
       font-size: 25px; /* Adjust font size for smaller screens */
       margin-left: 0px;
	   color: #FFFFFF;
	   margin-top: 0px;
	   margin-bottom: 40px;
	   font-weight: 200;


    }





   .tagline {
        font-size: 18px; /* Adjust font size for smaller screens */
		margin-top: -70px;
	   font-weight: light;
	   
    }
	
	
	
	
		.dish {
		background-color: #333333;
		border-radius: 30px;
		width: 300px;
		height: 100px;
		margin-top: -40px;
		margin-bottom: 50px;
		padding-top: 0px;
		padding-bottom: 30px;
		padding-left: 17px;
		outline: #484848;
		outline-width: 2px;
		outline-style: solid;

		
		display: flex;
		flex-direction: column;
    	align-items: center;
    	justify-content: center;
	}


	
	
	
	.phoneemail a{
	font-size: 18px;
	color: #808080;
	background: transparent;
	width: 250px;
	border-radius: 20px;
	
	text-decoration: underline; /* Ensures the link is underlined */
	
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	
	margin-top: -15px;
	margin-bottom: 26px;
	
}

	
	
	
	
	
	
	
	.appdish {
		background-color: #333333;
		border-radius: 60px;
		width: 400px;
		height: 200px;
		margin-top: 0px;
		padding-top: 0px;
		padding-bottom: 0px;


		
		display: flex;
		flex-direction: row;
		gap: 35px;

		align-items: center;
    	justify-content: center;
	}
	
	
	
	.appcontainer {
    width: 100px;
    height: 100px;
    background-color: #333333;
    border-radius: 50px; /* Initial rounded square shape */
    transition: width 2.0s ease, height 2.0s ease, border-radius 2.0s ease, background-color 0.5s ease, color 0.3s ease, letter-spacing 1.5s ease;
    display: inline-block; /* Display containers inline */
    cursor: pointer;
    position: relative; /* Position relative for absolute positioning of text */
    
	margin-right: 0px; /* Adjust margin between containers */
    margin-top: -30px;
	margin-bottom: 0px;



	
}

.appcontainer a {

    text-decoration: none; /* Remove underline from anchor */
    color: transparent; /* Inherit text color from parent */
    font-weight: 500;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	
         
	padding-bottom: 80px;
	margin-top: 0px;

	
}


.appcontainer p {

    text-decoration: none; /* Remove underline from anchor */
    color: #808080; /* Inherit text color from parent */
	font-size: 20px;
    font-weight: 500;
	margin-top: -100px;
	
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	height: 13vh;


}



.appcontainer img {
	border-radius: 25px;
	width: 100px;
}

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}