/* 1720px - 2159.58px */
/* 1400px - 1719.20px */
/* XL: 1200px – 1399.98px */
/* LG: 992px – 1199.98px */
/* MD: 768px – 991.98px */
/* SM: 576px – 767.98px */
/* XS: 524px - 575.98px */

/* 380px - 523.98px */
@media (max-width: 523.98px) {
    .fs-335 {
        margin-top: 50px;
        font-size: 5.25rem; /* example */
        line-height: 5.25rem;
    }
}

/* ===== POSITIONING CONTEXT ZERO CRAMMING - ONLY THINKING ===== */
#home {
  position: relative !important;
  font-family: 'Helvetica';
  font-weight: 700;
  --safe-right: 0px; /* default (mobile, char usually hidden) */
}

#home .child-bulb-wrap{
  position: absolute;
  left: 0;             /* your anchor */
  top: 50px;           /* your anchor */
  z-index: 50;
  pointer-events: none;
}

/* The actual image we move/size */
.child-bulb {
  position: relative;
  pointer-events: none;
  height: auto; /* Maintains aspect ratio */
  max-width: 100%; /* Prevents overflow */
  display: block; /* Ensures proper rendering */
}

.einstein-boy {
  top: 0px; /* Move up on y-axis */
  margin: 0px; /* Prevent overlap */
  z-index: 10;

  height: auto; /* Maintain aspect ratio */
  width: auto;
  max-width: 100% !important; /* Prevent overflow */
  
  pointer-events: none;
  position: relative; /* Retain original positioning */
  left: clamp(20px, 5vw, 50px); /* Dynamic left offset */
  display: block; /* Ensure proper rendering */
}

.joy-band{
  position: relative;
  white-space:nowrap;
}

/* ===== Fluid headings (from earlier) ===== */

/* ========================================================
       TASK: DYNAMIC FONT SIZE for ZeroCramming + OnlyThinking
   ======================================================== */
.zero-cramming{
  display:inline-block;
}
.zero-cramming .line{
  display:block;
  white-space:nowrap;
  line-height:.9;
  letter-spacing:-0.02em;
}

/*
#zero-cramming .zero  {
  font-size: clamp(4rem, 12vw, 16rem);
  color:#fff;
}
#zero-cramming .cram  { 
  font-size: clamp(2rem, 6vw, 8rem); 
  color:#fff;
}
#zero-cramming .cram i{ 
  font-size: clamp(.5em, 3vw, 6rem);
  line-height:1; 
}

#only-thinking .only{ 
  font-size: clamp(2rem, 6vw, 8rem);
  line-height:.85; 
}

#only-thinking .thinking{ 
  font-size: clamp(4rem, 12vw, 16rem);
  line-height:1; 
}

@media (min-width:768px){
  #home .zero-cramming,
  #home .only-thinking{
    padding-left: clamp(32px, 3vw, 160x); /* pushes text away from the image
  }
*/

/* only / thinking! */
.only-thinking{
  line-height:1.1;
  letter-spacing:-0.2em;
  white-space:nowrap;
  margin:-.25rem 0 1rem; 
  text-align: left;
}
.only-thinking .only {
  display:block;
}
.only-thinking .thinking {
  display:block;
}

.para-container {
  position:relative;
  display: block;
  box-sizing: border-box;
  white-space: wrap;
}


/* ========================================================
       TASK: POSITION for ZeroCramming + OnlyThinking
   ======================================================== */

/* Default values (desktop first) */
#home {
  --zero-x: 0px;
  --zero-y: 0px;
  --only-x: 0px;
  --only-y: 0px;
}

/* TEMPORARY - SHOULD BE DELETED LATER 
#home #zero-cramming{ border: 1px dashed lime !important; }
#home #only-thinking{ border: 1px dashed lime !important; } */


/* === make sure the selectors match your HTML exactly === */
#home #zero-cramming{
  display: inline-block;              /* ensures transform is visible */
  transform: translate(var(--zero-x), var(--zero-y)) !important;
  will-change: transform;
}

#home .only-thinking{
  display: inline-block;
  transform: translate(var(--only-x), var(--only-y)) !important;
  will-change: transform;
}

@media (min-width: 2160px){
  .child-bulb {
    transform: translate(0px, 480px);
    width: clamp(280px, 10vw, 320px);
  }
  #home{
    --zero-x: -320px;
    --zero-y: -48px;
    --only-x: -160px;
    --only-y: -32px;
  }
  #zero-cramming .zero  {
    font-size: 12rem;
    color:#fff;
  }
  #zero-cramming .cram  { 
    font-size: 7rem; 
    color:#fff;
  }
  #zero-cramming .cram i{ 
    font-size: 4rem;
    line-height:1; 
  }
  #only-thinking .only{ 
    font-size: 6rem;
    line-height:.85; 
  }

  #only-thinking .thinking{ 
    font-size: 10rem;
    line-height:1; 
  }
  .joy-band{
    font-size: 28px;
    font-weight: 400;
    top: -96px;
    left: -208px;
  } 
  .para-container {
    /*border: 1px dotted yellow;*/

    width: 336px !important;
    height: 288px !important;
    transform: translate(0px, -16px);

    font-size: 24px;
    line-height: 36px;
    margin-bottom: 0px;
    padding-left: 16px;
  }
}

