/* =========================== ADMIN BAR =========================== */
#wpadminbar { 
    display: none; 
}

body { 
    overflow-x: hidden; 
}
.page-content {
position: relative;
top: 150px;
}
/* =========================== BACKGROUND LAYER (SOLID) =========================== */
#bg-layer {
    position: fixed;
    inset: 0;
    background-color: #1c111a;
    z-index: -999; /* behind everything */
}

/* =========================== 3D CANVAS (BEHIND CONTENT) =========================== */
#container3D {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1; /* ABOVE background, BELOW content */
    pointer-events: none;
}

#container3D canvas {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: auto;
}
/* =========================== NAVIGATION (TOPMOST) =========================== */
#static-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 20;

    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;

    padding: 20px 24px;

    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 24px;
    font-weight: 600;

    color: #CFE8E1;

    /* ✨ GLASS BLUR */
    background: rgba(28, 17, 26, 0.35);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);

    /* subtle bottom border */
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    /* prevents 3D canvas from bleeding over it */
    pointer-events: auto;
}

/* nav alignment */
#nav1 {
    text-align: left;
position: relative;
top: 20px;
}

#nav2 {
    text-align: center;
	position: relative;
top: 20px;
}

#nav3 {
    text-align: right;
	position: relative;
top: 20px;
}

/* =========================== REMOVE WP LINK STYLING =========================== */
#static-nav a,
#static-nav a:visited,
#static-nav a:active {
    color: inherit !important;
    text-decoration: none !important;
}

/* Hover effect */
#static-nav a:hover {
    opacity: 0.55;
    transition: opacity 0.25s ease;
}

/* =========================== MOBILE =========================== */
@media (max-width: 390px) {

    #static-nav {
        font-size: 17px;
        padding: 14px 16px;

        /* tighter glass for small screens */
        background: rgba(28, 17, 26, 0.45);
        backdrop-filter: blur(22px) saturate(200%);
    }

    #static-nav {
        width: 100vw;
    }
}

/* =========================== FOLD (HERO TEXT) =========================== */
#fold {
    position: absolute;
    top: -275px;
    left: 10px;
    z-index: 0 !important; /* ABOVE model, below nav */
    pointer-events: none;
}
#fold > h1{
	margin-top: 90px;
}
/* =========================== MARQUEES (GWD SCROLLING) =========================== */
.gwd-marquee,
.gwd-marquee-2 {
    position: absolute;
    width: 100%;
    overflow: hidden;
    z-index: 3; /* ABOVE model & fold */
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* first marquee position */
.gwd-marquee {
    top: 1100px;
}

/* second marquee */
.gwd-marquee-2 {
    top: 1760px;
}

/* track animation */
.gwd-track {
    display: inline-flex;
    white-space: nowrap;
    gap: 20px;
    animation: gwdScroll 20s linear infinite;
}

.gwd-marquee h2,
.gwd-marquee-2 h2 {
    margin: 0;
    padding: 0;
    font-size: 120px;
    font-weight: 700;
    color: #cfe8e1;
    text-transform: uppercase;
    display: inline-block;
}

@keyframes gwdScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* =========================== TYPOGRAPHY =========================== */
h1 {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 310px;
    font-weight: 300;
    line-height: 0.8;
    color: #f2f9f6;
}

h2 {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 120px;
    font-weight: 700;
    line-height: 0.9;
    color: #f2f9f6;
    text-transform: uppercase;
}

h3 {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 60px;
    font-weight: 300;
    line-height: 1;
    color: #f2f9f6;
}

h4 {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 40px;
    font-weight: 300;
    line-height: 1;
    color: #CFE8E1;
    text-transform: uppercase;
}

p {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    color: #CFE8E1;
}

#bg1{
	position: relative;
  top: -210px;
}
#txt1 h3 {
    margin: 0;
	text-transform: uppercase;
	position: absolute;
	left: 20px;
