@font-face {
  font-family: "neue-haas-grotesk-display";
  src: url("https://use.typekit.net/af/2807c7/00000000000000007735bb48/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/2807c7/00000000000000007735bb48/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff"),
    url("https://use.typekit.net/af/2807c7/00000000000000007735bb48/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

/** Start Blog Page Styles **/
.blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-top: 170px;
  padding-bottom: 60px;
  z-index: 3;
}

.blog h1,
.blog h2,
.blog h3,
.blog h4,
.blog p {
  margin: 0;
  padding: 0;
}

.blog::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1440' height='1300' viewBox='0 0 1440 1300'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.566' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect id='Rectangle_315' data-name='Rectangle 315' width='1440' height='1300' fill='url(%23linear-gradient)'/%3E%3C/svg%3E%0A"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1440' height='1300' viewBox='0 0 1440 1300'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.566' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect id='Rectangle_315' data-name='Rectangle 315' width='1440' height='1300' fill='url(%23linear-gradient)'/%3E%3C/svg%3E%0A");
  background-size: cover;
  background-position: bottom left, top left;
  background-repeat: repeat-x;
  z-index: -1;
}

.blog::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  --gradient-circle: url("data:image/svg+xml,%3Csvg id='Group_703' data-name='Group 703' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1179.644' height='1179.644' viewBox='0 0 1179.644 1179.644'%3E%3Cdefs%3E%3CradialGradient id='radial-gradient' cx='0.5' cy='0.5' r='0.499' gradientTransform='translate(0 0)' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%234b1df2'/%3E%3Cstop offset='0.771' stop-color='%234b1df2' stop-opacity='0.227'/%3E%3Cstop offset='1' stop-color='%234b1df2' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath id='Path_32' data-name='Path 32' d='M1325.282,509.965c63.57,319.409-143.747,630-463.158,693.568s-630-143.748-693.566-463.157,143.747-630,463.157-693.568,630,143.747,693.567,463.157' transform='translate(-157.098 -35.348)' fill='url(%23radial-gradient)'/%3E%3C/svg%3E%0A");
  --gradient-circle-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1071.528' height='1071.528' viewBox='0 0 1071.528 1071.528'%3E%3Cdefs%3E%3CradialGradient id='radial-gradient' cx='0.5' cy='0.5' r='0.499' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%234b1df2'/%3E%3Cstop offset='1' stop-color='%234b1df2' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg id='Group_49' data-name='Group 49' transform='translate(-867 -235)'%3E%3Cpath id='Path_32' data-name='Path 32' d='M1218.217,466.466c57.744,290.135-130.573,572.258-420.709,630s-572.257-130.573-630-420.708,130.573-572.257,420.708-630,572.256,130.573,630,420.708' transform='translate(709.902 199.652)' fill='url(%23radial-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-image: var(--gradient-circle), var(--gradient-circle),
    var(--gradient-circle), var(--gradient-circle-2), var(--gradient-circle-2);
  /* start at top right and goes clock-wise */
  background-size: clamp(1179px, 81.875vw, 81.875vw),
    clamp(1179px, 81.875vw, 81.875vw), clamp(1179px, 81.875vw, 81.875vw),
    clamp(1071px, 74.37vw, 74.37vw), clamp(1071px, 74.37vw, 74.37vw);
  /* background-position: calc(100% + 25.48vw) -63.26vw, calc(100% + 42.6vw) calc(100% + 34.16vw), -59.93vw calc(100% + 29.23vw), -59.93vw -22.29vw, -20.76vw -59.5vw; */
  background-position: calc(100% + 25.48vw) -68.26vw,
    calc(100% + 42.6vw) calc(100% + 45.16vw), -69.93vw calc(100% + 29.23vw),
    -64.93vw -22.29vw, -25.76vw -64.5vw;
  z-index: -2;
  background-repeat: no-repeat;
}

.blog .container-blog {
  width: 80%;
  max-width: clamp(1161px,80.625vw,1548px);
  /* padding: 0 15px; */
  margin: 0 auto;
}

.blog .content-blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.blog .header-blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.blog .header-blog h1 {
  width: 50%;
  font-family: "forma-djr-banner";
  font-weight: bold;
  font-size: clamp(30px, 4.16vw, 65px);
  line-height: calc(clamp(30px, 4.16vw, 65px) + 10px);
  color: #000;
}

.blog .header-blog h1 span {
  color: #4b1df2;
}

.blog .header-blog .description {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}

.blog .header-blog .description p {
  font-family: "Work Sans", sans-serif;
  font-weight: normal;
  font-size: clamp(20px,1.3888888888888888vw,26.666666666666664px);
  line-height: calc(clamp(20px,1.3888888888888888vw,26.666666666666664px) + 10px);
  text-align: left;
  color: #000;
}

.blog .featured-blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 3%;
  text-decoration: none;
}

.blog .featured-blog .left-side {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 10px;
  background-color: #f3f3f3;
  padding: clamp(66px,4.583333333333333vw,88px) clamp(82px,5.694444444444445vw,109.33333333333334px);
  position: relative;
}

.blog .featured-blog .left-side .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.blog .featured-blog .left-side .header small {
  font-family: "Work Sans", sans-serif;
  font-weight: normal;
  font-size: clamp(16px,1.1111111111111112vw,21.333333333333336px);
  line-height: calc(clamp(16px,1.1111111111111112vw,21.333333333333336px) + 10px);
  text-align: left;
  color: #4b1df2;
}

.blog .featured-blog .left-side .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.blog .featured-blog .left-side .body h3 {
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(38px,2.638888888888889vw,50.66666666666667px);
  line-height: calc(clamp(38px,2.638888888888889vw,50.66666666666667px) + 10px);
  text-align: left;
  color: #1d1d1b;
  margin: 1vw 0 2.5vw 0;
}

