.section-container {padding: 0}

h2 {text-align: center;}

#hero-section {
    position: relative;
    background: var(--banner-bg);
    min-height: 350px;
    padding: 150px 20px 140px;
    color: var(--color-white);
}
#hero-section .rows-wrapper {
    flex-direction: column;
}
#hero-section .col-right {
    width: 50%;
    text-align: center;
}
#hero-section .col-left {
    width: 60%;
    padding-right: 40px;
}
#hero-section .col-left .calico-logo-wrapper {
    display: block;
    max-width: 250px;
}
#hero-section .page-title {
    margin: 40px 0 20px;
    color: var(--color-white);
}
#hero-section .btns-wrapper {
    justify-content: flex-start;
    margin-top: 35px;
}
#hero-section .row-bottom {
    align-items: center;
}
#hero-section .col-right img {
    max-width: 500px;
    height: auto;
    margin-top: 25px;
    margin-left: 0;
}

.promotion-banner__wrapper{gap:0 24px;grid-template-columns:auto;grid-template-rows:auto;left:50%;z-index:50;background:var(--color-white);box-shadow:var(--ti-box-shadow);position:absolute;border:1px solid var(--color-border-default);border-radius:5px;bottom:0;display:grid;align-items:center;max-width:1105px;padding:24px;text-align:center;transform:translate(-50%,50%);width:85%}
.promotion-banner__wrapper .promo-banner-title {color: var(--color-gray-900);font-size: var(--font-size-2xl);line-height:1.3}
.promotion-banner__wrapper .promo-banner-text {color: #777}
.promotion-banner__wrapper .promotion-banner__content-container a{font-weight:700;font-size: var(--font-size-sm);}
.promotion-banner__wrapper .promotion-banner__content-container a:hover{text-decoration: underline}

#counters {
    padding: 150px 0 70px;
    background-color: var(--color-bg-subtle);
}
#counters .section-container.flex {
    justify-content: center;
}
#counters .counter-item {
    flex-direction: column;
    align-items: center;
    margin: 0 50px;
}
#counters .counter-item .icon-wrapper {
    height: 52px;
}
#counters .counter-item .icon-wrapper img {
    display: block;
}
#counters .counter-item .number-wrapper {
    color: var(--e-global-color-primary );
    font-size: 1.8em;
    font-weight: 700;
}
#counters .counter-item .item-text {
    line-height: 2.5;
    font-weight: 500;
}

#wall-of-fame {
    padding: 80px 0 100px;
}
#wall-of-fame .title-wrapper {
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 63px;
}
#wall-of-fame .title-wrapper img {
    max-width: 275px;
    height: auto;
    margin: 0 20px;
}
#wall-of-fame .title-wrapper .title-text {
    margin: 0 20px;
    padding: 0;
    font-size: var(--font-size-6xl);
}
#wall-of-fame .cards-wrapper {
    flex-wrap: wrap;
}
#wall-of-fame .cards-wrapper .card-wrapper {
    width: 25%;
    margin-bottom: 10px;
}
#wall-of-fame .cards-wrapper .card-wrapper .ti-card {
    align-items: center;
    position: relative;
    height: 100%;
    margin: 0 5px;
    padding: 20px 30px 30px;
    text-align: center;
}
#wall-of-fame .cards-wrapper .card-wrapper .ti-card .logo-wrapper {
    justify-content: center;
    align-items: center;
    height: 101px;
}
#wall-of-fame .cards-wrapper .card-wrapper .ti-card .logo-wrapper img {
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
}
#wall-of-fame .cards-wrapper .card-wrapper .ti-card .entry-content {
    margin-bottom: 20px;
}
#wall-of-fame .cards-wrapper .card-wrapper .ti-card .entry-content p {
    line-height: normal;
}
#wall-of-fame .cards-wrapper .card-wrapper .ti-card .ti-btn {
    margin-top: auto;
}

#diagram-section {
    padding: 100px 0 72px;
    background: var(--color-bg-subtle);
}
#diagram-section .section-title,
#why-calico .section-title,
#involved-section .section-title {
    margin-bottom: 50px;
    padding: 10px;
}
#diagram-section .diagram-img {
    display: block;
    max-width: 600px;
    margin: 0 auto;
}