/* 1720px - 2159.98px */
@media (min-width: 1720px) and (max-width: 2159.98px) {
  .child-bulb {
    transform: translate(0px, 360px);
    width: clamp(280px, 10vw, 320px);
  }
  .einstein-boy {
      /*transform: translate(0px, 0px);*/
      width: clamp(560px, 40vw, 640px); /* Dynamic width */
  }
  #home{
    --zero-x: -32px;
    --zero-y: 16px;
    --only-x: 0px;
    --only-y: 16px;
  }
  #zero-cramming .zero  {
    font-size: 12rem;
    color:#fff;
  }
  #zero-cramming .cram  { 
    font-size: 8rem; 
    color:#fff;
  }
  #zero-cramming .cram i{ 
    font-size: 6rem;
    line-height:1; 
  }
  #only-thinking .only{ 
    font-size: 7rem;
    line-height:.85; 
  }

  #only-thinking .thinking{ 
    font-size: 8rem;
    margin-left: 54px;
    line-height:1; 
  }
  .joy-band{
    font-size: 20px;
    font-weight: 400;
    top:-48px;
    left: 32px;
  } 
  .para-container {
    /*border: 1px dotted yellow;*/

    width: 352px !important;
    height: 288px !important;
    transform: translate(0px, -16px);

    font-size: 24px;
    line-height: 32px;
    margin-bottom: 0px;
    padding-left: 16px;
  }
}

/* 1400px - 1719.20px */
@media (min-width: 1400px) and (max-width: 1719.98px) { 
  .child-bulb {
    transform: translate(0px, 216px);
    width: clamp(216px, 10vw, 320px);
  }
  .einstein-boy {
      /*transform: translate(0px, 0px);*/
      width: clamp(560px, 40vw, 640px); /* Dynamic width */
  }
  #home{
    --zero-x: 064px;
    --zero-y: 16px;
    --only-x: 108px;
    --only-y: 24px;
  }
  #zero-cramming .zero  {
    font-size: 9rem;
    color:#fff;
  }
  #zero-cramming .cram  { 
    font-size: 5rem; 
    color:#fff;
  }
  #zero-cramming .cram i{ 
    font-size: 2rem;
    line-height:1; 
  }
  #only-thinking .only{ 
    font-size: 4rem;
    line-height:.85; 
  }

  #only-thinking .thinking{ 
    font-size: 6rem;
    line-height:1; 
  }
  .joy-band{
    font-size: 15px;
    font-weight: 400;
    top: -16px;
    left: 64px;
  } 
  .para-container {
    /*border: 1px dotted yellow;*/

    width: 320px !important;
    height: 256px !important;
    transform: translate(0px, -16px);

    font-size: 21px;
    line-height: 28px;
    margin-bottom: 0px;
    padding-left: 16px;
  }
}

/* XL: 1200px – 1399.98px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .child-bulb {
    transform: translate(0px, 144px);
    width: clamp(144px, 10vw, 320px);
  }
  .einstein-boy {
      /*transform: translate(0px, 0px);*/
      width: clamp(560px, 40vw, 640px); /* Dynamic width */
  }
  #home{
    --zero-x: 064px;
    --zero-y: -32px;
    --only-x: 124px;
    --only-y: -24px;
  }
  #zero-cramming .zero  {
    font-size: 7rem;
    color:#fff;
  }
  #zero-cramming .cram  { 
    font-size: 4rem; 
    color:#fff;
  }
  #zero-cramming .cram i{ 
    font-size: 2rem;
    line-height:1; 
  }
  #only-thinking .only{ 
    font-size: 4rem;
    line-height:.85; 
  }
  #only-thinking .thinking{ 
    font-size: 5rem;
    line-height:1; 
  }
  .joy-band{
    font-size: 13px;
    font-weight: 400;
    top: -64px;
    left: 64px;
  } 
  .para-container {
    /*border: 1px dotted yellow;*/

    width: 336px !important;
    height: 280px !important;
    transform: translate(0px, -16px);

    font-size: 18px;
    line-height: 24px;
    margin-bottom: 0px;
    padding-left: 16px;
  }
}

