:root {
  --mp: 5vw; /* Margin Point */
  --bg-black: #000;
  --coral: #FF6B61;
  --light-green: #F7FFEA;
  --soft-pink: #FFB8C0;
  --yellow: #f7d267;
  --salat: #A2D274;

  --radius: 50px;
  --border-size: 0px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background: #000000;
  color:#000;
}
.navbar{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  z-index:10;
  background: rgba(255,255,255,0); /* default transparent */
  transition: transform .35s ease, background .25s ease;
}
.navbar.scrolled {
  background: #ffffff; /* solid background on scroll */
}
.navbar.hidden{
  transform: translateY(-100%);
}
.navbar.fixed {
  position: fixed;
}
.nav-inner{
  /*max-width: 1400px;*/
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 70px 80px;
}
.nav-inner .logo img{
  width: 250px;
  display:block;
}
.home-btn{
  font-weight:800;
  text-decoration:none;
  letter-spacing:1px;
  position: relative;
  color:#000;
  font-size: 1.5em;
}
.home-btn::after{
  content:'';
  position:absolute;
  left:0; bottom:3px;
  width:100%;
  height:2px;
  background:#000;
}

.row1{
  display:flex;
  gap:10px;
  padding: 10px 10px 0 10px ;
  position: relative;
  
  /* max-width: 1400px; */
  margin: 0 auto 0px;
}
.block{
  flex:1;
  position: relative;
  border: var(--border-size) solid #000;
  border-radius: 75px;
  /* min-height: 400px; */
  overflow:hidden;
  display:flex;
  align-items:center;
  /*justify-content:center;*/
  padding: 64px;

}
.block-left{
  width: 50%;
  background: #FF6F61;
  color:#000;
  align-content: start;
  display: flex;
  justify-content: start;
}
.text-block1{
  padding-bottom: 1vh;
  
  
}
.block-left h1{
  font-size: clamp(2rem, 4vw, 7rem);
  font-weight: 700;
  line-height:1.1;
  padding-right: 8vw;
}
.stores{
  display: flex;
  padding-top: 1vh;
  display:flex;
  gap:12px;
  margin-top:10px;
  width: 80%;
}
.store-icon{
  height:3.5vw;
  display:flex;
}
.block-right{
  position: relative;
  width: 50%;
  background: #EFFBCD;
  display: flex;
  flex-direction: column;
  justify-content: center; /* <- vertical centering */
  align-items: flex-start; /* <- optional: align text left */

  color:#000;
}
.block-right .top-text{
  font-size: clamp(1.2rem, 2vw, 4rem);
  font-weight:600;
  margin:16vh 2vh 5vh 14vh;
  
  line-height: 1.2
}
.dino-placeholder{
  width:100%;
  
  justify-content: end;
  display:flex;
  align-items:center;

  margin-top:auto;
 
  
}
.dino-placeholder img{
  width: 50vh;
  padding-right: 3vh;
}
.midblock{
  position:absolute;
  top:31%;
  left:50%;
  transform: translate(-50%, -20%);
  width:35vh;
  height:60vh;
  border: var(--border-size) solid #000;
  border-radius:40px;
  
  display:flex;
  align-items:center;
  justify-content:center;
  
  z-index:5;
}
.midblock img{
  width: 35vh;
  display:block;
}
/*.row2{
  position: relative;
  margin: 10px auto 5px;
  height: 90vh;
  background: #FFB8C0;
  border: var(--border-size) solid #000;
  border-radius:75px;
  padding: 70px 10px 70px 10px ;
  margin: 10px 10px 10px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}*/
.row2 {
  position: relative;
  margin: 10px auto 5px;
  height: 90vh;
  background: #FC8C8F;
  border-radius: 75px;
  padding: 0;
  display:flex;
  overflow: hidden;
  align-items:center;
  justify-content:center;
  padding: 70px 0px 70px 0px ;
  margin: 10px 10px 10px 10px;
}
.video-wrapper{
  position: relative;
  width: 220px;
  height: 100%;
  
  border: var(--border-size) solid #000;
  border-radius: 100px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 8;
}
.play-icon{
  width:0;
  height:0;
  border-left: 20px solid #000;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.decor{
  position:absolute;
  width:120px;
  height:120px;
}


.heart, .ghost {
  position: absolute;
  width: calc(var(--mp) * 4.5);
  height: calc(var(--mp) * 5);
}

.heart {
  
  top: var(--mp);
  left: 8vw;
  transform: rotate(-30deg);
}

