@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@500&display=swap');
*{
margin: 0;
padding: 0;
}
.header_div{
width: 100%;
background-image: url("../webimg/backgound.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.heading_div{
padding: 20px;
}
.heading_div h1{
text-align: center;
color: #fff;
text-shadow: 2px 2px #000;
font-family: 'Cabin', sans-serif;
}
.main_div{
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
height: 60vh;
}
.main_div div{
width: 250px;
height: 220px;
}
.main_div div a{
text-align: center;
margin-top: 20px;
width: 250px;
}
.main_img{
margin: auto;
display: block;
}
.main_img img{
border-radius: 30px;
width: 250px;
height: auto;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 200px;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 200px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black;
}

.flip-card-back {
	padding: 5px 10px;
  background-color: #370000;
  color: white;
  transform: rotateY(180deg);
}
.flip-card-back h1{
	font-size: 20px;
}
.flip-card-back p{
	font-size: 14px;
	text-align: left;
	font-family: 'Cabin', sans-serif;
}
a .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
	background: rgb(48,0,0);
    background: linear-gradient(170deg, rgba(48,0,0,1) 0%, rgba(206,0,0,1) 100%);
}

.icon_div{
display: flex;
flex-wrap: wrap;
background-color: #370000;
justify-content: center;
}
.icon_div div {
width: 230px;
margin: 10px;
padding: 0px 10px;
text-align: center;
line-height: 55px;
font-size: 20px;
color: #fff;
}
.icon_div div:hover {
background-color: #900000;
transition-duration: 1s;
}
.title_div{
	width: 100%;
	padding: 5px;
	margin-top: 10px;
}
.title_div p{
	font-size: 30px;
	text-align: center;
	align-items: center;
	color: #580000;
	font-family: 'Cabin', sans-serif;
}

.newspaper_div{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.newspaper_div .news_sub {
width: 230px;
margin: 10px;
padding: 0px 10px;
color: #000;
height: 100px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.newspaper_div div img{
	height: 100%;
	padding: 10px;
}

.icon_img_div img{
	display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 100px;
}
.icon_img_div p{
	text-align: center;
	font-weight: bold;
	margin-top: 20px;
}

.category_div{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.category_div .category_sub {
width: 230px;
margin: 10px;
padding: 10px 10px;
color: #000;
height: 100px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.category_div div img{
	height: 100%;
}
.category_sub h4{
	color: #010083;
	font-weight: bold;
	font-size: 18px;
}
.category_sub p{
	color: red;
	font-size: 12px;
	font-weight: bold;
}
.city_div{
	margin: 20px;
	text-align: left;
	font-weight: bold;
}
.city_div .city{
	padding: 10px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.city_div i:hover{
	color: #007BFF;
}

@media screen and (max-width:800px) {
.heading_div h1{
font-size: 20px;
}
.main_div{
height: auto;
justify-content: center;
gap:10px;
padding-bottom: 20px;
flex-wrap: wrap;
height:auto;
}
.main_div div{
margin-top: 20px;
}
.icon_div {
	margin-top: 60px;
}
}