@font-face {
    font-family: mikhak;
    src: url(../fonts/Mikhak.ttf);
}
@font-face {
    font-family: estedad;
    src: url(../fonts/Estedad.ttf);
}
body {
    background-color: #e6edd1;
    color: #56825c;
    font-weight: bold;
    font-family: mikhak;
}
span {
    display: flex;
    justify-content: center;
    align-items: center;
}
.title {
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}
.desc {
    font-size: 14px;
}
.header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: 250px;
    color: #ffffff;
    background-color: #86a389;
    border-radius: 0 0 20px 20px;
}
.profile-pic a img {
    width: 100px;
    height: 100px;
    outline: 3px solid #e6edd1;
    outline-offset: 3px;
    border-radius: 100%;
}
.contents {
    margin-top: 36px;
    padding: 0 33%;
}
.card-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 64px;
    margin-top: 16px;
    background-color: #a2cdb0;
    border-radius: 100px;
    font-size: 18px;
}
.card-box a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: inherit;
    text-decoration: none;
    width: 100%;

}
.icon {
    max-width: 100%;
}

.social-icon {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-3px);
    color: #fff;
}
.nazr-btn {
    background: linear-gradient(to left, #abe8ea, #a2cdc3);
    color: #115aba;
}
.adress {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 28px 0 16px 0;
}
.location {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.location div {
    border: 3px solid #56825c;
    border-radius: 5px;
    margin-bottom: 16px;
    max-width: 100%;
}
.location * {
    width: 100%;
}
@media only screen and (max-width: 1600px) {
  .contents {
    padding: 0 28%;
  }
}
@media only screen and (max-width: 700px) {
  .location {
    flex-direction: column;
  }
  .contents {
    padding: 0 5%;
  }
}