.service-card-img {
  position: relative;
  /* height: 260px; */
}
.service-card-icon {
  right: -2px;
  height: 50px;
  width: 50px;
  /* bottom: 28px; */
}
.blog-card {
  margin-top: 40px;
}

.blog-card h3 {
  font-family: "Mortend", sans-serif;
  font-size: 20px;
  width: 90%;
  align-self: start;
}
.blog-card h3 a{
  color: inherit;
}
.blog-card p {
  color: #717171;
  width: 80%;
}
.blog-card span {
  font-weight: 600;
  font-size: 12px;
}

/* blog search section  */
.blog-search {
  position: relative;
  --r: 30px;
  --s: 30px;
  --x: 40px;
  --y: 0px;
  width: 100%;
  background: hsl(0, 0%, 100%);
  border-radius: var(--r);
  --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000
        72%);
  --_g: conic-gradient(at calc(100% - var(--r)) var(--r), #0000 25%, #000 0);
  --_d: (var(--s) + var(--r));
  mask: calc(100% - var(--_d) - var(--x)) 0 var(--_m),
    100% calc(var(--_d) + var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 0, #0000 99%, #000 calc(100% + 1px))
      calc(-1 * var(--r) - var(--x)) calc(var(--r) + var(--y)),
    var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(var(--_d) + var(--y));
  mask-repeat: no-repeat;
  padding: 40px 40px 40px 40px;
  margin-top: 60px;
}

.search-box input {
  padding: 10px;
  background: #f7f7fd;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  width: 100%;
}
.search-box {
  position: relative;
}
.search-box button {
  position: absolute;
  right: 20px;
  top: 9px;
  border: none;
  background-color: transparent;
}
.blog-search h4 {
  font-size: 16px;
  font-weight: 400;
  font-family: "Mortend", sans-serif;
  margin-top: 30px;
}
.blog-search span {
  font-size: 12px;
}
.blog-search p {
  font-size: 12px;
  font-family: "Mortend", sans-serif;
}

.button-section button {
  border: none;

  background: rgba(16, 221, 222, 0.3);
  border-radius: 6px;
  width: 30%;
  padding: 10px;
  
}
.button-section {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
 
}

/* responsive design  */
@media only screen and (max-width: 1199px) {
  
  .service-card-icon {
    right: 2px;
    height: 30px;
    width: 30px;
    /* bottom: 20px; */
}
.blog-search {

  height: 60%;
}
}
@media only screen and (max-width: 992px) {
  
  .service-card-icon {
    right: 2px;
    height: 40px;
    width: 40px;
    bottom: 0px;
}
}
@media only screen and (max-width: 767px) {
  
  .service-card-icon {
    right: 2px;
    height: 60px;
    width: 60px;
    bottom: 0px;
}
}
@media only screen and (max-width: 576px) {
  
  .service-card-icon {
    right: 6px;
    height: 60px;
    width: 60px;
    bottom: -20px;
}
.blog-card h3 {
  
  margin-top: 15px;
}
}
@media only screen and (max-width: 500px) {
  
  .service-banner {
   
    height: 60vh;
    padding-left: 0px;
    align-items: center;
}
.service-banner h2 {
  font-size: 30px;
  font-weight: 600;
}
.service-banner a {
  text-align: center;
}
}
@media only screen and (max-width: 476px) {
  
  .service-card-icon {
    right: 0px;
    height: 60px;
    width: 60px;
    bottom: -25px;
}
.blog-card p {
  
  font-size: 14px;
}
.blog-card h3 {

  font-size: 18px;
}
}
@media only screen and (max-width: 400px) {
  .section-spacing {
    margin-bottom: 30px;
}
.design-card p {
  font-size: 14px;
}
.service-card-icon {
  right: -1px;
  height: 50px;
  width: 50px;
  bottom: -25px;
}
}