@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Poppins:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
html,
body {
  margin: 0;
  overflow-x: hidden;
}
.innovation-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  object-fit: cover;
  min-height: 833px;
  padding: 2rem;
  background-repeat: no-repeat;
}

.innovation-image-wrapper {
  display: flex;
  align-items: center;
  margin-left: 30px;
  width: 100%;
  height: auto;
}

.innovation-image {
  width: 100%;
  height: auto;
  display: block;
  transform: rotate(180deg);
  transform-origin: top left;
}

.innovation-overlay {
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.innovation-title {
  color: #fff;
  font-family: Poppins;
  font-size: 70.866px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
}
.makethemone {
  display: flex;
}
.knowledge {
  text-align: center;
  font-family: Poppins;
  font-size: 70.866px;
  font-style: italic;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
  background: linear-gradient(
    90deg,
    #514bb0 1.02%,
    #6067e6 19.03%,
    #9667ee 36.63%,
    #cd73db 70.73%,
    #e879cd 88.16%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* -----------------------------------
   Responsive Media Queries
----------------------------------- */
/*@media screen and (max-width: 1200px) {*/
/*  .innovation-title {*/
/*    font-size: 60px;*/
/*  }*/
/*}*/

/*@media screen and (max-width: 992px) {*/
/*  .innovation-title {*/
/*    font-size: 50px;*/
/*  }*/

/*  .innovation-overlay {*/
/*    left: 5%;*/
/*  }*/
/*}*/

/*@media screen and (max-width: 768px) {*/
/*  .innovation-title {*/
/*    font-size: 40px;*/
/*  }*/

/*  .innovation-overlay {*/
/*    left: 4%;*/
/*  }*/
/*}*/

/*@media screen and (max-width: 480px) {*/
/*  .innovation-title {*/
/*    font-size: 30px;*/
/*    text-align: center;*/
/*  }*/

/*  .innovation-overlay {*/
/*    left: 0;*/
/*    right: 0;*/
/*    width: 100%;*/
/*    align-items: center;*/
/*  }*/
/*}*/

.innovation-overlay {
  font-size: 18px;
  display: flex;
  align-items: start;
}

/* 1440px */
@media screen and (max-width: 1440px) {
  .innovation-title,
  .knowledge {
    font-size: 48px;
  }

  .innovation-overlay {
    font-size: 18px;
  }
}

/* 1200px */
@media screen and (max-width: 1200px) {
  .innovation-title,
  .knowledge {
    font-size: 48px;
  }

  .innovation-overlay {
    font-size: 18px;
  }
}

/* 992px */
@media screen and (max-width: 992px) {
  .innovation-title,
  .knowledge {
    font-size: 48px;
  }

  .innovation-overlay {
    font-size: 18px;
    left: 5%;
    width: 100%;
    text-align: center;
  }
  .makethemone {
    justify-content: center;
    align-items: center;
  }
}

/* 768px */
@media screen and (max-width: 768px) {
  .innovation-title,
  .knowledge {
    font-size: 48px;
  }

  .innovation-overlay {
    font-size: 18px;
    left: 4%;
  }
}

/* 480px */
@media screen and (max-width: 480px) {
  .innovation-title,
  .knowledge {
    font-size: 48px;
    text-align: center;
  }

  .innovation-overlay {
    font-size: 18px;
    left: 0;
    right: 0;
    width: 100%;
    align-items: center;
  }
}
/*end*/

/* ------------------------------------
   START: Future Section Styles
------------------------------------ */
.future-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5; /* Optional background */
  padding: 90px 20px 80px 20px;
  box-sizing: border-box;
}

.future-content-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 85px;
  flex-wrap: wrap;
  max-width: 1535px;
  margin: 0 auto;
  align-items: center;
  position: relative;
}

.future-image-left img {
  width: 100%;
  max-width: 662px;
  height: auto;
  border-radius: 24px;
  outline: none;
}

.future-box {
  flex: 1;
  max-width: 980px;
  background: white;
  border-radius: 40px;
  box-shadow: 0px 4px 33px rgba(0, 0, 0, 0.39);
  padding: 30px 103px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 305px;
  margin-left: -187px;
}

.future-box-text {
  color: black;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 176%; /* 35.2px */
}

.future-banner {
  width: 82%;
  position: relative;
  margin-top: 50px;
  text-align: center;
  border-radius: 37px;
  background-image: url("./assets/images/dc73eae5dd032b7c1bbc38deb4013e9f.png");
  height: 200px;
  min-height: 410px;
  display: flex;
  justify-content: center;
}

.main-future {
  display: flex;
  justify-content: center;
  width: 95%;
  align-self: center;
}

.future-heading {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1181px;
  font-size: 46px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #514bb0;
  text-transform: capitalize;
  background: linear-gradient(to right, #514bb0 0%, #6067e6 0%, #e879cd 91%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.future-description {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1026px;

  color: #fff;
  text-align: center;
  font-family: "Poppins";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 147%; /* 29.4px */
}

/* ------------------------------------
   Responsive Styles
------------------------------------ */
/* Laptop Large - under 1400px (covers 1440px & 1366px widths) */
@media (max-width: 1399px) {
  .innovation-title,
  .knowledge {
    font-size: 50px;
  }
  .future-image-left img {
    width: 100%;
    max-width: 487px;
    height: auto;
    border-radius: 24px;
    outline: none !important;
  }
  .future-box-text {
    color: black;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 176%;
  }
  .future-box {
    flex: 1;
    max-width: 696px;
    background: white;
    border-radius: 40px;
    box-shadow: 0px 4px 33px rgba(0, 0, 0, 0.39);
    padding: 30px 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 243px;
    margin-left: -217px;
  }
  .future-banner.visible {
    width: 1044px;
  }
  .future-heading {
    position: absolute;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1181px;
    font-size: 36px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: #514bb0;
    text-transform: capitalize;
    background: linear-gradient(to right, #514bb0 0%, #6067e6 0%, #e879cd 91%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .future-description {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1026px;
    color: #fff;
    text-align: center;
    font-family: "Poppins";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 147%;
  }
  .future-banner {
    width: 82%;
    position: relative;
    margin-top: 50px;
    text-align: center;
    border-radius: 37px;
    background-image: url(./assets/images/dc73eae….png);
    height: 23px;
    min-height: 329px;
    display: flex;
    justify-content: center;
  }
  .filter-label {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 700;
    color: #514bb0;
    text-transform: capitalize;
  }
  .filter-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 350px;
    height: 51px;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 13.625px;
    background: linear-gradient(#f7f7f7, #f7f7f7) padding-box,
      linear-gradient(
        90deg,
        #514bb0 1.02%,
        #6067e6 19.03%,
        #9667ee 36.63%,
        #cd73db 70.73%,
        #e879cd 88.16%
      );
    border: 1.567px solid transparent;
    box-shadow: 0 2.725px 13.08px 0 rgba(0, 0, 0, 0.06);
  }
  .filter-middle {
    width: 100%;
    height: 51px;
    display: flex;
    overflow: hidden;
    border-radius: 13.824px;
    border: 1.567px solid transparent;
    background: linear-gradient(338deg, #f7f7f7 15.25%, #fdfdff 98.25%)
        padding-box,
      linear-gradient(
          90deg,
          #514bb0 1.02%,
          #6067e6 19.03%,
          #9667ee 36.63%,
          #cd73db 70.73%,
          #e879cd 88.16%
        )
        border-box;
    box-shadow: 0px 2.765px 13.271px 0px rgba(0, 0, 0, 0.06);
  }
  .search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 20px;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    background: transparent;
    color: #333;
  }
  .search-icon {
    width: 36px;
  }
  .filter-middle {
    width: 68%;
    height: 51px;
    display: flex;
    overflow: hidden;
    border-radius: 13.824px;
    border: 1.567px solid transparent;
    background: linear-gradient(338deg, #f7f7f7 15.25%, #fdfdff 98.25%)
        padding-box,
      linear-gradient(
          90deg,
          #514bb0 1.02%,
          #6067e6 19.03%,
          #9667ee 36.63%,
          #cd73db 70.73%,
          #e879cd 88.16%
        )
        border-box;
    box-shadow: 0px 2.765px 13.271px 0px rgba(0, 0, 0, 0.06);
  }
  .searchbar-withicon {
    width: 588px;
    height: 65px;
    align-items: center;
    display: flex;
  }
  .filter-bar {
    max-width: 1140px;
    width: 1040px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 80px 0;
    box-sizing: border-box;
  }
  .article-tabs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1536px;
    margin-top: 20px;
    gap: 20px;
    justify-content: center;
  }

  .article-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 52px;
    max-width: 1040px;
    width: 100%;
    align-items: flex-start;
  }
  .article-image {
    width: 100%;
    border-radius: 22px;
    height: 443px;
  }
  .author-avatar {
    width: 39px;
    height: 39px;
    border-radius: 9999px;
  }
  .author-name {
    font-weight: 700;
    color: #928f8f;
    font-family: Poppins;
    font-size: 14.839px;
    font-style: normal;
    font-weight: 700;
    line-height: 32.968px;
  }
  .publish-time {
    font-weight: 400;
    color: #928f8f;
    font-family: Poppins;
    font-size: 14.839px;
    font-style: normal;
    font-weight: 400;
    line-height: 32.968px;
  }
  .article-heading {
    font-family: Poppins, sans-serif;
    font-size: 36px;
    font-weight: 700;
    text-transform: capitalize;
    background: linear-gradient(
        270deg,
        rgb(0, 0, 0) 54%,
        rgb(0, 0, 0) 95%
      )
      text !important;
    background-clip: text;
    padding-top: 8px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .article-subheading {
    color: #514bb0;
    margin-top: -16px;
    margin-bottom: 20px;
    background: linear-gradient(to right, #514bb0 0%, #6067e6 0%, #e879cd 91%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: start;
    font-family: "Poppins";
    font-size: 36.198px;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    width: 32%;
  }
  .article-description {
    color: black;
    font-family: "Poppins";
    font-size: 16px;
    padding-bottom: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 24.968px;
  }
  .read-more {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #514bb0;
    text-decoration: none;
    background: linear-gradient(to right, #514bb0 0%, #6067e6 0%, #e879cd 91%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .article-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 51px;
    max-width: 1040px;
    width: 100%;
    align-items: flex-start;
  }
  .discover-container .card-grid .card {
    width: 244.242px;
    display: flex;
    justify-content: start;
  }
  .discover-container .card-grid .card {
    width: 244.242px;
    display: flex;
    justify-content: start;
    height: 300px;
    padding: 44px 18px;
  }

  .top-heading .info-card {
    margin-top: 34px;
  }
  .explore_card {
    max-width: 352px;
  }
  .transform-card {
    max-width: 1054px;
  }
  html,
  body {
    overflow-x: hidden;
  }
  .card-grid {
    justify-content: center;
    gap: 16px !important;
  }
  .subtitle {
    font-size: 16px !important;
  }

  .card-title__ {
    font-size: 16px;
  }
  span.AiConsulting {
    padding: 0 !important;
  }
  p.card-desc br {
    display: none;
  }
  p.transform-description {
    font-size: 14px;
  }

  .insights-header.visible {
    width: 1040px;
  }
  .insights-title {
    color: #5f6186;
    font-size: 36px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
    background: linear-gradient(
        270deg,
        rgb(0, 0, 0) 54%,
        rgb(0, 0, 0) 95%
      )
      text !important;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .insights-see-all {
    font-size: 16px;
  }
}
@media screen and (max-width: 1024px) {
  .future-box {
    padding: 25px;
    margin-left: -400px;
  }

  .future-heading {
    font-size: 38px;
  }

  .future-description {
    font-size: 18px;
  }
}

@media screen and (max-width: 768px) {
  .future-banner {
    width: 100%;
  }
  .future-content-container {
    flex-direction: column;
    align-items: center;
  }

  .future-box {
    padding: 20px;
    text-align: center;
    margin: 0;
    margin-top: -200px;
    width: 80%;
  }

  .future-heading {
    font-size: 32px;
  }

  .future-description {
    font-size: 16px;
  }

  .future-box-text {
    font-size: 18px;
    line-height: 32px;
  }
  .future-image-left img {
    max-width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .future-heading {
    font-size: 26px;
  }

  .future-description {
    font-size: 14px;
  }
  .future-box-text {
    font-size: 14px;
    line-height: 20px;
  }
}
.article-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 90px 20px;
  gap: 15px;
}
.filter-arrowa img {
  width: 30px;
  padding-top: 7px;
  padding-right: 13px;
}
.article-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
  max-width: 1536px;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
  align-items: center;
}

.article-left {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-image {
  width: 98%;
  border-radius: 22px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
}

.author-details {
  display: flex;
  gap: 10px;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  color: #928f8f;
}

.author-name {
  font-weight: 700;
  color: #928f8f;
  font-family: Poppins;
  font-size: 18.839px;
  font-style: normal;
  font-weight: 700;
  line-height: 32.968px; /* 175% */
}

.publish-time {
  font-weight: 400;
  color: #928f8f;
  font-family: Poppins;
  font-size: 18.839px;
  font-style: normal;
  font-weight: 400;
  line-height: 32.968px; /* 175% */
}

.article-right {
  flex: 1;
  min-width: 300px;
}

.article-heading {
  font-family: Poppins, sans-serif;
  font-size: 43px;
  font-weight: 700;
  text-transform: capitalize;
  background: linear-gradient(270deg, rgb(0, 0, 0) 54%, rgb(0, 0, 0) 95%)
    text !important;
  background-clip: text;
  padding-top: 8px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.article-subheading {
  color: #514bb0;
  margin-top: -16px;
  margin-bottom: 20px;
  background: linear-gradient(to right, #514bb0 0%, #6067e6 0%, #e879cd 91%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: start;
  font-family: "Poppins";
  font-size: 46.198px;
  font-style: italic;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
  width: 238px;
  display: inline;
}

.article-description {
  color: black;
  font-family: "Poppins";
  font-size: 16px;
  padding-bottom: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 32.968px; /* 175% */
}

.read-more {
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #514bb0;
  text-decoration: none;

  background: linear-gradient(to right, #514bb0 0%, #6067e6 0%, #e879cd 91%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tabs Section */
/* ------------------------------------
   Filter Bar Wrapper
------------------------------------ */
.filter-bar {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 80px 0;
  box-sizing: border-box;
  margin-left: 50px;
  margin-right: 50px;
}

/* ------------------------------------
   Left Box (Filter Label)
------------------------------------ */
.filter-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 380px;
  height: 65px;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: 13.625px;
  background: linear-gradient(#f7f7f7, #f7f7f7) padding-box,
    linear-gradient(
      90deg,
      #514bb0 1.02%,
      #6067e6 19.03%,
      #9667ee 36.63%,
      #cd73db 70.73%,
      #e879cd 88.16%
    );
  border: 1.567px solid transparent;
  box-shadow: 0 2.725px 13.08px 0 rgba(0, 0, 0, 0.06);
}

.filter-label {
  color: #514bb0;
  font-size: 21.63px;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: capitalize;
  background: linear-gradient(to right, #514bb0 0%, #6067e6 0%, #e879cd 91%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.filter-arrow {
  width: 20.89px;
  height: 12.37px;
  background: linear-gradient(181deg, #514bb0 0%, #666666 100%);
  transform: rotate(180deg);
}

/* ------------------------------------
   Search Bar + Gradient Button
------------------------------------ */
.searchbar-withicon {
  width: 588px;
  height: 65px;
}

.filter-middle {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  border-radius: 13.824px;
  border: 1.567px solid transparent;
  background: linear-gradient(338deg, #f7f7f7 15.25%, #fdfdff 98.25%)
      padding-box,
    linear-gradient(
        90deg,
        #514bb0 1.02%,
        #6067e6 19.03%,
        #9667ee 36.63%,
        #cd73db 70.73%,
        #e879cd 88.16%
      )
      border-box;
  box-shadow: 0px 2.765px 13.271px 0px rgba(0, 0, 0, 0.06);
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 20px;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  background: transparent;
  color: #333;
}

.search-button {
  width: 100px;
  height: 100%;
  background: linear-gradient(101deg, #514bb0 0%, #e879cd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1.59px solid #514bb0;
  cursor: pointer;
  border-radius: 1px;
}

.search-icon {
  width: 41px;
}

/* ------------------------------------
   Responsive Adjustments
------------------------------------ */
@media screen and (max-width: 1024px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-left,
  .searchbar-withicon {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .filter-label {
    font-size: 18px;
  }

  .search-input {
    font-size: 16px;
  }

  .search-button {
    width: 80px;
  }

  .search-icon {
    width: 20px;
    height: 20px;
  }
  .insights-header.visible {
    margin-left: 50px;
  }
}

@media screen and (max-width: 480px) {
  .filter-label {
    font-size: 16px;
  }

  .filter-left,
  .searchbar-withicon {
    height: 55px;
  }

  .search-button {
    width: 70px;
  }
}

.article-tabs {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1536px;
  margin-top: 20px;
  gap: 20px;
}

.tab-left,
.tab-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.tab-box {
  background: linear-gradient(332deg, #f7f7f7, #fdfdff);
  border-radius: 14px;
  padding: 15px 25px;
  font-family: Poppins, sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: #514bb0;
  border: 1.6px solid #514bb0;
  box-shadow: 0px 3px 13px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.tab-box.active {
  background: linear-gradient(101deg, #514bb0 0%, #e879cd 100%);
  color: white;
}

.filter-label {
  font-family: Poppins, sans-serif;
  font-size: 21px;
  font-style: italic;
  font-weight: 700;
  color: #514bb0;
  text-transform: capitalize;
}

.filter-arrow {
  width: 20px;
  height: 12px;
  background: linear-gradient(181deg, #514bb0 0%, #666666 100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* end */

/* Insights Grid Styles */

/* ------------------------------------
   Insights Header Section Wrapper
------------------------------------ */
.insights-header {
  max-width: 1524px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ------------------------------------
   Left Title: "Latest Insights"
------------------------------------ */
.insights-title {
  color: #5f6186;
  font-size: 43.18px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap;
  background: linear-gradient(270deg, rgb(0, 0, 0) 54%, rgb(0, 0, 0) 95%)
    text !important;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------------
   Right Link: "See All"
------------------------------------ */
.insights-see-all {
  color: #514bb0;
  font-size: 18.84px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 32.97px;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(to right, #514bb0 0%, #6067e6 0%, #e879cd 91%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------------
   Responsive Adjustments
------------------------------------ */
@media screen and (max-width: 1024px) {
  .insights-title {
    font-size: 36px;
  }

  .insights-see-all {
    font-size: 17px;
  }
}

@media screen and (max-width: 768px) {
  .insights-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .insights-title {
    font-size: 32px;
  }

  .insights-see-all {
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .insights-title {
    font-size: 28px;
  }

  .insights-see-all {
    font-size: 15px;
  }
}

.insights-grid-section {
  width: 100%;
  padding: 31px 20px 60px 20px;
  background-color: #fff;
  box-sizing: border-box;
}

.insights-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* exactly 3 columns */
  gap: 40px;
  max-width: 1603px;
  margin: 0 auto;
}

.insight-box {
  background-color: #fff;
  border-radius: 22.59px;
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
}

.insight-img {
  width: 100%;
  height: auto;
  border-radius: 22.59px;
  outline: 11.39px solid white;
  object-fit: cover;
  margin-bottom: 28px;
}

.insight-title {
  font-family: "Poppins";
  font-size: 34.284px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
  background: linear-gradient(270deg, #000000 0%, #000000 100%);
  background-clip: text;
  -webkit-background-clip: text;
  padding-left: 16px;
  -webkit-text-fill-color: transparent;
}

.insight-brand {
  font-size: 36.68px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #514bb0;
  text-align: start;
  padding-left: 16px;
  margin: 0px 0 20px 0;
  background: linear-gradient(
    90deg,
    #514bb0 0.02%,
    #6067e6 2.03%,
    #9667ee 9.63%,
    #cd73db 17.73%,
    #e879cd 28.16%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.insight-text {
  font-size: 18.98px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 33.21px;
  color: black;
  padding-left: 16px;
  margin: 0;
}

.explore-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 90px;
}

.explore-button {
  background: linear-gradient(
    68deg,
    #524db1 0%,
    #7c6ae8 23%,
    #9b68eb 54%,
    #c972db 82%,
    #e879cd 100%
  );
  color: white;
  font-size: 20px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  padding: 14px 40px;
  border-radius: 105.4px;
  text-decoration: none;
  text-transform: capitalize;
  transition: background 0.3s ease;
}

.explore-button:hover {
  opacity: 0.9;
}

/* Responsive Tweaks */
@media (max-width: 1024px) {
  .insights-grid-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .insights-grid-wrapper {
    grid-template-columns: 1fr;
  }

  .insight-title {
    font-size: 28px;
    text-align: center;
  }

  .insight-brand {
    font-size: 30px;
  }

  .insight-text {
    font-size: 16px;
    text-align: center;
  }

  .explore-button {
    font-size: 18px;
    padding: 10px 30px;
  }
}

@media (max-width: 468px) {
  .article-tabs {
    justify-content: center;
  }
}

/*insight*/
.innovation-overlay {
  opacity: 0;
  transform: translateX(-50px);
  animation: slideFadeInLeft 1s ease forwards;
  animation-delay: 0.3s;
}

@keyframes slideFadeInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*second*/
.future-content-container,
.future-banner,
.article-section,
.insights-header {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.future-content-container.visible,
.future-banner.visible,
.article-section.visible,
.insights-header.visible {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 480px) {
  .future-box {
    width: 80%;
    margin: 0;
    margin-top: -150px;
  }
  .future-content-container.visible {
    gap: 38px;
  }
  .future-banner.visible {
    height: 367px;
  }
  .future-heading {
    font-size: 26px;
  }
  .future-description {
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
  }

  .searchbar-withicon {
    width: 100%;
    max-width: 100% !important;
  }
  .filter-middle {
    width: 100%;
  }
  img.search-icon {
    width: 38%;
  }
  section.future-section {
    padding-bottom: 0;
  }
  .filter-bar {
    padding-bottom: 28px;
  }
  .article-image {
    width: 100%;
    border-radius: 22px;
    height: 277px;
  }
  .author-name,
  .publish-time {
    font-weight: 700;
    color: #928f8f;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 32.968px;
  }

  .article-heading,
  .article-subheading,
  .insights-title {
    font-size: 24px;
  }
  .insights-header.visible {
    width: 100%;
    max-width: 100%;
  }
  .insights-header.visible {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0px 25px;
  }
}
@media screen and (max-width: 480px) {
  .additional_boxes {
    padding: 30px 15px;
    margin: 0 auto;
    max-width: 100%;
    box-sizing: border-box;
  }

  .additional_card_row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .additional_card,
  .additional_hero {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .additional_title,
  .additional_hero_title {
    font-size: 24px;
    margin-left: 0;
    padding: 0 15px;
    text-align: start;
  }

  .additional_desc,
  .additional_hero_desc,
  .additional_extra,
  .additional_hero_extra {
    font-size: 16px;
    padding: 0 15px;
    margin-left: 0;
    text-align: start;
  }

  .additional_card {
    padding: 16px;
  }

  .additional_top_img {
    border-radius: 16px;
    max-height: 200px;
  }

  .additional_explore_btn_container {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }

  .additional_explore_btn {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    padding: 12px;
    border-radius: 50px;
  }

  .additional_hero_static,
  .additional_hero_content {
    padding: 20px 15px;
  }

  .additional_hero {
    height: auto;
    min-height: 400px;
  }

  .additional_hero_content {
    text-align: start;
  }

  .additional_hero_static {
    text-align: start;
  }
  .additional_card_row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }
  .additional_hero_static {
    text-align: start;
    top: 147px;
  }
  .additional_hero.hovered .additional_hero_content {
    transform: translate(0%, -20%);
    opacity: 1;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    bottom: -11px;
  }
  .additional_card .additional_extra,
  #additional_card_1:hover .additional_extra {
    font-size: 14px;
    margin-top: 13px;
    margin-bottom: 10px;
  }
  .additional_card {
    padding: 0;
    gap: 0px !important;
  }
  .additional_title,
  .additional_hero_title {
    font-size: 18px !important;
    margin-left: 0;
    padding: 0 15px;
    text-align: start;
  }
  .additional_card {
    justify-content: center;
  }
  button#additional_id_btn {
    width: 210.373px;
    height: 44.149px;
    margin-top: 10px;
  }
  h2.article-subheading {
    margin-bottom: 10px;
    margin-top: -2px;
  }
  .additional_card {
    min-height: 342px !important;
  }
}
@media screen and (max-width: 480px) {
  .innovation-section {
    padding: 40px 20px;
    min-height: auto;
    background-position: center center;
    background-size: cover;
  }

  .innovation-image-wrapper {
    width: 100%;
    padding: 0;
  }

  .innovation-overlay {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 10px;
  }

  .innovation-title,
  .knowledge {
    font-size: 26px !important;
    text-align: center;
    line-height: 1.3;
  }

  .makethemone {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .innovation-section {
    max-height: 86vh !important;
    min-height: 100vh !important;
  }
}

/* ========== BASE STYLES ========== */

.additional_boxes {
  opacity: 1;
  transform: translateY(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.additional_boxes.visible {
  opacity: 1;
  transform: translateY(0);
}

.additional_boxes {
  max-width: 1725px;
  margin: 0 auto;
  padding: 100px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.additional_card_row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
div#additional_card_1 {
  height: 500px;
  width: 20%;
}

div#additional_card_2 {
  width: 20%;
}
div#additional_card_3 {
  width: 20%;
}
div#additional_card_4 {
  width: 20%;
}

/*additioanl card 4*/
#additional_card_1 {
  height: 500px;
}
/* Base style for the image inside additional_card_4 */
#additional_card_1 .additional_top_img {
  width: 100%;
  height: 248px; /* fixed height instead of max-height for smooth container animation */
  border-radius: 23px;
  object-fit: cover;
  display: block;
  overflow: hidden;
  transition: height 0.8s ease;
}

/* Hover effect — shrink like right-card */
#additional_card_1:hover .additional_top_img {
  height: 180px; /* reduced height from top down */
}

/* Extra text reveal */
#additional_card_1 .additional_extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.8s ease, opacity 0.8s ease;
}

#additional_card_1:hover .additional_extra {
  max-height: 200px;
  opacity: 1;
}
/* Wrap the image in a container like right-card-image */
#additional_card_4 {
  width: 100%;
  height: 248px; /* starting height */
  overflow: hidden;
  border-radius: 23px;
  transition: height 0.8s ease; /* same timing as right-card */
}

#additional_card_4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 23px;
}

/* Hover effect — shrink height smoothly */
.additional_card:hover #additional_card_4 {
  height: 180px !important; /* reduced height, shrinks from top to bottom */
}

/* For your extra content to appear smoothly */
.additional_card .additional_extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.8s ease, opacity 0.8s ease;
}

.additional_card:hover .additional_extra {
  max-height: 200px;
  opacity: 1;
}

/*additioanl card 4*/
#additional_card_4 {
  height: 500px;
}
/* Base style for the image inside additional_card_4 */
#additional_card_4 .additional_top_img {
  width: 100%;
  height: 248px; /* fixed height instead of max-height for smooth container animation */
  border-radius: 23px;
  object-fit: cover;
  display: block;
  overflow: hidden;
  transition: height 0.8s ease;
}

/* Hover effect — shrink like right-card */
#additional_card_4:hover .additional_top_img {
  height: 180px; /* reduced height from top down */
}

/* Extra text reveal */
#additional_card_4 .additional_extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.8s ease, opacity 0.8s ease;
}

#additional_card_4:hover .additional_extra {
  max-height: 200px;
  opacity: 1;
}

/*card 4*/
/* Image in additional_card_2 */
#additional_card_2 .additional_top_img {
  width: 100%;
  height: 248px; /* fixed height for smooth animation */
  border-radius: 23px;
  object-fit: cover;
  display: block;
  overflow: hidden;
  transition: height 0.6s ease;
  transform-origin: bottom; /* anchor shrink from bottom */
}

/* Hover — shrink upwards */
#additional_card_2:hover .additional_top_img {
  height: 180px; /* reduced height */
}

/* Extra text reveal */
#additional_card_2 .additional_extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.6s ease;
}

#additional_card_2:hover .additional_extra {
  max-height: 200px;
  opacity: 1;
}

/*card 3*/
/* Image in additional_card_2 */
#additional_card_3 .additional_top_img {
  width: 100%;
  height: 248px; /* fixed height for smooth animation */
  border-radius: 23px;
  object-fit: cover;
  display: block;
  overflow: hidden;
  transition: height 0.6s ease;
  transform-origin: bottom; /* anchor shrink from bottom */
}

/* Hover — shrink upwards */
#additional_card_3:hover .additional_top_img {
  height: 180px; /* reduced height */
}

/* Extra text reveal */
#additional_card_3 .additional_extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.6s ease;
}

#additional_card_3:hover .additional_extra {
  max-height: 200px;
  opacity: 1;
}

.additional_title,
.additional_hero_title {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-transform: capitalize;
  margin-top: 20px;
  color: black;
  margin-left: 18px;
  padding-right: 18px;
  color: white;
}
.additional_hero_desc {
  color: white !important;
}

.additional_extra {
  padding-top: 18px;
  line-height: 1.5 !important;
}
.additional_desc,
.additional_hero_desc {
  font-family: Poppins, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: black;
  margin-top: 10px;
  text-align: start;
  margin-left: 18px;
  padding-right: 18px;
}

.additional_hero {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 470px;
  border-radius: 23.8px;
  overflow: hidden;
  outline: 12px solid white;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 20px;
  color: white;
}

/* ========== HERO BACKGROUNDS ========== */

#additional_hero_1 .additional_hero_bg {
  background: url("Group11712753788.png") center/cover no-repeat !important;
}

#additional_hero_2 .additional_hero_bg {
  background: url("Group11712753783.png") center/cover no-repeat !important ;
}