#why-calico {
    padding: 100px 0 72px;
}
#why-calico .items-wrapper {
    flex-wrap: wrap;
    justify-content: flex-start;
}
#why-calico .items-wrapper .reason-item-wrapper {
    width: 25%;
    margin-bottom: 16px;
    padding: 10px 20px;
}
#why-calico .items-wrapper .reason-item {
    padding-left: 45px;
}
#why-calico .items-wrapper .reason-item .item-title {
    position: relative;
    margin-bottom: 10px;
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.4;
}
#why-calico .items-wrapper .reason-item .item-title svg {
    position: absolute;
    top: -4px;
    right: calc(100% + 16px);
    width: 32px;
    height: 32px;
    transform: rotate(16deg);
}
#why-calico .btns-wrapper {
    margin-top: 50px;
}

#involved-section {
    padding: 88px 0;
    text-align: center;
    background: var(--color-bg-subtle);
}
#involved-section .section-container.narrow {
    max-width: 760px;
    margin: 0 auto;
}
#involved-section .section-title {
    margin-bottom: 0;
}
#involved-section .intro-text {
    position: relative;
    padding-bottom: 32px;
}
#involved-section .intro-text:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 60px;
    right: 60px;
    height: 1px;
    background: #00000021;
}
#involved-section .big-cat-wrapper {
    align-items: center;
    padding: 42px 30px 49px;
    text-align: left;
}
#involved-section .big-cat-logo {
    flex-shrink: 0;
    width: 150px;
    height: auto;
    margin: 0 40px;
}
#involved-section .big-cat-text {
    margin-bottom: 12px;
    margin-left: 24px;
}
#involved-section .big-cat-text p {
    margin-bottom: 20px;
}
#involved-section .btns-wrapper {
    justify-content: flex-start;
}
#involved-section .inv-class-title {
    max-width: 800px;
    margin: 0 auto;
}
#involved-section .cards-wrapper {
    flex-wrap: wrap;
    margin-top: 18px;
    text-align: left;
}
#involved-section .card-wrapper {
    width: 25%;
    margin-bottom: 40px;
}
#involved-section .card-wrapper .ti-card {
    align-items: flex-start;
    position: relative;
    height: 100%;
    margin: 0 5px;
    padding: 30px;
}
#involved-section .card-wrapper .ti-card .card_title {
    margin-bottom: 10px;
    line-height: 1.35;
}
#involved-section .card-wrapper .ti-card .entry-content {
    margin-bottom: 30px;
    line-height: 1.33;
    font-size: var(--font-size-base);
    font-weight: 500;
}
#involved-section .card-wrapper .ti-card .ti-btn {
    margin-top: auto;
}
#involved-section .card-wrapper .ti-card.updates .entry-content {
    margin-bottom: 33px;
}
#involved-section .card-wrapper .ti-card .link-wrapper {
    position: relative;
    padding-left: 38px;
    font-size: var(--font-size-base);
    font-weight: 500;
}
#involved-section .card-wrapper .ti-card .link-wrapper + .link-wrapper {
    margin-top: 13px;
}
#involved-section .card-wrapper .ti-card .link-wrapper img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
#involved-section .card-wrapper .card-item .link-wrapper:last-child:before {
    font-family: 'Font Awesome 5 Free';
}

#getting-started {
    padding: 100px 0;
}
#getting-started .links-wrapper {
    justify-content: center;
    margin-top: 53px;
    font-size: var(--font-size-base);
}
#getting-started .links-wrapper .link-item {
    margin: 0 50px;
    text-align: center;
}
#getting-started .links-wrapper .link-item:first-child {
    margin-left: 10px;
}
#getting-started .links-wrapper .link-item .icon-wrapper {
    display: block;
    margin-bottom: 40px;
}
#getting-started .links-wrapper .link-item a {
    font-weight: 500;
    color: var(--color-brand-secondary);
}

#editions {
    padding: 100px 0;
    background: var(--color-bg-subtle)
}
#editions .section-title {
    margin-bottom: 30px;
}
/* Updated Product Editions */
.calico-network-diagram {
    text-align: center;
    margin-bottom: 0px; 
    position: relative;
    max-width: 925px; 
    margin: 0 auto;
}

.calico-network-diagram .central-logo {
    width: auto;
    height: 60px;
    margin-bottom: 10px;
}

