body{

background:rgb(38, 37, 37);

margin:0;

min-height:100vh;

font-family:'Inter',sans-serif;

color:white;

overflow-x:hidden;

}

.container{

width:100vw;

height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

}

.logo{

font-size:160px;

font-family:serif;

}

h1{

letter-spacing:12px;

font-weight:300;

}

p{

font-style:italic;

color:#bdbdbd;

}

button{

margin-top:40px;

background:none;

color:white;

border:1px solid #444;

padding:20px 80px;

cursor:pointer;

transition:.3s;

}

button:hover{

border:1px solid white;

}

.flags{

position:absolute;

top:30px;

right:30px;

font-size:24px;

z-index:1000;

}

.hero{

width:100%;

height:100vh;

background-image:url("images/hero.jpg");

background-size:cover;

background-position:center;

}

.menu{

width:100%;

height:auto;



display:flex;

justify-content:center;

align-items:center;

gap:22px;

padding:20px;

box-sizing:border-box;

flex-wrap:wrap;

}

.tile{

width:180px;

height:180px;

border:0,7dvb solid rgb(252, 252, 252);

border-radius: 6px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

font-size:26px;

cursor:pointer;

transition:.3s;

box-shadow:0 8px 18px rgba(0, 0, 0, 0.547);

background: rgba(79, 78, 78, 0.455);

.tile::before{

content:"◉";

position:absolute;

top:18px;

font-size:10px;

opacity:.25;

}

}

.tile:hover{

transform:scale(1.13);

border-color:white;

box-shadow:0 14px 28px rgba(0,0,0,.45);

}

.tile span{

font-size:13px;

font-weight:400;

letter: spacing 2px;

text-transform:uppercase;

}


.gallery{

width:100%;

min-height:100vh;

background:rgb(37, 36, 36);

display:flex;

flex-direction:column;

align-items:center;

gap:30px;

padding:40px 0;

box-sizing:border-box;

}

.gallery img{

width:700px;

max-width:90%;

height:auto;

display:block;

border:1px solid rgba(255,255,255,.2);

transition:.3s;

cursor:pointer;

box-shadow:0 12px 30px rgba(0,0,0,.35);

}

.gallery img:hover{

transform:scale(1.02);

border-color:white;

}
#backButton{

background:none;

color:white;

border:1px solid rgba(255,255,255,.3);

padding:15px 40px;

cursor:pointer;

font-size:16px;

letter-spacing:3px;

transition:.3s;

}

#backButton:hover{

border-color:white;

}
.loading{

width:100vw;
height:100vh;

background:rgb(44, 43, 43);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:white;

}

.loading-title{

font-size:40px;

letter-spacing:8px;

margin-bottom:40px;

}

.loading-text{

font-size:16px;

letter-spacing:4px;

margin-bottom:25px;

}

.loading-bar{

font-size:26px;

font-family:monospace;

}

.loading-percent{

margin-top:20px;

font-size:18px;

letter-spacing:4px;

}
.team{

display:flex;

justify-content:center;

align-items:flex-start;

gap:50px;

flex-wrap:wrap;

margin-top:50px;

}

.member{

text-align:center;

max-width:240px;

}

.member img{

width:220px;

height:150px;

object-fit:cover;

border:1px solid rgba(255,255,255,.2);

}

.member h3{

margin-top:20px;

letter-spacing:2px;

font-weight:300;

}

.member p{

font-size:14px;

line-height:1.6;

color:#bdbdbd;

}
.contact-box{

display:flex;

flex-direction:column;

gap:25px;

margin-top:40px;

align-items:center;

}

.fade{

opacity:0;

transition:opacity .35s ease;

}

.fade.show{

opacity:1;

}

#motionVideo{

width:900px;

max-width:92%;

height:auto;

margin-top:25px;

border:1px solid rgba(255,255,255,.2);

}

#motionVideo:hover{

border-color:white;

}

h2{

margin-top:0;

margin-bottom:16px;

}

h3{

margin-bottom:8px;

}

#newProjectButton{

font-weight:600;

}

.card p{

margin:8px 0;

}

.card p {

  margin: 8px 0;

}

.card p:first-of-type {

  font-weight: 600;

}

.clientName{

font-weight:600;

}

.taskList{

list-style:none;

padding:0;

margin-top:16px;

}

.taskList li{

margin:6px 0;

}

.nextStep{

font-weight:600;

margin:12px 0;

}

.projectTitle{

cursor:pointer;

}

.clientName{

cursor:pointer;

font-weight:600;

}

.progressBar{

width:100%;

height:16px;

background:#d0c7ba;

border-radius:999px;

overflow:hidden;

margin:15px 0;

border:1px solid #8c7964;


}


.progressFill{

height:100%;

background:#5d4d3f;

min-width:4px;

transition:width .3s ease;

}

.progressBar{

width:100%;

height:16px;

border:1px solid red;

}

.progressFill{

background:green;

min-width:4px;

}

.menuWrapper{

min-height:100vh;

display:flex;

flex-direction:column;

align-items:center;

padding:30px 0 50px 0;

box-sizing:border-box;

}

.nfLogo{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

margin-bottom:30px;

}

.nfLogo{

font-family:serif;

font-size:48px;

font-weight:400;

line-height:1;

color:#7e797960;



}

.nfLogo span{

display:block;

margin-top:8px;

font-family:'Inter',sans-serif;

font-size:12px;

font-weight:300;

letter-spacing:8px;

opacity:.75;

text-align:center;

}



.nfLogo span{

display:block;

font-size:14px;

letter-spacing:10px;

margin-top:8px;

opacity:.7;

}

@media (max-width:900px){

.menu{

gap:16px;

padding:24px;

}

.tile{

width:140px;

height:140px;

}

.nfLogo{

margin-bottom:24px;

}

}

@media (max-width:600px){

.tile{

width:130px;

height:130px;

}

}

html{

overflow-x:hidden;

}

body{

overflow-x:hidden;

max-width:100%;

}

*{

box-sizing:border-box;

}