#additional_hero_3 .additional_hero_bg {
  background: url("Group11712753786.png") center/cover no-repeat !important;
}

#additional_hero_4 .additional_hero_bg {
  background: url("Group11712753789.png") center/cover no-repeat !important;
}

/* ========== HERO ANIMATIONS ========== */
.additional_hero_bg {
  transform: scale(1);
  filter: blur(0px);
  transition: transform 0.6s ease, filter 0.6s ease;
}
.additional_hero.hovered .additional_hero_bg {
  transform: scale(1.9);
  filter: blur(6px);
}

.additional_hero.hovered .additional_hero_content {
  transform: translate(0%, -20%);
  opacity: 1;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.additional_hero_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: transform 0.6s ease, filter 0.6s ease;
}

.additional_hero_static {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 36px 9px;
  z-index: 2;
  color: white;
  text-align: left;
}

.additional_hero_extra {
  font-family: Poppins, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: white;
  margin-top: 10px;
  text-align: start;
  margin-left: 18px;
  padding-right: 18px;
}

.additional_hero_content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 30px 20px;
  z-index: 3;
  color: white;
  text-align: left;
  width: 100%;
  transform: translate(-30%, 100%);
  opacity: 0;
  transition: none;
}

.additional_hero.hovered .additional_hero_static {
  display: none;
}

