/* Aos Animations */
[data-aos="fade-up-sm"] {
  transform: translate3d(0, 10px, 0);
}

[data-aos="fade-down-sm"] {
  transform: translate3d(0, -10px, 0);
}

[data-aos="fade-up-md"] {
  transform: translate3d(0, 15px, 0);
}

[data-aos="fade-down-md"] {
  transform: translate3d(0, -15px, 0);
}

[data-aos="fade-left-sm"] {
  transform: translate3d(-15px, 0, 0);
}

[data-aos="fade-right-sm"] {
  transform: translate3d(15px, 0, 0);
}

/* Breadcrumb */
.breadcrumb {
  @apply mx-auto mb-6 flex w-fit gap-2;
}

.breadcrumb-list-item {
  @apply text-text-dark align-middle text-[20px] capitalize;
}

.breadcrumb-list-item:not(:last-child) a:hover {
  @apply text-primary/70;
}

.breadcrumb-list-item a,
.breadcrumb-list-item span {
  @apply align-middle transition-colors duration-300;
}

.breadcrumb-list-item:first-child {
  @apply text-primary relative pl-8 align-middle text-[20px] font-medium after:content-[""];
}

.breadcrumb-list-item:first-child::after {
  @apply absolute left-0 top-[48%] h-[20px] w-[20px] -translate-y-1/2;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cg clip-path='url(%23clip0_3_3405)'%3E%3Cpath d='M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69ZM12 3L2 12H5V20H11V14H13V20H19V12H22L12 3Z' fill='%23999999' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3_3405'%3E%3Crect width='24' height='24' fill='white' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.breadcrumb-list-item:last-child a {
  @apply pointer-events-none cursor-auto select-none;
}

