:root{

--petrix-cyan:#53d5f4;
--petrix-black:#000;
--petrix-white:#fff;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:#000;
color:#fff;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;

overflow-x:hidden;

}

/* HERO */

.petrix-hero{

position:relative;
height:100vh;
width:100%;

overflow:hidden;

}

.hero-image{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

top:0;
left:0;

}

.hero-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
rgba(0,0,0,.55);

z-index:2;

}

.hero-content{

position:relative;

z-index:3;

height:100%;

display:flex;
flex-direction:column;

justify-content:center;
align-items:center;

text-align:center;

padding:20px;

}

.petrix-logo{

width:min(600px,85vw);

margin-bottom:40px;

}

.hero-text h1{

font-size:
clamp(32px,5vw,72px);

font-weight:300;

margin-bottom:20px;

}

.hero-text p{

font-size:
clamp(16px,2vw,24px);

letter-spacing:3px;

opacity:.9;

margin-bottom:50px;

}

/* ENTER */

.enter-button{
    display:inline-block;
    padding:20px 90px;
    background:var(--petrix-cyan);
    color:#000;
    text-decoration:none;
    letter-spacing:4px;
    font-size:22px;
    font-weight:600;
    transition:.3s;
}

.enter-button:hover{
    opacity:.85;
}

background:
var(--petrix-cyan);

color:#000;

}

/* MENU */

#petrix-menu{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:#000;

z-index:9999;

display:flex;

justify-content:center;
align-items:center;

opacity:0;
visibility:hidden;

transition:.4s;

}

#petrix-menu.active{

opacity:1;
visibility:visible;

}

#petrix-menu nav{

display:flex;
flex-direction:column;

gap:30px;

text-align:center;

}

#petrix-menu a{

text-decoration:none;

color:#fff;

font-size:
clamp(28px,4vw,60px);

transition:.3s;

}

#petrix-menu a:hover{

color:
var(--petrix-cyan);

}

#close-menu{

position:absolute;

top:40px;
right:40px;

background:none;

border:none;

font-size:40px;

cursor:pointer;

color:#fff;

}

/* SECTIONS */

.petrix-section{

padding:
120px 8vw;

background:#000;

}

.petrix-title{

font-size:
clamp(40px,5vw,80px);

color:
var(--petrix-cyan);

margin-bottom:60px;

text-align:center;

}

/* GALLERY */

.petrix-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:25px;

}

.petrix-grid img{

width:100%;

display:block;

border-radius:10px;

transition:.4s;

cursor:pointer;

}

.petrix-grid img:hover{

transform:scale(1.02);

}

/* CONTACT */

.petrix-buttons{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:20px;

}

.petrix-buttons a{

padding:16px 30px;

border:1px solid
var(--petrix-cyan);

color:
var(--petrix-cyan);

text-decoration:none;

transition:.3s;

}

.petrix-buttons a:hover{

background:
var(--petrix-cyan);

color:#000;

}

/* SHOP */

.shop-coming{

text-align:center;

padding:150px 20px;

}

.shop-coming h2{

font-size:
clamp(50px,7vw,120px);

color:
var(--petrix-cyan);

margin-bottom:30px;

}

.shop-coming p{

font-size:24px;

margin:10px 0;

}
.hero-content{
    transform: translateY(-40px);
}