* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif
}
  .fa-facebook-square{
      color: #3b5998;
      font-size: xx-large;
   }
   .fa-google-plus-square{
       font-size: xx-large;
      color: #dc4e41;
   }
   .fa-twitter-square{
       font-size: xx-large;
      color:#55acee;
   }
   .ser .container{
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
   }
   .ser .container span{
    text-transform: uppercase;
    display: block;
   }
   .text{
    color:orangered;
    font-size: 36px;
    font-weight: bolder;
    margin-bottom: 20px;
    position: relative;
    animation: text 3s 1;
   }
   @keyframes text{
    0%{
      color:rgb(235, 102, 54);
      margin-bottom: -40px;
    }
    30%{
      letter-spacing: 10px;
      margin-bottom: -40px;
    }
    85%{
      letter-spacing: 6px;
      margin-bottom: -40px;
    }
   }
  .card{
   width: 250px;
  }

  .discard img {
   width: 100%;
   height: 100%;
    transition:linear;
   border-radius: 8px;
   }

   .discard:is(:hover, :focus) img 
   { transform: scale(1.1); 
   }
   
   .social-link i{
color: white;
   }
   
   .card{ border:2px gray; }
   .card:hover{ cursor: pointer;
     transition: all 0.3s (0.445,0.05,0.55,0.95);
  }
  .card:hover{
     filter: brightness(120%);
     transform: scale(1.03);
     cursor: pointer;
  }
   .card-body{
      text-align: left; 
     }
   .card-body h4{ 
     font-size: 19px;
      font-weight: bold; 
      color: rgb(62,62,62);
       margin-bottom: 0;
       transition: 0.5s; }
   .card-body p{ 
     font-size: 15px;  
     transition: 0.5s;
  }

   .location-content{
     display: flex;
     flex-wrap: wrap;
 }
 .col-content{
     position: relative;
     filter:brightness(95%);
     transition: all 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
 
 }
 .col-content img{
     margin-bottom: 40px;
     height: 80%;
     border-radius: 27px;
     width: 60%;
     margin-left: 20%;
 }
 .col-content h5{
     position: absolute;
     font-size: 28px;
     color: white;
     font-weight: 500;
     left: 20px;
     text-align: center;
     bottom: 140px;
     cursor: pointer;
     margin-left: 25%;

 }

 .col-content p{
     position: absolute;
     font-size: 22px;
     left: 20px;
     bottom: 105px;
     cursor: pointer;
     text-align: center;
     margin-left: 25%;
     color: orangered;
 }
 
 .col-content:hover{
     filter: brightness(120%);
     transform: scale(1.03);
     cursor: pointer;
 }
 .card p:hover{
  color: rgb(255, 102, 0);
 }
 h1:hover{
  color: rgb(42, 206, 206);
 }
.services .box-container{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(4rem,1fr));
gap: 1.5rem;
}
.services .box-container .box{
padding: 2rem 1rem;
text-align: center;
height: 80%;
background-color: rgb(170, 7, 170);
}
.services .box-container .box img{
height: 5rem;
color: white;
margin-top: -10px;
}
.services .box-container .box:hover{
background-color: rgb(219, 221, 85);
}
.tour-item .card-body{
margin-top: 20px;
}
.card-title{
font-weight: bold;
}
.footer .container-fluid{
margin-top: -20%;
}
 @media only screen and (max-width: 850px) {
 
.video{
  width: 100%;
  height: 70%;

}
.ser .container .text{
margin-top: -60%;
}
.services .box-container .box{
width: 100%;

}
.services .box-container .box h3{
margin-right: 12px;
}
.card{
  margin-left: 10%;
}
.card-title{
font-size: large;
}
.col-content p{
text-align: center;

}
.tour-item{
  margin-left: 30px;    
}
.col p{
font-size:smaller;
}
 }