.row{
  margin: 0;
}
.rating{
      color: #f8aa01;
  }
*{
box-sizing: border-box;
max-width: 100%;
}
    /*hero*/
    .header{
      width: 100%;
      height: 550px;
      background-image: linear-gradient(rgba(14, 33, 59, 0.5),rgba(77, 114, 145, 0.5)),url(../images/hero.webp);
      background-position: center;
      background-size: cover;
      overflow-x: hidden;
      padding:80px 0 0 10px;
    }
    .content{
      margin: 9% 0 0 9%;
      color: #fff;
    }
    .content h1{
      font-size:80px;
      line-height: 80px;
      font-weight: 600;
    }
    .content p{
      max-width: 500px;
      line-height: 28px;
      opacity: 0;
    }
    .links{
      margin-top: 30px;
      opacity: 0;
    }
    .slide-left{
      animation: slideleft 1s linear forwards;
    }
    p.slide-left{
      animation-delay:1s ;
    }
    .links.slide-left{
      animation-delay: 1s;
    }
    @keyframes slideleft {
      0%{
        transform: translate(100px);
        opacity: 0;
      }
      100%{
        transform: translate(0px);
        opacity: 1;
      }
      
    }
    /*Hero end*/
/*Navbar*/
  
.nav-link{
  color: white;
}
.nav-link:hover{
 color: black;
}
.nav-item{
  font-size: 20px;
  padding: 5px;
  text-align: center;
}
.nav-item:hover{
  border-bottom: 3px solid white;

  border-radius: 5px;
}

@media only screen and (max-width: 991px) {
  .navbar{
      background-color:black ;
  color:white;
  }
}
/*End Navbar*/
/*Cards*/
.flip-card {
background-color: transparent;
height: 400px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: left;
transition: transform 0.8s;
transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {

  background-position: center;
  background-size: cover;
}

/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
/*End of Cards*/
/*who are we*/

.line1{
      border-bottom: 5px solid blue;
      width: 80px;
  }
/*end who are we*/
.ls{
font-size: 22px;
margin-right: 15px;
}
.fb{
color: #3b5998;
}
.is{
color: #d62976;
}
.gl{
color:#ff3e30;
}
.main{

display: flex;
cursor: pointer;
}
.icon{
position: relative;
width: 60px;
height: 60px;
margin: 10px;
border-radius: 50px;
transition: all .8s;
}
.icon:hover{
background: #e60073;
box-shadow: 0 0 20px #e60073 ;
}
.icon:hover:nth-child(2){
background: #1877f2;
box-shadow: 0 0 20px #1877f2 ;
}
.icon:hover:nth-child(3){
background: #25d366;
box-shadow: 0 0 20px #25d366;
}
.icon:hover:nth-child(4){
background: #1da1f2;
box-shadow: 0 0 20px #1da1f2;
}
.icon i{
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
svg circle{
stroke-dasharray: 110;
transition: all .8s;
}
.icon:hover svg circle{
stroke-dasharray: 220;
}
.navbar-inner{
background-color: transparent;
}


.chat-button {
  position: fixed;
  bottom: 0;
  right: 0px;
  z-index: 999;
}

.chat-button a {
  display: block;
  padding: 6px ;
  border-radius:10%;
  background-color:#25d366;
  text-align: center;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.chat-button a:hover {
  transform: scale(1.1);
  background-color:#25d366;
  box-shadow: 0 0 20px #25d366;
}
.bord{
  border-bottom: 1px solid black;
}