/* Link Hover Underline Animation */
.link-animation {
  border-bottom-width: 0;
  background-image: linear-gradient(transparent, transparent),
    linear-gradient(#fcf5de, rgb(0, 0, 0));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(0.42, 0, 0.36, 0.96);
  padding-bottom: 4px;

  &:hover {
    background-size: 100% 2px;
    background-position: 0 100%;
  }
}

/* Background Line */
.line-bg {
  @apply pointer-events-none left-0 top-1/2 -z-10 flex h-full w-full -translate-y-1/2 justify-between;
}

.line-bg span {
  @apply w-[1px];
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='20px' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23EAEAEA' stroke-width='3' stroke-dasharray='30' stroke-dashoffset='21' stroke-linecap='square'/%3E%3C/svg%3E");
}

.bg-line-dark {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='20px' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%233c3838' stroke-width='3' stroke-dasharray='30' stroke-dashoffset='21' stroke-linecap='square'/%3E%3C/svg%3E") !important;
}

.bg-line-yellow {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='20px' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23FFD54A' stroke-width='3' stroke-dasharray='30' stroke-dashoffset='21' stroke-linecap='square'/%3E%3C/svg%3E") !important;
}

.bg-line-sky {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='20px' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23B5E0FF' stroke-width='3' stroke-dasharray='30' stroke-dashoffset='21' stroke-linecap='square'/%3E%3C/svg%3E") !important;
}

/* Section Style */
.section {
  @apply py-[60px] md:py-[100px];
}

.section-sm {
  @apply py-[60px];
}

.section-md {
  @apply py-[100px] md:py-[200px];
}

.section-lg {
  @apply py-[100px] lg:py-[200px] xl:py-[300px];
}

/* Container */
.container {
  @apply mx-auto xl:max-w-[1320px]! lg:max-w-[1200px] md:max-w-[960px] sm:max-w-[720px] max-w-[540px] px-4 sm:px-6;

}

.container-fluid {
  @apply mx-auto pl-[var(--bs-gutter-x,calc(1.5rem_/_2))] pr-[var(--bs-gutter-x,calc(1.5rem_/_2))];

  --bs-gutter-x: 1rem;

  @media screen and (min-width: 1024px) {
    --bs-gutter-x: 2.5rem;
  }
}


/* Social Icon */
.social-icons {
  @apply font-secondary flex flex-wrap items-center gap-4;
  
}
.social-icons li {
  @apply inline-block text-white;
 
}
.social-icons li a {
  @apply bg-light/15 text-h6 inline-block h-[45px] w-[45px] transform-none rounded-full text-center leading-[45px] transition-transform duration-300 hover:-rotate-12 hover:scale-110;

  
}
.social-icons li a i {
  @apply text-sm sm:text-base;
}
/* Pagination */
.pagination {
  @media screen and (max-width: 767px) {
    li a {
      padding: 9px 18px;
    }

    .next a,
    .prev a {
      padding: 9px 22px !important;
    }
  }

  .arrow {
    @apply border-primary bg-primary border text-white hover:bg-primary/80;
  }

  li a {
    padding: 12px 20px !important;
  }

  .next a,
  .prev a {
    padding: 12px 22px !important;
  }

  .prev .page-link,
  .next .page-link {
    @apply inline-block whitespace-nowrap rounded-md px-7 py-[13px] text-[15px] font-semibold transition-colors duration-200 border-primary hover:bg-primary border bg-white text-black hover:text-white;
  }

  .page-item.active .page-link {
    @apply border-primary bg-primary border text-white hover:bg-primary/80;
  }

  @apply flex items-center justify-center gap-3;
  li {
    a {
      @apply inline-block whitespace-nowrap rounded-md px-7 py-[13px] text-[15px] font-semibold transition-colors duration-200 border-primary hover:bg-primary border bg-white text-black hover:text-white inline-block;
    }
  }
}

/* notice */
.notice {
  @apply mb-6 rounded-lg border px-8 py-6;
  &-head {
    @apply flex items-center;
    svg {
      @apply mr-3;
    }
    p {
      @apply font-secondary text-text-dark  text-xl font-semibold;
    }
  }
  &-body {
    @apply mt-3;
    p {
      @apply my-0;
    }
  }

  &.note {
    @apply text-[#1B83E2];
    @apply border-current;
  }

  &.tip {
    @apply text-[#40D294];
    @apply border-current;
  }

  &.info {
    @apply text-[#E3A72C];
    @apply border-current;
  }

  &.warning {
    @apply text-[#DB2C23];
    @apply border-current;
  }
}

/* Content Style */
.content {
  @apply prose max-w-none;
  @apply prose-headings:mb-[.4em] prose-headings:mt-[.5em] prose-headings:font-primary prose-headings:font-semibold prose-headings:text-text-dark;
  @apply prose-h1:text-h1-md md:prose-h1:text-h1;
  @apply prose-h2:text-h2-md md:prose-h2:text-h2;
  @apply prose-h3:text-h3-md md:prose-h3:text-h3;
  @apply prose-h4:text-h4-md md:prose-h4:text-h4;
  @apply prose-ol:mb-8 prose-ul:mb-8;
  @apply prose-hr:border-border;
  @apply prose-img:rounded-lg prose-p:mb-4 prose-p:text-base prose-p:text-text;
  @apply prose-blockquote:border-primary prose-blockquote:px-4 prose-blockquote:py-1;
  @apply prose-code:px-1 prose-code:text-primary;
  @apply prose-pre:rounded-lg;
  @apply prose-strong:text-text-dark;
  @apply prose-a:text-primary prose-a:no-underline hover:prose-a:underline;
  @apply prose-li:text-text marker:text-lg;
  @apply prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:-z-10 prose-table:z-10 prose-table:before:bg-transparent prose-table:before:content-[""] prose-table:overflow-hidden prose-table:relative prose-table:rounded-lg;
  @apply prose-thead:border-border prose-thead:bg-light prose-th:px-4 prose-th:py-4 prose-th:text-text-dark;
  @apply prose-tr:border-border;
  @apply prose-td:px-3 prose-td:w-1/3 prose-td:py-4;

  .btn {
    @apply no-underline;
  }

  pre code {
    @apply text-blue-300;
  }

  /* blockquote */
  @apply prose-blockquote:my-10 prose-blockquote:rounded-lg prose-blockquote:border-l-[5px] prose-blockquote:sm:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-senary prose-blockquote:pb-10 prose-blockquote:pt-20 prose-blockquote:sm:px-14 prose-blockquote:sm:pt-10;
  blockquote {
    p:not(:nth-child(2)) {
      @apply border-border/50 text-text-dark/80 relative mb-6 border-b  pb-6 text-lg font-medium not-italic md:text-2xl;

      &::before {
        @apply absolute -top-8 left-[0px] h-6 w-9 bg-center bg-no-repeat content-[""] sm:-top-0 sm:left-[-43px];

        background-image: url("data:image/svg+xml,%3Csvg width='28' height='22' viewBox='0 0 28 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.48981 0.476949C4.03994 2.85964 1.01629 6.71712 0.174469 11.0856C-0.0396232 12.1964 -0.0602203 14.2939 0.132315 15.3785C0.36826 16.7075 0.875437 18.0314 1.4949 18.9355C2.35784 20.1946 2.9931 20.7936 4.03928 21.3344C4.99915 21.8307 5.59632 21.9677 6.79184 21.9661C7.99548 21.9645 8.47985 21.8557 9.34906 21.3915C10.3834 20.8392 11.1192 20.0028 11.7092 18.7086C12.0896 17.8739 12.2324 17.2054 12.228 16.279C12.2132 13.165 9.94483 10.8319 6.75566 10.6507C5.88335 10.6012 5.34694 10.6806 4.67831 10.9582L4.22975 11.1445L4.28142 10.7896C4.4476 9.64834 4.94681 8.1737 5.50906 7.16341C6.47912 5.42031 8.15612 3.73665 10.1258 2.52811C10.5079 2.29374 10.811 2.08031 10.7994 2.0539C10.742 1.92259 9.44452 0.00432733 9.41262 0.00349244C9.39232 0.00296115 8.97706 0.216009 8.48981 0.476949ZM24.2514 0.461086C19.2677 3.16043 16.0809 7.65455 15.7698 12.4222C15.5526 15.7497 16.4771 18.5009 18.4503 20.3986C20.4898 22.36 24.1222 22.5511 26.0359 20.7977C26.7802 20.1156 27.5596 18.7668 27.8296 17.6935C28.459 15.1911 27.3023 12.5385 25.0632 11.3495C23.5817 10.5628 21.7295 10.4093 20.3941 10.9624C20.1606 11.0591 19.9696 11.1219 19.9696 11.102C19.9696 11.0821 20.0363 10.7296 20.1177 10.3186C20.7449 7.15445 22.6379 4.58057 25.8202 2.565C26.2161 2.31431 26.54 2.09299 26.54 2.07333C26.54 2.00927 25.1838 -0.00136548 25.1415 6.95896e-07C25.1189 0.000683785 24.7184 0.208191 24.2514 0.461086Z' fill='black' fill-opacity='0.2'/%3E%3C/svg%3E%0A");
      }

      &::after {
        display: none;
      }
    }

    cite,
    span {
      @apply not-italic;
    }
    span {
      @apply inline text-sm font-normal before:hidden after:hidden;
    }

    & > *:first-child {
      margin-top: 0px !important;
    }

    & > *:last-child {
      margin-bottom: 0px !important;
    }
  }

  p + ul,
  p + ol {
    @apply mt-0;
  }

  & > *:first-child {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }

  & > *:last-child {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
  }
}

.page-header {
  &::before {
    @apply absolute left-0 top-0 z-10 h-full w-full bg-white content-[""];
    clip-path: polygon(0 -1%, 100% 0, 100% 85%, 0 45%);
  }
  &::after {
    @apply bg-quaternary/20 absolute left-0 top-0 h-full w-full content-[""];
    clip-path: polygon(0 -1%, 100% 0, 100% 85%, 0 45%);
  }
  .line-bg {
    clip-path: polygon(0 -1%, 100% 0, 100% 85%, 0 45%);
  }
}

/* =================================================== */
/* Home Page */
/* =================================================== */

/* Banner Section */
.banner {
  &::before {
    @apply absolute left-0 top-0 h-full w-full bg-white content-[""];

    clip-path: polygon(0 -1%, 100% 0, 100% 90%, 0 50%);
    @media screen and (max-width: 1320px) {
      clip-path: polygon(0 -1%, 100% 0, 100% 90%, 0 50%);
    }
    @media screen and (max-width: 575px) {
      clip-path: polygon(0 -1%, 100% 0, 100% 70%, 0 50%);
    }
  }
  &::after {
    @apply bg-quaternary/20 absolute left-0 top-0 h-full w-full content-[""];

    clip-path: polygon(0 -1%, 100% 0, 100% 90%, 0 50%);
    @media screen and (max-width: 1320px) {
      clip-path: polygon(0 -1%, 100% 0, 100% 90%, 0 50%);
    }
    @media screen and (max-width: 575px) {
      clip-path: polygon(0 -1%, 100% 0, 100% 70%, 0 50%);
    }
  }
  .line-bg {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 50%);
    @media screen and (max-width: 1320px) {
      clip-path: polygon(0 0, 100% 0, 100% 90%, 0 50%);
    }
    @media screen and (max-width: 575px) {
      clip-path: polygon(0 0, 100% 0, 100% 70%, 0 50%);
    }
  }
  .image-block {
    @apply relative z-10 pl-8 before:-top-4 before:left-4 after:bottom-[-15px] after:right-[-20px] sm:pl-20 before:sm:left-12 before:sm:top-[-30px] after:sm:bottom-[-30px] after:sm:right-[-30px];

    &::before,
    &::after {
      @apply absolute -z-10 h-full w-[calc(100%_-_80px)] content-[""];
    }

    &::before {
      @apply bg-tertiary;
    }
    &::after {
      @apply bg-quaternary;
    }

    &::before,
    &::after {
      clip-path: polygon(32% 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 1% 28%);

      @media screen and (max-width: 574px) {
        clip-path: polygon(38% 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0% 30%);
      }

      @media screen and (max-width: 380px) {
        clip-path: polygon(42% 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0% 30%);
      }
    }

    & .banner-image {
      clip-path: polygon(32% 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 1% 28%);
    }
    & .floating-image > div {
      @apply absolute rounded-[5px];
    }
    & .floating-image .image-1 {
      @apply bottom-[70px] left-0;
    }
    & .floating-image .image-2 {
      @apply right-[-120px] top-1/4;
    }
    & .shape {
      @apply scale-90;
    }
    & .shape-1 {
      @apply -top-20 left-5 -z-30;
    }
  }
}

.features {
  &::after {
    @apply bg-senary absolute left-0 top-0 h-full w-full content-[""];
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);

    @media screen and (max-width: 1320px) {
      clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
    }
    @media screen and (max-width: 575px) {
      clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    }
  }
  .line-bg {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);

    @media screen and (max-width: 1320px) {
      clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
    }
    @media screen and (max-width: 575px) {
      clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    }
  }
}

.colored-box-icon {
  .icon-box {
    @apply text-text-dark mb-10 w-[60px] rounded-xl p-4 text-center text-2xl;
  }
  &.has-colored-text {
    & > div:nth-child(5n + 1) .icon-box {
      @apply text-tertiary;
    }

    & > div:nth-child(5n + 2) .icon-box {
      @apply text-secondary;
    }
    & > div:nth-child(5n + 3) .icon-box {
      @apply text-quinary;
    }

    & > div:nth-child(5n + 4) .icon-box {
      @apply text-quaternary;
    }
    & > div:nth-child(5n + 5) .icon-box {
      @apply text-secondary;
    }
  }

  & > div:nth-child(5n + 1) .icon-box {
    @apply bg-tertiary/20;
  }

  & > div:nth-child(5n + 2) .icon-box {
    @apply bg-secondary/20;
  }
  & > div:nth-child(5n + 3) .icon-box {
    @apply bg-quinary/20;
  }

  & > div:nth-child(5n + 4) .icon-box {
    @apply bg-quaternary/40;
  }
  & > div:nth-child(5n + 5) .icon-box {
    @apply bg-secondary/20;
  }
}

.colored-box-bg {
  column-gap: 24px;

  .box-bg {
    @apply flex items-center justify-center py-12 sm:w-[250px] sm:py-28 xl:px-12;
  }

  & > div:nth-child(3n + 1) .box-bg {
    @apply bg-tertiary/10;
  }
  & > div:nth-child(3n + 2) .box-bg {
    @apply bg-quinary/10;
  }
  & > div:nth-child(3n + 3) .box-bg {
    @apply bg-quaternary/10;
  }
}

/* Articles Section */
.articles {
  &::after {
    @apply bg-senary absolute left-0 top-0 h-full w-full content-[""];
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 50%);
    @media screen and (max-width: 1320px) {
      clip-path: polygon(0 0, 100% 0, 100% 90%, 0 60%);
    }
    @media screen and (max-width: 575px) {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    }
  }
  .line-bg {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 50%);
    @media screen and (max-width: 1320px) {
      clip-path: polygon(0 0, 100% 0, 100% 90%, 0 60%);
    }
    @media screen and (max-width: 575px) {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    }
  }
}

