/* your CSS goes here*/
.title {color: #fa9746;margin-bottom: 30px;position: relative; text-align:center;}
/*.title::before {
  position: absolute;
  text-align:center;

  top: 0;
  height: 20px;
  width: 20px;
  transform: rotate(45deg);
  background-color: #7499f1;
  box-shadow: 0px 4px 4px 0px #aaa;
  border-radius: 4px;
  content: '';
}
.title::after {
  position: absolute;
  text-align:center;

  top: 25px;
  height: 14px;
  width: 14px;
  transform: rotate(45deg);
  background-color: #7499f1;
  box-shadow: 0px 4px 4px 0px #aaa;
  border-radius: 4px;
  content: '';
}*/
 /* services */
.services {
    padding:40px;
  position: relative;
  background-color:#f8f9fa;
}
.services .square {
  height:200px;
  width: 200px;
  margin: 30px auto 40px;
  position: relative;
  border-radius: 10px;
  padding: 10px;
  background-color:#f8f9fa;
  border: 2px dotted #eaf3fa;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.square i {
  transform: rotate(40deg);
  display: block;
  color: #eaf3fa;
  font-size: 40px;
  padding-top: 17px;
  padding-right: 14px;
}

.img1 {
  transform: rotate(-40deg);
   height:150px;
  width: 150px;

}
/*.services .square::before {
  position: absolute;
  left: -10px;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #fa9746;
  content: '';
}*/
/*.services .square::after {
  position: absolute;
  left: 50px;
  top: 150px;
  width: 1px;
  height: 100%;
  background-color:#fa9746;
  content: '';
  transform: rotate(90deg);
}*/

.services .serv .num
 {
   width: 60px;
   height: 60px;
   background-color: #7499f1;
   box-shadow: 0px 0px 15px 0px #00a9d3;
   margin: -38px auto 15px auto;
   border-radius: 50%;
   color: #fff;
   font-size: 30px;
    padding-top: 7px;
    border: 1px dashed;
  }
.services .serv h5 {color: #fa9746;}
.services .serv p {color: #777;}
.services .serv hr {
  width: 30px;
  border-top: 3px solid rgb(0 169 211);
}


.img1 {
width: 100%;
height: auto;
display: block;
object-fit: cover;
 transform: rotate(0deg);
}
.hexagon-gallery {
margin: auto;
margin-top: 50px;
max-width: 1000px;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 200px;
grid-gap: 14px;
padding-bottom: 50px;
}
.hex {
display: flex;
position: relative;
width: 240px;
height: 265px;
background-color: #424242;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

}