body{
	padding: 0px;
	margin: 0px;
}
*{
	padding: 0px;
	margin: 0px;
}
a{
	text-decoration: none;
}
h4{
	font-size: 40px;
	text-align: center;
	padding: 10px;
}
ul{
	list-style: none;

}
.marquee{

	background: #fd0002;
}
.marquee .container-fluid{

}
.marquee .top-box{
	background: white;
		padding: 10px 30px;
}
.marquee .top-box a{
	display: inline-block;
	padding: 0px 10px;
	font-weight: 600;
	color: #2c8cf4;
}
.marquee .top-box a i{
	padding: 0px 5px;
	color:#fd0002;
}
marquee{
	color: white;
	font-weight: 600;
	font-size: 18px;
}

nav{
	position: relative;
	background: linear-gradient(180deg, #2d2db0 -65%, #2c8cf4 110%);
	width: 100%;
	display: flex;
}
.logo{
	display: flex;
	padding: 10px 50px;
		z-index:2000 !important;

}
 
.logo img{
width: 80%;
}
nav ul{
	position: absolute;
	z-index: 999;
	display: flex;
	padding-left:400px ;
	padding-top: 15px;
}
nav ul li{
	display: inline-block;
}
nav ul li a{
	display: inline-block;
	color: white;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 20px 20px;
	
	transition: 0.7s;
}
a.active, a:hover{
transition: 0.7s;
color: black;
border-radius: 10px;
background: #fd0002;
}

.toggle-container {
  display: none;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}
.sub-menu{
	position: relative;
}
.sub-menu .sub-items{
	width: 200px;
	position: absolute;
	padding: 0px;
	margin: 0px;
	z-index: 999;
	display: none;
	background: white;
}
.sub-items li a{
	display: block;
	padding: 5px 17px;
	margin: 0px;
	color: black;
	font-size: 15px;
	text-transform:capitalize;
}
.sub-menu:hover >.sub-items{
display: block;
transition: 0.6s;
}

/*-----------.slider-header start------*/
.slider-header{
	width: 100%;
	height: 500px;
	overflow: hidden;
}
figure{
	position: relative;
	left: 0;
	width: 400%;
	animation: 10s slider infinite;
}
.slider-bar{
	position: relative;
	width: 25%;
	float: left;
}
.slider-bar h2{
	text-align: center;
	position: absolute;
	font-size: 40px;
	font-weight: 800;
	width: 100%;
	top: 50px;
	color: white;
	text-shadow: 4px 2px 2px black;
}
.slider-bar h1{
	text-align: center;
	position: absolute;
	font-size: 60px;
	font-weight: 800;
	width: 100%;
	top: 100px;
	color: white;
	text-shadow: 4px 2px 2px #0564f8;
}
.slider-bar img{
	width: 100%;
	height: 500px;
}
@keyframes slider{
	20%{
		left:0;
	}

	40%{
		left: -100%;
	}
	60%{
		right: -200%;

	}
	100%{
		left: -200%;
	}
}
.slider-bar button .button1{
	display: inline-block;
	position: absolute;
	background: linear-gradient(180deg, #2d2db0 -65%, #2c8cf4 110%);
	text-align: center;
	font-size: 20px;
	color: white;
	top: 220px;
	left: 500px;
	padding: 10px 40px;
	margin: 20px 10px;
}
.slider-bar button .button2{
	display: inline-block;
	position: absolute;
	background: linear-gradient(180deg, #2d2db0 -65%, #2c8cf4 110%);
	text-align: center;
	font-size: 20px;
	color: white;
	top: 220px;
	left: 700px;
	padding: 10px 40px;
	margin: 20px 10px;
}
/*-----------service-slider start----*/
.service-slider{
	padding: 50px 0px;
}
.slider-service-box{
	padding: 20px 15px;
	box-shadow: 0px 0px 3px 1px #c3c3c3;
	margin: 30px 0px;
}
.slider-service-box img{
	width: 100%;
	margin: 5px 0px;
		transition: 0.6s;
}
.slider-service-box img:hover{
	transition: 0.6s;
	filter: brightness(0.7);
}
/*----------service-slider end---------*/
.about-design{
	padding: 50px 0px;
		

}
.about-design .about-box{
	padding: 20px;
	width: 100%;

}
.about-box img{
	width: 100%;
}
.about-box .para{
	position: relative;
	color: #2d2db0;
	font-size: 20px;
	font-weight: 700;
	font-style: italic;

}
.about-box .para::before{
position: absolute;
content: '';
width: 200px;
height: 4px;
left: 0px;
top: 0px;
background:linear-gradient(180deg, #f9a931 -65%, #ff0000 110%);
animation: 10s box infinite;
}
@keyframes box{
	0%{
		left: 0px;
	}
	50%{
		left: -100px;
		height: 20px;
		bottom: 50px !important;
	}
	60%{
		left: -50px;
		width: 20px;
		height: 20px;
		border-radius: 100px;

	}
	70%{
		left: -70px;
		width: 20px;
		height: 20px;
		border-radius: 100px;

	}
	80%{
		left: -100px;
		width: 50px;
		height: 50px;
		border-radius: 100px;
	}
	90%{
		right: -120px;

	}
	100%{
		right: -180px;
		width: 20px;
		height: 20px;
		border-radius: 100px;
		transform: rotate(360deg);

	}
}
.about-box h3{
	font-size: 45px;
	text-align: left;
	font-weight: 700;
	padding: 10px 0px;
	background:linear-gradient(180deg, #b10101 -65%, #fd0002 110%);
	-webkit-text-fill-color:transparent;
	-webkit-background-clip:text;
}

.triangle{
	padding: 30px;
	background-image: url(img/triangle.png);
	background-size: contain;
	background-repeat: no-repeat;
	animation: 20s rotate infinite;
}
.triangle1{
	padding: 30px;
	background-image: url(img/triangle1.png);
	background-size: contain;
	background-repeat: no-repeat;
	animation: 20s rotate infinite;
}
@keyframes rotate {
	0%{
		transform: rotate(360deg);
	}
	100%{
		transform: rotate(-360deg);
		right: 100px;
	}
}
.all-button {
	background: transparent;
	border: none;
}
.all-button a{
	display: block;
	color: black;
	font-size: 20px;
	font-weight: 600;
	background: linear-gradient(180deg, #2d2db0 -65%, #2c8cf4 110%);
	padding: 10px 25px;
	margin: 10px 0px;
	transition: 0.4s;
}
.contact-about {
	box-shadow: 1px 1px 2px 1px #2c8cf4;
	background: white;
	padding: 20px;
	margin: 20px 0px;
	width: 100%;
}
.contact-about1{
	padding: 5px;margin: 0px;
	background: white;
}
.contact-about1  .para1{
	font-size: 20px !important;
}
.contact-about1  .box1{
	margin: 0px !important;
	padding: 0px !important;
}
.contact-about1  strong .box2  {
display: inline-block;
font-size: 14px !important;
}
.contact-about  .para1{
	text-align: center;
	font-size: 35px;
	font-weight: 700;
	background: linear-gradient(180deg, #2d2db0 -65%, #2c8cf4 110%);
	-webkit-text-fill-color:transparent;
	-webkit-background-clip:text;
}
.contact-about  .box1 {
	width: 100%;
	margin: 10px 0px;
	border-bottom: 1px solid black;
	padding: 10px 0px 10px 200px;
}
.contact-about  .box1 strong{
	font-size: 20px;
}
.contact-about  .box1 strong i{
	color: #2c8cf4;
	padding: 5px 5px;
	box-shadow: 0px 0px 3px 1px black;
	margin: 5px 5px;
}
.contact-about  .box1 strong a{
display: inline-block;
font-size: 17px;
padding: 0px 5px;
}

/*--------gallery start------------*/
.gallery{
	padding: 60px 0px;
}
.gallery-box {
	width: 100%;
	padding: 10px;

}
.gallery-box  img{
	width: 100%;
	margin: 20px 0px;
		border-radius: 5px;
		transition: 0.6s;
	filter: brightness(0.6);
}
.gallery-box  img:hover{
	border-radius: 40px;
	filter: brightness(1.1);
	transition: 0.6s;
}

/*-----footer-design start-------*/
.footer-design{
	border-top: 10px solid #2c8cf4;
	padding: 50px 0px;
		background-image: url(img/sliders/slider5.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.footer-box{
	width: 100%;
	padding: 20px 0px;
}
.footer-box h5{
	width: 70%;
	padding: 0px 10px;
	color: white;
	font-weight: 600;
	font-size: 24px;
	background: linear-gradient(180deg, #2d2db0 -65%, #2c8cf4 110%);
}
.footer-box p{
	color: white;
	font-size: 17px;
}
.footer-box ul{
	margin: 0px;
	padding: 10px 0px;
}
.footer-box ul li a{
	display: block;
	color: white;
	font-size: 17px;
	font-weight: 600;
	margin: 5px 0px;
	padding: 5px 5px;
}
.copyright{
	text-align: center;
	padding: 10px;
	margin: 0px;
	background:#fd0002;
}
.copyright p{
	color: white;
	font-weight: 400;
	font-size: 17px;
}
.copyright p a{
	display: inline-block;
	color: white;
	padding: 0px 5px;
	font-weight: 600;
	font-weight: 18px;
	font-style: italic;
}

/*--------main-contact-design start-------*/
.main-contact-design{
	padding: 50px 0px;
		background: #f5f5f5;
}
.main-contact-design .col-lg-7{
	padding: 0px;
	margin: 0px;
}
.main-contact-design .col-lg-5{
	padding: 0px;
	margin: 0px;
}
.contact-box{
	width: 100%;
	padding: 10px 20px;
	margin: 0px;
}
.contact-box1{
	margin-top: 10px;
	background: white !important;
}
.contact-box img{
width: 100%;
}
.contact-box form{
	width: 100%;
}
.contact-box form input{
	display: inline-block;
	width: 47%;
	padding: 12px 10px;
	margin: 10px 5px;
	outline: none;
}
.contact-box form .change-size{
		width: 97% !important;
}
.contact-box form textarea{
	width: 97%;
	padding: 15px 10px;
	margin: 10px 5px;
	outline: none;
}
.contact-box form button{
	width: 97%;
	padding: 10px 10px;
	margin: 10px 5px;
	outline: none;
	background: #fd0002 ;
	font-weight: 600;
	font-size: 18px;
}
/*_--------haeder-slider-design start=========*/
.haeder-slider-design{
	padding: 100px 0px;
background-image: url(img/sliders/slider4.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.haeder-slider-design1 {
	background-image: url(img/sliders/slider5.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.slider-design-box{
	text-align: center;
	padding: 50px;
}
.slider-design-box h1{
	color: white;
	font-size: 45px;
}
.slider-design-box a{
	font-size: 18px;
	display: inline-block;
	padding: 0px 5px;color: white;
}

/*--------contact-button------*/
.contact-button{
	position: fixed;
	left: 0px;
	bottom: 0px;
}
.contact-button img{
	width: 40%;
	margin: 5px 0px;
}

/*-----location-section start--------*/
.location-section{
	padding: 50px 0px;
}
.location-section .location-box{
	padding: 10px;
	width: 100%;
	text-align: center;
	background: #fd0002;
}
.location-box ul{
	padding: 0px;
	margin: 0px;
}
.location-box ul li a{
 display: block;
 margin: 10px 0px;
 padding: 10px;
 background: white;
 font-weight: 600;
 font-size: 18px;
 transition: 0.6s;
}
.contact-box2 form input{
	width: 18%;
}
.contact-box2 form textarea{
	width: 96%;
}