/* Feature Section */
.feature {
  &.triangle-up::after {
    @apply bg-senary absolute left-0 top-0 h-full w-full content-[""];

    @media screen and (min-width: 768px) {
      clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 100%);
    }
  }
  &.triangle-up .line-bg {
    @media screen and (min-width: 768px) {
      clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 100%);
    }
  }
  &.triangle-down::after {
    @apply bg-senary absolute left-0 top-0 h-full w-full content-[""];

    @media screen and (min-width: 768px) {
      clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 0% 100%);
    }
  }
  &.triangle-down .line-bg {
    @media screen and (min-width: 768px) {
      clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 0% 100%);
    }
  }
}
.feature-clip-path-1 {
  @apply before:bg-quaternary z-10 before:absolute before:left-[13%] before:top-[0%] before:-z-10 before:h-[70%] before:w-[55%] before:content-[''] before:lg:w-[50%];

  @apply after:bg-quaternary after:absolute after:bottom-[15%] after:right-[14%] after:-z-10 after:h-[70%] after:w-[55%] after:rotate-180 after:content-[''];

  &::before {
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 35.86%, 40% 0%);
  }

  &::after {
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 35.86%, 40% 0%);
  }
}
.feature-clip-path-2 {
  @apply before:bg-tertiary z-10 before:absolute before:left-[13%] before:top-[1%] before:-z-10 before:h-[70%] before:w-[55%] before:content-[''] before:lg:w-[50%];

  @apply after:bg-tertiary after:absolute after:bottom-[15%] after:right-[14%] after:-z-10 after:h-[70%] after:w-[55%] after:rotate-180 after:content-[''];

  &::before {
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 35.86%, 40% 0%);
  }

  &::after {
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 35.86%, 40% 0%);
  }
}

