/* =========================
   CSS STYLES - Sheena's Web Portfolio
   includes responsiveness 
   ========================= */



* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#0c0c0c;
  --panel:#161616;
  --muted:#9aa0a6;
  --text:#e9e9e9;
  --accent:#ffffff;
  --glass: rgba(255,255,255,0.03);
}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}


.text-medium {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: #ecf0f1;
}

.text-small {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 50px;
  color: #ecf0f1;
}


.cards {
  grid-column: 2 / span 12;
  display: grid;
  grid-template-columns: repeat(12, minmax(auto, 60px));
  grid-gap: 40px;
}

.card {
  grid-column-end: span 4;
  display: flex;
  flex-direction: column;
  background-color: var(--panel);
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.card:hover {
  transform: translateY(-7px);
}

.card__image-container {
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  position: relative;
}

.card__image-container img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card__content {
  padding: 20px;
}

.card__title {
  margin-bottom: 20px;
}

.card__info {
  display: flex;
  align-self: end;
  align-items: center;
}

.card__price {
  margin-left: auto;
  padding: 5px 20px;
  background-color: #303032;
  border-radius: 20px;
}

@media only screen and (max-width: 1000px) {
  .card {
    grid-column-end: span 6;
  }
}

@media only screen and (max-width: 700px) {
  main {
    grid-gap: 20px;
  }
  .card {
    grid-column-end: span 12;
  }
}

@media only screen and (max-width: 500px) {
  main {
    grid-template-columns: 10px repeat(6, 1fr) 10px;
    grid-gap: 10px;
  }
  .cards {
    grid-column: 2 / span 6;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px;
  }
  .card {
    grid-column-end: span 6;
  }
}

.bg-dots {
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(var(--panel) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.38;
  z-index: 0;
  pointer-events: none;
}

/*  container  */
.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}/* =========================
MODERN GLASS NAVBAR
========================= */

.navbar {

position:fixed;
top:0;
width:100%;

z-index:1000;

backdrop-filter:blur(12px);
background:rgba(10,10,10,.6);

border-bottom:1px solid rgba(255,255,255,.05);

}


.nav-wrapper {

max-width:1200px;
margin:auto;

padding:18px 30px;

display:flex;
align-items:center;
justify-content:space-between;

}


/* LOGO */

.logo {

font-size:18px;
font-weight:600;

letter-spacing:.08em;

color:white;

}

.logo span {

color:#888;

}


/* DESKTOP NAV */

.nav-links {
align-items: center;
display:flex;
gap:30px;

}

.nav-links a {

text-decoration:none;

color:#aaa;

font-size:15px;

transition:.2s ease;

}

.nav-links a:hover {

color:white;

}



/* HAMBURGER */

.hamburger {

display:none;

flex-direction:column;
gap:5px;

cursor:pointer;

}

.hamburger span {

width:22px;
height:2px;

background:white;

}



/* CONTACT SECTION CSS */

/* =========================
CONTACT SECTION GRID LAYOUT
========================= */

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:40px;

}


/* FORM STYLE */

.cf{

display:flex;

flex-direction:column;

gap:18px;

}


.cf input,
.cf textarea{

width:100%;

padding:12px;

border-radius:8px;

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

background:rgba(255,255,255,.02);

color:white;

}


/* IMAGE SIDE CENTERING */

.div-right{

display:flex;

justify-content:center;

}

.div-left {
  display: grid;
  gap:15px;
}


/* MOBILE RESPONSIVE */

@media(max-width:768px){

.contact-grid{

grid-template-columns:1fr;

text-align:center;

}

.div-right{

order:-1;

}

}

/* MOBILE MENU PANEL */

.mobile-menu {

position:fixed;

top:0;
right:-100%;

width:250px;
height:100vh;

background:rgba(15,15,15,.95);

backdrop-filter:blur(20px);

display:flex;
flex-direction:column;

padding-top:100px;

gap:30px;

transition:.3s ease;

}


.mobile-menu a {

text-decoration:none;

color:white;

font-size:18px;

padding-left:40px;

}


.mobile-menu.active {

right:0;

}


/* RESPONSIVE BREAKPOINT */

@media(max-width:768px){

.nav-links {

display:none;

}

.hamburger {

display:flex;

}

}

/* HERO LAYOUT */
.hero{
  min-height: 100vh;
  padding-top: 86px; /* header height area */
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr 560px;
  gap:48px;
  align-items:center;
  width:100%;
  max-width:1200px;
  z-index: 10;
}

/* hero again */
.hero-left{ display:flex; gap:28px; align-items:center; }
.portrait-wrap{ flex:0 0 auto; }
.portrait-frame{
  width:220px; height:220px; border-radius:30% 30% 40% 40%/40% 40% 30% 30%;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
  border: 2px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  display:flex; align-items:center; justify-content:center;
}
.portrait{ width:100%; height:100%; object-fit:cover; display:block; }

/* texts */
.kicker, .kicker-inline { font-size:0.82rem; color:var(--muted); letter-spacing:0.14em; margin-bottom:12px; display:inline-block; padding:6px 14px; border-radius:999px; background:var(--glass); border:1px solid rgba(255,255,255,0.02); }
.hero-title{ font-size:2.6rem; line-height:1.05; margin:0 0 12px 0; color:var(--accent); font-weight:700; letter-spacing:-0.01em; }
.hero-title .accent{ color:#ffffff; opacity:0.95; }
.hero-sub{ color:var(--muted); max-width:620px; font-size:1.02rem; margin-bottom:20px; }

/* CTAS */
.hero-cta{ display:flex; gap:12px; align-items:center; }
.btn{ 
display:inline-block;
padding:10px 18px; 
border-radius:999px; 
text-decoration:none; 
font-weight:600; 
font-size:0.95rem; }
.btn-primary{ background:linear-gradient(180deg,#1b1b1b,#131313); color:#fff; border:1px solid rgba(255,255,255,0.06); box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,0.7); }
.btn-ghost{ border:1px solid rgba(255,255,255,0.04); color:var(--muted); background:transparent; }

/* spline extra */
.hero-right{ display:flex; align-items:center; justify-content:center; }
.spline-wrap{
  width:520px; height:520px; position:relative; display:block; border-radius:18px; overflow:visible;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.05));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
}
.spline{ width:100%; height:100%; display:block; pointer-events:auto; }

/* panelsssss -- (about/work/contact) */
.panel{ 
padding:80px 0; 
border-top:1px solid rgba(255,255,255,0.02); 
z-index:6; 
position:relative; 
}
.panel h2{ 
color:var(--text);
 margin-bottom:12px;
  font-size:1.6rem; 
}

/* small for responsive mobile tweaks */
@media (max-width: 1100px){
  .hero-grid{ grid-template-columns: 1fr; gap:28px; }
  .hero-right{ order: -1; } /* spline first on medium screens */
  .spline-wrap{ width:420px; height:420px; margin: 0 auto; }
  .portrait-frame{ width:180px; height:180px; }
}
@media (max-width: 720px){
  .wrap{ padding-left:18px; padding-right:18px; }
  .spline-wrap{ width:320px; height:320px; }
  .portrait-frame{ width:140px; height:140px; }
  .hero-title{ font-size:1.8rem; }
  .main-nav{ display:none; }
  .mobile-open{ display:block; }
  body{ padding-bottom:40px; }
  .bg-dots{ background-size: 20px 20px; opacity:0.3; }
}

/* jsjsjsjs extrass */
a{ color:inherit }
img{ display:block; max-width:100%; }