* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}

html {-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size:16px;}
body {margin: 0;font-size: 16px;}

h1,h2,h3,h4,p,blockquote,figure,ol,ul {margin: 0;padding: 0;}
li {display: block;}

a {text-decoration: none;color: inherit;-webkit-transition: .3s;-moz-transition: .3s;transition: .3s;}
img {max-width: 100%;height: auto;border: 0;}
img.nodrag {pointer-events: none;user-select: none;-webkit-user-drag: none;}
.hi2::before {content:attr(data-z2)attr(data-u1)" (at) "attr(data-u3)attr(email-d2)}

html {min-height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}

body{background-color:#f2f2f2; color:#222;}
.main,.nav{max-width:1400px; margin:0 auto;}

h1 {font:normal 400 1rem  "Source Code Pro", "Courier", "Sans-serif"; }
h1 span{font-weight:800;}
.nav p, .nav a, .text p, .overlay-text, .text h2, .video-text-content{font:normal 400 1rem  "Source Code Pro", "Courier", "Sans-serif";}

.nav {display: flex;align-items: center;gap: 1rem;padding: 10px 0;margin: 75px auto;height: 100%;/* Prevent flex items from shrinking too much */min-width: 0;}
.navleft, .navmiddle, .navright {flex-basis: 33.33%;flex-grow: 1;flex-shrink: 1;min-width: 0; /* needed to prevent overflow */}
.navleft {text-align: left;}
.navmiddle {text-align: center;/* allow middle menu to grow more */flex-grow: 2;}
.navright {text-align: right;}
.navright p svg {position: relative;bottom: -2px;}

.custom-nav {display: flex;justify-content: center;gap: 1.5rem;list-style: none;padding: 0;margin: 0;white-space: nowrap;}
.custom-nav li a {padding: 0 5px;}
.custom-nav li a.active {border: 1px solid black;}
.custom-nav li a:hover{border:1px solid black; padding:0 10px; transition: all 0.3s ease;}

.reel video {width:100%; height:auto; border-radius:20px;}
.preview-video video {opacity: 0.6; transition: opacity 0.3s ease;}
.preview-video:hover video {opacity: 1;}
.play-icon-overlay {position: absolute;top: 50%;left: 49%;transform: translate(-50%, -50%);width: 150px; height: 150px;display: flex;align-items: center;justify-content: center;pointer-events: none;}
.play-icon-overlay svg {width: 100%;height: 100%;}
.video-toggle-wrapper {position: relative;}

.projects {margin:80px 0 80px 0;display: grid;grid-template-columns: repeat(3, 1fr);gap: 6rem;}
.project video {width:100%;height:100%;border-radius:20px; opacity:.6;}
.project:hover video{opacity: 1;transition: opacity 0.4s ease;}
.media-container {position:relative; display: inline-block;width: 100%;aspect-ratio: 1/1;overflow: hidden;}
.media-container video {width: 100%;height: 100%;object-fit: cover;display: block;}
.overlay-text {visibility:hidden;width:90%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: white;font-size: 1.2rem;text-align: center;pointer-events: none;line-height:1.6rem;}

.text {width:100%; margin:0 auto; display:block;}
.text p{max-width:800px; padding:10px 0; font-size:1.2rem; margin:5px auto;}

.hero {
  width: 100vw; /* full viewport width */
  position: relative;
  max-height: 600px; /* or whatever */
  overflow: hidden;
  margin-bottom:25px;
}
.hero-media {
  width: 100%;
  height: auto;
  max-height: 600px; /* or whatever fits your design */
  object-fit: cover; /* for videos/images to fill container nicely */
    aspect-ratio:16/9;
     filter: brightness(0.7);
}

.hero h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2rem;/* fallback for older browsers */
  font-size: clamp(1.5rem, 5vw, 3rem);
  max-width: 1200px;
  width:85%;
  text-align: center;
  pointer-events: none; /* so clicks pass through */
  user-select: none;
}

section h2{font-size: clamp(1.5rem, 4vw, 3rem);  margin:50px auto; font-weight:400;}
.video-text-content h2{margin:0 auto 50px 0;}

.video-text-module video {max-height:600px; border-radius:20px;}
.video-wrapper{flex:1; max-width: 100%;}


.video-text-content {flex: 2; min-width: 300px; max-width: 500px; font-size:1.2rem;}

.video-text-video{margin:0 auto; display:block;}

.video-text-module {display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; max-width:1000px; margin:55px auto}

.textleft{text-align:left;}
.textright{text-align:right;}
.hi1::before {content:attr(data-z2)attr(data-t1) "."attr(data-z1)attr(data-u2);}

/* Responsive adjustments */

@media (max-width: 1450px) {
.main,.nav {padding:0 2%;}
}

@media (max-width: 1300px) {
.projects {margin:40px 0 40px 0; gap: 2rem;}

.nav {flex-wrap: wrap; /* allow wrapping */gap: 1rem;}
.navleft{flex-basis:30%} .navright{flex-basis:15%;}
.navleft, .navright {flex-grow: 1; order: 1; /* first row */}
.navmiddle {flex-basis: 100%;flex-grow: 0;order: 2; /* second row */text-align: center;margin-top: 1rem; /* some spacing */}
}

@media (max-width: 1100px) {
.cuteorcool{display:none;}
.overlay-text {visibility:visible;}
.projects {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 820px) {
.text p{padding:10px 20px; font-size:1.2rem; text-align:center;}
.video-text-module {flex-direction: column; align-items: stretch;}
.video-wrapper, .video-text-content {max-width: 100%;flex: unset;}
.video-text-content {text-align: center; padding: 1rem;}
.video-text-video {max-width: 100%;height: auto;}
}

@media (max-width: 750px) {
.projects {margin:40px 0 40px 0; gap: 1rem;}
.nav {flex-wrap: wrap; gap: 0.5rem;}
.navleft, .navmiddle, .navright {flex-basis: 100%;text-align: center;flex-grow: 0;}
.navright p {float: none;display: inline-block;}
}

@media (max-width: 550px) {

.media-container {aspect-ratio: 4/3;}
.projects {margin:20px 0 20px 0; gap: 1rem;grid-template-columns: repeat(2, 1fr)}
.project{margin-bottom:20px;}
}