top: 145px;
	max-width: 90%;
}


/* =========================== FOLD TEXT BOX =========================== */
#fold-box1 {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #f2f9f6;
    display: grid;
    grid-template-columns: 70% 30%;
    position: absolute;
    width: 60%;
    top: 430px;
    left: 745px;
    gap: 75px;
}

#fold-left {
    width: 80%;
}

#fold-right {
    margin: auto 0;
    display: grid;
    gap: 20px;
}

/* =========================== INTRO TEXT =========================== */
/* =========================== TXT1 WRAPPER BACKGROUND =========================== */
#txt1 {
    position: absolute;
    z-index: 3;
top: 1220px;
background: rgba(28, 17, 26, 0.35);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.10);
height: 535px;
padding: 0 10vw;
	left: -10px;
width: 90%;
}


/* =========================== FUTURE SECTION =========================== */
#futurewrapper {
    position: absolute;
    top: 2000px;
    z-index: 3;
    width: 100vw;
    max-width: 100vw;
    background-color: #201b1b;
    padding: 0;
    left: -7px;
    background: linear-gradient(
        50.32deg,
        #1C111A 5.38%,
        #CFE8E1 74.61%,
        rgba(242, 249, 246, 0.95) 135.21%
    );
}

#future {
    display: grid;
    grid-template-columns: 34% auto;
    padding: 0 20px 0 20px;
    width: 100%;
}

/* ========================== F-RIGHT DRAG + NO SELECT ========================== */
#f-right {
    display: flex;
    cursor: grab;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#f-right::-webkit-scrollbar {
    display: none;
}

#f-right.dragging {
    cursor: grabbing;
}

#f-right,
#f-right * {
    user-select: none;
}

#f-right > div {
    padding: 10px 40px;
    opacity: 1;
    filter: brightness(1);
    transition: opacity 0.65s ease, filter 0.65s ease;
}

#f-right > div h4 {
    transition: transform 0.65s ease, filter 0.65s ease;
    transform: scale(1);
}

#f-right.dim-mode > div {
    opacity: 0.4;
    filter: brightness(0.6);
}

#f-right.dim-mode > div:hover {
    opacity: 1;
    filter: brightness(1.2);
}

#f-right.dim-mode > div:hover h4 {
    transform: scale(1.35);
    filter: brightness(1.4);
}

#photo {
    margin: auto 20px !important;
}

#freelance,
#web,
#programs,
#market,
#editing {
    margin: auto 0 !important;
}

/* =========================== APPS SECTION =========================== */
#appswrapper {
    position: absolute;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    z-index: 3;
    background: #1c111a;
    top: 2523px;
    padding: 40px;
    height: 2243px;
}

#apps {
    position: relative;
    left: 20px;
    max-width: 100%;
    top: 150px;
}

#apps > div > div > h4,
#apps > div > div > h2,
#apps > div > div > p {
    margin: 0;
}

#photoshop {
    position: relative;
}

#right1 {
    width: 330px;
    height: auto;
    margin: auto 0;
}

#illustrator {
    position: relative;
    left: 400px;
}

#right2 {
    width: 330px;
    height: auto;
    margin: auto 0;
}

#indesign {
    position: relative;
    left: 600px;
}

#right3 {
    width: 420px;
    height: auto;
    margin: auto 0;
}

#dreamweaver {
    position: relative;
    left: 700px;
}

#right4 {
    width: 330px;
    height: auto;
    margin: auto 0;
}

#lightroom {
    position: relative;
    left: 750px;
}

#right5 {
    width: 400px;
    height: auto;
    margin: auto 0;
}

#aftereffects {
    position: relative;
    left: 800px;
}

#right6 {
    width: 330px;
    height: auto;
    margin: auto 0;
}

#animate {
    position: relative;
    left: 750px;
}

#right7 {
    width: 330px;
    height: auto;
    margin: auto 0;
}