/* Counter Section */
.list-dotted-line-separator {
  li:not(:first-child) {
    @apply relative md:px-16 md:after:absolute md:after:left-0 md:after:top-1/2 md:after:h-[140%] md:after:w-[1px] md:after:-translate-y-1/2 md:after:content-[''] lg:px-24;

    &::after {
      background: url("data:image/svg+xml,%3Csvg width='1px' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23F96D61' stroke-width='2' stroke-dasharray='6, 14' stroke-dashoffset='0' stroke-linecap='square'/%3E%3C/svg%3E");
    }
  }

  li:first-child {
    @apply pl-0 md:pr-16 lg:pr-24 xl:pr-28;
  }

  li:last-child {
    @apply pr-0;
  }
}

/* =================================================== */
/* About Page */
/* =================================================== */
.has-bg-shape {
  &::after {
    @apply bg-senary absolute left-0 top-0 h-full w-full md:content-[""];
    clip-path: polygon(0% 12%, 100% 0%, 100% 88%, 0% 100%);
  }

  .line-bg {
    @media screen and (min-width: 768px) {
      clip-path: polygon(0% 12%, 100% 0%, 100% 88%, 0% 100%);
    }
  }
}
.faq {
  &::after {
    @apply bg-senary absolute left-0 top-0 h-full w-full content-[""];
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 60%);
    @media screen and (max-width: 1320px) {
      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 60%);
    }
  }
  .line-bg {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 60%);
    @media screen and (max-width: 1320px) {
      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 60%);
    }
  }
}

