@import url('https://fonts.googleapis.com/css2?family=Coral+Pixels&family=Nabla&family=Sixtyfour+Convergence&display=swap');

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  color: #000000;
  background-color: #FFFFFF;
}







.hover:hover .hover-underline {
  text-decoration: underline;
}










.overlay-room-name-bad {
  position: relative; /* Ensures the ::before is relative to this element */
  width: 393px;
  max-width: 100%;
}

.overlay-room-name-bad::before { /* Assets: https://www.figma.com/design/LernoMV9XcCQfEY0WhWyaa/Portfolio-2024?node-id=2842-5579&t=xYWHt1xWncFmJK5A-1 */
  content: "";
  position: absolute;
  /* << >> */
  background: url('https://res.cloudinary.com/dmustl0vq/image/upload/v1731337464/room-name-bad--834x564--834-by-260-css-width-calc-ratio_3x_xhccfw.png') no-repeat center center / cover;
  /* << >> */
  height: 100%;
  width: calc((834 / 260) * 100%); /* 834/260 is the width to height ratio of this bitmap */
  /* << >> */
  left: 50%;
  transform: translateX(-50%);
  /* << >> */
  pointer-events: none; /* Allows clicking through the overlay */
  z-index: 1; /* Make sure the overlay is on top */
}

.overlay-room-name-good {
  position: relative; /* Ensures the ::before is relative to this element */
  width: 393px;
  max-width: 100%;
}

.overlay-room-name-good::before { /* Assets: https://www.figma.com/design/LernoMV9XcCQfEY0WhWyaa/Portfolio-2024?node-id=2842-5579&t=xYWHt1xWncFmJK5A-1 */
  content: "";
  position: absolute;
  /* << >> */
  background: url('https://res.cloudinary.com/dmustl0vq/image/upload/v1731337426/room-name-good--564x564--564-by-260-css-width-calc-ratio_3x_ierqmf.png') no-repeat center center / cover;
  /* << >> */
  height: 100%;
  width: calc((564 / 260) * 100%); /* 564/260 is the width to height ratio of this bitmap */
  /* << >> */
  left: 50%;
  transform: translateX(-50%);
  /* << >> */
  pointer-events: none; /* Allows clicking through the overlay */
  z-index: 1; /* Make sure the overlay is on top */
}

.w-45-pc {
  width: 45%;
}
















.afont {
  font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
}









.button-sound {
  position: absolute;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 100px;
  color: #FFFFFF;
  /* << >>  */
  /*backdrop-filter: blur(10px);*/
  /*background-color: rgba(0, 0, 0, 0.7);*/
  /* << >>  */
  position: absolute;
  top: 12px;
  right: 12px;
  width: 52px;
  height: 52px;
}

.button-sound:hover {
  /*background-color: rgb(0 0 0 / .3);*/
}

.button-sound:active {
  /* transform: scale(.92); */
  /*background-color: rgb(0 0 0 / .4);*/
}






.video .button {
  padding: 6px 10px;
  border-radius: 100px;
  color: #FFFFFF;
  /* << >>  */
  backdrop-filter: blur(10px);
  background-color: rgb(0 0 0 / .2);
  /* << >>  */
  position: absolute;
  bottom: 12px;
  transition: .2s;
}

.video:hover .button {
  background-color: rgb(0 0 0 / .25);
}

.video .button:hover {
  background-color: rgb(0 0 0 / .35);
}

.video .button:active {
  /* transform: scale(.92); */
  background-color: rgb(0 0 0 / .4);
}

.video .button._1 {
  left: 12px;
}


.material-symbols-rounded {
  font-variation-settings:
  'FILL' 1,
  'wght' 500,
  'GRAD' 0,
  'opsz' 24;
  /* << >> */
  /* border: solid 1px blue; */
  /* << Get rid of the default vertical offset >>  */
  vertical-align: middle; /* or text-bottom */
  display: block;
  color: #FFFFFF;
}

.button-sound {
  padding: 6px 10px;
  border-radius: 100px;
  color: #000000;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 60px;
  height: 44px;
}




.tv {
  background-color: #F7F7F7;
  border-radius: 6px;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
}

.tv-bold {
  border-radius: 6px;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
  position: relative;
}

/*.tv-bold::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: 0.1s;
}

.tv-bold:hover::before {
  opacity: 1;
}*/

.radius {
  border-radius: 6px;
}

.margin-h {
  max-width: calc(100vw - 160px);
}










.imageModal {
  z-index: 100;
  background-color: rgba(0, 0, 0, .3);
  display: none;
  position: fixed;
  box-sizing: border-box;
  padding: 60px 8px;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: zoom-out;
}

.imageModal img {
  position: relative;
  align-self: center;
  max-height: 100%;
  cursor: default;
}

.cover {
  object-fit: cover;
}






