/* ==========================================================================
   1. GLOBAL VARIABLES & BASE STYLES
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 25px;
}

h1, h2, h3, h4 {
    font-weight: 600;
}

h3 {
    font-weight: 600;
}

a:hover {
    transition: all 0.2s;
}

.faq-mwb__content a {
    color: var(--base-light-color);
    border-bottom: 3px solid #333;
   	font-weight: 500;

}

.faq-mwb__content a:hover {
    color: var(--base-light-color);
    border-bottom: 3px solid var(--accent-hover-color);
	font-weight: 500;
}

mark {
    background-color: var(--accent-hover-color) !important;
}

span.disclaimer {
    font-size: .8em;
    font-style: italic;
}

.green { color: #bded33}
.orange { color: #f15823}
.blue { color: #103eff}
.purple { color: #6c63ff}
.navy { color: #11122c}
.white { color: #f7f7f7}

/* ==========================================================================
   2. BUTTONS & CTAS
   ========================================================================== */
a.button.button--cta {
    background-color: var(--links-hover-light);
    background-image: var(--button-primary-bg-image);
    border-color: var(--button-primary-border);
    color: var(--text-color);
    -webkit-text-decoration-color: transparent;
    text-decoration-color: transparent;
    text-transform: var(--button-primary-transform, var(--button-transform));
}

.button.button--cta.active, 
.button.button--cta:focus-visible, 
.button.button--cta:hover {
    background-color: var(--button-secondary-bg-hover);
    background-image: var(--button-secondary-bg-image-hover);
    border-color: var(--button-secondary-border-hover, var(--button-secondary-bg-hover));
    box-shadow: var(--button-secondary-glow-hover);
    color: var(--text-color);
    -webkit-text-decoration-color: var(--base-light-color), transparent;
    text-decoration-color: var(--accent-hover-color);
}

a.button.button--secondary {
    background-color: var(--accent-color);
}

.button.button--text-link--lite {
    text-transform: var(--button-text-link-transform, var(--button-transform));
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    border: none;
    color: var(--button-primary-text-hover) !important;
    text-decoration-color: var(--button-text-link-underline);
    text-align: inherit;
}

@media (max-width: 780px) {
  .theme-ctas.text--right > a.button.button--text-link {
    font-size: 12px;
  }
}

/* ==========================================================================
   3. NAVIGATION & BREADCRUMBS
   ========================================================================== */
.page-nav-wrapper {
    top: 0px !important;
}

.breadcrumb-bx > ul > li > a {
    font-weight: 400 !important;
    letter-spacing: 1px;
}

.breadcrumb-bx > ul > li:before {
    display: none;
}

.breadcrumb-bx > ul > li {
    padding-left: 0px;
}