/* ========== ADDITIONAL CARD ========== */

/*.additional_card {*/
/*  background: #FAFAFA;*/
/*  border-radius: 20px;*/
/*  max-width: 346px;*/
/*  flex: 1 1 300px;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  align-items: start;*/
/*  overflow: hidden;*/
/*  position: relative;*/
/*  padding: 15px 15px 20px;*/
/*  transition: all 0.4s ease;*/
/*}*/

.additional_extra {
  font-family: "Poppins";
  font-size: 17px;
  color: black;
  text-align: start;
  line-height: 1.4;
  margin-top: -13px;
  margin-left: 18px;
  padding-right: 18px;
  padding-bottom: 10px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-in, opacity 0.1s ease;
}

/*.additional_card:hover .additional_top_img {*/
/*  max-height: 180px;*/
/*  transition: max-height 0.5s ease-in-out;*/
/*}*/

.additional_card:hover .additional_extra {
  opacity: 1;
  max-height: 200px;
}

/* ========== BUTTON STYLES ========== */

.additional_explore_btn_container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.additional_explore_btn {
  background: linear-gradient(
    68deg,
    #524db1 0%,
    #7c6ae8 23%,
    #9b68eb 54%,
    #c972db 82%,
    #e879cd 100%
  );
  padding: 12px 40px;
  color: white;
  font-size: 20px;
  font-weight: 700;
  font-family: Poppins, sans-serif;
  text-transform: capitalize;
  border: none;
  border-radius: 105px;
  cursor: pointer;
}

