@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

:root {
  --theme-bg-color: rgba(16 18 27 / 70%);
  --border-color: rgba(113 119 144 / 25%);
  --theme-color: #f9fafb;
  --inactive-color: rgb(113 119 144 / 78%);
  --body-font: "Poppins", sans-serif;
  --hover-menu-bg: rgba(12 15 25 / 30%);
  --content-title-color: #999ba5;
  --content-bg: rgb(146 151 179 / 13%);
  --button-inactive: rgb(249 250 251 / 55%);
  --dropdown-bg: #21242d;
  --dropdown-hover: rgb(42 46 60);
  --popup-bg: rgb(22 25 37);
  --search-bg: #14162b;
  --overlay-bg: rgba(36, 39, 59, 0.3);
  --scrollbar-bg: rgb(1 2 3 / 40%);

  --bg-color: #EEE;
  --black-semi: #0000008c;
  --white-semi: #FFFFFF8c;
  --accent-color: #ffe003;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: #000;
	transition: all 0.3s ease-in-out;
	scroll-behavior: smooth;
}

body {
	color: #000;
	font-size: 14px;

	font-family: var(--body-font);
	background-color: var(--bg-color);
	background-size: cover;
	background-position: center;
}

.space-between {
	width: 100%;
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
}

.navbar {
	display: flex;
	position: fixed;
	width: 100%;
	top: 0;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background-color: transparent;
	z-index: 1000;
	transition: all 0.3s ease-in-out;
}
.navbar.bg-dark {
	background-color: #000000AA;
	backdrop-filter: blur(10px);
}
.navbar > div {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 30px;
}
.navbar.bg-dark .navbar-logo{
	opacity: 1;
}
.navbar-logo {
	width: 100px;
	opacity: 0;
}
.navbar-logo img {
	width: 100%;
	height: auto;
}
.navbar-links {
	display: flex;
	flex-direction: row;
	gap: 25px;
}
.navbar-links a {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.7);
	transition: all 0.3s ease-in-out;
}
.navbar-links a:hover {
	color: rgb(255, 255, 255);
}

/* body > .header {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 500px;
	background-image: url(/img/loup.png);
	background-size: cover;
	background-position: 0 -400px;
	background-repeat: no-repeat;
}
body >.header .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to left, transparent 70%, #21242d);
}
body > .header .content {
	height: 100%;
	width: 100%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10px;
} */

body > .header{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	background-color: #000000;
	padding: 120px 60px;
	padding-top: 160px;
	gap: 20px;
}

body > .header .logo {
	width: 250px;
	object-fit: contain;
}
body > .header .headline {
    padding: 5px 7px;
    font-size: 24px;
    font-weight: 600;
    color: #000;
    background-color: #ffe003;
    text-align: center;
}

body > .header .separator {
	position: absolute;
	width: 100%;
	bottom: 0;
	transform: translateY(99%);
	z-index: -1;
}

.packages-wrapper{
	padding: 180px 0 50px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}

.packages{
	width: 800px;
	max-width: 80%;
	
	display: flex;
	flex-direction: column;
	gap: 5px;

}

.packages .base{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #000000;
	padding: 20px;
}

.packages .base .package-left{
	display: flex;
	flex-direction: column;
}

.packages-bottom{
	background-color: #000000;
	height: 20px;
}

.packages .package-title{
	font-size: 24px;
	font-weight: 600;
	color: #ffe003;
	line-height: 1;
}

.packages .package-description{
	font-size: 16px;
	font-weight: 400;
	color: #FFF;
	line-height: 1.5;
	font-weight: 600;
}

.packages .package-button{
	padding: 10px 20px;
	background-color: #000;
	border: 2px solid var(--accent-color);
	font-size: 16px;
	font-weight: 600;	
	text-decoration: none;
}

.packages .package-button:hover{
	background-color: var(--accent-color);
}

.packages .package-button a{
	color: var(--accent-color);
	text-decoration: none;
}

.packages .package-button:hover a{
	color: #000;
}

.packages .then{
    width: 100%;
    text-align: center;
    color: #0000008c;
    font-weight: 900;
    font-size: 16px;
}