img.hover {
  cursor: zoom-in;
  outline: solid 5px transparent;
  transition: 250ms;
  transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

img.hover.outline {
  outline: solid 1px #E7E9EB;
}

img.hover:hover {
  outline: solid 5px rgba(81, 81, 81, .2);
}

img.hover:active {
  /* transform: scale(.98); */
}










.text-align-center {
  text-align: center;
}

.size-86 {
  height: calc(86px / 1.2);
  width: calc(86px / 1.2);
}




.mg-v {
  margin: 4% 0;
}







.iPhone-15-Pro-bezel-view-radius {
  border-radius: 16px;
}











.margin-auto {
  margin: auto;
}


.mask-iPad-Pro-11-landscape-t25-l25 {
  mask: url('data:image/svg+xml,<svg viewBox="0 0 605 417" xmlns="http://www.w3.org/2000/svg"><path d="M0 48C0 31.1984 0 22.7976 3.2698 16.3803C6.14601 10.7354 10.7354 6.14601 16.3803 3.2698C22.7976 0 31.1984 0 48 0H605V417H0V48Z" fill="white"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
}



.mask-NSWindow-940-623 {
  position: relative;
  width: 100%;
  /*width: 393px;*/
  mask: url('data:image/svg+xml,<svg width="940" height="623" viewBox="0 0 940 623" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 19.2C0 12.4794 0 9.11906 1.30792 6.55211C2.4584 4.29417 4.29417 2.4584 6.55211 1.30792C9.11906 0 12.4794 0 19.2 0H920.8C927.521 0 930.881 0 933.448 1.30792C935.706 2.4584 937.542 4.29417 938.692 6.55211C940 9.11906 940 12.4794 940 19.2V603.8C940 610.521 940 613.881 938.692 616.448C937.542 618.706 935.706 620.542 933.448 621.692C930.881 623 927.521 623 920.8 623H19.2C12.4794 623 9.11906 623 6.55211 621.692C4.29417 620.542 2.4584 618.706 1.30792 616.448C0 613.881 0 610.521 0 603.8V19.2Z" fill="%23D9D9D9"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
}

.mask-NSWindow-940-623::before {
  /* Stroke  */
  position: absolute;
  z-index: 10;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /*background: url('data:image/svg+xml,<svg width="940" height="623" viewBox="0 0 940 623" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.2002 0.75H920.8C924.172 0.75 926.657 0.750747 928.62 0.911133C930.575 1.07083 931.947 1.38545 933.107 1.97656C935.224 3.05511 936.945 4.7759 938.023 6.89258C938.615 8.0527 938.929 9.42524 939.089 11.3799C939.249 13.3432 939.25 15.8277 939.25 19.2002V603.8C939.25 607.172 939.249 609.657 939.089 611.62C938.929 613.575 938.615 614.947 938.023 616.107C936.945 618.224 935.224 619.945 933.107 621.023C931.947 621.615 930.575 621.929 928.62 622.089C926.657 622.249 924.172 622.25 920.8 622.25H19.2002C15.8277 622.25 13.3432 622.249 11.3799 622.089C9.42523 621.929 8.0527 621.615 6.89258 621.023C4.7759 619.945 3.05511 618.224 1.97656 616.107C1.38545 614.947 1.07083 613.575 0.911133 611.62C0.750746 609.657 0.75 607.172 0.75 603.8V19.2002C0.75 15.8277 0.750747 13.3432 0.911133 11.3799C1.07083 9.42524 1.38545 8.0527 1.97656 6.89258C3.05511 4.7759 4.7759 3.05511 6.89258 1.97656C8.0527 1.38545 9.42524 1.07083 11.3799 0.911133C13.3432 0.750747 15.8277 0.75 19.2002 0.75Z" fill="%23FF0000" fill-opacity="0.5" stroke="%236C6C6C" stroke-width="1.5"/></svg>');*/
  background: url('data:image/svg+xml,<svg width="940" height="623" viewBox="0 0 940 623" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.2002 0.75H920.8C924.172 0.75 926.657 0.750747 928.62 0.911133C930.575 1.07083 931.947 1.38545 933.107 1.97656C935.224 3.05511 936.945 4.7759 938.023 6.89258C938.615 8.0527 938.929 9.42524 939.089 11.3799C939.249 13.3432 939.25 15.8277 939.25 19.2002V603.8C939.25 607.172 939.249 609.657 939.089 611.62C938.929 613.575 938.615 614.947 938.023 616.107C936.945 618.224 935.224 619.945 933.107 621.023C931.947 621.615 930.575 621.929 928.62 622.089C926.657 622.249 924.172 622.25 920.8 622.25H19.2002C15.8277 622.25 13.3432 622.249 11.3799 622.089C9.42523 621.929 8.0527 621.615 6.89258 621.023C4.7759 619.945 3.05511 618.224 1.97656 616.107C1.38545 614.947 1.07083 613.575 0.911133 611.62C0.750746 609.657 0.75 607.172 0.75 603.8V19.2002C0.75 15.8277 0.750747 13.3432 0.911133 11.3799C1.07083 9.42524 1.38545 8.0527 1.97656 6.89258C3.05511 4.7759 4.7759 3.05511 6.89258 1.97656C8.0527 1.38545 9.42524 1.07083 11.3799 0.911133C13.3432 0.750747 15.8277 0.75 19.2002 0.75Z" stroke="%236C6C6C" stroke-width="1"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.shadow-NSWindow-940-623 {
  position: relative;
  width: 100%;
}

.shadow-NSWindow-940-623::after {
  position: absolute;
  z-index: -5;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('data:image/svg+xml,<svg width="940" height="623" viewBox="0 0 940 623" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 19.2C0 12.4794 0 9.11906 1.30792 6.55211C2.4584 4.29417 4.29417 2.4584 6.55211 1.30792C9.11906 0 12.4794 0 19.2 0H920.8C927.521 0 930.881 0 933.448 1.30792C935.706 2.4584 937.542 4.29417 938.692 6.55211C940 9.11906 940 12.4794 940 19.2V603.8C940 610.521 940 613.881 938.692 616.448C937.542 618.706 935.706 620.542 933.448 621.692C930.881 623 927.521 623 920.8 623H19.2C12.4794 623 9.11906 623 6.55211 621.692C4.29417 620.542 2.4584 618.706 1.30792 616.448C0 613.881 0 610.521 0 603.8V19.2Z" fill="%23000000"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translateY(28px);
  filter: blur(20px);
  opacity: 0.4;
}


















.mask-iPad-stage-manager-window-321-525 {
  position: relative;
  width: 100%;
  /*width: 393px;*/
  mask: url('data:image/svg+xml,<svg width="321" height="525" viewBox="0 0 321 525" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 33.6C0 21.8389 0 15.9583 2.28886 11.4662C4.3022 7.5148 7.5148 4.3022 11.4662 2.28886C15.9583 0 21.8389 0 33.6 0H287.4C299.161 0 305.042 0 309.534 2.28886C313.485 4.3022 316.698 7.5148 318.711 11.4662C321 15.9583 321 21.8389 321 33.6V491.4C321 503.161 321 509.042 318.711 513.534C316.698 517.485 313.485 520.698 309.534 522.711C305.042 525 299.161 525 287.4 525H33.6C21.8389 525 15.9583 525 11.4662 522.711C7.5148 520.698 4.3022 517.485 2.28886 513.534C0 509.042 0 503.161 0 491.4V33.6Z" fill="%23D9D9D9"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
}

.shadow-iPad-stage-manager-window-321-525 {
  position: relative;
  width: 100%;
}

.shadow-iPad-stage-manager-window-321-525::after {
  position: absolute;
  z-index: -5;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('data:image/svg+xml,<svg width="321" height="525" viewBox="0 0 321 525" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 33.6C0 21.8389 0 15.9583 2.28886 11.4662C4.3022 7.5148 7.5148 4.3022 11.4662 2.28886C15.9583 0 21.8389 0 33.6 0H287.4C299.161 0 305.042 0 309.534 2.28886C313.485 4.3022 316.698 7.5148 318.711 11.4662C321 15.9583 321 21.8389 321 33.6V491.4C321 503.161 321 509.042 318.711 513.534C316.698 517.485 313.485 520.698 309.534 522.711C305.042 525 299.161 525 287.4 525H33.6C21.8389 525 15.9583 525 11.4662 522.711C7.5148 520.698 4.3022 517.485 2.28886 513.534C0 509.042 0 503.161 0 491.4V33.6Z" fill="%23000000"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translateY(28px);
  filter: blur(40px);
  opacity: 0.8;
}








.mask-iPad-stage-manager-window-370-491 {
  position: relative;
  width: 100%;
  /*width: 393px;*/
  mask: url('data:image/svg+xml,<svg width="370" height="491" viewBox="0 0 370 491" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.4C0 19.759 0 14.4385 2.07088 10.3742C3.89247 6.7991 6.7991 3.89247 10.3742 2.07088C14.4385 0 19.759 0 30.4 0H339.6C350.241 0 355.562 0 359.626 2.07088C363.201 3.89247 366.108 6.7991 367.929 10.3742C370 14.4385 370 19.759 370 30.4V460.6C370 471.241 370 476.562 367.929 480.626C366.108 484.201 363.201 487.108 359.626 488.929C355.562 491 350.241 491 339.6 491H30.4C19.759 491 14.4385 491 10.3742 488.929C6.7991 487.108 3.89247 484.201 2.07088 480.626C0 476.562 0 471.241 0 460.6V30.4Z" fill="%23D9D9D9"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
}

.shadow-iPad-stage-manager-window-370-491 {
  position: relative;
  width: 100%;
}

.shadow-iPad-stage-manager-window-370-491::after {
  position: absolute;
  z-index: -5;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('data:image/svg+xml,<svg width="370" height="491" viewBox="0 0 370 491" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.4C0 19.759 0 14.4385 2.07088 10.3742C3.89247 6.7991 6.7991 3.89247 10.3742 2.07088C14.4385 0 19.759 0 30.4 0H339.6C350.241 0 355.562 0 359.626 2.07088C363.201 3.89247 366.108 6.7991 367.929 10.3742C370 14.4385 370 19.759 370 30.4V460.6C370 471.241 370 476.562 367.929 480.626C366.108 484.201 363.201 487.108 359.626 488.929C355.562 491 350.241 491 339.6 491H30.4C19.759 491 14.4385 491 10.3742 488.929C6.7991 487.108 3.89247 484.201 2.07088 480.626C0 476.562 0 471.241 0 460.6V30.4Z" fill="%23000000"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translateY(28px);
  filter: blur(60px);
  opacity: 0.6;
}













.mask-iPad-stage-manager-window-561-491 {
  position: relative;
  width: 100%;
  /*width: 393px;*/
  mask: url('data:image/svg+xml,<svg width="561" height="491" viewBox="0 0 561 491" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.4C0 19.759 0 14.4385 2.07088 10.3742C3.89247 6.7991 6.7991 3.89247 10.3742 2.07088C14.4385 0 19.759 0 30.4 0H530.6C541.241 0 546.561 0 550.626 2.07088C554.201 3.89247 557.108 6.7991 558.929 10.3742C561 14.4385 561 19.759 561 30.4V460.6C561 471.241 561 476.562 558.929 480.626C557.108 484.201 554.201 487.108 550.626 488.929C546.561 491 541.241 491 530.6 491H30.4C19.759 491 14.4385 491 10.3742 488.929C6.7991 487.108 3.89247 484.201 2.07088 480.626C0 476.562 0 471.241 0 460.6V30.4Z" fill="black"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
}

.shadow-iPad-stage-manager-window-561-491 {
  position: relative;
  width: 100%;
}

.shadow-iPad-stage-manager-window-561-491::after {
  position: absolute;
  z-index: -5;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('data:image/svg+xml,<svg width="561" height="491" viewBox="0 0 561 491" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.4C0 19.759 0 14.4385 2.07088 10.3742C3.89247 6.7991 6.7991 3.89247 10.3742 2.07088C14.4385 0 19.759 0 30.4 0H530.6C541.241 0 546.561 0 550.626 2.07088C554.201 3.89247 557.108 6.7991 558.929 10.3742C561 14.4385 561 19.759 561 30.4V460.6C561 471.241 561 476.562 558.929 480.626C557.108 484.201 554.201 487.108 550.626 488.929C546.561 491 541.241 491 530.6 491H30.4C19.759 491 14.4385 491 10.3742 488.929C6.7991 487.108 3.89247 484.201 2.07088 480.626C0 476.562 0 471.241 0 460.6V30.4Z" fill="black"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translateY(28px);
  filter: blur(60px);
  opacity: 0.6;
}


















.mask-iPad-stage-manager-window-752-491 {
  position: relative;
  width: 100%;
  /*width: 393px;*/
  mask: url('data:image/svg+xml,<svg width="752" height="491" viewBox="0 0 752 491" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.4C0 19.759 0 14.4385 2.07088 10.3742C3.89247 6.7991 6.7991 3.89247 10.3742 2.07088C14.4385 0 19.759 0 30.4 0H721.6C732.241 0 737.561 0 741.626 2.07088C745.201 3.89247 748.108 6.7991 749.929 10.3742C752 14.4385 752 19.759 752 30.4V460.6C752 471.241 752 476.562 749.929 480.626C748.108 484.201 745.201 487.108 741.626 488.929C737.561 491 732.241 491 721.6 491H30.4C19.759 491 14.4385 491 10.3742 488.929C6.7991 487.108 3.89247 484.201 2.07088 480.626C0 476.562 0 471.241 0 460.6V30.4Z" fill="black"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
}

.shadow-iPad-stage-manager-window-752-491 {
  position: relative;
  width: 100%;
}

.shadow-iPad-stage-manager-window-752-491::after {
  position: absolute;
  z-index: -5;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('data:image/svg+xml,<svg width="752" height="491" viewBox="0 0 752 491" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.4C0 19.759 0 14.4385 2.07088 10.3742C3.89247 6.7991 6.7991 3.89247 10.3742 2.07088C14.4385 0 19.759 0 30.4 0H721.6C732.241 0 737.561 0 741.626 2.07088C745.201 3.89247 748.108 6.7991 749.929 10.3742C752 14.4385 752 19.759 752 30.4V460.6C752 471.241 752 476.562 749.929 480.626C748.108 484.201 745.201 487.108 741.626 488.929C737.561 491 732.241 491 721.6 491H30.4C19.759 491 14.4385 491 10.3742 488.929C6.7991 487.108 3.89247 484.201 2.07088 480.626C0 476.562 0 471.241 0 460.6V30.4Z" fill="black"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translateY(28px);
  filter: blur(60px);
  opacity: 0.6;
}




















.icon {
  width: 14px;
  height: 14px;
}














.height-auto {
  align-items: flex-start;
}
















img {
  display: block;
}

a, a:hover, a:focus, a:active {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  /* display: inline-block; */
}

a.wrap {
  white-space: normal;
}









.ratio-2812-2108 {
  aspect-ratio: 2812 / 2108;
}

.ratio-1800-1012 {
  aspect-ratio: 3132 / 2088;
}

.ratio-1920-1080 {
  aspect-ratio: 1920 / 1080;
}

.ratio-xcd {
  aspect-ratio: 2676 / 1692;
}

.ratio-1-1 {
  aspect-ratio: 1 / 1;
}

.ratio-16-10 {
  aspect-ratio: 16 / 10;
}

.ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.ratio-600-424 {
  aspect-ratio: 600 / 424;
}

.ratio-52-63 {
  aspect-ratio: 52 / 63;
}






.overlay {
  position: relative;
  display: block;
}

.overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  cursor: pointer;
}

.w-s-normal {
  white-space: normal;
}

img, iframe {
  max-width: 100%;
}

/*button, input[type="submit"], input[type="reset"] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}*/

/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */
/* TYPOGRAPHY */
/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */

h1 {
  /*margin: 0;
  font-size: 29px;
  font-weight: 630;
  line-height: 32px;
  letter-spacing: 0.2px;*/
  margin: 0;
  /*font-size: 57px;
  line-height: 64px;*/
  font-size: 47px;
  line-height: 56px;
  font-weight: 630;
  letter-spacing: 0.2px;
}

@media screen and (max-width: 450px) {
  h1 {
    font-size: 42px;
    line-height: 44px;
  }
}

h2 {
  margin: 0 0 4px 0;
  font-size: 26.4px;
  font-weight: 500;
  line-height: 33.6px;
  letter-spacing: 0.24px;
}

h3 {
  margin: 0;
  font-size: 19.2px;
  font-weight: 500;
  line-height: 28.8px;
}

.h3 {
  margin: 0;
  font-size: 19.2px;
  font-weight: 500;
  line-height: 28.8px;
}

.text-block {
  margin: 24px;
}

.s {
  max-width: 520px;
}

.m {
  max-width: 720px; /* 720px */
}

.l {
  max-width: 720px; /* 810px */
}

.xl {
  max-width: 880px;
}

p {
  margin: 0;
  font-size: 15.6px;
  font-weight: 350;
  line-height: 24px;
}

p b {
  font-weight: 550;
}

p span {
  color: #473c00;
  font-weight: 550;
  position: relative;
}

p span::before {
  content: "";
  z-index: -1;
  position: absolute;
  background-color: rgb(254 255 16);
  width: 100%;
  height: 20px;
  top: calc(50% - 10px);
  border-radius: 2px;
}

.red {
  color: #bc0000;
}

p span.red {
  color: #710000;
}
p span.red::before {
  background-color: rgb(255 0 0 / 25%);
}

p a img {
  height: 20px;
  float: left;
  margin-right: 6px;
}

.hyperlink {
  padding: 4px 8px 4px 4px;
  border-radius: 4px;
}

/*.quote {
  position: relative;
  font-family: "Metal", serif;
  font-size: 22px;
  line-height: 26px;
  text-align: center;
}*/

.cite {
  position: relative;
  font-family: "Metal", serif;
  font-size: 44px;
  line-height: 44px;
  text-align: center;
}

/* .quote::before {
  content: "";
  position: absolute;
  background: url('https://res.cloudinary.com/dmustl0vq/image/upload/v1732639063/quote_scribble_alnsrt.svg') no-repeat center center / cover;
  height: 24px;
  width: 24px;
  left: calc(100% - 12px);
  bottom: calc(100% - 16px);
  pointer-events: none;
  z-index: 0;
} */

p a {
  /*color: #1C73E8;*/
  text-decoration: underline; 
}

p a:hover {
  text-decoration: underline;
}

/* p a::selection {
  background-color: rgba(44, 41, 56, .06);
} */

p a:hover {
  /*color: #1C73E8;*/
}

.text-graphite a:hover, .text-graphite a:focus {
  color: #656D76;
}

p.oval {
  background-color: #000000;
  color: #FFFFFF;
  height: auto;
  align-self: flex-start;
  height: 24px;
  line-height: 24px;
  width: 24px;
  flex: none;
  text-align: center;
  border-radius: 100px;
}

p a:focus {
  color: #1C73E8;
}

h2 a {
  color: #1C73E8;
  /* text-decoration: underline; */
}

h2 a:hover {
  text-decoration: underline;
}

h2 a::selection {
  background-color: rgba(44, 41, 56, .06);
}

h2 a:hover {
  color: #1C73E8;
}

h2 a:focus {
  color: #1C73E8;
}

.italic {
  font-style: italic;
}

.caption {
  font-size: 14.4px;
  line-height: 20.4px;
}

.caption.red {
  color: #960000;
}

.caption.green {
  color: #004d1b;
}

.green {
  color: #008e32;
}

.text-graphite {
  color: #656D76;
}

.medium {
  font-weight: 500;
}

.semibold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.underline {
  text-decoration: underline;
}

.math {
  font-size: 14px;
}

@media screen and (max-width: 400px) {
  .math {
    font-size: 10px;
  }
}



















































.button-test {
  padding: 8px 12px;
  border-radius: 8px;
  color: #000000;
  /* << >>  */
  backdrop-filter: blur(10px);
  background-color: rgb(255 255 255 / 1);
  /* << >>  */
  position: absolute;
  transition: .2s;
  bottom: 24px;
  right: 24px;
  font-weight: 500;
}

.button-test:hover {
  background-color: rgb(255 255 255 / .9);
}

.button-test:active {
  /* transform: scale(.92); */
  background-color: rgb(255 255 255 / 0.8);
}



























/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */
/* LAYOUT */
/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  top: 60px;
  position: fixed;
}

.flex {
  display: flex;
  margin-left: auto; margin-right: auto;
  /* align-items: flex-start; */
}

.stretch {
  align-items: stretch;
  margin: 0;
}

.v {
  flex-direction: column;
}

.h {
  flex-direction: row;
}

.h-600-v {
  flex-direction: row;
}

@media screen and (max-width: 600px) {
  .h-600-v {
    flex-direction: column;
  }
}

.h-600 {
  flex-direction: row;
}

.sticky {
  position: sticky;
  top: 24px;
}

@media screen and (max-width: 800px) {
  .h-600 {
    flex-direction: column;
  }

  .sticky {
    position: inherit;
    top: inherit;
  }
}

.align-self-start {
  align-self: start;
}

.align-self-end {
  align-self: end;
}

.full-width {
  width: 100%;
}

.fill-dimensions {
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.space-between {
  justify-content: space-between;
}

.right {
  align-items: flex-end;
}

.left {
  align-items: flex-start;
  text-align: left;
}

.center {
  align-items: center;
  justify-content: center;
}

.start {
  align-self: start;
  padding-top: 5%;
}

.end {
  align-self: end;
}

.bottom {
  align-items: flex-end;
  justify-content: flex-end;
}

.middle {
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
}

.max-width-810 {
  max-width: 1440px; /* 972  */
}

.w-iPad-Pro-11 {
  max-width: Calc(1210px / 1.2);
}

.temp {
  width: 440px;
}

.min-width-0 {
  min-width: 0;
}

.transform-origin-bottom-left {
  transform-origin: bottom left;
}

.transform-origin-bottom-right {
  transform-origin: bottom right;
}

.transform-scale-80-pct {
  transform: scale(.9);
}

.space-of-xl {
  min-width: calc((100vw - 16px * 2 - 1000px) / 2);
}

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.image-grid img {
  aspect-ratio: 4 / 3;
  width: 900px;
  max-width: 70vw;
  object-fit: cover;
}

.image-grid-alt {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.image-grid-alt img {
  /* aspect-ratio: 1 / 1; */
  width: 600px;
  max-width: 70vw;
  object-fit: cover;
}

.image-grid-alt-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.image-grid-alt-2 img {
  object-fit: cover;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-x-scroll::-webkit-scrollbar {
  display: none;
}

.left-0 {
  left: 0;
}

.top-0 {
  top: 0;
}

/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */
/* Hosting Videos */
/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */

/* General */

.wrapper-video {
  position: relative;
  width: 100%;
}

.wrapper-video iframe {
  position: absolute;
  /* << >> */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* << >> */
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  border: 0;
}

/* Devices */

/* iPhone 15 Pro */

.ratio-iPhone-15-Pro {
  padding-top: 216.7938931298%;
}

.ratio-iPhone-15-Pro-landscape {
  padding-top: 46.1267605634%;
}

.ratio-iPhone-15-Pro-Max {
  padding-top: 216.74418605%;
}

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */

.shadow-overlay-iPhone-15-Pro-portrait {
  position: relative; /* Ensures the ::before is relative to this element */
  width: 393px;
  max-width: 100%;
}

.shadow-overlay-iPhone-15-Pro-portrait::before {
  content: "";
  position: absolute;
  /* << >> */
  background: url('https://res.cloudinary.com/dmustl0vq/image/upload/v1730295033/shadow-iPhone-15-Pro-portrait--width_4x-height_2x_y84g2b.png') no-repeat center center / cover;
  /* << >> */
  height: 100%;
  width: 200%; /* More or less this value works  */
  /* << >> */
  left: 50%;
  transform: translateX(-50%) scale(2);
  /* << >> */
  pointer-events: none; /* Allows clicking through the overlay */
  z-index: 0; /* Make sure the overlay is on top */
  /* << >> */
  opacity: .6;
}

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */

.shadow-overlay-iPhone-15-Pro-Max-portrait {
  position: relative; /* Ensures the ::before is relative to this element */
  width: 430px;
  max-width: 100%;
}

.shadow-overlay-iPhone-15-Pro-Max-portrait::before {
  content: "";
  position: absolute;
  /* << >> */
  background: url('shadow-iPhone-15-Pro-portrait--width@4x-height@2x.png') no-repeat center center / cover;
  /* << >> */
  height: 100%;
  width: 200%; /* More or less this value works  */
  /* << >> */
  left: 50%;
  transform: translateX(-50%) scale(2);
  /* << >> */
  pointer-events: none; /* Allows clicking through the overlay */
  z-index: 0; /* Make sure the overlay is on top */
}

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */

.bezel-iPhone-15-Pro-white {
  position: relative;
  width: 393px;
  max-width: 91%;
  margin: 3.8% 4.5%;
}

.bezel-iPhone-15-Pro-white::before {
  content: "";
  position: absolute;
  background: url('Resource/iPhone 15 Pro - White Titanium - Portrait.png') no-repeat center center / cover;
  width: 100%;
  height: 100%;
  transform: scale(1.0928);
  pointer-events: none;
  z-index: 1;
}







.bezel-iPhone-15-Pro-white-top50 {
  position: relative;
  width: 393px;
  max-width: 91%;
  margin: 3.8% 4.5% 0 4.5%;
}

.bezel-iPhone-15-Pro-white-top50::before {
  content: "";
  position: absolute;
  background: url('Resource/bezel-iPhone-15-Pro-white-top50.png') no-repeat center center / cover;
  width: 100%;
  height: 100%;
  transform: scale(1.0928);
  transform-origin: bottom;
  pointer-events: none;
  z-index: 1;
}

.width-x {
  width: 52%;
}

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */

.bezel-iPad-Pro-11-silver-landscape {
  position: relative;
  margin: 3.6%;
}

.bezel-iPad-Pro-11-silver-landscape::before {
  content: "";
  position: absolute;
  background: url('Resource/test.png') no-repeat center center / cover;
  width: 100%;
  height: 100%;
  transform: scale(1.1125);
  pointer-events: none;
  z-index: 1;
}

.mask-iPad-Pro-11-silver-landscape {
  max-width: 100%;
  width: 1210px;
  mask-image: url('data:image/svg+xml;utf8,<svg width="1210" height="834" viewBox="0 0 1210 834" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 28C0 12.536 12.536 0 28 0H1182C1197.46 0 1210 12.536 1210 28V806C1210 821.464 1197.46 834 1182 834H28C12.536 834 0 821.464 0 806V28Z" fill="%23D9D9D9"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.ratio-iPad-Pro-11-landscape {
  aspect-ratio: 1210 / 834;
}

.ratio-3x2 {
  aspect-ratio: 3 / 2;
}

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */





.bezel-iPad-Pro-11-silver-landscape-t25-l25-alt {
  margin: 12% 0 0 24%;
  position: relative;
}

.bezel-iPad-Pro-11-silver-landscape-t25-l25-alt.edge-to-edge {
  margin: 7.3% 0 0 7.3%;
}

.bezel-iPad-Pro-11-silver-landscape-t25-l25-alt::before {
  content: "";
  position: absolute;
  background: url('Resource/iPad_Pro_11_-_M4_-_Silver_-_Landscape-t25-l25-alt.png') no-repeat center center / cover;
  width: 100%;
  height: 100%;
  transform: scale(1.2540);
  pointer-events: none;
  z-index: 1;
}













.w-iPad-Pro-11-t25-l25 {
  /*max-width: 806px;*/
  /* padding: 59px 0 0 59px; DECIDED NOT TO USE PADDING HERE BECAUSE FIXED VALUES (PX) BREAK WHEN YOU TRY RESIZING THE WINDOW AND PERCENTAGE BASED VALUES ARE RELATIVE TO BODY HENCE DON'T WORK. INSTEAD I AM USING PERCENTAGE BASED MARGIN ON ITS CHILD */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.bezel-iPad-Pro-11-silver-landscape-t25-l25 {
  margin: 12% 0 0 24%;
  position: relative;
}

.bezel-iPad-Pro-11-silver-landscape-t25-l25.edge-to-edge {
  margin: 7.3% 0 0 7.3%;
}

.bezel-iPad-Pro-11-silver-landscape-t25-l25::before {
  content: "";
  position: absolute;
  background: url('https://res.cloudinary.com/dmustl0vq/image/upload/v1752023766/iPad_Pro_11_-_M4_-_Silver_-_Landscape-t25-l25_qzrmho.png') no-repeat center center / cover;
  width: 100%;
  height: 100%;
  transform: scale(1.2540);
  pointer-events: none;
  z-index: 1;
}

.mask-iPad-Pro-11-silver-landscape-t25-l25 {
  max-width: 100%;
  width: 1210px;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 605 417\'><path d=\'M0 28C0 12.536 12.536 0 28 0H605V417H0V28Z\' fill=\'black\'/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
}

.ratio-iPad-Pro-11-landscape-t25-l25 {
  aspect-ratio: 1210 / 834;
}












.bezel-393-554 {
  position: relative;
  width: calc(393 / 1078 * 100%);
}

.bezel-393-554::before {
  content: "";
  position: absolute;
  background: url('https://res.cloudinary.com/dmustl0vq/image/upload/v1750371320/bezel-393-554_nypbpl.png') no-repeat center center / cover; /* Resource/bezel-393-554.png */
  width: 100%;
  aspect-ratio: 425 / 570;
  transform: scale(calc(425 / 393 - 0.001)); /* Coprrected by 0.001 to avoid ocasional gaps near the edges */
  transform-origin: top;
  top: calc((1 - (570 / 554) + 0.001) * 100%); /* Coprrected by 0.001 to avoid ocasional gaps near the edges */
  /*transform: scale(1.028);*/
  pointer-events: none;
  z-index: 1;
}

.mask-393-554-55 {
  max-width: 100%;
  mask-image: url('data:image/svg+xml,<svg width="393" height="554" viewBox="0 0 393 554" xmlns="http://www.w3.org/2000/svg" style="width: 393px; height: 554px;"><path d="M0 88C0 57.1971 0 41.7957 5.99464 30.0305C11.2677 19.6816 19.6816 11.2677 30.0305 5.99464C41.7957 0 57.1971 0 88 0H305C335.803 0 351.204 0 362.969 5.99464C373.318 11.2677 381.732 19.6816 387.005 30.0305C393 41.7957 393 57.1971 393 88V554H0V88Z" style="fill: %23D9D9D9;" /></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
}

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */

.bezel-iPhone-15-Pro-black {
  position: relative; /* Ensures the ::before is relative to this element */
  width: 393px;
  max-width: 100%;
}

.bezel-iPhone-15-Pro-black::before {
  content: "";
  position: absolute;
  /* << >> */
  background: url('https://res.cloudinary.com/dmustl0vq/image/upload/fl_preserve_transparency/v1730293155/iPhone_15_Pro_-_Black_Titanium_-_Portrait_dxjlg0.jpg?_s=public-apps') no-repeat center center / cover;
  /* << >> */
  width: 100%;
  height: 100%;
  transform: scale(1.0928);
  /* << >> */
  pointer-events: none; /* Allows clicking through the overlay */
  z-index: 1; /* Make sure the overlay is on top */
}

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */

/* .bezel-iPhone-15-Pro-Max-black {
  position: relative;
  width: 430px;
  max-width: 100%;
}

.bezel-iPhone-15-Pro-Max-black::before {
  content: "";
  position: absolute;
  background: url('iPhone 15 Pro Max - Black Titanium - Portrait.png') no-repeat center center / cover;
  width: 100%;
  height: 100%;
  transform: scale(1.0859);
  pointer-events: none;
  z-index: 1;
} */

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */

.bezel-iPhone-15-Pro-xray {
  position: relative; /* Ensures the ::before is relative to this element */
  width: 393px;
  max-width: 100%;
}

.bezel-iPhone-15-Pro-xray::before {
  content: "";
  position: absolute;
  /* << >> */
  background: url('https://previews.dropbox.com/p/thumb/ACfXfn3fsANmjuPCrwUWcxQe6RBwvu3lNen7nXev8ps2C1aCcIL8TtySvy1uSqITMPBZBGQBX3Cz6WbycgotKGe7Jq7lyzbMcVcbSu-ykhWxnIgthFE0HkJB0wVAJ6iLoYwJxXrqoOqCNPzTH2Nh6rfHnW3UFvZ8j02-KFCXftL8woiudfMtqOtAIiu51fBmB2cBOdObhEPZaAIWAmWQFw-NyOAKN_TwZCvlbDZ0wBh6veTPkIbrBKbCUHh7qIrSnRiWd_LI5n0V2I9CSQdJICRQblT7Cd0racHb-qTP6uybWQb2o9ePi_Zs1jboN8HUkoJgkktKUDVr5WOtUnhJ0O14/p.png?is_prewarmed=true') no-repeat center center / cover;
  /* << >> */
  width: 100%;
  height: 100%;
  transform: scale(1.0928);
  /* << >> */
  pointer-events: none; /* Allows clicking through the overlay */
  z-index: 1; /* Make sure the overlay is on top */
}

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */

/* .bezel-iPhone-15-Pro-xray-black {
  position: relative;
  width: 393px;
  max-width: 100%;
}

.bezel-iPhone-15-Pro-xray-black::before {
  content: "";
  position: absolute;
  background: url('iPhone 15 Pro - X-ray - Black - Titanium - Portrait.png') no-repeat center center / cover;
  width: 100%;
  height: 100%;
  transform: scale(1.0928);
  pointer-events: none;
  z-index: 1;
} */

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */

/* .bezel-iPhone-15-Pro-white-landscape {
  position: relative;
  width: 852px;
  max-width: 100%;
}

.bezel-iPhone-15-Pro-white-landscape::before {
  content: "";
  position: absolute;
  background: url('iPhone 15 Pro - White Titanium - Landscape.png') no-repeat center center / cover;
  width: 100%;
  height: 100%;
  transform: scale(1.0928);
  pointer-events: none;
  z-index: 1;
} */

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */

.mask-iPhone-15-Pro {
  max-width: 100%;
  width: 393px;
  mask-image: url('data:image/svg+xml;utf8,<svg width="393" height="852" viewBox="0 0 393 852" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 55C0 24.6243 24.6243 0 55 0H338C368.376 0 393 24.6243 393 55V797C393 827.376 368.376 852 338 852H55C24.6243 852 0 827.376 0 797V55Z" fill="%23D9D9D9"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.mask-iPhone-15-Pro-top50 {
  width: 100%;
  mask-image: url('data:image/svg+xml,<svg width="393" height="426" viewBox="0 0 393 426" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 89.6C0 58.2371 0 42.5556 6.10364 30.5765C11.4725 20.0395 20.0395 11.4725 30.5765 6.10364C42.5556 0 58.2371 0 89.6 0H303.4C334.763 0 350.444 0 362.423 6.10364C372.961 11.4725 381.527 20.0395 386.896 30.5765C393 42.5556 393 58.2371 393 89.6V426H0V89.6Z" fill="%23D9D9D9" fill-opacity="1"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
}

/* .mask-iPhone-15-Pro-landscape {
  max-width: 100%;
  width: 852px;
  mask-image: url('data:image/svg+xml,<svg width="852" height="393" viewBox="0 0 852 393" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 55C0 24.6243 24.6243 0 55 0H797C827.376 0 852 24.6243 852 55V338C852 368.376 827.376 393 797 393H55C24.6243 393 0 368.376 0 338V55Z" fill="%23D9D9D9"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.mask-iPhone-15-Pro-continuous {
  max-width: 100%;
  width: 393px;
  mask-image: url('data:image/svg+xml;utf8,<svg width="393" height="852" viewBox="0 0 393 852" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 88C0 57.1971 0 41.7957 5.99464 30.0305C11.2677 19.6816 19.6816 11.2677 30.0305 5.99464C41.7957 0 57.1971 0 88 0H305C335.803 0 351.204 0 362.969 5.99464C373.318 11.2677 381.732 19.6816 387.005 30.0305C393 41.7957 393 57.1971 393 88V764C393 794.803 393 810.204 387.005 821.969C381.732 832.318 373.318 840.732 362.969 846.005C351.204 852 335.803 852 305 852H88C57.1971 852 41.7957 852 30.0305 846.005C19.6816 840.732 11.2677 832.318 5.99464 821.969C0 810.204 0 794.803 0 764V88Z" fill="%23D9D9D9"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.mask-iPhone-15-Pro-continuous-landscape {
  max-width: 100%;
  width: 852px;
  padding-bottom: calc(852px / 393px * 1%);
  mask-image: url('data:image/svg+xml,<svg width="852" height="393" viewBox="0 0 852 393" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 88C0 57.1971 0 41.7957 5.99464 30.0305C11.2677 19.6816 19.6816 11.2677 30.0305 5.99464C41.7957 0 57.1971 0 88 0H764C794.803 0 810.204 0 821.969 5.99464C832.318 11.2677 840.732 19.6816 846.005 30.0305C852 41.7957 852 57.1971 852 88V305C852 335.803 852 351.204 846.005 362.969C840.732 373.318 832.318 381.732 821.969 387.005C810.204 393 794.803 393 764 393H88C57.1971 393 41.7957 393 30.0305 387.005C19.6816 381.732 11.2677 373.318 5.99464 362.969C0 351.204 0 335.803 0 305V88Z" fill="%23D9D9D9"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.mask-iPhone-15-Pro-Max {
  max-width: 100%;
  width: 430px;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430 932"><path d="M0 88C0 57.1971 0 41.7957 5.99464 30.0305C11.2677 19.6816 19.6816 11.2677 30.0305 5.99464C41.7957 0 57.1971 0 88 0H342C372.803 0 388.204 0 399.969 5.99464C410.318 11.2677 418.732 19.6816 424.005 30.0305C430 41.7957 430 57.1971 430 88V844C430 874.803 430 890.204 424.005 901.969C418.732 912.318 410.318 920.732 399.969 926.005C388.204 932 372.803 932 342 932H88C57.1971 932 41.7957 932 30.0305 926.005C19.6816 920.732 11.2677 912.318 5.99464 901.969C0 890.204 0 874.803 0 844V88Z" fill="%23D9D9D9"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
} */

/* <<< >>> */
/* <<< >>> */
/* <<< >>> */

.w-45-pc {
  width: 45%;
}

.w-7-pc {
  width: 7%;
  min-width: 26px;
}

.w-ip15p {
  width: 100%;
  max-width: 300px; 
}

.w-iPhone-15-Pro-bezel-1-1 {
  width: 100%;
  max-width: calc(430px / 1.2);
}

.w-smartphone-l {
  width: 28%;
  max-width: 100%;
}

.w-smartphone-xl {
  width: 40%;
  max-width: 100%;
}

.w-smartphone-xl-alt {
  width: 34%; /* 320px */
  max-width: 80%;
  min-width: 0;
}

.w-smartphone-xl-alt-2 {
  width: 34%; /* 320px */
  max-width: 80%;
  min-width: 0;
}

.w-smartphone-xl-alt-3 {
  width: 30%;
  min-width: 0;
}

.w-smartphone-xl-alt-100 {
  width: 28%;
  min-width: 0;
}

.w-smartphone-xl-alt-4 {
  max-width: 80%;
}

.w-smartphone-xxl-alt {
  width: 50%;
}

.w-smartphone-xl-alt-alt {
  width: 360px;
  max-width: 80%;
  min-width: 0;
}

.max-width-100-pc-minus-140 {
  max-width: calc(100% - 140px);
}

@media screen and (max-width: 700px) {
  .max-700-max-width-60-pc {
    max-width: 60%;
  }
}

/* Backgrounds */

.bg {
  background-color: #e5f1f5; /* 68DE00  */
}

.lavender {
  background-color: lavender;
}

.gainsboro {
  background-color: gainsboro;
}

.bg-blue {
  background-color: #00adef;
}

.blueprint {
  background-color: #12569a; /* rgba(9, 129, 213, 1.0)  */
}

.bg-apple {
  background-color: #f6f6f6; /* e7e9eba1  */ 
}

.wood {
  background: url('https://images.pexels.com/photos/301717/pexels-photo-301717.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center / cover;
}

.stickers {
  background: url('Resource/blgrd.png') no-repeat center center / cover;
}

.cosmic-cave {
  background: url('https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80&w=3132&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center / cover;
}

.ipados {
  background: url('https://res.cloudinary.com/dmustl0vq/image/upload/v1752023194/ipados_h2bqyw.jpg') no-repeat center center / cover;
}

.ipados2 {
  background: url('https://res.cloudinary.com/dmustl0vq/image/upload/v1752023195/ipados2_udbooq.jpg') no-repeat center center / cover;
}

.ipados3 {
  background: url('https://res.cloudinary.com/dmustl0vq/image/upload/v1752023193/ipados3_bqp9sw.jpg') no-repeat center center / cover;
}

.lava {
  background: url('https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=2731&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center / cover;
}

.tv-display {
  background: url('https://images.unsplash.com/photo-1736095183381-29009d49a67e?q=80&w=3132&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center / cover;
}

.cosmic-wall {
  background: url('https://images.unsplash.com/photo-1672009190560-12e7bade8d09?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center / cover;
}

.marble {
  background: url('https://images.unsplash.com/photo-1566041510394-cf7c8fe21800?q=80&w=3174&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center / cover;
}

.alien {
  background: url('https://images.unsplash.com/photo-1684503830693-117be55da983?q=80&w=3202&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center / cover;
}

.bgs-1 {
  background: url('https://images.unsplash.com/photo-1645747103867-0669a7eff310?q=80&w=3221&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center / cover;
}

.bgs-2 {
  background: url('https://images.unsplash.com/photo-1659570040966-3a66645464eb?q=80&w=3221&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center / cover;
}

.surface-aip-1 {
  background: url('aip-1.jpeg') no-repeat center center / cover;
}

.bg-white {
  background-color: #FFFFFF;
}

.bg-black {
  background-color: black;
}

.bg-gray {
  background-color: #F1F1F1; /* F8F6F3  */
}

.bg-craft-0 {
  background-color: #bbbade;
}

.fifty-shades-of-gray {
  background-color: #F2F2F4;
}

.mint {
  background-color: #80cf84;
}

.navy {
  background-color: #455c7b;
}

.pink {
  background-color: #e27feb;
}

.bg-outline {
  background-color: #E7E9EB;
}

.svg-color-white {
  fill: #FFFFFF;
}

.svg-color-red {
  fill: #C40000;
}

.svg-color-green {
  fill: #09AF00;
}

.svg-color-gray {
  fill: #ADB7C1;
}

/* Ratio */


.ratio-a {
  aspect-ratio: 2/1;
}

.ratio-16-9 {
  /* padding-top: calc(9 / 16 * 100%); */
  aspect-ratio: 16 / 9;
}

.ratio-272-160 {
  aspect-ratio: 256 / 160;
}

.ratio-7-5 {
  aspect-ratio: 7 / 5;
}

.ratio-7-5-alt {
  aspect-ratio: 2 / 3;
}

.w-smartphone-xl-alt-1000 {
  width: 70%;
}

.ratio-9-1 {
  aspect-ratio: 9 / 1.2;
}

.ratio-6-5 {
  aspect-ratio: 6 / 5;
}

.min-height-0 {
  min-height: 0;
}

.ratio-25-40 {
  padding-top: 160%;
}

.ratio-5-3 {
  padding-top: 60%;
}

/* Other */

.outline {
  outline: solid 1px #E7E9EB;
}

.outline-bold {
  outline: solid 3px deepskyblue;
  border-radius: 2px;
}

.outline-bold-light {
  outline: solid 3px rgba(0, 191, 255, .4);
  border-radius: 2px;
}

.stroke {
  position: relative;
}

.stroke::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  height: calc(100% + 1px);
  left: -1px;
  width: calc(100% + 1px);
  border: solid 1px #E7E9EB;
}

.outline-light-blue {
  outline: solid 1px rgba(157, 186, 249, .3);
}

.outline-black {
  outline: solid 1px #000000;
}

.outline-work {
  outline: dashed 4px #ff9300;
}

.outline-work-2 {
  outline: solid 4px yellow;
}

.outline-v {
  border: solid 1px #E7E9EB;
  border-width: 1px 0;
}

.outline-green {
  
  outline-offset: 4px;
  border-radius: 10px;
}

.outline-red {
  
  outline-offset: 4px;
  border-radius: 10px;
}

.border {
  border: solid 1px #E7E9EB;
}

.tp-0 {
  top: 0;
}

.fold {
  background: rgb(255,255,255);
  background: -moz-linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.09989933473389356) 100%);
  background: -webkit-linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.09989933473389356) 100%);
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.09989933473389356) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
  opacity: 0.75;
}

.transition-1 {
  transition: 0.5s;
}

.hidden {
  opacity: 0;
}

.hide {
  display: none;
}

.divider {
  width: 100%;
  height: 0.5px;
  background-color: rgba(100, 109, 118, .2);
  /* border-top: dashed 1.5px rgba(100, 109, 118, .2); */
}

.divider-black {
  width: 100%;
  height: 1px;
  background-color: #000000;
}

/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */
/* Radius */
/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */

/* Fixed */

/* Dynamic */

/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */
/* Logo */
/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */

.logo {
  position: fixed;
  top: 16px;
  left: 16px;
  font-weight: 540;
  z-index: 20;
/*  background-color: #FFFFFF;*/
/*  padding: 8px 12px;*/
/*  border-radius: 40px;*/
/*  border: solid 1px #ddd;*/
width: 234px;
}

.mask-blossom {
  /*position: fixed;
  top: 12px;
  left: calc(50% - 20px);*/
  width: 80px;
  height: 80px;
  /* mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20x%3D%2252%22%20width%3D%2256%22%20height%3D%22160%22%20rx%3D%2228%22%20fill%3D%22%23D9D9D9%22/%3E%3Crect%20x%3D%22160%22%20y%3D%2252%22%20width%3D%2256%22%20height%3D%22160%22%20rx%3D%2228%22%20transform%3D%22rotate(90%20160%2052)%22%20fill%3D%22%23D9D9D9%22/%3E%3Crect%20x%3D%22116.773%22%20y%3D%223.625%22%20width%3D%2256%22%20height%3D%22160%22%20rx%3D%2228%22%20transform%3D%22rotate(45%20116.773%203.625)%22%20fill%3D%22%23D9D9D9%22/%3E%3Crect%20x%3D%223.63281%22%20y%3D%2243.2266%22%20width%3D%2256%22%20height%3D%22160%22%20rx%3D%2228%22%20transform%3D%22rotate(-45%203.63281%2043.2266)%22%20fill%3D%22%23D9D9D9%22/%3E%3C/svg%3E'); */
  mask-image: url('data:image/svg+xml,<svg width="200" height="200" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 4C6 1.79086 7.79086 0 10 0C12.2091 0 14 1.79086 14 4V16C14 18.2091 12.2091 20 10 20C7.79086 20 6 18.2091 6 16V4Z" fill="%23D9D9D9"/><path d="M2.80385 10.4641C0.890677 9.35953 0.235177 6.91317 1.33975 5C2.44432 3.08683 4.89068 2.43133 6.80385 3.5359L17.1962 9.5359C19.1093 10.6405 19.7648 13.0868 18.6603 15C17.5557 16.9132 15.1093 17.5687 13.1962 16.4641L2.80385 10.4641Z" fill="%23D9D9D9"/><path d="M6.80004 16.4679C4.88687 17.5725 2.44051 16.917 1.33594 15.0038C0.231368 13.0906 0.886869 10.6443 2.80004 9.53971L13.1923 3.53971C15.1055 2.43514 17.5519 3.09064 18.6564 5.00381C19.761 6.91698 19.1055 9.36334 17.1923 10.4679L6.80004 16.4679Z" fill="%23D9D9D9"/><path d="M0.01 10C0.01 10.0028 0.00776142 10.005 0.005 10.005C0.00223858 10.005 0 10.0028 0 10C0 9.99724 0.00223858 9.995 0.005 9.995C0.00776142 9.995 0.01 9.99724 0.01 10Z" fill="%23D9D9D9"/><path d="M20 10C20 10.0028 19.9978 10.005 19.995 10.005C19.9922 10.005 19.99 10.0028 19.99 10C19.99 9.99724 19.9922 9.995 19.995 9.995C19.9978 9.995 20 9.99724 20 10Z" fill="%23D9D9D9"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  /* << >> */
   background-color: red; 
  /* << >> */
  animation: rotate 10s linear infinite;
  /* << >> */
  z-index: 10;
  /* << >> */
  cursor: pointer;
  /* << >> */
  position: fixed;
  top: 12px;
  left: 12px;
}

/* .mask-blossom:hover {
  top: 15px;
  left: 15px;
  width: 110px;
  height: 110px;
  animation-duration: 5s;
} */

.mask-blossom img {
  position: absolute;
  animation: rotate 10s linear infinite;
  animation-direction: reverse;
}

/* .mask-blossom:hover img {
  animation-duration: 5s;
} */

@media (prefers-reduced-motion) {

  .mask-blossom, .mask-blossom img { 
    animation: none;
  }

}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 850px) {

  .mask-blossom {
    width: 60px;
    height: 60px;
  }

  .mask-blossom:hover {
    width: 60px;
    height: 60px;
  }

}

/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */
/* Deprecated */
/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */

/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */
/* Debugging Tools */
/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */

.deb {
  outline: thick double #32a1ce;
}

.deb-1 {
  outline: thick double #07b545;
}

.deb-2 {
  outline: solid 1px blue;
}

/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */
/* Presets */
/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */

.content {
  padding: 64px 20px;
}

.pd-h-16 {
  padding-left: 16px;
  padding-right: 16px;
}

.border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}





.padding-64-16 {
  padding: 64px 16px;
}

.padding-0-16 {
  padding: 0 16px;
}

.padding {
  padding: 40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.padding-m {
  padding: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.padding-s {
  padding: 16px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.padding-xs {
  padding: 4px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.padding-v-24-40 {
  padding: 24px 0 40px 0;
}

.padding-128 {
  padding: 128px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.padding-250 {
  padding: 250px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.padding-v {
  padding: 40px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.padding-100-0 {
  padding: 60px 0;
  padding-bottom: 36px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.padding-60-20-shift-at-600 {
  padding: 60px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 600px) {
  .padding-60-20-shift-at-600 {
    padding: 20px;
  }
}

.padding-top-80-20-shift-at-600 {
  padding-top: 80px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 600px) {
  .padding-top-80-20-shift-at-600 {
    padding-top: 20px;
  }
}

/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */
/* Gap */
/* ### ### ### ### ### ### ### */
/* ### ### ### ### ### ### ### */

.gap-120 {
  gap: 120px;
}

.gap-80 {
  gap: 80px;
}

.gap-64 {
  gap: 64px;
}

.gap-48 {
  gap: 48px;
}

.gap-40 {
  gap: 40px;
}

.gap-32 {
  gap: 32px;
}

.gap-24 {
  gap: 24px;
}

.gap-16 {
  gap: 16px;
}

.gap-s {
  gap: 16px;
}

.gap-12 {
  gap: 12px;
}

.gap-8 {
  gap: 8px;
}

.gap-4 {
  gap: 4px;
}

.gap-2 {
  gap: 2px;
}

.gap-1 {
  gap: 1px;
}

.gap-0 {
  gap: 0;
}

/*    /)  /)   ┏━━━━━━━━━━━━━━━━━┓
/*   ( •-• )   ♡ you are amazing ♡
/*   / づづ     ┗━━━━━━━━━━━━━━━━━┛
