*body { 
  margin: 0;
}
body, html { 
  overflow: hidden;  
}
:root {
  --green: #197E37;  
  --green-hover: #19853a;
  --primary: #5585B6;
  --primary-hover: #4f7dac;
  --blue: #09345a;
  --blue-hover: #103f68;
  --global-color: #253243;  
  --green-bg: #197E37;
  --fontw-700:700;
}
body.loading { 
  background: #000;
}
 * {
  cursor: none;
}

.cursor{  
  cursor: none; 
  width: 150px;
  height: 150px;
  position: fixed; 
  pointer-events: none;
  display: none; 
  z-index: 9999999;
  transition: transform 0.5s ease; 
  transform: translate(-50%, -50%); 
  overflow: show; 
  background-image: url('../img/landing/default-mouse.svg');
}
.cursor.hover{ 
  background-image: url('../img/landing/action_mouse.svg');
}



/***************************************************************Landing page Start *****************************************/


/***************************************Corner cloud  **************************************/
.left_cornercloud { width: 30vw; position: fixed; left: 6vw; top: 14vh;}
.right_cornercloud { width: 30vw; position: fixed; right: 6vw; top: 14vh; transform:rotateY(180deg); }




  .boder_outer {
    width: 100%; 
    z-index: 99999;
  }
  .boder_outer .b-top{
   position: fixed;
    left: 0; 
      border: solid 2px;
      box-sizing: border-box;
    top: 0; 
    right: 0;
  }
  .boder_outer .b-top ul,  .boder_outer .b-bottom ul { display: flex; justify-content: space-between; margin: 0; padding: 0;}
  .boder_outer .b-top ul li,  .boder_outer .b-bottom ul li { background:#000000; width: 6%; height:6.5vh; list-style-type: none; }
  .boder_outer .b-top ul li:nth-child(even),  .boder_outer .b-bottom ul li:nth-child(even){ background:#FF3829;}
  .boder_outer .b-top ul li:first-child,.boder_outer .b-top ul li:last-child,  .boder_outer .b-bottom ul li:first-child, .boder_outer .b-bottom ul li:last-child { width: 3.8vw;}
  .boder_outer .b-left ul li:last-child, .boder_outer .b-right ul li:last-child { height:8.4vw;}
  .boder_outer ul li { display: flex; justify-content: center; align-items: center;}
.boder_outer .b-left ul, .boder_outer .b-right ul { display: flex; flex-direction: column; height: 100%; justify-content: space-between; margin: 0; padding: 0;}
.boder_outer .b-left ul li, .boder_outer .b-right ul li { background:#000000; width: 3.5vw; height: 13%; list-style-type: none; }
.boder_outer .b-left ul li:nth-child(odd){ background:#FF3829;}
.boder_outer .b-right ul li:nth-child(odd){ background:#000;}

.boder_outer .b-right ul li:nth-child(even){ background:#FF3829;}

.boder_outer .b-bottom ul li:nth-child(odd){ background:#FF3829;}

.boder_outer .b-bottom ul li:nth-child(even){ background:#000;}


.black_heart, .red_heart, .mid_heart { width: 2.5vw;}
.mid_heart { position: fixed; left: 48.8%; z-index: 99;}


  .boder_outer .b-bottom{ 
  position: fixed; 
  box-sizing: border-box;
  border: solid 2px;
    left: 3.65vw; 
    right:3.65vw; 
    bottom: 0; 
    z-index: 9;
  }
  .boder_outer .b-left{ 
   position: fixed; 
    height: 100%; 
    left: 0; 
    top: 6.7%; 
    bottom: 0;
    box-sizing: border-box;
    border: solid 2px;
  }
  .boder_outer .b-right{ 
   position: fixed; 
    height: 100%; 
    border: solid 2px;
    top: 6.7%;
    right: 0;
    box-sizing: border-box;
    bottom: 0;
  }

  /************************************************Piano  ***********************************************************/

  .piano { position: fixed; width: 94vw; margin: 0 auto; left: 0; right: 0; top: 6vh;}

  

/******************************************************************* Hands  *************************************************/

.hands { 
  position: fixed; 
  width: 90%; 
  display: flex; 
  justify-content: space-between;
  z-index: 9; 
  
}
#left_hand {right: 5%;   transform:rotateY(180deg); }
#right_hand {left: 5%; }

#right_hand, #left_hand { 
  position: fixed;
  width: 30vw; 
  bottom: 0;
  height: auto;
}
/* .right_hand, .left_hand { 
  position: relative; 
  
} */



.lworkfire_elemnt, .rworkfire_elemnt { width: 15vw; height: auto;}
.lworkfire_elemnt  {position: fixed; bottom: 16vh; left: 13vw; z-index: 999;}
.rworkfire_elemnt  {position: fixed; bottom: 16vh; right: 13vw; z-index: 999;}

.lcloud_thumb { position: fixed; width: 30vw; height: auto; bottom: 0vh; left: 5vw; z-index: 999;}
.rcloud_thumb { position: fixed; width: 30vw; height: auto; bottom: 0vh; right: 5vw; z-index: 999; transform: rotateY(180deg);}
/**************************************** Page center element  ****************************/
.center_element { position: fixed; top: 8%; left: 3%; right: 3%; width: 94%;}

/* ********************************** bootm corner circle **********************************/
.left_botomcircle { width: 9vw; position: fixed; left: 3.3vw; bottom:5vh;}
.right_botomcircle { width: 9vw; position: fixed; right: 3.3vw; bottom:5vh;  transform:rotateY(180deg);}


/*****************************************Heart pattern  ********************************/

.left_heartpatern { width: 19vw; position: fixed; left: 4vw; top:24vh; z-index: 99;}
.right_heartpatern { width: 19vw; position: fixed; right: 4vw; top:24vh; z-index: 99;}
 
/******************************************Rabbits  **************************************/

.rabit_outer { 
  display: none; 
  position: absolute; 
  left: 14%; 
  right: 14%; 
  bottom: 15%; 
  display: flex; 
  justify-content: space-between; 
  width: 72%;
}
#rabbit_white { 
  width: 8vw; 
  height: 25vh; 
  position: relative; 
  z-index: 99999;
}  

#rabbit_black { 
  width: 8vw; 
  height: 25vh; 
  position: relative; 
  z-index: 99999;
}

/*********************************************************** Cat chip *************************************************************/

.cat_chip { 
  background: url('../img/landing/cat-chip.svg') center center no-repeat; 
  width: 120px; 
  height: 120px; 
  position: fixed; 
  z-index: 9;
  left: 32%; 
  right: 0; 
  bottom: 80px;  
  animation-name: cat_chip_floating;
  transform: rotate(5deg);
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes cat_chip_floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 20px); }
  to   { transform: translate(0, -0px); }    
}
.eye {
  position: relative;
}
#eye-right { 
  position: absolute; 
  right: 21px; 
  top: 17px;
}
#eye-left { 
  position: absolute; 
  left: 11px; 
  top: 47px;
}
#square1{
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.eyeball1 {
  position: absolute;
  overflow: hidden;
  width: 10px;
}
#square2{
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.eyeball2 {
  position: absolute;
  overflow: hidden;
}

/******************************************************************* end Cat chip *************************************************/

/********************************************************************Pinkchip  *********************************************/


.pink_chip {  
  position: fixed; 
  right:35%; 
  bottom: 75px;
  z-index: 99999;
  animation-name: pink_chip_floating;
  transform: rotate(5deg);
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.pink_chip img { width: 10vw; height: 10vh; }
.pink_chip:hover { -webkit-animation-duration: 1s; animation-duration: 1s;}

@keyframes pink_chip_floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 30px); }
  to   { transform: translate(0, -0px); }    
}