.calico-network-diagram .connecting-lines {
    width: 100%;
    height: 80px;
    position: relative;
}

.calico-network-diagram .connecting-lines svg {
    display: block;
    width: 100%;
}

#editions .editions-items {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 0;
}

/* Individual Card Styling */
#editions .editions-items .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: var(--color-white);
    border: 1px solid var(--color-border-default);
    border-radius: 5px;
    padding: 50px 24px;
    flex-basis: 30%; /* Default for ~3 items */
    min-height: 289px;
    margin-bottom: 0;
    text-align: center;
}

#editions .editions-items.cards-4 .item {
    flex-basis: 23.45%;
}

#editions .editions-items .item .item-title {
    font-weight: 700;
    font-size: 21px;
    line-height: 32px;
    text-align: center;
    color: var(--color-gray-900);
    margin-bottom: 10px;
    padding-bottom: 0;
}

#editions .editions-items .item .item-desc {
    font-weight: 500;
    font-size: var(--font-size-base);
    line-height: 24px; 
    text-align: center;
    color: var(--color-gray-900);
    margin-bottom: 20px;
}
.mailing-list__wrapper{background:url(/app/themes/tigera2021/dist/img/mailing-list-bg.svg) no-repeat top/cover;padding:50px 20px}
.mailing-list__wrapper .mailing-list__container{align-items:center;background-color:var(--color-white);border-radius:5px;box-shadow:var(--ti-box-shadow);display:grid;gap:0 25%;grid-template-columns:1fr;grid-template-rows:1fr;justify-content:center;padding:30px;margin:0 auto;width:100%}
.mailing-list__wrapper .mailing-list__container .mailing-list__container-content h2{font-size: var(--font-size-3xl);font-weight:700;text-align:left}.mailing-list__wrapper .mktoForm label{display:none;visibility:hidden}.mailing-list__wrapper .mktoForm .mktoFieldWrap .mktoField{line-height:21px!important;margin-bottom:10px;padding:13px 24px!important}.mailing-list__wrapper .mailing-list__container .mailing-list__container-form .mktoForm .mktoField:focus{outline-color:var(--color-brand-secondary)}
@media screen and (min-width: 36em) {
    .mailing-list__wrapper .mailing-list__container{max-width:540px !important}
}
@media screen and (min-width: 48em) {
    .mailing-list__wrapper .mailing-list__container{max-width:720px !important;grid-template-columns:1fr 1fr;padding:70px 100px}
    .promotion-banner__wrapper {
        grid-template-columns:100px 1fr;min-width:auto;text-align:left;width:1016px;max-width:96%
    }
    .promotion-banner__wrapper .promo-banner-title{margin:0}
}
@media screen and (min-width: 64em) {
    .mailing-list__wrapper .mailing-list__container{max-width:960px !important}
}
@media screen and (min-width: 1224px) {
    .mailing-list__wrapper .mailing-list__container{max-width:1224px !important}
}

@media screen and (max-width: 1199px) {
    #hero-section .col-right img {
        max-width: 100%;
    }
    #wall-of-fame .cards-wrapper .card-wrapper .card-item {
        padding: 20px;
    }
    #wall-of-fame .cards-wrapper .card-wrapper .card-item .logo-wrapper {
        height: 80px;
    }
    #involved-section .card-wrapper .card-item {
        padding: 20px;
    }
    #editions .editions-items .item { 
        flex-basis: 32%;
        padding: 30px 25px;
    }
}

