<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
.section {
  padding-bottom: 100px;
}
.section .text-position {
    text-align: left;
  }
.section .direction {
  display: flex;
  align-items: center;
  flex-direction: column-reverse;
}
.section .center {
  display: flex;
  align-items: center;
}
.section__title {
    margin-top:36px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  font-size: 38px;
  line-height: 70px;
  color: #FA5652;
}
.center {
    position:absolute;
    top:0;
    right:0;
    bottom:0px;
    left:45%;
    margin-top:100px;
    margin-left: 10px;
    width:100px;
    height:100px;
    background-color: transparent;
    border-radius: 80%;
    box-shadow: 15px 10px 0px 0px #4166f5;

    animation: jiss 1s ease 2s infinite normal forwards;
  }
     
@keyframes jiss {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-2px, 2px);
  }

  40% {
    transform: translate(-2px, -2px);
  }

  60% {
    transform: translate(2px, 2px);
  }

  80% {
    transform: translate(2px, -2px);
  }

  100% {
    transform: translate(0);
  }
}
.stars {
    background: #ee0979;  
    background: -webkit-linear-gradient(to bottom, #ff6a00, #ee0979); 
    background: linear-gradient(to bottom, #ff6a00, #ee0979); 
    height:18px;
    width: 18px;
    border-radius: 10%;
    animation-iteration-count: infinite;
    animation-name:star;
    animation-duration:4s;
    animation-timing-function:alternate;
  }
@keyframes star{
    0%{
        clip-path:polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
    }
    50%{
        clip-path:polygon(0% 0%, 50% 100%, 100% 0%, 0% 50%, 100% 100%, 50% 0%, 0% 100%, 100% 50%);
    }
    100%{
        clip-path:polygon(50% 50%, 50% 100%, 50% 50%, 0% 50%, 50% 50%, 50% 0%, 50% 50%, 100% 50%);
    }
}
  
  .star-1 {
    margin-top:3%;
    margin-left:15%;
    animation-name:star;
  }


.star-2 {
    margin-top:2%;
    margin-left:35%;
    animation-name:star;
}


.star-3 {
    margin-top:2%;
    margin-left:5%;
    animation-name:star;
}

.star-4 {
    margin-top:1%;
    margin-left:40%;
    animation-name:star;

  }
  .star-5 {
    margin-top:3%;
    margin-left:9%;
    animation-name:star;

  }
  .star-6 {
    margin-top:2%;
    margin-left:4%;
    animation-name:star;

  }
  .star-7 {
    margin-top:2%;
    margin-left:8%;
    animation-name:star;

  }
.star-8 {
    margin-top:2%;
    margin-left:27%;
    animation-name:star;

  }

.star-9 {
    margin-top:2%;
    margin-left:44%;
    animation-name:star;

  }
.star-10 {
    margin-top:2%;
    margin-left:55%;
    animation-name:star;

  }
 
.section__span {
   font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  font-size: 36px;
  line-height: 40px;
  color: #035755;
  text-transform:none;
}
.section__desc {
  margin-top: 20px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 30px;
  color: #4B4F51;
  text-transform:none;
}
.section__button {
  position: relative;
  top: 40px;
  padding: 15px 40px;
  font-size: 15px;
  color: #FFFFFF;
  text-decoration: none;
  background: #67B0B1;
  box-shadow: -2px 5px 10px 1px #67B0B1, 5px 5px 10px 1px #000;
  border-radius: 60px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.section__button:hover {
  box-shadow: 0px 0px 20px rgba(199, 199, 199, 0.7);
  transition: 0.3s ease;
}
ul {
    display:inline-block;
    margin-block-start:2em;
    margin-block-end: 2em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 50px;
}

ul li{
    display: block;
     color: red;
     list-style: none;
     margin: 2px;
     
}
.row {
  margin-left: 0!important;
  margin-right:0!important;
   
}
.card{
  position: relative;
  display: flex;
  min-width: 0px;
}
 
.container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
} 

.profile-head .nav-tabs .nav-link {
    color: #f8f9fa;
    text-decoration: none;
    background-color: #b029be;

}

.profile-head .nav-tabs .nav-link :hover {

border-color:black;
color: red;
}
.profile.head h2
{
     font-weight:bold;
     font-size: 0.8em

}
.profile-head:hover
{
   padding: 65px, 65px,65px,65px;
   cursor:pointer;
}
.image{
  width:320px;
  height:220px;  
  border-radius:8px;
  margin:20px 20px;
  filter: hue-rotate(0deg);
  transition: transform 1.20s;
}
@media(min-width:400px) {
    .image {
        flex-direction: column;
        align-items: flex-start;
         
    }}
.image:hover
{
 box-shadow: 2px 2px 18px 6px rgba(20, 221, 234, 0.91);
  transform:scale(1.20);  
}
.table 
{
  text-align: center;
  width: 100%;
  margin: 0px;
  padding: 0px;
  border-collapse: collapse;
  object-fit: fill;
  
}
.table, h2{
  color:#00009c;
  margin:0px;
  font-family: 'Rancho', cursive;
  cursor: pointer;
  
}

.table, h2:hover{
  color:#ff003f;
}
 
.load-image {
  display: block;
  background: #ccc;
  height: 400px;
  width: 100%;
  border-radius: 15px;
  display: grid;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: black;
  opacity: 0.7;
  transition: all 0.3s ease;

  &:hover {
    opacity: 0;
  }
}
button {
    background: #343434;
    margin-top: 2em;
    border: none;
    padding: 1em;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .2em;
    outline: 0;
    cursor: pointer;
    
}
body,html{
background-repeat: no-repeat;
filter: hue-rotate(0deg);
overflow-x:hidden;
font-family: 'Roboto Condensed', sans-serif;
box-sizing: border-box; 
font-size: 16px;
line-height: 28px;
 -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
  place-items: center;
   
   }

.profile-edit-btn{
    border: none;
    border-radius: 1.5rem;
    width: 70%;
    padding: 2%;
    font-weight: 600;
    color: #fffaf2;
    cursor: pointer;
    background: #092c74;
    box-shadow: 5px 5px 5px 0px rgba(153,53,53,0.75);
}

.navbar {
  position: relative;
  display: flex;
  align-items: center; 
  padding: 0.3rem 1.5rem;
   
}
 
.navbar-brand {
  font-size: 1.9rem;
  line-height: inherit;
  white-space: nowrap;
}

.nav_style{
    background-color: #0070ff!important;
    filter: hue-rotate(40deg);
}
.nav_style a{
  color:white;
  font-family: 'Roboto Condensed', sans-serif;
  box-shadow: 1px 2px 7px 4px #38BBDE;
  animation: jis 2s cubic-bezier(0.45, 0, 0.55, 1) 1s infinite alternate both;
  background: #00fff0;
  background: linear-gradient(90deg,#00fff0 0%, #0065ff 80%);
  background: -webkit-linear-gradient(90deg,#00fff0 0%, #0065ff 80%);
  background: -moz-linear-gradient(90deg,#00fff0 0%, #0065ff 80%);
  cursor:pointer;
  border-radius:60%;
  margin:5px;
  
 }
 @keyframes jis {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}
 
	80% {
		transform: scale(1.0);
	}
	 
	100% {
		transform: scale(1);
	}
	 
}

 .nav_style a:hover{
  color:#ff0000;
  
 }
 
.main_header{
  height: 60px;
  width:100%; 
}
.rightside h1{
  font-size:6rem;
  color:black;
}
.jishu ,.lottie-player{
   
    align-items:center;
    justify-content: space-between;
}
.jishu h2{
  color: blue;

}
.jishu  p{
  color: black;
}
.jishu ul li{
  color: black;
}

.jishu ul li p{
  color:#77f931;
}
.container-fluid h1{
    color:#000060;
}

.coro1 img{ 
  animation: corona1 6s linear infinite;
  border-color:red;
  margin-top:52px;
  height:34px;
  justify-content: space-between;
  
}
@keyframes corona1{

0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.coro2 img{ 
  animation: corona2 2s cubic-bezier(0.64, 0, 0.78, 0) 3s infinite alternate both;
  justify-content: space-between;
  border-color:red;
  margin:64px;
  height: 30px;
  padding:.1em;
  
}
@keyframes corona2{
0% {
    animation-timing-function: ease-in;
    opacity: 1;
    transform: translateY(-45px);
  }

  24% {
    opacity: 1;
  }

  40% {
    animation-timing-function: ease-in;
    transform: translateY(-24px);
  }

  65% {
    animation-timing-function: ease-in;
    transform: translateY(-12px);
  }

  82% {
    animation-timing-function: ease-in;
    transform: translateY(-6px);
  }

  93% {
    animation-timing-function: ease-in;
    transform: translateY(-4px);
  }

  25%,
  55%,
  75%,
  87% {
    animation-timing-function: ease-out;
    transform: translateY(0px);
  }

  100% {
    animation-timing-function: ease-out;
    opacity: 1;
    transform: translateY(0px);
  }
0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.coro3 img{ 
  animation: corona3 5s ease-in-out infinite;
  align-items: center;
  border-color:red;
  margin:80px;
  height: 29px;
  justify-content: space-between;
  
}
@keyframes corona3{

0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.coro4 img{ 
  animation: corona4 4s ease-in-out infinite;
  align-items: center;
  border-color:red;
  margin:53px;
  height:96px;
  transition-delay: 1s;
  
}
@keyframes corona4{

0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
 
.coro5 img{ 
  animation: corona5 3s cubic-bezier(0.32, 0, 0.67, 0) 3s infinite normal forwards;
  align-self:baseline;
  border-color:red;
  margin:54px;
  height:44px;
  
}
@keyframes corona5{
0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.coro6 img{ 
  animation: corona6 3s ease-out infinite;
  align-items: center;
  border-color:red;
  margin-left:40px;
  height:38px;
  box-sizing:border-box;
  animation-play-state: running;
}
@keyframes corona6{
0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
   
}
.coro7 img{ 
  animation: corona7 5s ease-in-out infinite;
  align-items: center;
  border-color:red;
  margin:80px;
  height: 29px;
  justify-content: space-between;
  
}
@keyframes corona7{

0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}

.coro8 img{ 
  animation: corona8 3s linear infinite;
  border-color:red;
  padding:2em;
  margin:23px,2px;
  height:40px;
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  overflow:hidden;
}
@keyframes corona8{

0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.coro9 img{ 
  animation: corona9 5s ease-in-out infinite;
  align-items: center;
  border-color:red;
  margin:80px;
  height: 29px;
  justify-content: space-between;
  
}
@keyframes corona9{

0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.coro10 img{ 
  animation: corona5 3s cubic-bezier(0.32, 0, 0.67, 0) 3s infinite normal forwards;
  align-self:baseline;
  border-color:red;
  margin-left:49px;
  height:45px;
  
}
@keyframes corona10{
0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.coro11 img{ 
  animation: corona5 3s cubic-bezier(0.32, 0, 0.67, 0) 3s infinite normal forwards;
  align-self:baseline;
  border-color:red;
  margin:49px;
  height:34px;
  
}
@keyframes corona11{
0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.coro12 img{ 
  animation: corona3 5s ease-in-out infinite;
  align-items: center;
  border-color:red;
  margin:80px;
  height: 60px;
  justify-content: space-between;
  
}
@keyframes corona12{

0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.coro13 img{ 
  animation: corona13 5s ease-in-out infinite;
  align-items: center;
  border-color:red;
  margin:80px;
  height: 29px;
  justify-content: space-between;
  
}
@keyframes corona13{

0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.coro14 img{ 
  animation: corona14 5s ease-in-out infinite;
  align-items: center;
  border-color:red;
  margin:80px;
  height: 29px;
    justify-content: space-between;
  
}
@keyframes corona14{

0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}

.coro img{ 
  animation: corona 3s linear infinite;
  align-items: center;
  border-color:red;
  margin-bottom:0px;
  height:75px;
    
  
}
@keyframes corona{

0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.leftside img{ animation: heartbeat 5s linear infinite;}
@keyframes heartbeat
{
  0%{
    transform: scale(.75);
  }
  20%{
    transform: scale(1);
  }
  40%{
    transform: scale(.75);
  }
  60%{
    transform: scale(1);
  }
  80%{
    transform: scale(.75);
  }
  100%{
    transform: scale(.75);
  }
}

.corona-update{margin: 0 0 10px 0;  }
.text-uppercase {
    text-transform: uppercase!important;}
    .corona-update hr{
      color: white;
    }
.corona-update h3{ color:white;}
.corona-update h1{ font-size: 2rem; text-align: center; color:black;}
.corona-update p{color:blue;}

.sub_section{
  background-color: #fbfafd;

}

.footer_style
{
  background-color:#000!important;
  display: flex;
  justify-content: center;
  text-align: center!important;
  margin:0px;
  padding:60px;
  height:120px;
  position:fixed;
  font-size: 4px;
  left: 0;
  bottom: 0;
  width: 100%;
  text-size:8px;
    
 }

.footer_style p{
  margin-bottom: 0!important;
  text-align: center!important;
}

#myBtn {
   
  position: fixed;
  bottom:55px; 
  right: 25px;
  z-index: 99; 
  border:none;
  outline: none; 
  background-color:#e8e4c9;
  color: white; 
  cursor: pointer;
  padding: 20px;
  border-radius:40px; 
  font-size: 18px;
  display: none;
   
}
#myBtn:hover {
   color: black;
   background-color:#b029be;
}

@media(max-width: 1240px)
{
  .main_header{
     
    text-align: center;
  }
  .main_header h1{
     
    text-align: center;
    padding:60px;
    width: 150%;
    font-size:45px;
   }
  
}
 
.fa {
  padding: 0px;
  font-size:24px;
  text-align:left;
  text-decoration: none;
   border-radius: 100px;
}
.fa:hover {
   cursor:pointer;
  color:green;
  background-color:white;
}
 .leftside {
     top:20%;
    position:relative; 
    transform: translateY(-20%);
    width: 100%;
    text-align: center;
}
.leftside,.lottie-player{
     top:20%;
     position:relative; 
     transform: translateY(-20%);
     width: 100%;
     text-align: center;
     margin-left:0px;
     justify-content: space-between;
}
 
.leftside h2{
  margin-top:150px;
  padding: 40px,50px;
  margin-bottom:-120px;
  position:relative;
  align-content: center;
  margin-left:-180px;
  margin-right:10px;
  justify-content: space-between;
  transform: translate3d(120px, 60px, 0px);
}
@media(max-width: 1240px)
{
  .leftside{
     justify-content: space-between;
     text-align: center;
  }
  .leftside h2{

    text-align: center;
    padding:30px;
    width: 150%;
    font-size:45px;
     
   }
  
}

.leftside h1{
  position:absolute;
  margin-left:35px;
  box-sizing: border-box;
}
 
 .leftside h4{
  position:fixed;
  margin-top:20px;
  margin-bottom:100px;
  margin-left:20px;
  box-sizing: border-box;
  padding-top:560px;
  color:red;
  width:;
  animation: jasy 4s ease 2s infinite alternate-reverse forwards;
  font-family: "Luckiest Guy";
  -webkit-animation: tracking-in-expand-fwd-top 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;
          animation: tracking-in-expand-fwd-top 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;
}
@-webkit-keyframes tracking-in-expand-fwd-top {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px) translateY(-500px);
            transform: translateZ(-700px) translateY(-500px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes tracking-in-expand-fwd-top {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px) translateY(-500px);
            transform: translateZ(-700px) translateY(-500px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

@keyframes jasy {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.leftside h4:hover{
   
  color:orange;
   filter: hue-rotate(80deg);
   cursor:pointer;
}
 .btn1 {
    font-size:12px;
    width: 90px;
    margin:3px;
    border-radius:80%;
    overflow: hidden;
    position: relative;
    box-sizing: content-box;
    display:block;
    justify-content:center;
    text:white;
    padding: 15px 32px;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
}
 .btn1  i{
    line-height:60px;
    font-size: 26px;
    transition: 0.2s linear;
}
 .btn1:hover i{
    transform: scale(1.5);
    color:white;
     width:45%;
}
.btn1::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    background:blue;
    transform: rotate(45deg);
    left: 210%;
    top: 90%;
}
.btn1:hover::before {
    animation: aaa 0.7s 1;
    top: -10%;
    left: -10%;
}
@keyframes aaa {
    0%{
        left: -110%;
        top: 90%;
    }50%{
        left: 10%;
        top: -30%;
    }100%{
        top: -10%;
        left: -10%;
    }
}

 
.jishh
{
  margin:0px;
  padding:0px;
  width: 100%;
 
   
}
 
.jishh h4:hover
{
 
  color:red;
   
}
.jishh a:hover {
           background-color:red;
          
   }
   .jish,a{
       background-color:transparent;
   }
 .jish a:hover {
           background-color:red;
           column-fill:auto;
          
   }
.jish i:hover, a:hover {
   background-image:hidden;
  background-color:transparent;
   

}
a:link
   {
    text-decoration: none;   
   }
   i:hover{
 background-color:transparent;

   }
.type{
        font-size: 15px;
    }
 

.jish-content {
    position: relative;
    background: #fafafa;
     width: 100%;
     padding:15px 0px;
}

svg
{
  padding:0px;
  background-color:white;
  border-radius:5px;
 box-shadow: 15px 19px 15px 5px #16C37C;
}
svg:hover
{
   cursor:pointer;
 box-shadow: -2px 2px 12px 9px #E2355E;
}
.container{width:100%;

}

#l5
{
    cursor: pointer;
    animation: swing ease-in-out 1.5s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
    
}

#leaf2
{
  cursor: pointer;
    animation: swing ease-in-out 1.7s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#l3
{
  cursor: pointer;
    animation: swingreverse ease-in-out 1.7s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#l4
{
  cursor: pointer;
    animation: swingreverse ease-in-out 1.6s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#leaf1
{
  cursor: pointer;
    animation: swingreverse ease-in-out 1.9s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#l1
{
  cursor: pointer;
    animation: swingreverse ease-in-out 1.5s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#facemain
{
    cursor: pointer;
    animation: girlface ease-in-out 1.8s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}


#book
{
  cursor: pointer;
    animation: book ease-in-out 2.5s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}


#dogt
{
  cursor: pointer;
    animation: swingreverse ease-in-out 0.9s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}

#oldhand
{
    cursor: pointer;
    animation: oldhand ease-in-out 1.5s infinite alternate;
    transform-origin: 34px bottom;
    transform-box: fill-box;
}

#oldface12
{
  cursor: pointer;
    animation: oldhand ease-in-out 1.3s infinite alternate;
    transform-origin: bottom;
    transform-box: fill-box;
}


@keyframes girlface
{
  0% {transform: rotate(2deg);}
  100% { transform: rotate(-3deg); }
}

@keyframes oldhand {
    0% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}

@keyframes swing {
    0% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}


@keyframes swingreverse {
    0% { transform: rotate(-6deg); }
    100% { transform: rotate(6deg); }
}


@keyframes book {
    0% { transform: rotate(-4deg); }
    100% { transform: rotate(4deg); }
    
}


svg #Home {
  stroke:#37233c;
  stroke-width:1px;
  fill:#fd1b0b;

}


#Vector_62, #Vector_61, #Vector_60, #Vector_59, #Vector_63, #Vector_64{
  transform-box:fill-box;
  transform-origin:center;
  
}

  

.water-text h5{
  margin-top: 12px;
  font-size: 20px;
}

.water-text, .rightside h3{
   margin-bottom: 25px;
   text-size:5px;
   
  
}
.water-text {
   font-family: 'Eczar', serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  background-image: url("images/vhs.jpg" );
  background-size:auto;
  background-position: 0%;
  width: 100%;
  font-size: 4px;
  background-attachment: unset;
  animation: water-moving infinite 10s;
  animation-fill-mode: forwards;
  animation-play-state: running;
  animation-timing-function: linear;
  text-align: center;
  cursor: pointer;
   position: fixed;
  left: 0;
  bottom: 0;
   background-color:white;
  color: white;
  text-align: center;
box-shadow: 15px 19px 15px 5px #165AC3;
}
@keyframes water-moving {
  0% {
    background-position: 0%;  
  }
  50% {
    background-position: 100%;  
  }
  100% {
    background-position: 0%;
  }
}
.attribute {
  position:fixed;
  font-size: 30px;
  text-align: center ;
  margin-right: 70px;
  margin-left: 70px

.attribute h5,a:hover{
  color:red;
}}

</style>

<style>
  .con1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height:0px;
  margin-top:0px;
  color:green;
}
.con1,h6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:0px;
  padding:10px;
  margin-top:0px;
  font-size: 1.0rem;
  margin-bottom: 0.5rem;
   position: fixed;
  line-height: 1.0rem;
 
}

.hand1 {
    color:green;
  font-size:24px;
  animation: identifier1 3s infinite;
   
  
}
@keyframes identifier1 {
  0%,
  100% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(-10px);
  }
}

.con2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height:0px;
  margin-top:50px;
}
.con2,h6 {
  display: flex;
  justify-content: center;
  align-items: center;
  height:2px;
  padding:3px;
  margin-top:0px;
  font-size: 1.0rem;
  margin-bottom: 0.3rem;
   position: fixed;
  line-height:1.0rem;
}


.hand2 {
  font-size:24px;
  animation: identifier2 3s infinite;
   
}


@keyframes identifier2 {
  0%,
  100% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(-10px);
  }
}
 
</style>
 <style>
.product-card ul.card-action-buttons {
    margin: 18px 7px 0 0;
    text-align: right;
}
.product-card ul.card-action-buttons li {
    display: inline-flex;
    padding-left: 7px;
}
.product {
    width: 50%;
    padding: 10px;
}
.product .card {
    margin: 0;
}
.product .card .card-content {
    padding: 20px;
}

</style>
<style>
.bi{

  --penguin-skin: black;
  --penguin-belly: white;
  --penguin-beak: red;
  
  position: relative;
  margin-top:200px;
  margin-bottom:-13px;
  display: block;
  width: 85px;
  height: 85px; 
  cursor:pointer;
  margin-left:40px;
  animation: spin 10s linear infinite; 
  animation-play-state: paused; 
}
.bi:hover{
  animation-play-state: running;
  -webkit-animation: bounce-top 0.9s infinite both;
          animation: bounce-top 0.9s infinite both;
}
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}

@keyframes spin {
  100% {
    transform: rotate(1turn); 
  }
}
.bi-top {
  top: 10%;
  left: 25%;
  background: var(--penguin-skin, gray);
  width: 50%;
  height: 45%;
  border-radius: 70% 70% 60% 60%;
}

.bi-bottom {
  top: 40%;
  left: 23.5%;
  background: var(--penguin-skin, gray);
  width: 53%;
  height: 45%;
  border-radius: 70% 70% 100% 100%;
}

.right-hand {
  top: 5%;
  left: 25%;
  background: var(--penguin-skin, black);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 120% 30%;
  transform: rotate(130deg);
  z-index: -1;
  animation-duration: 2s;
  animation-name: wave;
  animation-iteration-count: infinite;
  transform-origin: 0% 0%;
  animation-timing-function: linear;
}

.left-hand {
  top: 0%;
  left: 75%;
  background: var(--penguin-skin, gray);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 30% 120%;
  transform: rotate(-45deg);
  z-index: -1;
}

.right-cheek {
  top: 15%;
  left: 35%;
  background: var(--penguin-belly, white);
  width: 60%;
  height: 70%;
  border-radius: 70% 70% 60% 60%;
}

.left-cheek {
  top: 15%;
  left: 5%;
  background: var(--penguin-belly, white);
  width: 60%;
  height: 70%;
  border-radius: 70% 70% 60% 60%;
}

.belly {
  top: 60%;
  left: 2.5%;
  background: var(--penguin-belly, white);
  width: 95%;
  height: 100%;
  border-radius: 120% 120% 100% 100%;
}

.right-feet {
  top: 85%;
  left: 60%;
  background: var(--penguin-beak, orange);
  width: 15%;
  height: 30%;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(-80deg);
  z-index: -2222;
}

.left-feet {
  top: 85%;
  left: 25%;
  background: var(--penguin-beak, orange);
  width: 15%;
  height: 30%;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(80deg);
  z-index: -2222;
}

.right-eye {
  top: 45%;
  left: 60%;
  background: black;
  width: 15%;
  height: 17%;
  border-radius: 50%;
}

.left-eye {
  top: 45%;
  left: 25%;
  background: black;
  width: 15%;
  height: 17%;
  border-radius: 50%;
}

.sparkle {
  top: 25%;
  left: 15%;
  background: white;
  width: 35%;
  height: 35%;
  border-radius: 50%;
}

.blush-right {
  top: 65%;
  left: 15%;
  background: pink;
  width: 15%;
  height: 10%;
  border-radius: 50%;
}

.blush-left {
  top: 65%;
  left: 70%;
  background: pink;
  width: 15%;
  height: 10%;
  border-radius: 50%;
}

.beak-top {
  top: 60%;
  left: 40%;
  background: var(--penguin-beak, orange);
  width: 20%;
  height: 10%;
  border-radius: 50%;
}

.beak-bottom {
  top: 65%;
  left: 42%;
  background: var(--penguin-beak, orange);
  width: 16%;
  height: 10%;
  border-radius: 50%;
}

body {
  background: #fce4ec;
}

.bi * {
  position: absolute;
}
.bi {
  animation-duration: 10s;
  animation-name: loop;
  animation-iteration-count: infinite;
  transform-origin: 0% 0%;
  animation-timing-function: linear;
}

@keyframes wave {
  10% {
    transform: rotate(110deg);
  }
  30% {
    transform: rotate(130deg);
  }
  50% {
    transform: rotate(110deg);
  }
  80% {
    transform: rotate(130deg);
  }
  100% {
    transform: rotate(110deg);
  }
}

@keyframes loop {
  0% {
    transform: rotateY(0deg);
  }
  25% {
    transform: rotateY(-10deg);
  }
  50% {
    transform: rotateY(0deg);
  }
  75% {
    transform: rotateY(10deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

</style>
<style>
.container5 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}
.red-color {
         
        filter: hue-rotate(160deg);
    }
.hand5{
  font-size:40px;
  margin-right:100px;
  margin-left:100px;
  animation: identifier 3s infinite;
}

@keyframes identifier {
  0%,
  100% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(-3px);
  }
}
</style>