*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {   
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
    background-color: dimgrey;
    border: 2px solid red;
}

.container{
    width: 1350px;
    height: auto;
	}
.h2{
    background-color: chartreuse;
    width: 1350px;
    padding-bottom: 10px;
   font-size: 24px;
 }
.header {
   width: 1350px;
    }
.header img{
    width: 1350px;
}
.menu-bar{
   width: 1350px;
     }
.menu-bar ul {
   list-style: none;
    border-radius: 8px;
    }
.menu-bar ul li {
    background-color: mediumblue;
    border: 8px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    position: relative;
    width: 160px;
    margin-left: 40px;
    float: left;
}
.menu-bar ul li a {
    text-decoration: none;
    color: #fff;
    display: block;
}

.menu-bar ul li a:hover {
    background-color: red;
}

.active,
.menu-bar ul li :hover {
    border-radius: 5px;
}
.menu-bar ul ul {
    position: absolute;
    display: none;
    margin-left: -40px;
}

.menu-bar ul li:hover > ul {
    display: block;
}

.menu-bar ul .fa {
    margin-right: 5px;
}

.menu-bar ul ul ul {
    margin-left: 120px;
    top: 0px;
}
/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 10%;
}
.column.side img{
    width: 110px;
    height: 110px;
}

/* Middle column */
.column.middle {
  width: 70%;
}
.column.middle img{
    height: 250px;
    width: 250px;
}
/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

.midcontent{
    column-count: 3;
    height: auto;
    width: 1200px;
    margin-top: 40px;
    margin-left: 10px;
}
.row{
    float: left;
}
.midcontent b1{
    width: 110px;
    height: auto;
    
}
.col{
  float: left;
  width:24.3%;
    height:250px;
     background: linear-gradient(180deg, green 0%, yellow 100%);
    margin-top:10px;
    margin-left: 8px;
    border-radius: 8px;
   }

.col1{
  float: left;
  width: 32.40%;
    height: 280px;
     background: linear-gradient(180deg, #FC466B 0%, #3F5EFB 100%);
    margin-top:10px;
    margin-left: 10px;
    margin-right: -6px;
      border-radius: 8px;
    font-family: sans-serif;
    font-size: 18px;
   }
.col1 p{
    margin-left: 30px;
    font-size: 18px;
    line-height: 2.0;
    text-align: left;
    
}
.col1 h4{
    font-size: 24px;
    text-align: center;
    text-decoration: underline;
}
/* Clear floats after the columns */
.row1:after {
  content: "";
  display: table;
  clear: both;
    padding: 10px; 
}
.footer{
    background-color: darkcyan;
    height: 40px;
    width: 1330px;
    float: center;
    line-height: 40px;
    margin-left: 5px;
    text-align: center;
    }