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

body {
  font-family: "DM Serif Display";
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

p {
  font-family: "Roboto";
}

h2:nth-of-type(1) {
  color: #023e7d;
}

.btn {
  font-family: "Roboto";
}

.navbar-nav {
  gap: 30px;
}

.navbar {
  background-color: #000;
}

.main-lawyer-banner {
  background-image: url(build.jpg);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  background-color: rgb(92, 132, 159);
  padding: 200px 0;
}

.card-right {
  background-image: url(intro.jpg);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  background-color: rgb(177, 224, 255);
  height: 300px;
  max-width: 100%;
}

.middle-banner {
  background-image: url(sky.jpg);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  background-color: rgb(92, 132, 159);
}

.law-cards {
  background-color: #f8f8f8;
}

.card-01 {
  background: white;
  max-width: 100%;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* Card icons animation */
i {
  animation: 10s color-icons infinite;
  transform-origin: center top;
}
@keyframes color-icons {
  0% {
    color: #023e7d;
  }
  50% {
    color: rgb(114, 158, 188);
  }
  100% {
    color: #023e7d;
  }
}
/* Main button animation */
.btn1 {
  animation: 7s btn1 infinite;
  transform-origin: center bottom;
}
@keyframes btn1 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
/* Card hover animation */
.card-01:hover {
  animation: 1s cards forwards;
  transform-origin: center top;
  transition: transform 1s;
}
@keyframes cards {
  0% {
    transform: scale(1);
  }
  50% {
    box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
  }
  100% {
    transform: scale(1.1);
  }
}
/* Responsiveness / Media Query for the Main Banner*/

@media only screen and (max-width: 992px) {
  .main-lawyer-banner {
    padding: 150px 0;
  }
}

@media only screen and (max-width: 768px) {
  .main-lawyer-banner {
    padding: 130px 0;
  }
}

@media only screen and (max-width: 576px) {
  .main-lawyer-banner {
    padding: 120px 0;
  }
}
@media only screen and (max-width: 480px) {
  .main-lawyer-banner {
    padding: 100px 0;
  }
}