.footer {
  background-color: #151414;
  padding: 50px 0;
}

.footer-box,
.copyright-box {
  width: clamp(300px, 90%, 1500px);
  margin: 0 auto;
}

/* address start */
.address::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.5px;
  background-color: #312e2e;
  margin: 35px 0;
}

.address-box {
  display: grid;
  row-gap: 35px;
}

.box-content {
  display: flex;
  gap: 20px;
  justify-content: start;
  align-items: center;
}

.box-content i {
  font-size: 30px;
  color: var(--light-orange);
}

.address-info h3 {
  font-size: 1.1rem;
}

.address-info span {
  color: var(--gray);
  text-transform: capitalize;
}
/* address end */

/* footer content start */
.footer-content {
  display: grid;
  row-gap: 30px;
}

.logo-social-icon {
  display: flex;
  row-gap: 35px;
  flex-direction: column;
  justify-content: center;
}

.logo-social-icon a {
  display: block;
}

.logo-social-icon img {
  width: 90px;
  height: auto;
}

.logo-social-icon p {
  color: var(--gray);
  font-size: 14px;
  font-weight: normal;
}

.social-icon-list h3,
.useful-link h3,
.subscribe h3 {
  margin: 0 0 20px 0;
}

.icons {
  display: flex;
  column-gap: 15px;
  justify-content: start;
  align-items: center;
}

.icon-bg {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.fb-bg {
  background-color: #3b5998;
}

.twitter-bg {
  background-color: #55acee;
}

.google-bg {
  background-color: #dd4b39;
}

.icon-bg i {
  color: #ffffff;
  position: absolute;
  font-size: 22px;
}

/* useful link */
.useful-link-ul-list {
  display: flex;
  column-gap: 55px;
  justify-content: start;
  align-items: center;
}

.useful-link-ul-list a {
  display: block;
  margin: 10px 0;
  transition: color ease-in-out 300ms;
  -webkit-transition: color ease-in-out 300ms;
  -moz-transition: color ease-in-out 300ms;
  -ms-transition: color ease-in-out 300ms;
  -o-transition: color ease-in-out 300ms;
}

.useful-link-ul-list a:hover {
  text-decoration: underline;
  color: var(--light-orange);
}

/* subscribe */
.subscribe p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 20px 0;
}

.input-holder {
  display: flex;
  justify-content: start;
  position: relative;
  height: 60px;
}

.input-holder input[type="email"] {
  height: 100%;
  width: 100%;
  background-color: #2e2e2e;
  outline: none;
  border: none;
  padding: 0 20px;
  color: #ffffff;
}

.submit-btn {
  color: #ffffff;
  background-color: var(--light-orange);
  padding: 0 25px;
  border: none;
  cursor: pointer;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

.submit-btn i {
  font-size: 20px;
}
/* subscribe */

.useful-link h3::after,
.subscribe h3::after {
  content: "";
  display: block;
  width: 25%;
  height: 2px;
  background-color: var(--light-orange);
}
/* footer content end */

/* copywrite start */
.copyrite {
  display: flex;
  align-items: center;
  background-color: #202020;
  height: 50px;
}

.copyright-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright-box p,
.copyright-box ul {
  flex: 0 1 auto;
}

.copyright-box p {
  color: var(--gray);
  font-size: 13px;
}

.copyright-box p span {
  color: var(--light-orange);
}

.copyright-box ul {
  display: flex;
  gap: 20px;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
}

.copyright-box ul li a {
  font-size: 13px;
}
/* copywrite end */

/* responsive media query */
@media (min-width: 640px) {
  .address-box {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    justify-content: center;
  }
  .footer-content {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
}
@media (min-width: 960px) {
  .address-box {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    justify-content: center;
  }
  .footer-content {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }
}
