*{
    margin:0px;
    padding:0px;
    /* font-family: 'Caprasimo', serif;
    font-family: 'Dancing Script', cursive;
    font-family: 'DM Serif Display', serif;*/
    font-family: 'Hind Siliguri', sans-serif;
      /*  font-family: 'Kumbh Sans', sans-serif;
    font-family: 'Lato', sans-serif;
    font-family: 'Libre Baskerville', serif;
    font-family: 'Poppins', sans-serif;
    font-family: 'Roboto', sans-serif; */
}

/* this phone view */
html {
	scroll-behavior: smooth;
}
.container{
    width:100%;
    height:auto;
    margin:0px;
    
}

.navbar{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;

    width:100%;
    position:relative;
    border-bottom:1px solid white;
}

.navbars{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
position:fixed;
	
    width:100%;
    position:relative;
    border-bottom:1px solid white;
}

.navbar>ul{
 list-style:none;
 position:absolute;
 top:100%;
 text-align:center;
 width:100%;
 height:500px;
 background: white;
 display:flex;

 flex-direction: column;
 text-transform:uppercase;

}
.navbar>ul>li{
   float: none;
   padding:20px;
   
   }

   .navbar>ul>li:hover {
 background:white;
    }
    .navbar>ul>li:hover a{
       color:red;
           }
   .navbar>ul>li>a{
    text-decoration:none;
    font-size:16px;
    color:#363436;
    font-weight: 600;
    letter-spacing: 1mm;

    }
   .navbar>ul{
    display:none;
   }
   #icon{
    display:none;
   
   }
   #icon:checked ~ ul{
    display:inherit;
     }
     .menu{
        color:red;
        font-size:40px;
        margin-right:10px;
     }
     
     /* banner start */

     .banner{
        width:100%;
        height:auto;
      overflow: hidden;
        background-image:linear-gradient(to bottom, orange 20%,orange 20%, yellow 60%);
		 
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
     }
.bannerbox{
	height:auto;
	width:55%;
	
	  display:flex;
    justify-content: space-evenly;
    align-items: center;
}

.bannerbox>img{
	width:400px;
}
.bannerbox1{
	height:300px;
	width:90%;
	
	  display:flex;
    justify-content: center;
	align-items: center;
 
	 flex-direction: column;
}
.bannerbox1>h2{
	color:white;
	font-size:50px;
	line-height:.9;
	text-align:center;
	
}
.bannerbtn{
	width:150px;
	display:block;
	padding:20px;
	background:purple;
	border:4px solid white;	
	margin-top:20px;
	color:white;
	text-align:center;

	font-size:18px;
	border-radius:10px;
}
.bannerbtn>a{
	color:white;
}
.bannerbtn:hover {
	background:#340064;
}

/* about sectoion */

.aboutblock{
    width:100%;
    height:auto;
   


    display:flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}

.aboutitems{
    width:90%;
    height:auto;
    margin:10px 0px;
    font-size:25px;
   
}

.aboutitems1{
    width:90%;
    height:auto;
    margin-bottom:30px;
    font-size:25px;
   
}
.aboutitems>h1{
    color:red;

}
.aboutitems>p{
    color:#363436;
    
}
.aboutbtn{
   width:110px;
    display:block;
    padding:10px;
  
    text-align:center;
    margin-top:20px;
    font-size:19px;
    
    color:red;
    border-radius:3px;
    border:2px solid red;
}
.aboutbtn>a{
	color:red;
}
.aboutbtn:hover {
  background: red;
  color:white;
    
    
}
.aboutbtn:hover > a {

  color:white;
    
    
}

.headingblock{
			display:flex;
			justify-content:center;
			align-items:center;
			height: 100px;


}
/*porfolio section*/
		.workblock{
			width:100%;
			height:auto;
			
				display:flex;
			
			align-items:center;
			flex-direction:column;
		}
		
		.btnbox{
			width:90%;
			height:auto;
			
			display:flex;
			justify-content:center;
			align-items:center;
			flex-wrap:wrap;
			
			
		}
		.btn{
			outline: none;
			font-size:17px;
			
			padding:10px;
			border:none;
			background:none;
			
		}
.btn:hover {
	color:red;
}

		.heading{
			font-size:35px;
			padding:10px 0px;	
			color:red;
			font-weight: bold;
			border-top:4px solid red ;
		}
		
		.content{
			width:100%;
			height:700px;
		position:relative;
			overflow: hidden;
			
		}
		.itemimg{
		    width:90%;
			height:400px;
				display: flex;
			align-items:center;
			justify-content: center;
			
		}
		.itemtext{
		    width:90%;
			height:auto;
			padding:10px 0px;
			
		}
		.itemtext>h2{
			font-size:25px;
			color:red;
		}
		.itemtext>p{
			font-size:23px;
		}