@media (max-width: 780px) {
    .breadcrumb-sec .breadcrumb-bx {
        display: block !important; 
        max-width: 100% !important; 
        overflow: hidden !important; 
    }

    .breadcrumb-sec .breadcrumb-bx > ul {
        display: flex !important;
        flex-wrap: nowrap !important; 
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; 
        scrollbar-width: none !important; 
        padding-bottom: 5px !important; 
        width: 100% !important;
    }

    .breadcrumb-sec .breadcrumb-bx > ul::-webkit-scrollbar {
        display: none !important; 
    }

    .breadcrumb-sec .breadcrumb-bx > ul > li {
        flex-shrink: 0 !important; 
        white-space: nowrap !important; 
    }
    
    .breadcrumb-sec .breadcrumb-bx > ul > li > a {
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   4. FORMS & LEGAL
   ========================================================================== */
.theme-form-wrapper--boxin:after {
    border-radius: 0px !important;
}

li.hs-form-checkbox {
    display: inline-flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding-right: 10px;
}

.legal-consent-container > div {
    font-size: .8em;
}

/* ==========================================================================
   5. LAYOUT, GRIDS & SECTIONS
   ========================================================================== */

.module-wrapper--light {
    color: var(--base-light-color);
}

.grid-flex {
    width: 100% !important;
    min-width: 100% !important;
    display: block !important;
}

#widget_1759279947238.banner-box-section.layout-three {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.99), rgba(17, 18, 44, 0.7), rgba(17, 18, 44, 0.3), rgba(0, 0, 0, 1)) !important;
}

.content_grid_section.layout_two .main-box .second-box .cta-box a {
    gap: 8px;
}

.content_grid_section.layout_three {
    background-color: transparent !important;
    padding: 0px !important;
}

.sec-list-wrap {
    color: #fff !important;
}

.sec-list-wrap ul li {
    border-bottom: 1px solid #3844e861;
    padding: 20px 0;
}

li.tab-box-n::before {
    list-style-type: none !important;
    display: none;
}
.tab-pannel-wrap-view {padding-left: 0px !important;}
.tab-pannel-wrap-view .tabs-view-content {
    padding: 2rem !important;
}

.tab-con-modfry .tab-panel li {
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
}

/* ==========================================================================
   6. UI COMPONENTS (Tabs, Accordions, FAQs, Steps)
   ========================================================================== */
/* Tabs */
.tabs__body-content, 
.tabs__card-background {
    border-radius: 0px !important;
}

.tabs-view ul li a {
    font-weight: 500 !important;
    line-height: 1.4em !important;
}

.tab-pannel-wrap-view h2 {
    font-weight: 600 !important;
}

.tab-pannel-wrap-view .tabs-view-content p, 
.tab-pannel-wrap-view .tabs-view-content ul li, 
.tab-pannel-wrap-view .tabs-view-content p span, 
.tab-with-content-modfry .tab-con-modfry .tabs-view ul li p {
    font-weight: 400 !important;
}

.icon-hub.icons-tab-view img {
    background-color: var(--accent-hover-color) !important;
    padding: 5px;
}

li.tabs_boxes-tb {
    list-style-type: none !important;
    border: 1px solid #050D4F;
}

li.tabs_boxes-tb::before {
    display: none;
}

li.tabs_boxes-tb:hover {
    transform: scale(1.05);
}

/* Accordions & FAQs */
.accordion-with-background-color-content-outer .accordion-with-background-color-content-inner .button {
    max-width: 100% !important;
}

.faq-box {
    border-bottom: 1px solid var(--medium-light-bg) !important;
}

details.faq-question {
    border-bottom: 1px solid var(--medium-light-bg) !important;
}

/* Lists & Steps */
ul.arrow li::before {
    color: #00000000;
    background-image: url(https://7139015.fs1.hubspotusercontent-na1.net/hubfs/7139015/next-arrow-right.svg);
    width: 20px;
}

.timeline-grid_item-top-left {
    margin-bottom: -133px;
}

.two-column-steps.layout_two .text-box ul li p a {
    color: var(--accent-color);
    text-decoration: underline;
}

.two-column-steps .steps-wrapper {
    margin: 0 !important;
    max-width: 100% !important;
}

.event_sections.layout_two .content_filter_tab .content_event_col:hover::before {
    background-color: var(--glow-color) !important;
    opacity: .7 !important;
}

.event_sections.layout_two .filter_top_layout_two {
    border-bottom: 1px solid #050d4f;
}

/* Leadership Boxes */
.main-box {    transition: all 0.5s ease-in-out;}

.main-box:hover {
    scale: 105%;
    box-shadow: 0 0 40px rgb(0 0 0 / 14%);
}

@media (max-width: 768px) {
  div#widget_1759279947238 {
      padding-top: 0px !important;
  }

  #widget_1759279947238.banner-box-section.layout-three .img-box img {
      height: 250px;
      width: auto;
      float: inline-end;
      float"right:";
      margin-bottom: -12rem;
      opacity: .5;
      z-index: -9999999;
      position: relative;
  }
}

/* ==========================================================================
   7. CARDS, QUOTES & TESTIMONIALS
   ========================================================================== */
.misaligned_cards .image {
    background-color: #fafafa00 !important;
}

.misaligned_cards .card .content .title {
    line-height: normal !important;
}

.stylized-quote-ltwm__quote-text, 
.stylized-quote-ltwm__meta-text-company, 
.stylized-quote-ltwm__meta-text-title {
    font-weight: 200 !important;
}