@media screen and (max-width: 1023px) {
    #hero-section {
        padding-bottom: 150px;
    }
    #hero-section .calico-logo-wrapper {
        position: absolute;
        top: -2px;
        width: 152px;
    }
    #hero-section .row-bottom .col-right {
        display: none;
    }
    #hero-section .col-left {
        width: auto;
        text-align: center;
    }
    #hero-section .row-top .col-left {
        width: 50%;
    }
    #hero-section .btns-wrapper {
        justify-content: center;
        margin-top: 30px;
    }
    #counters .counter-item {
        margin: 0 30px;
    }
    #counters .counter-item .item-text {
        line-height: 1.4;
        margin-top: 6px;
        text-align: center;
    }

    #diagram-section, #why-calico, #involved-section, #getting-started {
        padding: 70px 0;
    }

    #wall-of-fame .title-wrapper img {
        max-width: 199px;
    }
    #wall-of-fame .cards-wrapper .card-wrapper,
    #involved-section .card-wrapper {
        width: 50%;
        margin-bottom: 10px;
    }
    #why-calico .items-wrapper .reason-item-wrapper {
        width: 50%;
    }
    #involved-section .inv-crads2 {
        margin-top: 60px;
    }
    #getting-started .links-wrapper .link-item {
        margin: 0 20px;
    }
    #editions .editions-items {
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    #editions .editions-items .item,
    #editions .editions-items.cards-4 .item {
        flex-basis: auto;
        width: 100%;
        max-width: 320px;
        margin: 0 0 20px 0;
    }

    .calico-network-diagram .central-logo {
        margin-bottom: 20px;
    }
    .calico-network-diagram .connecting-lines {
        display: none;
    }

    body .mailing-list__wrapper .mailing-list__container {
        gap: 0 25%;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        justify-content: center;
        padding: 30px;
    }
    .mailing-list__wrapper .mailing-list__container .mailing-list__container-content h2 {
        line-height: 1.3;
    }
    #editions .editions-items .item {
        min-height: 260px;
    }
}

@media screen and (max-width: 767px) {
    .menu-hamburger {
        order: 3;
        justify-content: flex-end;
        width: 8%;
    }
    .menu-right {
        margin-left: auto;
    }
    #hero-section {
        padding-top: 164px;
        padding-bottom: 230px;
    }
    #hero-section .page-title {
        font-size: var(--font-size-2xl);
    }
    #hero-section .col-left {
        padding-right: 0;
    }
    #hero-section .row-top .col-left {
        width: 0;
    }
    #hero-section .row-top .col-right {
        width: 100%;
    }
    #hero-section .calico-logo-wrapper {
        top: -54px;
        width: 190px;
        left: 0;
    }
    #hero-section .row-bottom {
        margin-top: 0;
    }
    .promotion-banner__wrapper .promo-banner-text {font-size: 15px}
    #counters {
        padding-top: 234px;
    }
    #counters .section-container.flex {
        flex-direction: column;
    }
    #counters .counter-item + .counter-item {
        margin-top: 12px;
    }
    #wall-of-fame .section-container,
    #diagram-section .section-container,
    #why-calico .section-container,
    #involved-section .section-container,
    #editions .section-container {
        padding: 0 20px;
    }
    #wall-of-fame .title-wrapper {
        flex-direction: column;
        align-items: center;
    }
    #wall-of-fame .title-wrapper .title-text, 
    #diagram-section .section-title, 
    #why-calico .section-title, 
    #involved-section .section-title,
    #getting-started .section-title,
    #editions .section-title {
        font-size: var(--font-size-3xl);
    }
    #wall-of-fame .title-wrapper img {
        margin-bottom: 10px;
    }
    #wall-of-fame .title-text {
        margin-top: 12px;
    }
    #wall-of-fame .cards-wrapper .card-wrapper, #involved-section .card-wrapper {
        width: 100%;
    }
    #involved-section .btns-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    #involved-section .big-cat-wrapper {
        flex-direction: column;
    }
    #getting-started .links-wrapper {
        flex-direction: column;
        flex-wrap: wrap;
    }
    #getting-started .links-wrapper .link-item {
        margin: 10px;
    }
    #why-calico .items-wrapper .reason-item-wrapper {
        width: 100%;
    }
    #getting-started .links-wrapper .link-item .fas {
        margin-bottom: 20px;;
    }
    #editions .editions-items .item,
    #editions .editions-items.cards-4 .item {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
    }
    #getting-started .links-wrapper .link-item .icon-wrapper {
        margin-bottom: 0;
    }
    #getting-started .links-wrapper .link-item {
        margin-bottom: 30px;
    }

    #diagram-section .diagram-img {
        max-width: 100%;
    }
}

@media screen and (max-width: 1223px) {
    #editions .editions-items {
        gap: 12px;
    }
    #editions .editions-items .item {
         flex-basis: 30%; /* Fallback/Approx for 3 items */
    }
    #editions .editions-items.cards-4 .item {
         flex-basis: 24%;
    }
}