*{
    margin: 0;
    /* padding: 0 5px; */
    box-sizing: border-box;
   
}
html,body{
   width: 100%;
   overflow-x: hidden !important
 
}

@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");

svg {
	font-family: "Russo One", sans-serif;
	width: 100%; height: 100%;
}
svg text {
	animation: stroke 5s infinite alternate;
	stroke-width: 1;
	stroke: #f3f3f4;
	font-size: 50px;
}
@keyframes stroke {
	0%   {
		fill: rgba(72,138,204,0); stroke: rgb(247, 247, 249);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(72,138,204,0); stroke: rgb(223, 231, 243); }
	80%  {fill: rgba(72,138,204,0); stroke: rgb(240, 242, 245); stroke-width: 3; }
	100% {
		fill: rgb(238, 240, 243); stroke: rgba(241, 243, 246, 0);
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}

.wrapper {  background: rgb(75, 203, 228);};


body{
   margin: 0 100px !important;
}
section{
   margin: 0 100px;
}
.txt,.text{
   text-align: justify;
}

.heading .title{
   font-size: 28px !important;
   color: aliceblue;
   font-weight: 700;
   padding: 20px;
}
.aniheading .title{
   font-size: 18px !important;
  
   font-weight: 700;
   padding: 20px;
}
.upimg{
  width: 65%;margin-left: 10% ;
 
}

.aniheadingi .title{
   font-size: 40px !important;
   font-weight: 500;
   text-align: center;
   padding: 20px;
}
.aniheading .title{
   font-size: 40px !important;
   font-weight: 500;
   text-align: center;
   padding: 20px;
}
.heding h1{
   font-size: 28px !important;
}
.heading{
    background: rgb(75, 203, 228);
    color:white;
    text-align: center !important;
    margin: 10px 0;
}
/* .aniheading{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 12px 0;
} */
.orangbox{
    min-width: 60%;
    background-color: orange;
    color:aliceblue;
    padding: 4px 5px;
}
.blbox{
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin:0 0 20px 0;
}
.blbox >.left{
   padding: 25px;
   color: aliceblue;
   background-color: white;
   text-align: center;
   display: flex;
   z-index: 5;
   align-items: center;
   justify-content: space-between;
   margin-top: 50px;
   /* height: 450px; */
   width: 15%;
   /* height: 50px; */
  
  
}
.blbox >.left p{
   transform: rotate(90deg);
    text-align: center;
    background-color: rgba(75, 202, 228, 0.999);
    padding: 10px  60% ;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

}
.blbox >.right{
    display: flex;
    padding: 10px;
    overflow: hidden;
    z-index: 2;
    position: relative;
    min-width: 60%;
    justify-content: space-around;
    color: rgb(0, 80, 155);
    background-color: rgba(106, 206, 231, 0.307);
    text-align: left;
    font-weight: 600;
    margin-top: 50px;
    cursor: pointer;
    animation: bani 8s infinite reverse;
   
   
 }
 .flex{
    display: flex;
 }
 .blbox >.right p:hover{
    transition: all 0.5s ease-in-out;
   transform: scale(1.1);
   
 }
 .blbox >.right:hover{
   animation: ban;

  
}
 .circles{
    display: flex;
    justify-content: center;
 }
 .circle{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 }
 .titletm{
   font-size: 22px !important;
   font-weight: 500;
}
 @media only screen and (max-width: 600px) {
   section{
      margin: 0 0;
   }
   .titletm{
      font-size: 18px !important;
      font-weight: 500;
   }
   .upimg{
      width: 100%;
      margin-left: 0;
      display: flex;
      flex-direction: column;
     align-items: center;
   }
   .aniheading .title{
      font-size: 18px !important;
     
      font-weight: 700;
      padding: 20px;
   }
   
   .upimg img{
      float: none !important;
   }
   body{
      padding: 0 2px;
   }
   .blbox{
      flex-wrap: wrap;
   }
   .blbox>.left{
      width: 100%;
      text-align: center;
      justify-content: center;
      height: fit-content;
     
   }
   .blbox >.left{
       
        /* height: 50px; */
        transform: rotate(0deg);
     }
     .blbox >.left p{
         transform: rotate(0deg);
         padding: 10px 30px;
     }
     .blbox >.right{
        width: 100%;
        display: block;
        margin-top: 10px;
        text-align: center;
        animation: topani 8s infinite reverse;
     }
     .blbox >.right *{
        width: 100%;
      
        margin-top: 15px;
       
     }
     .aniheading{
   flex-wrap: wrap;
   justify-content: flex-start;
     }
  }
  /*@keyframes bani {*/
  /* 0%{*/
  /*    right: 200%;*/
  /* }*/
  /* 25%{*/
  /*    right: 100%;*/
  /* }*/
  /* 50%{*/
  /*  right: 0%;*/
  /* }*/
  /* 60%{*/
  /*    right: 0%;  */
  /* }*/
  /* 75%{*/
  /*    right: 0%;*/
  /* }*/
  /* 100%{*/
  /*    right: 200%;*/
  /* }*/
   
  /*}*/

  /*@keyframes topani {*/
  /* 0%{*/
  /*    top: 200%;*/
  /* }*/
  /* 25%{*/
  /*    top: 100%;*/
  /* }*/
  /* 50%{*/
  /*  top: 0%;*/
  /* }*/
  /* 60%{*/
  /*    top: 0%;  */
  /* }*/
  /* 75%{*/
  /*    top: 0%;*/
  /* }*/
  /* 100%{*/
  /*    top: 200%;*/
  /* }*/
   
  /*}*/