*{
    margin: 0;
    padding: 0;
}



.bg{
    background:url(img/Rectangle\ 1.png)no-repeat;
    width: 100%;
  
}

.detail{
   position: relative; 
   display: flex;justify-self: unset;
   justify-content: center;
   align-items: center;
flex-wrap: wrap;

}
.detail .hexagon::before{
    content: '';
    position: absolute;
    bottom: -70px;
    height: 60px;
    width: 100%;
    background: radial-gradient(rgba(0,0,0,0.15),transparent,transparent);

    border-radius: 50%;
    transition: 0.5%;
}
.detail .hexagon:hover::before{
    opacity: 0.8;
    transform: scale(0.8);
}
.detail .hexagon{
    position: relative;
    width: 350px;
    height: 400px;
    margin: 50px 20px 70px;
}
.detail .hexagon .shape{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background: black;
    clip-path: polygon(0 25%, 50% 0,100% 25%, 100% 75%, 50% 100%, 0 75%);
    transition: 0.5s;
    
}
.detail .hexagon :hover .shape{
 transform: translateY(-30px);
}
.detail .hexagon .shape img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.detail .hexagon .shape .content{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    background: linear-gradient(45deg,#03a9f4,rgba(3,169,244,0.5));
    color: white;
    opacity: 0;
    transition: 0.5s;

}
.detail .hexagon:hover .shape .content{
    opacity: 1;
}





.speciality{
    position: relative; 
   display: flex;justify-self: unset;
   justify-content: center;
   align-items: center;
flex-wrap: wrap;
}




.speciality .hex::before{
    content: '';
    position: absolute;
    bottom: -70px;
    height: 60px;
    width: 100%;
    background: radial-gradient(rgba(0,0,0,0.15),transparent,transparent);

    border-radius: 50%;
    transition: 0.5%;
}
.speciality .hex:hover::before{
    opacity: 0.8;
    transform: scale(0.8);
}
.speciality .hex{
    position: relative;
    width: 250px;
    height: 250px;
    margin: 100px 200px 70px;
    
}
.speciality .hex .shapes{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background: black;
    clip-path: polygon(0 25%, 50% 0,100% 25%, 100% 75%, 50% 100%, 0 75%);
    transition: 0.5s;
    
}
.speciality .hex :hover .shapes{
 transform: translateY(-30px);
}
.detail .hexagon .shape img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.speciality .hex .shapes .content{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    background: linear-gradient(45deg,#03a9f4,rgba(3,169,244,0.5));
    color: white;
    opacity: 0;
    transition: 0.5s;

}
.speciality .hex:hover .shapes .content{
    opacity: 1;
}


.spe{
    margin-top: 220px;
}



footer{
    background: url(img/footer.png)no-repeat;
    width: 100%;
    height: 100%;
    background-size: contain;
    
    background-size: cover;
    
}