#additional_id_btn {
  margin-top: 0;
  margin-bottom: 0;
}
button#additional_id_btn {
  position: relative;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 19.713px;
  font-style: normal;
  font-weight: 700;
  line-height: 35.118px;
  text-transform: capitalize;
  width: 254.373px;
  height: 48.149px;
  border-radius: 103.893px;
  background: linear-gradient(
    89deg,
    #524db1 -14.94%,
    #7c6ae8 11.79%,
    #9b68eb 49.33%,
    #c972db 82.32%,
    #e879cd 103.36%
  );
  border: 0;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.3s ease;
}

/* Flipped gradient overlay */
button#additional_id_btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    89deg,
    #e879cd -14.94%,
    #c972db 11.79%,
    #9b68eb 49.33%,
    #7c6ae8 82.32%,
    #524db1 103.36%
  );
  opacity: 0;
  transition: opacity 1.6s ease;
  z-index: -1;
}

button#additional_id_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(108, 114, 255, 0.4);
}

button#additional_id_btn:hover::before {
  opacity: 1;
}

@media (max-width: 1680px) {
  .additional_title,
  .additional_hero_title {
    font-size: 18px;
  }

  .additional_desc,
  .additional_hero_desc {
    font-size: 16px;
  }
  .additional_card .additional_extra,
  #additional_card_1:hover .additional_extra {
    font-size: 16px;
  }
  .additional_card_row {
    gap: 24px;
  }
  .additional_boxes {
    padding: 100px 42px;
  }
}
@media screen and (max-width: 1200px) {
  .additional_boxes {
    padding: 80px 30px;
  }
  .additional_card {
    height: 131px !important;
    min-height: 500px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    justify-content: space-around;
  }

  .additional_card,
  .additional_hero {
    max-width: 48%;
  }
  .article-wrapper {
    flex-direction: column;
  }
  .article-left {
    width: 100%;
  }
}
@media screen and (max-width: 992px) {
  .additional_boxes {
    padding: 60px 20px;
  }

  .additional_card,
  .additional_hero {
    max-width: 100%;
  }

  .additional_explore_btn {
    font-size: 18px;
    padding: 10px 30px;
  }
  .article-wrapper {
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {
  .additional_card_row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .additional_card,
  .additional_hero {
    max-width: 100%;
    width: 100%;
  }

  .additional_hero_static,
  .additional_hero_content {
    padding: 24px 16px;
  }

  .additional_title,
  .additional_desc,
  .additional_extra,
  .additional_hero_title,
  .additional_hero_desc {
    margin-left: 16px;
    padding-right: 16px;
  }

  .additional_boxes {
    padding: 50px 15px;
  }

  .additional_explore_btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .additional_hero {
    height: auto;
    min-height: 400px;
  }

  .additional_hero_static,
  .additional_hero_content {
    padding: 20px 14px;
  }

  .additional_hero_title,
  .additional_title {
    font-size: 17px;
  }

  .additional_hero_desc,
  .additional_desc,
  .additional_extra {
    font-size: 15px;
  }

  .additional_card {
    padding: 12px;
  }
}
@media (max-width: 1440px) {
  .insights-header.visible{
    width: 100%;
    padding: 0px 20px;
  }
}
@media (max-width: 1280px) {
  /* Additional card hover */
  #additional_card_1:hover .additional_extra {
    font-size: 14px;
  }
  .additional_title,
  .additional_hero_title {
    font-size: 18px;
  }
  .additional_desc,
  .additional_hero_desc {
    font-size: 16px;
  }
  .additional_card,
  .additional_hero {
    box-shadow: none;
  }
  .additional_hero {
    height: 388px;
  }
  #additional_card_1 .additional_top_img {
    height: 186px;
  }
  #additional_card_1:hover .additional_top_img {
    height: 119px;
  }
  #additional_card_4 .additional_top_img {
    height: 186px;
  }
  #additional_card_4:hover .additional_top_img {
    height: 119px;
  }
  .additional_extra {
    font-size: 14px !important;
  }
  .additional_hero.hovered .additional_hero_content {
    transform: translate(0%, -20%);
    opacity: 1;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    bottom: -80px;
  }
  .additional_hero_extra {
    font-size: 14px;
  }
  .additional_card .additional_top_img {
    height: 117px;
  }
  #additional_card_2:hover .additional_top_img {
    height: 131px;
  }
  #additional_card_3:hover .additional_top_img {
    height: 131px;
  }
  #additional_card_2 .additional_top_img {
    height: 214px;
  }
  #additional_card_3 .additional_top_img {
    height: 214px;
  }
  .additional_boxes {
    gap: 0;
  }
  #additional_id_btn {
    margin-top: 0;
    margin-top: -45px;
    margin-bottom: 0;
  }
}
/* Laptop Large - under 1400px */
@media (max-width: 1399px) {
  .additional_card,
  .additional_hero {
    flex: 0 0 23%; /* roughly 3 per row */
    max-width: 30%;
  }
}