/************************************************************************ Magician head  *******************************************/
.magician_head {
  position: fixed;
  width: 28vw;
  top: 35vh;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  z-index: 999999;
}
/* .magician img.megician_head { 
  width: 14vw; 
  height: auto; 
  z-index: 999999999; 
  position: relative;
} */
/* .magician img.magician_element {
  width: 100%; 
  left:0; 
  top: 2px; 
  height: auto; 
  z-index: 999999; 
  position: absolute;
} */
.magician_head .magicianhead { width: 28vw; 
  height: auto; 
  z-index: 99999999999; 
  position: relative;}
  /* .eye_fire  { position: fixed; width: 13.8vw; left: 43%; top: 55.5vh; display: flex; align-items: center; justify-content: space-between; z-index: 9999999999;} */
  /* .eye_fire  { position: fixed;  z-index: 9999999999;} */
.eye_fire img { width: 4%;}
.eye_fire .left_elemnt { position: fixed; left: 43%; top: 55.6%; z-index: 9999999999;}
.eye_fire .right_elemnt { position: fixed; right: 43.2%; top: 55.6%; z-index: 9999999999;}

.e_text { position: fixed; z-index: 9999; width: 66%; left: 17%; top: 28%; display: flex; justify-content: space-between;}
.e_text img { width: 4vw;}
.e_text img:last-child {transform: rotateY(180deg);}
  /***************************************Floor bg**************************************  */
  .floor_bg { position: fixed; width: 70%; bottom: 0; left: 15%; right: 15%;}

  /*****************************star blinks  **************************/
  .left_star { 
    position: fixed; 
    left: 20%; 
    top: 20%; 
    width: 8%;
    z-index: 99; 
  }
  .right_star { 
    position: fixed; 
    right: 20%; 
    top: 20%; 
    width: 8%;
    z-index: 99; 
    transform:rotateY(180deg);
  }
  .l_star, .r_star {
    animation-name: l_star;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 1.3s;
    animation-direction: alternate;    
  }
  
  /* @keyframes l_star {
    to {
      opacity:0;
    }
    from{
      opacity:1;
    }
  }
  @keyframes sparkle {
    0% {
      transform: scale(0);
    }
    25% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  } */

  /**************************************Cards ****************************************/
  /* .cards_outer { border: solid 2px; position: relative; display: flex; width: 100%; z-index: 999999; overflow: hidden; height:50vh;} */
  .work_cards {
    position: fixed;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    left: 5vw;
    right: auto;
    width: 90vw;
    height: 115vh;
 overflow: hidden;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
  }
  /* .work_cards ul.left-card {
    list-style: none;
    position: absolute;
    padding: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    
  }
  .work_cards ul.right-card {
    list-style: none;
    position: absolute;
    padding: 0;
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    
  } */
    
  /* .work_cards li {
    height: 30vh;
    position: absolute;
    width: 10vw;
  } */

  /* .work_cards li img { max-width: 100%;} */
  
  .work_cards .card.changed {
    -moz-transform:scale(2.5);
    -ms-transform:scale(2.5);
    -webkit-transform:scale(2.5);
    transform:scale(2.5);
    position: relative;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    
  }
  
  .left-card, .right-card { width: 50%;}

  /* .work_cards li.card_one {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  .work_cards li.card_two {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  .work_cards li.card_three {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .work_cards li.card_four {
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
  }
  .work_cards li.card_five {
    -webkit-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -o-transform: rotate(150deg);
    transform: rotate(150deg);
  }
  .work_cards li.card_six {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .work_cards li.card_seven {
    -webkit-transform: rotate(210deg);
    -moz-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    -o-transform: rotate(210deg);
    transform: rotate(210deg);
  }
  .work_cards li.card_eight {
    -webkit-transform: rotate(240deg);
    -moz-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    -o-transform: rotate(240deg);
    transform: rotate(240deg);
  }
  .work_cards li.card_nine {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .work_cards li.card_ten {
    -webkit-transform: rotate(300deg);
    -moz-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    transform: rotate(300deg);
  }
  .work_cards li.card_eleven {
    -webkit-transform: rotate(330deg);
    -moz-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    -o-transform: rotate(330deg);
    transform: rotate(330deg);
  }
  .work_cards li.card_twelve {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  .work_cards li.card_thirteen {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  .work_cards li.card_fourteen {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  } */


  /* .work_cards .left-card li.card_one {
    transform:rotate(0deg); left:28vw; top: 0;
  }
  .work_cards .left-card li.card_two {
    transform:rotate(-25deg); left:15.5vw; top:5vh;
  }
  .work_cards .left-card li.card_three {
    transform:rotate(-50deg); left:5.5vw;  top: 21vh;
  }
  .work_cards .left-card li.card_four {
    transform:rotate(-75deg); left:-0.5vw; top: 44vh;
  }
  .work_cards .left-card li.card_five {
    transform:rotate(-100deg); left:-1vw; top: 71vh;
  }
  .work_cards .left-card li.card_six {
    transform:rotate(-125deg); left:4vw; top: 97vh;
  }
  .work_cards .left-card li.card_seven {
    transform:rotate(-150deg); left:4vw; top: 120vh;
  }


  .work_cards .right-card li.card_eight {
    transform:rotate(0deg); right:28vw; top: 0;
  }
  .work_cards .right-card li.card_nine {
    transform:rotate(25deg); right:15.5vw; top:5vh;
  }
  .work_cards .right-card li.card_ten {
    transform:rotate(50deg); right:5.5vw;  top: 21vh;
  }
  .work_cards .right-card li.card_eleven {
    transform:rotate(75deg); right:-0.5vw; top: 44vh;
  }
  .work_cards .right-card li.card_twelve {
    transform:rotate(100deg); right:-1vw; top: 71vh;
  }
  .work_cards .right-card li.card_thirteen {
    transform:rotate(125deg); right:4vw; top: 97vh;
  }
  .work_cards .right-card li.card_fourteen {
    transform:rotate(150deg); right:4vw; top: 120vh;
  } */



  /* .work_cards li.card_eight {
    -webkit-transform: rotate(240deg);
    -moz-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    -o-transform: rotate(240deg);
    transform: rotate(240deg);
  }
  .work_cards li.card_nine {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .work_cards li.card_ten {
    -webkit-transform: rotate(300deg);
    -moz-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    transform: rotate(300deg);
  }
  .work_cards li.card_eleven {
    -webkit-transform: rotate(330deg);
    -moz-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    -o-transform: rotate(330deg);
    transform: rotate(330deg);
  }
  .work_cards li.card_twelve {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  .work_cards li.card_thirteen {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  .work_cards li.card_fourteen {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  } */
  /* .work_cards ul { padding: 0;}

  .work_cards li {
    height: auto;
    left: 50%;
    margin-left: -70px;
    position: fixed;
    top: 0;
    width:10vw;
    -webkit-transform-origin: center 600px;
    -moz-transform-origin: center 600px;
    -o-transform-origin: center 600px;
    -ms-transform-origin: center 600px;
    transform-origin: center 600px;
    list-style-type: none;
  } */
    
  .work_cards li:nth-child(1) {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  .work_cards li:nth-child(2) {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  .work_cards li:nth-child(3) {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .work_cards li:nth-child(4) {
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
  }
  .work_cards li:nth-child(5) {
    -webkit-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -o-transform: rotate(150deg);
    transform: rotate(150deg);
  }
  .work_cards li:nth-child(6) {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .work_cards li:nth-child(7) {
    -webkit-transform: rotate(210deg);
    -moz-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    -o-transform: rotate(210deg);
    transform: rotate(210deg);
  }
  .work_cards li:nth-child(8) {
    -webkit-transform: rotate(240deg);
    -moz-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    -o-transform: rotate(240deg);
    transform: rotate(240deg);
  }
  .work_cards li:nth-child(9) {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .work_cards li:nth-child(10) {
    -webkit-transform: rotate(300deg);
    -moz-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    transform: rotate(300deg);
  }
  .work_cards li:nth-child(11) {
    -webkit-transform: rotate(330deg);
    -moz-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    -o-transform: rotate(330deg);
    transform: rotate(330deg);
  }
  .work_cards li:nth-child(12) {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }



  .b_animm, .b_anim, .b_anim3 {
    position: absolute;
    /* transform: translate(-50%, -50%);
    z-index: 99;
    left: 50%;
    top: 50%; */
  }
  
  .b_animm {
    width: 13vw;
    height:15vh;
    left: 43%;
    top: 50%;
  }
  .b_anim {
    width: 18vw;
    height: 18vh;
    left: 40.5%;
    top: 45%;
  
  }
  .b_anim3 {
    width: 25vw;
    height: 25vh;
    left: 37%;
    top: 40%;
  
  }
  .b_animm img, .b_anim img, .b_anim3 img { display: none;}
  .backheart1 img, .backheart2 img, .backheart3 img { display: block;}
  .backheart1 img { animation: b_animm 0.8s alternate ease-in;transform: scale(5,5);}
  .backheart2 img { animation: b_anim 1s alternate ease-in;transform: scale(5,5);}
  .backheart3 img {animation: b_anim3 1.2s alternate ease-in;transform: scale(5,5);}

  .backheart1 {
    z-index: 99999;   
    display: block;
    position: absolute;
    
   
  }

  
  .backheart2 {
    z-index: 9999;
   
    display: block;
    position: absolute;
  }
  
  .backheart3 { 
    z-index: 999;
    
    display: block;
    position: absolute;
    
  }
  @keyframes b_animm {
    0%   {transform: scale(.5,.5);}
    100% {transform: scale(8,8);}
  }
  @keyframes b_anim {
    0%   {transform: scale(.5,.5);}
    100% {transform: scale(8,8);}
  }
  @keyframes b_anim3 {
    0%   {transform: scale(.5,.5);}
    100% {transform: scale(8,8);}
  }





  :root {
    --animation-time:15s; 
  }
  
  
  .card_animation {
    width:100vw;
    height:145vh;
    position:relative;
    margin-top: 40vh;
    place-items:center;
    pointer-events:none;
    padding: 0;
    overflow: hidden;
    animation:rotate var(--animation-time) linear infinite;
    /*animation-play-state:paused;*/
  }
  
  
  .card_animation:hover {
    animation-play-state:paused;
  }
.card_animation:hover img {
    animation-play-state:paused;
  }
  
  /* .card_animation:hover .circle .inner-circle {
    animation-play-state:paused;
    cursor:pointer;
  }
   */
  @keyframes rotate {
    from {
      transform:rotate(0);
    }
    to {
      transform:rotate(360deg);
    }
  }
  
  
  .pcard {
    position:absolute;
    inset:0;   
    pointer-events:none;
    transition:550ms ease;
    list-style-type: none;
  }
  
  .pcard img {
    width:10vw;
    place-items:center;
    pointer-events:auto;
    /* animation:rotate-opposite var(--animation-time) linear infinite; */
  }

  

  
  @keyframes rotate-opposite {
    from {
      transform:rotate(var(--start-angle-of-rotation));
    }
    to {
      transform:rotate(var(--end-angle-of-rotation));
    }
  }

  
/* 
  @media only screen and (max-width: 1920px) and (min-width: 1400px)  {
    .card_animation {
      width:1300px;
      height:1300px;
    
    }
    .circle img {
      width:9.5vw;
    
    }

  } */


  
  /* Popup Styling */
  .img-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999999;
    background: rgba(54, 54, 54, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
  }
  
  .img-popup img {
    max-width: 100%;
    opacity: 0;
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px);
  }
  
  .video_modal { z-index: 99999999999;}
.video_modal .btn-close { position: absolute; width: 30px; height: 30px; opacity: 1; background-color: #fff; right: 5px; top: 5px;}
.video_modal .modal-lg { width: 650px;}
.video_modal .modal-content { border-radius: 0.8rem; border: none;}

  /* .close-btn {
    width: 35px;
    height: 30px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }
  
  .close-btn .bar {
    height: 4px;
    background: #333;
  }
  
  .close-btn .bar:nth-child(1) {
    transform: rotate(45deg);
  }
  
  .close-btn .bar:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
  } */
  
  .opened {
    display: flex;
  }
  
  .opened img {
    animation: animatepopup 1s ease-in-out .8s;
    -webkit-animation: animatepopup .3s ease-in-out forwards;
  }
  
  @keyframes animatepopup {
  
    to {
      opacity: 1;
      transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
    }
  
  }
  





.pi_ano.newclass {
  fill: #f89d66 !important;
}

.mobile_bg { display: none;}
/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width:1180px) 
and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {

  .eye_fire .left_elemnt { top: 54%; left: 42%;}
  .eye_fire .right_elemnt { top: 54%; right: 42%;}
  .magician_head { top: 35vh; width: auto;}
 
  .floor_bg { width: 120%; left: -10%; right: auto;}
  .center_element { top: 10%; width: 110%; left: auto; right: auto;}
  .magician_head .magicianhead { width: 35vw;}
  .card_animation { height: 125vh;}
  .pcard img  { width: 12vw;}
  .left_cornercloud, .right_cornercloud { top: 11vh;}
  .left_cornercloud, .right_cornercloud { bottom: 11vh;}
  .lworkfire_elemnt, .rworkfire_elemnt { bottom: 11vh;}

 
  
}
@media only screen and (min-device-width: 768px) and (max-device-width:1180px) 
and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { 
  .work_cards { width: 100vw; left: 0; height: auto;}
  .card_animation { width: 80vw; height: 60vh;}
}


@media screen and (max-width: 600px) { 
  .floor_bg, .center_element { display: none;}
  .mobile_bg { display: block; position: absolute; width: 100%; height: 100%; z-index: -1; top: 6%;}
  .work_cards { width: 100vw; left: 0; height: auto;}
  .card_animation { width: 85vw; height: 45vh;}
  .left_cornercloud { width: 60vw; top: 2%;}
  .right_cornercloud { width: 60vw; top: 2%;}
  #right_hand, #left_hand, .lcloud_thumb, .rcloud_thumb { width: 42vw; bottom: 0vh;}
  .magician_head { width: 80vw; top: 52%;}
  .magician_head .magicianhead { width:40vw; position: absolute; left: 25%;}
  .eye_fire .left_elemnt,  .eye_fire .right_elemnt { top: 59vh;}
  .eye_fire .left_elemnt { left: 41%;}
  .eye_fire .right_elemnt  { right: 41%;}
  .e_text { top: 10%;}
  .e_text img { width: 9vw;}
  .left_star, .right_star { width: 40%;}
  .left_heartpatern, .right_heartpatern { width: 40vw;}
  .boder_outer .b-top, .boder_outer .b-bottom, .boder_outer .b-left, .boder_outer .b-right { border: none;}
  .boder_outer .b-left, .boder_outer .b-right { top: 2%;}
  .boder_outer .b-top ul li, .boder_outer .b-bottom ul li { height: auto;}
  .piano { top: 3vh;}
  .boder_outer .b-left ul li, .boder_outer .b-right ul li { width: 5vw;}
  .lworkfire_elemnt, .rworkfire_elemnt { bottom: 6vh;}
  .pcard img { width: 13vw;}
  /* .cat_chip { width: 20%; height: 20%;}
  #eye-right, #eye-left { width: 25px; height: 25px; }
 #eye-left { top:65px; left: 8px} */
  /* #eye-right {  top:45px ; right: 16px;} */
.eye_fire {display: flex;
  /* border: solid; */
  justify-content: space-between;
  width: 19vw;
  margin: 0 auto;
  margin-top: 60px;
  position: relative;
  z-index: 9999999999;}
  .eye_fire .left_elemnt, .eye_fire .right_elemnt { position: relative; top: auto; left: auto; right: auto;}
  .eye_fire img { width: 25%;}
  .left_botomcircle, .right_botomcircle { width: 30vw; bottom: 0;}
 }