.page-single-frame {
  padding: 96px 16px 80px;
}

.page-single-container {
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
}

.page-single-inner {
  background: #fff;
  border-radius: 56px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 32px;
  width: 100%;
}

.single-breadcrumbs {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 12.8px;
  line-height: 1.5;
  margin-bottom: 48px;
}

.single-breadcrumbs a,
.single-breadcrumbs span {
  text-decoration: none;
  color: rgba(1, 7, 30, 0.64);

}

.single-breadcrumbs a:hover {
  font-weight: 500;
  transform: translateY(-1px);
}

.single-breadcrumbs__sep {
  opacity: .35;
}

.single-title {
  margin: 0 0 23px;
  font-size: 48px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -2.4px;
  max-width: 558px;
}

.single-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.single-meta {
  display: flex;
  align-items: end;
  gap: 10px;
  color: rgb(1, 7, 30);
  font-size: 0.9rem;
  justify-content: space-between;
  width: 100%;
  font-size: 11.2px;
  font-weight: 400;
  letter-spacing: -0.224px;
}

.single-tags {
  display: inline-flex;
  gap: 4px;
  margin-left: 12px;
  flex-wrap: wrap;
}

.blog-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(1, 7, 30, 0.08);
  color: rgb(1, 7, 30);
  font-size: 11.2px;
  font-weight: 400;
  letter-spacing: -0.224px;
}

.single-meta__left {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 200px;
}

.single-dot {
  opacity: .35;
}

.single-tags {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  transform: translateY(2px);
}

.single-divider {
  height: 1px;
  background: rgba(1, 7, 30, 0.08);
  margin: 34px 0 0;
}

.single-divider--spaced {
  margin: 28px 0;
}

.single-body {
  padding-top: 32px;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.single-grid {
  place-content: flex-start space-between;
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-flow: row;
  height: min-content;
  max-width: 960px;
  overflow: var(--overflow-clip-fallback, clip);
  padding: 24px 0px 0px;
  position: relative;
  width: 100%;
}

.single-main {
  place-content: center;
  align-items: center;
  display: flex;
  flex: 1 0 0px;
  flex-flow: column;
  gap: 25px;
  height: min-content;
  max-width: 800px;
  overflow: var(--overflow-clip-fallback, clip);
  padding: 0px;
  position: relative;
  width: 1px;
}

.single-heroimg {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16 / 9.6;
}

.single-heroimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.single-content {
  font-size: 16px;
  line-height: 1.55;
  color: rgb(1, 7, 30);
  margin-top: 0;
}

.single-content h2 {
  font-weight: 500;
  margin: 22px 0 25px;
  font-size: 24px;
  letter-spacing: -0.72px;
  line-height: 32px;
  color: rgb(1, 7, 30);
}

.single-content a {
  text-decoration: none;
  color: rgb(26 75 255);
}

.single-content a:hover {
  text-decoration: underline;
}

.single-social {
  place-content: center;
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-flow: column;
  gap: 16px;
  height: min-content;
  overflow: var(--overflow-clip-fallback, clip);
  padding: 0px;
  position: sticky;
  top: 160px;
  width: min-content;
  z-index: 1;
}

.single-social__btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: transparent;

  text-decoration: none;
}

.single-social__btn:hover {
  background: rgba(1, 7, 30, 0.04);
}

.single-icon {
  width: 22px;
  height: 23px;
  background: rgb(1, 7, 30);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.single-icon--x {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-6.8 7.8L23 22h-6.8l-5.3-6.7L5.1 22H2l7.3-8.4L1 2h7l4.8 6.1L18.9 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-6.8 7.8L23 22h-6.8l-5.3-6.7L5.1 22H2l7.3-8.4L1 2h7l4.8 6.1L18.9 2z'/%3E%3C/svg%3E");
}

.single-icon--li {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 23.5h4V7.98h-4V23.5zM8.5 7.98h3.84v2.12h.05c.54-1.02 1.86-2.1 3.82-2.1 4.08 0 4.83 2.68 4.83 6.16v9.34h-4v-8.28c0-1.98-.04-4.52-2.76-4.52-2.76 0-3.18 2.16-3.18 4.38v8.42h-4V7.98z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 23.5h4V7.98h-4V23.5zM8.5 7.98h3.84v2.12h.05c.54-1.02 1.86-2.1 3.82-2.1 4.08 0 4.83 2.68 4.83 6.16v9.34h-4v-8.28c0-1.98-.04-4.52-2.76-4.52-2.76 0-3.18 2.16-3.18 4.38v8.42h-4V7.98z'/%3E%3C/svg%3E");
}


.single-icon--fb {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 10-11.5 9.9v-7H8v-3h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4H15.5c-1.2 0-1.6.8-1.6 1.6V12H18l-.7 3h-3.4v7A10 10 0 0022 12z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 10-11.5 9.9v-7H8v-3h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4H15.5c-1.2 0-1.6.8-1.6 1.6V12H18l-.7 3h-3.4v7A10 10 0 0022 12z'/%3E%3C/svg%3E");
}

.single-comments {
  margin-top: 8px;
  display: none;
}

.single-comments .comment-respond,
.single-comments .comments-area {
  background: rgba(1, 7, 30, 0.02);
  border-radius: 24px;
  padding: 24px;
  border: 1px solid rgba(1, 7, 30, 0.08);
}

.single-comments input[type="text"],
.single-comments input[type="email"],
.single-comments textarea {
  width: 100%;
  border: 1px solid rgba(1, 7, 30, 0.16);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  font-size: 16px;
}

.single-comments textarea {
  min-height: 120px;
  resize: vertical;
}

.single-comments .form-submit input[type="submit"] {
  border: 1px solid rgba(1, 7, 30, 0.16);
  background: rgba(1, 7, 30, 0.08);
  border-radius: 999px;
  padding: 12px 16px;
  cursor: pointer;
}

.single-comments .form-submit input[type="submit"]:hover {
  background: rgba(1, 7, 30, 0.12);
}

.single-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.single-next__link {
  text-decoration: none;
  font-size: 16px;
}

@media(max-width:1200px){
  .page-single-container{
    padding: 32px;
  }
  .page-single-inner{
    padding-top: 0;
  }
  
}


@media(max-width:1023px){
  .single-title{
    font-size: 42px;
    line-height: 42px;
  }
  .single-meta,
  .blog-tag{
    font-size: 10px;
  }
  .blog-tag{
    margin-bottom: 4px;
  }
  .single-meta,
  .single-meta__left,
  .single-tags{
    display: block;
    margin: 0;
  }
  .single-tags{
    margin-top: 12px;
  }
  .single-content{
    font-size: 14px;
    line-height: 21px;
  }
  .single-grid{
    gap: 8px;
  }
  .single-content h2{
    font-size: 21px;
    line-height: 28px;
  }
}


@media(max-width:767px){
  .single-grid{
    overflow: visible;
  }
  .single-social{
    transform: translateX(12px);
  }
}