figure.stylized-quote-ltwm.stylized-quote-ltwm__horizontal-align--center {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.interactive-testimonial-carousel-and-rating .button {
    border-radius: 0px !important;
}

.jake-overlap-card .jake-header-with-line__middle {
    color: var(--base-light-color) !important;
    font-weight: 600 !important;
}

.jake-overlap-card .jake-header-with-line__top {
    font-weight: 400 !important;
}

@media (max-width: 780px) {
  .service_boxes_by_growmeda.title {
      text-align: center;
      width: 100%;
      margin-bottom: 10px;
  }
}

/* ==========================================================================
   8. BLOG, RESOURCES & MASONRY
   ========================================================================== */
.blog-slider-with-zoom_img {
    border-radius: 0px !important;
    transform: skew(-10deg);
}

.blog-slider-with-zoom_content {
    border-radius: 0px !important;
}

.blog-slider-with-zoom_tag {
    background-color: #494ab0;
    padding: 10px;
}

.related-blog-item__info > .theme-rich-text__main {
    padding: 1em;
}

.related-posts__posts .related-blog-item__info .eyebrow {
    font-size: 14px;
    color: var(--glow-color);
}

a.click-control-element {
    font-size: .9em !important;
}

.related-posts__posts .related-blog-item__info h3 a {
    background-image: linear-gradient(var(--accent-hover-color), var(--accent-hover-color)) !important;
}

.masonry-gallery__item--image img {
    transition: all .3s ease-in-out;
}

.masonry-gallery__item--image img:hover {
    margin-left: 10px;
    box-shadow: 0px 0px 40px -10px var(--glow-color);
}

.blog-post__content a {
    color: #000 !important;
    font-weight: 800;
    border-bottom: 2px solid #000;
}

.blog-post__content a:hover {
    color: #000 !important;
    font-weight: 800;
    border-bottom: 2px solid #000;
}

@media (max-width: 780px) {
    .blog-post--light {
        background-color: var(--base-color) !important;
    }
    .hero-blog-post > .module-wrapper__inner { 
        display: block !important;
    }
    .social-media.icon-wrapper--enclosed .social-media__service {
        margin: 0px auto;
    }
    section.resource-library {
     padding: 0px 15px;
    }
}


/* Glossary */
.glossary-nav-list {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 20px 0 0 0;
  margin: 0;
}

ul.glossary-nav-list li {
  padding-left: 0 !important;
  list-style-type: none;
}

.glossary-nav-list li::before, ul.glossary-nav-list li::before {
  display: none;
  padding-left: 0px !important;
  --bullet-image: none;
  --bullet-image-height: 0px;
  --bullet-image-width: 0px;
} 

.glossary-nav-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background-color: #FFFFFF;
  border: 1px solid #E2E2E2;
  color: var(--subheadline-light-color);
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.glossary-nav-list a:hover, 
.glossary-nav-list a:focus {
  background-color: var(--accent-color);
  color: #FFFFFF;
  border-color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(16, 62, 255, 0.2);
}


/* ==========================================================================
   9. SERVICES & WORK PROCESS
   ========================================================================== */
.services-slider__text .theme-rich-text h3 {
    font: var(--h4-font);
}

.services-slider__text .eyebrow__part, 
.services-slider__text .card-tag__part {
    font-size: 11px;
    background-color: var(--h2-light-color);
    padding: 10px;
    margin-left: -1.5em;
    color: var(--accent-hover-color);
}

.services-slider__text .eyebrow__part:hover, 
.services-slider__text .card-tag__part:hover {
    background-color: var(--button-form-text-hover);
    cursor: pointer;
}

.bt-pgp > p {
    font-weight: 400;
}

.bt-pgp > p > div {
    display: inline !important;
}

.con_des, 
.OurProcess .single-process .content .con_des, 
.OurProcess .single-process .content h3, 
.OurProcess .progress-wrapper .steps {
    font-weight: 400 !important;
}

.OurProcess .single-process .icon {
    margin-bottom: 0 !important;
}

.content ul li::before, 
.OurProcess .single-process .content ul li::before {
    list-style-type: none !important;
    display: none !important;
}

.OurProcess .single-process .content ul li {
    display: block !important;
    align-items: baseline !important;
    font-weight: 400 !important;
    list-style-type: none !important;
}

.OurProcess .single-process {
    padding: 0px 30px 30px !important;
}

#hs_cos_wrapper_widget_1769545091423 .OurProcess .home2-process-wrapper {
    border-left: 10px solid var(--accent-hover-color) !important;
}

i.bi.bi-plus {
    margin-left: -16px;
    font-weight: 900 !important;
    color: var(--accent-color);
}

.scttl h2 {
    font-weight: 700 !important;
}

.OurProcess .progress-wrapper svg circle {
    stroke-width: 35px !important;
}

#hs_cos_wrapper_widget_1769545091423 .OurProcess .progress-wrapper #pageIndicator {
    font-weight: 600 !important;
}

/* Service Detail Boxes */
.service-detail-box-outer .inner .top-head h3 {
    font-weight: 400 !important;
    letter-spacing: 1px !important;
}

.service-detail-box-outer .inner .main-head h2 {
    font-weight: 600 !important;
}