#bridge {
    position: relative;
    left: 700px;
}

#right8 {
    width: 180px;
    height: auto;
    margin: auto 0;
}

#wordpress {
    position: relative;
    left: 600px;
}

#right9 {
    width: 400px;
    height: auto;
    margin: auto 0;
}

#html {
    position: relative;
    left: 400px;
}

#right10 {
    width: 330px;
    height: auto;
    margin: auto 0;
}

#css {
    position: relative;
}

#right11 {
    width: 330px;
    height: auto;
    margin: auto 0;
}

/* =========================== RIGHT-SIDE HOVER ANIMATIONS =========================== */
#apps [id^="right"] {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-40px);
    transition: all 1s ease;
    pointer-events: none;
}

#photoshop:hover #right1,
#illustrator:hover #right2,
#indesign:hover #right3,
#dreamweaver:hover #right4,
#lightroom:hover #right5,
#aftereffects:hover #right6,
#animate:hover #right7,
#bridge:hover #right8,
#wordpress:hover #right9,
#html:hover #right10,
#css:hover #right11 {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
    pointer-events: auto;
}

/* =========================== EMPLOYMENT + OTHER SECTIONS =========================== */
#employment {
    position: relative;
top: 4722px;
	left: 10px;
}

#juniorgd {
    position: relative;
top: 4700px;
left: 560px;
}

#juniorgd > h3 {
    width: 630px;
    position: relative;
left: 680px;
    top: -165px;
}

#juniorgd > h2 {
    width: 1050px;
}

#webdesigner {
    position: relative;
    top: 4520px;;
    left: 10px;
}

#webdesigner > h3 {
    width: 630px;
    position: relative;
    left: 680px;
    top: -165px;
}

#webdesigner > h2 {
    width: 1050px;
}

#uxdesigner {
    position: relative;
   top: 4335px;
left: 1140px;
}

#uxdesigner > h3 {
    width: 700px;
    position: relative;
left: 0px;
top: -50px;
}

#uxdesigner > h2 {
    width: 1050px;
}

#pkdesigner {
    position: relative;
top: 4320px;
left: 20px;
}

#pkdesigner > h3 {
    position: relative;
    width: 950px;
left: 4px;
top: -85px;
}

#pkdesigner > h2 {
    width: 1200px;
}

#outlook {
    position: relative;
top: 4200px;
    left: 20px;
}

#outlook > h3 {
    position: relative;
    top: -120px;
	width: 1250px;
left: 700px;
}

#quote > h3 {
    position: relative;
 width: 1360px;
left: 120px;
    top: 0px;
    text-transform: uppercase;
}

#quote > h2 {
    position: relative;
    width: 850px;
    left: 317px;
    top: -20px;
	left: 124px;
}

#quote > p {
    position: relative;
    width: 230px;
    left: 606px;
    top: -215px;
	left: 414px;
}

#q1 {
    position: relative;
top: -1243px;
left: 112px;
}

#q2 {
    position: relative;
top: -1450.5px;
left: 1390px;
}
/* =========================== QUOTE GLASS PANEL =========================== */
#quote-glass {
    position: relative;
top: 4550px;
left: -10px;
height: 1050px;
    width: 100vw;
	margin-bottom: 816px;

    /* GLASS EFFECT */
    background: rgba(28, 17, 26, 0.35);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 80px 20px;

    z-index: 3;
	
}

/* Move your existing quote content INSIDE the glass box */
#quote {
    position: relative; /* you keep your offsets if needed */
    text-align: left;
	top: 119px;
	left: 120px;
}


#outlook > p:nth-child(3) {
display: none;
}
#apply {
    position: relative;
 top: 4364px;
    left: 20px;
}


#apply > h3 {
    position: relative;
    width: 1810px;
    left: 0px;
    top: -189px;
    text-transform: uppercase;
}

#sram {
    position: relative;