.categories {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 10px;
	margin: 10px 0;
}
.categories h1 {
	padding-left: 20px;
	margin-bottom: 10px;
}


.categories .display {
	display: flex;
	flex-direction: row;
	gap: 5px;
	padding-right: 20px;
}

.categories .display-element {
	width: 50px;
	height: 40px;
	background-color: var(--black-semi);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.categories .display-element:hover {
	background-color: #000;
}

.categories .display-element.active {
	background-color: #000;
}

.categories .display-element img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	opacity: 0.4;
}

.categories .display-element.active img {
	opacity: 1;
}

.category {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}
.category .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.category .overlay.left {
	background: linear-gradient(to left, transparent 90%, var(--bg-color));
}
.category .overlay.right {
	background: linear-gradient(to right, transparent 90%, var(--bg-color));
}
.category .overlay img {
	opacity: 0;
	position: absolute;
	height: calc(100% - 25px);
	width: 50px;
	padding: 0 10px;
	top: 25px;
	transition: all 0.3s ease-in-out;
	pointer-events: all;
	z-index: 10;
}
.category .overlay.left img {
	left: 0;
}
.category .overlay.right img {
	right: 0;
}
.category:hover .overlay img {
	opacity: 1;
}

.category-title {
	font-size: 18px;
	font-weight: 700;
	padding-left: 20px;
	z-index: 2;
}

.category-projects.grid {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 10px;
	overflow-x: auto;
	padding: 10px;
	justify-content: start;
}
.category-projects.grid > :first-child {
	margin-left: 10px;
}

.category-projects.list{
	display: flex;
    gap: 10px;
    padding: 10px;
    justify-content: start;
    flex-wrap: wrap;
    padding-left: 20px;
}

.category-projects::-webkit-scrollbar {
	display: none;
}
.category-projects.list ~ .overlay {
	display: none;
}

.project {
	display: flex;
	flex-direction: column;
	width: 240px;
	aspect-ratio: 21/9;
	background-color: #000;
	box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
	transition: all 0.3s ease-in-out;
}
.project:hover {
	transform: scale(1.05);
}
.project:hover .project-details {
	/* display: flex;
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    background-color: #000;
    z-index: 1000; */
}

.project-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.project-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-details {
	display: none;
	transition: all 0.3s ease-in-out;
}

.project-card-bg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,55%);
	z-index: 998;
}

.project-card{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 900px;
    height: 80vh;
    max-height: 800px;
    background: #000;
    backdrop-filter: blur(30px);
    box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 999;
}


.sidebar{
    width: 100%;
	background-color: var(--black-semi);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sidebar-element{
    width: 100%;
    height: 40px;
    padding: 0 20px;
    display: flex;
	justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.sidebar-element a{
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.sidebar-icon{
	width: 20px;
	height: 20px;
	object-fit: contain;
	margin-right: 10px;
	opacity: 0.5;
}

.sidebar-title{
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--white-semi);
}

.sidebar-element:hover, .sidebar-element.active{
    background: var(--black-semi);
}

.sidebar-element:hover .sidebar-title, .sidebar-element.active .sidebar-title{
	color: #FFF;
}

.sidebar-element:hover .sidebar-icon, .sidebar-element.active .sidebar-icon{
	opacity: 1;
}

.container{
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.header{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header-video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.header-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brightness-gradient{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);    
}

.img-title{
    position: absolute;
    bottom: 10px;
    left: 20px;
    max-width: 33%;
    max-height: 120px;
    object-fit: scale-down;
}

.content{
    width: 100%;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.overview{
    width: 100%;
    display: flex;
    flex-direction: column;
	gap: 10px;
}

.overview-title{
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-color);
}

.overview-short-description{
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-color);
}

.overview-description{
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--content-title-color);
	text-align: justify;
}

.right-info{
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: flex-end;
}

.overview-tags{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.tag{
    padding: 5px 10px;
    background: #000;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent-color);
	border: 1px solid var(--accent-color);
}

.overview-date{
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--content-title-color);
}

.overview-links{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.overview-links a{
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--inactive-color);
    text-decoration: none;
}

.gallery {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	grid-gap: 10px;
}

.gallery > img, .gallery > video{
    width: 100%;
    height: auto;
}