/* Laptop Medium - under 1280px */
@media (max-width: 1279px) {
  .additional_card,
  .additional_hero {
    flex: 0 0 23%; /* 2 per row */
    max-width: 45%;
  }
}

@media (max-width: 1024px) {
  .additional_card,
  .additional_hero {
    flex: 0 0 23%;
    max-width: 45%;
    height: 443px !important;
  }
  /* Additional cards */
  .additional_card .additional_extra,
  #additional_card_1:hover .additional_extra {
    font-size: 14px;
  }
  .additional_title,
  .additional_hero_title {
    font-size: 18px;
  }
  .additional_desc,
  .additional_hero_desc {
    font-size: 16px;
  }
  .additional_boxes.visible {
    gap: 0;
  }
  .additional_card,
  .additional_hero {
    flex: 0 0 48%; /* 2 per row, slightly smaller for gaps */
    max-width: 48%;
  }
  .insights-header.visible{
    width: 100%;
    padding: 0px 20px;
  }
}
@media (max-width: 768px) {
  .additional_card,
  .additional_hero {
    flex: 0 0 90%;
    max-width: 100%;
  }
  #additional_id_btn {
    margin-top: 0px;
  }
  .future-section{
    padding-top: 50px;
  }
}
@media (max-width: 480px) {
  .additional_card,
  .additional_hero {
    flex: 0 0 48%;
    max-width: 100%;
  }
  div#additional_card_1 {
    height: 500px;
    width: 100%;
    padding: 0;
  }
  div#additional_card_2 {
    height: 500px;
    width: 100%;
    padding: 0;
  }
  div#additional_card_3 {
    width: 100%;
    padding: 0;
  }

  div#additional_card_4 {
    width: 100%;
    padding: 0;
  }
  #additional_id_btn {
    margin-top: 0;
    margin-top: -45px;
    margin-bottom: 0;
    margin-top: 10px;
  }
}
@media screen and (max-width: 480px) {
  /* Container adjustments */
  .additional_boxes {
    padding: 40px 15px;
    gap: 25px;
    width: 100%;
  }

  /* Each row stacks vertically */
  .additional_card_row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* Cards full width & centered */
  .additional_card {
    width: 100%;
    max-width: 350px;
    min-height: 480px; /* set consistent height */
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: start;
    gap: 15px;
  }

  /* Heroes full width, fixed height */
  .additional_hero {
    width: 100%;
    max-width: 350px;
    height: 480px; /* fixed height for consistency */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: start;
    text-align: start;
    padding: 20px 14px;
    gap: 15px;
  }

  /* Hero content padding adjustments */
  .additional_hero_static,
  .additional_hero_content {
    padding: 20px 14px;
    text-align: start;
  }

  /* Titles and descriptions scaling */
  .additional_hero_title,
  .additional_title {
    font-size: 17px;
    text-align: start;
  }

  .additional_hero_desc,
  .additional_desc,
  .additional_extra {
    font-size: 16px;
    text-align: start;
    margin-left: 0;
    padding-right: 0;
    line-height: 1.5;
  }

  /* Card images maintain ratio */
  .additional_top_img {
    width: 100%;
    height: auto;
    max-height: 248px;
    border-radius: 23px;
  }

  /* Explore button responsive */
  .additional_explore_btn_container {
    justify-content: center;
  }

  #additional_id_btn,
  .additional_explore_btn {
    width: 100%;
    max-width: 250px;
    font-size: 16px;
    padding: 10px 20px;
  }

  .additional_hero_title,
  .additional_title {
    font-size: 17px;
    text-align: start;
    margin: 0;
  }

  .additional_card-image {
    width: 100% !important;
  }
  .additional_card .additional_title {
    margin-left: 10px;
  }
  .additional_desc {
    margin-left: 10px;
  }
  .additional_card .additional_extra {
    margin-left: 10px;
  }
  .additional_hero_extra {
    margin-left: 0;
  }
  .additional_hero.hovered .additional_hero_content {
    transform: translate(0%, -20%);
    opacity: 1;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    bottom: -1px;
  }
  .additional_card {
    gap: 0 !important;
  }
}