top: 4457px;
    left: 20px;
}

#sram > h2 {
    width: 1051px;
    position: relative;
left: 0px;
}

#sram > h3 {
    position: relative;
    width: 1312px;
left: 0px;
    text-transform: uppercase;
}

#easy {
    position: relative;
    top: 10000px;
}

/* =========================== SECTION FADE-UP ANIMATION =========================== */
.reveal {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(20px);
    transition: opacity 1s ease, filter 1s ease, transform 1s ease;
    will-change: opacity, filter, transform;
}

.reveal.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* =========================== APPS STRONG X-SLIDE =========================== */
.apps-reveal {
    opacity: 0;
    filter: blur(20px);
    transform: translateX(250px);
    transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s ease;
    will-change: opacity, filter, transform;
}

.apps-reveal.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}
/* =========================== JOIN-US BG =========================== */
#join-us-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: 1;
    background: linear-gradient(
        50.32deg,
        #1C111A 5.38%,
        #CFE8E1 74.61%,
        rgba(242, 249, 246, 0.95) 135.21%
    );
    pointer-events: none;
}

/* =========================== JOIN-US =========================== */
#join-us {
    position: relative;
    top: 4750px;
    width: 100vw;
    max-width: 100vw;
    left: -28px;

    padding: 0;
    margin: 0;
    border: 0;

    overflow: hidden;
    z-index: 3;
}

/* IF YOU ARE — wrapper */
#txt2 {
    position: relative;
    margin: 0;

}

/* Wrapper background */
.text-wrapper {
    display: inline-block;

    margin: 0;
    padding: 0 270px 0 20px;
    background: #f2f9f6;
    z-index: 4;
}

/* ======== PHYSICS AREA — flush on all sides ======== */
#word-physics-area {
    position: relative;

    width: 100%;
    height: 820px; /* your chosen height */

    margin: 0;
    padding: 0;
    border: 0;

    overflow: hidden;
    z-index: 5;
}

/* ======== Bottom dark wrapper ======== */
#bg-wrap {
    position: relative;
    width: 100%;

    margin: 0;
    padding: 80px 20px; /* keep padding if you want spacing INSIDE */
background: #f2f9f6;
    z-index: 2;
}

/* Words */
.word-ball {
    position: absolute;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 90px;
    font-weight: 300;
    color: #f2f9f6;

    white-space: nowrap;
    cursor: grab;
    user-select: none;

    margin: 0;
    padding: 0;

    will-change: transform;
}

.word-ball.active-word {
    filter: brightness(1.8);
}

.word-ball.dim-word {
    filter: blur(4px) brightness(0.5);
}

/* Text below */
#txt7, #txt8, #txt9 {
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 6;
	left: 20px;
}

#txt7 h1,
#txt9 h1,
#txt8 h3 {
    margin: 0;
}

#txt8 {
padding: 100px 0;
}

#txt11 {
	width: 65%;}

#txt2 > h1:nth-child(1) {
color: #1c111a !important;
}

#txt7 > h1:nth-child(1) {
color: #1c111a !important;
}
#txt8 h3:nth-child(1){
color: #1c111a !important;
}
#txt9 h1:nth-child(1){
color: #1c111a !important;
}
/* =========================== FOOTER =========================== */
#footer {
    width: 100vw;
    padding: 80px 40px 40px 40px;
    background: #111;
    color: #CFE8E1;
position: relative;
top: 4700px;
	z-index: 3;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
    max-width: 1600px;
    margin: auto;
}

.footer-col h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #F2F9F6;
}

.footer-col p,
.footer-col a {
    font-size: 18px;
    line-height: 1.5;
    color: #CFE8E1;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    transition: opacity 0.3s ease;
}

.footer-col a:hover {
    opacity: 0.6;
}

.footer-bottom {
    text-align: center;
    margin-top: 60px;
    opacity: 0.6;
}

