#main {
    gap: 0 !important;
}
.brand-toolkit-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    margin: 0 auto;
}
.font-100{
    font-weight: 100 !important;
}
.font-800{
    font-weight: 800 !important;
}
.font-900{
    font-weight: 900 !important;
}
.brand-toolkit-main {
    background-color: #1434CB;
    padding-block: var(--sectionInnerSpace);
}
.brand-toolkit-box{
    border-radius: 1.5rem;
    padding: 3.0000rem 2.0000rem 2.0000rem 3.0000rem;
    overflow: hidden;
}
.brand-toolkit-box img{
    max-width: 100%;
}
.btb-01 {
    grid-column: span 3;
    grid-row: 1;
    background: #081A66;
    color: #fff;
    padding-right: 0 !important;
}
.btb-02 {
    grid-column: span 9;
    grid-row: 1;
    background: #000823;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1.5000rem;
    justify-content: space-between;
}
.btb-03 {
    grid-column: span 8;
    grid-row: 2;
    background: #fff;
    height: 19.8750rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.btb-04 {
    grid-column: span 4;
    grid-row: 2 / span 2;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.btb-04 h4 {
    z-index: 1;
    position: relative;
}
.btb-05 {
    grid-column: span 4;
    grid-row: 3;
    background: #E5F3FF;
}
.btb-06 {
    grid-column: span 4;
    grid-row: 3;
    background: #F97C00;
    color: #fff;
}
.btb-04 img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}
.btb-01 img {
    width: 18.4375rem;
    float: right;
    mix-blend-mode: soft-light;
}
.btb-01, .btb-02 {
    height: 17.5000rem;
}
.typography-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2.0000rem;
}
.typography-row p {
    margin: 0;
}
.typography-row p:first-child {
    font-size: 3.9000rem;
    font-style: normal;
    font-weight: 600;
    line-height: 3.3583rem;
    display: flex;
    gap: 1.5000rem;
}
.typography-row p:first-child .italic {
    font-weight: 100;
    color: #3F71FF;
    font-style: italic;
}
.typography-row p:last-child {
    font-size: 2.5000rem;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    letter-spacing: -0.1000rem;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.15);
    display: flex;
    gap: 1.0000rem;
}
.color-palette {
    display: flex;
    height: 9.8125rem;
    border-radius: 0.5000rem 0 0 0.5000rem;
    overflow: hidden;
}
.color-box {
    width: 11.1250rem;
    display: flex;
    padding: 1.1250rem;
    color: #fff;
    align-items: flex-end;
}
.color-box.primary-color {
    background-color: #1434CB;
}
.color-box.secondary-color {
    background-color: #F97C00;
}
.secondary-tertiary-color {
    background-color: #000823;
}
.color-box.gray-color {
    padding: 0;
    width: auto;
    flex: 1;
}
.color-box.gray-color picture,
.color-box.gray-color img {
    height: 100%;
    width: auto;
}
.btb-05, .btb-06 {
    height: 16.1875rem;
    position: relative;
    overflow: hidden;
}
.btb-05 img {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 82%;
}
.btb-06 img {
    width: 19.0000rem;
    position: absolute;
    right: 0;
    bottom: 0;
    mix-blend-mode: soft-light;
}
.brand-toolkit-main .section-header .h2, 
.brand-toolkit-main .section-header p {
    color: var(--white);
}
.brand-toolkit-main .section-header{
    max-width: 78.7500rem;
}
.bta-box-content .btn:hover svg path {
    stroke: var(--blueHover);
}
@media screen and (max-width: 1600px) {
    .btb-01, .btb-02 {
        height: 17.1250rem;
    }
    .btb-01 {
        grid-column: span 4;
    }
    .btb-02 {
        grid-column: span 8;
        gap: 0.7500rem;
    }
    .btb-01 h4.h6 {
        margin-bottom: 0.6250rem;
    }
    .typography-row {
        gap: 0.7500rem;
    }
    .typography-row p:last-child {
        line-height: 1;
        gap: 0.6250rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .typography-row p:first-child {
        flex-wrap: wrap;
    }
    .brand-toolkit-box {
        padding: 2.5000rem 2.0000rem 2.0000rem 2.5000rem;
    }
    .btb-03 {
        height: 17.5000rem;
        padding-right: 0 !important;
    }
    .btb-06 img {
        width: 16.3750rem;
    }
    .btb-01 img {
        margin-right: -1.7500rem;
    }
    .brand-toolkit-grid {
        gap: 1.5rem;
    }
}
@media screen and (max-width: 1199px) {
    .btb-01, .btb-02 {
        height: 14.7500rem;
    }
    .brand-toolkit-box {
        padding: 2.0000rem;
    }
    .btb-01 h4.h6 {
        margin-bottom: 1.5000rem;
    }
    .btb-02 {
        grid-column: span 8;
        gap: 1.5000rem;
    }
    .typography-row p:first-child {
        font-size: 2.9000rem;
    }
    .typography-row {
        gap: 1.0000rem;
    }
    .typography-row p:last-child {
        font-size: 1.5000rem;
    }    
    .btb-03 {
        height: 14.0000rem;
        justify-content: space-between;
    }
    .color-box {
        width: 7.5000rem;
        padding: 0.7500rem;
        font-size: 0.7500rem;
    }
    .color-palette {
        height: 6.6250rem;
        border-radius: 0.3750rem 0 0 0.3750rem;
    }
    .btb-03 {
        grid-column: span 7;
    }
    .btb-06 {
        grid-column: span 3;
    }
    .btb-04 {
        grid-column: span 5;
    }
    .btb-06 img {
        width: 9.5000rem;
    }
    .btb-05, .btb-06 {
        height: 13.7500rem;
    }
}
@media screen and (max-width: 991px) {
    .brand-toolkit-box {
        padding: 1.5000rem;
    }
    .btb-01 {
        grid-column: span 6;
    }
    .btb-02 {
        grid-column: span 6;
    }
    .typography-row {
        gap: 0.8750rem;
    }
    .typography-row p:first-child {
        font-size: 2.0250rem;
        line-height: 1;
        gap: 0.8750rem;
    }
    .typography-row p:last-child {
        line-height: 1;
        gap: 0.3750rem;
        font-size: 1.2500rem;
        letter-spacing: -0.0477rem;
    }
    .btb-03 {
        height: 12.3750rem;
        grid-column: span 12;
    }
    .brand-toolkit-box {
        border-radius: 1rem;
    }
    .btb-04 {
        grid-column: span 4;
        grid-row: 3;
    }
    .btb-05, .btb-06, .btb-04 {
        height: 16.1875rem;
    }
    .btb-06 {
        grid-column: span 4;
    }
    .btb-06 img {
        width: 11.3750rem;
    }
    .btb-04 img{
        object-position: top center;
    }
    .btb-05 img {
        max-height: calc(100% - 6.2500rem);
        object-fit: contain;
    }
}    
@media screen and (max-width: 767px) {
    .brand-toolkit-grid {
        display: flex;
        flex-direction: column;
    }
    .btb-01 img {
        margin-right: 0;
    }
    .brand-toolkit-box {
        height: 12.5000rem !important;
    }
    .btb-01 h4.h6 {
        margin-bottom: 1.0000rem;
    }
    .brand-toolkit-box.btb-02 {
        padding-right: 1.0000rem;
    }
    .color-box.gray-color {
        display: none;
    }
    .color-palette {
        border-radius: 0.5000rem;
    }
    .color-box {
        width: auto;
        flex: 1;
    }
    .btb-06 img {
        width: 13.5000rem;
    }
    .brand-toolkit-box.btb-04 {
        min-height: 15.0000rem;
    }
    .btb-01 img {
        width: 14.6875rem;
    }
    .btb-04 img {
        object-position: top center;
    }
    .btb-03{
        padding-right: 1.5000rem !important;
    }
}


/* ================================== Header */
.brand-toolkit-head {
    padding: calc(var(--sectionInnerSpace) / 2) 0 var(--sectionInnerSpace);
}
.brand-toolkit-head-grid {
    display: flex;
    align-items: center;
    gap: 2.0000rem;
}
.brand-toolkit-head-grid > div {
    flex: 1;
    flex-grow: 1;
    min-width: calc(50% - 1.0000rem);
}
.brand-toolkit-head-right img {
    max-width: 100%;
    width: 44.6875rem;
}
.brand-toolkit-head svg {
    position: absolute;
    left: 0;
    right: 0;
    top: 2.6250rem;
    margin: auto;
    pointer-events: none;
}
.brand-toolkit-head-left {
    display: flex;
    flex-direction: column;
    gap: 2.5000rem;
    padding-right: 8.333%;
    box-sizing: border-box;
}
.brand-toolkit-head-content p {
    margin: 0;
}
.brand-toolkit-head-content {
    display: flex;
    flex-direction: column;
    gap: 1.5000rem;
}
.brand-toolkit-head-btns {
    display: flex;
    gap: 1.5000rem;
}
.brand-toolkit-head-right {
    padding-left: 0.9375rem;
}
.brand-toolkit-head-grid {
    gap: 1.5000rem;
}
@media screen and (max-width: 1600px) {
    .brand-toolkit-head-grid {
        gap: 1.5000rem;
    }
    .brand-toolkit-head-grid > div {
        min-width: calc(50% - 0.7500rem);
    }
    .brand-toolkit-head-left {
        padding-right: 0;
    }
}
@media screen and (max-width: 1199px) {
    .brand-toolkit-head-left {
        gap: 1.5000rem;
    }
}
@media screen and (max-width: 992px) {
    .brand-toolkit-head-grid {
        align-items: flex-start;
    }
    .brand-toolkit-head-btns {
        gap: 1.1250rem;
    }
}
@media screen and (max-width: 767px) {
    .brand-toolkit-head-grid{
        flex-direction: column;
        gap: 3.0000rem;
    }
    .brand-toolkit-head-grid > div {
        width: 100%;
    }
    .brand-toolkit-head-right {
        padding-left: 0;
        text-align: center;
    }
    .brand-toolkit-head-right img {
        width: 25.0000rem;
        max-width: 100%;
    }
}
/* ================================== Header */

/* ================================== Assets */
.brand-toolkit-assets-grid {
    display: flex;
    gap: 2.0000rem;
}
.bta-box {
    flex: 1;
    border-radius: 1.5000rem;
    border: 0.0625rem solid #C7E2FF;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.bta-box-img {
    height: 15.6250rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5000rem;
}
.bta-box-img img {
    max-width: 100%;
    max-height: 100%;
}
.bta-box-01 img {
    width: 17.6250rem;
}
.bta-box-02 img {
    width: 8.2500rem;
}
.bta-box-03 img {
    width: 22.7500rem;
}
.bta-box-01 .bta-box-img {
    background: #1434CB;
}
.bta-box-02 .bta-box-img {
    background: radial-gradient(
        162.95% 93.63% at 0% 6.11%,
        #FFF 0%,
        #F4FAFF 100%
        );
}
.bta-box-content {
    display: flex;
    flex-direction: column;
    padding: 2.0000rem;
    gap: 1.1250rem;
    align-items: flex-start;
    flex-grow: 1;
}

.bta-box-03 .bta-box-img {
    background: radial-gradient(
    361.8% 116.35% at 0% 6.11%,
    #FFF 0%,
    #FFEED7 100%
    );
}
.bta-box-content .text-xl {
    min-height: 5.5000rem;
    flex-grow: 1;
    margin-bottom: 0.0000rem;
}
.brand-toolkit-assets {
    padding-block: var(--sectionInnerSpace);
}
.brand-toolkit-assets h2 {
    margin-bottom: 2.5000rem;
}
@media screen and (max-width: 1600px) {
    .brand-toolkit-assets-grid {
        gap: 1.5000rem;
    }
    .bta-box-img {
        height: 10.7500rem;
    }
    .bta-box-01 img {
        width: 12.0000rem;
    }
    .bta-box-02 img {
        width: 5.6250rem;
    }
    .bta-box-03 img {
        width: 14.8125rem;
    }
    .bta-box-content {
        gap: 1.5000rem;
    }
    .bta-box-content .text-xl {
        min-height: inherit;
    }
}
@media screen and (max-width: 1199px) {
    .bta-box {
        border-radius: 1.0000rem;
    }
    .bta-box-img {
        height: 8.1250rem;
        padding: 1.0000rem;
    }
    .bta-box-01 img {
        width: 9.1250rem;
    }
    .bta-box-02 img {
        width: 4.2500rem;
    }
    .bta-box-03 img {
        width: 11.5000rem;
    }
    .bta-box-content {
        padding: 1.5000rem;
        gap: 0.7500rem;
    }
    .brand-toolkit-assets h2 {
        margin-bottom: 1.5000rem;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .bta-box {
        flex-direction: row;
    }
    .brand-toolkit-assets-grid {
        flex-direction: column;
    }
    .bta-box-img {
        height: auto;
        padding: 1.0000rem;
        min-width: 50%;
        min-height: 15.0000rem;
    }
    .bta-box-content {
        padding: 1.5000rem 1.5000rem 1.5000rem 2.0000rem;
        gap: 0.7500rem;
    }
    .bta-box-01 img {
        width: 17.8750rem;
    }
    .bta-box-02 img {
        width: 5.3125rem;
    }
    .bta-box-03 img {
        width: 15.3125rem;
    }
}
@media screen and (max-width: 767px) {
    .brand-toolkit-assets-grid {
        flex-direction: column;
    }
    .bta-box-img {
        height: 9.0625rem;
        padding: 1.0000rem;
    }
    .bta-box-01 img {
        width: 10.2500rem;
    }
    .bta-box-content {
        gap: 1.0000rem;
    }
    .bta-box-02 img {
        width: 4.7500rem;
    }
    .bta-box-03 img {
        width: 13.1250rem;
    }
    .bta-box{
        box-shadow: 0 10px 32px -12px rgba(16, 24, 40, 0.05);
    }
}
/* ================================== Assets */