.ghost {
  bottom: var(--mp);
  right: var(--mp);
  transform: rotate(15deg);
  width: calc(var(--mp) * 4.2);
}

.decor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.donation-video {
  width: auto;
  height: 100%;
  
  border-radius: 60px;
  object-fit: cover;
  display: block;
}

.row3 {
  display: flex;
  gap: 10px;
  padding: 0 10px 10px 10px;
  
  
  border-radius: var(--radius);
}
@media (min-width: 1400px) {
  .row3 .animal-block img  {
    padding: 3vw;
  }
  .quote-block p {
    padding: 1vw;
  }

}

.row3 .block-left {
  background: #EBFAC7;
  justify-content: center;
  align-items: center;
}

.animal-block img {
  width: 100%;
  
  object-fit: contain;
}

.row3 .block-right {
  background: #808EF2;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
}

.quote-block p {
  font-size: clamp(5.5vw, 5.5vw, 5vw);
  font-weight: 700;
  text-align: left;
  padding: 1vw;
  line-height: 1.1;
}

.row4 {
  position: relative;
  padding: 10px 10px 10px 10px;
  background: #F5CB55;
  margin: 10px auto 5px;
  min-height: 340px;
  border-radius: 75px;
  padding: 0;
  display:flex;
  overflow: hidden;
  align-items:center;
  justify-content:center;
  
  margin: 0 10px 10px 10px;
}

.message-block {
  z-index: 5;
  width: 70vw;
  line-height: 1.1;
  text-align: center;
  font-size: 4em;
  font-weight: 700;
  padding: 0 10vw;
  color: #000;
}

.flower, .ufo {
  position: absolute;
  width: calc(var(--mp) * 2.7);
  height: auto;
}

.flower {
  left: var(--mp);
  bottom: -2vh;
  transform: rotate(-10deg);
}

.ufo {
  width: calc(var(--mp) * 3.5);
  right: 2vw;
  top: 0vh;
  transform: rotate(40deg);
}

.row5 {
  display: flex;
  gap: 10px;
  padding: 0 10px 10px 10px;
  border-radius: 75px;
  
}

/* Shared styles from row3 */
.row5 .block {
  flex: 1;
  
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LEFT: App Icon full-screen with text */
.appicon-block {
  padding: 0;
}

.appicon-img {
  
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.appicon-text {
  width: 39vw;
  position: absolute;
  bottom: 5vw;
  left: 5vw;
  color: #000;
  font-size: 2.5em;
  font-weight: 600;
  line-height: 1.1;
}

/* RIGHT: Coral background, UI image + text */
.ui-block {
  background: var(--coral);
  flex-direction: row;
  justify-content: space-between;
  padding: 20px 0 20px 0 ;
}

.ui-img {
  max-height: 100%;
  max-width: 50%;
  object-fit: contain;
  padding: 5vw 0 5vw 5vw;
}
.ui-img2 {
  max-height: 100%;
  max-width: 50%;
  object-fit: contain;
  padding: 6vw 5vw 6vw 0vw;
}

.ui-text {
  color: #000;
  font-size: 2.5em;
  font-weight: 600;
  text-align: left;
  padding: 5vh 4vw 5vh 4vw;
  line-height: 1.2;
  display: flex;
  align-items: center;
}
.row6 {
  display: flex;
  gap: 10px;
  padding: 0 10px 10px 10px;
  border-radius: 75px;
}
.ui-textblock {
  background: var(--salat);
  flex-direction: row;
  justify-content:left;
  gap: 6vh;
  padding: 0px 0 0px 0 ;
}

.ui-texblock-text {
  color: #000;
  font-size: 2.5em;
  font-weight: 600;
  text-align: left;
  padding-left: 5vw;
  line-height: 1.1;
  display: flex;
  align-items: center;
}
.ui-img {
  width: 50%;
  
}


.row7 {
  position: relative;
  margin: 10px auto 5px;
  
  background: #8F9EFF;
  border-radius: 75px;
  padding: 0;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 70px 70px;
  margin: 0 10px 10px 10px;
  overflow: hidden;
}

/* Comedy icon */
.row7 .comedy {
  position: relative;
  left: 3vw;
  
  width: calc(var(--mp) * 4);
  height: calc(var(--mp) * 5);
  transform: rotate(-15deg);
}

/* Peter Pan image block */
.row7 .image-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  overflow: hidden;
  padding: 3vh;
}

.peterpan-image {
  max-height: 90%;
  max-width: 80%;         /* ✅ Add this */
  object-fit: contain;
  
  display: block;         /* ✅ Prevent stray inline spacing */
  box-sizing: border-box;
}

/* Text block on the right */
.row7 .textblock {
  flex: 1;
  
  display: flex;
  align-items: center;      /* ✅ Vertically center */
  justify-content: flex-start;
  height: 100%;             /* ✅ Needed for vertical centering to work */
}

.peterpan-caption {
  font-size: 2.5em;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}
.row7 .comedy,
.row7 .image-wrapper,
.row7 .textblock {
  flex: 0 0 33.33%;
}

.row8 {
  position: relative;
  padding: 12vh 0;
  margin: 0 10px 10px 10px;
  background: #FC8C8F;
  border-radius: 75px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.row8 .message-block {
  z-index: 5;
  width: 75vw;
  line-height: 1;
  text-align: center;
  font-size: 5em;
  font-weight: 700;
  padding: 0 10vw;
  color: #000;
}

.education, .fantasy {
  position: absolute;
  width: calc(var(--mp) * 3.2);
  height: auto;
}

.education {
  left: var(--mp);
  transform: rotate(-5deg);
}

.fantasy {
  right: var(--mp);
}
.row9 {
  display: flex;
  gap: 10px;
  padding: 10px 10px;
  margin: 0 10px 10px 10px;
  background: #9DC6F7;
  border-radius: 75px;
  overflow: hidden;
  align-items: start;
  justify-content: center;
  flex-wrap: nowrap;
}

/* Columns */
.row9 .icon-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5vh;
  padding: 5vh 10vh 10vh 10vh;
  justify-content: flex-start;
}


.row9 .icon-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  
}