.itemtext>p>a{
			font-size:17px;
	
	padding:5px 25px;
	border-radius: 20px;
	border:2px solid red;
	color:red;
	

		}
.itemtext>p>a:hover {
	background:red;
	color:white;
}
		
		.itemone{
			width:100%;
			height:100%;
			position:absolute;
			top:0px;
			transform: translateX(100%);
				display: flex;
			align-items:center;
			justify-content: center;
			flex-direction: column;
		}
			#itemone{
			transform: translateX(0);
		}
/*porfolio section end*/


/*fint section start*/

		.findcontainer{
			width:100%;
			height:auto;
			
				display:flex;
			justify-content: space-evenly;
			align-items:center;
			flex-direction:column;
		}
	
		
		.cardcontainer{
			width:250px;
			height:350px;
		margin-bottom:50px;
			 
		}
		
		.cardbox{
			width:100%;
			height:100%;
			 position:relative;
			transform-style:preserve-3d;
			transition: transform 1500ms;
		
		}
		
		.cardcontainer:hover > .cardbox{
			transform:rotateY(180deg);
			
		}
		.front, .back{
			width:100%;
			height:100%;
			
			position:absolute;
			backface-visibility:hidden;
			border:5px solid black;
			border-radius:10px;
					
		}
		.back{
			transform: rotateY(180deg);
			border:5px solid red;
}
/*fint section start*/

/*contact form start*/
.form{
	width:90%;
	height:500px;
 
	margin:30px;
		display:flex;
			justify-content:center;
			align-items:center;
			flex-direction:column;
}
.formname{
	width:100%;
	height:50px;
	border:none;
	border-bottom:2px solid red;
	
	text-align: center;
	font-size:18px;
	margin:10px 0px;
	background: none;
	color:black;
	
}
.formname::placeholder{
	color:red;
	
}
.formnumber::placeholder{
	color:red;
	
}
.formnumber{
	width:100%;
	height:50px;
	border:none;
	border-bottom:2px solid red;
	text-align: center;
	font-size:18px;
	margin:10px 0px;
	background: none;
	color:black;
	
}
.contactbn{
	width:90px;
	padding:34px 0;	
	border:2px solid red;
	border-radius:100px;
	text-align:center;
	margin: 10px auto;	
}
.contactbn:hover {
	background:red;
	color:white;
}


/*contact form end*/



/*footer strat*/

.footer{
	width:100%;
	height:auto;
	background:black;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	
}
.footeritems{
	width:90%;
	height:auto;
	 
	padding:20px 0px;
	color:white;
}
.footeritems>p{color:white;}
.footeritems>ul{
	list-style:none;
	display:flex;
	height:100px;
	align-items: center;
	 
}
.footeritems>ul>li>a{
	text-decoration:none;
	color:white;
	padding:10px;
}
.footeritems>ul>li:hover a{
 color:red;
}
.footeritems>a{
	text-decoration:none;
	color:white;
	padding:10px;
	
}

.end{
	 
	width:100%;
	padding:20px 0px;
	text-align:center;
	color:red;
}

/* logo section css start */

.logopageblcok{
	width:100%;
	height:auto;
	background:red;
	display:flex;
	justify-content:center;
	align-items:center;
	
}

.treadmock{
	width:100%;

}


/* tread block */
.logopageitems
{
	width:90%;
	height:100%;
color:red;
	text-align:center;
	padding:20px 0px;
}

.logopageitems1
{
	width:100%;
	height:100%;	
}
.tread2{
	width:100%;
}

video{
	width:100%;
}

/*catagre page*/


.btnbox2{
    width:100%;
    height:auto;
  
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    padding:15px 0px;
    font-size:40px;
}

.btnbox1{
    width:100%;
    height:100%;
background: red;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    color:white;
    position:absolute;
    display: none;
   
}
.catbtn{
    width:100%;
    height:50px;
    outline:none;
    border:none;
    background:none;
    font-size:15px;
    color:white;
}

.catbtn:hover {
    background:white;
    color:red;

}
.cut{
  width:100%;
  text-align:center;
  padding:10px 0px;
}

