*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
 }

 /* common css start  */

 ul,ol{
  list-style: none;
 }
 a{
  text-decoration: none;
 }

 body{
    font-family: "Inter", sans-serif;
 }

 h4{
  font-size: 36px;
  font-weight: 600;
  color: #4D4D4D;
  line-height: 44px;
 }
 p{
  font-size: 14px;
  font-weight: 400;
  color: #717171;
  line-height: 20px;
  
 }
 .btn{
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  padding: 14px 30px;
  background:#4CAF4F;
  border-radius: 4px !important;
  border: 1px solid transparent;
  transition: 0.4s;
 }
 .btn:hover{
  border-color: #4CAF4F;
  color: #4CAF4F;
 }
 /* common css end  */

 .background{
  background-color: #F5F7FA;
 }
 /* navbar part start  */
 .navbar{
  padding: 30px 0;
 }
.navbar ul{
  gap: 25px;
}
.navbar .nav-link{
   font-size: 16px;
  font-weight: 400;
  color: #18191F;
  transition: 0.4s;
}
.navbar .nav-link:hover{
  color: #4CAF4F;
}
.navbar .buton .btn{
  margin-left: 14px;
}
.navbar .buton .btn:first-child{
  color: #4CAF4F;
  background: transparent;
}
.navbar .buton .btn:hover:first-child{
  background-color: #4CAF4F;
  color: #fff;
}
 /* navbar part end  */

 /* banner part start  */
 .banner{
  padding: 96px 0;
 }
 .banner .row{
  column-gap: 164px;
 }
 .banner .row h1{
  font-size: 54px;
  font-weight: 600;
  color: #4D4D4D;
  width: 630px;
  line-height: 76px;
 }
 .banner .row h1 span{
  color: #4CAF4F;
 }
 .banner .row p{
  padding: 16px 0 32px 0;
  width: 650px;
 }
 /* banner part end  */

/* client part start  */

.client{
  padding: 40px 0 16px 0;
}
.client .logo-part{
  margin-top: 40px;
}
/* client part end  */

/* community part start  */
.community{
  padding: 40px 0;
}
.community .top-text h4{
  text-align: center;
  width: 542px;
  margin: 0 auto;
}
.community .top-text p{
  text-align: center;
  margin: 8px 0 0 0;
}
.community .card{
  border: 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: 0.4s;
}
.community .card:hover{
  transform: translateY(-5px);
}
.community .cart-part h5{
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  width: 210px;
  margin: 16px auto 0 auto;
}
.community .cart-part p{
  width: 257px;
  margin: 8px auto;
}
.community .cart-part{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin-top: 25px;
}
/* community part end  */

/* Pixelgrade part start  */
.Pixelgrade{
  padding: 52px 0 100px 0;
}

.Pixelgrade .text-part h4{
  width: 580px;
}
.Pixelgrade .text-part p{
  margin: 16px 0 31px 0;
  width: 601px;
}
/* Pixelgrade part end  */

/* busniess part start  */
.busniess{
  background-color: #F5F7FA;
  padding: 64px 0;
}
.busniess .left h4{
  width:378px;
}
.busniess .left h4 span{
  color: #4CAF4F;
}
.busniess .right-part p{
  margin: 0;
}
.busniess .right-part h5{
  font-size: 28px;
  font-weight: 700;
}
.busniess .right{
  row-gap: 40px;
}
.busniess .right-part{
  display: flex;
  align-items: center;
  gap: 16px;
}
/* busniess part end  */

/* customer part start  */
.customer{
  padding: 32px 0;
  background-color: #F5F7FA;
}
.customer .main-div{
  gap: 70px;
}
.customer .main-div span{
  color: #4CAF4F;
  font-size: 20px;
  font-weight: 600;
  margin: 16px 0 8px 0;
}
.customer .main-div p{
  width: 650px;
}
.customer .customer-logo{
  margin: 32px 0 0 0;
}
.customer .customer-logo a{
  color: #4CAF4F;
  position: relative;
}
.customer .customer-logo i{
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.4s;
  opacity: 0;

}
.customer .customer-logo a:hover i{
  right: -50px;
  opacity: 1;
}
/* customer part end  */

/* marketing part start  */

.marketing{
  padding: 48px 0 196px 0;
}

.marketing .text p{
  width: 550px;
  margin: 0 auto;
  text-align: center;
}
.marketing .card-pard{
    display: flex;
    justify-content: space-between;
  }
.marketing .card-pard .image{
  width: 370px;
  height: 280px;
  overflow: hidden;
  position: relative;
 
}
.marketing .card-pard .image img{
  width: 100%;
  height: 100%;
}
.marketing .card-pard .sub-cart{
  width: 300px;
  background-color: #F5F7FA;
  height: 170px;
  box-shadow: 1px 5px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  margin-top: -80px;
  margin-left: 35px;
  position: absolute;
  border-radius: 8px;
}

.marketing .card-pard .sub-cart p{
  font-size: 20px;
  font-weight: 600;
  color: #717171;
  width: 275px;
  margin: 0 auto;
  text-align: center;
  padding: 30px 0 16px 0;
  line-height: 28px;
}
.marketing .card-pard .sub-cart a{
  font-size: 20px;
  font-weight: 600;
  color: #4CAF4F;
  position: relative;
}
.marketing .card-pard .sub-cart i{
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.4s;
  opacity: 0;
}
.marketing .card-pard .sub-cart a:hover i{
  right: -50px;
  opacity: 1;
}
.marketing .card-pard{
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
}
/* marketing part end  */

/* Pellentesque part start  */
.Pellentesque{
  padding: 32px 0;
}
.Pellentesque h2{
  font-size: 54px;
  font-weight: 600;
  color: #4D4D4D;
  width: 630px;
  line-height: 76px;
  text-align: center;
  margin: 0 auto;
}
.Pellentesque .top-part{
  text-align: center;
}
.Pellentesque a{
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  padding: 14px 40px;
  background:#4CAF4F;
  border-radius: 4px !important;
  border: 1px solid transparent;
  transition: 0.4s;
  position: relative;
  display: inline-block;
  margin-top: 32px;

}
.Pellentesque i{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.4s;
  opacity: 0;

}
.Pellentesque a:hover i{
  opacity: 1;
  right: 11px;
}
/* Pellentesque part end  */

/* footer part start  */

.footer{
  background-color: #263238;
  padding: 64px 0 74px 0;
}
.footer .text-part p{
  margin: 40px 0;
  font-size: 14px;
  font-weight: 400;
  color: #F5F7FA;
  width: 220px;
  line-height: 25px;
}
.footer .text-part .icons{
  display: flex;
  gap: 16px;
}
.footer .text-part i{
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  width: 32px;
  height: 32px;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  border-radius: 50%;
  transition: 0.4s;
}
.footer .text-part i:hover{
 color: #4CAF4F;
 background-color: #fff;
}
.footer .menus h6{
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
}
.footer .menus ul{
  padding: 0;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer .menus li a{
  font-size: 14px;
  font-weight: 400;
  color: #F5F7FA;
  transition: 0.4s;
}
.footer .menus li a:hover{
  color: #4CAF4F;
}

.footer .menus input{
  margin-top: 24px;
  background-color: rgba(255, 255, 255, 0.20);
  color: #D9DBE1;
  border: none;
  padding: 9px 60px 11px 12px;
  border-radius: 8px;
} 
.footer .menus input::placeholder{
  color: #D9DBE1;
}
/* footer part end  */