/* BIGGER ICONS */
.row9 .icon-block img {
  height: 24vh; /* ⬅️ 3x bigger */
  margin-bottom: 1vh;
  
}

/* Text */
.row9 .icon-block p {
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
  margin: 0; /* ⬅️ remove gap between heading and text */
}

.row9 .icon-block p strong {
  font-weight: 700;
  margin-bottom: 0; /* ⬅️ no spacing */
  display: block;
}

/* CENTER IMAGE */
.row9 .center-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14% 0 0 0px;
}

.row9 .center-image img {
  width: 110%;
  max-height: 95vh;
  object-fit: contain;
}
.horror-icon img {
  width: 16vh /* override */;
}
.row10 {
  
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10vh 5vw;
  background: #EBFAC7; /* Same background as other light sections */
  border-radius: 75px;
  margin: 0 10px 10px 10px;
  min-height: 50vh; /* Adjust as needed */
  position: relative;
}

/* Left Block */
.footer-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 3vh;
  max-width: 50vw;
}

.footer-logo {
  width: 20vw;
}

.footer-text {
  font-size: 1.2em;
  line-height: 1.4;
  color: #000;
  margin: 0;
}

.rsbc-logo {
  width: 20vw;
}

/* Right Block */
.footer-right {
  width: 50wv;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4vh;
}

.romance-icon {
  height: 36vw;
  object-fit: contain;
  max-height: 430px;

}

.footer-rights {
  font-size: 1em;
  color: #000;
  margin: 0;
}

.store-icons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding-bottom: 5vh;
}
.mobile-only {
  display: none;
}
.desktop-only {
  display: block;
}


@media (max-width: 1400px){

  .midblock{
    width:220px;
  }
  .donation-video {
    border-radius: 30px;
  }
  .block {
    
    border-radius: 45px;
  }
  .row1, .row2, .row4, .row5, .row7, .row8, .row9, .row10 {
    border-radius: 45px;
  }
  .row1 , .row3, .row5, .row6 {
    padding: 5px 5px 0 5px;
    gap: 5px;
  } 
  .row2, .row4, .row7, .row8, .row9, .row10 {
    margin: 5px 5px 0 5px;
    gap: 5px;
  } 
  .row10 {
margin-bottom: 5px;
  }
  .row4 {
    min-height: auto;
  }

  .nav-inner{
    padding: 70px 75px;
  }
  .block-left h1{
    width: auto;
    padding-right: 0;

    
  }
  .block-right .top-text{
    font-size: clamp(1.2rem, 2vw, 4rem);
    font-weight:600;
    margin:16vh 0 5vh 8vw;
    
    line-height: 1.2
  }

  .text-block1{
    width:79%;
  }
  
  .message-block {

    width: 65vw;
    font-size: 2.6em;
    padding: 5vh;

  }

  .flower {
    
    bottom: -1vw;
    transform: rotate(-10deg);
  }
  
  .row5 .block {
    
    
    padding: 0px 0px 0px 0px ;
  }
  .row5 .ui-block{
    align-items: start;
  }
  .row5 .ui-img .ui-img{
    padding: 50px 0px 20px 40px;
    
  }
  .ui-text {
    padding:10vh 30px 0px 3.5vw;

    font-size: 1.5em;
    line-height: 1.1;
    
    align-items: start;
  }  

  .row6 .ui-img{
    padding: 0px 40px 0px 0px;
    
  }
  .appicon-text {
    width: 60%;
    position: absolute;
    bottom: 8vh;
    left: 5vw;
    color: #000;
    font-size: 1.5em;

  }
  .ui-texblock-text {
    color: #000;
    font-size: 1.5em;
    font-weight: 600;
    text-align: left;
    padding-left: 5vw;
  }
  .row7{
    padding: 50px;
  }
  .row7 .comedy {
    width: 80%;
    height: 50%;
  }
  .peterpan-caption {
    padding-right: 5vh;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.1;
    color: #000;
  }
  .row8 .message-block {
    z-index: 5;
    width: 80vw;
    line-height: 1;
    text-align: center;
    font-size: 3.5rem;
    font-weight: 700;
    padding: 0 10vw;
    color: #000;
  }
  .row9 .icon-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5vh;
   
    justify-content: flex-start;
  }
  .row9 .center-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25% 0 0 0px;
  }

}