.blog .featured-blog .left-side .body span {
  font-family: "Work Sans", sans-serif;
  font-weight: normal;
  text-decoration: underline;
  font-size: clamp(16px,1.1111111111111112vw,21.333333333333336px);
  line-height: calc(clamp(16px,1.1111111111111112vw,21.333333333333336px) + 10px);
  text-align: left;
  color: #4b1df2;
  position: absolute;
  bottom: 60px;
}

.blog .featured-blog .right-side {
  width: 50%;
  position: relative;
}

.blog .featured-blog .right-side .bg {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.blog .featured-blog .right-side .bg:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #4b1df2;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
}

.blog .featured-blog .right-side .bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.blog .featured-blog .right-side .icons img {
  position: absolute;
  left: -10px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.blog .featured-blog .right-side .icons img:first-child {
  top: 10%;
}

.blog .featured-blog .right-side .icons img:last-child {
  bottom: 10%;
}

.blog .filters-blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 5%;
}

.blog .filters-blog ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  list-style: none;
}

.blog .filters-blog ul li {
  width: clamp(180px,12.5vw,200px);
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 35px;
  border: 1px solid #4b1df2;
  font-family: "Work Sans", sans-serif;
  font-weight: normal;
  font-size: clamp(14px,0.9722222222222222vw,18.666666666666668px);
  color: #4b1df2;
  text-align: center;
  cursor: pointer;
}

.blog .filters-blog .field-input {
  width: 15vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid #4b1df2;
  padding: 0 0 1vh 0;
}
.blog .filters-blog .field-input input::placeholder {
  font-size: clamp(14px,0.9722222222222222vw,18.666666666666668px);
  line-height: calc(clamp(14px,0.9722222222222222vw,18.666666666666668px) + 10px);
}

.blog .filters-blog .field-input input {
  border: none;
  outline: none;
  font-family: "Neue Haas Grotesk Display Pro";
  font-weight: normal;
  font-size: clamp(14px,0.9722222222222222vw,18.666666666666668px);
  line-height: calc(clamp(14px,0.9722222222222222vw,18.666666666666668px) + 10px);
  letter-spacing: 0.08em;
  text-align: left;
  color: #000;
  opacity: 0.3;
  text-transform: uppercase;
  background-color: transparent;
}

.blog .filters-blog .field-input img {
  opacity: 0.3;
}

.blog .grid-blog {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  margin-top: 7%;
}

.blog .grid-blog .item-blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-decoration: none;
}

.blog .grid-blog .item-blog .bg {
  width: 100%;
  height: 17vh;
  border-radius: 10px;
  overflow: hidden;
}

.blog .grid-blog .item-blog .bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.blog .grid-blog .item-blog .icons img {
  position: absolute;
  top: -17px;
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.blog .grid-blog .item-blog .icons img:first-child {
  left: 10%;
}

.blog .grid-blog .item-blog .icons img:last-child {
  right: 10%;
}

.blog .grid-blog .item-blog .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 8% 10%;
  background-color: #f3f3f3;
  border-radius: 10px;
  position: relative;
}

.blog .grid-blog .item-blog .info small {
  font-family: "Work Sans", sans-serif;
  font-weight: normal;
  font-size: clamp(12px,0.8333333333333334vw,16px);
  color: #4b1df2;
}

.blog .grid-blog .item-blog .info h2 {
  height: 30%;
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(22px,1.5277777777777777vw,29.33333333333333px);
  line-height: calc(clamp(22px,1.5277777777777777vw,29.33333333333333px) + 10px);
  text-align: left;
  color: #1d1d1b;
  margin: 1vw 0 0.5vw 0;
}

.blog .grid-blog .item-blog .info p {
  font-family: "neue-haas-grotesk-display";
  font-weight: normal;
  font-size: clamp(16px,1.1111111111111112vw,21.333333333333336px);
  line-height: calc(clamp(16px,1.1111111111111112vw,21.333333333333336px) + 10px);
  letter-spacing: 0.03em;
  color: #000;
  opacity: 0.5;
}

.blog .grid-blog .item-blog .info span {
  font-family: "Work Sans", sans-serif;
  font-weight: normal;
  text-decoration: underline;
  font-size: clamp(16px,1.1111111111111112vw,21.333333333333336px);
  line-height: calc(clamp(16px,1.1111111111111112vw,21.333333333333336px) + 10px);
  text-align: left;
  color: #4b1df2;
  margin-top: 1vw;
}

/* .blog .paginate-blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
} */

.blog .paginate-blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-top: 4%;
}

.blog .paginate-blog ul {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
}

.blog .paginate-blog li a {
  text-decoration: none;
}

.blog .paginate-blog li:first-child a,
.blog .paginate-blog li:last-child a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #ece8fe;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.blog .paginate-blog li:first-child svg path,
.blog .paginate-blog li:last-child svg path {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.blog .paginate-blog li:first-child a:hover,
.blog .paginate-blog li:last-child a:hover {
  background-color: #4b1df2;
}

.blog .paginate-blog li:first-child a:hover svg path,
.blog .paginate-blog li:last-child a:hover svg path {
  stroke: #f08e7e;
}

.blog .paginate-blog li:not(:first-child) a,
.blog .paginate-blog li:not(:last-child) a {
  font-family: "Work Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #4b1df2;
}

.blog .paginate-blog li.active a {
  color: #f08e7e;
}

.blog .paginate-blog li.disabled {
  pointer-events: none;
}

/** End Blog Page Styles **/