*, *::after, *::before {
	box-sizing: border-box;
}

body {
	height: 100vh;
	background: rgb(5,5,14);
	margin: 0 auto;
	overflow-x: hidden;
	color: #fff;
}

/* background wave */
.ocean { 
	height: 15%;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #d0956b;
  }
  .wave {
	background: url("../media/icons/wave.svg") repeat-x; 
	position: absolute;
	top: -198px;
	width: 6400px;
	height: 198px;
	animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
	transform: translate3d(0, 0, 0);
  }
  .wave:nth-of-type(2) {
	top: -175px;
	animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
	opacity: 1;
  }
  @keyframes wave {
	0% {
	  margin-left: 0;
	}
	100% {
	  margin-left: -1600px;
	}
  }
  
  @keyframes swell {
	0%, 100% {
	  transform: translate3d(0,-25px,0);
	}
	50% {
	  transform: translate3d(0,5px,0);
	}
  }
a {
	text-decoration: none;
	color: #fff;
}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-thumb {
    background: #fbd9bd;
    border-radius: 5px;
}


nav {
    text-align: center; /* Center align the navbar */
    position: fixed; /* Fix the navbar position */
    top: 10px; /* Align the navbar to the top of the page */
	left: 50%; /* Move the navbar to the center horizontally */
    transform: translateX(-50%); /* Center the navbar */
    width: 74%; /* Make the navbar full width */
    font-family: "Space Grotesk";
    z-index: 1000; /* Set a high z-index to ensure the navbar is on top of other content */
}

nav ul {
    padding: 0;
    margin: 0 auto; /* Center the list horizontally */
}

nav li {
    display: inline-block;
    list-style: none;
    font-style: bold;
    font-size: 20px;
    letter-spacing: 1.0px;
    padding: 15px 30px; /* Adjust padding to make items closer and add top and bottom padding */
}

 nav li a:hover {
	color: #f3b98f;
	transition: all 0.4s ease 0s;
} 

/* page cafe logo link */
.logo_link {
	position: absolute;
	width: auto;
	border-radius: 50%;
	cursor: pointer;
	margin-left: 2%;
	filter: grayscale(100%);
	z-index: 100;
}
.logo_link:hover {
	filter: none;
}

/* page cafe logo img */
.logo_link img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
}

/* page welcome message */
.welcome {
	position: relative;
	width: 300px;
	left: 50%;
	top: 15%;
	transform: translate(-70%, -50%);
}
.welcome span { /* My */
	align-items: center;
	font-family:"Recursive";
	font-size: 2.8em;
	font-weight: bold;
	color: #f3b98f;
}
.welcome span p { /* Collections! */
	text-indent: 20px;
	color: #fff;
	font-size: 4rem;
	font-style: italic;
	margin: 0 auto;
	letter-spacing: 8px;
	animation: text 2s 1;
}

@keyframes text {
	0% {
		color:#f7dbda;
	} 30%{
		letter-spacing: 12px;
	} 80%{
		letter-spacing: 8px;
	}
}

/* page main conetent */
.wrapper {
    position: relative;
	max-width: 800px;
	min-height: 400px;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	background-color: transparent;
	
	border-radius: 25px;
}

.wrapper .cards_container {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
	align-content: center;
    overflow: auto;
	padding: 20px;
}

/* here you can style all cards */
.cards_container .card {
	display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	/* max-width: 20%;
	min-width: 20%; */
    height: 174px;
	width: 204px;
    color: #dc7b7b;
    margin-bottom: 20px;
    border-radius: 25px;
    cursor: pointer;
    border: 3px solid #c3c3c3;
    box-shadow: 0 0 9px #4c0505;
    transform: scale(1);
    transition: .2s ease-in-out;
}

/* when you hover card */
.cards_container .card:hover {
	transform: scale(0.97);
	cursor: pointer;
}

/* card img position */
.cards_container .card a img {
	width: 150%;
	object-fit: cover;
}

/* card text content */
.cards_container .card span {
	background-color: rgb(226, 86, 86);
    box-shadow: 0 0 8px 3px rgb(226, 86, 86);
    position: absolute;
	padding: 0 10px;
	color: #fff;
    font-size: 20px;
    text-align: center;
    border-radius: 8px;
	bottom: 10px;
}
.info {
	font-size: 3.0rem;
	font-family: "Space Grotesk";
	margin-right: auto;
	align-items: center;
}
.Projects-container {
	display:inline-block;
	width:100%;
	height:auto;
	margin-left: -10px;
	margin-right: -10px;
}
/* for all mobile devicses */
@media screen and (max-width: 768px) {
	.welcome {
		top: 18%;
		transform: translate(-50%, -50%);
	}
	.welcome span {
		font-size: 1.8em;
	}
	.welcome span p {
		font-size: 1.3em;
	}

	.wrapper {
		top: 50%;
	}

	.wrapper .cards_container {
		flex-direction: column;
	}

	.cards_container .card {
		min-width: 100%;
	}
	nav {
        display: none; /* Hide the navbar for tablets and phones */
    }
}