@media (max-width: 850px) {

  .row1 {
    flex-direction: column;
    height: 180vh ;
    gap:5px;
    padding: 5px 5px 0 5px ;
    position: relative;
  }

  .row2 {
    height: auto;              /* allow natural height */
    padding: 0;                /* optional: remove extra space */
    margin: 5px;
    display: flex;
    flex-direction: column;    /* stack children vertically */
    align-items: center;
    justify-content: center;
  }

  .donation-video {
    width: auto;               /* keep natural aspect ratio */
    height: auto;              /* allow full height */
    max-width: 100%;           /* prevent overflow */
    max-height: 100vh;         /* optional: prevent overexpanding */
    object-fit: contain;       /* ensures no cropping */
  }
  .video-wrapper {
    width: 100%;
    background: none;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .row3 {
    gap:5px;
    padding: 0px 0px 0px 0px ;
    margin: 5px 5px 5px 5px;
  }

  .quote-block p {
    font-size: 3.5em;
   
    
    padding: 0px;
    padding-left: 15px;
    
  }
  .row4 {
    gap:5px;
    padding: 0px 0px 0px 0px ;
    margin: 5px 5px 5px 5px;
    border-radius: 40px;
    font-size: 0.53em;
    

  }
  .flower {
    left: 2vh;
    
    
  }
  .flower img {
    position: relative;
    width: 80px ;
    transform: rotate(0deg);
    
    
  }
  .ufo {

    right: 15px;
    top: 1vh;
  }
  .ufo img {

    position: relative;
    width: 80px;
   
   
  }

  .block {
    width: 100%;
    padding: calc(var(--mp));
    border-radius: 40px;
    align-items: start;
  }

  .block-left, .block-right {
    width: 100%;
    height: 90vh;
  }

  .text-block1, .block-right .top-text {
    width: 100%;
    margin: 0 auto;
  }

  .block-left h1{
    font-size: 5vh;
    margin-top: 85px;
    margin-bottom: 5vh;
    
    line-height:1.1;
  }

  .stores {

    
    justify-content: start;

  }
  .store-icon{
    display: flex;
    height: 10vw;
    display:flex;
  }

  .midblock {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70vw;
   
    transform: translate(-50%, -50%);
    z-index: 5;
  }

  .midblock img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .dino-placeholder {
    
    margin-top: 2vh;
  }

  .dino-placeholder img {
    width: 40vh;
    padding-right: 0;
  }

  .block-right .top-text {
    align-items: start;
    margin: 0vh 0;
    font-size: 3.5vh;
    text-align: left;
    width: 100%;
  }
  .block-right {
    
    justify-content: start;
  }
  .block-right .text-wrapper {
    
    padding-top: 30vh;
  }

  .nav-inner {

  padding: 50px 30px;

  }



  .home-btn {
    font-size: 1.2rem;
  }
.row2 .heart {
  visibility: hidden;
}
.row2 .ghost {
  visibility: hidden;
}
  .row3 {
    flex-direction: column;
    height: auto;
  }
  
  .row3 .block {
    width: 100%;
    
  }

  .message-block {

    width: 100vw;
    font-size: 4em;

  }

  .row5 {
    flex-direction: column;
    height: auto;
    gap:5px;
    padding: 0px;
    margin: 5px;
  }
  
  .row5 .block {

    padding: 0px;
  }
  .row5 .ui-block {
    align-items:center;
}
.ui-img {

  object-fit: contain;
  padding: 0;
  width: 38%;
  max-width: 70%;
  margin-top: 2vh;
  height: auto;
}
.row5 .ui-text {
  padding: 0;
  font-size: 1.5em;
  line-height: 1.1;
  align-items: center;
}

  .appicon-text {
    padding-left: 0;
    color: #000;
    font-size: 1.5em;
  }
  .ui-block {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
  }
  
  .appicon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

  
  .ui-text {
    padding-left: 0;
    font-size: 1.5em;
    line-height: 1.1;
    text-align: left;
    align-items: start;
    margin-bottom: 1vh;
    
  }  
  .row6 {
    flex-direction: column;
    height: auto;
    gap: 5px;
    padding: 0;
    margin: 5px;
  }

  .row6 .block {
    width: 100%;
   padding: 0;
  }

  .row6 .appicon-block{
width: auto;
height: auto;
    
  }
  a
  .row6 .ui-img2 {
    
   padding: 3vh 5vh 2vh 0vh;
  
  }
  .appicon-text {
    width: 70vw;
    position: absolute;
    bottom: 4vh;
    left: 4vh;
    color: #000;
    font-size: 1.5em;
   

  }
  .ui-texblock-text {
    color: #000;
    font-size: 1.5em;
    font-weight: 600;
    text-align: left;
    padding: 1vh 0 0 4vh;
    
    
  }
  .row7 {
    flex-direction: column;
    height: auto;
    padding: 0;
    margin: 5px;
  }

  .row7 .comedy {
    justify-self: end;
    top: 7vh;
    width: 20vw;
    left: 25vw;
  
  }

  .row7 .image-wrapper {
    width: 100%;
    height: auto;
    justify-content: start;
    padding: 6vh 0 0 5vh;
  }

  .peterpan-image {
    width: 50vw;
    height: auto;
  }

  .row7 .textblock {
    position: static;
    
    text-align: left;
    padding: 0 8vw 0vh 4vh;
  }

  .peterpan-caption {
    font-size: 1.5em;
    padding-right: 0;
  }
  .row8 {
    padding: 0;
    
    
    border-radius: 40px;
    font-size: 0.71em;
    
  }
  .row8 .message-block {
    z-index: 5;
    
    
    line-height: 1.1;
    text-align: left;
    
    font-weight: 700;
    padding: 8vw 4vw 8vw 0vh;
    color: #000;
  }

  .education {
    left: 0;
    visibility: hidden;
  }

  .education img {
    width: 10vh;
    transform: rotate(90deg);
  }

  .fantasy {
    
    bottom: 2vh;
    width: 90px;
    right: 3vw;
  }
  .row9 {
    flex-direction: column;
    margin: 5px;
    padding:  5vh 7vh 12vh 7vh;
    gap: 5vh;
    height: auto;
  }

  .row9 .center-image {
    display: none; /* ⛔️ hide PeterPan image on mobile */
  }

  .row9 .icon-column.left,
  .row9 .icon-column.right {
    padding: 0;
    width: 100%;
  }

  /* Merge left and right into one column */
  .row9 .icon-column {
    flex: unset;
    width: 100%;
  }

  .row9 .icon-block {
    align-items: center;
    text-align: left;
  }

  .row9 .icon-block img {
    height: 30vw; /* Smaller icons for mobile */
    margin-bottom: 1vh;
  }

  .row9 .icon-block p {
    font-size: 1em;
  }

  .row9 .horror-icon img {
    height: 20vw;
    margin-top: 2vh;
    margin-bottom: 4vh;
  }
  .row10 {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 5vh 5vw;
    margin: 0 5px 5px 5px;
    position: relative;
  }

  /* Heart floats to top-right */
  .footer-right {
    position: absolute;
    top: 5vh;
    right: 5vw;
    width: auto;
    height: auto;
  }

  .romance-icon {
    width: 40vw;
    max-width: 40vw;
  }

  /* Hide bottom copyright */
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
    
    font-size: 1em;
    color: #000;
  }

  /* Footer left full width */
  .footer-left {
    width: 100%;
    max-width: none;
    padding-right: 20vw; /* Leaves space for the heart */
    padding-top: 30vh;
  }

  .footer-logo {
    width: 50vw;
  }

  .store-icons img {
    height: 10vw;
  }

  .rsbc-logo {
    width: 140px;
  }

}