.service-detail-box-outer .inner .box-group .box .box-cont .title a h4 {
    position: relative;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

.service-detail-box-outer .inner .box-group .box .box-cont .title a h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px; 
    width: 100%;
    height: 2px;
    background-color: var(--accent-hover-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.service-detail-box-outer .inner .box-group .box .box-cont .title a:hover h4::after {
    transform: scaleX(1);
}

.service-detail-box-outer .inner .box-group .box .box-cont .dsc p {
    font-weight: 300 !important;
    letter-spacing: normal !important;
}

.service-detail-box-outer .inner .box-group .box .icond svg {
    width: 36px;
}

/* Service Boxes by Growmeda */
.service_boxes_by_growmeda.box {
    display: flex;
    align-items: center;
    gap: 20px; 
}

.service_boxes_by_growmeda.icond {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.service_boxes_by_growmeda.icond svg {
    width: 36px;
    height: 36px;
    display: block;
}

.service_boxes_by_growmeda.box-cont {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.service_boxes_by_growmeda.title h4 {
    margin: 0;
}

@media only screen (max-width: 980px) {
    .service-detail-box-outer .inner .box-group .box {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}

/* ==========================================================================
   10. LOCATIONS
   ========================================================================== */
.section-locations-list--alt .section__group {
    width: 100% !important;
}

.section-locations-list--alt .grid-flex .grid__col {
    max-width: 100% !important;
}

#locationDetails .feature-location ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.2rem 2rem;
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
}

#locationDetails .feature-location li {
    min-width: 0;
}

#locationDetails .feature-location a {
    display: inline-block;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#locationDetails .section-locations-list--alt .feature-location li,
#locationDetails.section-locations-list--alt .feature-location li {
    max-width: 100% !important;
}

#locationDetails .section-locations-list--alt .feature-location li,
#locationDetails.section-locations-list--alt .feature-location li {
    padding: 10px 0;
}

li.map-mwb__details-item::before {
    list-style-type: none !important;
    content: none !important;
}

/* ==========================================================================
   11. METRICS & COUNTERS
   ========================================================================== */
#metrics .row-fluid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
}

#metrics .counter {
    flex: 40%;
    max-width: 100%;
    float: none !important; 
    margin-left: 0 !important; 
}

@media (max-width: 767px) {
    #metrics .counter {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.banner-box-section.layout-three .count_value_section ul li {
    border-top: 0px !important;
    border-right: 0px !important;
    border-bottom: 0px !important;
}

.banner-box-section.layout-three .count_value_section ul li::before {
    display: none !important; 
}

#stats-quad .module-wrapper__inner .row-fluid {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
}

#stats-quad .counter {
    width: calc(40% - var(--gutter));
    margin: 10px;
}

/* ==========================================================================
   12. COMPARISON TABLE
   ========================================================================== */
.comparison-table-table table {
    border-collapse: collapse; 
}

.comparison-table-table tbody tr {
    transition: background-color 0.1s ease-in-out;
}

.comparison-table-table tbody tr:hover {
    background-color: var(--button-form-text) !important;
}

.comparison-table-table tbody tr:hover td {
    color: var(--text-color) !important;
}

.comparison-table-table tbody tr:hover td:first-child {
    color: var(--base-color) !important;
    font-weight: 700;
}

.comparison-table-table tbody tr:hover td:nth-child(2) {
    background-color: var(--accent-color);
}

.comparison-table-table tbody tr:hover td:nth-child(2) .fa-check {
    transform: scale(1.5);
    transition: transform 0.2s ease-back;
}

#comparison-table-table_6578 th:first-child, 
td:first-child {
    min-width: 400px;
}

@media (max-width: 980px) {
    #comparison-table-table_6578 th:first-child, 
    td:first-child {
        min-width: auto;
    }
}

/* ==========================================================================
   13. GLOSSARY & KEY POINTS
   ========================================================================== */
.key-points-head h2, 
.key-points-para p {
    color: var(--text-color);
}

.some-value-box-wrapper {
    background-color: var(--text-color);
    padding: 30px;
    margin: 0px auto 50px;
}

.some-value-box-wrapper:hover {
    box-shadow: 0px 0px 10px var(--footer-child-color);
}

.key-points .card-head {
    width: 100% !important;
}

.card-head h3, 
.card-bottom p {
    color: var(--text-dark);
}

.card-bottom > a {
    color: var(--accent-color);
}

.bottom-para ul  {
    border-top: 1px solid rgb(0 0 0 / 7%);
}

.bottom-para ul li {
    margin: 20px 0;
    color: #000;
}

.bottom-para ul li a {
    color: var(--accent-color);
    text-decoration: none;
}

.bottom-para ul li a:hover {
    color: var(--links-hover-light);
    text-decoration: underline;
}

/* ==========================================================================
   14. LOGO MARQUEE
   ========================================================================== */
#marquee {
    position: relative;
    overflow: hidden;
}