.catmenu{
    color:red;
}
.catblock{
    width:100%;
    height:auto;
   
    display:flex;
   justify-content: center;

}
.catunder{
    width:100%;
    height:auto;
     
    display:flex;
    flex-wrap: wrap;

}
.catitem{
    width:40%;
    height:auto;
    border-bottom: 1px solid red;
   margin:5%;
}
.catimg{
    width:100%;
    height:200px;
    
}
.cattext{
    width:100%;
    height:20%;
    
}
a{
    text-decoration:none;
}
.cattext>h2, p{
    color:black;
  
  margin-left:10px;	
    text-decoration: none;
    font-size:17px;
   
}
.cattext>p:hover {
    color:red;
}



/*contact page start*/
		.contactbox{
			width:100%;
			height:400px;
			background-image:linear-gradient(100deg, red, orange);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			
		}
		.contactblock{
			width:100%;
			height:auto;
			
			
		
		}
		::placeholder{
			color:white;
			opacity: 1;
		}
		.forminput, .formselect {
			width:100%;
			height:50px;
			border:none;
			
			border-bottom:2px solid white;
			font-size:18px;
			background:none;
			color:white;
			margin:5px 0px;
			
		}
		
		.formselect>option {
		background:#FFFFFF;
			color:red;
		}
		.contactform{
			width:80%;
			
			
		}
		.formsubmit{
			width:50%;
			height:40px;
			border-radius: 30px;
			background:none;
			border:2px solid white;
			margin:10px 0px;
			color:white;			
		}
		
/*		adress box start*/
		
		.adressbox{
			width:100%;
			height:300px;
			 		background-image: linear-gradient(60deg, rgba(237,28,36,10), rgba(247,192,29,10));
					
				
				 padding: 20px 0px;
					color:white;
			
		}
	
.adressbox>p,a{
	color:white;
}
/*social media post page start*/