/* Pricing */
.pricing-details {
  @apply border-border/70 text-text-dark mb-10 mt-8 border-b pb-8 text-lg;
  li::before {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='16' viewBox='0 0 10 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L8 8L1 15' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A");
  }
}

/* =================================================== */
/* Footer */
/* =================================================== */
footer {
  /* Footer Top Clip Path */
  .cta-clip-path {
    @apply before:bg-quinary z-10 before:absolute before:left-[20%] before:top-[5%] before:-z-10 before:h-[250px] before:w-[250px] before:content-[''];

    @apply after:bg-quinary after:absolute after:bottom-[7%] after:right-[17%] after:-z-10 after:h-[250px] after:w-[250px] after:rotate-180 after:content-[''];

    &::before {
      clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 35.86%, 40% 0%);
    }

    &::after {
      clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 35.86%, 40% 0%);
    }
  }

  &::after {
    clip-path: polygon(0 -1px, 100% -1px, 100% 100%, 0 38%);

    @media screen and (max-width: 1023px) {
      clip-path: polygon(0 -1px, 100% -1px, 100% 85%, 0% 30%);
    }
  }

  .line-bg {
    clip-path: polygon(0% 9%, 100% 24%, 100% 100%, 0% 100%);

    @media screen and (max-width: 1023px) {
      clip-path: polygon(0% 9%, 100% 24%, 100% 100%, 0% 100%);
    }
  }
}