/* LG: 992px – 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .child-bulb {
    transform: translate(0px, 160px);
    width: clamp(160px, 10vw, 280px);
  }

  .einstein-boy {
      /*transform: translate(0px, 0px);*/
      width: clamp(560px, 40vw, 640px); /* Dynamic width */
  }

  #home{
    --zero-x: 94px;
    --zero-y: 0px;
    --only-x: 144px;
    --only-y: 0px;
  }
  #zero-cramming .zero  {
    font-size: 6rem;
    color:#fff;
  }
  #zero-cramming .cram  { 
    font-size: 4rem; 
    color:#fff;
  }
  #zero-cramming .cram i{ 
    font-size: 2rem;
    line-height:1; 
  }
  #only-thinking .only{ 
    font-size: 4rem;
    line-height:.85; 
  }

  #only-thinking .thinking{ 
    font-size: 6rem;
    line-height:1; 
  }
  .joy-band{
    font-size: 13px;
    font-weight: 400;
    top:-48px;
    left: 128px;
  } 
  .para-container {
    /*border: 1px dotted yellow;*/

    width: 256px !important;
    height: 320px !important;
    transform: translate(0px, -16px);

    font-size: 18px;
    line-height: 24px;
    margin-bottom: 0px;
    padding-left: 16px;
  }
}

/* MD: 768px – 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .child-bulb {
    transform: translate(0px, 164px);
    width: clamp(160px, 10vw, 240px);
  }
  #home{
    --zero-x: -32px;
    --zero-y: -80px;
    --only-x: 32px;
    --only-y: -72px;
  }
  #zero-cramming .zero  {
    font-size: 9rem;
    color:#fff;
  }
  #zero-cramming .cram  { 
    font-size: 5rem; 
    color:#fff;
  }
  #zero-cramming .cram i{ 
    font-size: 2rem;
    line-height:1; 
  }
  #only-thinking .only{ 
    font-size: 4rem;
    line-height:.85; 
  }

  #only-thinking .thinking{ 
    font-size: 6rem;
    line-height: 1; 
  }

  .joy-band{
    font-size: 12px;
    font-weight: 400;
    top:-108px;
    left: -8px;
  } 

  .para-container {
    width: 200px !important;
    height: 210px !important;

    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0px;
    padding-left: 16px;
  }

  .einstein-boy {
      width: clamp(560px, 40vw, 640px); /* Dynamic width */
  }
}

/* SM: 576px – 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
  #home{
    --zero-x: -64px;
    --zero-y: -64px;
    --only-x: -48px;
    --only-y: -64px;
  }
  #zero-cramming .zero  {
    font-size: 10rem;
    color:#fff;
  }
  #zero-cramming .cram  { 
    font-size: 6rem; 
    color:#fff;
  }
  #zero-cramming .cram i{ 
    font-size: 2.5rem;
    line-height:1; 
  }
  #only-thinking .only{ 
    font-size: 5rem;
    line-height:.85; 
  }

  #only-thinking .thinking{ 
    font-size: 8rem;
    line-height:1;
    letter-spacing: -7px;

  }
    .joy-band{
    font-size: 13px;
    font-weight: 400;
    top: -108px;
    left: -84px;
  } 

  .einstein-boy {
      width: clamp(560px, 40vw, 640px); /* Dynamic width */
  }
}

/* XS: 480px - 575.98px START */
@media (min-width:480px) and (max-width: 575.98px) {
  #home{
    --zero-x: 16px;
    --zero-y: -64px;
    --only-x: 48px;
    --only-y: -64px;
  }
  #zero-cramming .zero  {
    font-size: 9rem;
    color:#fff;
  }
  #zero-cramming .cram  { 
    font-size: 5rem; 
    color:#fff;
  }
  #zero-cramming .cram i{ 
    font-size: 2rem;
    line-height:1; 
  }
  #only-thinking .only{ 
    font-size: 4rem;
    line-height:.85; 
  }

  #only-thinking .thinking{ 
    font-size: 6rem;
    line-height:1; 
  }
  .joy-band{
  font-size: 12px;
  font-weight: 400;
  top:-108px;
  left: -28px;
  }

  .einstein-boy {
      width: clamp(420px, 40vw, 640px); /* Dynamic width */
  }
}

/* XS: 479.98px iPhone 13Pro 390px START */
@media (max-width: 479.98px) {
  #home{
    --zero-x: 16px;
    --zero-y: -32px;
    --only-x: 48px;
    --only-y: -32px;
  }
  #zero-cramming .zero  {
    font-size: 9rem;
    color:#fff;
  }
  #zero-cramming .cram  { 
    font-size: 5rem; 
    color:#fff;
  }
  #zero-cramming .cram i{ 
    font-size: 2rem;
    line-height:1; 
  }
  #only-thinking .only{ 
    font-size: 4rem;
    line-height:.85; 
  }

  #only-thinking .thinking{ 
    font-size: 6rem;
    line-height:1; 
  }
  .joy-band{
  font-size: 12px;
  font-weight: 400;
  top:-64px;
  left: -28px;
  }

  .einstein-boy {
      width: clamp(560px, 40vw, 640px); /* Dynamic width */
  }
}