@import url("base.css");

.headline{
	text-align:center;
	padding:1px;
	background:linear-gradient(to right,#dff6ff,#bfe9ff);
}


main {
	background-image: url("/static/images/cctv_image.png");
	background-size: 100vw 100vh;
}	


.hero img{
width:100%;
height:400px;
object-fit:cover;
}

.section{
padding:40px;
text-align:center;
}

.services{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
}

.card{
background:white;
padding:10px;
width:200px;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.card:hover {
	transform:scale(1.05);
	background-color:purple;
}


.myul {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	text-align: left;
}

.myli::before {
	content: "\2713";
	margin-right: 10px;
	color: blue;
	white-space: nowrap;
}

.myli:hover {
	background-color: rgb(135, 72, 148);
	color: rgb(23, 14, 25);
	cursor:pointer;
	border-radius: 20px;
	font-size: 1.2em;
}

.feature_card{
background:white;
padding:10px;
width:350px;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
backdrop-filter: 10px;
}

.brands{
	width: 50%;
	text-align: center;
	background:white;
	padding:10px;
	width:350px;
	border-radius:10px;
	box-shadow:0 0 10px rgba(0,0,0,0.1);
	backdrop-filter: 10px;
	margin: 0 auto;
}