footer.footer-alt {
  clip-path: polygon(0% 1%, 100% 16%, 100% 101%, 0% 101%);

  @media screen and (max-width: 767px) {
    clip-path: polygon(0% 1%, 100% 5%, 100% 100%, 0% 100%);
  }

  &::after {
    clip-path: polygon(0 -1px, 100% -1px, 100% 31%, 0 1%);

    @media screen and (max-width: 767px) {
      clip-path: polygon(0 -1px, 100% -1px, 100% 5%, 0 1%);
    }
  }

  .line-bg {
    clip-path: polygon(0% 1%, 100% 0%, 100% 100%, 0% 100%);

    @media screen and (max-width: 767px) {
      clip-path: polygon(0% 1%, 100% 5%, 100% 100%, 0% 100%);
    }
  }
}



.widget-title {
  @apply font-primary mb-4 text-[18px] font-semibold text-white md:mb-8;
}

.widget-content {
  @apply flex flex-col gap-3 md:gap-6;

  li {
    @apply mx-auto w-fit text-white/80 sm:mx-0;
    a {
      @apply hover:underline hover:underline-offset-4;
    }
  }
}

/* Copyright */
.copyright {
  @apply py-12 text-center text-[15px] leading-relaxed text-white/50;

  a {
    @apply underline underline-offset-2 hover:no-underline;
  }
}