@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap");

*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
/* css variables */
/* gloabal styles starts here */
:root {
--primary: #ddd;
--dark: #333;
--darkorange: darkorange; /*main color*/
--white: #fff;
--darkgodenrod: darkgoldenrod;
--fadedwhite: #bbbbbb;
--blue: #047aed;
--backgroundd: #2c3e50;
--blackish: #131313;
--pureblack: #000000;
--gradient1: linear-gradient(to right, rgba(8, 97, 138, 0.267), #575154);
--backgroundgrad1: -webkit-linear-gradient(to right, #fcb045, #790824d0, #0d72c5);
--backgroundgrad2: linear-gradient(to right, #fcb045, #e61616, #e9c70a);
--colorgradient: linear-gradient(to top, #ff0844 0%, #ee410c 100%);
--colorgradient3: linear-gradient(to top, #ff087b 0%, #ed1a52 100%)
--grdnt: linear-gradient(to right, rgba(153, 49, 153, 0.267), #a0477b);
--formshadow: 0 3px 10px rgba(0, 0, 0, 0.7); /*0 horizontal offset, 3px vertical offset, 10px blur,color :rgba() */
--gridshadow: 0 1px 5px rgba(104, 104, 104, 0.8);
--box-shadow1: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.9);
--box-shadow2: 0 4px 8px 0 rgba(167, 78, 140, 0.9),
0 6px 20px 0 rgba(0, 0, 0, 0.9);
}

.services .icon-box {
    padding: 30px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    /* background: #fff; */
    background: slateblue;
    box-shadow: 0 0 29px 0 rgba(37, 75, 179, 0.12);
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    z-index: 1;
  }
  .services .icon {
    text-align: center;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background: skyblue;
    transition: all 0.3s ease-in-out;
  }
  .services .icon i {
    /* font-size: 36px; */
    /* line-height: 1; */
    color: orangered;
    text-align: center;
    position: relative;
  }
  .readmore {
    margin-top: 15px;
    display: inline-block;
    color: skyblue;
    text-align: left;
  }
  .readmore:hover{
    color: wheat;
  }
  
  
   .searchbox-wrapper{
    margin: 10px auto;
    }
    .searchbox{
    flex: 1;
    position: relative;
    }
    .searchbox button{
    position: absolute;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border: none;
    top: 0;
    left:0;
    font-size: 18px;
    transform: scale(1);
    color: slateblue;
    background: transparent;
    }
    .search-input {
    width: 190px;
    box-sizing: border-box;
    border: 2px solid slateblue;
    border-radius: 4px;
    font-size: 18px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    }
  
    .search-input:focus {
    width: 100%;
    outline: none;
    box-shadow: 0 1px 5px  slateblue;
    /* box-shadow: 0 1px 5px rgba(104, 104, 104, 0.9); */
    /* box-shadow: 0 1px 5px  #ff0844,#ee410c; */
    border-color: slateblue;
    }

     /* ---------WHATSUP ICON ANIMATION */
 .whatsup{
  color: rgb(18, 236, 109);
  background: transparent;
  padding: 12px;
  text-align: center;
  border-radius: 50%; 
  position: fixed;
  left: 40px;
  bottom: 5px;
  cursor: pointer;
  transition: opacity 0.5s;

  animation: scaleup 4s ease-in-out infinite;
}
   @keyframes scaleup {
  0%{
      transform: scale(1.3);
  }
  50%{
      transform: scale(1);
  }
  100%{
      transform: scale(1.3);
  }
}

.proj1{
  font-size: 20px;
  text-align: right;
}
.proj2{
  font-size: 20px;
  margin-top: 60px;
  margin-bottom: -40px;
  /* margin: auto; */
  text-align: center;
}