.icon img{width:100%}
.diamond-container {
      position: relative;
      width: 50px;
      height: 50px;
	  margin: 0 auto;
	  top: -40px
    }

.icon{ width: 100%;
      height: 100%;
}


.sparkSeminar1{
	top: 10%;
    left: 43%;
    position: absolute;
    width: 7px;
    height: 7px;
	background-color: var(--blue);
	opacity: 0;
    transform: scale(0);
    animation: sparkle3 3s infinite ease-in-out;
}

.sparkSeminar2{
	top: 10%;
    left: 63%;
    position: absolute;
    width: 13px;
    height: 7px;
	background-color: var(--blue);
	opacity: 0;
    transform: scale(0);
    animation: sparkle3 4s infinite ease-in-out;
}
.sparkSeminar3{
	top: 39%;
    left: 53%;
    position: absolute;
    width: 18px;
    height: 2px;
	background-color: var(--blue);
	transform: scale(0);
    animation: sparkle3 5s infinite ease-in-out;
}

.sparkDB1{
	    top: 53%;
    left: 75%;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
	background-color: var(--blue);
	transform: scale(0);
    animation: sparkle3 3s infinite ease-in-out;
}
.sparkDB2{
	    top: 29%;
    left: 75%;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
	background-color: var(--blue);
	transform: scale(0);
    animation: sparkle3 5s infinite ease-in-out;
}
.sparkDB3{
	    top: 79%;
    left: 75%;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
	background-color: var(--blue);
	transform: scale(0);
    animation: sparkle3 8s infinite ease-in-out;
}
.sparkCal1{
	top: 39%;
    left: 43%;
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: var(--blue);
	opacity: 0;
    transform: scale(0);
    animation: sparkle2 3s infinite ease-in-out;
    }
	
.sparkCal2{
	top: 55%;
    left: 26%;
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: var(--blue);
	opacity: 0;
    transform: scale(0);
    animation: sparkle2 4s infinite ease-in-out;
}

.sparkCal3{
	top: 55%;
    left: 79%;
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: var(--blue);
	opacity: 0;
    transform: scale(0);
    animation: sparkle2 5s infinite ease-in-out;
}

    .diamond  {
      width: 100%;
      height: 100%;
      background: url('/images/diamond_icon2.png') no-repeat center;
      background-size: contain;
      filter: brightness(0) saturate(100%) invert(11%) sepia(97%) saturate(1989%) hue-rotate(336deg) brightness(94%) contrast(108%);
    }


.spark{

	position: absolute;
      width: 15px;
      height: 15px;
      background: white;
      border-radius: 50%;
      opacity: 0;
	  border: 1px solid var(--red);
	  
	 /* Diamond with inward-bent edges using clip-path */
	  clip-path: polygon(
		50% 0%,
		65% 20%,
		100% 50%,
		65% 80%,
		50% 100%,
		35% 80%,
		0% 50%,
		35% 20%
	  );}
  
    .sparkle1 {
      top: 10%;
      left: 55%;
      transform: scale(0);
      animation: sparkle 3s infinite ease-in-out;

    }
	
	.sparkle2 {

      top: 20%;
      left: 10%;
      transform: scale(0);
      animation: sparkle 5s infinite ease-in-out;
    }
	
	.sparkle3 {

      top: 40%;
      left: 40%;
      transform: scale(0);
      animation: sparkle 7s infinite ease-in-out;
    }



	
    @keyframes sparkle {
      0%, 80%, 100% {
        opacity: 0;
        transform: scale(0);
      }
      85% {
        opacity: 1;
        transform: scale(1.5);
      }
      87% {
        opacity: 0;
        transform: scale(0);
      }
    }
	
	 @keyframes sparkle2 {
      0%, 80%, 100% {
        opacity: 0;
        transform: scale(1);
      }
	  10% {
        opacity: 1;
        transform: scale(1);
      }
      85% {
        opacity: 1;
        transform: scale(1.5);
      }
      95% {
        opacity: 0;
        transform: scale(1);
      }
    }
	
	@keyframes sparkle3 {
      0%, 80%, 100% {
        opacity: 0;
        transform: scale(1);
      }
	  10% {
        opacity: 1;
        transform: scale(1);
      }
      85% {
        opacity: 1;
        transform: scale(1.2);
      }
      95% {
        opacity: 0;
        transform: scale(1);
      }
    }
	

.book {
      position: relative;
      width: 40px;
		height: 50px;
      transform-style: preserve-3d;
	  left: -25px;
    }

    .page {
      position: absolute;
      width: 100%;
      height: 100%;
      background: var(--pinkL);
      border: 1px solid #59030A;
      transform-origin: right center;
      transform-style: preserve-3d;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      animation: flipPageLTR 10s linear infinite;
    }

	.page img{width: 90%; margin: 0 auto; display: block; position:relative}
	
    .page::before,
    .page::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }

    .page::before {
      background: linear-gradient(to left, var(--pinkL) 70%, var(--pinkL));
    }

    .page::after {
      background_: #f9f9f9;
      transform: rotateY(180deg);
    }

    .page:nth-child(1) { animation-delay: 0s; z-index: 5; }
    .page:nth-child(2) { animation-delay: 2s; z-index: 4; }
    .page:nth-child(3) { animation-delay: 4s; z-index: 3; }
    .page:nth-child(4) { animation-delay: 6s; z-index: 2; }
    .page:nth-child(5) { animation-delay: 8s; z-index: 1; }

    @keyframes flipPageLTR {
      0% {
        transform: rotateY(180deg);
      }
      50% {
        transform: rotateY(0deg);
      }
      100% {
        transform: rotateY(0deg);
      }
    }

.photo-wrapper {
  position: relative;
  display: inline-block;
}

.photo-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to bottom, rgba(89, 3, 10, 0.6), rgba(89, 3, 10, 0));
  pointer-events: none;
}

.photo-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Bottom third */
  background: linear-gradient(to top, rgba(89, 3, 10, 0.9), rgba(89, 3, 10, 0));
  pointer-events: none;
}


.vertical-text {
	color:var(--white);
  writing-mode: vertical-rl; /* vertical text from top to bottom, right to left */
  text-orientation: upright; /* keeps Japanese characters upright */
  font-size: 34px;
  line-height: 1.8;
  position: absolute;
  
  text-shadow: 3px 3px 3px rgba(250, 250, 250, 0.4);
  
}


@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 

	#block1 .col1, #block1 .col2{width:100%}
	#block2 { width: 100%}
	#block2 .col{margin: 20px auto 90px; width:95%}

	#block1 p{margin: 30px auto;}
	
	.vertical-text {  font-size: 14px; top: 10px}
	#vTxt1 {right: 40px;}
	#vTxt2 {right: 15px;}

}

@media screen and (min-width: 1200px) {

	#block1 .col1{width:40%}
	#block1 .col2{width:60%}
	#block2 { width: 80%; margin: 120px auto 30px}
	#block2 .col{ margin: 20px auto 50px; width: calc(25%);}
	
	#block2 .col p{border-left: 1px solid var(--pink)}
	#block2 .col:first-child p{border-left: 1px solid var(--pinkL);}
	#block1 p{margin:  auto;}

	.vertical-text {  font-size: 38px; top: 20px}
	#vTxt1 {right: 120px;}
	#vTxt2 {right: 60px;}
}