/* Hero Section 1 */

 .industry-hero-container {
     height: auto;
     width: 100%;
     position: relative;

     .img-container {
         height: auto;
         width: 100%;
         margin: 122px 0 86px 0;

         .img-mobile {
             display: none;
         }

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

     .text-container {
         height: auto;
         width: 727px;
         text-align: center;
         align-items: center;
         justify-content: center;
         display: flex;
         flex-direction: column;
         position: absolute;
         transform: translate(-50%, -50%);
         top: 55%;
         left: 50%;

         h1 {
             margin-bottom: 32px;
         }

         .cta-primary-container {
             text-decoration: none;

             button {
                 display: flex;
                 height: auto;
                 width: fit-content;
                 justify-content: center;
                 align-items: center;
                 gap: 8px;
                 border-radius: 30px;
                 background-color: transparent;
                 border: none;
                 outline: none;
                 cursor: pointer;
                 transition: 0.8s;

                 .hover-arrow-red {
                     background: #E6323A;
                 }

                 .hover-arrow-black {
                     background: #000;
                 }

                 .hover-arrow-black,
                 .hover-arrow-red {
                     border-radius: 29px;
                     overflow: hidden;
                     width: 48px;
                     height: 48px;
                     position: relative;
                     padding: 12px;

                     .icon-contain {
                         width: 100%;
                         height: 100%;
                         overflow: hidden;
                         position: relative;
                     }

                     .arrow1 {
                         position: absolute;
                         left: 0;
                         top: 0;
                         transition: 0.8s;
                     }

                     .arrow2 {
                         position: absolute;
                         left: -85%;
                         top: 100%;
                         transition: 0.8s;
                     }
                 }

                 img {
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                 }

                 .cta-primary {
                     text-align: start;
                     color: var(--text-white);
                 }

                 &:hover {

                     .hover-arrow-black,
                     .hover-arrow-red {
                         .arrow1 {
                             top: -100%;
                             left: 85%;
                         }

                         .arrow2 {
                             top: 0;
                             left: 0;
                         }
                     }
                 }
             }

             @media (max-width: 1024px) {
                 & {

                     button {
                         display: flex;
                         gap: 8px;
                         justify-content: center;
                         align-items: center;
                         width: fit-content;
                         height: auto;
                         border: none;
                         background-color: transparent;

                         .hover-arrow-black,
                         .hover-arrow-red {
                             width: 32px;
                             height: 32px;
                             padding: 6px;
                         }
                     }
                 }
             }
         }

     }

 }

 @media screen and (max-width: 1024px) {
     .industry-hero-container {
         height: auto;
         width: 100%;
         position: relative;

         .img-container {
             height: auto;
             width: 100%;
             margin: 117px 0 104px 0;

             .img-web {
                 display: none;
             }

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

         .text-container {
             height: auto;
             width: 80%;
             max-width: 100%;
             text-align: center;
             align-items: center;
             justify-content: center;
             display: flex;
             flex-direction: column;
             position: absolute;
             top: 50%;
             left: 50%;

             h1 {
                 margin-bottom: 24px;
             }
         }
     }
 }

 .demo-form-container {
     position: fixed;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     /* background: rgba(0, 0, 0, 0.2); */
     z-index: 1;
     display: none;
     opacity: 0;
     transition: opacity 0.3s ease;
     z-index: 99;

     .demo-form {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         height: auto;
         max-width: 625px;
         width: 100%;
         height: 100%;
         min-height: 450px;
         max-height: 570px;
         background: var(--section-gradient);
         box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
         border-radius: 16px;
         padding: 40px;
         z-index: 999;

         .form-header {
             width: 100%;
             height: auto;
             display: flex;
             justify-content: space-between;
             align-items: center;

             h4 {
                 font-size: 18px;
                 font-weight: 400;
                 line-height: 26px;
             }

             .close_popup {
                 width: 28px;
                 height: 28px;
                 cursor: pointer;

                 img {
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                 }
             }
         }

         iframe {
             /* min-height: 450px; */
             height: 100%;
             /* max-height: 500px; */
         }
     }

     &.active {
         display: block;
         opacity: 1;
         transition: opacity 0.3s ease;
     }

     @media screen and (max-width: 1024px) {
         & {
             .demo-form {
                 width: 95%;
                 padding: 40px 20px;

                 .form-header {

                     .close_popup {
                         width: 20px;
                         height: 20px;
                     }
                 }
             }
         }
     }
 }

 /* Anchor Tabs  */
 .anchor-container {
     position: sticky;
     top: 0;
     z-index: 5;
     background: var(--bg-black-primary);

     .anchor-tabs-main {
         width: 100%;
         height: auto;
         display: flex;
         justify-content: center;
         gap: 50px;
         align-items: center;
         padding-block: 16px;

         button.anchor-tab {
             width: fit-content;
             height: 100%;
             background: none;
             outline: none;
             border: 0;
             color: var(--text-grey5);
             cursor: pointer;
             transition: color 300ms ease, font-weight 200ms ease-in;

             &.active {
                 color: var(--text-white);
                 font-weight: 600;
                 transition: color 300ms ease, font-weight 200ms ease-in;
             }

             &.sub-heading-secondary {
                 font-family: "Sora", sans-serif;
             }
         }
     }
 }

 /* When container is white, active tabs should be black */
 .anchor-container.white-bg {
     background: var(--bg-white);
 }

 .anchor-container.white-bg .anchor-tab.active,
 .anchor-container.white-bg .dropdown-title.active {
     color: var(--bg-black-primary) !important;
 }

 /* When container is black, active tabs should be white */
 .anchor-container.primary-black-bg {
     background: var(--bg-black-primary);
 }

 .anchor-container.primary-black-bg .anchor-tab.active,
 .anchor-container.primary-black-bg .dropdown-title.active {
     color: var(--bg-white) !important;
 }


 @media screen and (max-width: 1024px) {
     .anchor-container-mobile {
         width: 100%;
         height: auto;
         z-index: 5;
         position: sticky;
         background: var(--bg-black-primary);
         top: 20px;

         .anchorDropdown {
             .anchor-dropdown {
                 position: relative;
                 width: 100%;
             }

             .anchor-cta {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 padding: 20px;
                 border: 1px solid transparent;
                 border-radius: 8px;
                 cursor: pointer;
                 /* background: linear-gradient(177deg, #fff 100%, #fff 100%) padding-box,
                     var(--blue-red-gradient) border-box; */
                 transition: all 0.5s ease;

                 .anchor-title {
                     transition: all 0.5s ease;
                 }
             }

             .cta-arrow {
                 transition: transform 0.3s ease;
             }

             .titles-container {
                 position: absolute;
                 top: calc(100% + (-1px));
                 left: 0;
                 width: 100%;
                 max-height: 0;
                 transition: max-height 0.3s ease;
                 overflow: hidden;
                 /* background-color: #fff; */
                 /* border: 1px solid #d8e5f4; */
                 border-top: 0;
                 border-radius: 8px;
                 border-top-left-radius: 0;
                 border-top-right-radius: 0;
                 z-index: 10;
             }

             .dropdown-title {
                 padding: 12px 20px;
                 cursor: pointer;
                 transition: background-color 0.3s ease;
                 /* color: var(--text-black-primary); */
             }

             .dropdown-title.active {
                 /* color: var(--text-black-primary); */
                 opacity: 0.4;
             }

             .dropdown-open .titles-container {
                 max-height: 500px;
                 transition: max-height 0.3s ease;
             }

             .displayNone {
                 border: 0;
             }

             .dropdown-open .anchor-cta {
                 border-bottom: 0;
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
             }

             .dropdown-open .cta-arrow {
                 transform: rotate(180deg);
             }
         }
     }
 }

 @media screen and (max-width: 1024px) {

     /* Mobile shared container classes */
     .anchor-container-mobile.white-bg {
         background: var(--bg-white);
     }

     .anchor-container-mobile.primary-black-bg {
         background: var(--bg-black-primary);
     }

     .anchor-container-mobile.white-bg .anchor-cta {
         background: linear-gradient(177deg, #fff 100%, #fff 100%) padding-box,
             linear-gradient(53deg,
                 #8fc3ff 21.4%,
                 #a984ff 43.99%,
                 #e6323a 78.36%) border-box;
         border: 1px solid transparent;
     }

     .anchor-container-mobile.white-bg .titles-container {
         background: linear-gradient(177deg, #fff 100%, #fff 100%) padding-box,
             linear-gradient(53deg,
                 #8fc3ff 21.4%,
                 #a984ff 43.99%,
                 #e6323a 78.36%) border-box;
         border: 1px solid transparent;
     }

     .anchor-container-mobile.white-bg .dropdown-title {
         background: var(--bg-white);
         color: var(--text-black-primary);
     }

     /* Active tabs ( mobile titles) */
     /* .anchor-container-mobile.white-bg .anchor-tab,
     .anchor-container-mobile.white-bg .anchor-tab.active,
     .anchor-container-mobile.white-bg .dropdown-title.active {
         color: var(--text-black-primary) !important;
     } */

     /* Ensure active tabs have proper contrast */
     .anchor-container-mobile.white-bg .dropdown-title.active {
         color: var(--text-black-primary) !important;
         opacity: 1;
         /* Remove the opacity reduction */
     }

     .anchor-container-mobile.primary-black-bg .anchor-tab.active,
     .anchor-container-mobile.primary-black-bg .dropdown-title.active {
         color: var(--bg-white) !important;
         opacity: 1;
         /* Remove the opacity reduction */
     }

     /* MOBILE: dropdown-cta title & arrow */
     .anchor-container-mobile.white-bg .anchor-cta .anchor-title,
     .anchor-container-mobile.white-bg .anchor-cta .cta-arrow {
         color: var(--text-black-primary);
         /* fill: var(--text-black-primary); */
     }

     .anchor-container-mobile.white-bg .anchor-cta .cta-arrow {
         fill: var(--bg-white);
     }

     .anchor-container-mobile.primary-black-bg .anchor-cta {
         border: 1px solid #2F2F2F;
         background: var(--bg-black-secondary);
     }

     .anchor-container-mobile.primary-black-bg .titles-container {
         background: var(--bg-black-secondary);
         border: 1px solid #2F2F2F;
     }

     .anchor-container-mobile.primary-black-bg .dropdown-title {
         color: var(--text-white);
     }

     .anchor-container-mobile.primary-black-bg .anchor-cta,
     .anchor-container-mobile.primary-black-bg .anchor-cta .anchor-title,
     .anchor-container-mobile.primary-black-bg .anchor-cta .cta-arrow {
         color: var(--bg-white);
         /* fill: var(--bg-white); */
     }

     .anchor-container-mobile.primary-black-bg .anchor-cta .cta-arrow {
         fill: var(--bg-black-primary);
     }

 }


 /* Challenges - Section 2  */
 .black-bg {
     position: relative;
     z-index: 0;
     overflow: hidden;

     .challenges {
         position: relative;
         height: auto;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: start;
         padding-top: var(--spacer-60);
         padding-bottom: 100px;
         gap: 80px;
         z-index: 2;

         .content {
             width: 100%;
             height: auto;
             display: flex;
             justify-content: space-between;
             align-items: start;

             div {
                 max-width: 475px;
                 width: 100%;
                 height: auto;

                 .eyebrow {
                     color: var(--text-grey2);
                 }
             }

             .para-primary {
                 max-width: 625px;
                 width: 100%;
                 height: auto;
                 margin-top: 5px;
             }
         }

         .timer-accordion-container {
             width: 100%;
             height: 100%;
             display: flex;
             flex-direction: column;
             justify-content: start;
             align-items: center;

             .accordion-main {
                 width: 100%;
                 height: auto;
                 transition: all 200ms ease;

                 .accordion {
                     width: 100%;
                     height: auto;
                     padding-block: var(--spacer-32);
                     display: flex;
                     justify-content: space-between;
                     align-items: start;
                     cursor: pointer;

                     .heading {
                         width: auto;
                         height: auto;
                         display: flex;
                         justify-content: start;
                         align-items: center;
                         gap: 80px;
                         color: var(--text-grey4);
                         transition: all 0.2s ease;

                         .index {
                             color: var(--text-grey4);
                             font-size: 18px;
                             font-weight: 300;
                             line-height: normal;
                             transition: all 0.2s ease;
                         }
                     }

                     .content {
                         width: 624px;
                         height: 100%;
                         max-height: 0;
                         opacity: 0;
                         display: flex;
                         justify-content: center;
                         align-items: start;
                         color: var(--text-grey2);
                         transition: max-height 200ms ease, margin-top 400ms ease,
                             opacity 400ms ease;

                         &.active {
                             max-height: 1000px;
                             opacity: 1;
                             transition: max-height 200ms ease, margin-top 400ms ease,
                                 opacity 400ms ease;
                         }
                     }

                     &.active {
                         .heading {
                             color: var(--text-white);
                             transition: all 0.2s ease;

                             .index {
                                 color: var(--text-white);
                                 transition: all 0.2s ease;
                             }
                         }
                     }
                 }

                 .border-bottom {
                     position: relative;
                     width: 100%;
                     height: 2px;
                     background: #363636;
                     transition: all 0.2s ease;

                     b {
                         position: absolute;
                         bottom: 0;
                         left: 0;
                         z-index: 2;
                         height: 2px;
                         background: var(--bg-white);
                         opacity: 1;
                     }

                     &.active {
                         background: var(--text-grey5);
                         width: 100%;
                         height: 2px;
                         transition: all 0.2s ease;

                         b {
                             animation-name: timerBar;
                             animation-duration: 5s;
                             animation-timing-function: ease-in;
                             animation-iteration-count: 1;
                             animation-direction: alternate;
                             animation-fill-mode: forwards;
                         }
                     }
                 }
             }
         }

         @media screen and (max-width: 1025px) {
             & {
                 padding-block: var(--spacer-60);
                 gap: 40px;

                 .content {
                     flex-direction: column;
                     gap: 8px;
                     align-items: start;

                     .para-primary {
                         height: 100%;
                         max-height: 90px;
                         text-overflow: ellipsis;
                         display: -webkit-box;
                         overflow: hidden;
                         -webkit-box-orient: vertical;
                         -webkit-line-clamp: 4;
                         transition: all 0.5s ease;

                         &.active {
                             display: block;
                             height: 100%;
                             max-height: 500px;
                             transition: all 0.5s ease;
                         }
                     }

                     button {
                         width: fit-content;
                         height: auto;
                         background: none;
                         outline: none;
                         border: 0;
                         color: var(--text-arcon-red);
                         line-height: 22px;
                         font-weight: 300;
                         text-decoration: underline;
                         text-underline-offset: 2px;
                         display: none;

                         &.active {
                             display: block;
                         }
                     }
                 }

                 .timer-accordion-container {
                     .accordion-main {
                         .accordion {
                             padding-block: 20px;
                             flex-direction: column;
                             gap: 8px;

                             .heading {
                                 gap: 16px;
                             }

                             .content {
                                 width: auto;
                                 gap: 16px;
                                 margin-left: 39.3px;
                             }
                         }
                     }
                 }
             }
         }

         @media screen and (min-width: 601px) and (max-width: 1024px) {
             & {
                 .content {
                     div {
                         max-width: 100%;
                     }

                     .para-primary {
                         max-width: 100%;
                     }
                 }
             }
         }
     }
 }

 /* Build a Secure World - Section 4  */

 .revolutionizing-container {
     padding-top: 120px;

     .upper-part {
         max-width: 624px;
         margin: 0 auto;
         text-align: center;

     }

     .revolutionizing-swiper {
         background: linear-gradient(180deg, #FFF 0%, #F4F9FF 54.5%, #FFF 100%);
         height: fit-content;
         margin-top: 25px;
         padding: 35px 35px 44px 84px;
         position: relative;
         overflow: hidden;

         .fade-effect {
             width: 205px;
             height: 361px;
             position: absolute;
             bottom: 0;
             right: 0;
             z-index: 10;
             background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
         }

         .swiper-wrapper {


             .swiper-elements {
                 height: auto;
                 /* width: 516px !important; */
                 border-radius: 20px;
                 border: 1px solid var(--Primary-Light-Blue, #D8E5F4);
                 background: var(--Primary-White, #FFF);
                 padding: 2rem;
                 cursor: pointer;
                 transition: all 0.2s ease-in-out;

                 a {
                     text-decoration: none;

                     img {
                         height: 54px;
                         margin-bottom: 20px;
                         color: var(--text-black-primary);
                     }

                     h4 {
                         margin-bottom: 8px;
                         color: var(--text-black-primary);
                     }

                     .para-secondary {
                         color: var(--text-grey5);
                     }
                 }


                 &:hover {
                     background: var(--section-gradient) padding-box,
                         var(--blue-red-gradient) border-box;
                     border-radius: 22px;
                     border: 1px solid transparent;
                     transition: all 0.2s ease-in-out;
                 }

             }

         }

         .swiper-scrollbar {
             /* position: absolute; */
             /* left: 35%; */
             /* bottom: 0; */
             width: 400px;
             left: 50%;
             transform: translateX(-50%);

             /* .swiper-scrollbar-drag{
                    width: 170px !important;
                } */
         }

         .swiper-pagination {
             position: absolute;
             bottom: 0;

             .swiper-pagination-bullet {
                 width: 143px;
                 height: 4px;
                 margin: 0 !important;
                 border-radius: 0%;
                 text-align: center;
                 line-height: 20px;
                 font-size: 12px;
                 color: #000;
                 opacity: 1;
                 background: rgba(0, 0, 0, 0.2);
             }

             .swiper-pagination-bullet-active {
                 color: #fff;
                 background: #000000;
             }
         }
     }
 }

 .revolutionizing-container-mobile {
     display: none;
 }

 @media screen and (max-width: 1025px) {
     .revolutionizing-container {
         display: none;
     }

     .revolutionizing-container-mobile {
         display: block;

         .upper-part {
             margin-top: 60px;
             text-align: center;
             margin-bottom: 42px;

             h2 {
                 margin-bottom: 8px;
             }
         }

         .bottom-part {
             .accordion-container {
                 width: 100%;
                 height: auto;

                 .accordion {
                     width: 100%;
                     height: auto;
                     display: flex;
                     flex-direction: column;
                     gap: 0;
                     border-bottom: var(--border-light-blue);
                     padding-block: 0;

                     .accordion-header {
                         width: 100%;
                         height: auto;
                         display: flex;
                         justify-content: space-between;
                         align-items: center;
                         gap: 8px;
                         cursor: pointer;
                         user-select: none;

                         .accordion-title {
                             display: flex;
                             justify-content: center;
                             align-items: center;
                             gap: 20px;

                             #logo {
                                 width: 32px;
                                 height: 32px;
                                 object-fit: cover;
                             }
                         }

                         .accordion-icon {
                             width: 16px;
                             height: 16px;
                             display: inline-block;
                             background-size: contain;
                             background-repeat: no-repeat;
                             transition: transform 0.3s ease, opacity 0.3s ease;
                         }

                         &.open .accordion-icon {
                             transform: rotate(180deg);
                         }

                         .accordion-icon::before {
                             content: url("../images/plus-red.svg");
                         }

                         &.open .accordion-icon::before {
                             content: url("../images/minus-red.svg");
                         }
                     }

                     .accordion-content {
                         max-width: 80%;
                         max-height: 0;
                         overflow: hidden;
                         display: flex;
                         flex-direction: column;
                         gap: 16px;
                         margin-left: 52px;
                         transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, margin-bottom 0.5s ease-in-out;

                         .para-secondary {
                             color: var(--text-grey5);
                         }

                         .cta-secondary {
                             text-decoration: underline;
                             text-underline-offset: 4px;
                         }

                         &.open {
                             max-height: 500px;
                             opacity: 1;
                             margin-bottom: 0;
                             transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, margin-bottom 0.5s ease-in-out;
                         }
                     }
                 }
             }
         }
     }
 }

 @media screen and (min-width: 601px) and (max-width: 1024px) {
     .revolutionizing-container-mobile {
         .bottom-part {
             .accordion-container {
                 .accordion {
                     .accordion-content {
                         max-width: 90%;
                         margin-block: 0;
                         margin-top: -10px;
                     }
                 }
             }
         }
     }
 }

 /* Build a Secure World - Section 4  */

 .secure-world-container {
     margin-top: 7.5rem;
     margin-bottom: 7.5rem;

     .upper-part {
         padding-bottom: 3.75rem;

         .heading {
             padding-left: 12.3rem;
             padding-right: 12.3rem;
             text-align: center;
             padding-bottom: 3.7rem;
         }

         .description {
             display: flex;
             gap: 40px;
             justify-content: start;
             align-items: center;

             .description-img {
                 width: 400px;
                 height: 315px;
                 flex-shrink: 0;

                 img {
                     height: 100%;
                     width: 100%;
                     object-fit: cover;
                 }
             }

             .description-text {
                 flex-grow: 1;

                 h3 {
                     margin-bottom: 40px;
                 }

                 .description-sub-part {
                     display: flex;
                     width: 100%;
                     gap: 32px;

                     .description-content {
                         width: auto;
                         display: flex;
                         flex-direction: column;
                         gap: 8px;

                         h4 {
                             line-height: 36px;
                         }

                         .para-secondary {
                             color: var(--text-grey4);
                         }
                     }
                 }
             }
         }

         .scrollBar {
             margin-bottom: 40px;
         }

         .knowledge {
             margin-top: 0;
             margin-bottom: 0;
             display: flex;
             flex-direction: row;
             gap: 0;

             /* Grid Layout */
             .knowledge-grid-container {
                 .knowledge-grid {
                     display: block;
                     grid-template-columns: unset;
                     gap: 0;
                     padding: 0;
                 }
             }
         }
     }

     .bottom-container {
         width: 100%;
         height: auto;
         border: 1px solid var(--bg-grey2);
         border-radius: 12px;
         display: grid;
         grid-template-columns: repeat(6, 1fr);
         justify-content: start;
         align-items: center;

         .client {
             position: relative;
             max-width: 215px;
             width: 100%;
             height: 85px;
             border-right: 1px solid var(--bg-grey2);

             img {
                 position: absolute;
                 max-width: 98px;
                 width: 100%;
                 max-height: 33px;
                 height: 100%;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
                 filter: grayscale(1);
             }

             &:last-child {
                 border-right: 0;
             }
         }
     }

     @media screen and (max-width: 1025px) {

         & {
             margin-top: var(--spacer-60);
             margin-bottom: 40px;

             .upper-part {
                 padding-bottom: 3.75rem;

                 .heading {
                     padding-left: 0;
                     padding-right: 0;
                     text-align: left;
                     padding-bottom: 2rem;
                 }

                 .description {
                     display: flex;
                     flex-direction: column;
                     gap: 32px;
                     align-items: start;

                     .description-img {
                         width: 100%;
                         height: 100%;

                         img {
                             height: auto;
                             width: 100%;
                             object-fit: cover;
                         }
                     }

                     .description-text {
                         padding: 0;
                         /* padding-top: 2rem; */
                         width: 100%;

                         h3 {
                             margin-bottom: 32px;
                         }

                         .description-sub-part {
                             display: flex;
                             flex-direction: column;
                             width: 100%;
                             gap: 24px;
                             /* padding-top: 2rem; */

                             .description-content {
                                 width: auto;

                                 h4 {
                                     font-weight: 400;
                                 }

                                 .para-secondary {
                                     font-size: 14px;
                                 }
                             }
                         }
                     }
                 }
             }

             .top-container {
                 flex-direction: column;
                 gap: 24px;

                 .top-left {
                     width: 100%;
                 }

                 .top-right {
                     width: 100%;
                     row-gap: 20px;
                     column-gap: 20px;
                 }
             }

             .bottom-container {
                 grid-template-columns: repeat(3, 1fr);

                 .client {
                     border-bottom: 1px solid var(--bg-grey2);
                     height: 60px;

                     img {
                         max-width: 68px;
                         width: 100%;
                         max-height: 23px;
                         height: 100%;
                     }

                     &:nth-child(3) {
                         border-right: 0;
                     }

                     &:nth-child(4),
                     &:nth-child(5),
                     &:nth-child(6) {
                         border-bottom: 0;
                     }
                 }
             }
         }
     }

     @media screen and (min-width: 601px) and (max-width: 1024px) {

         & {
             .upper-part {
                 .description {
                     flex-direction: column;

                     .description-img {
                        width: 100%;
                     }
                 }
             }

             .bottom-container {
                 .client {
                    max-width: 100%;
                 }
             }
         }
     }
 }

 /* Media Queries - Desktop First */
 @media (max-width: 1024px) {
     .knowledge {
         gap: 32px;
         margin-bottom: var(--spacer-60);

         .knowledge-grid-container {
             .knowledge-grid {
                 padding: 0;
                 grid-template-columns: 1fr;
             }

             .card {
                 display: flex;
                 flex-direction: row;
                 justify-content: center;
                 align-items: center;
                 border: none;

                 .card-img {
                     max-width: 145px;
                     max-height: 100px;
                     border-radius: 0.5rem;
                     overflow: hidden;
                 }

                 .card-content {
                     gap: 8px;
                     padding-block: 8.5px;

                     .cta {
                         text-decoration: underline;
                         text-underline-offset: 2px;

                         &::after {
                             content: none;
                             position: relative;
                         }

                         &:hover::after,
                         &:focus::after {
                             opacity: 1;
                         }
                     }
                 }
             }

             &:hover {
                 background-color: transparent;
             }
         }

         .dropdown {
             .custom-dropdown {
                 position: relative;
                 width: 100%;
             }

             .dropdown-cta {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 padding: 20px;
                 border: 1px solid #d8e5f4;
                 border-radius: 8px;
                 cursor: pointer;
                 background: var(--section-gradient);
             }

             .cta-arrow {
                 transition: transform 0.3s ease;
             }

             .options-container {
                 position: absolute;
                 top: calc(100% + (-1px));
                 left: 0;
                 width: 100%;
                 max-height: 0;
                 transition: max-height 0.3s ease;
                 overflow: hidden;
                 background-color: #fff;
                 /* border: 1px solid #d8e5f4; */
                 border-top: 0;
                 border-radius: 8px;
                 border-top-left-radius: 0;
                 border-top-right-radius: 0;
                 z-index: 10;
             }

             .dropdown-option {
                 padding: 12px 20px;
                 cursor: pointer;
                 transition: background-color 0.3s ease;
                 color: var(--text-black-primary);
             }

             .dropdown-option.active {
                 color: var(--text-black-primary);
                 opacity: 0.4;
             }

             .dropdown-open .options-container {
                 max-height: 500px;
                 transition: max-height 0.3s ease;
             }

             .displayNone {
                 border: 0;
             }

             .dropdown-open .dropdown-cta {
                 border-bottom: 0;
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
             }

             .dropdown-open .cta-arrow {
                 transform: rotate(180deg);
             }
         }
     }
 }

 @media (max-width: 640px) {
     & {
         &.knowledge-grid-container {
             .knowledge-grid {
                 grid-template-columns: 1fr;
             }
         }
     }
 }

 @frames timerBar {
     0% {
         width: 0;
     }

     100% {
         width: 100%;
     }
 }

 @media screen and (max-width: 1024px) {
     & {
         flex-direction: column;
         gap: 40px;
         margin-bottom: var(--spacer-60);

         .left-container {
             gap: 24px;

             .content {
                 width: 100%;
                 text-align: start;
             }
         }
     }
 }