@charset "utf-8";

.footer{
    background-color: #1F1D1B;
    padding: 90px 0 1rem;
    color: #fff;
}

.footer-bg{
  width:80%;
  margin:0 auto;
  max-width:1430px;
}

.footer-top{
    padding-bottom: 2rem;
    border-bottom: 1px solid #DFB971;
    margin-bottom: 4rem;
}

.footer-top h2{
  font-size:clamp(2.5rem, 1.591rem + 3.03vw, 5rem);
  margin-bottom: 0.5rem;
 font-family: "Libre Bodoni", serif;
  font-weight: 400;
}

.footer-top h2 + p{
  color:#DFB971;
}

.footer-top-wrap{
  display:flex;
  margin-top:1.5rem;
  gap:20px;
}

.footer-top-item{
    width: calc((100% - 20px) / 2);
  padding:4rem 5%;
  background-color:rgba(223,185,113,0.1);
}

.footer-top-item h3{
  font-size:2rem;
  margin-bottom:1.5rem;
 font-family: "Libre Bodoni", serif;
  font-weight: 400;
}

.footer-top-item > p{
  margin-bottom:2rem;
  font-weight:600;
}


.footer-top-item:last-child{
position:relative;
}

.footer-top-item:last-child::before{
  content:"";
  position: absolute;
    width: 34%;
    aspect-ratio: 1 / 1;
  right:0;
  bottom:0;
    background: url(https://k9leatherart.com/system_panel/uploads/images/20250319174434676016.png) no-repeat center/contain;
}


.footer-bottom{
display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 0;
}

.footer-left{
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    width: calc(100% - 450px);
}


.footer-logo{
      width: 220px;
}

@media (max-width: 1600px) {
.footer-logo{
  width:150px;
}
}

@media (max-width: 1024px) {
.footer-logo{
  width:120px;
}
}

.footer-box{
      color: #DFB971;
}

.footer-tel{
    display: flex;
    align-items: center;
    font-size: clamp(2rem, 1.818rem + 0.61vw, 2.5rem);
    color: #fff !important;
    text-decoration: underline !important;
  gap:1rem;
  margin:12px 0;
}
.footer-tel:hover{
      color: #DFB971 !important;
}

.footer-address{
    font-size: clamp(0.875rem, 0.784rem + 0.3vw, 1.125rem);
}

.footer-box img{
  width:2.5rem;
}

.footer-mail{
    margin: 0 0 1rem;
}

.footer-mail a{
  color:#fff;
}

.footer-mail a:hover{
      color: #DFB971 ;
}

.footer-insta{
    display: flex;
    width: fit-content;
    margin: 1rem 0 0;
    gap: 1rem;
    align-items: center;
    color: #fff !important;
    text-decoration: underline;
    font-size: 24px;
    font-weight: bold;
}

.footer-insta:hover{
 color: #DFB971  !important;
  text-decoration: underline;
}

.footer-time{
  font-size:14px;
}


.footer-right{
      width: 400px;
    display: flex;
    flex-direction: column;
    gap: 220px;
}

.footer-right > p{
  color:#DFB971;
  text-align: end;
}

.footer-ul{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
}

.footer-ul a{
  color:#DFB971;
  font-size:1rem;
}

.footer-ul a:hover{
  color:#fff;
}

@media screen and (max-width: 1279px) {
  .footer-bg {
    width: 90%;
  }
  .footer-top-item{
    padding: 3rem 0 3rem 3%;
  }
.footer-bottom{
    flex-direction: column;
    gap: 2.5rem;
  }
  .footer-left{
    gap: 2rem;
    width: 100%;
  }
  .footer-right{
    gap: 40px;
    margin-left: auto;
  }
}

@media (max-width: 1023px) {
.footer-top-wrap {
    flex-direction: column;
  }
  .footer-top-item{
    width: 100%;
    padding: 2rem 5%;
  }
}

@media (max-width: 767px) {
  .footer-top-item h3{
    margin-bottom: 0.5rem;
  }
  .footer-top-item:last-child::before{
    width: 26%;
  }
  .footer-top{
    margin-bottom: 2rem;
  }
  .footer-left{
    flex-direction: column;
        gap: 1.5rem;
  }
  .footer-right{
        width: 100%;
     gap: 3.5rem;
  }
  .footer-logo{
  width:130px;
  margin: 0 auto;
}
  .footer-ul{
        flex-direction: column;
  }
  .footer-right > p {
    text-align: center;
  }
  .footer{
        padding: 2rem 0 ;
  }
  .footer-bottom{
        gap: 3.5rem;
  }

}