.footer-bottom p {
    font-size: 16px;
}

	/* ============================================================
   MOBILE TYPOGRAPHY & LAYOUT — BELOW 375px
============================================================ */
@media (max-width: 390px) {

    /* ===== TYPE ===== */
    h1 {
        font-size: 78px !important;
        line-height: 0.8 !important;
    }

    h2 {
        font-size: 35px !important;
        line-height: 1 !important;
    }

    h3 {
        font-size: 19px !important;
        line-height: 1.2 !important;
    }

    h4 {
        font-size: 13px !important;
        line-height: 1.1 !important;
    }

    p {
        font-size: 8px !important;
        line-height: 1.2 !important;
    }
	    #footer {
        padding: 60px 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-col h3 {
        font-size: 22px !important;
    }

    .footer-col p,
    .footer-col a {
        font-size: 14px !important;
    }

    .footer-bottom p {
        font-size: 12px;
    }
	#static-nav {
width: 350px;
}
#fold-box1 {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    color: #f2f9f6;
    display: grid;
    grid-template-columns: 75% 25%;
    position: absolute;
    width: 57%;
    top: 168px;
    left: 186px;
    gap: 0px;
}
#static-nav {
  /* font-size: 24px; */
  font-size: 17px;
    width: 350px;
  }

#bg1 {
  /* top: -210px; */
  top: -1000px;
}

#txt1 {
  /* left: 0px; */
  /* top: 1220px; */
  /* background: #1c111a; */
  /* height: 535px; */
  /* width: 80%; */
  left: -20px;
  top: 1165px;
  background: #1c111a;
  height: 250px;
  width: 100vw;
}

#txt1 h3 {
  /* left: 20px; */
  /* top: 115px; */
  top: 35px;
  width: 325px;
}

.gwd-marquee-2 {
  /* top: 1760px; */
  top: 1450px;
}

#futurewrapper {
  /* top: 2000px; */
  top: 520px;
}

#appswrapper {
  /* top: 2523px; */
  /* padding: 40px; */
  /* height: 2243px; */
  top: 689px;
  height: 750px;
	left: -60px;
}

#apps {
  /* left: 20px; */
  /* top: 150px; */
top: 40px;
}

#right1 {
  /* width: 330px; */
  width: 154px;
}

#illustrator {
  /* left: 400px; */
  left: 40px;
}

#right2 {
  /* width: 330px; */
  width: 160px;
}

#indesign {
  /* left: 600px; */
  left: 70px;
}

#right3 {
  /* width: 420px; */
  width: 187px;
}

#dreamweaver {
  /* left: 700px; */
  left: 80px;
}

#right4 {
  /* width: 330px; */
  width: 160px;
}

#lightroom {
  /* left: 750px; */
  left: 85px;
}

#right5 {
  /* width: 400px; */
  width: 180px;
}

#aftereffects {
  /* left: 800px; */
  left: 80px;
}

#right6 {
  /* width: 330px; */
  width: 160px;
}

#animate {
  /* left: 750px; */
  left: 69px;
}

#right7 {
  /* width: 330px; */
  width: 150px;
}

#bridge {
  /* left: 700px; */
  left: 40px;
}

#right8 {
  /* width: 180px; */
  width: 85px;
}

#wordpress {
  /* left: 600px; */
  left: 20px;
}

#right9 {
  /* width: 400px; */
  width: 171px;
}

#html {
  /* left: 400px; */
  left: 10px;
}

#right10 {
  /* width: 330px; */
  width: 151px;
}

#css {
  left: 20px;
}

#right11 {
  /* width: 330px; */
  width: 167px;
}

#join-us {
  /* top: 4750px; */
  /* left: -28px; */
  top: 1440px;
	left: -8px;
}

.word-ball {
  /* font-size: 90px; */
  font-size: 42px;
}

#employment {
  /* top: 4722px; */
  /* left: 10px; */
  top: 1505px;
  left: 24px;
}

