.top{
	grid-area: header;
	background-color: #008B8B;
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 5%;
	grid-template-areas: 
		"logo search top-right";
}
.logo{
	grid-area: logo;
	color: white;
	width: 40px;
	height: 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
		"img text";
}
.logo img{
	grid-area: img;
	height: 50px;
	width: 90px;
	padding-left: 2px;
}
.logo p{
	margin: 0px;
	width: 50px;
	grid-area: text;
	color: white;
	background-color: lightgrey;
}

.search{
	grid-area: search;
	color: white;
	padding-right: 200px;
}

.search input{
	height: 50px;
	width: 200px;
	border-radius: 40px;
	border: none;
}


.all{
	grid-area: all;

}
.popular{
	grid-area: popular;
}
.info{
	grid-area: info;

}
.ebook{
	grid-area: ebooks;

}
.sub{
	grid-area: sub;
	border-left: 2px solid white;
	
}
.sub button{
	background-color: red;
	border-radius:14px;
	opacity:0.9;
	border: none;
	height: 50px;
	width: 100px;
	font-size: 15px;
}
.links{
	padding-top: 15px;
	text-decoration: none;
	color: white;
}

.top-right{
	grid-area: top-right;
	color:white;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
	text-align: center;
	grid-template-areas: 
		"all popular info ebooks sub"
}


.all h3{
	color: blue;
}

.drop-list{
	text-align: left;
	color: #008B8B;
	list-style-type: none;
}

.dropbtn{
	border:none;
	background-color: #008B8B;
	color:white;
	font-size: 17px;
	padding-top: 15px;
	padding-bottom:  10px;
}

.content-blogs{
	background-color: #ffffff;
	display: none;
	position: absolute;
	z-index: 1;
	border-radius:20px;
	width: 40%;
	margin-right: 16%;
}
.content-pop{
	background-color:#ffffff;
	color:black;
	display: none;
	position: absolute;
	z-index: 1;
	height: 20%;
	border-radius:20px;
	width: 30%;
	margin-right: 30%;
}

.top-links{
	text-decoration: none;
	color: blue;
}
.col-blogs{
	float: left;
}

.show{
	display: block;
	
}


.main{
	grid-area: content;
	background-color: white;
	text-align: left;
	padding-bottom: 30%;
}

.heading {
	font-size: 30px;
	text-decoration: underline;
}

.mainheading {
	font-size: 40px;
	text-decoration: underline;
}

.description {
	font-size: 25px;
}

.copyR{
	grid-area:copyright;
	background-color: white;
	margin-top: 10px;
	color: black;
}

.bottom{
	grid-area: footer;
	background-color: #008B8B;
	display: grid;
	grid-template-columns: 300px 300px 300px 300px;
	padding: 20px;
	grid-column-gap: 20px;
	grid-template-areas: 
		" company blogs resources support"
		"copyright copyright copyright copyright";
	text-align: center;
}
.social{
	grid-area: social;
	background-color:#f1f1f1;
	text-align: center;
	
	padding-top: 20%;
}
.right{
	grid-area: side;
	background-color: #f1f1f1;
	text-align: center;
}

.wrapper{
	display: grid;
	background-color:#f1f1f1;
	margin: 0 auto;
	grid-template-columns: 1fr 6fr 1fr;
	grid-template-areas: 
		"header header header"
		"social content side"
		"footer footer footer";

}
.company{
	background-color: white;
	grid-area: company;
	
}
.blogs{
	background-color: white;
	grid-area: blogs;
	
	
}
.resources{
	background-color: white;
	grid-area: resources;
	
}
.support{
	background-color: white;
	grid-area: support;
	
}

.footer-lists{
	text-align: center;
	padding-left: 5%;
	list-style-type: none;
}
.grid_background {
	background-color:$gray-200;
}
.hov {
	background-color:#ffffff;
	padding:5%;
	margin:10%;
	border-radius: 10px;
	width:300px;
	height:250px;
	
}
/*.hov:hover {
  opacity:1;
}
*/


.flex-container {
	display:flex;
	background-color:#f1f1f1;
	
	}
	
.img-fluidd {
	border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  width:260px;
  height:130px;
}
.btn-btn-outline-success{
	
	background-color:#33ffff;
	opacity:0.7;
	border-radius:8px;

}

.navbar-custom {
  height: 200px;
  font-weight:bold;
}

.ourservices {
padding:100px 0px 60px;
height: 500px;

}
.ourservices h1{
	font-size:50px;
}

.rowsetting {
	margin:80px 0px;
}

.imgsetting{
	border-radius:50%;
	height:100px;
	width:100px;
	
}

.fa-building {
	margin-top:23px;
}
.fa-blogger {
	margin-top:24px;
}
.fa-book {
	margin-top:25px;
}
.fa-envelope {
	margin-top:25px;
}

.rowsetting  p{
 color: #6c757d!important;
padding: 10px;
}

.rowsetting h2 {
	margin-top:20px;
	font-weight:bold;
	font-size:30px;
}

.portfolio {
	height:1100px;
	width:100%;
	padding:50px 0px 50px;
	
}

.card {
	margin-top:40px;
}

.navbarbrand {
	font-size:40px;
	margin-top:3px;
	margin-bottom:130px;
	margin-right:50px;
}

.form {
margin-top:3px;
	margin-bottom:130px;
	margin-right:50px;	
}
.textStyle {
	margin-right:80px;
}