#marquee::before,
#marquee::after {
    content: "";
    position: absolute;
    top: 0;
    width: 72px;
    height: 100%;
    z-index: 999;
    pointer-events: none;
}

#marquee::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}

#marquee::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
}

#marquee .logos__list {
    display: flex;
    align-items: center;
    gap: var(--marquee-gap, 32px);
    width: max-content;
    will-change: transform;
    transform: translate3d(0,0,0);
    margin: 0;
    padding: 0;
    list-style: none;
}

#marquee .logos__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#marquee .logos__item img {
    width: 100%;
    height: 44px;              
    object-fit: contain;        
    display: block;
    filter: invert(.2) grayscale(1) brightness(1.5);
    transition: filter 0.35s ease, opacity 0.35s ease;
}

#marquee .logos__item img:hover {
    filter: none;
}

/* ==========================================================================
   15. ECOSYSTEM WIDGET
   ========================================================================== */
.ecosystem-widget {
    position: relative;
    display: grid;
    grid-template-columns: minmax(60%, 40%) 1fr;
    gap: 60px;
    align-items: center;
    background: var(--background-color);
    padding: 60px;
    border-radius: var(--radius-lg);
    margin: 40px auto;
    overflow: hidden;
}

@media (max-width: 900px) {
    .ecosystem-widget { 
        grid-template-columns: 1fr; 
        padding: 30px; 
        gap: 40px; 
        text-align: center;
    }
}

.eco-target {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    height: 0; 
    opacity: 0;
}

.graphic-container {
    position: relative;
    filter: drop-shadow(0 10px 15px #002D56);
}

.graphic-container svg {
    width: 100%;
    height: auto;
    max-width: 550px;
    margin: 0 auto;
    display: block;
    overflow: visible;
}

.graphic-container svg a { 
    outline: none; 
    cursor: pointer; 
}

.wedge {
    fill: var(--background-color);
    stroke: var(--text-color);
    stroke-width: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: 110px 110px;
}

.outer-ring {
    fill: var(--accent-color);
    stroke: var(--accent-color);
    stroke-width: 30px;
    transition: all 0.3s ease;
}

.core {
    fill: var(--accent-hover-color);
}

.label-text {
    fill: var(--text-color);
    font-size: 6px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-anchor: middle;
    pointer-events: none;
}

.core-text {
    fill: var(--background-color);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-anchor: middle;
    pointer-events: none;
}

.graphic-container a:hover .wedge { 
    transform: scale(1.05); 
    fill: var(--glow-color);
    z-index: 10;
}

.info-panel { 
    position: relative; 
    min-height: 280px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: var(--background-color);
    padding: 0 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-card.default-instruction {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    text-align: center;
    border: 1px dashed var(--pagination);
    padding: 40px;
    color: var(--text-gray);
}

.default-instruction h3 {
    margin-bottom: 10px;
}

.info-card h4 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--button-secondary-bg-hover);
    margin-bottom: 8px;
    font-weight: 300;
}

.info-card h3 {
    line-height: 1.1;
    color: var(--light-bg);
    margin: 0 0 16px 0;
    font-weight: 400;
}

.info-card p {
    color: var(--text-color);
    margin-bottom: 16px;
}

.info-card strong {
    color: var(--text-color);
}

.eco-clear {
    display: inline-block;
    margin-top: auto;
    text-decoration: none;
    font-weight: 600;
    color: var(--base-color);
    border-bottom: 2px solid var(--accent-hover-color);
    transition: all 0.2s;
    align-self: flex-start;
}

.eco-clear:hover {
    color: var(--glow-color);
    border-color: var(--glow-color);
}

/* Active States */
#eco-identity:target ~ .info-panel .default-instruction,
#eco-cloud:target ~ .info-panel .default-instruction,
#eco-network:target ~ .info-panel .default-instruction,
#eco-endpoint:target ~ .info-panel .default-instruction,
#eco-security:target ~ .info-panel .default-instruction {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
}

#eco-identity:target ~ .info-panel .card-identity,
#eco-cloud:target ~ .info-panel .card-cloud,
#eco-network:target ~ .info-panel .card-network,
#eco-endpoint:target ~ .info-panel .card-endpoint,
#eco-security:target ~ .info-panel .card-security {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

#eco-identity:target ~ .graphic-container #shape-identity,
#eco-cloud:target ~ .graphic-container #shape-cloud,
#eco-network:target ~ .graphic-container #shape-network,
#eco-endpoint:target ~ .graphic-container #shape-endpoint {
    fill: var(--glow-color);
    transform: scale(1.08);
    z-index: 100;
}

#eco-security:target ~ .graphic-container #shape-security {
    /* Insert target logic if needed */
}