.heading>h1{
	font-size:20px;
}

	
	.postblock{
		width:100%;
		height:auto;
		background:red;
		display: flex;
		flex-direction:column;
			height:auto;background: red;
	
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
		
	}

	
	.postblock1{
		width:100%;
		height:auto;
		
		display: flex;
		flex-direction:column;
		
 
		
	}
	.postitems{
		width:100%;
	
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
.postitems>video{
		width:80%;
	margin:20px 0px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		
		
	}
	.postitems>img{
		width:100%;
		height:auto;
	}

	.postitems1{
		width:100%;
			display: flex;
		flex-direction:column;
		justify-content: 
			center
			;
		align-items: center;
	}
.postblock2{
	width:100%;
	
}

.postblock3{
	width:100%;
	
}

.postblock4{
	width:100%;
	
}

.postblock2{
	width:100%;
	
}
.postitems1>img{
	width:100%;
	
}
/* this laptop view */

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

    .menu{
        display:none;
    }
 
   
     
        .navbar>ul{
            list-style:none;
            position:static;
            top:100%;
            text-align:center;
            width:auto;
            height:auto;
            
            display:flex;
         margin-right:60px;
            flex-direction: row;
           
           }
           .logo{
            margin-left:60px;
           }
           .navbar>ul{
            background:none;
           }
         
           .navbar>ul>li:hover{
            background:none;
           }
           .navbar>ul>li>a {
            color:#363436;
         
           }
           .navbar>ul>li:hover a{
			   color:red;
	}

           /* about section */
           .aboutblock{
            flex-direction: row;
          
           }
           .aboutitems{
            width:40%;
            height:500px;
           }
/*	potfolio section start*/
	.btn{
			font-size:16px;
		}
			.content{
				height:500px;
			}
			.heading{
			font-size:30px;
				
		}
		.itemone{		
			flex-direction: row;
			justify-content: space-evenly;
		}	
				.itemimg{
		    width:40%;
		}
		.itemtext{
		    width:40%;
			
		}
			.itemtext>p{
			font-size:25px;
				margin-top:20px;
		}
		/*	potfolio section end*/
	
/*find secation start*/
		.findcontainer{
	

			flex-direction:row;
		}
	/*find secation end*/
/*	banner secotion
	start*/
	  .banner{
      
        background-image:linear-gradient(to right, orange 20%,orange 20%, yellow 60%);
		 
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
     }
	.bannerbox{
	height:600px;
	width:55%;
	
	  display:flex;
    justify-content: space-evenly;
    align-items: center;
}

.bannerbox>img{
	width:100%;
}
.bannerbox1{
	height:600px;
	width:40%;
	
	  display:flex;
   
	 
 align-items: flex-start;
	 flex-direction: column;
}
.bannerbox1>h2{
	color:white;
	font-size:80px;
	line-height:.9;
	text-align:left;
	margin-left:60px;
	 
}
	.bannerbtn{
	width:150px;
	display:block;
	padding:20px;
	background:purple;
	border:4px solid white;
	margin-left:50px;
	color:white;
	text-align:center;
	
	font-size:18px;
	border-radius:10px;
}
.bannerbtn:hover {
	background:#340064;
}
 

/*	banner section end*/
	
	
	
	/*	contact form*/
	.form{
	width:40%;
		
		padding:0px 10px;
		border:1px solid red;
		border-radius:2px;
		background:white;
	
}
	
	.contactbn{
		width:150px;
		padding:10px;
		border-radius: 30px;
	}
/*	footer start*/
	.footer{
 height:100%;
		height:200px;
	display:flex;
	justify-content:center;
	align-items: flex-start;
	flex-direction:row;
	
}
	.footeritems{
	width:30%;
	 display:flex;
	justify-content:center;
	align-items:center;
 }

/*	footer ent*/
	/*tread logo section start */

	.logopageitems
{
	width:90%;
	height:100%;
color:red;
	text-align:center;
	padding:20px 0px;
	font-size:20px;
}

.aboutitems1{
    width:40%;
    height:auto;
    margin:10px 0px;
    font-size:25px;
   
}
/*	catogary page*/
.btnbox1{
    display: inherit;
    position:relative;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    display:flex;
    padding:20px 0px;
background:none;
	width:70%;
	margin: auto;
}
.catbtn{
  width:auto;
	
   padding:15px;
    color:black;
	
	margin:none;
	
	
  
   
}

.catitem{
    width:25%;
    height:400px;
    margin:4%;
    
}
	.catimg{
    width:100%;
    height:80%;
    height:80%;
    
}
.catunder{
    width:80%;
     
    display:flex;
    flex-wrap: wrap;
}
.cattext>h2, p{
    color:black;
  
    margin-left:10px;
    margin-top:10px;
    text-decoration: none;
    font-size:20px;
   
}
.cut, .btnbox2{
    display:none;
}
/*contact page start*/
	
				.contactbox{
				width:40%;
				align-items: flex-end;
				height:500px;
				padding-right:20px;
				position: relative;
			}
			.contactblock{
				padding:50px 0px;
				height:auto;	
				display: flex;
			justify-content: center;
			align-items: center;
				poistion:relative;
			
			}
			.contactform{
			width:60%;
			
		}
/*			address block*/
			
				.adressbox{
			width:280px;
			height:380px;
				background-image: linear-gradient(60deg, rgba(237,28,36,.9), rgba(247,192,29,.9));
					position:absolute;
					 left:300px;
				 padding: 20px;
					color:white;
			
					
		}
	.adressbox>p{
		color:white;
		font-size:16px;
	}
	
	.boxs{
		width:100px;
		height:100px;
		background:red;
		position:absolute;
		top:80px;
		left:20px;
		border-radius: 100px;
	}
	.boxs1{
		width:20px;
		height:20px;
		background:red;
		position:absolute;
		top:300px;
		left:170px;
		border-radius: 100px;
	}
		.boxs3{
		width:50px;
		height:50px;
		background:red;
		position:absolute;
		bottom:200px;
		left:100px;
		border-radius: 100px;
	}
	
		.boxs4{
		width:50px;
		height:50px;
		background:red;
		position:absolute;
		bottom:400px;
		right:300px;
		border-radius: 100px;
	}
	.boxs5{
		width:20px;
		height:20px;
		background:red;
		position:absolute;
		bottom:200px;
		right:170px;
		border-radius: 100px;
	}
	
		.boxs6{
		width:100px;
		height:100px;
		background:red;
		position:absolute;
		top:80px;
		right:40px;
		border-radius: 100px;
	}
	
	/*social media post page start*/

.heading>h1{
	font-size:40px;
}

	
	.postblock{
	flex-direction:row;
	}
		.postblock1{
		flex-direction:row;
		}
	
	.postblock2{
		background:#c81b2f;
		padding:60px 0px;

	}
	
	.postblock3{
		background:#0076ed;
		padding:60px 0px;

	}
	.postblock4{
		background:#00bbc4;
		padding:60px 0px;

	}
	.postitems1>img{
	width:60%;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
}
	
	.postitems>video{
		width:45%;
	margin:20px 0px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		
		
	}
          }


/* this desktop view */

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

}