#txt11 {
  /* width: 65%; */
  width: 90%;
}

#juniorgd {
  /* top: 4700px; */
  /* left: 620px; */
  top: 1570px;
  left: 24px;
}

#juniorgd > h3 {
  /* width: 630px; */
  /* left: 680px; */
  /* top: -165px; */
  width: 294px;
  left: 0px;
  top: 0px;
}

#juniorgd > h2 {
  /* width: 1050px; */
  width: 355px;
}

#webdesigner {
  /* top: 4520px; */
  /* left: 10px; */
  top: 1630px;
  left: 105px;
}

#webdesigner > h2 {
  /* width: 1050px; */
  width: 401px;
}

#webdesigner > h3 {
  /* width: 630px; */
  /* left: 680px; */
  /* top: -165px; */
  width: 293px;
  left: 0px;
  top: 0px;
}

#uxdesigner {
  /* top: 4335px; */
  /* left: 1140px; */
  top: 1690px;
  left: 24px;
}

#uxdesigner > h2 {
  /* width: 1050px; */
  width: 310px;
}

#uxdesigner > h3 {
  /* width: 700px; */
  /* top: -50px; */
  width: 227px;
  top: 0px;
}

#pkdesigner {
  /* top: 4320px; */
  /* left: 20px; */
  top: 1754px;
  left: 50px;
}

#pkdesigner > h2 {
  /* width: 1200px; */
  width: 293px;
}

#pkdesigner > h3 {
  /* width: 950px; */
  /* left: 4px; */
  /* top: -85px; */
  width: 278px;
  left: 60px;
  top: 0px;
}

#outlook {
  /* top: 4200px; */
  /* left: 20px; */
  top: 1900px;
  left: 10px;
}

#outlook > h3 {
  /* top: -120px; */
  /* width: 1250px; */
  /* left: 700px; */
  top: 0px;
  width: 316px;
  left: 20px;
}

#quote {
  /* top: 5000px; */
  /* left: 150px; */
  top: 3049px;
  left: 0px;
}

#quote > h2 {
  /* width: 850px; */
  /* top: -20px; */
  /* left: 124px; */
  width: 336px;
  top: -850px;
  left: 30px;
}

#quote > h3 {
  /* width: 1360px; */
  /* left: 120px; */
  /* top: 0px; */
  width: 349px;
  left: 30px;
  top: -887px;
}

#quote > p {
  /* width: 230px; */
  /* top: -215px; */
  /* left: 414px; */
  width: 116px;
  top: -870px;
  left: 30px;
}

#q1 {
  /* top: -1243px; */
  /* left: 112px; */
  top: -1280px;
  left: 30px;
}

#q2 {
  /* top: -1450.5px; */
  /* left: 1390px; */
  top: -1344.5px;
  left: 345px;
}

#apply {
  /* top: 4364px; */
  top: 2200px;
}

#apply > h3 {
  /* width: 1810px; */
  /* top: -189px; */
  width: 306px;
  top: 0px;
}

#sram {
  /* top: 4457px; */
  top: 2259px;
}

#sram > h2 {
  /* width: 1051px; */
  width: 296px;
}

#sram > h3 {
  /* width: 1312px; */
  width: 347px;
}
	#container3D canvas {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
}

/* style.css | https://globalproject.seanbyrde.com/wp-content/themes/gwd-web-css/style.css?ver=6.9 */

#quote-glass {
  /* top: 4550px; */
  /* height: 1050px; */
  /* margin-bottom: 816px; */
  top: 2123px;
  height: 380px;
  margin-bottom: 131px;
}

@media (max-width: 390px) {
  #quote {
    /* top: 3049px; */
    /* left: 0px; */
    top: 920px;
    left: -25px;
  }
}

#footer {
  /* top: 4700px; */
  top: 2326px;
  left: -10px;
}

	
	
}