/*BODY SECion star*/
body{
	overflow-x:hidden ;
	scroll-behavior: smooth;
}
/*body section end*/
/*all h4 span*/
				h4{
					color: #47e5f4;
				}
				span{
					color: #47e5f4;
				}
/*all h4 span end*/

/*nev bar icon*/
				.git a{
					text-decoration: none;
					color: #fff;
				}
				.git:hover a{
					text-decoration: none;
					color: #000;
				}
/* nav bar icon end */
/*banner section start*/
    		.banner{
    			background: url('image/banner.png');
    			background-size: cover;
    			height: 750px;
    			background-attachment: fixed;
    		}
 /*button on banner*/
				.to a{
					font-size: 30px;
						  			
						animation: mymove 5s alternate infinite;
							}
							@keyframes mymove {
						  		40% {
						  			font-size: 0px;
						  
						  			}
						  		70% {font-size: 30px;
						  			}
								}


				.to button{
					    border: 0px dotted cyan;
					    animation: ;
				}

				.to{
				  font-family:arial black;
				  font-size:20px;
				 color: white;
				  }
	/*button banner end*/
  /*banner section end*/
   /*headder button on all section */
    		.ab{
     			border-bottom:2px solid white ;
     			border-top:2px solid white ;
     			animation: border1 5s infinite alternate;
     			margin-top: 10px;
     			margin-bottom: 30px;
    		}

    		@keyframes border1 {
    			0%{border-bottom:2px solid darkred;border-top:2px solid darkred;color: red;}
    			30%{border-bottom:2px solid #47e5f4 ;border-top:2px solid #47e5f4 ;text-transform:uppercase}
    			80%{border-bottom:2px solid #47e5f4 ;border-top:2px solid red ;background: #47e5f4;,color: red;font-variant:small-caps}
    			100%{border-bottom:2px solid darkblue ;border-top:2px solid darkblue ;color: red !important;}
    		}
/*skill section star */
    		.progress{
				    width: 150px;
				    height: 150px;
				    line-height: 150px;
				    background: none;
				    margin: 0 auto;
				    to-shadow: none;
				    position: relative;
				}
				.progress:after{
				    content: "";
				    width: 100%;
				    height: 100%;
				    border-radius: 50%;
				    border: 12px solid #fff;
				    position: absolute;
				    top: 0;
				    left: 0;
				}
				.progress > span{
				    width: 50%;
				    height: 100%;
				    overflow: hidden;
				    position: absolute;
				    top: 0;
				    z-index: 1;

				}
				.progress .progress-left{
				    left: 0;
				}
				.progress .progress-bar{
				    width: 100%;
				    height: 100%;
				    background: none;
				    border-width: 12px;
				    border-style: solid;
				    position: absolute;
				    top: 0;
				}
				.progress .progress-left .progress-bar{
				    left: 100%;
				    border-top-right-radius: 80px;
				    border-bottom-right-radius: 80px;
				    border-left: 0;
				    -webkit-transform-origin: center left ;
				    transform-origin: center left;
				}
				.progress .progress-right{
				    right: 0;
				}
				.progress .progress-right .progress-bar{
				    left: -100%;
				    border-top-left-radius: 80px;
				    border-bottom-left-radius: 80px;
				    border-right: 0;
				    -webkit-transform-origin: center right ;
				    transform-origin: center right ;
				    animation: loading-1 1.8s linear forwards ;				}
				.progress .progress-value{
				    width: 60%;
				    height: 60%;
				    border-radius: 50%;
				    background: ;
				    font-size: 24px;
				    color: white;
				    line-height: 135px;
				    text-align: center;
				    position: absolute;
				    top: 5%;
				    left: 20%;
				}
				.progress.blue .progress-bar{
				    border-color: #47e5f4;
				}
				.progress.blue .progress-left .progress-bar{
				    animation: loading-2 1.8s linear forwards 1.8s ;
				}
				.progress.css .progress-bar{
				      border-color: #47e5f4;
				}
				.progress.css .progress-left .progress-bar{
				    animation: loading-3 1.5s linear forwards 1.8s ;
				}
				.progress.java .progress-bar{
				      border-color: #47e5f4;
				}
				.progress.java .progress-left .progress-bar{
				    animation: loading-4 1.5s linear forwards 1.8s ;
				}
				.progress.boot .progress-bar{
				      border-color: #47e5f4;
				}
				.progress.boot .progress-left .progress-bar{
				    animation: loading-5 1.5s linear forwards 1.8s ;
				}
				.progress.photo .progress-bar{
				      border-color: #47e5f4;
				}
				.progress.photo .progress-left .progress-bar{
				    animation: loading-6 1.5s linear forwards 1.8s ;
				}
				.progress.tally .progress-bar{
				      border-color: #47e5f4;
				}
				.progress.tally .progress-left .progress-bar{
				    animation: loading-7 1.5s linear forwards 1.8s ;
				}

				@keyframes loading-1{
				    0%{
				        -webkit-transform: rotate(0deg);
				        transform: rotate(0deg);
				    }
				    100%{
				        -webkit-transform: rotate(180deg);
				        transform: rotate(180deg);
				    }
				}
				@keyframes loading-2{
				    0%{
				        -webkit-transform: rotate(0deg);
				        transform: rotate(0deg);
				    }
				    100%{
				        -webkit-transform: rotate(144deg);
				        transform: rotate(170deg);
				    }
				}
				@keyframes loading-3{
				    0%{
				        -webkit-transform: rotate(0deg);
				        transform: rotate(0deg);
				    }
				    100%{
				        -webkit-transform: rotate(144deg);
				        transform: rotate(130deg);
				    }
				}
				@keyframes loading-4{
				    0%{
				        -webkit-transform: rotate(0deg);
				        transform: rotate(0deg);
				    }
				    100%{
				        -webkit-transform: rotate(80deg);
				        transform: rotate(60deg);
				    }
				}
				@keyframes loading-5 {
					0%{
						-webkit-transform : rotate(0deg);
						transform: rotate(0deg);
					}
					100%{
						-webkit-transform : rotate(90deg);
						transform: rotate(110deg);
					}
				}
				@keyframes loading-6 {
					0%{
						-webkit-transform : rotate(0deg);
						transform: rotate(0deg);
					}
					100%{
						-webkit-transform : rotate(69deg);
						transform: rotate(69deg);
					}
				}
				@keyframes loading-7 {
					0%{
						-webkit-transform : rotate(0deg);
						transform: rotate(0deg);
					}
					100%{
						-webkit-transform : rotate(144deg);
						transform: rotate(90deg);
					}
				}
	/* skill section end */
	/*scroll bar*/
				::-webkit-scrollbar{
					width:12px ;
					height:;
				}
				::-webkit-scrollbar-thumb{
					background: linear-gradient(transparent,#fff);
					border-radius: 10px;
				}
	/*scroll bar end*/
	/*services section start*/
				 .carousel-inner img{
				                        
				                width:100%!important;
				                height:300px!important; 
				            }
				        
	/*services section start*/
/* Portfolio section Start */
				.portfolio{
				
					height:auto;
					width:100%
				}
					.porim {
                              position: relative;
                              width: 100%;
                            }

                            .porimage {
                              opacity: 1;
                              display: block;
                              width: 100%;
                              height: auto;
                              transition: .5s ease;
                              backface-visibility: hidden;
                            }

                            .pormiddle {
                              transition: .5s ease;
                              opacity: 0;
                              position: absolute;
                              top: 50%;
                              left: 50%;
                              transform: translate(-50%, -50%);
                              -ms-transform: translate(-50%, -50%);
                              text-align: center;
                            }

                            .porim:hover .porimage {
                              opacity: 0.5;
                            }

                            .porim:hover .pormiddle {
                              opacity: 1;
                            }
                            .portext:hover{

                              text-shadow: 1px -12px 1px black;
                            }

                            .portext {
                              background-color: #47e5f4;
                              color: white;
                              font-size: 16px;
                              border-radius: 20px;
                              padding: 10px 20px;
                            }
				
/* Portfolio Section Ends */
/*	works section start*/
				.workpro {
				  position: relative;
				  width: 100%;
				}

				.image {
				  opacity: 1;
				  display: block;
				  width: 100%;
				  height: auto;
				  transition: .5s ease;
				  backface-visibility: hidden;
				}

				.middle {
				  transition: .5s ease;
				  opacity: 0;
				  position: absolute;
				  top: 50%;
				  left: 50%;
				  transform: translate(-50%, -50%);
				  -ms-transform: translate(-50%, -50%);
				  text-align: center;
				}

				.workpro:hover .image {
				  opacity: 0.6;
				}

				.workpro:hover .middle {
				  opacity: 1;
				}

				.text {
				  background-color: #47e5f4;
				  color: white;
				  font-size: 16px;
				  border-radius: 20px;
				  padding: 16px 32px;
				}
				
	/*	works section end*/
	/*eduction section start*/
				.main
				{
					width:100%;
					height:40%;
					border:5px #47e5f4 solid;
					background:#fff;
					text-align:center;
					border-radius:10px;
					overflow:hidden;
					position:relative;
					transition:0.5s;
					margin-bottom:28px;
				}
				.main h3
				{
					font-size:20px;
					font-weight:700;
				}
				.main p
				{
					margin-bottom:0;
				}
				.team-back
				{
					width:100%;
					height:auto;
					position:absolute;
					top:0;
					left:0;
					color: black!important;

					padding:5px 15px 0 15px;
					text-align:left;
					background:#fff;
				}
				.team-back span{
					color: black;
					font-weight: bold;
					font-family: cursive;
				}
				.team-front
				{
					width:100%;
					height:auto;
					position:relative;
					z-index:10;
					background:#fff;
					padding:15px;
					bottom:0px;
					transition: all 0.5s ease;
				}
				.main:hover .team-front
				{
					bottom:-200px;
					transition: all 0.5s ease;
				}
				.main:hover
				{
					border-color:#fff;
					transition:0.5s;
				}
	/*eduction section end*/
	/*  contact section start */

				.Contact p{
					font-size: 22;
				}
				.Contact i{
					color: darkred;
					font-size: 50px;

				}
				.Contact .p{
					position: relative;
					bottom: 30px;
				}  
				.form-text p{
					font-size: 20px;
				}
				/*  form section start */
				.form table{
					align-items: center;
					
				}
				.form input{
					height: 45px;
					width: 330px;
					margin: 10px;
					border-radius: 20px 0PX 20PX 0PX;
					padding: 10px;
					background: ghostwhite;
				}
				.form textarea{
					border-radius: 20px 0PX 20PX 0PX;
					padding: 20px;
					background: ghostwhite;
				}
				.bu input{

					color: white;
					background: brown;
					border-radius: 40px;
					font-size: 20;
					width: 100px;
				}
				p{
					color: white;
				}
				.ic{
					font-size: 25px;
					margin-right: 13px;
					color: #47e5f4;
				}
				.con{
					background: #47e5f4;
				}
				.bode {
				  --border-size: 3px;
				  --border-angle: 0turn;
				  /*width: 60vmin;
				  height: 50vmin;
				  */background-image: conic-gradient(
				      from var(--border-angle),
				      #000,
				      #000 50%,
				      #000
				    ),
				    conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
				  background-size: calc(100% - (var(--border-size) * 2))
				      calc(100% - (var(--border-size) * 2)),
				    cover;
				  background-position: center center;
				  background-repeat: no-repeat;

				  animation: bg-spin 3s linear infinite;
				}
				  @keyframes bg-spin {
				    to {
				      --border-angle: 1turn;
				    }

				}@property --border-angle {
				  syntax: "<angle>";
				  inherits: true;
				  initial-value: 0turn;
				}
/*contact section end*/